:root{--bg-base:#050810;--bg-deep:#020308;--surface-1:#0f172ac7;--surface-2:#141e32b3;--surface-3:#1e293b99;--surface-elevated:#0b1424;--border:#94a3b829;--border-strong:#94a3b852;--text:#d8e2f3;--text-strong:#f8fafc;--text-muted:#8a9ab1;--text-faint:#5d6b82;--accent:#fb923c;--accent-soft:#fb923c2e;--good:#34d399;--warn:#fbbf24;--danger:#f87171;--shadow-lg:0 20px 60px #00000080;--shadow-md:0 8px 24px #00000052;--radius-lg:22px;--radius-md:14px;--radius-sm:10px;--font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--engine-color:#fb923c;--engine-glow:#fb923c8c;color:var(--text);background:var(--bg-base);font-family:var(--font-sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;line-height:1.55}*{box-sizing:border-box}html,body{min-height:100vh;margin:0;padding:0}body{background-color:#0000;background-image:radial-gradient(circle at 12% 8%,#fb923c29,#0000 38rem),radial-gradient(circle at 88% 12%,#22d3ee24,#0000 32rem),radial-gradient(circle at 50% 100%,#a78bfa1f,#0000 36rem),linear-gradient(160deg,#050810 0%,#08111f 38%,#050810 100%);background-position:0 0,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,repeat;background-size:auto,auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;min-width:320px}#root{min-height:100vh}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none;padding:0}a{color:var(--accent)}h1,h2,h3,h4,p,ul,ol,dl,dd,dt,figure{margin:0;padding:0}ul,ol{list-style:none}h1,h2,h3{color:var(--text-strong);letter-spacing:-.02em;font-weight:700}h1{letter-spacing:-.04em;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.04}h2{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.18}h3{font-size:1rem;line-height:1.3}::selection{background:var(--accent);color:#0b0b0b}input[type=range]{appearance:none;cursor:pointer;width:100%;height:6px;accent-color:var(--engine-color);background:#94a3b833;border-radius:999px;outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;border:3px solid var(--engine-color);background:#f8fafc;border-radius:50%;width:18px;height:18px;transition:transform .14s;box-shadow:0 4px 12px #00000073}input[type=range]::-moz-range-thumb{border:3px solid var(--engine-color);background:#f8fafc;border-radius:50%;width:18px;height:18px;box-shadow:0 4px 12px #00000073}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}input[type=range]:focus-visible::-webkit-slider-thumb{transform:scale(1.1)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app-shell{gap:28px;width:min(1480px,100%);margin:0 auto;padding:32px clamp(16px,3vw,40px) 64px;display:grid}.app-header{grid-template-columns:minmax(0,1fr) minmax(280px,460px);align-items:end;gap:32px;padding:8px 4px 0;display:grid}.app-brand{align-items:center;gap:18px;display:flex}.brand-mark{background:linear-gradient(135deg,#fb923c 0%,#f87171 60%,#a78bfa 100%);border-radius:16px;place-items:center;width:56px;height:56px;display:grid;box-shadow:0 12px 30px #fb923c59}.brand-mark svg{fill:none;stroke:#0b1424;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:32px;height:32px}.brand-text{gap:4px;display:grid}.brand-eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);font-size:.7rem;font-weight:700}.app-tagline{color:var(--text-muted);text-align:right;justify-self:end;max-width:460px;font-size:1.02rem;line-height:1.55}.app-main{grid-template-columns:320px minmax(0,1fr) 360px;align-items:start;gap:24px;display:grid}.app-sidebar{gap:24px;display:grid;position:sticky;top:24px}.app-stage{gap:24px;min-width:0;display:grid}.info-column{gap:24px;display:grid;position:sticky;top:24px}.app-footer{text-align:center;color:var(--text-faint);border-top:1px solid var(--border);padding-top:16px;font-size:.85rem}.panel{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(18px);padding:22px;position:relative;overflow:hidden}.panel:before{content:"";pointer-events:none;background:radial-gradient(140% 80% at 0% 0%, color-mix(in srgb, var(--engine-color) 8%, transparent) 0%, transparent 50%);opacity:.6;position:absolute;inset:0}.panel-header{z-index:1;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;display:flex;position:relative}.section-eyebrow{color:var(--text-muted);letter-spacing:.2em;text-transform:uppercase;align-items:center;gap:8px;margin-bottom:6px;font-size:.68rem;font-weight:800;display:inline-flex}.live-eyebrow{color:var(--good)}.pulse-dot{background:var(--good);width:8px;height:8px;box-shadow:0 0 12px var(--good);border-radius:50%;animation:1.6s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}.engine-picker{gap:10px;display:grid}.engine-card{text-align:left;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-2);width:100%;color:var(--text);gap:6px;padding:14px 16px;transition:border-color .18s,transform .18s,background .18s;display:grid;position:relative;overflow:hidden}.engine-card:before{content:"";background:var(--engine-color);width:4px;position:absolute;top:0;bottom:0;left:0}.engine-card:hover{border-color:var(--engine-color);background:#1e293bd9;transform:translateY(-1px)}.engine-card.active{border-color:var(--engine-color);background:linear-gradient(120deg, color-mix(in srgb, var(--engine-color) 16%, transparent) 0%, var(--surface-2) 100%);box-shadow:0 0 0 1px var(--engine-color), 0 12px 30px var(--engine-glow)}.engine-card-name{color:var(--text-strong);font-size:.98rem;font-weight:700}.engine-card-subtitle{color:var(--text-muted);font-size:.83rem;line-height:1.4}.engine-card-meta{color:var(--text-muted);align-items:baseline;gap:6px;margin-top:6px;font-size:.78rem;display:flex}.engine-card-meta strong{font-family:var(--font-mono);color:var(--engine-color);font-size:.95rem}.time-block,.sliders-block{border-top:1px solid var(--border);z-index:1;gap:16px;margin-top:22px;padding-top:22px;display:grid;position:relative}.time-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.btn{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-3);color:var(--text-strong);letter-spacing:.01em;justify-content:center;align-items:center;gap:6px;padding:10px 14px;font-size:.88rem;font-weight:700;transition:background .16s,border-color .16s,transform .16s;display:inline-flex}.btn:hover{border-color:var(--engine-color);transform:translateY(-1px)}.btn-primary{background:var(--engine-color);color:#0b0b0b;border-color:var(--engine-color);box-shadow:0 8px 22px var(--engine-glow)}.btn-primary.playing{background:#f87171eb;border-color:#f87171eb;box-shadow:0 8px 22px #f8717166}.btn-secondary{background:var(--surface-elevated)}.btn-ghost{color:var(--text-muted);background:0 0;grid-column:span 2}.btn-ghost:hover{color:var(--text-strong)}.slider{gap:8px;display:grid}.slider-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.slider-label{color:var(--text-muted);font-size:.85rem;font-weight:600}.slider-value{font-family:var(--font-mono);color:var(--text-strong);font-size:.95rem}.slider-help{color:var(--text-faint);font-size:.74rem;line-height:1.4}.viz-panel{gap:20px;padding:24px;display:grid}.viz-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.viz-subtitle{color:var(--text-muted);max-width:520px;margin-top:6px;font-size:.88rem}.viz-status{text-align:right;gap:6px;min-width:220px;display:grid}.viz-status-pill{background:color-mix(in srgb, var(--engine-color) 22%, transparent);border:1px solid var(--engine-color);color:var(--text-strong);border-radius:999px;width:fit-content;margin-left:auto;padding:6px 12px;font-size:.85rem;font-weight:700;display:inline-block}.viz-status-meta{color:var(--text-muted);font-size:.78rem}.viz-status-meta strong{color:var(--text-strong);font-family:var(--font-mono)}.engine-svg{border-radius:var(--radius-md);border:1px solid var(--border);background:linear-gradient(#02061766 0%,#0206171a 100%);width:100%;height:auto;display:block}.viz-grid{fill:#0206178c}.runner{fill:none}.runner path:not(.runner-flow){stroke:#94a3b86b;stroke-width:18px;stroke-linecap:round}.runner-flow{fill:none;stroke:var(--engine-color);stroke-width:12px;stroke-linecap:round;opacity:0;transition:opacity .16s}.runner-flow.active{opacity:.85;stroke-dasharray:14 12;animation:1.6s linear infinite flow-dash}.intake-runner .runner-flow.active{stroke:#38bdf8}.exhaust-runner .runner-flow.active{stroke:#f97316}.viz-paused .runner-flow.active{animation-play-state:paused}@keyframes flow-dash{to{stroke-dashoffset:-26px}}.runner-label{fill:var(--text-faint);font-family:var(--font-mono);letter-spacing:.16em;font-size:11px}.engine-block{fill:url(#block-gradient);stroke:#94a3b852;stroke-width:1.5px}.cooling-fins line{stroke:#94a3b866;stroke-width:2px;stroke-linecap:round}.cylinder-content{transition:fill .36s,opacity .36s}.valve-stem{stroke:#cbd5e1;stroke-width:5px;stroke-linecap:round}.valve-head{fill:#94a3b8;stroke:#475569;stroke-width:1.5px;transition:fill .22s}.valve.open .valve-head{fill:#34d399}.valve.open .valve-stem{stroke:#a7f3d0}.valve-spring line{stroke:#cbd5e199;stroke-width:1.5px}.port-label{fill:var(--text-faint);font-family:var(--font-mono);text-anchor:middle;letter-spacing:.06em;font-size:11px}.port{fill:#0f172af2;stroke:#94a3b866;stroke-width:1.5px}.port.active{fill:var(--engine-color);stroke:var(--engine-color)}.spark-plug .plug-body{fill:#475569;stroke:#94a3b8;stroke-width:1.5px}.plug-tip{stroke:#94a3b8;stroke-width:2px}.spark-arc{fill:none;stroke:#fde047;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px #fde047d9);animation:90ms steps(2,end) infinite spark-flicker}@keyframes spark-flicker{to{opacity:.55}}.injector-body{fill:#475569;stroke:#94a3b8;stroke-width:1.5px}.injector-spray{stroke:#a7f3d0;stroke-width:2.5px;stroke-linecap:round;fill:none;opacity:.85}.injector-droplet{fill:#a7f3d0;opacity:.9;animation:.32s ease-out infinite droplet-fall}@keyframes droplet-fall{0%{opacity:.2;transform:translateY(-8px)}to{opacity:.9;transform:translateY(0)}}.viz-paused .spark-arc,.viz-paused .injector-droplet{animation-play-state:paused}.piston-group{transition:transform 80ms linear}.piston-body{stroke:#0f172ad9;stroke-width:1.5px}.piston-ring{stroke:#475569;stroke-width:1.5px}.piston-crown{stroke:#0f172a99;stroke-width:2px}.piston-skirt{stroke:#94a3b873;stroke-width:1.5px}.piston-pin{fill:#1e293b;stroke:#94a3b8;stroke-width:1.5px}.connecting-rod{transition:transform 60ms linear}.rod-small-end{fill:#cbd5e1;stroke:#1e293b;stroke-width:2px}.rod-big-end{fill:#94a3b8;stroke:#1e293b;stroke-width:2.5px}.rod-pin-hole{fill:#0f172a}.crankshaft .crank-arm{stroke:#e2e8f0;stroke-width:14px;stroke-linecap:round}.counterweight{fill:#475569;stroke:#1e293b;stroke-width:2px}.main-bearing{fill:#e2e8f0;stroke:#1e293b;stroke-width:2px}.bearing-pin{fill:#0f172a}.crank-pin{fill:var(--engine-color);stroke:#0f172a;stroke-width:2px}.legend-text{fill:var(--text-faint);letter-spacing:.05em;font-size:10px}.legend-swatch{stroke:#94a3b8;stroke-width:4px;stroke-linecap:round}.legend-dot.active-dot{fill:var(--engine-color)}.viz-footer{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.viz-readout{border-radius:var(--radius-sm);background:var(--surface-3);border:1px solid var(--border);gap:4px;padding:12px 14px;display:grid}.viz-readout span{color:var(--text-faint);letter-spacing:.06em;text-transform:uppercase;font-size:.72rem}.viz-readout strong{color:var(--text-strong);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.1rem}.timeline-panel{padding:24px}.timeline-degrees{font-family:var(--font-mono);color:var(--text-muted);font-size:.85rem}.timeline-track{border-radius:var(--radius-md);background:var(--surface-3);border:1px solid var(--border);height:92px;position:relative;overflow:hidden}.timeline-segment{border-radius:var(--radius-sm);border:1px solid var(--border);border-left:4px solid color-mix(in srgb, var(--engine-color) 50%, transparent);height:56px;color:var(--text);text-align:left;cursor:pointer;background:#94a3b81a;flex-direction:column;justify-content:center;gap:4px;padding:0 14px;transition:background .18s,border-color .18s,transform .18s;display:flex;position:absolute;top:8px}.timeline-segment:hover{background:#94a3b833;transform:translateY(-1px)}.timeline-segment.active{background:color-mix(in srgb, var(--engine-color) 18%, transparent);border-color:var(--engine-color);border-left-color:var(--engine-color)}.timeline-segment-name{color:var(--text-strong);font-size:.85rem;font-weight:700}.timeline-segment-range{font-family:var(--font-mono);color:var(--text-muted);font-size:.7rem}.timeline-cursor{background:var(--engine-color);width:3px;box-shadow:0 0 16px var(--engine-glow);pointer-events:none;border-radius:2px;transition:left 80ms linear;position:absolute;top:4px;bottom:28px}.timeline-cursor:before{content:"";background:var(--engine-color);clip-path:polygon(50% 100%,0 0,100% 0);width:15px;height:12px;position:absolute;top:-6px;left:-6px}.timeline-rail-marks{pointer-events:none;height:18px;position:absolute;bottom:4px;left:0;right:0}.timeline-rail-marks span{font-family:var(--font-mono);color:var(--text-faint);font-size:.62rem;position:absolute;transform:translate(-50%)}.timeline-hint{color:var(--text-faint);margin-top:12px;font-size:.78rem}.pv-panel{padding:24px}.pv-mode-badge{font-family:var(--font-mono);background:var(--surface-3);color:var(--engine-color);border:1px solid var(--engine-color);border-radius:999px;padding:4px 10px;font-size:.78rem}.pv-svg{border-radius:var(--radius-md);background:var(--surface-3);border:1px solid var(--border);width:100%;height:auto}.pv-bg{fill:#02061766}.pv-grid line{stroke:#94a3b81f;stroke-width:1px}.pv-axis-label{fill:var(--text-faint);font-family:var(--font-mono);font-size:10px}.pv-axis-title{fill:var(--text-muted);letter-spacing:.04em;font-size:11px;font-weight:600}.pv-curve{fill:none;stroke:var(--engine-color);stroke-width:2.5px;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--engine-glow))}.pv-cursor{fill:var(--text-strong);stroke:var(--engine-color);stroke-width:2px}.pv-cursor-glow{fill:var(--engine-color);opacity:.3;animation:1.4s ease-in-out infinite pv-pulse}@keyframes pv-pulse{0%,to{opacity:.18;transform:scale(1)}50%{opacity:.45;transform:scale(1.25)}}.pv-explanation{color:var(--text-muted);margin-top:14px;font-size:.86rem;line-height:1.55}.live-info-panel{padding:24px}.phase-summary{color:var(--text);margin-bottom:18px;font-size:.95rem;line-height:1.55}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.metric{border-radius:var(--radius-sm);background:var(--surface-3);border:1px solid var(--border);gap:4px;padding:12px 14px;display:grid}.metric-label{color:var(--text-faint);letter-spacing:.06em;text-transform:uppercase;font-size:.7rem}.metric-value{color:var(--text-strong);font-family:var(--font-mono);font-variant-numeric:tabular-nums;min-width:5ch;font-size:1.05rem}.phase-progress{gap:6px;margin-top:18px;display:grid}.phase-progress-bar{background:#94a3b829;border-radius:999px;height:6px;overflow:hidden}.phase-progress-fill{background:var(--engine-color);height:100%;box-shadow:0 0 14px var(--engine-glow);transition:width .1s linear}.phase-progress-label{color:var(--text-faint);font-size:.72rem;font-family:var(--font-mono)}.deep-dive{grid-template-rows:auto auto;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;display:grid}.principle-panel{grid-area:1/1}.specs-panel{grid-area:1/2}.phases-panel{grid-area:2/1}.comparison-panel{grid-area:2/2}.principle-text{color:var(--text);margin-top:8px;font-size:.96rem;line-height:1.6}.principle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px;display:grid}.principle-grid h3{color:var(--engine-color);margin-bottom:8px}.principle-grid p{color:var(--text-muted);font-size:.9rem;line-height:1.55}.specs-list{gap:0;margin-top:12px;display:grid}.specs-row{border-bottom:1px dashed var(--border);grid-template-columns:minmax(140px,.8fr) minmax(0,1fr);gap:12px;padding:10px 0;display:grid}.specs-row:last-child{border-bottom:none}.specs-row dt{color:var(--text-muted);font-size:.84rem}.specs-row dd{color:var(--text-strong);font-family:var(--font-mono);text-align:right;font-size:.86rem}.phases-list{gap:14px;margin-top:14px;display:grid}.phase-detail-item{border-radius:var(--radius-md);background:var(--surface-3);border:1px solid var(--border);border-left:4px solid var(--engine-color);gap:8px;padding:16px;display:grid}.phase-detail-head{align-items:center;gap:14px;display:flex}.phase-step-number{font-family:var(--font-mono);color:var(--engine-color);background:color-mix(in srgb, var(--engine-color) 14%, transparent);border-radius:12px;place-items:center;width:44px;height:44px;font-size:1.4rem;font-weight:700;display:grid}.phase-detail-head h3{font-size:1.05rem}.phase-detail-head small{color:var(--text-faint);font-family:var(--font-mono);font-size:.78rem}.phase-detail-item p{color:var(--text-muted);font-size:.9rem;line-height:1.6}.comparison-table-wrap{border-radius:var(--radius-md);border:1px solid var(--border);margin:14px 0 18px;overflow-x:auto}.comparison-table{border-collapse:collapse;width:100%;font-size:.84rem}.comparison-table th,.comparison-table td{text-align:left;border-bottom:1px solid var(--border);color:var(--text);padding:10px 14px}.comparison-table thead th{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);background:var(--surface-3);font-size:.74rem}.comparison-table tbody th{color:var(--text-muted);background:var(--surface-2);width:36%;font-weight:600}.comparison-table .col-active{background:color-mix(in srgb, var(--engine-color) 14%, transparent);color:var(--text-strong);font-weight:700}.pros-cons{grid-template-columns:1fr 1fr;gap:18px;margin-top:4px;display:grid}.pros-cons h3{color:var(--engine-color);margin-bottom:8px;font-size:.95rem}.pros-cons ul{gap:8px;display:grid}.pros-cons li{color:var(--text-muted);padding-left:18px;font-size:.88rem;line-height:1.5;position:relative}.pros-cons li:before{content:"";background:var(--engine-color);opacity:.7;border-radius:50%;width:8px;height:8px;position:absolute;top:.6em;left:0}@media (width<=1280px){.app-main{grid-template-columns:280px minmax(0,1fr)}.info-column{grid-column:span 2;position:static}}@media (width<=1080px){.app-header{grid-template-columns:1fr;align-items:start}.app-tagline{text-align:left;justify-self:start}.app-main{grid-template-columns:1fr}.app-sidebar,.info-column{position:static}.info-column{grid-column:auto}.deep-dive{grid-template-columns:1fr}.principle-panel,.specs-panel,.phases-panel,.comparison-panel{grid-area:auto/1}.viz-footer{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=720px){.app-shell{gap:18px;padding:18px 14px 36px}.panel{border-radius:18px;padding:18px}.viz-status{text-align:left;margin-top:12px}.viz-status-pill{margin-left:0}.metrics-grid,.principle-grid,.pros-cons,.time-actions{grid-template-columns:1fr}.btn-ghost{grid-column:auto}.timeline-segment-range{display:none}}