:root{--font-ui:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--radius-lg:22px;--radius-md:14px;--radius-sm:10px;--ease:cubic-bezier(.22, 1, .36, 1);--topbar-h:58px;--safe-b:env(safe-area-inset-bottom,0px)}:root,:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#141317;--desk:#0f0e12;--surface:#1e1d22;--surface-2:#26252b;--surface-glass:#1e1d22db;--line:#ffffff14;--line-strong:#ffffff29;--text:#f3f0ea;--text-soft:#cfcac1;--muted:#9a958c;--accent:#ff6a3d;--accent-ink:#1a0d07;--accent-soft:#ff6a3d29;--danger:#ff6b6b;--logo-bg:#ff6a3d;--shadow:0 1px 0 #ffffff0a inset, 0 18px 40px -18px #000000b3;--page-shadow:0 0 0 1px #ffffff0d, 0 12px 32px -10px #000000b3}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f3efe7;--desk:#e8e3d9;--surface:#fffdf9;--surface-2:#f4f0e9;--surface-glass:#fffdf9e6;--line:#2820141a;--line-strong:#28201433;--text:#1d1a16;--text-soft:#403a32;--muted:#736c61;--accent:#e2522a;--accent-ink:#fff;--accent-soft:#e2522a1f;--danger:#d23b3b;--logo-bg:#e2522a;--shadow:0 1px 0 #ffffffe6 inset, 0 14px 34px -18px #3c280a59;--page-shadow:0 0 0 1px #28201414, 0 10px 26px -12px #3c280a59}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font:15px/1.45 var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;overflow:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{grid-template-rows:var(--topbar-h) 1fr;height:100%;display:grid;position:relative}.topbar{padding:0 14px;padding-top:env(safe-area-inset-top,0px);height:calc(var(--topbar-h) + env(safe-area-inset-top,0px));background:var(--surface);border-bottom:1px solid var(--line);z-index:20;align-items:center;gap:12px;display:flex;position:relative}.app{grid-template-rows:calc(var(--topbar-h) + env(safe-area-inset-top,0px)) 1fr}.brand{flex-shrink:0;align-items:center;gap:10px;display:flex}.logo{flex-shrink:0;display:block}.brand-name{letter-spacing:-.02em;font-size:17px;font-weight:750}.doc-title{min-width:0;color:var(--text-soft);flex:1;justify-content:center;align-items:center;gap:8px;font-size:14px;display:flex}.doc-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dirty-dot{background:var(--accent);border-radius:50%;flex-shrink:0;width:8px;height:8px}.top-actions{align-items:center;gap:6px;margin-left:auto;display:flex}.app.has-doc .top-actions{margin-left:0}.group{background:var(--surface-2);border-radius:12px;align-items:center;gap:2px;padding:3px;display:flex}.icon-btn{width:38px;height:38px;color:var(--text-soft);transition:background .15s, color .15s, transform .15s var(--ease);background:0 0;border:0;border-radius:10px;place-items:center;display:inline-grid}.group .icon-btn{width:34px;height:34px}.icon-btn:hover:not(:disabled){background:var(--line);color:var(--text)}.icon-btn:active:not(:disabled){transform:scale(.94)}.icon-btn:disabled{opacity:.35}.icon-btn.danger{color:var(--danger)}.zoom-value{font-variant-numeric:tabular-nums;min-width:58px;height:34px;color:var(--text-soft);background:0 0;border:0;border-radius:9px;font-size:13px}.zoom-value:hover{background:var(--line)}.btn{border:1px solid var(--line-strong);background:var(--surface);height:40px;transition:transform .15s var(--ease), background .15s, box-shadow .15s;white-space:nowrap;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:14px;font-weight:600;display:inline-flex}.btn:hover:not(:disabled){background:var(--surface-2)}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.6}.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 20px -10px var(--accent);border-color:#0000}.btn-primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.06)}.btn-lg{border-radius:16px;height:52px;padding:0 26px;font-size:16px}.save-btn{margin-left:4px}.viewer{background:var(--desk);touch-action:pan-x pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.pages{flex-direction:column;align-items:center;gap:22px;width:max-content;min-width:100%;padding:92px 32px 120px 112px;display:flex}.page{box-shadow:var(--page-shadow);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#fff;flex-shrink:0;position:relative}.page-canvas,.page-canvas canvas{width:100%;height:100%;position:absolute;inset:0}.page-overlay{touch-action:pan-x pan-y;position:absolute;inset:0;overflow:visible}.page.tool-pen .page-overlay,.page.tool-marker .page-overlay,.page.tool-eraser .page-overlay,.page.tool-text .page-overlay{touch-action:none}.page.tool-select .annot{touch-action:none;cursor:move}.page.tool-pen .page-overlay,.page.tool-marker .page-overlay{cursor:crosshair}.page.tool-text .page-overlay{cursor:text}.page.tool-eraser .page-overlay{cursor:cell}.page.tool-eraser .annot:hover{opacity:.45}.selection{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:5 4}.sel-actions{background:var(--surface-glass);border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);z-index:3;border-radius:12px;gap:4px;padding:3px;display:flex;position:absolute;transform:translate(-100%,calc(-100% - 6px))}.sel-actions button{width:32px;height:32px;color:var(--text-soft);background:0 0;border:0;border-radius:9px;place-items:center;display:grid}.sel-actions button:hover{background:var(--line);color:var(--text)}.sel-actions button:last-child{color:var(--danger)}.text-editor{border:1.5px dashed var(--accent);resize:none;white-space:pre;z-index:4;min-width:40px;caret-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);border-radius:2px;outline:none;margin:0;position:absolute;overflow:hidden}.text-editor::placeholder{color:#00000059}.page-chip{background:var(--surface-glass);border:1px solid var(--line);box-shadow:var(--shadow);font-variant-numeric:tabular-nums;color:var(--text-soft);pointer-events:none;-webkit-backdrop-filter:blur(12px);z-index:5;border-radius:999px;padding:6px 12px;font-size:13px;position:absolute;bottom:18px;right:18px}.bottom-ui{inset:calc(var(--topbar-h) + env(safe-area-inset-top,0px)) 0 0 0;pointer-events:none;z-index:10;position:absolute}.tool-dock{pointer-events:auto;border-radius:var(--radius-lg);background:var(--surface-glass);border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);flex-direction:column;gap:4px;padding:6px;display:flex;position:absolute;top:50%;left:18px;transform:translateY(-50%)}.tool-btn{width:64px;height:58px;color:var(--text-soft);transition:background .15s, color .15s, transform .15s var(--ease);background:0 0;border:0;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:11px;font-weight:600;display:flex}.tool-btn:hover{background:var(--line);color:var(--text)}.tool-btn:active{transform:scale(.95)}.tool-btn.is-active{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 18px -10px var(--accent)}.props-wrap{pointer-events:auto;max-width:calc(100% - 140px);position:absolute;top:16px;left:50%;transform:translate(-50%)}.props-bar{background:var(--surface-glass);border:1px solid var(--line);min-height:52px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);scrollbar-width:none;border-radius:18px;align-items:center;gap:10px;padding:6px 10px;display:flex;overflow-x:auto}.props-bar::-webkit-scrollbar{display:none}.props-hint{color:var(--muted);white-space:nowrap;margin:0;padding:0 8px;font-size:13.5px}.sep{background:var(--line-strong);flex-shrink:0;width:1px;height:26px}.swatches{flex-shrink:0;align-items:center;gap:4px;display:flex}.swatch{width:32px;height:32px;color:var(--muted);background:0 0;border:0;border-radius:50%;flex-shrink:0;place-items:center;padding:0;display:grid;position:relative}.swatch:before{content:"";background:var(--c);border-radius:50%;position:absolute;inset:6px;box-shadow:inset 0 0 0 1px #00000024}.swatch.is-active{box-shadow:0 0 0 2px var(--accent)}.swatch-bg:before{border-radius:6px}.swatch-bg svg{position:relative}.swatch-custom:before{background:conic-gradient(#f43f5e,#f59e0b,#84cc16,#06b6d4,#6366f1,#d946ef,#f43f5e)}.swatch-custom.is-active:before{background:var(--c)}.swatch-custom input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.stepper{flex-shrink:0;align-items:center;gap:2px;display:flex}.stepper button{background:var(--surface-2);border:0;border-radius:9px;place-items:center;width:32px;height:32px;display:grid}.stepper button:hover{background:var(--line-strong)}.stepper-value{text-align:center;font-variant-numeric:tabular-nums;min-width:52px;font-size:13.5px}.width-ctl{flex-shrink:0;align-items:center;gap:10px;display:flex}.width-dot{place-items:center;width:24px;height:24px;display:grid}.width-dot:before{content:"";width:var(--s);height:var(--s);background:var(--c);border-radius:50%}.width-ctl input[type=range]{width:120px;accent-color:var(--accent)}.width-value{min-width:44px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}.welcome{padding:32px 20px calc(32px + var(--safe-b));background:radial-gradient(60% 50% at 50% 0%, var(--accent-soft), transparent 70%), var(--bg);place-items:center;display:grid;overflow:auto}.welcome-card{text-align:center;width:100%;max-width:560px}.welcome h1{letter-spacing:-.03em;margin:0 0 12px;font-size:clamp(28px,5vw,40px);font-weight:780;line-height:1.1}.lead{max-width:460px;color:var(--text-soft);margin:0 auto 28px;font-size:16.5px}.drop-hint{color:var(--muted);margin:12px 0 0;font-size:13.5px}.features{flex-wrap:wrap;justify-content:center;gap:8px;margin:36px 0 0;padding:0;list-style:none;display:flex}.features li{background:var(--surface);border:1px solid var(--line);color:var(--text-soft);border-radius:999px;align-items:center;gap:7px;padding:7px 12px;font-size:13.5px;display:inline-flex}.features svg{color:var(--accent)}.welcome-art{width:180px;height:200px;margin:0 auto 30px;position:relative}.sheet{width:140px;height:180px;box-shadow:var(--page-shadow);background:#fff;border-radius:10px;position:absolute}.sheet-back{opacity:.55;top:14px;left:34px;transform:rotate(7deg)}.sheet-front{flex-direction:column;gap:10px;padding:26px 18px;display:flex;top:4px;left:10px;transform:rotate(-4deg)}.sheet-front i{background:#e7e2d9;border-radius:4px;height:7px;display:block}.sheet-front i.short{width:60%}.scribble{width:104px;margin-top:10px}.scribble path{fill:none;stroke:var(--accent);stroke-width:4px;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200px;animation:draw 1.6s .3s var(--ease) forwards}.note{color:#7a2e0e;background:#fef08a;border-radius:6px;padding:5px 10px;font:600 13px/1.2 Helvetica,Arial,sans-serif;position:absolute;bottom:30px;right:-30px;transform:rotate(3deg);box-shadow:0 6px 14px -8px #00000080}@keyframes draw{to{stroke-dashoffset:0}}.dialog{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);width:min(520px,100% - 24px);color:var(--text);padding:0;box-shadow:0 40px 80px -30px #0009}.dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0a080673}.dialog[open]{animation:pop .25s var(--ease)}@keyframes pop{0%{opacity:0;transform:translateY(10px)scale(.98)}}.dialog-body{gap:18px;padding:18px 20px 20px;display:grid}.dialog-head{justify-content:space-between;align-items:center;display:flex}.dialog-head h2{letter-spacing:-.01em;margin:0;font-size:19px}.field{gap:6px;display:grid}.field span,.choice legend{color:var(--muted);font-size:13px;font-weight:600}.field input{border:1px solid var(--line-strong);background:var(--bg);border-radius:12px;height:44px;padding:0 12px;font-size:15px}.choice{border:0;gap:8px;margin:0;padding:0;display:grid}.choice legend{margin-bottom:6px;padding:0}.choice-opt{border:1px solid var(--line-strong);cursor:pointer;border-radius:14px;grid-template-columns:auto auto 1fr;align-items:start;gap:12px;padding:12px 14px;transition:border-color .15s,background .15s;display:grid}.choice-opt input{accent-color:var(--accent);margin:3px 0 0}.choice-opt>svg{color:var(--muted);margin-top:1px}.choice-opt.is-active{border-color:var(--accent);background:var(--accent-soft)}.choice-opt.is-active>svg{color:var(--accent)}.choice-opt b{font-size:14.5px;display:block}.choice-opt small{color:var(--text-soft);margin-top:2px;font-size:13px;line-height:1.4;display:block}.dialog-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.toasts{left:50%;bottom:calc(24px + var(--safe-b));z-index:100;pointer-events:none;gap:8px;width:max-content;max-width:calc(100% - 32px);display:grid;position:fixed;transform:translate(-50%)}.toast{background:var(--text);color:var(--bg);animation:pop .25s var(--ease);border-radius:14px;padding:11px 16px;font-size:14px;box-shadow:0 18px 40px -14px #00000080}.toast-error{background:var(--danger);color:#fff}.drop-overlay{z-index:90;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;background:#0a080659;place-items:center;display:grid;position:fixed;inset:0}.drop-overlay>div{border:2px dashed var(--accent);background:var(--surface);color:var(--accent);border-radius:24px;place-items:center;gap:8px;padding:36px 56px;font-weight:700;display:grid}.drop-overlay p{color:var(--text);margin:0}@media (max-width:819px){:root{--topbar-h:54px}.topbar{padding:0 8px 0 12px;padding-top:env(safe-area-inset-top,0px);gap:6px}.app.has-doc .brand-name,.zoom-group,.app.has-doc .doc-title{display:none}.app.has-doc .top-actions{margin-left:auto}.top-actions{gap:2px}.group{background:0 0;padding:0}.save-btn{height:38px;padding:0 12px}.save-btn span{display:none}.pages{padding:12px 10px calc(150px + var(--safe-b));gap:12px}.bottom-ui{padding:0 8px calc(8px + var(--safe-b));flex-direction:column;align-items:stretch;gap:8px;display:flex;inset:auto 0 0}.props-wrap{align-self:center;max-width:100%;position:static;transform:none}.props-bar{gap:8px;min-height:48px;padding:4px 8px}.props-hint{white-space:normal;padding:4px 6px;font-size:13px}.width-ctl input[type=range]{width:96px}.tool-dock{border-radius:20px;flex-direction:row;justify-content:space-between;position:static;transform:none}.tool-btn{flex:1;width:auto;height:54px;font-size:10.5px}.page-chip{top:10px;bottom:auto;right:10px;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px) + 10px);padding:4px 10px;font-size:12px;position:fixed}.dialog{width:100%;max-width:100%;padding-bottom:var(--safe-b);border-radius:24px 24px 0 0;margin:auto auto 0}.dialog-actions .btn{flex:1}.toasts{bottom:calc(150px + var(--safe-b))}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.scribble path{stroke-dashoffset:0}}