*{box-sizing:border-box} :root{--bg:#071018;--card:#0d1a24;--line:#263844;--text:#f4f7f9;--muted:#9fb0bc;--accent:#56d38b;--blue:#43a5ff;--orange:#ff7a36;--yellow:#f3c743}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 18% 10%,#153142 0,transparent 35%),linear-gradient(135deg,#050b10,#0a1620);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
.app{max-width:1200px;margin:auto;padding:40px 24px 56px}
header{margin-bottom:28px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--accent);font-weight:800;margin:0 0 8px}
h1{font-size:clamp(2rem,5vw,4.5rem);line-height:.95;margin:0;letter-spacing:-.055em}.subtitle{color:var(--muted);font-size:1.05rem}
.stage{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:22px;align-items:stretch}
.engine-card,.panel{background:linear-gradient(160deg,rgba(19,38,51,.92),rgba(8,19,27,.96));border:1px solid rgba(255,255,255,.08);border-radius:28px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.engine-card{display:grid;place-items:center;min-height:650px;overflow:hidden}
#engine{width:min(100%,650px);height:auto}.block{fill:#344651;stroke:#78909c;stroke-width:8}.bore{fill:#101a21;stroke:#677985;stroke-width:7}.tube-wall{fill:none;stroke:#647983;stroke-width:46;stroke-linecap:butt}.tube-inner{fill:none;stroke:#14222b;stroke-width:32;stroke-linecap:butt}
.valve line{stroke:#c3ccd3;stroke-width:16;stroke-linecap:round}.valve rect{fill:#c3ccd3;stroke:#515b62;stroke-width:4}.spark rect{fill:url(#metal);stroke:#505b63;stroke-width:4}.spark path{fill:none;stroke:#e9eff2;stroke-width:6;stroke-linecap:round}
.gas{fill:rgba(57,170,255,.28)}.piston-rings{stroke:#4d575f;stroke-width:7}.pin,.joint{fill:url(#metal);stroke:#4f5961;stroke-width:5}.rod{stroke:#aeb9c2;stroke-width:24;stroke-linecap:round}.crank-web{fill:#b7c1c9;stroke:#4f5961;stroke-width:5;stroke-linejoin:round}.crank-journal{fill:#87929b;stroke:#4f5961;stroke-width:5}
.particle{stroke:rgba(4,10,15,.35);stroke-width:1}
.panel{padding:34px;display:flex;flex-direction:column}.phase-number{font-size:.8rem;letter-spacing:.2em;color:var(--accent);font-weight:900}h2{font-size:clamp(2.4rem,5vw,4.8rem);letter-spacing:-.06em;margin:8px 0 14px;line-height:.9}
#phaseDescription{color:var(--muted);line-height:1.65;min-height:82px}.progress{height:5px;border-radius:999px;background:#263641;overflow:hidden;margin:15px 0 28px}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#c7ffdd)}
.phase-tabs{display:grid;gap:10px}.phase-tabs button{display:flex;gap:12px;align-items:center;background:transparent;color:var(--muted);border:1px solid var(--line);padding:12px;border-radius:14px;text-align:left;cursor:pointer}.phase-tabs button b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#192a34;color:white}.phase-tabs button.active{color:white;border-color:var(--accent);background:rgba(86,211,139,.08)}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:26px}.controls button,.controls select{border:1px solid #334854;border-radius:12px;padding:10px 14px;background:#10222d;color:white;cursor:pointer}.controls .primary{background:var(--accent);color:#06110b;border-color:transparent;font-weight:800}.controls label{margin-left:auto;color:var(--muted);font-size:.85rem}
@media(max-width:860px){.stage{grid-template-columns:1fr}.engine-card{min-height:500px}.panel{min-height:520px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}