:root{--ink: #2f3a44;--ink-soft: #6a7885;--ink-faint: #9aa7b3;--acrylic: rgba(255, 255, 255, .44);--acrylic-deep: rgba(255, 255, 255, .66);--edge-lit: rgba(255, 255, 255, .92);--edge-shade: rgba(120, 140, 160, .28);--cast: 0 10px 26px -10px rgba(80, 96, 116, .5);--accent: #f5904a;--accent-deep: #d1621f;--alarm: #e05a4a;--r-lg: 20px;--r-md: 14px;--r-sm: 10px;--font: ui-rounded, "SF Pro Rounded", "PingFang SC", "Hiragino Sans GB", "Avenir Next", "Segoe UI Variable", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;font-family:var(--font);color:var(--ink);background:#ecdfc6;-webkit-user-select:none;user-select:none}#app{display:grid;height:100dvh}.slab-panel{background:linear-gradient(155deg,var(--acrylic-deep),var(--acrylic));backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border-radius:var(--r-lg);border-top:1.5px solid var(--edge-lit);border-left:1.5px solid var(--edge-lit);border-right:1.5px solid var(--edge-shade);border-bottom:1.5px solid var(--edge-shade);box-shadow:var(--cast),inset 0 1px #ffffffb3}#stage{position:relative;flex:1 1 auto;min-width:0;min-height:0}#stage canvas{display:block;width:100%;height:100%}#stage canvas.over-peg{cursor:pointer}#hint{position:absolute;left:50%;bottom:24px;transform:translate(-50%) translateY(10px) scale(.96);padding:10px 20px;border-radius:999px;font-size:13.5px;letter-spacing:.02em;opacity:0;transition:opacity .24s,transform .24s cubic-bezier(.2,.9,.3,1);pointer-events:none;z-index:5}#hint.show{opacity:1;transform:translate(-50%) translateY(0) scale(1)}#rail{display:flex;flex-direction:column;gap:15px;z-index:4}#mute,#lang{flex:0 0 auto;border:none;background:none;line-height:1;padding:4px;cursor:pointer;opacity:.55;transition:opacity .2s;color:var(--ink);font-family:var(--font)}#mute{font-size:16px}#lang{font-size:12.5px;font-weight:700;letter-spacing:.04em;min-width:2.2em;border:1.5px solid rgba(120,140,160,.35);border-radius:7px;padding:3px 5px}#mute:hover,#lang:hover{opacity:1}#mute.off{opacity:.3}#level-num{flex:0 0 auto;display:flex;align-items:baseline;gap:5px;font-size:17px;font-weight:700;letter-spacing:.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}#level-num em{font-style:normal;font-size:11px;font-weight:600;color:var(--ink-faint)}#level-num em:before{content:"【"}#level-num em:after{content:"】"}#meta-row,#progress-row{display:flex;align-items:center;gap:10px}#progress-row .group-label{margin-bottom:0;flex:0 0 auto;white-space:nowrap}#mute{margin-left:auto}#bar{flex:1 1 auto;height:8px;border-radius:999px;background:#788ca038;box-shadow:inset 0 1px 2px #5a6e824d;overflow:hidden}#bar>i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent-deep),var(--accent));transition:width .42s cubic-bezier(.2,.8,.3,1)}#count{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}.group-label{font-size:10.5px;letter-spacing:.22em;color:var(--ink-faint);margin-bottom:8px}#racks{display:grid;gap:9px}.rack{border-radius:var(--r-md);background:#ffffff57;border:1.5px solid rgba(255,255,255,.62);box-shadow:inset 0 1px #ffffffb3,0 2px 8px -4px #50607480;display:flex;align-items:center;justify-content:center;transition:border-color .28s,background .28s,box-shadow .28s}.rack.live{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,white),color-mix(in srgb,var(--c) 96%,black));border-color:color-mix(in srgb,var(--c) 72%,black);box-shadow:inset 0 1.5px color-mix(in srgb,var(--c) 55%,white),inset 0 -2px 4px color-mix(in srgb,var(--c) 60%,black),0 4px 12px -5px color-mix(in srgb,var(--c) 75%,transparent)}.rack.live .peg-slot{background:color-mix(in srgb,var(--c) 55%,black);box-shadow:inset 0 2px 4px #0000008c,0 1px #ffffff47}.peg-slot.filled:before{width:8px;height:2.4px;transform:translate(-50%,-50%)}.peg-slot.filled:after{width:2.4px;height:8px;transform:translate(-50%,-50%)}.rack.live .peg-slot.filled{background:radial-gradient(circle at 34% 28%,#fff,transparent 55%),color-mix(in srgb,var(--c) 62%,white);box-shadow:0 1px 3px #00000073,inset 0 -2px 3px color-mix(in srgb,var(--c) 70%,black)}.rack.idle{background:transparent;border-color:#788ca038;box-shadow:none}.rack.locked{cursor:pointer;color:var(--ink-faint);font-size:12px;letter-spacing:.02em;line-height:1.2;text-align:center;padding:0 4px;border-style:dashed}.rack.arriving{animation:rack-drop .44s cubic-bezier(.25,1.3,.45,1) .16s backwards;z-index:1}@keyframes rack-drop{0%{transform:translateY(-58px) scale(.9);opacity:0}}.rack.leaving{animation:rack-fall .5s cubic-bezier(.5,0,.9,.4) forwards;pointer-events:none;z-index:0}@keyframes rack-fall{35%{transform:translateY(-5px) rotate(-3deg)}to{transform:translateY(120px) rotate(11deg);opacity:0}}.rack.locked:hover{color:var(--accent-deep);border-color:var(--accent)}.rack-row{display:flex;gap:7px}.peg-slot{position:relative;width:17px;height:17px;border-radius:50%;background:#788ca033;box-shadow:inset 0 2px 3px #465a6e73}.peg-slot.filled{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85),transparent 58%),var(--c);box-shadow:0 1px 3px #3c4c6073,inset 0 -1px 2px #00000040}#holding{display:flex;gap:7px;flex-wrap:wrap}.hold{position:relative;width:30px;height:30px;border-radius:50%;background:#788ca029;box-shadow:inset 0 2px 5px #465a6e66}.hold.filled{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.85),transparent 60%),var(--c);box-shadow:0 2px 6px #3c4c6066}.hold.filled:before,.hold.filled:after,.peg-slot.filled:before,.peg-slot.filled:after{content:"";position:absolute;left:50%;top:50%;border-radius:999px;background:color-mix(in srgb,var(--c) 55%,black)}.hold.filled:before{width:13px;height:3.5px;transform:translate(-50%,-50%)}.hold.filled:after{width:3.5px;height:13px;transform:translate(-50%,-50%)}#holding.danger .hold{animation:alarm 1.2s ease-in-out infinite}@keyframes alarm{50%{box-shadow:0 0 0 3px #e05a4a52}}#tools{display:grid;gap:8px}#extract-count{font-variant-numeric:tabular-nums;opacity:.65;font-size:11.5px}.tool.armed{background:linear-gradient(180deg,var(--accent),var(--accent-deep));border-color:var(--accent-deep);color:#fff;box-shadow:0 3px #9650188c,0 0 0 3px #f5904a47}.tool.armed #extract-count{opacity:.85}.tool{border-radius:var(--r-md);border:1.5px solid rgba(255,255,255,.7);border-bottom-color:#788ca059;background:linear-gradient(180deg,#ffffffad,#ffffff61);color:var(--ink);font-family:var(--font);font-size:13px;font-weight:600;padding:12px;cursor:pointer;box-shadow:0 3px #96a8ba73,0 6px 14px -8px #50607499;transition:transform .1s,box-shadow .1s,background .18s}.tool:hover:not(:disabled){background:linear-gradient(180deg,#ffffffd9,#ffffff80)}.tool:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 #96a8ba73}.tool:disabled{opacity:.4;cursor:default;box-shadow:none}@media(min-width:860px){#app{grid-template-columns:1fr 292px;grid-template-rows:1fr auto;padding:18px;gap:18px}#stage{grid-column:1;grid-row:1 / span 2;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--cast)}#rail{grid-column:2;grid-row:1;padding:24px 20px}#tools{grid-column:2;grid-row:2}#racks{grid-template-columns:1fr}.rack{height:54px}}@media(max-width:859px){#app{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto}#rail{grid-row:1;margin:calc(6px + env(safe-area-inset-top)) 10px 0;padding:10px 12px 11px;gap:9px}#stage{grid-row:2}#tools{grid-row:3}#racks{grid-template-columns:repeat(4,1fr)}.rack{height:50px}.rack .peg-slot{width:13px;height:13px}#holding-wrap>div{display:flex;align-items:center;gap:10px}#holding-wrap .group-label{margin-bottom:0;flex:0 0 auto}#racks+* .group-label,.rack-label{margin-bottom:6px}#tools{grid-template-columns:repeat(4,1fr);padding:0 10px calc(10px + env(safe-area-inset-bottom));z-index:6}.tool{font-size:12px;padding:12px 4px}.tool{min-height:48px;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}#hint{bottom:calc(76px + env(safe-area-inset-bottom))}}#overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#3c4a5a5c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:20}#overlay.show{display:flex}#card{width:min(370px,84vw);padding:32px 30px 26px;text-align:center;animation:rise .38s cubic-bezier(.2,.9,.3,1)}@keyframes rise{0%{opacity:0;transform:translateY(18px) scale(.95)}}#card h2{margin:0 0 8px;font-size:26px;letter-spacing:.07em}#card p{margin:0 0 22px;font-size:13.5px;color:var(--ink-soft);line-height:1.65}#card .actions{display:flex;gap:10px}#card button{flex:1;border:none;border-radius:var(--r-md);padding:13px 0;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;color:#fff;background:linear-gradient(180deg,var(--accent),var(--accent-deep));box-shadow:0 3px #9650188c}#card button:active{transform:translateY(2px);box-shadow:none}#card button.ghost{background:#ffffff80;color:var(--ink);border:1.5px solid rgba(255,255,255,.8);box-shadow:0 3px #96a8ba66}#interlude{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6vh;gap:8px;pointer-events:none;z-index:15}#interlude.show{display:flex}#interlude-title{font-size:30px;font-weight:700;letter-spacing:.14em;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.7);animation:rise .5s cubic-bezier(.2,.9,.3,1)}#interlude-sub{font-size:13px;color:var(--ink-soft)}#interlude-go{margin-top:auto;margin-bottom:calc(24px + env(safe-area-inset-bottom));pointer-events:auto;min-width:180px;transition:opacity .3s}#interlude-go:disabled{opacity:0}