:root{--stage:#fff;--ink:#16191b;--control:#44455b;--control-hover:#383949;--muted:#5d6468;--track:#e4e6e7;--strobe:#e4572e;--nav:#f3f3f6;--nav-indicator:#dfe0ee;--nav-height:80px;--font-logo:Futura, "Futura PT", Jost, "Century Gothic", sans-serif;--font-body:"IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--stage:#121213;--floor:#2a2a2b;--ink:#ececec;--control:#ececec;--control-hover:#fff;--muted:#8e8e90;--track:#ffffff21;--strobe:#ff6a3d;--nav:#121213;--nav-edge:#ffffff12;--nav-indicator:#ffffff1f}html,body,#root{height:100%}html{-webkit-tap-highlight-color:transparent}body{background:var(--stage);color:var(--ink);font:14px/1.5 var(--font-body);margin:0;overflow:hidden}#stage{inset:0 0 calc(var(--nav-height) + env(safe-area-inset-bottom,0px));position:fixed}.page[hidden]{visibility:hidden;display:block}.page[hidden] *{transition:none}header{top:calc(env(safe-area-inset-top,0px) + 11px);pointer-events:none;justify-content:space-between;align-items:center;gap:12px;display:flex;position:fixed;left:20px;right:12px}.name{font:500 26px/1 var(--font-logo);letter-spacing:.04em}.theme{appearance:none;cursor:pointer;pointer-events:auto;width:40px;height:40px;color:var(--ink);background:0 0;border:0;border-radius:50%;place-items:center;padding:0;transition:background .15s;display:grid}.theme:focus-visible{outline:2px solid var(--strobe);outline-offset:2px}.transport{left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + var(--nav-height) + 16px);flex-direction:column;align-items:stretch;gap:8px;width:min(480px,100% - 32px);display:flex;position:fixed;transform:translate(-50%)}.seek{cursor:pointer;touch-action:none;padding:10px 0}.seek[aria-disabled=true]{cursor:default}.track{background:var(--track);border-radius:2px;height:4px;overflow:hidden}.fill{background:var(--control);border-radius:2px;height:100%}.buttons{justify-content:center;align-items:center;gap:16px;display:flex}.tbtn{appearance:none;cursor:pointer;width:48px;height:48px;color:var(--control);background:0 0;border:0;border-radius:50%;place-items:center;padding:0;transition:background .15s,opacity .15s;display:grid}.tbtn:disabled{cursor:default;opacity:.35;background:0 0}.tbtn.play{width:56px;height:56px;color:var(--stage);background:0 0;position:relative}.tbtn.play>svg:not(.arm-ring){position:relative}.arm-ring{width:100%;height:100%;position:absolute;inset:0}.arm-ring .disc{fill:var(--control);transition:fill .15s}.arm-ring .arc{fill:none;stroke:var(--control);transition:stroke .15s}.pick{appearance:none;cursor:pointer;background:var(--control);height:48px;color:var(--stage);font:500 14px/20px var(--font-body);letter-spacing:.02em;text-box:trim-both cap alphabetic;border:0;border-radius:24px;margin:4px 0;padding:0 24px;transition:background .15s,opacity .15s}.pick:disabled{cursor:default;opacity:.35;background:var(--control)}.pick:focus-visible{outline:2px solid var(--strobe);outline-offset:2px}.navbar{z-index:10;height:calc(var(--nav-height) - 28px);padding:12px 0 calc(env(safe-area-inset-bottom,0px) + 16px);box-sizing:content-box;background:var(--nav);box-shadow:inset 0 1px 0 var(--nav-edge,transparent);justify-content:center;gap:8px;display:flex;position:fixed;bottom:0;left:0;right:0}.navitem{appearance:none;cursor:pointer;color:var(--muted);font:500 12px/16px var(--font-body);letter-spacing:.04em;background:0 0;border:0;flex-direction:column;flex:0 120px;align-items:center;gap:4px;padding:0;display:flex}.navitem .indicator{border-radius:16px;place-items:center;width:64px;height:32px;transition:background .2s;display:grid}.navitem[aria-current=page]{color:var(--ink);font-weight:600}.navitem[aria-current=page] .indicator{background:var(--nav-indicator);color:var(--control)}.navitem:focus-visible{outline:none}.navitem:focus-visible .indicator,.tbtn:focus-visible,.seek:focus-visible{outline:2px solid var(--strobe);outline-offset:2px}#loading{font:500 13px/1 var(--font-mono);color:var(--muted);letter-spacing:.08em;pointer-events:none;place-items:center;display:grid;position:fixed;inset:0}#loading[hidden]{display:none}#diag{z-index:50;color:#eee;white-space:pre-wrap;pointer-events:none;background:#000000bf;border-radius:6px;max-width:calc(100% - 16px);margin:0;padding:6px 8px;font:10px/1.4 ui-monospace,Menlo,monospace;position:fixed;top:72px;left:8px}#diag.full{pointer-events:auto;border-radius:0;max-width:none;font-size:11px;inset:0;overflow:auto}#stage.dropping:after{content:"盤面画像をドロップ";border:2px dashed var(--strobe);font:500 14px/1 var(--font-mono);color:var(--strobe);letter-spacing:.08em;pointer-events:none;border-radius:8px;place-items:center;display:grid;position:fixed;inset:12px}@media (hover:hover){.tbtn:hover,.theme:hover{background:var(--track)}.tbtn.play:hover{background:0 0}.tbtn.play:hover .disc{fill:var(--control-hover)}.tbtn.play:hover .arc{stroke:var(--control-hover)}.tbtn:disabled:hover{background:0 0}.pick:hover{background:var(--control-hover)}.pick:disabled:hover{background:var(--control)}.navitem:hover .indicator{background:var(--track)}.navitem[aria-current=page]:hover .indicator{background:var(--nav-indicator)}}