*{box-sizing:border-box}body{margin:0;background:#080d1b;color:#edf5ff;font-family:Inter,system-ui,sans-serif}main{max-width:1080px;margin:0 auto;padding:32px;display:grid;grid-template-columns:1fr 420px;gap:50px}.eyebrow{color:#91eac9;font-size:11px;letter-spacing:.2em;margin-top:35px}h1{font-size:44px;line-height:1.15;letter-spacing:-.04em;margin:20px 0}em{color:#a1ffcb;font-style:normal}.controls>p{color:#9eb0c9;font-size:13px;line-height:1.8}a{color:#9af5d3;text-decoration:none;font-size:12px}.buttons{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}button,select{background:#17253e;border:1px solid #3f536a;color:#eefbff;padding:11px 14px;border-radius:9px;font-weight:650;cursor:pointer}button:hover{background:#2f5162}button[data-effect=explosion]{background:#b7ffd6;color:#142524;border:0}label{display:flex;gap:12px;align-items:center;margin:12px 0;font-size:13px}label input[type=range]{flex:1;min-width:50px;accent-color:#a8ffcd}output{width:25px;color:#a3ffce}.checks{display:grid;grid-template-columns:1fr 1fr}input[type=checkbox]{accent-color:#a3ffce}pre{font:11px/1.6 ui-monospace,monospace;background:#101b30;padding:14px;border-radius:9px;white-space:pre-wrap;min-height:100px}.note{font-size:11px!important}.stage{position:relative;aspect-ratio:420/850;max-height:850px;align-self:start;border:1px solid #475069;border-radius:22px;overflow:hidden;background:#122438;box-shadow:0 20px 90px #0009}canvas{width:100%;height:100%;display:block;touch-action:none}.stage-label{pointer-events:none;position:absolute;top:26px;left:24px;right:24px;display:flex;justify-content:space-between;font:10px monospace;color:#a3ffce;letter-spacing:.12em}.stage-label b{color:white}.caption{position:absolute;bottom:26px;width:100%;text-align:center;font-size:11px;color:#adc6d9;pointer-events:none}@media(max-width:780px){main{padding:18px;gap:24px;grid-template-columns:1fr}.stage{grid-row:1;width:min(100%,420px);max-height:65vh;margin:auto}h1{font-size:32px}.eyebrow{margin-top:10px}}