body{margin:0;background:#070b15;color:#eef4ff;font-family:Inter,system-ui,sans-serif}
.shell{width:min(1100px,calc(100% - 2rem));margin:1rem auto;display:grid;gap:.8rem}
.card{border:1px solid rgba(140,170,220,.35);background:#0f1629;border-radius:14px;padding:.9rem}
.kicker{margin:0;color:#66e2ff;font-size:12px;letter-spacing:.12em}
h1{margin:.35rem 0;font-size:clamp(24px,4.8vw,42px)}
.sub,.muted{margin:0;color:#9fb3d8;line-height:1.5}
.grid{display:grid;grid-template-columns:1.2fr .9fr;gap:.7rem}
.row{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.zones{margin-top:.6rem;display:grid;gap:.55rem}
.zone{border:1px solid rgba(140,170,220,.35);border-radius:10px;padding:.5rem;background:#121d34}
.zone h3{margin:0 0 .4rem;color:#66e2ff;font-size:.85rem}
.pills{display:flex;flex-wrap:wrap;gap:.4rem}
.pill{border:1px solid rgba(140,170,220,.35);background:#0f1931;color:#dce8ff;border-radius:999px;padding:.24rem .54rem;cursor:pointer;font-size:.78rem}
.pill.active{background:#66e2ff;color:#041320;border-color:transparent;font-weight:600}
.detail h3{margin:.4rem 0 .3rem;font-size:1.05rem}
.steps{margin:.5rem 0 0;padding-left:1.05rem;display:grid;gap:.3rem}
.simulator .controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:.55rem}
label span{display:block;margin:0 0 .25rem;color:#c9dbff;font-size:.82rem}
input[type=range]{width:100%}
.plan{margin-top:.6rem;border:1px solid rgba(140,170,220,.35);background:#121d34;border-radius:10px;padding:.6rem;color:#dce8ff;line-height:1.55}
@media(max-width:900px){.grid{grid-template-columns:1fr}.simulator .controls{grid-template-columns:1fr}}