:root{--paper: #fbfbf9;--ink: #1e1e1e;--ink-2: #4b5563;--ink-3: #8b93a1;--panel: rgba(255, 255, 255, .92);--panel-solid: #ffffff;--edge: rgba(20, 25, 45, .1);--edge-strong: rgba(20, 25, 45, .18);--accent: #6366f1;--accent-soft: rgba(99, 102, 241, .12);--danger: #ef4444;--shadow: 0 6px 24px rgba(18, 22, 40, .1), 0 1px 3px rgba(18, 22, 40, .06);--shadow-lg: 0 18px 50px rgba(18, 22, 40, .18);--r-sm: 8px;--r: 13px;--r-lg: 20px;--tap: 44px;--font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--font-hand: "Bradley Hand", "Chalkboard SE", "Segoe Print", "Comic Sans MS", cursive;color-scheme:light}[data-theme=dark]{--paper: #12141a;--ink: #e9ecf3;--ink-2: #aab2c3;--ink-3: #6f7889;--panel: rgba(26, 29, 38, .92);--panel-solid: #1a1d26;--edge: rgba(255, 255, 255, .09);--edge-strong: rgba(255, 255, 255, .16);--accent: #818cf8;--accent-soft: rgba(129, 140, 248, .18);--shadow: 0 6px 24px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);--shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{font-family:var(--font);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.app{position:relative;height:100%;width:100%;overflow:hidden}.canvas-wrap{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.board-canvas{display:block;touch-action:none}.text-overlay{position:absolute;z-index:20;margin:0;padding:0;border:none;outline:none;background:transparent;resize:none;overflow:hidden;white-space:pre;min-width:10px;min-height:1em;user-select:text;-webkit-user-select:text}.panel{position:absolute;z-index:30;background:var(--panel);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow)}.toolbar{bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px;padding:6px;max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}.tool{width:var(--tap);height:var(--tap);flex:0 0 auto;display:grid;place-items:center;border:none;border-radius:var(--r);background:transparent;color:var(--ink-2);font-size:19px;cursor:pointer;position:relative;transition:background .13s ease,color .13s ease,transform .13s ease}.tool:hover{background:var(--accent-soft);color:var(--ink)}.tool:active{transform:scale(.94)}.tool.active{background:var(--accent);color:#fff}.tool .kbd{position:absolute;right:4px;bottom:2px;font-size:9px;opacity:.45;font-family:var(--font)}.tool.active .kbd{opacity:.75}.divider{width:1px;align-self:stretch;margin:6px 4px;background:var(--edge);flex:0 0 auto}.side{top:max(76px,calc(env(safe-area-inset-top) + 66px));left:max(14px,env(safe-area-inset-left));width:232px;max-height:calc(100vh - 176px);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:14px}.side::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-thumb{background:var(--edge-strong);border-radius:3px}.group{display:flex;flex-direction:column;gap:7px}.label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}.swatches{display:flex;flex-wrap:wrap;gap:6px}.swatch{width:28px;height:28px;border-radius:9px;border:1px solid var(--edge-strong);cursor:pointer;padding:0;transition:transform .12s ease,box-shadow .12s ease}.swatch:hover{transform:scale(1.12)}.swatch.active{box-shadow:0 0 0 2px var(--panel-solid),0 0 0 4px var(--accent)}.swatch.none{background-image:linear-gradient(45deg,transparent 44%,var(--danger) 44%,var(--danger) 56%,transparent 56%)}.row{display:flex;gap:6px}.chip{flex:1;min-height:34px;border:1px solid var(--edge);background:transparent;color:var(--ink-2);border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;display:grid;place-items:center;transition:all .12s ease}.chip:hover{border-color:var(--edge-strong);color:var(--ink)}.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}input[type=range]{width:100%;accent-color:var(--accent);height:24px}.topright{top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;align-items:center;gap:2px;padding:6px}.brand{position:absolute;z-index:30;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));display:flex;align-items:center;gap:9px;padding:8px 14px 8px 10px;background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow)}.brand h1{margin:0;font-size:16px;font-family:var(--font-hand);letter-spacing:.02em;white-space:nowrap}.brand .dot{width:26px;height:26px;border-radius:9px;background:linear-gradient(140deg,#f59e0b,#ec4899 55%,#6366f1);display:grid;place-items:center;font-size:15px}.board-name{border:none;background:transparent;color:var(--ink);font-family:var(--font-hand);font-size:15px;width:130px;outline:none;border-bottom:1px dashed transparent;-webkit-user-select:text;user-select:text}.board-name:hover,.board-name:focus{border-bottom-color:var(--edge-strong)}.zoombar{display:flex;align-items:center;gap:2px}.zoomval{min-width:56px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}.tool.sm{width:36px;height:36px;font-size:15px}.menu{position:absolute;z-index:40;min-width:232px;padding:6px;background:var(--panel-solid);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow-lg)}.menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;border:none;background:transparent;color:var(--ink);font-size:13.5px;text-align:left;border-radius:9px;cursor:pointer}.menu button:hover:not(:disabled){background:var(--accent-soft)}.menu button:disabled{color:var(--ink-3);cursor:not-allowed}.menu button .sub{margin-left:auto;font-size:11px;color:var(--ink-3)}.menu hr{border:none;border-top:1px solid var(--edge);margin:5px 2px}.menu-title{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px 4px}.toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;border:none;background:transparent;color:var(--ink);font-size:13.5px;border-radius:9px;cursor:pointer}.toggle:hover{background:var(--accent-soft)}.toggle .sw{margin-left:auto;width:38px;height:22px;border-radius:11px;background:var(--edge-strong);position:relative;transition:background .16s ease;flex:0 0 auto}.toggle .sw:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .16s ease;box-shadow:0 1px 3px #0000004d}.toggle.on .sw{background:var(--accent)}.toggle.on .sw:after{transform:translate(16px)}.hint{font-size:11.5px;line-height:1.45;color:var(--ink-3);padding:2px 10px 8px}.present-bar{bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:8px 10px}.present-count{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:58px;text-align:center;font-weight:600}.tip-wrap{display:contents}.tip{position:fixed;z-index:200;transform:translate(-50%,-100%);pointer-events:none;padding:7px 11px;border-radius:10px;background:#1d2230;color:#f4f6fb;font-size:12.5px;font-weight:600;line-height:1.35;white-space:nowrap;box-shadow:0 8px 24px #0a0e1952;animation:tipin .12s ease-out;max-width:260px}[data-theme=dark] .tip{background:#eceff6;color:#171a22}.tip-bottom{transform:translate(-50%)}.tip em{display:block;font-style:normal;font-weight:500;opacity:.68;font-size:11.5px;white-space:normal}.tip:after{content:"";position:absolute;left:50%;margin-left:-5px;border:5px solid transparent}.tip-top:after{top:100%;border-top-color:#1d2230}.tip-bottom:after{bottom:100%;border-bottom-color:#1d2230}[data-theme=dark] .tip-top:after{border-top-color:#eceff6}[data-theme=dark] .tip-bottom:after{border-bottom-color:#eceff6}@keyframes tipin{0%{opacity:0}}.toast{position:absolute;z-index:60;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);padding:11px 18px;border-radius:999px;background:var(--panel-solid);border:1px solid var(--edge);box-shadow:var(--shadow-lg);font-size:13px;color:var(--ink);max-width:min(520px,88vw);animation:rise .22s ease}.toast.err{border-color:var(--danger);color:var(--danger)}@keyframes rise{0%{opacity:0;transform:translate(-50%,10px)}}.modeswitch{display:flex;gap:2px;padding:3px;background:var(--accent-soft);border-radius:12px}.modeswitch button{border:none;background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:9px;cursor:pointer;white-space:nowrap}.modeswitch button.active{background:var(--panel-solid);color:var(--ink);box-shadow:var(--shadow)}.kids{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(165deg,#fff7ed,#fef2f8 48%,#eef2ff);display:flex;flex-direction:column;overflow:hidden}[data-theme=dark] .kids{background:linear-gradient(165deg,#1b1420,#141726 55%,#101a20)}.kids-top{display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 14px 10px;flex:0 0 auto}.kids-title{font-family:var(--font-hand);font-size:22px;margin:0;color:var(--ink)}.kids-stage{flex:1 1 auto;position:relative;margin:0 12px;overflow:hidden;touch-action:none}.kids-paper{background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden}.kids-paper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);touch-action:none}.kids-paper canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.kids-outline{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.kids-underlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.kids-paper canvas{z-index:1}.kids-outline svg,.kids-underlay svg{width:100%;height:100%;display:block}.kids-tray{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 14px max(12px,env(safe-area-inset-bottom));overflow-x:auto;scrollbar-width:none}.kids-tray::-webkit-scrollbar{display:none}.crayons{display:flex;gap:8px;flex:0 0 auto}.crayon{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.9);box-shadow:0 3px 10px #0000002e;cursor:pointer;padding:0;transition:transform .14s cubic-bezier(.34,1.56,.64,1)}.crayon:active{transform:scale(.9)}.crayon.active{transform:translateY(-9px) scale(1.14);box-shadow:0 8px 18px #00000042}.kids-btn{min-width:58px;height:58px;padding:0 14px;border-radius:18px;border:none;background:var(--panel-solid);box-shadow:var(--shadow);font-size:22px;cursor:pointer;display:grid;place-items:center;flex:0 0 auto;transition:transform .14s cubic-bezier(.34,1.56,.64,1)}.kids-btn:active{transform:scale(.92)}.kids-btn.active{background:var(--accent);color:#fff}.kids-btn small{display:block;font-size:10px;font-weight:700;margin-top:1px}.kids-sizes{display:flex;gap:2px;align-items:center;flex:0 0 auto}.size-btn{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;border:2px solid transparent;border-radius:14px;background:transparent;cursor:pointer;padding:0;transition:border-color .14s ease,background .14s ease}.size-btn:hover{background:#0000000d}.size-btn.active{border-color:var(--accent);background:var(--panel-solid)}.size-dot{display:block;border-radius:50%;opacity:.55;transition:opacity .14s ease;box-shadow:0 0 0 1px #0000001f inset}.size-btn.active .size-dot,.size-btn:hover .size-dot{opacity:1}.picker{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;background:var(--panel);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);padding:max(16px,env(safe-area-inset-top)) 16px 16px;overflow-y:auto}.picker-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;margin:-8px -4px 16px;padding:8px 4px 10px;background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.picker h2{font-family:var(--font-hand);font-size:24px;margin:0}.picker-exit{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border:none;border-radius:14px;background:var(--panel-solid);box-shadow:var(--shadow);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer;flex:0 0 auto;transition:transform .14s cubic-bezier(.34,1.56,.64,1)}.picker-exit:active{transform:scale(.94)}.picker-exit.ghost{margin-left:auto;background:var(--accent);color:#fff}.picker-theme{margin-bottom:26px}.picker-theme h3{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:17px;font-weight:800;color:var(--ink)}.picker-theme h3 small{font-size:12px;font-weight:500;color:var(--ink-3)}.picker-foot{text-align:center;font-size:12px;color:var(--ink-3);padding:4px 0 18px}.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}.kids-hints{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:10px 14px 0;overflow-x:auto;scrollbar-width:none}.kids-hints::-webkit-scrollbar{display:none}.hint-lead{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}.hint-chip{display:flex;align-items:center;gap:7px;flex:0 0 auto;min-height:38px;padding:0 14px 0 10px;border:2px solid transparent;border-radius:999px;background:var(--panel-solid);box-shadow:var(--shadow);font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:transform .14s cubic-bezier(.34,1.56,.64,1),border-color .14s ease}.hint-chip:active{transform:scale(.94)}.hint-chip.active{border-color:var(--accent);transform:translateY(-2px)}.hint-dot{width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(0,0,0,.18);flex:0 0 auto}.picker-card{aspect-ratio:1;border-radius:18px;border:2px solid var(--edge);background:#fff;cursor:pointer;padding:8px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;transition:transform .14s cubic-bezier(.34,1.56,.64,1),border-color .14s ease}.picker-card:hover{transform:translateY(-4px);border-color:var(--accent)}.picker-card svg{width:100%;height:100%;flex:1 1 auto;min-height:0}.picker-card span{font-size:12px;font-weight:700;color:#4b5563}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media (max-width: 720px){.side{width:190px}.brand h1{display:none}.board-name{width:92px}}