/* GLIMT brand 1.0 (2026-10-11): graphite 70, porcelain 18, silver 9, accent 3. Accent = #ec1d25, only where a circuit closes. */
:root{
  --graphite:#0B0D10; --carbon:#15191E; --line:#2A3139; --porcelain:#F3F5F0; --silver:#AAB2BA; --accent:#ec1d25; --accent-deep:#A3121A;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--graphite);color:var(--porcelain);font:17px/1.45 var(--font);-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
.top{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mark{height:40px;width:auto;display:block}
.tag,.state,.qhead,.lbl-ui{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--silver)}
.tag{border:1px solid var(--line);padding:3px 8px;border-radius:4px}
.line{margin:0 0 0 auto;color:var(--silver);font-size:15px}
.state{padding:5px 10px;border-radius:4px;border:1px solid var(--line);min-width:120px;text-align:center}
.state.on{color:#fff;background:var(--accent);border-color:var(--accent)}
.lab{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;padding:16px 20px 24px;max-width:1400px;margin:0 auto}
@media (max-width:980px){.lab{grid-template-columns:minmax(0,1fr)}.line{display:none}}
.bench{min-width:0}
.plate-wrap{max-width:max(320px,calc((100vh - 250px) * 1.435));margin:0 auto}
#board{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}
#board .lbl{font:600 9px var(--mono);letter-spacing:.15em;fill:var(--silver)}
#board .pm{font:700 13px var(--font);fill:#0B0D10;text-anchor:middle}
.slot{fill:none;stroke:#000;stroke-opacity:.08;stroke-dasharray:3 6;transition:all .12s}
.slot.on{fill:var(--porcelain);fill-opacity:.35;stroke-opacity:.4}
.blk{cursor:grab}
.blk .ring{fill:none;stroke:var(--porcelain);stroke-width:2.5;stroke-dasharray:7 5}
.tray{display:flex;gap:10px;overflow-x:auto;padding:14px 2px 6px;scrollbar-width:thin}
.tray button{flex:0 0 auto;width:84px;border-radius:12px;border:1px solid var(--line);background:var(--carbon);display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;cursor:grab;touch-action:none;font-size:13px;font-weight:500;color:var(--porcelain);transition:transform .15s,border-color .15s}
.tray button:hover{transform:translateY(-2px);border-color:var(--silver)}
.tray button:active{transform:scale(.96)}
.tray svg{width:58px;height:58px;display:block}
.bench-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.hint{color:var(--silver);font-size:14px}
.ghostbtn{background:transparent;border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;color:var(--porcelain)}
.ghostbtn:hover{border-color:var(--silver)}
.helper{background:var(--carbon);border:1px solid var(--line);border-radius:16px;padding:18px;align-self:start;position:sticky;top:12px}
.helper-head{display:flex;align-items:center;gap:12px}
.dot{width:52px;height:52px}
.helper h2{margin:0;font-size:24px;font-weight:700}
.sub{margin:0;color:var(--silver);font-size:14px}
.say{font-size:19px;margin:14px 0 16px}
.ask{display:grid;gap:10px}
button.primary{background:var(--accent);color:#fff;border:0;border-radius:10px;padding:14px;font-weight:700;font-size:19px;cursor:pointer;box-shadow:0 3px 0 var(--accent-deep);transition:transform .1s,box-shadow .1s}
button.primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-deep)}
#askform{display:flex;gap:8px}
#askform input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--graphite)}
#askform input:focus{outline:2px solid var(--silver);outline-offset:1px}
#askform button{border:1px solid var(--silver);background:transparent;border-radius:10px;padding:0 16px;font-weight:700;cursor:pointer}
.answer{margin-top:14px;background:var(--graphite);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:17px;white-space:pre-wrap}
.answer.wait{color:var(--silver)}
.qhead{display:flex;justify-content:space-between;margin:20px 0 8px}
.quests{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.quests li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.quests li .n{font:12px var(--mono);color:var(--silver);width:22px}
.quests li.done{border-color:var(--porcelain)}
.quests li.done .n{color:var(--accent);font-weight:700}
.bubble{position:fixed;z-index:20;display:flex;gap:6px;background:var(--carbon);border:1px solid var(--silver);border-radius:12px;padding:6px;box-shadow:0 10px 28px rgba(0,0,0,.5)}
.bubble button{border:0;border-radius:8px;padding:10px 14px;font-weight:600;cursor:pointer;background:var(--graphite);color:var(--porcelain)}
.bubble button:hover{background:var(--line)}
.drag-ghost{position:fixed;z-index:30;pointer-events:none;width:84px;height:84px;transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 10px 12px rgba(0,0,0,.6))}
.drag-ghost svg{width:100%;height:100%}
.flow{stroke-dasharray:5 9;animation:flow .7s linear infinite}
@keyframes flow{to{stroke-dashoffset:-14}}
.spin{animation:spin .5s linear infinite;transform-box:view-box;transform-origin:50px 48px}
@keyframes spin{to{transform:rotate(360deg)}}
.wave{animation:wave .45s ease-out infinite}
@keyframes wave{from{opacity:.9}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.flow,.spin,.wave{animation:none}}
@media (min-width:600px){.tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));overflow:visible}.tray button{width:auto}.plate-wrap{max-width:max(320px,calc((100vh - 330px) * 1.435))}}