:root{--bg:#f2efe6;--bg-strong:#fbf8f2;--surface:#fffcf6b8;--surface-strong:#fffcf6e6;--border:#1c36431f;--text:#14323b;--muted:#5d747a;--accent:#0f766e;--accent-soft:#0f766e1f;--accent-strong:#ef8354;--shadow:0 24px 70px #0e232b1f;--grid:#14323b1f;--font-body:"Avenir Next", "Segoe UI", sans-serif;--font-display:"Gill Sans", "Avenir Next Condensed", sans-serif;--font-mono:"IBM Plex Mono", "SFMono-Regular", monospace;color:var(--text);font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at 0 0,#83c5be5c,#0000 38%),radial-gradient(circle at 100% 0,#ef83543d,#0000 34%),linear-gradient(#f7f4ec 0%,#ebe6d9 100%);line-height:1.5}html[data-theme=dark]{--bg:#07141a;--bg-strong:#0c1e26;--surface:#081a22c7;--surface-strong:#0a1e28eb;--border:#a1d2ff1f;--text:#eef8fb;--muted:#9bb1ba;--accent:#73d2de;--accent-soft:#73d2de29;--accent-strong:#ffb870;--shadow:0 24px 70px #00000061;--grid:#f1f8fb1f;background:radial-gradient(circle at 0 0,#2f778257,#0000 32%),radial-gradient(circle at 100% 0,#ef83542e,#0000 30%),linear-gradient(#08161b 0%,#10262f 100%)}*{box-sizing:border-box}body{background:0 0;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#root{min-height:100vh}.app-shell{width:min(1380px,100% - 24px);margin:0 auto;padding:22px 0 38px}.hero-panel,.panel{border:1px solid var(--border);background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow);border-radius:28px}.hero-panel{gap:20px;margin-bottom:20px;padding:28px 30px;display:grid}.hero-copy h1{font:700 clamp(2rem, 5vw, 4rem) / 1 var(--font-display);letter-spacing:-.04em;margin:8px 0 12px}.hero-copy p{max-width:72ch;color:var(--muted);margin:0}.hero-kicker,.panel-kicker,.section-label{text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin:0;font-size:.72rem}.hero-chip-row,.segment-group,.button-row,.graph-header-metrics,.molecule-legend,.graph-legend,.quiz-options{flex-wrap:wrap;gap:10px;display:flex}.hero-chip,.mini-badge{border:1px solid var(--border);background:var(--surface-strong);color:var(--text);border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:.92rem;display:inline-flex}.top-grid,.visual-grid{gap:20px;margin-bottom:20px;display:grid}.top-grid{grid-template-columns:minmax(360px,440px) minmax(0,1fr)}.visual-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.panel{padding:22px}.panel-heading{margin-bottom:18px}.panel-heading h2,.control-section h3,.event-list-block h3,.quiz-stack h3,.insight-card h3{font-family:var(--font-display);letter-spacing:-.03em;margin:6px 0}.panel-heading p:last-child,.small-note,.insight-card p,.quiz-card p{color:var(--muted);margin:0}.error-note{color:#b45309;margin:12px 0 0}html[data-theme=dark] .error-note{color:#fbbf24}.control-section{border-top:1px solid var(--border);margin-top:16px;padding-top:16px}.control-row,.slider-footer,.species-value-item,.rate-balance,.event-item{justify-content:space-between;align-items:center;gap:12px;display:flex}.field-block{gap:8px;display:grid}.select-input,.number-input{border:1px solid var(--border);background:var(--surface-strong);width:100%;color:var(--text);border-radius:16px;padding:12px 14px}.segment,.button-primary,.button-secondary,.quiz-option{border:1px solid #0000;border-radius:999px;padding:10px 16px;transition:transform .16s,background-color .16s,border-color .16s}.segment,.button-secondary,.quiz-option{background:var(--surface-strong);color:var(--text);border-color:var(--border)}.button-primary{background:linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);color:#fff}.segment.is-active,.button-secondary.is-active,.quiz-option.is-selected{background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent) 55%, transparent);color:var(--text)}.segment:hover,.button-primary:hover,.button-secondary:hover,.quiz-option:hover{transform:translateY(-1px)}.species-input-grid,.status-grid,.learning-grid{gap:14px;display:grid}.species-input-grid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}.species-input-card,.stat-card,.insight-card,.quiz-card{border:1px solid var(--border);background:var(--surface-strong);border-radius:20px;padding:14px}.species-title{margin-bottom:8px;font-weight:700;display:block}.range-input{width:100%;accent-color:var(--accent)}.slider-block{gap:8px;display:grid}.numeric-readout,.formula-box{font-family:var(--font-mono);font-size:.92rem}.status-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:14px}.stat-label{color:var(--muted);margin-bottom:8px;display:block}.stat-value{font-size:1.2rem;font-family:var(--font-display);display:block}.rate-balance{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:10px 0 16px;padding:14px 0}.rate-balance div{gap:4px;display:grid}.rate-balance strong{font-family:var(--font-mono)}.species-value-list,.event-list,.insight-stack,.quiz-stack{gap:12px;display:grid}.species-value-item strong,.legend-chip strong{display:block}.species-value-item small,.legend-chip small{color:var(--muted)}.species-swatch{border-radius:999px;flex:none;width:12px;height:12px}.event-list{margin:0;padding:0;list-style:none}.event-item{border:1px solid var(--border);background:var(--surface-strong);border-radius:16px;align-items:flex-start;padding:10px 12px}.vessel-stage{background:linear-gradient(#73d2de1f,#0000 55%),radial-gradient(circle at 0 100%,#ef83541f,#0000 32%),#05161b14;border-radius:22px;min-height:320px;position:relative;overflow:hidden}.vessel-stage[data-canvas-status=unsupported] .vessel-canvas{display:none}.vessel-canvas{width:100%;height:320px;display:block}.canvas-fallback{text-align:center;color:var(--text);margin:0;display:none;position:absolute;inset:50% 24px auto;transform:translateY(-50%)}.vessel-stage[data-canvas-status=unsupported] .canvas-fallback{display:block}.vessel-overlay{flex-wrap:wrap;gap:8px;display:flex;position:absolute;inset:16px 16px auto auto}.vessel-badge{color:#fff;background:#07141aa3;border-radius:999px;padding:8px 12px;font-size:.88rem}.graph-surface{border:1px solid var(--border);background:var(--surface-strong);border-radius:22px;overflow:hidden}.graph-surface svg{width:100%;height:auto;display:block}.graph-grid{stroke:var(--grid);stroke-width:1px}.graph-axis{stroke:color-mix(in srgb, var(--text) 55%, transparent);stroke-width:1.4px}.graph-axis-label,.graph-event-label{fill:var(--muted);font-size:11px;font-family:var(--font-mono)}.graph-event-label{writing-mode:vertical-rl}.graph-line{fill:none;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.graph-equilibrium{fill:none;stroke-dasharray:6 5;stroke-width:1.6px;opacity:.72}.graph-event-line{stroke:color-mix(in srgb, var(--accent-strong) 70%, transparent);stroke-dasharray:4 6;stroke-width:1.4px}.graph-legend,.molecule-legend{margin-top:14px}.legend-chip{border:1px solid var(--border);background:var(--surface-strong);border-radius:18px;align-items:center;gap:10px;padding:10px 12px;display:flex}.learning-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.formula-box{border:1px dashed var(--border);background:var(--accent-soft);border-radius:16px;margin:8px 0;padding:12px}.quiz-prompt{color:var(--text);margin-bottom:10px}.answer-state{margin-top:10px;font-size:.95rem}.answer-state.is-correct{color:#1e7a59}.answer-state.is-incorrect{color:#c05a34}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html[data-theme=dark] .answer-state.is-correct{color:#83ffcd}html[data-theme=dark] .answer-state.is-incorrect{color:#ffbe8d}@media (width<=1120px){.top-grid,.visual-grid,.learning-grid{grid-template-columns:1fr}}@media (width<=720px){.app-shell{width:min(100% - 14px,1380px);padding-top:14px}.hero-panel,.panel{border-radius:22px;padding:18px}.status-grid{grid-template-columns:1fr}.species-input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vessel-canvas{height:280px}}