/* Shared styles: a calm reading app (owner choice 2026-11-04): warm paper, comfortable text,
   one muted teal accent, light and dark following the device. Assets and fonts stay local. */
:root {
  color-scheme: light dark;
  --bg:#f7f4ee; --surface:#fffdf9; --soft:#f0ebe1; --ink:#2b2824; --muted:#6a6358; --line:#e4ddd0; --field:#8f8576;
  --accent:#2f6b66; --accent-strong:#23524e; --accent-soft:#e2eeeb; --accent-line:#a9cbc5; --on-accent:#fff;
  --success:#2f6b45; --warm:#8a5a12; --danger:#a3321f;
  --mark:#f5e6ad; --mine:#f6ecd8; --mine-line:#b98a3e; --quote-line:#9cc6bf;
  --chart-bar:#0f8a78; --chart-base:#cfc6b6;
  --shadow:0 1px 2px #2b28240d, 0 6px 20px #2b28240f;
  --menu-shadow:0 14px 40px #2b28241f;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236a6358' stroke-width='1.6'/%3E%3C/svg%3E");
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --serif:"Songti SC","STSong","Noto Serif SC","Noto Serif CJK SC","Source Han Serif SC","Source Han Serif CN",Georgia,serif;
  --radius:14px;
}
@media (prefers-color-scheme:dark) {
  :root {
    --bg:#1a1917; --surface:#22201d; --soft:#2a2824; --ink:#ebe5da; --muted:#a8a094; --line:#38352f; --field:#7a7266;
    --accent:#7cc0b6; --accent-strong:#9ad1c8; --accent-soft:#1f3431; --accent-line:#3d6560; --on-accent:#10211e;
    --success:#82c79c; --warm:#e0b25f; --danger:#f08b79;
    --mark:#4a3f1c; --mine:#33291a; --mine-line:#a57b3a; --quote-line:#3f6d66;
    --chart-bar:#3aa898; --chart-base:#4a463f;
    --shadow:none; --menu-shadow:0 14px 40px #0000008c;
    --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a8a094' stroke-width='1.6'/%3E%3C/svg%3E");
  }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-padding-top:24px; -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.75 var(--sans); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
header.site-header,main,footer.site-footer { max-width:960px; margin:0 auto; padding-left:28px; padding-right:28px; }
.site-header { display:flex; gap:24px; align-items:center; min-height:72px; border-bottom:1px solid var(--line); position:relative; z-index:5; }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-family:var(--serif); font-size:23px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.brand::before { content:""; width:11px; height:11px; border-radius:3px; background:var(--accent); transform:rotate(45deg); flex:none; }
.brand:hover { text-decoration:none; color:var(--accent); }
.primary-nav { display:flex; gap:22px; align-items:center; margin-left:auto; }
.primary-nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); font-size:15px; text-decoration:none; white-space:nowrap; }
.primary-nav a:hover { color:var(--ink); text-decoration:none; }
.primary-nav a[aria-current],.site-menu a[aria-current] { color:var(--accent); font-weight:650; }
.primary-nav a[aria-current] { box-shadow:inset 0 -2px var(--accent); }
.site-menu { position:relative; font-size:15px; }
.site-menu > summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:4px 10px; border-radius:8px; color:var(--muted); cursor:pointer; list-style:none; }
.site-menu > summary::-webkit-details-marker { display:none; }
.site-menu > summary:hover { color:var(--ink); }
.site-menu[open] > summary { background:var(--soft); color:var(--accent); }
.site-menu > nav { position:absolute; right:0; top:calc(100% + 8px); width:280px; padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--menu-shadow); }
.site-menu nav a,.site-menu nav button { display:flex; align-items:center; min-height:44px; width:100%; border:0; border-radius:8px; padding:8px 12px; color:var(--ink); background:none; font:inherit; text-decoration:none; cursor:pointer; text-align:left; }
.site-menu nav a:hover,.site-menu nav button:hover { background:var(--soft); text-decoration:none; }
.site-menu form { margin:0; }
main { padding-top:40px; padding-bottom:72px; min-height:calc(100vh - 180px); }
#main-content { scroll-margin-top:20px; }
.site-footer { display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; border-top:1px solid var(--line); padding-top:22px; padding-bottom:30px; font-size:13px; color:var(--muted); }
.site-footer nav { display:flex; flex-wrap:wrap; gap:8px 18px; }
.site-footer a { color:var(--muted); text-decoration:none; min-height:28px; }
.site-footer a:hover { color:var(--ink); }
a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; display:inline-block; min-height:24px; max-width:100%; }
a:hover { text-decoration:underline; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
.skip-link { position:absolute; top:-100px; left:16px; z-index:20; padding:8px 16px; color:var(--on-accent); background:var(--accent); border-radius:8px; }
.skip-link:focus { top:8px; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
h1,h2,h3 { line-height:1.4; font-weight:650; }
h1,h2 { font-family:var(--serif); font-weight:700; letter-spacing:.01em; }
h1 { font-size:32px; margin:0 0 22px; }
h2 { font-size:22px; margin:32px 0 14px; }
h3 { font-size:17px; margin:22px 0 10px; }
p { margin:12px 0; }
strong { font-weight:650; }
.card,.notice,.segment,blockquote,p,li,h1,h2,h3 { overflow-wrap:anywhere; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin-bottom:26px; }
.page-heading h1 { margin:0; }
.page-heading p { margin:6px 0 0; }
.eyebrow { margin:0 0 6px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.12em; }
.section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin:28px 0 12px; }
.section-heading h2,.section-heading h3 { margin:0; }
.muted,.meta { color:var(--muted); font-size:14px; }
.meta { display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; }
.meta a { color:inherit; }
.panel,.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin:14px 0; box-shadow:var(--shadow); }
.panel > :first-child,.card > :first-child { margin-top:0; }
.panel > :last-child,.card > :last-child { margin-bottom:0; }
.notice { background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:14px 0; }
.error,.errorlist { color:var(--danger); }
.errorlist { padding-left:18px; margin:4px 0; font-size:14px; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.toolbar form { margin:0; }
main button:not(.primary),main a.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:6px 14px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--accent); font:inherit; font-size:14px; line-height:24px; cursor:pointer; margin:3px 6px 3px 0; text-decoration:none; }
main button:not(.primary):hover,main a.button:hover { background:var(--accent-soft); border-color:var(--accent-line); text-decoration:none; }
button.primary,main a.button.primary { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; border:1px solid var(--accent); border-radius:9px; padding:8px 18px; color:var(--on-accent); background:var(--accent); font:inherit; font-size:15px; font-weight:600; line-height:24px; cursor:pointer; text-decoration:none; }
button.primary:hover,main a.button.primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); text-decoration:none; }
button:disabled { cursor:not-allowed; }
button.primary:disabled { background:var(--muted); border-color:var(--muted); color:var(--bg); }
main .toolbar button,main .toolbar a.button { margin:0; }
main button.text-link,.text-link { background:none; border:0; color:var(--accent); padding:2px 0; min-height:28px; margin:0; font-size:14px; text-decoration:underline; text-underline-offset:3px; }
main button.text-link:hover { background:none; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:3px 13px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface); font-size:13px; line-height:24px; text-decoration:none; }
.chip span { font-variant-numeric:tabular-nums; }
.chip:hover { border-color:var(--accent-line); color:var(--ink); text-decoration:none; }
.chip.is-on { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); font-weight:600; }
.badge { display:inline-block; font-size:12px; line-height:22px; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:0 7px; margin-right:5px; vertical-align:1px; }
.status { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.status::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--field); }
.status.is-running::before { background:var(--accent); }
.status.is-waiting::before { background:var(--warm); }
.status.is-paused::before,.status.is-failed::before { background:var(--danger); }
.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:24px 0; }
.stat-grid > div { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.stat-grid dt { color:var(--muted); font-size:13px; }
.stat-grid dd { margin:6px 0 0; font-size:26px; font-weight:650; line-height:1.25; font-variant-numeric:tabular-nums; }
.quote-card { margin:0; padding:16px 18px; border:0; border-left:3px solid var(--quote-line); border-radius:0 12px 12px 0; background:var(--soft); }
.quote-card.is-mine { border-left-color:var(--mine-line); background:var(--mine); }
.quote-card p { margin:0 0 8px; line-height:1.85; }
.quote-card p:last-child { margin-bottom:0; }
.note-list { border-top:1px solid var(--line); }
.note-row { padding:18px 0; border-bottom:1px solid var(--line); }
.details-panel { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:0 16px; margin:16px 0; }
summary { cursor:pointer; min-height:32px; padding:4px 0; }
.details-panel > summary { padding:12px 0; color:var(--ink); font-size:14px; font-weight:550; }
.details-panel[open] { padding-bottom:16px; }
.details-panel[open] > summary { border-bottom:1px solid var(--line); margin-bottom:16px; }
form p { margin:12px 0; }
label { display:block; font-size:14px; margin-bottom:5px; }
input,select,textarea,button { font-family:inherit; }
input:not([type]),input[type=email],input[type=password],input[type=text],input[type=search],input[type=url],input[type=number],textarea { max-width:100%; width:100%; padding:10px 13px; font-size:16px; line-height:1.5; border:1px solid var(--field); border-radius:9px; color:var(--ink); background:var(--surface); }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
textarea { resize:vertical; }
/* A drawn arrow, because Safari ignores a native menu's size and padding; 16px, because iPhones zoom in on smaller fields. */
select { max-width:100%; min-height:40px; padding:6px 30px 6px 11px; font-size:16px; color:var(--ink); border:1px solid var(--field); border-radius:9px; background:var(--surface) var(--select-arrow) no-repeat right 11px center; -webkit-appearance:none; appearance:none; }
input[type=checkbox],input[type=radio] { width:18px; height:18px; accent-color:var(--accent); margin:3px 6px 3px 0; vertical-align:middle; }
fieldset { min-width:0; border:0; padding:0; margin:16px 0; }
legend { font-size:14px; font-weight:600; margin-bottom:8px; }
blockquote { margin:14px 0; padding-left:16px; border-left:3px solid var(--line); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
td,th { border-bottom:1px solid var(--line); padding:10px 8px; text-align:left; }
th { font-weight:550; color:var(--muted); }
.segment { margin:8px 0; padding:8px 4px; border-radius:6px; scroll-margin-top:20px; }
.segment:target { background:var(--accent-soft); }
.segment a { font-variant-numeric:tabular-nums; margin-right:8px; text-decoration:none; }
.segment.hl { background:var(--mark); }
main button.hl-toggle,main button.cite { border:0; background:none; padding:2px 4px; margin:0; min-height:28px; min-width:28px; color:var(--muted); font-size:13px; line-height:24px; }
main button.hl-toggle:hover,main button.cite:hover { background:var(--soft); color:var(--accent); }
/* The mind map (markmap) takes the page's colors, in light and dark; it beats markmap's own .markmap rule. */
svg.mindmap,svg.mindmap.markmap { color:var(--ink); --markmap-text-color:var(--ink); --markmap-circle-open-bg:var(--surface); --markmap-code-bg:var(--soft); --markmap-code-color:var(--ink); --markmap-highlight-bg:var(--mark); --markmap-highlight-node-bg:var(--accent-soft); --markmap-a-color:var(--accent); --markmap-a-hover-color:var(--accent-strong); --markmap-table-border:var(--line); }
.print-only { display:none; }
@media (max-width:560px) {
  header.site-header,main,footer.site-footer { padding-left:18px; padding-right:18px; }
  .site-header { gap:12px; min-height:62px; }
  .brand { font-size:21px; gap:8px; }
  .primary-nav { gap:14px; }
  .primary-nav a,.site-menu { font-size:14px; }
  .site-menu > summary { gap:4px; padding:2px 6px; }
  main { padding-top:28px; padding-bottom:48px; }
  h1 { font-size:27px; }
  h2 { font-size:20px; }
  .page-heading { margin-bottom:20px; }
  .panel,.card { padding:16px; border-radius:12px; }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stat-grid > div { padding:12px 14px; }
  .quote-card { padding:14px 16px; }
  .site-footer { font-size:12px; gap:10px; }
  .site-footer nav { gap:4px 12px; }
}
@media (max-width:360px) { .site-header { gap:7px; } .primary-nav { gap:8px; } .primary-nav a,.site-menu { font-size:13px; } .brand { font-size:19px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
@media print {
  /* Paper is always light, whatever the device's mode. */
  :root { color-scheme:light; --bg:#fff; --surface:#fff; --soft:#f4f4f4; --ink:#000; --muted:#444; --line:#ccc; --field:#888; --shadow:none;
          --accent:#2f6b66; --accent-strong:#23524e; --accent-soft:#e2eeeb; --accent-line:#a9cbc5; --on-accent:#fff;
          --success:#2f6b45; --warm:#8a5a12; --danger:#a3321f; --mark:#f5e6ad; --mine:#f6ecd8; --mine-line:#b98a3e;
          --quote-line:#9cc6bf; --chart-bar:#0f8a78; --chart-base:#cfc6b6; }
  .print-only { display:block; }
  header,footer,nav,form,button,.no-print,.notice,.skip-link { display:none !important; }
  main { max-width:none; min-height:0; padding:0; }
  a { color:inherit; text-decoration:none; }
  .segment { break-inside:avoid; }
}