*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#root{min-height:100vh}body{color:#e8e8e6;background:#0e0e10;min-height:100vh;margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.6}.app{flex-direction:column;align-items:center;gap:1.5rem;max-width:700px;margin:0 auto;padding:2.5rem 1.25rem 4rem;display:flex}header{text-align:center;width:100%}header h1{color:#fff;letter-spacing:-.5px;margin:0 0 .5rem;font-size:clamp(1.5rem,4vw,2.25rem);font-weight:600}header p{color:#a0a09a;margin:0;font-size:1rem}main{flex-direction:column;align-items:center;gap:1.5rem;width:100%;display:flex}.engine-diagram{background:#fff;border-radius:16px;justify-content:center;align-items:center;width:100%;max-width:520px;padding:1.5rem;display:flex;box-shadow:0 8px 32px #0000004d}.stroke-selector{grid-template-columns:repeat(4,1fr);gap:.5rem;width:100%;max-width:520px;display:grid}.stroke-selector button{color:#e8e8e6;cursor:pointer;background:#1c1c20;border:2px solid #2c2c30;border-radius:10px;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem .5rem;font-family:inherit;font-size:.9rem;transition:all .2s;display:flex}.stroke-selector button:hover{background:#25252a;border-color:#444;transform:translateY(-1px)}.stroke-selector button:focus-visible{outline-offset:2px;outline:2px solid #3b8bd4}.stroke-selector button.active{background:#25252a;border-width:2px;font-weight:500;transform:translateY(-1px)}.step-number{color:#888;font-size:.75rem;font-weight:400}.step-name{font-size:1rem;font-weight:500}.info-panel{box-sizing:border-box;background:#1c1c20;border:1px solid #2c2c30;border-radius:12px;width:100%;max-width:520px;padding:1.5rem}.info-panel h2{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;transition:color .3s}.info-panel .key-point{color:#e8e8e6;margin:0 0 .75rem;font-weight:500}.info-panel .description{color:#b0b0aa;margin:0;font-size:.95rem}@keyframes sparkExplosion{0%{r:4;opacity:0}30%{r:18;opacity:.9}60%{r:22;opacity:.5}to{r:28;opacity:0}}.spark-explosion{transform-origin:50%;animation:.8s ease-out sparkExplosion}@keyframes sparkFlash{0%,to{opacity:1}50%{opacity:.4}}.spark-flash{animation:.15s ease-in-out 3 sparkFlash}@media (width<=500px){.app{padding:1.5rem .75rem 2rem}.stroke-selector{grid-template-columns:repeat(2,1fr)}.info-panel{padding:1.25rem}}