@font-face { font-family:'Reader Serif'; src:local('Georgia'); font-display:swap; }

:root,body {
  color-scheme:light;
  --bg:var(--sand-2);
  --sidebar:var(--sand-3);
  --surface:var(--sand-1);
  --text:var(--sand-12);
  --muted:var(--sand-11);
  --line:var(--sand-6);
  --accent:var(--tomato-11);
  --accent-hover:var(--tomato-12);
  --accent-soft:var(--tomato-3);
  --selected:var(--sand-4);
  --green:var(--olive-11);
  --on-accent:var(--sand-1);
  --shadow:var(--shadow-4);
}
:root {
  --font-interface:var(--font-neo-grotesque),Arial,sans-serif;
  --font-editorial:'Reader Serif',Georgia,'Times New Roman',serif;
  --reader-font:var(--font-editorial);
  --reader-size:21px;
  --control-radius:var(--radius-2);
  --panel-radius:var(--radius-3);
}
body[data-theme='dark'] {
  color-scheme:dark;
  --bg:var(--sand-1);
  --sidebar:var(--sand-2);
  --surface:var(--sand-2);
  --accent:var(--tomato-11);
  --accent-hover:var(--tomato-12);
  --on-accent:var(--sand-1);
  --shadow-strength:10%;
}
body[data-theme='sepia'] {
  --bg:var(--bronze-3);
  --sidebar:var(--bronze-4);
  --surface:var(--bronze-2);
  --line:var(--bronze-6);
  --selected:var(--bronze-5);
  --text:var(--bronze-12);
  --muted:var(--bronze-11);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--size-8); }
body { margin:0; font-family:var(--font-interface); color:var(--text); background:var(--bg); font-size:var(--font-size-1); line-height:var(--font-lineheight-3); -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color:transparent; }
button { border:0; background:none; cursor:pointer; color:inherit; }
button:disabled { opacity:.4; cursor:default; }
a { color:inherit; text-decoration:none; }
a,button,input,select,textarea { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--tomato-8); outline-offset:4px; }
svg { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
[hidden] { display:none!important; }
::selection { color:var(--text); background:var(--tomato-5); }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:30px; font-weight:750; letter-spacing:-1.5px; line-height:1; }
.brand img { width:34px; height:34px; }
.brand-dot { color:var(--accent); }
.eyebrow { font-size:12px; font-weight:550; letter-spacing:1.5px; color:var(--muted); }
.icon-button { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--control-radius); padding:10px; color:var(--muted); flex-shrink:0; }
.icon-button:hover { background:var(--selected); color:var(--text); }
.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:var(--size-2); min-height:48px; border-radius:var(--control-radius); padding:12px 22px; font-size:14px; font-weight:550; line-height:1.4; }
.primary-button { background:var(--accent); color:var(--on-accent); }
.primary-button:hover { background:var(--accent-hover); }
.secondary-button { border:1px solid var(--line); background:var(--surface); }
.secondary-button:hover { background:var(--selected); }
.text-action { display:inline-flex; align-items:center; gap:6px; padding:8px 0; font-size:13px; color:var(--muted); }
.text-action:hover { color:var(--accent); }
.text-action svg { width:16px; height:16px; }
.plain-button { color:var(--muted); padding:8px 0; }
.plain-button:hover { color:var(--accent); }
.status-dot,.tiny-dot { display:inline-block; width:6px; height:6px; background:var(--green); border-radius:var(--radius-round); flex-shrink:0; }
.skip-link { position:fixed; top:12px; left:12px; z-index:30; transform:translateY(-200%); padding:12px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--control-radius); }
.skip-link:focus { transform:none; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }