main.sim{display:grid;grid-template-columns:minmax(0,1fr);width:min(100% - 2*var(--g),var(--wrap));margin-inline:auto;padding:1.5rem 0 0;gap:0 2.5rem;align-content:start}
main.sim>*{min-width:0}
.sim .micro{margin:0 0 .5rem;font:600 .78rem/1 var(--cap);letter-spacing:.2em;text-transform:uppercase;color:var(--atm)}
.sim h1{margin:0 0 .8rem;font:600 clamp(2rem,6vw,3.2rem)/1 var(--head);letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere}
.sim .lead{margin:0 0 1.4rem;max-width:34rem;font-size:1.15rem;line-height:1.55;color:#cfd6e2}
.sim .stage{margin:0 0 1rem;width:100%}
.sim canvas{display:block;width:100%;aspect-ratio:1080/1200;background:#05070d;border-radius:20px;box-shadow:0 0 0 1px #ffffff17,0 30px 70px -40px var(--atm)}
.sim .line{margin:0 0 1.1rem;max-width:34rem;min-height:3.2em;font-size:1rem;line-height:1.6;color:var(--tx)}
.sim .ns{color:var(--dim)}
.sim .controls{display:grid;gap:.8rem;margin:0 0 1.2rem}
.sim .controls label{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .8rem;font-size:.86rem;line-height:1.4;color:var(--dim)}
.sim .controls label input{grid-column:1/-1;width:100%;min-height:44px;margin:0;accent-color:var(--atm)}
.sim .controls output{font:400 .86rem/1.4 var(--mono);color:var(--tx);font-variant-numeric:tabular-nums}
.sim button{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 1.4rem;border:0;border-radius:999px;background:var(--ember);color:var(--ink-ember);font:600 .95rem/1 var(--sans);cursor:pointer;transition:filter .2s,translate .2s}
.sim button:hover{filter:brightness(1.1);translate:0 -1px}
.sim .honest{margin:0 0 1.1rem;padding:.9rem 1.1rem;max-width:34rem;border-radius:14px;background:var(--panel);box-shadow:inset 3px 0 0 var(--ember),0 0 0 1px var(--line);color:var(--dim);font-size:.86rem;line-height:1.5}
.sim .honest b{color:var(--tx);font-weight:600}
.sim details{margin:0 0 1.1rem;max-width:34rem;border-top:1px solid var(--line)}
.sim summary{display:flex;align-items:center;min-height:48px;cursor:pointer;font-weight:600}
.sim .srcl{margin:0 0 .4rem;font-size:.86rem;line-height:1.5;color:var(--dim);white-space:pre-wrap;overflow-wrap:anywhere}
.sim .more{display:flex;flex-wrap:wrap;gap:0 1.2rem;margin:0;padding-bottom:1rem;font-size:.95rem}
.sim .more a{display:inline-flex;align-items:center;min-height:44px}
@media(min-width:900px){
main.sim{grid-template-columns:minmax(0,1fr) 25rem;padding-top:2rem}
main.sim>*{grid-column:2}
.sim .stage{grid-column:1;grid-row:1/span 9;width:min(100%,calc((100svh - 150px)*.9));min-width:320px;align-self:start;justify-self:center;position:sticky;top:5rem;margin:0}
}
@media(prefers-reduced-motion:reduce){main.sim,main.sim *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}