@import "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--ink-900:#17120e;--ink-800:#1f1915;--ink-700:#2a221c;--ink-600:#3b2f26;--ink-500:#5a4a3d;--ink-400:#7e6a58;--ink-300:#a69583;--bone-50:#f6f1e8;--bone-100:#eee6d6;--bone-200:#e2d6be;--bone-300:#cebc9b;--paper:#f9f4ea;--paper-60:#f9f4ea99;--paper-40:#f9f4ea66;--paper-15:#f9f4ea26;--paper-08:#f9f4ea14;--accent:#e8a84a;--accent-soft:#f3c478;--accent-deep:#b5801f;--accent-ink:#2b1d08;--author-1:#e8a84a;--author-2:#c8553d;--author-3:#6b8e3d;--author-4:#d98c8c;--author-5:#4a7a8c;--author-6:#9b6ba8;--success:#6b8e3d;--warning:#d9893d;--danger:#c8553d;--font-display:"Fraunces", "Georgia", serif;--font-ui:"Inter Tight", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "SF Mono", Menlo, monospace;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;--r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:999px;--shadow-sm:0 1px 2px #0003;--shadow-md:0 4px 12px #00000040, 0 1px 3px #00000026;--shadow-lg:0 12px 32px #00000059, 0 4px 8px #0003;--shadow-pin:0 2px 6px #00000059, 0 0 0 2px #17120ee6;--ease-out:cubic-bezier(.22, 1, .36, 1);--dur-fast:.14s;--dur-med:.24s}*{box-sizing:border-box}html,body{background:var(--ink-900);height:100%;color:var(--paper);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-size:14px;line-height:1.45;overflow:hidden}#root{width:100vw;height:100vh}button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:0}input,textarea{font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;outline:none}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--paper-15);background-clip:padding-box;border:2px solid #0000;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--paper-40);background-clip:padding-box}.bone-scroll::-webkit-scrollbar-thumb{background:#17120e26 padding-box padding-box}.bone-scroll::-webkit-scrollbar-thumb:hover{background:#17120e4d padding-box padding-box}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes slideDown{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.fade-in{animation:fadeIn var(--dur-med) var(--ease-out)}.pop-in{animation:popIn var(--dur-med) var(--ease-out)}.topbar{background:var(--ink-800);border-bottom:1px solid var(--paper-08);z-index:50;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;height:56px;padding:0 16px;display:grid;position:relative}@media (width<=1200px){.topbar{grid-template-columns:auto 1fr auto;gap:8px}.topbar-left .project-meta,.topbar-left .brand-divider,.viewport-btn .vp-dims{display:none}.viewport-btn{padding:6px 12px}.reviewer-chip span{display:none}.reviewer-chip{padding:4px}.mode-toggle{padding:6px 10px;font-size:12px}.mode-toggle-kbd{display:none}}@media (width<=900px){.mode-toggle span:not(.mode-toggle-dot):not(.mode-toggle-kbd){display:none}.mode-toggle{justify-content:center;width:32px;height:32px;padding:6px}}.topbar-left,.topbar-right{align-items:center;gap:16px;min-width:0;display:flex}.topbar-right{justify-content:flex-end}.topbar-center{justify-content:center;align-items:center;gap:8px;display:flex}.zoom-toggle{background:var(--ink-900);border:1px solid var(--paper-08);border-radius:var(--r-md);height:32px;color:var(--paper-60);font-family:var(--font-ui);letter-spacing:.01em;cursor:pointer;transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);align-items:center;gap:6px;padding:6px 10px;font-size:12px;font-weight:500;display:inline-flex}.zoom-toggle:hover{color:var(--paper);border-color:var(--paper-15)}.zoom-toggle .zoom-label{align-items:baseline;gap:6px;display:inline-flex}.zoom-toggle .zoom-pct{font-family:var(--font-mono);color:var(--paper-40);letter-spacing:.02em;font-size:10.5px}@media (width<=1200px){.zoom-toggle .zoom-label{display:none}.zoom-toggle{padding:6px 8px}}.brand{color:var(--paper);align-items:baseline;gap:10px;text-decoration:none;display:flex}.brand-mark{font-family:var(--font-display);letter-spacing:-.02em;font-variation-settings:"opsz" 144, "SOFT" 50;color:var(--accent);font-size:22px;font-weight:700;line-height:1}.brand-mark:after{content:"";background:var(--accent);border-radius:50%;width:6px;height:6px;margin-left:2px;display:inline-block;transform:translateY(-2px)}.brand-divider{background:var(--paper-15);width:1px;height:16px;margin:0 4px}.project-meta{flex-direction:column;min-width:0;line-height:1.1;display:flex}.project-name{color:var(--paper);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.project-sub{font-family:var(--font-mono);color:var(--paper-60);margin-top:2px;font-size:10.5px}.viewport-switch{background:var(--ink-900);border:1px solid var(--paper-08);border-radius:var(--r-pill);gap:2px;padding:3px;display:inline-flex}.viewport-btn{border-radius:var(--r-pill);color:var(--paper-60);transition:color var(--dur-fast), background var(--dur-fast);align-items:center;gap:8px;padding:6px 14px;font-size:12.5px;font-weight:500;display:inline-flex;position:relative}.viewport-btn:hover{color:var(--paper)}.viewport-btn.active{background:var(--paper);color:var(--ink-900)}.viewport-btn .vp-dims{font-family:var(--font-mono);opacity:.7;margin-left:2px;font-size:10.5px}.viewport-btn.active .vp-dims{opacity:.55}.btn{border-radius:var(--r-md);transition:background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);white-space:nowrap;align-items:center;gap:8px;padding:8px 14px;font-size:13px;font-weight:500;display:inline-flex}.btn:hover{background:var(--paper-08)}.btn-primary{background:var(--accent);color:var(--accent-ink);font-weight:600}.btn-primary:hover{background:var(--accent-soft);color:var(--accent-ink);transform:translateY(-1px)}.btn-ghost{color:var(--paper-60)}.btn-ghost:hover{color:var(--paper);background:var(--paper-08)}.btn-icon{border-radius:var(--r-md);width:36px;height:36px;color:var(--paper-60);justify-content:center;padding:0}.btn-icon:hover{background:var(--paper-08);color:var(--paper)}.btn-sm{border-radius:var(--r-sm);padding:6px 12px;font-size:12px}.mode-toggle{border-radius:var(--r-pill);background:var(--ink-900);border:1px solid var(--paper-08);transition:all var(--dur-med) var(--ease-out);color:var(--paper-60);align-items:center;gap:10px;padding:6px 6px 6px 14px;font-size:12.5px;font-weight:500;display:inline-flex}.mode-toggle:hover{border-color:var(--paper-15);color:var(--paper)}.mode-toggle.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.mode-toggle-kbd{border-radius:var(--r-sm);background:var(--paper-08);border:1px solid var(--paper-15);min-width:22px;height:22px;font-family:var(--font-mono);color:var(--paper);justify-content:center;align-items:center;padding:0 5px;font-size:10px;font-weight:600;display:inline-flex}.mode-toggle.on .mode-toggle-kbd{color:var(--accent-ink);background:#2b1d081f;border-color:#2b1d0840}.mode-toggle-dot{background:var(--paper-40);width:8px;height:8px;transition:all var(--dur-med);border-radius:50%}.mode-toggle.on .mode-toggle-dot{background:var(--accent-ink);box-shadow:0 0 0 3px #2b1d0826}.reviewer-chip{border-radius:var(--r-pill);background:var(--ink-900);border:1px solid var(--paper-08);color:var(--paper);align-items:center;gap:8px;padding:5px 12px 5px 5px;font-size:12.5px;display:inline-flex}.reviewer-avatar{width:24px;height:24px;font-family:var(--font-ui);color:var(--ink-900);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:600;display:inline-flex}.device-frame{background:var(--ink-800);border:1px solid var(--paper-08);box-shadow:var(--shadow-lg);border-radius:14px;flex-direction:column;flex-shrink:1;min-width:0;display:flex;position:relative;overflow:hidden}.device-frame.comment-mode{box-shadow:var(--shadow-lg), 0 0 0 2px var(--accent), 0 0 40px #e8a84a26}.device-chrome{border-bottom:1px solid var(--paper-08);flex-shrink:0;align-items:center;gap:10px;padding:10px 14px;display:flex}.device-dots{gap:6px;display:flex}.device-dot{background:var(--paper-15);border-radius:50%;width:10px;height:10px}.device-url{font-family:var(--font-mono);color:var(--paper-60);background:var(--ink-900);border-radius:var(--r-pill);flex:1;justify-content:center;align-items:center;gap:8px;min-width:0;padding:5px 12px;font-size:11px;display:flex}.device-url-lock{opacity:.6;flex-shrink:0;width:10px;height:10px}.device-dims-badge{font-family:var(--font-mono);color:var(--paper-40);border-radius:var(--r-sm);border:1px solid var(--paper-08);background:var(--ink-900);padding:3px 8px;font-size:10.5px}.device-viewport{background:#fff;border-bottom-right-radius:13px;border-bottom-left-radius:13px;position:relative;overflow:auto}.sidebar{background:var(--ink-800);border-left:1px solid var(--paper-08);width:360px;transition:width var(--dur-med) var(--ease-out);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.sidebar.collapsed{width:56px}.sidebar-header{border-bottom:1px solid var(--paper-08);flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:16px 20px;display:flex}.sidebar-title{flex-direction:column;gap:2px;min-width:0;display:flex}.sidebar-title-h{font-family:var(--font-display);letter-spacing:-.01em;color:var(--paper);font-size:17px;font-weight:600}.sidebar-title-sub{font-family:var(--font-mono);color:var(--paper-60);text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}.sidebar-collapsed-btn{width:32px;height:32px;color:var(--paper-60);border-radius:var(--r-sm);transition:color var(--dur-fast), background var(--dur-fast);justify-content:center;align-items:center;display:flex}.sidebar-collapsed-btn:hover{color:var(--paper);background:var(--paper-08)}.sidebar-collapsed{flex-direction:column;align-items:center;gap:16px;padding:16px 0;display:flex}.sidebar-collapsed .count-pill{font-family:var(--font-mono);background:var(--accent);color:var(--accent-ink);border-radius:var(--r-pill);padding:4px 8px;font-size:11px;font-weight:600}.filter-tabs{flex-shrink:0;gap:4px;padding:12px 20px 0;display:flex}.filter-tab{border-radius:var(--r-pill);color:var(--paper-60);transition:color var(--dur-fast), background var(--dur-fast);align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:500;display:inline-flex}.filter-tab:hover{color:var(--paper)}.filter-tab.active{background:var(--paper-08);color:var(--paper)}.filter-tab-count{font-family:var(--font-mono);opacity:.7;font-size:10.5px}.filter-sort{color:var(--paper-60);font-size:11.5px;font-family:var(--font-mono);align-items:center;gap:4px;margin-left:auto;display:inline-flex}.sidebar-body{flex:1;padding:8px 0 16px;overflow-y:auto}.sidebar-section-h{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--paper-40);align-items:center;gap:10px;padding:14px 20px 8px;font-size:10.5px;display:flex}.sidebar-section-h:after{content:"";background:var(--paper-08);flex:1;height:1px}.note-row{cursor:pointer;transition:background var(--dur-fast), border-color var(--dur-fast);border-left:2px solid #0000;grid-template-columns:28px minmax(0,1fr) auto;align-items:flex-start;gap:10px;padding:12px 20px;display:grid;position:relative}.note-row:hover{background:var(--paper-08)}.note-row.active{background:var(--paper-08);border-left-color:var(--accent)}.note-row.resolved{opacity:.55}.note-num{width:24px;height:24px;font-family:var(--font-mono);color:var(--ink-900);box-shadow:0 0 0 2px var(--ink-800);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:1px;font-size:11px;font-weight:700;display:inline-flex}.note-row.resolved .note-num{color:var(--paper-60);background:var(--paper-15)!important}.note-content{min-width:0}.note-meta{color:var(--paper-60);align-items:center;gap:6px;margin-bottom:3px;font-size:11.5px;display:flex}.note-meta-author{color:var(--paper);white-space:nowrap;text-overflow:ellipsis;max-width:140px;font-weight:600;overflow:hidden}.note-meta-dot{background:var(--paper-40);border-radius:50%;width:3px;height:3px}.note-meta-time{font-family:var(--font-mono);font-size:10.5px}.note-body-text{color:var(--paper);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.42;display:-webkit-box;overflow:hidden}.note-row.resolved .note-body-text{text-decoration:line-through;-webkit-text-decoration-color:var(--paper-40);text-decoration-color:var(--paper-40);color:var(--paper-60)}.note-resolve{border:1.5px solid var(--paper-15);width:18px;height:18px;transition:all var(--dur-fast);background:0 0;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;display:inline-flex}.note-resolve:hover{border-color:var(--paper-40)}.note-resolve.checked{background:var(--success);border-color:var(--success);color:var(--paper)}.general-row{grid-template-columns:28px minmax(0,1fr);gap:10px;padding:12px 20px;display:grid}.general-avatar{width:24px;height:24px;font-family:var(--font-ui);color:var(--ink-900);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:1px;font-size:10.5px;font-weight:600;display:inline-flex}.general-bubble{background:var(--paper-08);color:var(--paper);border-radius:0 10px 10px;padding:10px 12px;font-size:12.5px;line-height:1.45}.general-meta{color:var(--paper-60);align-items:center;gap:6px;margin-bottom:4px;font-size:11px;display:flex}.general-meta-name{color:var(--paper);font-weight:600}.general-meta-time{font-family:var(--font-mono);font-size:10px}.general-composer{border-top:1px solid var(--paper-08);background:var(--ink-800);flex-shrink:0;align-items:flex-end;gap:8px;padding:12px 20px;display:flex}.general-composer textarea{background:var(--ink-900);border:1px solid var(--paper-08);border-radius:var(--r-md);color:var(--paper);resize:none;min-height:36px;max-height:96px;transition:border-color var(--dur-fast);flex:1;padding:8px 10px;font-size:12.5px;line-height:1.4}.general-composer textarea:focus{border-color:var(--accent)}.general-composer textarea::placeholder{color:var(--paper-40)}.general-send{border-radius:var(--r-md);background:var(--accent);width:36px;height:36px;color:var(--accent-ink);transition:background var(--dur-fast), transform var(--dur-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.general-send:hover{background:var(--accent-soft);transform:translateY(-1px)}.general-send:disabled{opacity:.35;cursor:not-allowed;transform:none}.below-fold{background:var(--ink-800);color:var(--paper);border:1px solid var(--paper-15);border-radius:var(--r-pill);box-shadow:var(--shadow-md);cursor:pointer;z-index:30;animation:slideUp var(--dur-med) var(--ease-out);transition:transform var(--dur-fast), background var(--dur-fast);align-items:center;gap:10px;padding:9px 14px;font-size:12px;font-weight:500;display:inline-flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.below-fold:hover{background:var(--ink-700);transform:translate(-50%)translateY(-2px)}.below-fold-count{background:var(--accent);min-width:20px;height:20px;color:var(--accent-ink);font-family:var(--font-mono);border-radius:50%;justify-content:center;align-items:center;padding:0 6px;font-size:11px;font-weight:700;display:inline-flex}.above-fold{background:var(--ink-800);color:var(--paper);border:1px solid var(--paper-15);border-radius:var(--r-pill);box-shadow:var(--shadow-md);cursor:pointer;z-index:30;animation:slideDown var(--dur-med) var(--ease-out);transition:transform var(--dur-fast), background var(--dur-fast);align-items:center;gap:10px;padding:9px 14px;font-size:12px;font-weight:500;display:inline-flex;position:absolute;top:24px;left:50%;transform:translate(-50%)}.above-fold:hover{background:var(--ink-700);transform:translate(-50%)translateY(2px)}.pin-layer{pointer-events:none;z-index:2147483000;position:absolute;inset:0}.pin{pointer-events:auto;cursor:pointer;z-index:2147483001;transition:transform var(--dur-fast) var(--ease-out);animation:popIn .26s var(--ease-out);position:absolute;transform:translate(-50%,-50%)}.pin:hover{z-index:2147483010;transform:translate(-50%,-50%)scale(1.12)}.pin.active{z-index:2147483020}.pin.resolved .pin-badge{opacity:.45}.pin-badge{width:30px;height:30px;font-family:var(--font-mono);color:var(--ink-900);box-shadow:var(--shadow-pin);transition:box-shadow var(--dur-fast), transform var(--dur-fast);border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:inline-flex;position:relative}.pin:hover .pin-badge{box-shadow:var(--shadow-pin), 0 6px 16px #0000004d}.pin.active .pin-badge{box-shadow:var(--shadow-pin), 0 0 0 4px #e8a84a59, 0 6px 16px #00000059}.pin-teardrop{filter:drop-shadow(0 2px 4px #00000059);width:28px;height:36px;position:relative}.pin-tag{filter:drop-shadow(0 2px 4px #0000004d);min-width:30px;height:24px;padding:0 6px 6px;position:relative}.pin-target{background:var(--ink-900);border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;display:inline-flex;position:relative;box-shadow:0 2px 6px #0000004d}.pin-target-ring{border:2px solid;border-radius:50%;position:absolute;inset:0}.pin-target-num{font-family:var(--font-mono);color:var(--paper);font-size:10px;font-weight:700}.pin-resolved-check{background:var(--success);color:#fff;width:14px;height:14px;box-shadow:0 0 0 2px var(--bone-50);border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:absolute;bottom:-4px;right:-4px}.pin-tooltip{background:var(--ink-900);color:var(--paper);border-radius:var(--r-md);white-space:nowrap;text-overflow:ellipsis;max-width:240px;box-shadow:var(--shadow-md);pointer-events:none;z-index:2147483040;animation:fadeIn .14s var(--ease-out);padding:7px 10px;font-size:12px;line-height:1.4;position:absolute;top:calc(100% + 10px);left:50%;overflow:hidden;transform:translate(-50%)}.pin-tooltip:before{content:"";background:var(--ink-900);width:8px;height:8px;position:absolute;top:-4px;left:50%;transform:translate(-50%)rotate(45deg)}.pin-tooltip-author{color:var(--paper-60);font-size:10.5px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}.pin-cluster{background:var(--ink-900);width:36px;height:36px;color:var(--paper);font-family:var(--font-mono);box-shadow:0 2px 8px #00000059, 0 0 0 3px var(--accent);border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:inline-flex;position:relative}.pin-cluster:before{content:"";border:1.5px dashed var(--accent);opacity:.6;border-radius:50%;position:absolute;inset:-6px}.pin-cluster-fan{background:var(--ink-900);border:1px solid var(--paper-15);border-radius:var(--r-pill);box-shadow:var(--shadow-lg);animation:popIn .2s var(--ease-out);z-index:2147483050;gap:6px;padding:8px;display:flex;position:absolute;top:-4px;left:50%;transform:translate(-50%,-100%)}.pin-cluster-fan .pin-badge{width:26px;height:26px;box-shadow:0 0 0 2px var(--ink-900);font-size:11px}.popover{background:var(--ink-900);border:1px solid var(--paper-15);border-radius:var(--r-lg);width:320px;box-shadow:var(--shadow-lg);z-index:2147483035;animation:popIn .18s var(--ease-out);transform-origin:0 0;position:absolute}.popover:before{content:"";background:var(--ink-900);border-left:1px solid var(--paper-15);border-bottom:1px solid var(--paper-15);width:12px;height:12px;position:absolute;top:18px;left:-7px;transform:rotate(45deg)}.popover.flip-right:before{border-left:1px solid var(--paper-15);border-bottom:1px solid var(--paper-15);left:auto;right:-7px;transform:rotate(-135deg)}.popover-header{align-items:center;gap:10px;padding:14px 14px 10px;display:flex}.popover-author{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.popover-author-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.popover-author-name{color:var(--paper);font-size:13px;font-weight:600}.popover-time{font-family:var(--font-mono);color:var(--paper-60);margin-left:auto;font-size:10.5px}.popover-pin-num{font-family:var(--font-mono);border-radius:var(--r-sm);background:var(--paper-08);color:var(--paper-60);padding:2px 6px;font-size:10.5px;font-weight:600}.popover-body{color:var(--paper);white-space:pre-wrap;word-wrap:break-word;padding:0 14px 12px;font-size:13.5px;line-height:1.5}.popover-body.editing textarea{background:var(--paper-08);border:1px solid var(--paper-15);border-radius:var(--r-md);width:100%;color:var(--paper);resize:vertical;min-height:72px;padding:8px 10px;font-size:13.5px;line-height:1.5}.popover-body.editing textarea:focus{border-color:var(--accent)}.popover-reply-stub{background:var(--paper-08);border:1px dashed var(--paper-15);border-radius:var(--r-md);color:var(--paper-40);align-items:center;gap:8px;margin:0 14px 12px;padding:10px 12px;font-size:11.5px;font-style:italic;display:flex}.popover-footer{border-top:1px solid var(--paper-08);align-items:center;gap:8px;padding:10px 14px;display:flex}.popover-check{border-radius:var(--r-md);color:var(--paper);transition:background var(--dur-fast);align-items:center;gap:8px;padding:6px 10px;font-size:12.5px;font-weight:500;display:inline-flex}.popover-check:hover{background:var(--paper-08)}.popover-check-box{border:1.5px solid var(--paper-40);width:16px;height:16px;transition:all var(--dur-fast);background:0 0;border-radius:4px;justify-content:center;align-items:center;display:inline-flex}.popover-check.checked .popover-check-box{background:var(--success);border-color:var(--success);color:#fff}.popover-check.checked{color:var(--success)}.popover-footer-spacer{flex:1}.popover-icon-btn{border-radius:var(--r-sm);width:28px;height:28px;color:var(--paper-60);transition:background var(--dur-fast), color var(--dur-fast);justify-content:center;align-items:center;display:inline-flex}.popover-icon-btn:hover{background:var(--paper-08);color:var(--paper)}.popover-icon-btn.danger:hover{color:var(--danger)}.popover.new-note{padding:14px}.popover.new-note .popover-new-title{font-size:11px;font-family:var(--font-mono);color:var(--paper-60);text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:6px;margin-bottom:8px;display:flex}.popover.new-note textarea{background:var(--paper-08);border:1px solid var(--paper-15);border-radius:var(--r-md);width:100%;color:var(--paper);resize:none;min-height:80px;transition:border-color var(--dur-fast);padding:10px 12px;font-size:13.5px;line-height:1.5}.popover.new-note textarea:focus{border-color:var(--accent)}.popover.new-note textarea::placeholder{color:var(--paper-40)}.popover.new-note .new-actions{justify-content:space-between;align-items:center;gap:8px;margin-top:10px;display:flex}.popover.new-note .new-hint{font-family:var(--font-mono);color:var(--paper-40);font-size:10px}.popover.new-note .new-hint kbd{background:var(--paper-08);border:1px solid var(--paper-15);border-radius:3px;padding:1px 4px;font-family:inherit}.mode-indicator{background:var(--ink-900);color:var(--accent);border:1px solid var(--accent);border-radius:var(--r-pill);box-shadow:var(--shadow-md);z-index:100;animation:slideDown var(--dur-med) var(--ease-out);align-items:center;gap:10px;padding:8px 18px;font-size:12.5px;font-weight:500;display:inline-flex;position:absolute;top:5px;left:50%;transform:translate(-50%)}.mode-indicator-dot{background:var(--accent);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite pulse}.modal-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:200;animation:fadeIn .26s var(--ease-out);background:#0b0907b8;justify-content:center;align-items:center;padding:32px;display:flex;position:fixed;inset:0}.modal{background:var(--ink-800);border:1px solid var(--paper-15);border-radius:var(--r-xl);width:100%;max-width:440px;box-shadow:var(--shadow-lg);animation:popIn .32s var(--ease-out);padding:40px;position:relative}.modal-eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);align-items:center;gap:8px;margin-bottom:16px;font-size:11px;display:flex}.modal-eyebrow:before{content:"";background:var(--accent);width:18px;height:1px}.modal-title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--paper);margin-bottom:6px;font-size:36px;font-weight:400;line-height:1.05}.modal-title em{color:var(--accent);font-style:italic}.modal-body{color:var(--paper-60);margin-bottom:24px;font-size:14px;line-height:1.5}.modal-input{background:var(--ink-900);border:1px solid var(--paper-15);border-radius:var(--r-md);width:100%;color:var(--paper);font-size:16px;font-family:var(--font-display);transition:border-color var(--dur-fast);margin-bottom:20px;padding:14px 16px}.modal-input:focus{border-color:var(--accent)}.modal-input::placeholder{color:var(--paper-40);font-style:italic}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.mobile-blocked{background:var(--ink-900);z-index:300;text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:40px 28px;display:flex;position:fixed;inset:0}.mobile-blocked-mark{font-family:var(--font-display);color:var(--accent);letter-spacing:-.03em;margin-bottom:24px;font-size:56px;font-weight:700;line-height:1}.mobile-blocked h1{font-family:var(--font-display);color:var(--paper);letter-spacing:-.02em;margin:0 0 16px;font-size:32px;font-weight:400;line-height:1.15}.mobile-blocked h1 em{color:var(--accent);font-style:italic}.mobile-blocked p{color:var(--paper-60);max-width:320px;margin:0 0 28px;font-size:15px;line-height:1.5}.mobile-blocked .link-box{background:var(--ink-800);border:1px solid var(--paper-15);border-radius:var(--r-md);width:100%;max-width:340px;font-family:var(--font-mono);color:var(--paper-60);align-items:center;gap:10px;margin-bottom:16px;padding:12px 14px;font-size:11.5px;display:flex}.mobile-blocked .link-box .link-text{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.mobile-blocked .copy-btn{background:var(--accent);width:100%;max-width:340px;color:var(--accent-ink);border-radius:var(--r-md);padding:14px;font-size:14px;font-weight:600}.tweaks-panel{background:var(--ink-800);border:1px solid var(--paper-15);border-radius:var(--r-lg);width:280px;box-shadow:var(--shadow-lg);z-index:500;animation:popIn .26s var(--ease-out);position:fixed;bottom:20px;right:20px;overflow:hidden}.tweaks-header{border-bottom:1px solid var(--paper-08);justify-content:space-between;align-items:center;padding:12px 14px;display:flex}.tweaks-title{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--paper-60);font-size:11px;font-weight:600}.tweaks-body{padding:14px}.tweak-label{font-size:11px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--paper-40);margin-bottom:8px}.tweak-group{margin-bottom:16px}.tweak-group:last-child{margin-bottom:0}.swatch-row{gap:8px;display:flex}.swatch{cursor:pointer;width:36px;height:36px;transition:transform var(--dur-fast);border:2px solid #0000;border-radius:50%;position:relative}.swatch:hover{transform:scale(1.08)}.swatch.active{border-color:var(--paper);box-shadow:0 0 0 2px var(--ink-800), 0 0 0 3px var(--paper)}.pin-style-row{gap:8px;display:flex}.pin-style-option{background:var(--ink-900);border:1.5px solid var(--paper-08);border-radius:var(--r-md);cursor:pointer;height:56px;transition:border-color var(--dur-fast);flex:1;justify-content:center;align-items:center;display:inline-flex}.pin-style-option:hover{border-color:var(--paper-15)}.pin-style-option.active{border-color:var(--accent);background:#e8a84a14}.demo{color:#0a0a0f;background:#fbfbfd;min-height:100%;font-family:Inter Tight,system-ui,sans-serif;position:relative}.demo-nav{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#fbfbfdd9;border-bottom:1px solid #0a0a0f0f;justify-content:space-between;align-items:center;padding:20px 48px;display:flex;position:sticky;top:0}.demo-logo{letter-spacing:-.02em;align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}.demo-logo-mark{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:6px;width:20px;height:20px}.demo-nav-links{gap:28px;display:flex}.demo-nav-links a{color:#0a0a0fb3;font-size:14px;font-weight:500;text-decoration:none}.demo-nav-cta{color:#fff;background:#0a0a0f;border-radius:8px;padding:9px 18px;font-size:13.5px;font-weight:500;text-decoration:none}.demo-hero{text-align:center;max-width:1180px;margin:0 auto;padding:96px 48px 72px}.demo-hero-eyebrow{color:#4f46e5;letter-spacing:.01em;background:#4f46e514;border-radius:999px;align-items:center;gap:8px;margin-bottom:24px;padding:5px 12px;font-size:12px;font-weight:600;display:inline-flex}.demo-hero h1{letter-spacing:-.035em;color:#0a0a0f;margin:0 0 20px;font-size:64px;font-weight:700;line-height:1.05}.demo-hero h1 em{background:linear-gradient(90deg,#4f46e5,#ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:italic;font-weight:400}.demo-hero p{color:#0a0a0fa6;max-width:620px;margin:0 auto 32px;font-size:19px;line-height:1.5}.demo-hero-ctas{justify-content:center;gap:12px;margin-bottom:48px;display:flex}.demo-btn-primary{color:#fff;background:#0a0a0f;border-radius:10px;align-items:center;gap:8px;padding:14px 24px;font-size:14.5px;font-weight:600;text-decoration:none;display:inline-flex}.demo-btn-secondary{color:#0a0a0f;background:#fff;border:1px solid #0a0a0f1f;border-radius:10px;padding:14px 24px;font-size:14.5px;font-weight:500;text-decoration:none}.demo-product-frame{aspect-ratio:16/9;color:#0a0a0f4d;max-width:1080px;font-family:var(--font-mono);background:linear-gradient(#f3f3f8,#e8e8f0);border:1px solid #0a0a0f0f;border-radius:16px;justify-content:center;align-items:center;margin:0 auto;padding:40px;font-size:12px;display:flex;position:relative;overflow:hidden;box-shadow:0 30px 60px -20px #0a0a0f26}.demo-product-frame:before{content:"";background:repeating-linear-gradient(135deg,#0a0a0f0a 0 10px,#0000 10px 20px);border-radius:10px;position:absolute;inset:40px}.demo-product-frame span{z-index:1;position:relative}.demo-logos{text-align:center;max-width:1180px;margin:0 auto;padding:72px 48px}.demo-logos-label{text-transform:uppercase;letter-spacing:.12em;color:#0a0a0f80;margin-bottom:28px;font-size:12px;font-weight:600}.demo-logos-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;display:flex}.demo-logo-item{font-family:var(--font-display);color:#0a0a0f8c;font-size:22px;font-style:italic;font-weight:500}.demo-features{max-width:1180px;margin:0 auto;padding:96px 48px}.demo-section-eyebrow{text-transform:uppercase;letter-spacing:.12em;color:#4f46e5;margin-bottom:16px;font-size:12px;font-weight:700}.demo-section-title{letter-spacing:-.02em;max-width:640px;margin-bottom:56px;font-size:44px;font-weight:700;line-height:1.1}.demo-section-title em{color:#0a0a0f8c;font-style:italic;font-weight:400}.demo-feature-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.demo-feature{background:#fff;border:1px solid #0a0a0f0f;border-radius:14px;padding:28px}.demo-feature-icon{color:#4f46e5;background:#4f46e51a;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:20px;display:inline-flex}.demo-feature h3{letter-spacing:-.01em;margin:0 0 8px;font-size:17px;font-weight:600}.demo-feature p{color:#0a0a0f99;margin:0;font-size:13.5px;line-height:1.55}.demo-cta{text-align:center;max-width:960px;margin:0 auto;padding:96px 48px}.demo-cta-box{color:#fff;background:#0a0a0f;border-radius:20px;padding:72px 48px;position:relative;overflow:hidden}.demo-cta-box:before{content:"";aspect-ratio:1;background:radial-gradient(circle,#4f46e566,#0000 60%);width:60%;position:absolute;top:-40%;left:-10%}.demo-cta-box h2{letter-spacing:-.03em;margin:0 0 16px;font-size:48px;font-weight:700;line-height:1.05;position:relative}.demo-cta-box h2 em{background:linear-gradient(90deg,#a78bfa,#f472b6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:italic;font-weight:400}.demo-cta-box p{color:#ffffffb3;max-width:520px;margin:0 auto 32px;font-size:17px;position:relative}.demo-cta-box .demo-btn-primary{color:#0a0a0f;background:#fff;position:relative}.demo-footer{color:#0a0a0f8c;border-top:1px solid #0a0a0f0f;justify-content:space-between;align-items:center;padding:48px;font-size:13px;display:flex}.app{background:var(--ink-900);grid-template-rows:56px 1fr;width:100vw;height:100vh;display:grid;position:relative}.workspace{grid-template-columns:1fr auto;display:grid;position:relative;overflow:hidden}.canvas-wrap{background:radial-gradient(ellipse at top, #e8a84a0a, transparent 60%), var(--ink-900);justify-content:center;align-items:flex-start;min-width:0;padding:24px 24px 96px;display:flex;position:relative;overflow:auto}@media (width<=1100px){.canvas-wrap{padding:16px 16px 80px}}.canvas-wrap.zoom-actual{justify-content:flex-start;overflow:auto}.canvas-wrap.comment-mode{cursor:crosshair}.preview-frame-shell{flex-shrink:0;margin:0 auto;position:relative}.canvas-wrap:before{content:"";pointer-events:none;background-image:linear-gradient(#f9f4ea04 1px,#0000 1px),linear-gradient(90deg,#f9f4ea04 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0}