:root{--bg:#f4f1ea;--surface:#fff;--surface-2:#f1eee7;--border:#e2ddd2;--text:#1f2430;--muted:#6b6f7a;--accent:#3b5bdb;--accent-soft:#e7ecfd;--danger:#d6336c;--ok:#2b8a3e;--shadow:0 8px 28px #1f243024;--radius:14px;--toolbar-h:56px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--bg:#121418;--surface:#1d2027;--surface-2:#262a33;--border:#323743;--text:#eceef2;--muted:#9aa0ad;--accent:#7b93ff;--accent-soft:#263055;--danger:#ff6b9a;--ok:#69db7c;--shadow:0 8px 28px #00000080;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;font:15px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}button:disabled{opacity:.35;cursor:default}input{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.row{align-items:center;display:flex}.gap{gap:8px}.stack{flex-direction:column;gap:14px;display:flex}.muted{color:var(--muted);margin:0}.error{color:var(--danger);margin:0}.info{color:var(--ok);margin:0}.label{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-size:12px;font-weight:600}.icon-btn{width:40px;height:40px;color:var(--text);border-radius:10px;flex:none;place-items:center;display:inline-grid}.icon-btn.small{border-radius:8px;width:32px;height:32px}.icon-btn:not(:disabled):hover{background:var(--surface-2)}.icon-btn.active{background:var(--accent-soft);color:var(--accent)}.icon-btn.danger{color:var(--danger)}.btn{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;justify-content:center;align-items:center;gap:6px;height:42px;padding:0 16px;font-weight:600;display:inline-flex}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.danger{color:var(--danger)}.chip{background:var(--surface);height:32px;box-shadow:var(--shadow);font-variant-numeric:tabular-nums;border-radius:16px;align-items:center;gap:6px;padding:0 12px;font-size:13px;font-weight:600;display:inline-flex}.field{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;font-weight:600;display:flex}.field input{border:1px solid var(--border);background:var(--surface);height:44px;color:var(--text);border-radius:10px;padding:0 12px;font-size:16px;font-weight:400}.segmented{background:var(--surface-2);border-radius:10px;flex-wrap:wrap;gap:2px;padding:3px;display:flex}.segmented button{min-height:34px;color:var(--muted);white-space:nowrap;border-radius:8px;flex:auto;padding:0 10px;font-size:13px;font-weight:600}.segmented button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000001f}.toggle-row{justify-content:space-between;align-items:center;gap:16px;padding:6px 0;display:flex}.toggle-label{font-weight:600;display:block}.toggle-hint{color:var(--muted);font-size:12px;display:block}.switch{appearance:none;background:var(--border);cursor:pointer;border-radius:13px;flex:none;width:44px;height:26px;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000040}.switch:checked{background:var(--accent)}.switch:checked:after{transform:translate(18px)}.swatches{flex-wrap:wrap;gap:10px;display:flex}.swatches.compact{flex-wrap:nowrap;gap:6px}.swatch{border-radius:50%;flex:none;width:32px;height:32px;transition:transform .1s;box-shadow:inset 0 0 0 1px #00000026}.swatches.compact .swatch{width:26px;height:26px}.swatch.active{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}.swatch.tiny{width:22px;height:22px}.hidden-color{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.sizes{gap:2px;display:flex}.size{border-radius:8px;place-items:center;width:34px;height:34px;display:grid}.size span{border:1.5px solid var(--muted);border-radius:50%;display:block}.size.active{background:var(--accent-soft)}.modal-backdrop,.popover-backdrop{z-index:50;position:fixed;inset:0}.modal-backdrop{background:#0f121866;place-items:center;padding:16px;animation:.15s ease-out fade;display:grid}.modal{background:var(--surface);width:min(520px,100%);max-height:calc(100% - 32px);box-shadow:var(--shadow);border-radius:18px;overflow:auto}.modal-header{justify-content:space-between;align-items:center;padding:14px 14px 0 20px;display:flex}.modal-header h2{margin:0;font-size:18px}.modal-body{padding:16px 20px 20px}.modal-footer{justify-content:flex-end;padding:0 20px 20px;display:flex}.popover{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:220px;max-width:min(380px,100vw - 16px);box-shadow:var(--shadow);padding:6px;animation:.12s ease-out pop;position:fixed}.menu-item{text-align:left;border-radius:10px;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;font-weight:500;display:flex}.menu-item:hover{background:var(--surface-2)}.menu-item.danger{color:var(--danger)}.menu-section{border-bottom:1px solid var(--border);flex-direction:column;gap:8px;padding:10px 10px 8px;display:flex}.menu-section:last-child{border-bottom:0}.menu-hint{color:var(--muted);margin:0;padding:8px 12px;font-size:12px}.facts{grid-template-columns:auto 1fr;gap:6px 16px;margin:0;display:grid}.facts dt{color:var(--muted)}.facts dd{margin:0}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:translateY(-4px)}}.library{min-height:100%;padding:env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left))}.library-header{flex-wrap:wrap;align-items:center;gap:16px;padding:18px 0;display:flex}.brand{align-items:center;gap:10px;margin-right:auto;display:flex}.brand h1{letter-spacing:-.01em;margin:0;font-size:24px}.search{background:var(--surface);border:1px solid var(--border);height:40px;color:var(--muted);border-radius:10px;flex:0 280px;align-items:center;gap:8px;min-width:0;padding:0 12px;display:flex}.search input{background:0 0;border:0;outline:0;width:100%;font-size:15px}.banner{text-align:left;background:var(--accent-soft);width:100%;color:var(--text);border-radius:12px;margin-bottom:18px;padding:12px 16px}.sync-badge{height:32px;color:var(--muted);background:var(--surface-2);white-space:nowrap;border-radius:16px;align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:600;display:inline-flex}.sync-badge.state-synced{color:var(--ok)}.sync-badge.state-error{color:var(--danger)}.sync-badge.state-syncing svg{animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.35}}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:28px 22px;display:grid}.notebook-card{flex-direction:column;gap:8px;min-width:0;display:flex}.cover{aspect-ratio:1000/1414;background:var(--cover,var(--surface));border-radius:6px 12px 12px 6px;place-items:center;transition:transform .15s;display:grid;position:relative;overflow:hidden;box-shadow:0 2px 6px #0000001f,0 10px 24px #00000014}.cover:active{transform:scale(.97)}.cover .spine{z-index:1;background:linear-gradient(90deg,#0000002e,#ffffff1a);width:14px;position:absolute;inset:0 auto 0 0}.cover .thumb{object-fit:cover;position:absolute;inset:0 0 0 14px;width:calc(100% - 14px)!important;height:100%!important}.new-cover{background:var(--surface);border:2px dashed var(--border);box-shadow:none;color:var(--muted)}.notebook-card.new{text-align:left}.nb-meta{justify-content:space-between;align-items:flex-start;gap:4px;display:flex}.nb-meta>div{min-width:0}.nb-title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;display:block;overflow:hidden}.nb-date{color:var(--muted);font-size:12px;display:block}.empty{text-align:center;color:var(--muted);margin-top:40px}.new-notebook{gap:20px;display:flex}.new-notebook .stack{flex:1;min-width:0}.preview .thumb{border-radius:6px;box-shadow:0 2px 10px #00000026}@media (width<=520px){.new-notebook .preview{display:none}}.notebook{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex-direction:column;display:flex;position:fixed;inset:0}.toolbar{padding:calc(env(safe-area-inset-top) + 6px) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));background:var(--surface);border-bottom:1px solid var(--border);min-height:var(--toolbar-h);z-index:10;flex:none;justify-content:space-between;align-items:center;gap:8px;display:flex}.toolbar-group{align-items:center;gap:2px;min-width:0;display:flex}.toolbar-group.tools{background:var(--surface-2);scrollbar-width:none;border-radius:14px;gap:4px;padding:3px 8px;overflow-x:auto}.toolbar-group.tools::-webkit-scrollbar{display:none}.divider{background:var(--border);flex:none;width:1px;height:24px;margin:0 4px}.hint{color:var(--muted);white-space:nowrap;padding:0 6px;font-size:13px}.title,.title-input{white-space:nowrap;text-overflow:ellipsis;border-radius:8px;max-width:220px;padding:6px 8px;font-size:16px;font-weight:700;overflow:hidden}.title-input{border:1px solid var(--accent);background:var(--surface);-webkit-user-select:text;user-select:text;outline:0}.workspace{flex:1;min-height:0;display:flex;position:relative}.canvas-host{cursor:crosshair;flex:1;position:relative;overflow:hidden}.page-indicator{right:max(14px, env(safe-area-inset-right));bottom:max(14px, env(safe-area-inset-bottom));z-index:5;gap:8px;display:flex;position:absolute}.toast{left:50%;bottom:max(20px, env(safe-area-inset-bottom));background:var(--text);max-width:min(520px,100% - 32px);color:var(--bg);box-shadow:var(--shadow);z-index:6;border-radius:12px;padding:10px 16px;font-size:14px;animation:.15s ease-out pop;position:absolute;transform:translate(-50%)}.selection-menu{background:var(--surface);box-shadow:var(--shadow);z-index:6;border-radius:14px;align-items:center;gap:6px;padding:6px 8px;display:flex;position:absolute;transform:translate(-50%)}.selection-menu .count{background:var(--accent);color:#fff;border-radius:11px;place-items:center;min-width:22px;height:22px;padding:0 6px;font-size:12px;font-weight:700;display:grid}.page-panel{background:var(--surface);border-right:1px solid var(--border);width:190px;padding:8px 8px max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));z-index:4;flex-direction:column;flex:none;gap:8px;display:flex}.page-panel header{justify-content:space-between;align-items:center;padding-left:6px;font-weight:700;display:flex}.page-panel ol{flex-direction:column;flex:1;gap:14px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.page-panel li{flex-direction:column;align-items:center;gap:4px;display:flex}.thumb-btn{border-radius:6px;line-height:0;box-shadow:0 1px 6px #00000026}.page-panel li.current .thumb-btn{box-shadow:0 0 0 3px var(--accent)}.page-actions{color:var(--muted);align-items:center;gap:0;font-size:12px;display:flex}.page-actions span{text-align:center;min-width:20px;font-weight:700}@media (width<=760px){.title{max-width:110px}.page-panel{box-shadow:var(--shadow);position:absolute;inset:0 auto 0 0}.hint{display:none}}@media (width<=900px){.toolbar{flex-wrap:wrap;row-gap:6px}.toolbar-group.tools{flex:100%;order:3;justify-content:safe center}}