:root{--surface: #ffffff;--surface-2: #f5f6f8;--ink: #23252b;--ink-soft: #6b6f76;--line: rgba(20, 22, 28, .1);--accent: #2b47f0;--shadow: 0 8px 30px rgba(10, 12, 20, .28);--radius: 14px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#0a0b0d;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#app{position:fixed;inset:0;touch-action:none}#board{display:block;width:100%;height:100%;touch-action:none;cursor:none}.notch{position:fixed;top:0;left:50%;transform:translate(-50%);width:58px;height:20px;padding:0;border:none;border-radius:0 0 11px 11px;background:#ffffff29;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:40;transition:background .15s ease,height .15s ease}.notch:hover,.notch.open{background:#ffffff52;height:24px}.notch-grip{width:26px;height:4px;border-radius:3px;background:#ffffffb3}body.light-bg .notch{background:#14161c1f}body.light-bg .notch:hover,body.light-bg .notch.open{background:#14161c3d}body.light-bg .notch-grip{background:#14161c8c}.pages-handle{position:fixed;left:0;top:50%;transform:translateY(-50%);width:20px;height:58px;padding:0;border:none;border-radius:0 11px 11px 0;background:#ffffff29;color:#ffffffbf;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:40;transition:background .15s ease,width .15s ease}.pages-handle svg{width:16px;height:16px;transform:rotate(-90deg)}.pages-handle:hover,.pages-handle.open{background:#ffffff52;width:24px}body.light-bg .pages-handle{background:#14161c1f;color:#14161c8c}.pages-backdrop{position:fixed;inset:0;z-index:44;touch-action:none}.pages-panel{position:fixed;left:0;top:0;bottom:0;width:192px;z-index:45;background:var(--surface);box-shadow:var(--shadow);padding:12px;overflow-y:auto;transform:translate(-110%);transition:transform .2s cubic-bezier(.2,.9,.3,1)}.pages-panel.visible{transform:translate(0)}.pages-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.pages-title{font-size:15px;font-weight:600;color:var(--ink)}.pages-close{width:28px;height:28px;border:none;background:transparent;color:var(--ink-soft);border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.pages-close svg{width:18px;height:18px}.pages-list{display:flex;flex-direction:column;gap:14px}.pages-item{display:flex;flex-direction:column;gap:4px}.pages-thumb{padding:0;border:2px solid var(--line);border-radius:8px;overflow:hidden;background:transparent;cursor:pointer;line-height:0}.pages-item.active .pages-thumb{border-color:var(--accent)}.pages-thumb canvas{display:block;width:100%;height:auto}.pages-foot{display:flex;align-items:center;justify-content:space-between}.pages-label{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}.pages-del{border:none;background:transparent;color:var(--ink-soft);cursor:pointer;border-radius:6px;padding:2px 6px;font-size:12px;display:inline-flex;align-items:center}.pages-del svg{width:16px;height:16px}.pages-del.confirm{background:#e24b4a;color:#fff}.pages-add{margin-top:4px;height:44px;border:1.5px dashed var(--line);border-radius:8px;background:transparent;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px}.pages-add svg{width:18px;height:18px}.topbar-backdrop{position:fixed;inset:0;z-index:44;touch-action:none}.topbar{position:fixed;top:12px;left:50%;transform:translate(-50%,-160%);z-index:45;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px;max-width:calc(100vw - 24px);overflow-x:auto;opacity:0;pointer-events:none;transition:transform .18s cubic-bezier(.2,.9,.3,1),opacity .18s ease}.topbar.visible{transform:translate(-50%);opacity:1;pointer-events:auto}.bar-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;margin:0 auto}.bar-sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--line)}.tb-btn{width:40px;height:40px;border:none;border-radius:10px;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s ease,color .12s ease,transform .08s ease}.tb-btn svg{width:22px;height:22px}.tb-btn:hover{background:var(--surface-2)}.tb-btn:active{transform:scale(.92)}.tb-btn.active{background:var(--accent);color:#fff}.tb-btn:disabled{opacity:.32;cursor:default}.swatch{width:26px;height:26px;border-radius:50%;border:1px solid rgba(20,22,28,.28);padding:0;cursor:pointer;transition:transform .08s ease,box-shadow .12s ease}.swatch:active{transform:scale(.9)}.swatch.active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}.size-dot{width:34px;height:40px;border:none;background:transparent;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.size-dot:hover{background:var(--surface-2)}.size-dot-fill{display:block;border-radius:50%;background:var(--ink)}.size-dot.active{background:var(--surface-2)}.size-dot.active .size-dot-fill{background:var(--accent)}.page-label{font-size:13px;color:var(--ink-soft);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}.thickness{display:inline-flex;align-items:center;gap:8px;padding:0 6px}.thickness-slider{width:96px;accent-color:var(--accent)}.thickness-val{font-size:12px;color:var(--ink-soft);min-width:56px;text-align:right;font-variant-numeric:tabular-nums}.mode-btn{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font-size:13px;cursor:pointer;white-space:nowrap}.mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.selection-bar{position:fixed;z-index:42;background:var(--surface);border-radius:12px;box-shadow:var(--shadow);padding:4px;display:flex;gap:2px}.selection-bar .tb-btn{color:#e24b4a}.eraser-ring{position:fixed;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(150,150,150,.95);box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #ffffff8c;pointer-events:none;z-index:30}.setup-chip{width:40px;height:34px;border-radius:9px;border:1px solid var(--line);padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .08s ease,box-shadow .12s ease}.setup-chip:active{transform:scale(.94)}.setup-chip.active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}.setup-chip-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px #ffffff59}.picker{width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px dashed var(--line);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.picker-color{width:46px;height:46px;border:none;padding:0;background:transparent;cursor:pointer}.settings{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;gap:10px}.settings-label{font-size:13px;color:var(--ink-soft);min-width:96px}.settings-val{font-size:12px;color:var(--ink-soft);min-width:54px;font-variant-numeric:tabular-nums}.setup-color{display:inline-flex;align-items:center;gap:6px}.setup-color-label{font-size:12px;color:var(--ink-soft)}.hex-input{width:82px;height:30px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:12px;font-family:ui-monospace,SF Mono,monospace;color:var(--ink);background:var(--surface-2)}.delay-slider{flex:1;min-width:120px;accent-color:var(--accent)}.menu-backdrop{position:fixed;inset:0;z-index:50;touch-action:none}.arc-btn{position:fixed;width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);border:none}.arc-btn svg{width:22px;height:22px}.arc-btn.active{background:var(--accent);color:#fff}.arc-btn:disabled{opacity:.4}.menu-pill{position:fixed;display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--surface);border-radius:999px;box-shadow:var(--shadow)}.pill-sep{width:1px;height:24px;background:var(--line);margin:0 2px}.page-toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,12px);z-index:30;padding:8px 16px;border-radius:999px;background:#0f1116b8;color:#fff;font-size:14px;letter-spacing:.02em;font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.page-toast.visible{opacity:1;transform:translate(-50%)}.test-badge{position:fixed;left:12px;bottom:12px;z-index:30;padding:4px 10px;border-radius:999px;background:#0f111699;color:#ffffffbf;font-size:11px;letter-spacing:.06em;pointer-events:none}.app-badge{position:fixed;left:50%;bottom:12px;transform:translate(-50%);z-index:60;max-width:min(92vw,520px);padding:8px 14px;border-radius:12px;font-size:13px;line-height:1.3;text-align:center;box-shadow:0 6px 24px #0000004d;pointer-events:none}.app-badge.warn{background:#ffd84d;color:#2a2400}.app-badge.error{background:#ff5b5b;color:#2a0000}