*{box-sizing:border-box}html,body,#app{width:100%;min-width:0;height:100%;margin:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif}button,input,select{font:inherit}.app-shell{--motion-fast:.12s ease;--motion-base:.18s ease;--motion-slow:.24s ease;--bg:#f4f6f4;--panel:#fff;--panel-soft:#edf3ef;--ink:#202322;--muted:#68716d;--line:#dce4df;--accent:#0f766e;--accent-strong:#0b5f59;--accent-soft:#d9f3ee;--warn:#a95512;--sidebar-width:clamp(260px, 24vw, 330px);grid-template-columns:var(--sidebar-width) minmax(0, 1fr);width:100%;height:100vh;color:var(--ink);background:var(--bg);transition:grid-template-columns var(--motion-slow), color var(--motion-base), background-color var(--motion-base);display:grid;position:relative;overflow:hidden}.app-shell[data-theme=dark]{--bg:#191b1a;--panel:#222625;--panel-soft:#27312f;--ink:#f3f4ef;--muted:#a8b2ad;--line:#3b4642;--accent:#58cfc1;--accent-strong:#8ee4da;--accent-soft:#1e4440;--warn:#f2a65d}.app-shell[data-sidebar=collapsed]{--sidebar-width:0px}.library{border-right:1px solid var(--line);background:var(--panel);opacity:1;min-width:0;transition:padding var(--motion-slow), opacity var(--motion-base), border-color var(--motion-base), background-color var(--motion-base);flex-direction:column;gap:14px;padding:24px 18px;display:flex;overflow-y:auto}.library.collapsed{opacity:0;pointer-events:none;border-right:0;gap:0;padding:0;overflow:hidden}.library-title{min-width:0}.library-content{flex-direction:column;gap:14px;min-width:0;display:flex}.library-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.library-header h1{margin:0;font-size:1.35rem;line-height:1.2}.library-header p{color:var(--muted);margin:8px 0 0;font-size:.82rem}.sidebar-toggle{border:1px solid var(--line);width:34px;height:34px;color:var(--ink);background:var(--bg);cursor:pointer;transition:border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-base), transform var(--motion-fast), box-shadow var(--motion-fast);border-radius:8px;flex:none;place-items:center;display:inline-grid}.sidebar-toggle:hover{border-color:var(--accent);color:var(--accent-strong);transform:translateY(-1px)}.sidebar-reopen{z-index:20;border:1px solid var(--line);width:38px;height:38px;color:var(--ink);background:color-mix(in srgb, var(--panel) 94%, transparent);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:element-enter var(--motion-base);transition:border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-base), box-shadow var(--motion-fast), transform var(--motion-fast);border-radius:8px;place-items:center;display:inline-grid;position:absolute;top:14px;left:14px}.sidebar-reopen:hover{border-color:var(--accent);color:var(--accent-strong);transform:translateY(-1px);box-shadow:0 8px 22px #0000001f}.search-input{border:1px solid var(--line);width:100%;min-height:42px;color:var(--ink);background:var(--bg);transition:border-color var(--motion-fast), background-color var(--motion-base), box-shadow var(--motion-fast);border-radius:8px;outline:none;padding:0 12px}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.side-state{border:1px dashed var(--line);color:var(--muted);animation:element-enter var(--motion-base);transition:color var(--motion-base), border-color var(--motion-base), background-color var(--motion-base);border-radius:8px;padding:16px;font-size:.92rem;line-height:1.5}.story-list{gap:10px;display:grid}.story-group{gap:6px;display:grid}.story-button,.thread-button{width:100%;min-width:0;color:var(--ink);text-align:left;cursor:pointer;transition:border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast);background:0 0;border:1px solid #0000;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;display:grid}.story-button span,.thread-button span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.story-button small,.thread-button small{color:var(--muted);font-size:.74rem}.story-button:hover,.thread-button:hover{background:var(--panel-soft)}.story-button.active{border-color:var(--accent);background:var(--accent-soft)}.thread-list{gap:4px;padding-left:10px;display:grid}.thread-loading{color:var(--muted);padding:8px 10px;font-size:.82rem}.thread-button{min-height:38px;padding:8px 10px;font-size:.9rem}.thread-button.active{color:var(--accent-strong);background:var(--panel-soft)}.reader-pane{background:var(--bg);min-width:0;min-height:0;transition:background-color var(--motion-base);flex-direction:column;display:flex;overflow:hidden}.reader-toolbar{z-index:5;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--panel) 92%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:toolbar-enter var(--motion-slow);transition:border-color var(--motion-base), background-color var(--motion-base);flex:none;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 28px 18px;display:grid}.app-shell[data-sidebar=collapsed] .reader-toolbar{padding-left:68px}.reader-scroll{flex:auto;min-height:0;overflow-y:auto}.reader-heading{min-width:0}.reader-heading p{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin:0 0 4px;font-size:.82rem;overflow:hidden}.reader-heading h2{overflow-wrap:anywhere;margin:0;font-size:clamp(1.05rem,2vw,1.55rem);line-height:1.25}.reader-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.reader-actions button{border:1px solid var(--line);width:38px;height:38px;color:var(--ink);background:var(--panel);cursor:pointer;transition:border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-base), transform var(--motion-fast);border-radius:8px;place-items:center;display:inline-grid}.reader-actions select{border:1px solid var(--line);width:76px;min-width:0;height:38px;color:var(--ink);background:var(--panel);cursor:pointer;transition:border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-base);border-radius:8px;padding:0 8px}.reader-actions button:hover:not(:disabled){border-color:var(--accent);color:var(--accent-strong);transform:translateY(-1px)}.reader-actions button:disabled{opacity:.4;cursor:not-allowed}.progress-track{background:var(--line);height:3px;position:absolute;bottom:0;left:0;right:0}.progress-track span{background:linear-gradient(90deg, var(--accent), var(--warn));height:100%;transition:width .16s;display:block}.reader-content{width:min(100%,900px);font-family:var(--reader-font-family);font-size:var(--reader-font-size);line-height:var(--reader-line-height);margin:0 auto;padding:28px 28px 56px}.thread-summary{color:var(--muted);justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;font-size:.88rem;display:flex}.thread-summary a{color:var(--accent-strong);text-decoration:none}.thread-summary a:hover{text-decoration:underline}.post-block{border:1px solid var(--line);background:var(--panel);animation:element-enter var(--motion-base);transition:border-color var(--motion-base), background-color var(--motion-base), box-shadow var(--motion-fast);border-radius:8px}.post-block:hover{box-shadow:0 8px 24px #0000000f}.post-block+.post-block{margin-top:14px}.virtual-list{position:relative}.virtual-spacer{min-height:1px;position:relative}.virtual-items{position:absolute;left:0;right:0}.virtual-row{padding-bottom:14px}.post-placeholder{border:1px dashed var(--line);color:var(--muted);background:var(--panel);animation:element-enter var(--motion-base);transition:color var(--motion-base), border-color var(--motion-base), background-color var(--motion-base);border-radius:8px;padding:22px 18px}.post-meta{border-bottom:1px solid var(--line);color:var(--muted);transition:color var(--motion-base), border-color var(--motion-base);flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 14px;font-size:.78em;display:flex}.post-meta span{color:var(--accent-strong);font-weight:700}.post-meta strong{color:var(--ink);font-weight:650}.post-meta time{margin-left:auto}.post-body{overflow-wrap:anywhere;white-space:pre-wrap;padding:16px 18px 18px}.post-ref{color:var(--accent-strong);font:inherit;line-height:inherit;text-underline-offset:.16em;cursor:pointer;transition:color var(--motion-fast), background-color var(--motion-fast);background:0 0;border:0;margin:0 1px;padding:0 2px;text-decoration:underline;display:inline;position:relative}.post-ref:hover,.post-ref:focus-visible{color:var(--warn);outline:none}.post-ref.missing{color:var(--muted)}.post-ref.self{color:var(--muted);cursor:default;text-decoration-style:dotted}.post-ref.self:hover,.post-ref.self:focus-visible{color:var(--muted)}.post-ref-tooltip{z-index:30;border:1px solid var(--line);width:min(340px,70vw);max-height:220px;color:var(--ink);background:var(--panel);text-align:left;white-space:normal;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--motion-fast), transform var(--motion-fast), visibility var(--motion-fast);border-radius:8px;gap:4px;padding:10px 12px;font-size:.86em;line-height:1.55;text-decoration:none;display:grid;position:absolute;bottom:calc(100% + 8px);left:0;overflow:auto;transform:translateY(6px)scale(.98);box-shadow:0 14px 34px #0000002e}.post-ref:hover .post-ref-tooltip,.post-ref:focus-visible .post-ref-tooltip{visibility:visible;opacity:1;transform:translateY(0)scale(1)}.post-ref-tooltip strong{color:var(--accent-strong);font-size:.88em}.post-ref-tooltip small,.post-ref-status{color:var(--muted)}.post-ref-excerpt{white-space:pre-wrap}.empty-state{width:min(100%,720px);color:var(--muted);animation:element-enter var(--motion-slow);margin:64px auto;padding:0 28px}.empty-state.inline{margin:24px auto;padding:0}.empty-state h2{color:var(--ink);margin:0 0 10px;font-size:1.2rem}.empty-state p{margin:0 0 14px;line-height:1.6}.empty-state code{border:1px solid var(--line);max-width:100%;color:var(--ink);background:var(--panel);transition:color var(--motion-base), border-color var(--motion-base), background-color var(--motion-base);border-radius:8px;padding:10px 12px;display:inline-block;overflow-x:auto}@keyframes element-enter{0%{opacity:0}to{opacity:1}}@keyframes toolbar-enter{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media (width<=820px){.app-shell{transition:grid-template-rows var(--motion-slow), color var(--motion-base), background-color var(--motion-base);grid-template-rows:minmax(210px,38vh) minmax(0,1fr);grid-template-columns:1fr}.app-shell[data-sidebar=collapsed]{grid-template-rows:0 minmax(0,1fr);grid-template-columns:1fr}.library{border-right:0;border-bottom:1px solid var(--line);padding:16px}.library.collapsed{border-bottom:0;padding:0}.reader-toolbar{grid-template-columns:1fr;gap:12px;padding:14px 18px 16px}.reader-actions{justify-content:flex-start}.reader-content{padding:22px 16px 44px}.post-meta time{width:100%;margin-left:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}