/* An adjustable article with a quiet, floating tool strip and anchored marginalia. */
:root {
  --reading-width: 860px;
  --reading-note-width: 300px;
  --reading-margin-space: 344px;
  --reading-note-bg: #111112;
  --reading-note-border: #292d2b;
  --reading-note-mark: #ddff001a;
  --reading-note-active: #ddff0033;
}
:root[data-reading-theme=paper] {
  color-scheme: light;
  --bg: #f8f6f2;
  --fg: #1c1c21;
  --muted: #666670;
  --primary: #6d8e0b;
  --border: #dbd8d1;
  --panel: #ffffff;
  --surface: #edf2ef;
  --text: #202723;
  --line: #d6ded8;
  --accent: #6d8e0b;
  --error: #a53a30;
  --reading-note-bg: #ffffff;
  --reading-note-border: #dbd8d1;
  --reading-note-mark: #6d8e0b14;
  --reading-note-active: #6d8e0b2b;
  background: var(--bg);
  color: var(--fg);
}
:root[data-reading-theme=paper] body { background: var(--bg); color: var(--fg); }
:root[data-reading-theme=paper] ::selection { background: #c6e4d5; color: #172b21; }
:root[data-reading-theme=paper] .ambient-scene,
:root[data-reading-theme=paper] .hero-glow,
:root[data-reading-theme=paper] .hero::before,
:root[data-reading-theme=paper] .hero::after { display: none; }
:root[data-reading-theme=paper] #cursor-ring { mix-blend-mode: normal; border-color: #6d8e0b; }
:root[data-reading-theme=paper] .site-header { background: #f8f6f2e8; border-bottom-color: var(--border); }
:root[data-reading-theme=paper] .nav a { color: #666670; }
:root[data-reading-theme=paper] .nav a.active,
:root[data-reading-theme=paper] .nav a:hover { color: var(--primary); }
:root[data-reading-theme=paper] .write-link { border-color: #6d8e0b66; }
:root[data-reading-theme=paper] .panel { background: #ffffff; }
:root[data-reading-theme=paper] input,
:root[data-reading-theme=paper] textarea,
:root[data-reading-theme=paper] select { background: #ffffff; color: var(--fg); }
:root[data-reading-theme=paper] input::placeholder,
:root[data-reading-theme=paper] textarea::placeholder { color: #777780; }
:root[data-reading-theme=paper] .btn.primary { color: #111609; }
:root[data-reading-theme=paper] .btn.primary:hover { background: #82a214; }
:root[data-reading-theme=paper] .btn:hover { border-color: var(--primary); }
:root[data-reading-theme=paper] .icon-btn:hover { background: #eceae3; }
:root[data-reading-theme=paper] .pill { background: #6d8e0b14; color: #587309; }
:root[data-reading-theme=paper] .cover { background: #eeece5; }
:root[data-reading-theme=paper] .chronicle-banner { background: #ffffff; }
:root[data-reading-theme=paper] .month span { background: #ffffff; }
:where(:root[data-reading-theme=paper]) .chapter-row .number { color: #6d8e0b88; }
:root[data-reading-theme=paper] .site-header.menu-open .nav { background: #f8f6f2; }
:root[data-reading-theme=paper] #search-dialog { background: #f8f6f2f7; }
:root[data-reading-theme=paper] #toast { background: #ffffff; border-color: #6d8e0b70; box-shadow: 0 5px 30px #20372818; }
:root[data-reading-theme=paper] .image-zoom,
:root[data-reading-theme=paper] .image-zoom-close { background: #ffffff; }
:root[data-reading-theme=paper] ::-webkit-scrollbar-thumb { background: #bdbbb3; }
:root[data-reading-theme=paper] ::-webkit-scrollbar-track { background: #eeece5; }

/* One quiet switch in the header; the action is conveyed by its accessible label. */
.site-header .theme-switch.icon-btn { width: 36px; height: 36px; min-width: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.site-header .theme-switch.icon-btn:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.site-header .theme-switch .icon { width: 17px; height: 17px; }
.site-header .theme-switch .theme-sun { display: block; }
.site-header .theme-switch .theme-moon { display: none; }
:root[data-reading-theme=paper] .site-header .theme-switch .theme-sun { display: none; }
:root[data-reading-theme=paper] .site-header .theme-switch .theme-moon { display: block; }
/* Authoring follows the same saved preference without recoloring article-authored spans. */
:root[data-reading-theme=paper] #admin-app .sidebar { background: #edf2ef; }
:root[data-reading-theme=paper] #admin-app .writer-top { background: #f4f6f5f5; }
:root[data-reading-theme=paper] #admin-app :is(.deploy-strip,.writer-toolbar,.pane-caption,.preview-pane,.media-card,.steps-help,.deploy-details,.ai-workspace,.auth-aside) { background: #edf2ef; }
:root[data-reading-theme=paper] #admin-app :is(.source-pane,.visual-pane,.editor-text,.editor-preview,.media-thumb,.proposal-document) { background: #ffffff; }
:root[data-reading-theme=paper] #admin-app :is(.side-link,.tab,.writer-meta button,.toolbar-btn,.icon-button,.deploy-strip p,.steps-help,.article-diagnostics,.ai-handoff ol,.ai-proposal-row p,.proposal-intro p,.writer-note strong),
:root[data-reading-theme=paper] :is(#admin-app, #admin-dialog, .hybrid-dialog) label > span { color: #526058; }
:root[data-reading-theme=paper] #admin-app :is(.side-link.active,.tab.active,.toolbar-btn.active),
:root[data-reading-theme=paper] #admin-app :is(.side-link,.toolbar-btn,.icon-button):hover { color: #245e50; background: #deebe2; }
:root[data-reading-theme=paper] #admin-app .btn,
:root[data-reading-theme=paper] #admin-dialog .btn,
:root[data-reading-theme=paper] .hybrid-dialog .btn { background: #ffffff; color: #202723; border-color: #bac9bf; }
:root[data-reading-theme=paper] #admin-app .btn.primary,
:root[data-reading-theme=paper] #admin-dialog .btn.primary,
:root[data-reading-theme=paper] .hybrid-dialog .btn.primary { background: #245e50; color: #ffffff; border-color: #245e50; }
:root[data-reading-theme=paper] #admin-app .btn.danger { color: #a53a30; border-color: #b9675f; }
:root[data-reading-theme=paper] #admin-app .view-switch button.active { background: #dfeae3; color: #245e50; }
:root[data-reading-theme=paper] #admin-app :is(.ai-workspace>summary,.formula-tool) { color: #245e50; }
:root[data-reading-theme=paper] #admin-app :is(.badge,.badge.live,.badge.ai-pending,.save-state.saved,.secret-status,.automation-secret p) { color: #245e50; border-color: #8ead9b; }
:root[data-reading-theme=paper] #admin-app :is(.badge.changed,.ai-proposal-row small) { color: #825c15; border-color: #bc974e; }
:root[data-reading-theme=paper] :is(.conflict-bar,.recovery-bar,.format-notice,.proposal-warning,.restore-warning) { color: #735014; background: #fff7e7; }
:root[data-reading-theme=paper] :is(#admin-dialog,.hybrid-dialog),
:root[data-reading-theme=paper] :is(#admin-dialog,.hybrid-dialog) .dialog-header,
:root[data-reading-theme=paper] .proposal-review-footer,
:root[data-reading-theme=paper] :is(.formula-preview,.image-layout-preview) { background: #ffffff; border-color: #d6ded8; color: #202723; }
:root[data-reading-theme=paper] #admin-dialog :is(.dialog-body>p,.proposal-intro p,.proposal-columns h3) { color: #526058; }
:root[data-reading-theme=paper] .check-label { color: #526058 !important; }
:root[data-reading-theme=paper] #admin-toast { color: #202723; background: #ffffff; border-color: #b2c5b8; }

/* The article and its visible right margin are centered as a single composition.
   Geometry chooses the margin only when the full reading width fits the viewport. */
.reading.reading-workspace {
  display: block;
  width: calc(100% - 64px);
  max-width: var(--reading-width);
  margin-inline: auto;
  padding: 48px 0 0;
}
.reading.reading-workspace.notes-visible.has-note-margin { max-width: calc(var(--reading-width) + var(--reading-margin-space)); padding-right: var(--reading-margin-space); }
.reading-workspace > .reading-main { min-width: 0; width: 100%; }
.reading-workspace > .reading-toc-rail { position: relative; min-width: 0; margin: 0 0 24px; }
.reading-workspace > .reading-notes-rail { position: static; margin: 0; padding: 0; width: 0; height: 0; }
.reading-toc-rail:empty { display: none; }
.reading-article-header { margin: 0; }
.reading-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 32px; }
.reading-topline .post-meta { font-family: inherit; font-size: 11px; line-height: 1.6; gap: 12px; }
.reading-topline .post-meta .pill { font: inherit; padding: 1px 6px; }
.reading-main > h1,
.reading-article-header > h1 { font-size: clamp(36px, 2.65vw, 52px); font-weight: 650; line-height: 1.25; margin: 28px 0 20px; letter-spacing: -.035em; overflow-wrap: anywhere; }
.reading-main > h1.is-long-title,
.reading-article-header > h1.is-long-title { font-size: clamp(29px, 2.05vw, 36px); line-height: 1.4; letter-spacing: -.02em; }
.reading-main > .post-description,
.reading-article-header > .post-description { font-size: 18px; line-height: 1.8; max-width: 44em; color: var(--muted); }
.reading-article-header > .series-note { padding: 14px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin-block: 24px 0; font-size: 13px; }
.reading-main > .cf-article { margin-top: 40px; }
.reading-main > .post-cover + .cf-article { margin-top: 0; }
.reading-main > .post-cover { height: auto; max-height: 360px; aspect-ratio: 16/9; border-radius: 16px; margin: 36px 0 44px; }
.reading-main .article-layout { display: block; }
.reading-main .cf-article { font-size: 17px; line-height: 1.9; }
.reading-main .cf-article pre { position: relative; padding-top: 48px; }
.reading-main .cf-article pre code { font-size: inherit; color: inherit; }
.reading-workspace .preview-notice { border-color: var(--border); color: var(--muted); background: transparent; border-radius: 4px; font-size: 12px; padding: 12px 14px; }
.reading-workspace .post-meta [data-reading-theme-toggle] { margin-left: 0; }
.reading-main .tags { margin-block: 40px; }

/* Controls stay fixed to the viewport, so changing the article width never moves
   the slider under the pointer. The range has a generous invisible hit area. */
.reading-toolbar { position: fixed; z-index: 50; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 32px); padding: 8px 12px 8px 8px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 9999px; background: color-mix(in srgb, var(--panel) 70%, transparent); box-shadow: 0 8px 30px #0002; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: var(--muted); }
.reading-toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 9999px; background: transparent; color: var(--muted); font-size: 11px; line-height: 1; transition: color 140ms, background-color 140ms; }
.reading-toolbar button:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.reading-toolbar button[aria-pressed=true],
.reading-toolbar button[aria-expanded=true] { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.reading-toolbar svg { width: 16px; height: 16px; flex: 0 0 auto; }
.reading-toolbar [data-reading-notes-toggle] { position: relative; width: 32px; padding: 0; }
.reading-toolbar .reading-notes-edit-toggle { width: 32px; min-width: 32px; padding: 0; }
.reading-toolbar .reading-notes-edit-toggle.is-active { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.reading-toolbar .reading-owner-login { width: 32px; min-width: 32px; padding: 0; }
.reading-toolbar .reading-owner-login.is-owner { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.reading-toolbar [data-reading-notes-count] { position: absolute; top: -2px; right: -2px; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: var(--bg); font: 10px/1 var(--mono); font-variant-numeric: tabular-nums; }
.reading-toolbar-divider { width: 1px; height: 20px; margin-inline: 3px; background: var(--border); }
.reading-toolbar-width { display: flex; align-items: center; gap: 8px; margin: 0; padding-left: 2px; color: var(--muted); }
.reading-toolbar-width > svg { width: 14px; height: 14px; }
.reading-toolbar input[type=range] { appearance: none; -webkit-appearance: none; display: block; flex: 0 0 auto; width: 112px; height: 28px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; accent-color: var(--primary); cursor: ew-resize; touch-action: pan-y; }
.reading-toolbar input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 9999px; background: var(--border); }
.reading-toolbar input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 40%, transparent); }
.reading-toolbar input[type=range]::-moz-range-track { height: 4px; border: 0; border-radius: 9999px; background: var(--border); }
.reading-toolbar input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--primary); }
.reading-toolbar input[type=range]::-moz-range-progress { height: 4px; border-radius: 9999px; background: var(--primary); }
.reading-toolbar output { flex: 0 0 32px; width: 32px; color: var(--muted); font: 10px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.reading-toolbar :focus-visible,
.reading-notes-panel :focus-visible,
.reading-notes-margin-layer :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.reading-toc-rail .post-toc { position: static; width: 100%; max-height: none; padding: 0; border: 0; scrollbar-width: thin; font-size: 12px; line-height: 1.8; }
.reading-toc-rail .post-toc summary { width: max-content; max-width: 100%; padding: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.reading-toc-rail .post-toc details[open] summary { margin-bottom: 16px; }
.reading-toc-rail .post-toc summary span { font-family: inherit; font-size: 10px; margin-left: 7px; }
.reading-toc-rail .post-toc nav { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 4px; border-left-color: color-mix(in srgb, var(--border) 70%, transparent); }
.reading-toc-rail .post-toc a { padding: 8px 8px 8px calc(14px + var(--level)*10px); border-left-width: 1px; transition: color 180ms, border-color 180ms; }
.reading-toc-rail .post-toc a:hover,
.reading-toc-rail .post-toc a[aria-current] { background: transparent; border-left-color: var(--primary); color: var(--primary); }
.reading-toc-rail .post-toc a[aria-current] { font-weight: 500; }
:root[data-reading-theme=paper] .reading-main { background: transparent; border: 0; border-radius: 0; padding: 0; }
:root[data-reading-theme=paper] .reading-main .cf-article:not(.cf-article .cf-article) { padding: 0; border-radius: 0; background: transparent; }
:root[data-reading-theme=paper] .reading-main .cf-article { color: #1c1c21; --article-accent: #587309; }
:root[data-reading-theme=paper] .reading-main .code-head { color: #666670; border-bottom-color: #dbd8d1; }
:root[data-reading-theme=paper] .reading-toolbar { box-shadow: 0 8px 30px #242b2210; }
:root[data-reading-theme=paper] .reading-toc-rail .post-toc a:hover,
:root[data-reading-theme=paper] .reading-toc-rail .post-toc a[aria-current] { background: transparent; }

/* The reading margin is empty chrome: only notes whose quotes are visible enter
   it. A separate drawer holds the complete collection and the editing form. */
.reading-notes-margin-layer { position: fixed; z-index: 20; inset: 0; overflow: hidden; pointer-events: none; }
/* Cards that reach the lower viewport edge ease out without painting over the
   article's highlighted text. The drawer remains the complete source of truth,
   while a dense rail stays calm when the viewport cannot hold every card. */
.reading-notes-margin-cards,
.reading-notes-connectors { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 64px), transparent 100%); }
.reading-notes-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.reading-note-connector { fill: none; stroke: var(--primary); stroke-width: 1.35; stroke-opacity: .35; vector-effect: non-scaling-stroke; transition: stroke-opacity 180ms ease, stroke-width 180ms ease, opacity 180ms ease; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary) 35%, transparent)); }
.reading-note-connector.is-active { stroke-width: 2; stroke-opacity: .95; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--primary) 68%, transparent)); }
.reading-note-connector-leader { stroke: var(--primary); stroke-width: 1.15; stroke-opacity: .42; vector-effect: non-scaling-stroke; transition: stroke-opacity 180ms ease, opacity 180ms ease; }
.reading-note-connector-leader.is-active { stroke-opacity: .88; }
.reading-note-connector-dot { fill: var(--primary); fill-opacity: .62; transition: fill-opacity 180ms ease, opacity 180ms ease, r 180ms ease; }
.reading-note-connector-dot.is-active { fill-opacity: 1; }
.reading-notes-margin-cards { position: absolute; inset: 0; pointer-events: none; }
.reading-notes-drawer-backdrop { position: fixed; z-index: 64; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: #0003; cursor: default; }
.reading-notes-drawer-backdrop[hidden] { display: none; }
.reading-notes-panel { position: fixed; z-index: 65; top: 64px; right: 0; bottom: 0; width: 320px; max-width: 88vw; padding: 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: -12px 0 40px #0002; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--fg); font-size: 13px; line-height: 1.7; visibility: hidden; opacity: 0; transform: translateX(100%); pointer-events: none; transition: transform 220ms ease, opacity 220ms ease, visibility 220ms, display 220ms; transition-behavior: allow-discrete; }
.reading-notes-panel.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
@starting-style {
  .reading-notes-panel.is-open { opacity: 0; transform: translateX(100%); }
}
.reading-notes-head { display: flex; align-items: center; gap: 8px; padding: 0 0 12px; }
.reading-notes-title { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.reading-notes-count { color: var(--muted); font: 10px/1 var(--mono); font-variant-numeric: tabular-nums; }
.reading-notes-close { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 28px; height: 28px; min-width: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; }
.reading-notes-close:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); }
.reading-notes-close svg { width: 16px; height: 16px; }
.reading-notes-intro { color: var(--muted); font-size: 11px; margin: 0 0 16px; line-height: 1.85; }
.reading-notes-panel > .reading-notes-intro { max-width: 27em; }
.reading-notes-panel:has(.reading-notes-empty) > .reading-notes-head .reading-notes-count,
.reading-notes-panel:has(.reading-notes-empty) > .reading-notes-intro { display: none; }
.reading-notes-panel > [data-note-action=new] { margin: 0 0 18px; padding: 7px 10px; min-height: 32px; font-size: 12px; line-height: 18px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--muted); }
.reading-notes-panel > [data-note-action=new]:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.reading-notes-list { display: grid; gap: 16px; min-height: 0; padding: 0 0 4px; }
.reading-notes-empty { color: var(--muted); font-size: 11px; padding: 0; line-height: 1.85; max-width: 20em; }
.reading-notes-status { margin: 0 0 16px; color: var(--muted); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.reading-notes-status:empty { display: none; }
.reading-notes-status[role=alert],
.reading-notes-status.is-error { color: #e2a189; }
.owner-login-dialog { width: min(390px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); color: var(--fg); box-shadow: 0 24px 100px #0005; overflow-y: auto; }
.owner-login-dialog::backdrop { background: #0007; backdrop-filter: blur(5px); }
.owner-login-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.owner-login-heading h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.owner-login-close { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; }
.owner-login-close:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); }
.owner-login-intro { margin: 0 0 18px; color: var(--fg); font-size: 13px; line-height: 1.8; }
.owner-login-status { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.owner-login-status.is-error { color: #e2a189; }
.owner-google-button { display: flex; justify-content: center; min-width: 0; margin: 8px 0 16px; }
.owner-google-button:empty { display: none; }
.owner-login-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.owner-login-actions:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }
.owner-login-actions .btn { min-height: 34px; padding: 7px 12px; font-size: 12px; }
.owner-login-detail { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; line-height: 1.8; }
.owner-login-dialog :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.owner-login-dialog [hidden] { display: none !important; }
.reading-note-form textarea[readonly] { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
:root[data-reading-theme=paper] .owner-login-dialog { box-shadow: 0 24px 80px #242b2230; }
:root[data-reading-theme=paper] .owner-login-dialog::backdrop { background: #17211540; }
:root[data-reading-theme=paper] .owner-login-status.is-error { color: #9a3828; }
.reading-note-card { position: relative; min-width: 0; padding: 14px; margin: 0; border: 1px solid var(--reading-note-border); border-radius: 12px; background: color-mix(in srgb, var(--reading-note-bg) 66%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--fg); overflow-wrap: anywhere; scroll-margin-top: 104px; box-shadow: 0 8px 26px color-mix(in srgb, #000 22%, transparent); transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.reading-note-card.is-margin { position: absolute; width: var(--reading-note-width); max-height: min(420px, 50dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; pointer-events: auto; transform-origin: left center; will-change: transform, opacity; }
.reading-note-card:hover,
.reading-note-card:focus-within,
.reading-note-card[data-active=true],
.reading-note-card.is-active { border-color: color-mix(in srgb, var(--primary) 52%, transparent); background: color-mix(in srgb, var(--primary) 11%, var(--reading-note-bg)); box-shadow: 0 12px 32px color-mix(in srgb, var(--primary) 16%, #000 24%); }
.reading-note-quote { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 4.875em; overflow: hidden; border: 0; border-left: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); padding: 0 0 0 8px; margin: 0 0 10px; color: var(--muted); background: transparent; font-size: 12px; font-style: italic; line-height: 1.625; text-align: left; white-space: pre-wrap; width: 100%; }
button.reading-note-quote:hover { color: var(--primary); opacity: 1; }
button.reading-note-quote:disabled { cursor: default; opacity: 1; }
/* When the source has changed, the saved quote is the only remaining context. */
.reading-note-unmatched + .reading-note-quote { display: block; -webkit-line-clamp: unset; max-height: 170px; overflow: auto; scrollbar-width: thin; }
.reading-note-body { margin: 0 0 10px; font-size: 13px; line-height: 1.7; min-width: 0; }
.reading-note-body:not(.is-rich) { white-space: pre-wrap; }
.reading-note-body.is-rich > :first-child { margin-top: 0; }
.reading-note-body.is-rich > :last-child { margin-bottom: 0; }
.reading-note-body.is-rich p { margin: .55em 0; }
.reading-note-body.is-rich h1,.reading-note-body.is-rich h2,.reading-note-body.is-rich h3,.reading-note-body.is-rich h4 { margin: .8em 0 .35em; font-size: 1.05em; line-height: 1.4; }
.reading-note-body.is-rich h2 { border-left-width: 2px; padding-left: 8px; }
.reading-note-body.is-rich ul,.reading-note-body.is-rich ol { margin: .5em 0; padding-left: 1.4em; }
.reading-note-body.is-rich blockquote { margin: .7em 0; padding: .45em .7em; font-size: .95em; }
.reading-note-body.is-rich pre { margin: .7em 0; max-height: 180px; overflow: auto; font-size: .86em; }
.reading-note-body.is-rich .code-head { display: none; }
.reading-note-body.is-rich .cf-math-block { margin: .65em 0; overflow-x: auto; }
.reading-note-body.is-rich .cf-image-block { max-width: 100%; margin: .7em 0; }
.reading-note-body.is-rich .cf-image-inline { vertical-align: middle; }
.reading-note-body.is-rich img { max-width: 100%; height: auto; border-radius: 6px; }
.reading-note-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font: 10px/1.5 var(--mono); }
.reading-note-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.reading-note-card .reading-note-actions button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; border-radius: 4px; color: var(--muted); font-size: 11px; padding: 2px 0; min-height: 24px; line-height: 20px; }
.reading-note-actions svg { width: 12px; height: 12px; }
.reading-note-card .reading-note-actions button:hover { color: var(--primary); }
.reading-note-card:has(.reading-note-icon-actions) > .reading-note-quote,
.reading-note-card:has(.reading-note-icon-actions) > .reading-note-meta:first-child { width: calc(100% - 52px); }
.reading-note-icon-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 2px; margin: 0; }
.reading-note-card .reading-note-icon-actions button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 5px; }
.reading-note-card .reading-note-icon-actions button:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.reading-note-card .reading-note-icon-actions button[data-note-action=delete]:hover { color: #e2a189; background: #e2a18912; }
.reading-note-unmatched { margin: 0 0 9px; color: var(--muted); font-size: 10px; }
.reading-note-form { margin: 4px 0 22px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--primary) 4%, transparent); }
.reading-note-form label { margin-bottom: 12px; font-size: 12px; }
.reading-note-form textarea { width: 100%; min-height: 126px; max-height: 340px; padding: 10px; margin: 9px 0 0; border-radius: 6px; background: var(--panel); font-size: 13px; line-height: 1.8; resize: vertical; }
.reading-note-form .reading-note-quote { display: block; -webkit-line-clamp: unset; max-height: 120px; overflow: auto; scrollbar-width: thin; }
.reading-note-form .reading-note-actions { flex-wrap: wrap; gap: 8px; }
.reading-note-form .btn { padding: 6px 10px; border-radius: 4px; font-size: 12px; }
.reading-note-form.is-inline { margin: 0 0 10px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.reading-note-form.is-inline label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.reading-note-form.is-inline textarea { min-height: 94px; max-height: 250px; margin-top: 6px; font-size: 13px; line-height: 1.625; }
.reading-note-card .reading-note-form .reading-note-actions .btn { min-height: 28px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px; }
.reading-note-card .reading-note-form .reading-note-actions .btn.primary { background: var(--primary); border-color: var(--primary); color: #111609; }
.reading-note-selection-button { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); padding: 8px 13px; background: var(--panel); color: var(--primary); border-radius: 9px; font-size: 12px; box-shadow: 0 4px 18px #0003; max-width: calc(100vw - 24px); }
.reading-note-highlight { position: absolute; pointer-events: none; background: var(--reading-note-mark); border-bottom: 1px solid color-mix(in srgb, var(--primary) 65%, transparent); border-radius: 1px; }
.reading-note-selection-button[hidden] { display: none !important; }
.reading-note-highlight.is-active { background: var(--reading-note-active); border-bottom-color: var(--primary); }
::highlight(cf-reading-notes) { background: var(--reading-note-mark); color: inherit; text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
::highlight(cf-reading-note-active) { background: var(--reading-note-active); color: inherit; text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:root[data-reading-theme=paper] .reading-note-selection-button { box-shadow: 0 4px 18px #242b2220; }
:root[data-reading-theme=paper] .reading-notes-drawer-backdrop { background: #17211520; }
:root[data-reading-theme=paper] .reading-notes-panel { box-shadow: -12px 0 40px #242b2218; }
:root[data-reading-theme=paper] .reading-note-card { box-shadow: 0 8px 26px #242b2212; }
:root[data-reading-theme=paper] .reading-note-card:hover,
:root[data-reading-theme=paper] .reading-note-card:focus-within,
:root[data-reading-theme=paper] .reading-note-card[data-active=true],
:root[data-reading-theme=paper] .reading-note-card.is-active { box-shadow: 0 12px 32px #6d8e0b1c; }
:root[data-reading-theme=paper] .reading-note-card .reading-note-icon-actions button[data-note-action=delete]:hover { color: #9a3828; background: #9a38280d; }
:root[data-reading-theme=paper] .reading-notes-status[role=alert],
:root[data-reading-theme=paper] .reading-notes-status.is-error { color: #9a3828; }

.reading-notes-panel[hidden],
.reading-notes-margin-layer[hidden],
.reading-toolbar [hidden] { display: none !important; }
@media (max-width: 767px) {
  .reading.reading-workspace { width: calc(100% - 32px); padding-top: 32px; }
  .reading-workspace > .reading-toc-rail { margin-bottom: 20px; }
  .reading-toolbar { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .reading-toolbar input[type=range] { width: 96px; }
  .reading-notes-panel { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (max-width: 599px) {
  .reading.reading-workspace { padding-top: 28px; }
  .reading-topline { align-items: flex-start; gap: 10px; }
  .reading-topline .post-meta { gap: 7px 10px; font-size: 10px; }
  .reading-topline .post-meta > a:first-child { flex-basis: 100%; margin-bottom: 2px; }
  .reading-main > h1,
  .reading-article-header > h1 { font-size: 30px; line-height: 1.35; margin: 24px 0 16px; }
  .reading-main > h1.is-long-title,
  .reading-article-header > h1.is-long-title { font-size: 27px; line-height: 1.42; }
  .reading-main > .post-description,
  .reading-article-header > .post-description { font-size: 16px; line-height: 1.8; }
  .reading-main .cf-article { font-size: 16px; line-height: 1.9; }
  .reading-main > .post-cover { margin: 28px 0 32px; border-radius: 16px; }
  .reading-workspace .preview-notice { align-items: flex-start; flex-direction: column; padding: 10px 12px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-toolbar button,
  .reading-toc-rail .post-toc a,
  .reading-notes-panel,
  .reading-note-card,
  .reading-note-connector,
  .reading-note-connector-dot { transition: none; }
}
@media print {
  .reading.reading-workspace,
  .reading.reading-workspace.notes-visible.has-note-margin { display: block; max-width: none; width: 100%; padding: 0; }
  .reading-workspace > .reading-toc-rail,
  .reading-toolbar,
  .reading-notes-drawer-backdrop,
  .reading-notes-close,
  .reading-notes-connectors,
  .reading-notes-intro,
  [data-note-action=new],
  .reading-note-selection-button,
  .reading-note-actions,
  .reading-note-form { display: none !important; }
  .owner-login-dialog { display: none !important; }
  .reading-workspace > .reading-notes-rail { position: static; width: 100%; height: auto; margin-top: 30px; }
  .reading-notes-panel,
  .reading-notes-panel[hidden],
  .reading-notes-margin-layer,
  .reading-notes-margin-layer[hidden],
  .reading-notes-margin-cards { display: block !important; position: static; width: 100%; max-width: none; max-height: none; padding: 0; border: 0; overflow: visible; transform: none; visibility: visible; opacity: 1; background: white; box-shadow: none; }
  .reading-notes-list { display: block; }
  .reading-note-card,
  .reading-note-card.is-margin { position: static !important; width: 100%; max-height: none; margin-bottom: 16px; overflow: visible; transform: none !important; opacity: 1 !important; break-inside: avoid; background: white; color: #222; border-color: #ccc; }
  .reading-note-quote,.reading-note-meta,.reading-notes-intro { color: #555; }
  .reading-note-highlight { display: none; }
  :root[data-reading-theme=paper] .reading-main { border: 0; padding: 0; }
}