:root{--ink:#17212b;--panel:#fff;--dim:#5b6b7a;--grass:#5cb531;--red:#e8562a;--sky1:#a9d8ff;--sky2:#eef7ff;--err:#c0392b}*{box-sizing:border-box;margin:0}html,body{height:100%}body{background:linear-gradient(var(--sky1), var(--sky2) 70%) fixed;color:var(--ink);flex-direction:column;font:15px/1.4 Chakra Petch,system-ui,sans-serif;display:flex}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;border:2px solid var(--ink);background:#fff}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--red);outline-offset:2px}.top{flex:none;align-items:center;gap:20px;height:60px;padding:0 24px;display:flex}.brand{letter-spacing:.02em;font-size:26px;font-weight:700}.brand i{background:var(--grass);border:2px solid var(--ink);vertical-align:-2px;width:18px;height:18px;box-shadow:3px 3px 0 var(--ink);margin-right:10px;display:inline-block}.roomname{color:var(--dim)}.sp{flex:1}.pill{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:#fff;padding:7px 14px;font-weight:700}.pill:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.lang{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:#fff;display:flex}.lang button{color:var(--dim);background:0 0;border:0;padding:7px 12px;font-weight:700}.lang button.on{background:var(--ink);color:#fff}.main{flex:1;grid-template-columns:minmax(0,1fr) clamp(340px,36%,520px);gap:20px;min-height:0;padding:8px 24px 24px;display:grid}.stage{flex-direction:column;gap:14px;min-width:0;min-height:0;display:flex}.world{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:#ffffff59;flex:1;min-height:0;position:relative}canvas{width:100%;height:100%;display:block}.hud{pointer-events:none;font-weight:700;position:absolute;top:12px;left:14px}.hud small{color:var(--dim);font-weight:500;display:block}.rot{gap:8px;display:flex;position:absolute;top:12px;right:12px}.rot button{width:40px;height:40px;box-shadow:3px 3px 0 var(--ink);font-size:18px}.hotbar{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.slot{border:2px solid var(--ink);width:112px;height:68px;box-shadow:4px 4px 0 var(--ink);background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0;font-weight:700;display:flex}.slot small{color:var(--dim);font-size:12px;font-weight:500}.slot:active,.slot.down{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.slot:disabled{opacity:.45;cursor:default;box-shadow:4px 4px 0 var(--ink);transform:none}.slot.run{background:var(--grass);color:#fff}.slot.run small{color:#e8ffd8}.slot.wide{width:170px}input[type=range]{appearance:none;border:2px solid var(--ink);background:#fff;width:120px;height:12px;margin:0}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--red);border:2px solid var(--ink);cursor:pointer;width:18px;height:18px}input[type=range]::-moz-range-thumb{background:var(--red);border:2px solid var(--ink);border-radius:0;width:14px;height:14px}.right{border:2px solid var(--ink);background:var(--panel);box-shadow:4px 4px 0 var(--ink);flex-direction:column;min-height:0;display:flex}.tabs{border-bottom:2px solid var(--ink);display:flex}.tabs button{color:var(--dim);background:0 0;border:0;padding:10px 16px;font-weight:700}.tabs button.on{background:var(--ink);color:#fff}.tab{flex:1;min-height:0;display:none;overflow:auto}.tab.on{flex-direction:column;display:flex}.ed{flex:1;min-height:0;display:flex}.cm-editor{flex:1;font:15px/1.65 Fira Code,ui-monospace,monospace}.cm-editor.cm-focused{outline:none}.cm-scroller{overflow:auto}.cm-gutters{color:#aab6c2;background:#fff;border-right:0}.cm-lineNumbers .cm-gutterElement{min-width:48px;padding:0 14px 0 10px}.cm-activeLine{background:0 0}.cm-runLine{box-shadow:inset 4px 0 var(--red);background:#fff1ea}.cm-errorLine{box-shadow:inset 4px 0 var(--err);background:#ffe1de}.cm-tooltip.cm-tooltip-autocomplete{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:14px Fira Code,ui-monospace,monospace}.cm-tooltip-autocomplete ul li[aria-selected]{background:var(--ink);color:#fff}.foot{border-top:2px solid var(--ink);color:var(--dim);justify-content:space-between;gap:12px;padding:10px 16px;font-size:13px;display:flex}.foot .err{color:var(--err);font-weight:700}.form{flex-direction:column;gap:14px;padding:16px;display:flex}.form .row{flex-wrap:wrap;align-items:end;gap:12px;display:flex}.form label{color:var(--dim);flex-direction:column;gap:4px;font-weight:700;display:flex}.form input[type=number]{border:2px solid var(--ink);width:80px;padding:6px 8px}.form textarea{border:2px solid var(--ink);resize:vertical;padding:8px;font:13px/1.5 Fira Code,ui-monospace,monospace}.ref{grid-template-columns:max-content 1fr;gap:6px 16px;padding:16px;font-size:14px;display:grid}.ref .k{font:600 14px Fira Code,ui-monospace,monospace}.ref .intro{color:var(--dim);grid-column:1/-1;margin-bottom:6px}.toast{background:var(--ink);color:#fff;padding:10px 18px;font-weight:700;transition:transform .2s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(80px)}.toast.show{transform:translate(-50%)translateY(0)}@media (prefers-reduced-motion:reduce){.toast{transition:none}}@media (max-width:1100px){.slot{width:96px;height:62px}.slot.wide{width:150px}}@media (max-width:900px){.main{grid-template-rows:minmax(320px,55vh) 1fr;grid-template-columns:1fr}.top{gap:10px;padding:0 12px}.main{padding:8px 12px 12px}.slot{width:92px;height:58px}.slot.wide{width:150px}}