:root{--ink: #20304a;--paper: #eef7ff;--line: #c9d2de;--get: #16865b;--post: #2468bd;--patch: #b56800;--delete: #bc4038;--gold: #ffd447;font-family:Avenir Next,Segoe UI,system-ui,sans-serif;font-size:15px;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%}body{overflow:hidden;background:radial-gradient(circle at 10% 0,#fff 0,transparent 35%),linear-gradient(145deg,#e8f7ff,#f7efff)}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em}pre{margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.74rem;line-height:1.35;white-space:pre-wrap;word-break:break-all;background:#111827;color:#dbe7ff;padding:6px 8px;border-radius:6px}.muted{color:#6a788c;font-weight:600}.small{font-size:.85rem}#app{display:flex;flex-direction:column}.top{position:relative;display:flex;align-items:center;gap:14px;min-height:44px;padding:6px 48px 8px 14px;background:#fff;border-bottom:3px solid var(--ink)}.top h1{margin:0;font-size:1.15rem;white-space:nowrap}.monitor{display:flex;align-items:center;gap:8px;min-width:0;font-size:.82rem;font-weight:700;color:#59677c;white-space:nowrap;overflow:hidden}.monitor code{color:var(--ink)}.monitor .every,.monitor .count{color:#8a97ab}.dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--get)}.dot.live{animation:ping .7s ease-out}@keyframes ping{0%{box-shadow:0 0 #16865b99}to{box-shadow:0 0 0 12px #16865b00}}.bar{position:absolute;left:0;right:0;bottom:-3px;height:3px;background:#d8efe4}.bar i{display:block;height:100%;width:0;background:var(--get);animation-name:fill;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes fill{0%{width:0}to{width:100%}}.verb-tag{display:inline-block;padding:1px 7px;border-radius:6px;color:#fff;font-weight:900;font-size:.74rem;letter-spacing:.02em;vertical-align:middle}.verb-tag.get{background:var(--get)}.verb-tag.post{background:var(--post)}.verb-tag.patch{background:var(--patch)}.verb-tag.delete{background:var(--delete)}.st{font-weight:800}.st.ok{color:var(--get)}.st.warn{color:var(--patch)}.st.bad{color:var(--delete)}.ms{color:#8a97ab;font-weight:600}.t-mode{position:fixed;top:9px;right:10px;z-index:6;width:28px;height:28px;padding:0;border:2px solid var(--line);border-radius:50%;background:#fff;color:#8a97ab;font-weight:900;font-size:.8rem}.teacher .t-mode{background:var(--ink);color:#fff;border-color:var(--ink)}.admin{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;background:#fff3cd;border-bottom:3px solid var(--ink);font-size:.9rem}.admin[hidden]{display:none}.admin button,.admin select{padding:5px 10px;border:2px solid var(--ink);border-radius:8px;background:#fff;font-weight:800}.admin button.on{background:var(--ink);color:#fff}.admin button.pause{background:var(--gold)}.admin button.resume{background:var(--get);color:#fff;border-color:var(--get)}.admin button.danger{background:var(--delete);color:#fff;border-color:var(--delete)}.admin button:disabled{opacity:.5;cursor:default}.admin label{font-weight:800;display:flex;align-items:center;gap:6px}.admin .pending{font-weight:800}.admin .teacher-note{font-weight:700;color:#59677c;min-width:0}.admin .lock{margin-left:auto}.main{flex:1 1 0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;min-height:0;padding:10px}.stage{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}.board{--cell: 20px;display:grid;grid-template-columns:repeat(30,var(--cell));grid-auto-rows:var(--cell);gap:1px;padding:0;background:var(--line);border:2px solid var(--ink);border-radius:4px;box-shadow:5px 5px #20304a2e;user-select:none;-webkit-user-select:none}.tool-clear .board{cursor:crosshair;touch-action:none}.cell{display:block;width:var(--cell);height:var(--cell);margin:0;padding:0;border:0;border-radius:0;background:#f3f6fa}.cell.empty{background-color:#f3f6fa;background-image:radial-gradient(circle,#d3dae4 18%,transparent 24%)}.wall .cell{cursor:default}.student .cell:hover{box-shadow:inset 0 0 0 2px var(--ink)}.cell.sel{box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 5px #fff}.cell.rect{box-shadow:inset 0 0 0 2px var(--delete);opacity:.55}.cell:focus-visible{outline-offset:-3px}.paused .board{opacity:.7}.paused-badge{position:absolute;left:0;right:0;bottom:14px;margin:0 auto;width:max-content;max-width:92%;display:grid;justify-items:center;gap:2px;padding:8px 16px;background:var(--gold);border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);text-align:center;font-weight:700;font-size:.9rem}.paused-badge[hidden]{display:none}.paused-badge strong{font-size:1.2rem}.side{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}.pick{display:grid;gap:8px;padding:10px;background:#fff;border:3px solid var(--ink);border-radius:14px}.pixel-info{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:24px;font-size:.9rem}.chip{display:inline-block;padding:1px 8px;border:2px solid var(--ink);border-radius:99px;font-size:.78rem;font-weight:800;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.7)}.chip.empty-chip{background:#fff;color:#6a788c;text-shadow:none;border-style:dashed}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.swatch{aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:7px}.swatch.white{border-color:var(--line)}.swatch.on{outline:3px solid var(--ink);outline-offset:1px}.color-line{font-size:.85rem;font-weight:700;color:#59677c}.verbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.verb{display:grid;justify-items:center;padding:7px 4px;border:0;border-radius:10px;color:#fff;font-weight:900;line-height:1.1;box-shadow:0 3px #00000040}.verb:active{transform:translateY(2px);box-shadow:none}.verb small{font-weight:600;font-size:.68rem;opacity:.9}.verb em{font-style:normal;font-size:.8rem}.verb.post{background:var(--post)}.verb.patch{background:var(--patch)}.verb.delete{background:var(--delete)}.verb.off{opacity:.4}.note{margin:0;min-height:2.5em;font-size:.85rem;font-weight:700;color:#3b4a62}.window{flex:1;min-height:0;overflow:auto;padding:10px;background:#1d2535;color:#e7eef9;border:3px solid var(--ink);border-radius:14px;font-size:.8rem}.window h2{margin:0 0 8px;font-size:.95rem}.window h2 small{font-weight:600;color:#9fb0c8;margin-left:6px}.window .muted{color:#9fb0c8}.window .st.ok{color:#5fd3a2}.window .st.warn{color:#ffb95c}.window .st.bad{color:#ff8b82}.exchange{display:grid;gap:6px}.exchange .req,.exchange .res{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.exchange .req code{word-break:break-all;color:#cfe0ff}.recent{list-style:none;margin:10px 0 0;padding:8px 0 0;border-top:1px solid #39465c;display:grid;gap:4px;font-size:.76rem}.recent li{display:flex;gap:6px;align-items:center}.recent code{color:#cfe0ff}.veil{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:12px;background:#141e328c}.card{display:grid;gap:10px;width:min(560px,100%);max-height:calc(100vh - 24px);overflow:auto;padding:18px 22px;background:#fff;border:4px solid var(--ink);border-radius:20px;box-shadow:7px 7px 0 var(--ink)}.card h2{margin:0;font-size:1.6rem}.card p{margin:0}.card ul{margin:0;padding-left:0;list-style:none;display:grid;gap:8px;font-size:.95rem}.card ul li{display:flex;align-items:baseline;gap:8px}.card .row{display:flex;justify-content:flex-end;gap:8px}.card input{padding:8px 10px;border:2px solid var(--ink);border-radius:8px}.card button{padding:8px 14px;border:2px solid var(--ink);border-radius:10px;background:#fff;font-weight:800}.card button.primary{background:var(--ink);color:#fff}.card button.big{justify-self:center;padding:10px 22px;font-size:1.05rem}.bad-text{color:var(--delete);font-weight:800}.wall .top,.wall .side{display:none}.wall .main{grid-template-columns:minmax(0,1fr);padding:8px 8px 44px}.wall .board{box-shadow:0 10px 30px #20304a40}.wall .t-mode{inset:auto auto 8px 8px;opacity:.35}.wall .t-mode:hover,.wall.teacher .t-mode{opacity:1}.wall-monitor{display:none}.wall .wall-monitor{position:fixed;right:12px;bottom:10px;z-index:4;display:flex;align-items:center;gap:6px;padding:6px 12px 8px;overflow:hidden;background:#1b1f27db;color:#e7eef9;border-radius:12px;font-size:.85rem;font-weight:700;white-space:nowrap}.wall .wall-monitor .st.ok{color:#5fd3a2}.wall .wall-monitor .st.warn{color:#ffb95c}.wall .wall-monitor .st.bad{color:#ff8b82}.wall .wall-monitor .bar{bottom:0;background:#ffffff26}.wall .paused-badge{top:50%;bottom:auto;transform:translateY(-50%);padding:18px 40px;font-size:1.3rem}.wall .paused-badge strong{font-size:2.6rem}