*{box-sizing:border-box}body{margin:0;background:#0d1721;color:#e7ece9;font-family:Inter,system-ui,sans-serif}main{min-height:100vh;padding:3vw}header{margin-bottom:2rem}header span{color:#ffce77;letter-spacing:.22em;font-size:.75rem}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(2.5rem,6vw,5.7rem);letter-spacing:-.04em;margin:.3em 0 .1em}p{line-height:1.6;color:#bac7cb}h2{font-weight:500}.stage{display:grid;grid-template-columns:3fr 1fr;min-height:55vh;border:1px solid #34414b;border-radius:18px;overflow:hidden}.scene{min-height:55vh;outline-offset:-4px;position:relative}.scene canvas{display:block;width:100%;height:100%;position:absolute;inset:0}aside{background:#15232f;padding:1.5rem}.zones{display:grid;gap:.6rem}button{background:#263b46;border:1px solid #50606a;border-radius:7px;color:#eff5ee;padding:.7rem 1rem;cursor:pointer;text-align:left;transition:background .18s,transform .18s}button:hover{background:#385762;transform:translateY(-1px)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #ffce77;outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}small{display:block;font-size:.65rem;color:#b7c9cd;margin-top:.3rem}.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.columns{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.controls,article,footer{padding:1.2rem 0;border-top:1px solid #34414b;margin-top:2rem}input,textarea{background:#15232f;color:#ecf3ed;border:1px solid #50606a;border-radius:5px;padding:.6rem}label{display:grid;gap:.4rem}input{width:8rem}textarea{width:100%;height:26rem;font:12px/1.5 monospace;resize:vertical}.diagram svg{width:100%;height:180px}.muted{font-size:.75rem}strong{color:#ffce77}footer{max-width:1000px}@media(max-width:800px){.stage,.columns{grid-template-columns:1fr}.scene{min-height:45vh}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.focus .stage,.focus .scene{min-height:88vh}.focus header,.focus .controls,.focus .columns,.focus footer{display:none}