*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #18181b;--surface: #27272a;--border: #3f3f46;--text: #fafafa;--text-dim: #a1a1aa;--accent-propano: #5b9bf5;--accent-butano: #f0a45d;--accent-safe: #34d399;--radius: 8px;--green: #22c55e;--yellow: #eab308;--red: #f87171;--propane: #f87171;--isobutane: #60a5fa;--bg-primary: var(--bg);--bg-secondary: var(--surface);--bg-card: var(--surface);--bg-card-hover: #2e2e33;--text-primary: var(--text);--text-secondary: var(--text-dim);--text-muted: var(--text-dim);--accent: var(--accent-propano);--accent-glow: rgba(91, 155, 245, .2);--radius-sm: 6px}html{font-size:16px}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased}#app{max-width:1120px;margin:0 auto;padding:2rem 1.5rem 3rem;display:flex;flex-direction:column;gap:1rem;min-height:100vh}header{text-align:center;margin-bottom:2.5rem}.developed-by{font-size:.65rem;color:var(--text-dim);font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.75rem}header h1{font-size:1.75rem;font-weight:600;letter-spacing:-.03em;color:var(--text-primary)}.subtitle{font-size:.85rem;color:var(--text-dim);font-weight:300;margin-top:.25rem;max-width:36rem;margin-left:auto;margin-right:auto;line-height:1.45}.header-actions{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}.btn-info{margin-top:0;padding:.4rem 1rem;font-size:.75rem;font-weight:500;font-family:inherit;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:6px;cursor:pointer;letter-spacing:.02em;transition:border-color .15s,color .15s}.btn-info:hover{color:var(--text);border-color:var(--accent-propano)}.settings-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);cursor:pointer;transition:color .15s,border-color .15s,background .15s}.settings-btn:hover,.settings-btn.active{color:var(--text-primary);border-color:var(--accent-propano);background:#5b9bf514}.modal-overlay{display:none;position:fixed;inset:0;background:#000000d9;z-index:100}.modal-overlay.open{display:block;cursor:pointer;pointer-events:auto}.modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;z-index:101;width:340px;max-width:90vw;box-shadow:0 16px 48px #00000080}.modal.open{display:block}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}.modal-header h2{font-size:1rem;font-weight:600;color:var(--text-primary)}.modal-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text-muted);font-size:1.2rem;line-height:1;font-family:inherit;cursor:pointer;transition:color .15s,border-color .15s}.modal-close:hover{color:var(--text-primary);border-color:var(--accent-propano)}.modal-section{margin-bottom:1.25rem}.modal-section:last-child{margin-bottom:0}.modal-section-title{font-size:.7rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem}.overlay{position:fixed;inset:0;z-index:110;background:#000000d9;display:flex;align-items:center;justify-content:center;padding:1.5rem}.overlay.hidden{display:none}.overlay-inner{max-width:560px;width:100%;display:flex;flex-direction:column;gap:1rem;touch-action:pan-y}.overlay-header{display:flex;justify-content:space-between;align-items:center}.page-indicator{font-size:.72rem;color:var(--text-dim);font-variant-numeric:tabular-nums}.btn-close{width:32px;height:32px;font-size:1.2rem;line-height:1;font-family:inherit;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:color .15s,border-color .15s}.btn-close:hover{color:var(--text);border-color:var(--accent-propano)}.carousel{position:relative;overflow:hidden}.carousel .card{display:none}.carousel .card.active{display:block}.carousel-nav{display:flex;align-items:center;justify-content:center;gap:1rem}.btn-nav{width:32px;height:32px;font-size:1rem;font-family:inherit;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:color .15s,border-color .15s;flex-shrink:0;display:flex;align-items:center;justify-content:center}.btn-nav:hover{color:var(--text);border-color:var(--accent-propano)}.btn-nav:disabled{opacity:.25;cursor:default}.dots{display:flex;gap:.4rem}.dots span{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background .15s}.dots span.active{background:var(--accent-propano)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem}.card h2{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:.6rem;letter-spacing:-.01em}.card p{font-size:.8rem;line-height:1.6;color:var(--text-dim);margin-bottom:.5rem}.card p:last-child{margin-bottom:0}.card strong{color:var(--text);font-weight:500}.card em{font-style:italic}.card .formula{font-family:Courier New,monospace;font-size:.85rem;color:var(--accent-propano);text-align:center;padding:.5rem 0}.card ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.4rem}.card li{font-size:.78rem;line-height:1.5;color:var(--text-dim);padding-left:1rem;position:relative}.card li:before{content:"";position:absolute;left:0;top:.5em;width:4px;height:4px;border-radius:50%;background:var(--border)}.card-warning{border-color:#ef44444d}.card-warning h2{color:#ef4444}.param-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.param{display:flex;flex-direction:column;gap:.15rem}.param strong{font-size:.78rem;color:var(--text)}.param span{font-size:.72rem;color:var(--text-dim);line-height:1.5}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.6rem}.settings-row:last-child{margin-bottom:0}.settings-row label{font-size:.8rem;font-weight:500;color:var(--text-muted)}.settings-row select,.settings-row input[type=number]{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.4rem .7rem;color:var(--text-primary);font-family:inherit;font-size:.85rem;font-weight:500;outline:none;transition:border-color .2s ease;width:110px}.settings-row select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238888a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;padding-right:2rem}.settings-row select:focus,.settings-row input[type=number]:focus{border-color:var(--accent-propano);box-shadow:0 0 0 2px var(--accent-glow)}.settings-row select option{background:var(--bg-card);color:var(--text-primary)}.settings-row input[type=number]{font-variant-numeric:tabular-nums;text-align:right}.settings-slider-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}.settings-slider-row:last-child{margin-bottom:0}.settings-slider-row label{font-size:.8rem;font-weight:500;color:var(--text-muted);min-width:6.5em}.settings-slider-row input[type=range]{flex:1}.settings-slider-val{font-size:.82rem;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums;min-width:2.5em;text-align:right}.control-card .control-group input[type=range]{margin-bottom:.25rem}input.g-slider-mix{--g-slider-pct: 70%;height:4px;border-radius:2px;background:linear-gradient(to right,var(--isobutane) 0%,var(--isobutane) var(--g-slider-pct),var(--propane) var(--g-slider-pct),var(--propane) 100%)}input.g-slider-mix::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-propano);border:2px solid var(--bg-primary);box-shadow:0 0 0 1px #5b9bf54d;transition:box-shadow .15s}input.g-slider-mix::-webkit-slider-thumb:hover{box-shadow:0 0 0 4px #5b9bf526}input.g-slider-mix::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent-propano);border:2px solid var(--bg-primary);cursor:pointer}.tab-nav{display:flex;gap:2px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:4px;overflow-x:auto}.tab-btn{flex:1;padding:.6rem .75rem;background:transparent;color:var(--text-muted);border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.tab-btn:hover{color:var(--text-secondary);background:#ffffff08}.tab-btn.active{background:var(--bg-card);color:var(--text-primary);box-shadow:none}.tab-panel{display:none;flex:1}.tab-panel.active{display:block}.workspace{display:grid;grid-template-columns:minmax(260px,280px) 1fr;grid-template-areas:"controls charts";gap:1rem;min-height:460px;align-items:start}.workspace>.side-cards{grid-area:controls}.workspace-charts{grid-area:charts;min-width:0;display:flex;flex-direction:column;min-height:460px}.workspace-charts>.tab-panel{display:none;flex:1;flex-direction:column;min-height:0}.workspace-charts>.tab-panel.active{display:flex}.workspace-charts .chart-column{flex:1;display:flex;flex-direction:column;gap:.75rem;min-width:0;min-height:0}.tab-nav--under-chart{flex-shrink:0}.workspace-charts .chart-wrap{flex:1}.panel-center{display:flex;justify-content:center;align-items:flex-start}.chart-wrap{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;position:relative;min-height:420px}.chart-wrap canvas{width:100%!important;height:100%!important}.side-cards{display:flex;flex-direction:column;gap:.7rem}.info-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.3rem;transition:background .2s ease,border-color .2s ease}.info-card:hover{background:var(--bg-card-hover);border-color:#52525b}.info-label{font-size:.7rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.info-value{font-size:1.25rem;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}.control-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:1rem}.control-card .control-group label{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.35rem}.control-card .label-text{font-size:.78rem;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;flex:1;min-width:0}.control-card .label-text--two-lines{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}.control-card .label-text-line{display:block}.control-card .label-value{font-size:.82rem;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.slider-labels{display:flex;justify-content:space-between;margin-top:.4rem;font-size:.68rem;color:var(--text-muted)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-propano);border:2px solid var(--bg-primary);box-shadow:0 0 0 1px #5b9bf54d;transition:box-shadow .15s}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 4px #5b9bf526}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent-propano);border:2px solid var(--bg-primary);cursor:pointer}.side-divider{height:1px;background:var(--border);margin:.2rem 0}.vapor-stats-card{gap:.85rem}.vapor-stats-card .vapor-stat-block{display:flex;flex-direction:column;gap:.3rem}.tank-reading{display:flex;align-items:baseline;gap:.6rem}.tank-secondary{font-size:.78rem;color:var(--text-muted);font-weight:400}.tank-safety-badge{display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:.2em .6em;border-radius:999px;margin-top:.25rem;width:fit-content}.tank-pressure-card.safe .tank-safety-badge{color:var(--green);background:#22c55e1a}.tank-pressure-card.caution .tank-safety-badge{color:var(--yellow);background:#eab3081a}.tank-pressure-card.danger .tank-safety-badge{color:var(--red);background:#ef44441a}.calc-form{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;max-width:640px;width:100%}.calc-title{font-size:1.1rem;font-weight:600;margin-bottom:1.5rem;color:var(--text-primary)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.form-group{display:flex;flex-direction:column;gap:.4rem}.form-group label{font-size:.72rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.form-group input[type=number]{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.65rem .85rem;color:var(--text-primary);font-family:inherit;font-size:.95rem;font-variant-numeric:tabular-nums;outline:none;transition:border-color .2s ease}.form-group input[type=number]:focus{border-color:var(--accent-propano);box-shadow:0 0 0 2px var(--accent-glow)}.calc-results{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.8rem}.result-item{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;background:var(--bg-secondary);border-radius:var(--radius-sm)}.result-item.accent{background:#5b9bf514;border:1px solid rgba(91,155,245,.22)}.result-label{font-size:.78rem;color:var(--text-secondary);font-weight:500}.result-value{font-size:1.05rem;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}.result-item.accent .result-value{color:var(--accent);font-size:1.15rem}@media(max-width:860px){.workspace{grid-template-columns:1fr;grid-template-areas:"charts" "controls"}.workspace-charts{min-height:0}.chart-wrap{min-height:320px}.tab-nav{overflow-x:auto}.form-row{grid-template-columns:1fr}}