:root{font-family:Inter,Arial,sans-serif;color:#f0e9d8;background:#101221;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{min-height:100vh;padding:36px 4vw 20px}header{display:flex;align-items:center;justify-content:space-between;max-width:1600px;margin:auto auto 28px}h1{font:clamp(48px,5vw,76px)/.94 Georgia,serif;letter-spacing:-3px;margin:16px 0}h1 em{font-weight:400;color:#fc6}header p{font:24px/1.3 Georgia,serif}header p span{font:12px Arial;color:#aaa7ba}.eyebrow{font-size:10px;letter-spacing:2.4px;color:#c3b8c2}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;max-width:1600px;margin:auto}.theatre{border:1px solid #3c3b50;background:#15172b}.stagebar,.caption,.layer{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;gap:12px}.stagebar{border-bottom:1px solid #3c3b50;font-size:10px;letter-spacing:2px}.stage{aspect-ratio:5/4;max-height:70vh;animation:appear .45s ease-out}.stage svg{width:100%;height:100%;display:block}.caption{border-top:1px solid #3c3b50;align-items:start}.caption strong{font:24px Georgia;overflow-wrap:anywhere}.caption span{font-size:11px;max-width:210px;color:#aaa7ba}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 24px}.rules label span{font-size:9px;letter-spacing:1px;color:#c0b6bf}.layer{font-size:11px;color:#bcb5c8}.note{font-size:12px;line-height:1.6;color:#aaa7ba;padding:0 24px 12px}aside{padding:20px 0}h2{font:34px/1.1 Georgia;margin:14px 0}aside p{font-size:12px;line-height:1.7;color:#aaa7ba}button,input,select,textarea{font:inherit;color:inherit;background:#202238;border:1px solid #49455e;border-radius:3px}button{padding:10px 13px;cursor:pointer;font-size:11px;transition:background .2s,transform .2s}button:hover{background:#35354a;transform:translateY(-1px)}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #ffcc66;outline-offset:3px}label{display:block;font-size:11px;line-height:1.5;margin-bottom:12px}input,select,textarea{width:100%;padding:9px;margin-top:6px;font-size:12px}textarea{height:190px;resize:vertical;font:11px/1.5 monospace}.examples,.actions{display:flex;gap:6px;margin:14px 0;flex-wrap:wrap}.coordinates{display:grid;grid-template-columns:1fr 1fr;gap:12px}.primary{background:#fc6;color:#171629;width:100%;font-weight:700}small{color:#ffb0b9}footer{max-width:1600px;margin:24px auto;font-size:12px;color:#beb8c9}footer>p{border-left:2px solid #ffcc66;padding:8px 14px}details p{max-width:850px;line-height:1.7}summary{cursor:pointer}@keyframes appear{0%{opacity:.65}to{opacity:1}}@media(max-width:900px){.workspace{grid-template-columns:1fr}header p{display:none}aside{max-width:700px;width:100%}.rules{grid-template-columns:1fr}.stagebar{padding:12px}.caption{flex-direction:column}.layer{flex-wrap:wrap}main{padding:22px 4vw}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.caption strong{white-space:pre-wrap}select{max-width:100%}
