:root {
  color-scheme: light;
  --color-bg: #fff;
  --color-text: #15171a;
  --color-accent: #f04422;
  --color-muted: #667085;
  --color-subtle: #f2f4f7;
  --color-rule: #d9dde3;
  --color-new-bg: #fff1ec;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --tap: 2.75rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  background: var(--color-bg);
  color: var(--color-text);
}
* { box-sizing: border-box; }
html { background: var(--color-subtle); }
body { margin: 0 auto; min-height: 100dvh; max-width: 48rem; background: var(--color-bg); font-size: 15px; line-height: 1.4; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: 2px; }
button, input, select { font: inherit; }
button, .button { min-height: var(--tap); border: 1px solid var(--color-rule); border-radius: .5rem; background: #fff; color: var(--color-text); padding: .6rem .85rem; }
.button-accent { border-color: var(--color-accent); color: var(--color-accent); }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 10; transform: translateY(-200%); background: #fff; padding: .5rem; }
.skip-link:focus { transform: none; }
.app-header { min-height: 3.5rem; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--color-rule); padding: 0 var(--space-4); position: relative; }
.app-header__back { position: absolute; left: var(--space-4); color: var(--color-accent); }
.app-brand { font-size: 14px; font-weight: 600; text-decoration: none; }
main { padding: var(--space-4) var(--space-4) 6rem; }
h1 { margin: 0 0 var(--space-3); font-size: 24px; line-height: 29px; }
h2 { margin: var(--space-5) 0 var(--space-2); font-size: 13px; line-height: 18px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .02em; }
.meta { color: var(--color-muted); font-size: 12px; line-height: 16px; }
.accent { color: var(--color-accent); }
.segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; background: var(--color-subtle); border-radius: .5rem; margin-bottom: var(--space-4); }
.segments a { display: grid; min-height: 2rem; place-items: center; border-radius: .4rem; font-size: 13px; font-weight: 600; text-decoration: none; }
.segments [aria-current="page"] { background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 8%); }
.boundary { margin: var(--space-5) 0 0; padding: 0 0 var(--space-1); border-bottom: 2px solid var(--color-accent); color: var(--color-accent); font-size: 12px; font-weight: 700; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--color-rule); padding: var(--space-3) 0; }
.row__title { margin: 0; font-size: 16px; line-height: 21px; font-weight: 650; }
.row__meta { display: flex; flex-wrap: wrap; gap: .25rem .45rem; margin-top: .2rem; color: var(--color-muted); font-size: 12px; }
.row--new { background: var(--color-new-bg); box-shadow: -1rem 0 0 var(--color-new-bg); }
.new-label { color: var(--color-accent); font-size: 11px; font-weight: 700; }
.context { margin-top: var(--space-3); padding: var(--space-3); background: var(--color-subtle); border-radius: .5rem; }
.context + .context { border-top: 1px solid var(--color-rule); }
.comment-tree, .comment-tree ol { list-style: none; margin: 0; padding-left: 0; }
.comment-tree ol { margin-left: min(1rem, 4vw); padding-left: .75rem; border-left: 1px solid var(--color-rule); }
.comment { padding: var(--space-3) 0; }
.comment details > summary { cursor: pointer; list-style-position: outside; }
.comment--new { border-left: 3px solid var(--color-accent); padding-left: var(--space-3); }
.comment--watched { background: var(--color-new-bg); }
.comment p { margin: .35rem 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.actions form { display: inline; }
.external-action { display: flex; min-height: var(--tap); align-items: center; justify-content: center; color: var(--color-accent); font-weight: 600; }
.site-note { margin: var(--space-6) 0 0; color: var(--color-muted); font-size: 11px; text-align: center; }
.settings { margin: 0 calc(-1 * var(--space-4)); }
.settings .row { display: flex; justify-content: space-between; gap: 1rem; min-height: var(--tap); padding-left: var(--space-4); padding-right: var(--space-4); align-items: center; }
.bottom-nav { position: fixed; z-index: 5; bottom: 0; left: 50%; width: min(100%, 48rem); transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-rule); background: rgb(255 255 255 / 96%); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { display: grid; min-height: 3.5rem; place-items: center; align-content: center; gap: .15rem; color: var(--color-muted); font-size: 11px; text-decoration: none; }
.bottom-nav a[aria-current="page"] { color: var(--color-accent); }
.bottom-nav svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.status-banner { border: 1px solid var(--color-accent); color: var(--color-accent); padding: var(--space-3); margin-bottom: var(--space-4); }
.live-state { min-height: 0; text-align: center; }
.live-state__notice { display: block; padding: .45rem var(--space-4); background: var(--color-new-bg); color: var(--color-accent); font-size: 12px; font-weight: 700; }
.trajectory { display: block; width: 100%; height: auto; margin: var(--space-5) 0 var(--space-2); overflow: visible; }
.trajectory__grid { fill: none; stroke: var(--color-rule); stroke-width: 1; }
.trajectory__line { fill: none; stroke: var(--color-accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
.history-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--color-rule); }
.history-stats div { background: var(--color-bg); padding: var(--space-2); }
.history-stats dt { color: var(--color-muted); font-size: 11px; text-transform: uppercase; }
.history-stats dd { margin: .1rem 0 0; font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 48rem) {
  body { border-left: 1px solid var(--color-rule); border-right: 1px solid var(--color-rule); }
  main { padding-left: 2rem; padding-right: 2rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }