*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--radius: 16px;--radius-sm: 10px;--z-sticky: 10;--z-overlay: 20;--z-modal: 30;--z-toast: 40;--dur: .2s;--ease: cubic-bezier(.22, 1, .36, 1)}:root,[data-theme=default]{color-scheme:dark;--bg: oklch(.15 .028 262);--bg-accent: oklch(.19 .045 262);--surface: oklch(.21 .032 262);--surface-2: oklch(.25 .034 262);--border: oklch(1 0 0 / .09);--text: oklch(.95 .008 255);--text-dim: oklch(.74 .02 255);--accent: oklch(.62 .17 258);--accent-soft: oklch(.62 .17 258 / .16);--accent-ink: oklch(.99 0 0);--danger: oklch(.62 .19 25);--ok: oklch(.7 .14 160);--warn: oklch(.76 .15 75);--warn-soft: oklch(.76 .15 75 / .14);--sq-light: oklch(.79 .035 255);--sq-dark: oklch(.48 .058 262);--sq-last: oklch(.75 .15 95 / .4);--sq-sel: oklch(.62 .17 258 / .55);--sq-dest: oklch(.25 .05 262 / .45);--sq-check: oklch(.6 .2 25 / .75);--pw-fill: oklch(.96 .005 90);--pw-stroke: oklch(.3 .02 260);--pb-fill: oklch(.27 .025 262);--pb-stroke: oklch(.88 .01 255);--shadow-1: 0 1px 2px oklch(0 0 0 / .25), 0 4px 16px oklch(0 0 0 / .25);--shadow-2: 0 4px 12px oklch(0 0 0 / .35), 0 16px 48px oklch(0 0 0 / .4)}[data-theme=dark]{color-scheme:dark;--bg: oklch(.115 0 0);--bg-accent: oklch(.15 0 0);--surface: oklch(.175 0 0);--surface-2: oklch(.22 0 0);--border: oklch(1 0 0 / .08);--text: oklch(.93 0 0);--text-dim: oklch(.7 0 0);--accent: oklch(.75 .11 200);--accent-soft: oklch(.75 .11 200 / .14);--accent-ink: oklch(.13 0 0);--sq-light: oklch(.66 .004 260);--sq-dark: oklch(.37 .004 260);--sq-last: oklch(.75 .11 200 / .35);--sq-sel: oklch(.75 .11 200 / .5);--sq-dest: oklch(.1 0 0 / .4);--pw-fill: oklch(.93 0 0);--pw-stroke: oklch(.25 0 0);--pb-fill: oklch(.24 0 0);--pb-stroke: oklch(.85 0 0)}[data-theme=wood]{color-scheme:dark;--bg: oklch(.24 .035 55);--bg-accent: oklch(.28 .04 55);--surface: oklch(.3 .042 58);--surface-2: oklch(.34 .045 60);--border: oklch(.9 .06 80 / .12);--text: oklch(.94 .02 85);--text-dim: oklch(.76 .035 75);--accent: oklch(.72 .13 70);--accent-soft: oklch(.72 .13 70 / .16);--accent-ink: oklch(.2 .04 55);--sq-light: oklch(.83 .065 82);--sq-dark: oklch(.55 .085 55);--sq-last: oklch(.72 .13 70 / .45);--sq-sel: oklch(.72 .13 70 / .55);--sq-dest: oklch(.28 .05 55 / .45);--pw-fill: oklch(.95 .025 90);--pw-stroke: oklch(.35 .05 50);--pb-fill: oklch(.3 .045 45);--pb-stroke: oklch(.9 .03 85)}[data-theme=modern]{color-scheme:light;--bg: oklch(.965 .005 255);--bg-accent: oklch(.93 .01 258);--surface: oklch(.995 .001 255);--surface-2: oklch(.94 .008 255);--border: oklch(.2 .02 260 / .1);--text: oklch(.24 .02 260);--text-dim: oklch(.45 .02 260);--accent: oklch(.53 .19 272);--accent-soft: oklch(.53 .19 272 / .12);--accent-ink: oklch(.99 0 0);--sq-light: oklch(.93 .012 262);--sq-dark: oklch(.62 .052 268);--sq-last: oklch(.8 .13 95 / .55);--sq-sel: oklch(.53 .19 272 / .45);--sq-dest: oklch(.3 .05 268 / .35);--pw-fill: oklch(.99 .002 90);--pw-stroke: oklch(.4 .03 265);--pb-fill: oklch(.33 .03 265);--pb-stroke: oklch(.97 .005 255);--shadow-1: 0 1px 2px oklch(.3 .03 262 / .08), 0 4px 16px oklch(.3 .03 262 / .08);--shadow-2: 0 4px 12px oklch(.3 .03 262 / .12), 0 16px 48px oklch(.3 .03 262 / .14)}[data-theme=glass]{color-scheme:dark;--bg: oklch(.2 .05 285);--bg-accent: oklch(.24 .06 300);--surface: oklch(1 0 0 / .07);--surface-2: oklch(1 0 0 / .12);--border: oklch(1 0 0 / .16);--text: oklch(.97 .005 280);--text-dim: oklch(.8 .02 285);--accent: oklch(.75 .11 195);--accent-soft: oklch(.75 .11 195 / .18);--accent-ink: oklch(.16 .04 285);--sq-light: oklch(1 0 0 / .28);--sq-dark: oklch(.1 .03 290 / .38);--sq-last: oklch(.75 .11 195 / .4);--sq-sel: oklch(.75 .11 195 / .55);--sq-dest: oklch(1 0 0 / .25);--pw-fill: oklch(.97 .005 280);--pw-stroke: oklch(.3 .05 290);--pb-fill: oklch(.25 .05 295);--pb-stroke: oklch(.92 .01 285)}[data-theme=neon]{color-scheme:dark;--bg: oklch(.13 .035 305);--bg-accent: oklch(.17 .05 310);--surface: oklch(.18 .045 308);--surface-2: oklch(.22 .055 310);--border: oklch(.72 .2 340 / .25);--text: oklch(.95 .01 320);--text-dim: oklch(.75 .04 320);--accent: oklch(.7 .22 340);--accent-soft: oklch(.7 .22 340 / .18);--accent-ink: oklch(.99 0 0);--sq-light: oklch(.44 .085 315);--sq-dark: oklch(.27 .065 305);--sq-last: oklch(.8 .16 195 / .4);--sq-sel: oklch(.8 .16 195 / .55);--sq-dest: oklch(.8 .16 195 / .3);--sq-check: oklch(.65 .25 25 / .8);--pw-fill: oklch(.22 .05 200);--pw-stroke: oklch(.85 .14 195);--pb-fill: oklch(.2 .06 335);--pb-stroke: oklch(.78 .19 340)}[data-contrast=high]{--sq-light: oklch(.92 0 0);--sq-dark: oklch(.35 0 0);--sq-last: oklch(.85 .17 95 / .7);--sq-sel: oklch(.65 .2 255 / .8);--text: oklch(.99 0 0);--border: oklch(1 0 0 / .3);--pw-fill: oklch(1 0 0);--pw-stroke: oklch(0 0 0);--pb-fill: oklch(.05 0 0);--pb-stroke: oklch(1 0 0)}[data-theme=modern][data-contrast=high]{--text: oklch(.1 0 0);--border: oklch(0 0 0 / .4)}html{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100%;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 18% 8%,var(--bg-accent),transparent 70%),radial-gradient(50% 45% at 85% 90%,var(--bg-accent),transparent 70%)}[data-theme=glass] body:before,[data-theme=neon] body:before{opacity:.9}#app{min-height:100dvh;display:flex;flex-direction:column;max-width:1100px;margin:0 auto;padding:max(.75rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}::selection{background:var(--accent);color:var(--accent-ink)}h1,h2,h3{line-height:1.15;text-wrap:balance;letter-spacing:-.01em}a{color:var(--accent)}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}[data-motion=off] *,[data-motion=off] *:before,[data-motion=off] *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.topbar{display:flex;align-items:center;gap:.75rem;padding:.25rem 0 1rem}.topbar .back{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}.topbar .back:hover{background:var(--surface-2)}.topbar .back:active{transform:scale(.94)}.topbar .back svg{width:18px;height:18px;stroke:var(--text)}.topbar h1{font-size:1.15rem;font-weight:650}.topbar .spacer{flex:1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.1rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:550;font-size:.95rem;cursor:pointer;user-select:none;-webkit-user-select:none;text-decoration:none;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}.btn:hover{background:var(--surface-2)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:default;transform:none}.btn.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink)}.btn.primary:hover{filter:brightness(1.08);background:var(--accent)}.btn.danger{color:var(--danger);border-color:color-mix(in oklab,var(--danger) 35%,transparent)}.btn.ghost{background:transparent;border-color:transparent;color:var(--text-dim)}.btn.ghost:hover{background:var(--surface);color:var(--text)}.btn.small{padding:.4rem .75rem;font-size:.85rem;border-radius:8px}.btn.icon{padding:.55rem}.btn svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.btn.small svg{width:15px;height:15px}@media (pointer: coarse){.topbar .back{width:44px;height:44px}.btn.small{padding:.55rem .9rem}}.btn-row{display:flex;flex-wrap:wrap;gap:.6rem}.menu-screen{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2.5rem;padding:2rem 0 3rem}.brand{text-align:center}.brand .logo{width:72px;height:72px;margin:0 auto 1rem;display:block;filter:drop-shadow(0 8px 24px var(--accent-soft))}.brand h1{font-size:clamp(2.6rem,8vw,3.6rem);font-weight:700;letter-spacing:-.03em}.brand p{color:var(--text-dim);margin-top:.35rem;font-size:1rem}.menu-cards{display:flex;flex-direction:column;gap:1rem;width:min(100%,460px);margin:0 auto}.big-card{position:relative;display:flex;align-items:center;gap:1.25rem;padding:1.6rem 1.75rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);cursor:pointer;overflow:hidden;text-align:left;box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}.big-card:hover,.big-card:focus-visible{transform:translateY(-3px);border-color:color-mix(in oklab,var(--accent) 45%,var(--border));box-shadow:var(--shadow-2)}.big-card:active{transform:translateY(0) scale(.985);transition-duration:80ms}.big-card .glyph{width:54px;height:54px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--accent-soft)}.big-card .glyph svg{width:30px;height:30px}.big-card .label{font-size:1.35rem;font-weight:700;letter-spacing:.01em}.big-card .sub{color:var(--text-dim);font-size:.9rem;margin-top:.15rem}.big-card.play{background:linear-gradient(115deg,var(--accent-soft),transparent 55%),var(--surface)}.big-card.play:after{content:"";position:absolute;right:-18px;bottom:-18px;width:108px;height:108px;border-radius:10px;opacity:.16;background:conic-gradient(var(--text) 90deg,transparent 90deg 180deg,var(--text) 180deg 270deg,transparent 270deg);background-size:54px 54px;pointer-events:none}.menu-foot{text-align:center;color:var(--text-dim);font-size:.85rem}.menu-foot a{color:var(--text-dim)}.stack{display:flex;flex-direction:column;gap:.75rem;width:min(100%,560px);margin:0 auto}.opt-card{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.2rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);cursor:pointer;text-align:left;width:100%;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}.opt-card:hover{background:var(--surface-2);transform:translate(3px)}.opt-card:active{transform:scale(.985)}.opt-card .glyph{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft)}.opt-card .glyph svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.opt-card .txt{flex:1;min-width:0}.opt-card .label{font-weight:650;font-size:1.02rem}.opt-card .sub{color:var(--text-dim);font-size:.85rem;margin-top:.1rem}.opt-card .chev{color:var(--text-dim);flex:none}.panel{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:1.25rem}.panel+.panel{margin-top:.9rem}.panel h2{font-size:1rem;font-weight:650;margin-bottom:.9rem}.field{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0}.field+.field{border-top:1px solid var(--border)}.field.stack{flex-direction:column;align-items:stretch;gap:.5rem}.field.stack input{width:100%}.field>label:first-child,.field .flabel{font-size:.95rem}.field .fhint{display:block;color:var(--text-dim);font-size:.8rem;margin-top:.1rem}select,input[type=text],input[type=number],textarea{font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .7rem;max-width:100%}textarea{width:100%;resize:vertical;font-family:var(--mono);font-size:.85rem}.seg{display:inline-flex;gap:2px;background:var(--surface-2);padding:3px;border-radius:var(--radius-sm);border:1px solid var(--border)}.seg button{border:0;background:transparent;color:var(--text-dim);padding:.35rem .8rem;border-radius:7px;cursor:pointer;font-size:.88rem;font-weight:550;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.seg button:not([aria-pressed=true]):hover{color:var(--text)}.switch{position:relative;width:46px;height:27px;flex:none;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;transition:background var(--dur) var(--ease)}.switch:after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--text-dim);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}.switch[aria-checked=true]{background:var(--accent);border-color:transparent}.switch[aria-checked=true]:after{transform:translate(19px);background:var(--accent-ink)}input[type=range]{accent-color:var(--accent);width:160px}.board-wrap{position:relative;width:100%}.board{position:relative;width:100%;aspect-ratio:1;container-type:inline-size;border-radius:12px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow-1);outline-offset:4px}[data-theme=glass] .board{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.board.pointer-focus:focus-visible{outline:none}[data-theme=neon] .board{box-shadow:0 0 0 1px var(--border),0 0 28px var(--accent-soft),var(--shadow-1)}.sq{position:absolute;width:12.5%;height:12.5%}.sq.light{background:var(--sq-light)}.sq.dark{background:var(--sq-dark)}.sq .coord{position:absolute;font-size:clamp(8px,1.6cqw,11px);font-weight:600;pointer-events:none;opacity:.8}.sq .coord.file{right:4px;bottom:2px}.sq .coord.rank{left:4px;top:2px}.sq.light .coord{color:var(--sq-dark)}.sq.dark .coord{color:var(--sq-light)}.sq.last:before,.sq.sel:before,.sq.check:before,.sq.cursor:after,.sq.premove:before{content:"";position:absolute;inset:0;pointer-events:none}.sq.last:before{background:var(--sq-last)}.sq.sel:before{background:var(--sq-sel)}.sq.premove:before{background:#ff9e2c80;box-shadow:inset 0 0 0 3px #ff9e2cd9}.sq.check:before{background:radial-gradient(circle at 50% 50%,var(--sq-check),transparent 72%)}.sq.cursor:after{box-shadow:inset 0 0 0 3px var(--accent);border-radius:2px}.sq.hint:before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--accent-soft);box-shadow:inset 0 0 0 3px var(--accent);animation:hint-pulse .55s var(--ease) 2}@keyframes hint-pulse{50%{opacity:.35}}.sq .dest-dot,.sq .dest-ring{position:absolute;inset:0;pointer-events:none}.sq .dest-dot:after{content:"";position:absolute;left:50%;top:50%;width:30%;height:30%;transform:translate(-50%,-50%);border-radius:50%;background:var(--sq-dest)}.sq .dest-ring:after{content:"";position:absolute;inset:6%;border-radius:50%;border:calc(.5cqw + 2.5px) solid var(--sq-dest)}.piece{position:absolute;width:12.5%;height:12.5%;display:grid;place-items:center;pointer-events:none;will-change:transform;z-index:2}.board.animate .piece{transition:transform .18s var(--ease)}.piece svg{width:88%;height:88%;display:block}.piece .uni{font-size:9.2cqw;line-height:1;-webkit-text-stroke:.6px var(--stroke, transparent)}.piece.dragging{z-index:5;transition:none!important;transform-origin:center}.piece.dragging svg,.piece.dragging .uni{transform:scale(1.15);filter:drop-shadow(0 6px 14px oklch(0 0 0 / .4))}.piece.fade-in{animation:piece-in .16s var(--ease)}@keyframes piece-in{0%{opacity:0;transform:scale(.6)}}.piece.w svg .fill,.promo-col .w svg .fill,.palette .w svg .fill{fill:var(--pw-fill)}.piece.w svg .line,.promo-col .w svg .line,.palette .w svg .line{stroke:var(--pw-stroke)}.piece.w svg .dot,.promo-col .w svg .dot,.palette .w svg .dot{fill:var(--pw-stroke)}.piece.b svg .fill,.promo-col .b svg .fill,.palette .b svg .fill{fill:var(--pb-fill)}.piece.b svg .line,.promo-col .b svg .line,.palette .b svg .line{stroke:var(--pb-stroke)}.piece.b svg .dot,.promo-col .b svg .dot,.palette .b svg .dot{fill:var(--pb-stroke)}svg .open{fill:none}.promo-col .uni,.palette .uni{font-size:1.9rem;line-height:1}.promo-col .w .uni,.palette .w .uni{color:var(--pw-fill);-webkit-text-stroke:.6px var(--pw-stroke)}.promo-col .b .uni,.palette .b .uni{color:var(--pb-fill);-webkit-text-stroke:.6px var(--pb-stroke)}.piece.w .uni{color:var(--pw-fill);--stroke: var(--pw-stroke)}.piece.b .uni{color:var(--pb-fill);--stroke: var(--pb-stroke)}.promo-overlay{position:absolute;inset:0;z-index:var(--z-overlay);background:#00000073;display:flex}.promo-col{position:absolute;width:12.5%;display:flex;flex-direction:column;background:var(--surface);border-radius:8px;box-shadow:var(--shadow-2);overflow:hidden}.promo-col button{aspect-ratio:1;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;transition:background var(--dur) var(--ease)}.promo-col button:hover{background:var(--accent-soft)}.promo-col button svg{width:80%;height:80%}.game-screen{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;align-content:start}.game-main{width:100%;max-width:min(100%,calc(100dvh - 230px));margin:0 auto}.player-bar{display:flex;align-items:center;gap:.7rem;padding:.5rem .25rem;min-height:48px}.player-bar .avatar{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);font-size:1.05rem}.player-bar .pname{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-bar .captured{flex:1;min-width:0;display:flex;align-items:center;gap:1px;overflow:hidden}.player-bar .captured span{font-size:1rem;opacity:.85;letter-spacing:-2px}.player-bar .mat{color:var(--text-dim);font-size:.8rem;margin-left:4px}.player-bar .clock{font-family:var(--mono);font-size:1.25rem;font-weight:600;padding:.25rem .6rem;border-radius:9px;background:var(--surface);border:1px solid var(--border);font-variant-numeric:tabular-nums}.player-bar .clock.active{background:var(--accent-soft);border-color:color-mix(in oklab,var(--accent) 40%,transparent)}.player-bar .clock.low{color:var(--danger)}.player-bar.flipped{transform:rotate(180deg)}.game-side{display:flex;flex-direction:column;gap:.75rem;min-width:0}.movelist-wrap{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;display:flex;flex-direction:column;min-height:90px}.movelist{overflow-y:auto;padding:.6rem .8rem;display:grid;grid-template-columns:auto 1fr 1fr;gap:.1rem .6rem;font-size:.92rem;align-content:start;max-height:30dvh}.movelist .num{color:var(--text-dim);font-variant-numeric:tabular-nums}.movelist .mv{border:0;background:none;text-align:left;cursor:pointer;border-radius:5px;padding:.05rem .35rem;color:var(--text);font:inherit}.movelist .mv:hover{background:var(--surface-2)}.movelist .mv.cur{background:var(--accent-soft);font-weight:650}.game-status{padding:.55rem .8rem;border-top:1px solid var(--border);color:var(--text-dim);font-size:.88rem;min-height:2.2rem;display:flex;align-items:center;gap:.5rem}.game-status .thinking{width:14px;height:14px;border-radius:50%;flex:none;border:2px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.game-tools{display:flex;flex-wrap:wrap;gap:.5rem}@media (max-width: 899px){.game-tools .btn{flex:1 1 auto}}@media (min-width: 900px){.game-screen{grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr);align-items:start}.game-main{max-width:min(100%,calc(100dvh - 150px))}.movelist{max-height:46dvh}}.result-overlay{position:absolute;inset:0;z-index:var(--z-overlay);display:grid;place-items:center;background:#00000080;animation:fade-in .25s var(--ease)}@keyframes fade-in{0%{opacity:0}}.result-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);padding:1.5rem 2rem;text-align:center;width:min(88%,330px);animation:pop-in .3s var(--ease)}@keyframes pop-in{0%{opacity:0;transform:scale(.9) translateY(8px)}}.result-card .r-title{font-size:1.4rem;font-weight:700}.result-card .r-sub{color:var(--text-dim);margin:.25rem 0 1.1rem}.result-card .btn-row{justify-content:center}.editor-screen{display:grid;gap:.9rem}.editor-main{width:100%;max-width:min(100%,calc(100dvh - 300px));margin:0 auto}.palette{display:flex;justify-content:center;gap:2px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);padding:4px}.palette button{width:clamp(34px,10vw,48px);aspect-ratio:1;border:0;border-radius:8px;background:transparent;cursor:pointer;display:grid;place-items:center;transition:background var(--dur) var(--ease)}.palette button svg{width:86%;height:86%}.palette button:hover{background:var(--surface-2)}.palette button[aria-pressed=true]{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}.editor-side{display:flex;flex-direction:column;gap:.75rem}@media (min-width: 900px){.editor-screen{grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);align-items:start}.editor-main{max-width:min(100%,calc(100dvh - 210px))}}dialog.modal{margin:auto;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--radius);box-shadow:var(--shadow-2);padding:1.5rem;width:min(92vw,420px)}dialog.modal::backdrop{background:#0000008c}dialog.modal h2{font-size:1.15rem;margin-bottom:.75rem}dialog.modal .btn-row{margin-top:1.2rem;justify-content:flex-end}.err-details{margin-top:.9rem}.err-details .code-box{white-space:pre-wrap;word-break:break-word;max-height:200px;font-size:.75rem;user-select:text;-webkit-user-select:text}.err-details .btn-row{margin-top:.6rem}.toast-host{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1.2rem,env(safe-area-inset-bottom));z-index:var(--z-toast);display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;pointer-events:none;width:max-content;max-width:min(92vw,24rem)}.toast{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:.6rem 1.2rem;box-shadow:var(--shadow-2);font-size:.9rem;animation:toast-in .25s var(--ease)}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}}.toast.out{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}.code-box{font-family:var(--mono);font-size:.8rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem .9rem;word-break:break-all;max-height:120px;overflow-y:auto;user-select:all;-webkit-user-select:all}.hint-text{color:var(--text-dim);font-size:.85rem}.center-note{text-align:center;color:var(--text-dim);padding:2rem 1rem}.empty-state{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;padding:2.5rem 1rem}.empty-state .glyph{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--accent-soft)}.empty-state .glyph svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.empty-state p{color:var(--text-dim);max-width:36ch}.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.6rem}.theme-swatch{border:1px solid var(--border);border-radius:var(--radius-sm);background:none;cursor:pointer;padding:.5rem;display:flex;flex-direction:column;gap:.4rem;align-items:center;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}.theme-swatch[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.theme-swatch .mini{width:100%;aspect-ratio:2/1;border-radius:6px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}.theme-swatch .mini i{display:block}.theme-swatch span{font-size:.8rem}.screen-enter{animation:screen-in .24s var(--ease)}@keyframes screen-in{0%{opacity:0;transform:translateY(8px)}}.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--text-dim);border:1px solid var(--border);border-radius:999px;padding:.2rem .65rem}.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--text-dim)}.badge.on .dot{background:var(--ok)}.badge.on.relay{color:var(--warn);border-color:var(--warn-soft)}.badge.on.relay .dot{background:var(--warn)}.dev-indicator{position:fixed;top:max(.85rem,env(safe-area-inset-top));right:max(.85rem,env(safe-area-inset-right));z-index:var(--z-toast);display:flex;align-items:center;gap:.45rem;padding:.45rem .6rem;border:1px solid var(--border);border-radius:999px;background:color-mix(in oklch,var(--surface) 86%,transparent);backdrop-filter:blur(14px);box-shadow:var(--shadow-1);pointer-events:none;max-width:calc(100vw - 1.7rem)}.dev-indicator-tag,.dev-indicator-chip{display:inline-flex;align-items:center;min-height:1.55rem;padding:0 .5rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.dev-indicator-tag{color:var(--accent-ink);background:var(--accent)}.dev-indicator-chip{color:var(--text);background:var(--surface-2);border:1px solid var(--border)}.relay-note{display:flex;align-items:flex-start;gap:.6rem;margin:0 0 .75rem;padding:.7rem .85rem;background:var(--warn-soft);border:1px solid var(--warn-soft);border-radius:var(--radius-sm);font-size:.82rem;line-height:1.45;color:var(--text)}.relay-note-ico{flex:none;color:var(--warn)}.relay-note-ico svg{width:18px;height:18px;display:block}.relay-note-body strong{color:var(--warn)}.relay-note-x{flex:none;margin-left:auto;align-self:flex-start;width:24px;height:24px;border-radius:6px;background:none;border:none;cursor:pointer;font-size:1.2rem;line-height:1;color:var(--text-dim)}.relay-note-x:hover{background:var(--surface-2);color:var(--text)}.dev-diag{position:fixed;left:max(.85rem,env(safe-area-inset-left));bottom:max(.85rem,env(safe-area-inset-bottom));z-index:var(--z-toast);min-width:12.5rem;max-width:calc(100vw - 1.7rem);padding:.5rem .65rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:color-mix(in oklch,var(--surface) 90%,transparent);backdrop-filter:blur(14px);box-shadow:var(--shadow-1);font-size:.72rem;line-height:1.5}.dev-diag-head{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.66rem;color:var(--text-dim)}.dev-diag-head:before{content:"";width:.5rem;height:.5rem;border-radius:999px;background:var(--text-dim);flex:none}.dev-diag[data-transport=direct] .dev-diag-head:before{background:var(--ok, #3fb950)}.dev-diag[data-transport=relay] .dev-diag-head:before{background:var(--warn)}.dev-diag-row{display:flex;justify-content:space-between;gap:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.dev-diag-row>span:first-child{color:var(--text-dim);text-transform:none}.dev-diag-row>span:last-child{color:var(--text);text-align:right}.dev-diag-row.warn>span:last-child{color:var(--warn)}.dev-diag-row.ok>span:last-child{color:var(--ok, #3fb950)}.lobby{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1.75rem 1.25rem 2rem;border-radius:var(--radius);border:1px solid var(--border);background:radial-gradient(120% 90% at 50% -20%,var(--accent-soft),transparent 62%),var(--surface);box-shadow:var(--shadow-1)}.lobby-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}.code-tiles{display:flex;gap:clamp(.3rem,1.6vw,.55rem);margin-top:-.65rem;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;border-radius:var(--radius-sm);transition:transform var(--dur) var(--ease)}.code-tiles:active{transform:scale(.98)}.code-tiles:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.code-tile{display:grid;place-items:center;width:clamp(2.6rem,13vw,3.4rem);height:clamp(3.3rem,16.5vw,4.3rem);border-radius:12px;border:1px solid var(--border);background:var(--surface-2);font-family:var(--mono);font-size:clamp(1.7rem,8.5vw,2.3rem);font-weight:700;line-height:1;letter-spacing:0;color:var(--text)}.code-tiles:hover .code-tile{border-color:color-mix(in oklab,var(--accent) 40%,var(--border))}.qr-plate{width:clamp(9rem,44vw,11.5rem);padding:.6rem;border-radius:14px;background:#fff;box-shadow:var(--shadow-1)}.qr-plate svg{display:block;width:100%;height:auto}.waiting{display:flex;align-items:center;gap:.6rem;color:var(--text-dim);font-size:.9rem}.waiting .pulse{width:.55rem;height:.55rem;border-radius:999px;flex:none;background:var(--accent);animation:lobby-pulse 1.6s var(--ease) infinite}@keyframes lobby-pulse{0%,to{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}.thinking{width:14px;height:14px;border-radius:50%;flex:none;border:2px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .9s linear infinite}.pin-row{display:flex;justify-content:center;gap:clamp(.3rem,1.8vw,.6rem)}.pin-box{width:clamp(2.7rem,14vw,3.5rem);height:clamp(3.4rem,17vw,4.4rem);padding:0;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-family:var(--mono);font-size:clamp(1.6rem,8vw,2.1rem);font-weight:700;text-align:center;text-transform:uppercase;caret-color:var(--accent);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}.pin-box:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}.pin-box[data-filled=true]{border-color:color-mix(in oklab,var(--accent) 45%,var(--border))}.pin-row[data-invalid=true] .pin-box{border-color:color-mix(in oklab,var(--danger) 55%,var(--border))}.pin-row[data-invalid=true]{animation:pin-shake .3s var(--ease)}@keyframes pin-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.scan-sheet{position:fixed;inset:0;z-index:var(--z-modal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:1.25rem;background:color-mix(in oklch,var(--bg) 92%,black)}.scan-stage{position:relative;width:min(84vw,26rem);aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow-2)}.scan-stage video{width:100%;height:100%;object-fit:cover}.scan-frame{position:absolute;inset:14%;border-radius:14px;box-shadow:0 0 0 100vmax color-mix(in oklch,black 45%,transparent);outline:2px solid var(--accent);outline-offset:-2px}.scan-hint{color:var(--text-dim);font-size:.9rem;text-align:center;max-width:22rem}.scan-close{min-width:8rem}@media (prefers-reduced-motion: reduce){.waiting .pulse,.pin-row[data-invalid=true]{animation:none}}