:root{--brand:#e9784f;--brand-strong:#d5653d;--brand-soft:#fce9df;--brand-ring:#f4c7b2;--page-bg:#f7f2ea;--surface:#fff;--border:#ece3d6;--hover-bg:#f6f0e7;--text:#3d3027;--text-muted:#7a6a5a;--text-faint:#b3a697;--on-color:#fff;--danger:#c2543d;--ok:#4f8a45;--mask-bg:#3d302759;--toast-bg:#3d3027e0;--shadow-board:#3d302724;--shadow-board-near:#3d302714;--shadow-thumb:#3d302726;--shadow-bar:#3d30270f;--shadow-dialog:#3d302740;--board-wood:#f0daa3;--board-line:#674d27;--board-star:#674d27;--board-coord:#8a6a3e;--stone-black:#111;--stone-black-shine:#5a5a5a;--stone-white:#d8d2c6;--stone-white-shine:#fff;--stone-white-edge:#b8ae9c;--on-black-stone:#fff;--on-white-stone:#111;--last-num-on-black:#ff8a80;--last-num-on-white:#e03131;--mark-on-empty:#c0392b;--mark-miss:#6e6458;--branch-hint:var(--brand-strong);--branch-hint-active:var(--brand);--ghost-black:#2b2b2b;--ghost-white:#fff;--ghost-white-edge:#8c8273;--icon-stone-black:#2b2b2b;--icon-stone-white:#fff;--tree-line:#4a3a2a;--tree-line-off:#c9c0b2;--tree-black-off:#b8b2a8;--tree-num-off:#a89c8e;--tree-root-current:#ef8b67;--tree-chip-off:#f1ece4;--tree-chip-text-off:#9a8e80;--pen-red:#e03131;--pen-blue:#1971c2;--pen-pencil:#343a40;--app-head:#f7c474;--app-head-text:#3b312d;--app-bg:#fef6ea;--app-card:#fff;--app-card-soft:#fff4e5;--app-main:#eb6b4c;--app-main-strong:#d85a3c;--app-second:#f7c474;--app-second-text:#3b312d;--app-tabbar:#f6eae1;--app-track:#f3e9dc;--app-tag-go-bg:#fce3dd;--app-tag-start-bg:#f0e6da;--app-tag-start-text:#8c7b6e;--app-done-bg:#e8f5eb;--app-done:#4ca865;--app-off:#e1d8d0;--app-text:#3b312d;--app-text-sub:#7a6e64;--app-board:#efd9a7;--app-shadow:#3b312d0f;--app-cert-bg:#fff4e5;--tip-bg:var(--app-card-soft);--tip-text:var(--app-text);--tip-right-bg:var(--app-done-bg);--tip-right-text:var(--app-text);--tip-wrong-bg:var(--app-tabbar);--tip-wrong-text:var(--app-text);--tip-answer-bg:var(--app-tabbar);--tip-answer-text:var(--app-text);--av-line:#6b4a2e;--av-ink:#2a2826;--av-shine:#fff;--av-mouth:#e86a6a;--av-blush:#ff8c8c73;--av-shirt:#fff;--av-skin-light:#ffe3cc;--av-skin-medium:#f6c9a2;--av-skin-tan:#dba37a;--av-skin-deep:#a9714d;--av-hair-black:#2e2a28;--av-hair-brown:#7a4a2a;--av-hair-blonde:#ebc15a;--av-hair-red:#c8503e;--av-hair-blue:#4f7fd0;--av-yellow:#ffc93c;--av-yellow-deep:#e0a200;--av-blue:#4fc3f7;--av-blue-deep:#2a9bcb;--av-red:#e85d4a;--av-red-deep:#c2453a;--av-purple:#9b6bdf;--av-purple-deep:#7a4cc2;--av-gold:#ffd54a;--av-white:#fff;--av-glass:#c8ebff59;--radius:10px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--page-bg);color:var(--text);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none;font-family:PingFang TC,Noto Sans TC,Microsoft JhengHei,sans-serif;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:0}button:disabled{cursor:default;opacity:.35}button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.app{flex-direction:column;height:100%;display:flex}.stage{flex:1;align-items:stretch;min-height:0;display:flex}.board{touch-action:none;-webkit-touch-callout:none;flex:none;display:block}.board.playable{cursor:pointer}.board.drawable{cursor:crosshair}.topbar{background:var(--surface);border-top:1px solid var(--border);flex:none;align-items:center;height:52px;padding:0 16px;display:flex}.large .topbar{height:64px;padding:0 24px}.home-btn{height:44px;color:var(--text);white-space:nowrap;box-shadow:inset 0 0 0 1.5px var(--border);border-radius:8px;flex:none;align-items:center;gap:6px;margin-right:10px;padding:0 12px;font-size:15px;font-weight:700;text-decoration:none;display:flex}.large .home-btn{height:48px;font-size:17px}@media (hover:hover){.home-btn:hover{background:var(--hover-bg)}}.home-btn:active{background:var(--hover-bg)}.brand{color:var(--brand);letter-spacing:.04em;white-space:nowrap;margin-right:12px;font-size:18px;font-weight:800}.brand small{color:var(--text-muted);letter-spacing:0;margin-left:6px;font-size:13px;font-weight:500}.large .brand{font-size:22px}.large .brand small{font-size:15px}.tgroup{border-left:1px solid var(--border);align-items:center;gap:2px;height:28px;padding:0 10px;display:flex}.tbtn{width:40px;height:40px;color:var(--text);border-radius:8px;justify-content:center;align-items:center;transition:background .12s;display:flex}.large .tbtn{width:48px;height:48px}.tbtn.sel{background:var(--brand-soft);color:var(--brand-strong);box-shadow:inset 0 0 0 1.5px var(--brand-ring)}.tbtn-text{letter-spacing:.02em;font-size:13px;font-weight:700}.large .tbtn-text{font-size:15px}@media (hover:hover){.tbtn:not(.sel):not(:disabled):hover{background:var(--hover-bg)}}.side{background:var(--surface);border:1px solid var(--border);border-radius:14px;flex-direction:column;flex:none;gap:12px;min-height:0;padding:12px;display:flex}.add{border-radius:var(--radius);background:var(--brand);height:44px;color:var(--on-color);flex:none;justify-content:center;align-items:center;gap:4px;font-size:16px;font-weight:700;display:flex}.large .add{height:52px;font-size:19px}.add:active{background:var(--brand-strong)}.pages{flex-direction:column;flex:1;gap:10px;min-height:0;padding:2px;display:flex;overflow:hidden auto}.page-wrap{flex:none;animation:.35s cubic-bezier(.34,1.56,.64,1) pop;position:relative}.page{border-radius:var(--radius);background:0 0;border:2px solid #0000;flex-direction:column;align-items:center;gap:6px;width:100%;padding:6px;display:flex}.page.cur{border-color:var(--brand);background:var(--brand-soft)}@media (hover:hover){.page:not(.cur):hover{background:var(--hover-bg)}}.page-title{text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%;padding:0 26px;font-size:14px;font-weight:700;overflow:hidden}.large .page-title{font-size:17px}.page .board{box-shadow:0 1px 3px var(--shadow-thumb);border-radius:4px}.page-del{width:28px;height:28px;color:var(--text-faint);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:2px;right:2px}.large .page-del{width:34px;height:34px}@media (hover:hover){.page-del:hover{color:var(--on-color);background:var(--danger)}}.page-del:active{color:var(--on-color);background:var(--danger)}@keyframes pop{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}.save-state{color:var(--ok);flex:none;align-items:center;gap:6px;font-size:13px;display:flex}.large .save-state{font-size:15px}.save-state.fail{color:var(--danger);font-weight:700}.main{flex-direction:column;flex:1;justify-content:center;align-items:center;min-width:0;display:flex}.board-title{text-overflow:ellipsis;white-space:nowrap;justify-content:center;align-items:center;max-width:100%;margin:0;font-size:22px;font-weight:800;display:flex;overflow:hidden}.large .board-title{font-size:30px}.main>.board{box-shadow:0 10px 30px var(--shadow-board), 0 2px 6px var(--shadow-board-near);border-radius:10px}.empty{border:2px dashed var(--border);color:var(--text-muted);border-radius:14px;justify-content:center;align-items:center;font-size:20px;display:flex}.bar-wrap{flex:none;justify-content:center;align-items:center;display:flex}.bar{background:var(--surface);border:1.5px solid var(--brand);box-shadow:0 2px 8px var(--shadow-bar);border-radius:999px;align-items:center;gap:2px;padding:4px 8px;display:flex}.step{width:44px;height:38px;color:var(--text);border-radius:999px;justify-content:center;align-items:center;display:flex}.large .step{width:56px;height:46px}@media (hover:hover){.step:not(:disabled):hover{background:var(--hover-bg)}}.count{white-space:nowrap;font-variant-numeric:tabular-nums;justify-content:center;align-items:center;gap:8px;min-width:130px;font-size:18px;font-weight:800;display:flex}.large .count{min-width:170px;font-size:23px}.count small{color:var(--text-faint);font-size:.7em;font-weight:500}.turn{border-radius:50%;flex:none;width:16px;height:16px}.turn.B{background:var(--icon-stone-black)}.turn.W{background:var(--icon-stone-white);border:1.5px solid var(--icon-stone-black)}.moves{background:var(--surface);border:1px solid var(--border);border-radius:14px;flex-direction:column;flex:none;min-height:0;padding:12px;display:flex}.moves-head{color:var(--text-muted);margin-bottom:8px;font-size:14px;font-weight:700}.large .moves-head{font-size:17px}.moves-list{flex:1;min-height:0;overflow:auto}.tree{flex:none;display:block}.tree-node{cursor:pointer}.mask{background:var(--mask-bg);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog{background:var(--surface);width:380px;max-width:100%;box-shadow:0 16px 48px var(--shadow-dialog);border-radius:16px;padding:20px;animation:.2s ease-out pop}.dialog-head{justify-content:space-between;align-items:center;margin-bottom:8px;font-size:20px;font-weight:800;display:flex}.icon{width:40px;height:40px;color:var(--text-muted);border-radius:8px;justify-content:center;align-items:center;display:flex}@media (hover:hover){.icon:hover{background:var(--hover-bg)}}.field-label{color:var(--text-muted);margin:14px 0 6px;font-size:14px;display:block}input{border:1.5px solid var(--border);border-radius:var(--radius);width:100%;height:48px;font:inherit;color:var(--text);-webkit-user-select:text;user-select:text;padding:0 12px;font-size:18px}input:focus{border-color:var(--brand);outline:none}.sizes{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.sizes button{border-radius:var(--radius);border:1.5px solid var(--border);height:48px;font-size:17px;font-weight:700}.sizes button.sel{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong)}@media (hover:hover){.sizes button:not(.sel):hover{background:var(--hover-bg)}}.primary,.danger,.dialog-actions button{border-radius:var(--radius);width:100%;height:48px;font-size:17px;font-weight:700}.primary{background:var(--brand);color:var(--on-color);margin-top:20px}.primary:active{background:var(--brand-strong)}.dialog-text{margin:4px 0 20px;font-size:17px;line-height:1.6}.dialog-actions{grid-template-columns:1fr 1fr;gap:12px;display:grid}.dialog-actions button{border:1.5px solid var(--border)}.dialog-actions button.danger{background:var(--danger);border-color:var(--danger);color:var(--on-color)}.tree-chip{cursor:pointer}.dialog-actions button.primary-inline{background:var(--brand);border-color:var(--brand);color:var(--on-color)}.present-btn{background:var(--brand);height:40px;color:var(--on-color);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;margin-left:auto;padding:0 16px;font-size:15px;font-weight:700;display:flex}.large .present-btn{height:48px;padding:0 20px;font-size:18px}.present-btn.on{background:var(--text)}.bar-div{background:var(--border);width:1px;height:24px;margin:0 4px}.step.del{color:var(--danger)}.moves-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.head-btn{border:1px solid var(--border);height:32px;color:var(--text-muted);border-radius:999px;align-items:center;gap:4px;padding:0 10px;font-size:13px;display:flex}.large .head-btn{height:38px;font-size:15px}.moves-info{background:var(--page-bg);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:10px;padding:10px 12px;font-size:15px;display:flex}.large .moves-info{font-size:18px}.info-chip{background:var(--brand-soft);color:var(--brand-strong);border-radius:999px;padding:2px 8px;font-size:.85em;font-weight:700}.info-tip{color:var(--text-muted);flex-basis:100%;font-size:.8em}.import{border-radius:var(--radius);border:1px solid var(--border);height:40px;color:var(--text-muted);flex:none;justify-content:center;align-items:center;gap:4px;font-size:14px;font-weight:700;display:flex}.large .import{height:46px;font-size:16px}.toast{background:var(--toast-bg);color:var(--on-color);pointer-events:none;border-radius:999px;padding:10px 20px;font-size:18px;font-weight:700;animation:.2s ease-out fade;position:fixed;top:64px;left:50%;transform:translate(-50%)}.large .toast{font-size:22px;top:80px}@keyframes fade{0%{opacity:0}to{opacity:1}}