/* Eve tokens: copied from ~/eve-screens/eve-prototype-v6.html (:root, dark blocks, base, type, controls, ring). Edit there first, then copy here. */
:root {
  --ground: #FAFAFA;
  --ink: #111111;
  --dim: #666666;
  --hair: color-mix(in srgb, var(--ink) 12%, transparent);
  --field: color-mix(in srgb, var(--ink) 25%, transparent);
  --barfill: color-mix(in srgb, var(--ink) 4%, var(--ground));
  --t5: color-mix(in srgb, var(--ink) 5%, var(--ground));
  --t6: color-mix(in srgb, var(--ink) 6%, var(--ground));
  --t9: color-mix(in srgb, var(--ink) 9%, var(--ground));
  --t10: color-mix(in srgb, var(--ink) 10%, var(--ground));
  --t12: color-mix(in srgb, var(--ink) 12%, var(--ground));
  --t15: color-mix(in srgb, var(--ink) 15%, var(--ground));
  --t18: color-mix(in srgb, var(--ink) 18%, var(--ground));
  --t28: color-mix(in srgb, var(--ink) 28%, var(--ground));
  --t40: color-mix(in srgb, var(--ink) 40%, var(--ground));
  --t60: color-mix(in srgb, var(--ink) 60%, var(--ground));
  --t80: color-mix(in srgb, var(--ink) 80%, var(--ground));
  --scrim: rgba(0, 0, 0, 0.32);
  /* Two widths only: text and forms 720, grids, nav and footer 980. */
  --text: 720px; --wide: 980px;
  /* A grouped list: one filled container, rows split by inset hairlines. */
  --group: #F0F0F0;
  /* Thumbnails are YouTube's content, not Eve's UI. Good videos: one flat still life per tile, seen from the side on a ground line.
     Two hues per tile (background, object) at fixed lightness steps, one ink, one line weight. Junk keeps its own loud colours in both themes. */
  --sb: 26%; --lb: 88%; --lf: 80%; --so: 30%; --l1: 84%; --l2: 70%; --l3: 52%; --lpp: 97%; --ldk: 26%; --lm: 97%; --mo: 1; --art-ink: #3A3F48;
  --th-edge: rgba(0, 0, 0, 0.06);
  --sans: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;
  --move: cubic-bezier(0.32, 0.72, 0, 1);
  --in: cubic-bezier(0.2, 0, 0, 1);
  --out: cubic-bezier(0.4, 0, 1, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0C0C0C; --ink: #EEEEEE; --dim: #999999;
    --scrim: rgba(0, 0, 0, 0.5);
    --group: #1A1A1A;
    --sb: 9%; --lb: 17%; --lf: 22%; --so: 34%; --l1: 76%; --l2: 60%; --l3: 46%; --lpp: 90%; --ldk: 34%; --lm: 84%; --mo: .35; --art-ink: #D5D7DC;
    --th-edge: rgba(255, 255, 255, 0.06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0C0C0C; --ink: #EEEEEE; --dim: #999999;
  --scrim: rgba(0, 0, 0, 0.5);
  --group: #1A1A1A;
  --sb: 9%; --lb: 17%; --lf: 22%; --so: 34%; --l1: 76%; --l2: 60%; --l3: 46%; --lpp: 90%; --ldk: 34%; --lm: 84%; --mo: .35; --art-ink: #D5D7DC;
  --th-edge: rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 18px/27px var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- type ---------- */
/* One scale: hero 56 (site only), section heading 32, page title 30 (Eve's own heading), body 18, small 15, caption 13. */
.hero-h { font-size: 56px; line-height: 59px; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
.sec-h { font-size: 32px; line-height: 38px; font-weight: 650; letter-spacing: -0.015em; text-wrap: balance; }
.h1 { font-size: 30px; line-height: 36px; font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; }
.h2 { font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -0.005em; text-wrap: balance; }
.lede { font-size: 18px; line-height: 27px; color: var(--dim); text-wrap: balance; }
.small { font-size: 15px; line-height: 22px; color: var(--dim); }
.cap { font-size: 13px; line-height: 18px; color: var(--dim); }
.label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--dim); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 24px; border-radius: 22px;
  background: var(--ink); color: var(--ground); border: 1px solid var(--ink);
  font-size: 18px; line-height: 24px; font-weight: 500; white-space: nowrap;
  transition: opacity .2s var(--in), transform .2s var(--move), background-color .2s var(--in), color .2s var(--in), border-color .2s var(--in);
}
.btn:hover { opacity: .86; }
.btn:active { transform: scale(.98); }
.btn.sec { background: transparent; color: var(--ink); border-color: var(--field); }
.btn.sec:hover { opacity: 1; border-color: var(--ink); }
.link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 15px; line-height: 22px; color: var(--dim); transition: color .2s var(--in); }
.link:hover { color: var(--ink); }
.ulink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--field); }
.ulink:hover { text-decoration-color: var(--ink); }

/* ---------- the ring ---------- */
.ring { display: block; overflow: visible; }
.ring circle { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ring .r-faint { opacity: 0; transition: opacity .35s var(--in); }
.ring .r-full { opacity: 1; transform: rotate(-90deg); transform-origin: 22px 22px; transition: opacity .5s var(--in); }
.ring .r-dash { opacity: 0; stroke-dasharray: 3 2.563; transition: opacity .5s var(--in); }
.ring .r-arcg { opacity: 0; transform-origin: 22px 22px; transition: opacity .35s var(--in); }
.ring .r-arc { stroke-dasharray: .25 .75; }
.ring[data-s="looking"] .r-full { opacity: 0; }
.ring[data-s="looking"] .r-faint { opacity: .35; }
.ring[data-s="looking"] .r-arcg { opacity: 1; animation: spin 2.6s linear infinite; }
.ring[data-s="dashed"] .r-full { opacity: 0; }
.ring[data-s="dashed"] .r-dash { opacity: .6; }
.ring[data-s="gone"] .r-full { opacity: 0; transition-duration: .7s; transition-timing-function: var(--out); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ring .r-arcg { animation: none !important; }
  *, *::before, *::after { transition-duration: .15s !important; }
}
.mini circle { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.mini.dashed circle { stroke-dasharray: 2.4 2.153; opacity: .6; }

.nw { white-space: nowrap; }
.sel { user-select: all; -webkit-user-select: all; }