/* KeepCut's hosted site, in night glass: the look of the promo (demo/src/kit.tsx) and of the
   review page on the Mac (src/studio/styles.css, whose tokens are copied below).
   Black with a deep blue light rising from below, frosted panels with a hairline edge,
   Cabinet Grotesk. Four accent colors each mean one thing: red video, yellow words,
   purple graphics, green done. Anything else stays white or muted; errors are white too,
   so red keeps its one meaning. Night is the default; the toggle switches to a light
   variant with the same type, shapes and accents (kit.js applies a saved choice before
   the page paints).
   Every control is drawn here instead of by the browser. Motion is calm and exact: things
   ease in with a little blur, nothing bounces or loops. */

/* Cabinet Grotesk (Fontshare, ITF Free Font License; see fonts/). Served as downloaded:
   the license does not allow converting or subsetting the files. */
@font-face { font-family: 'Cabinet Grotesk'; src: url('/fonts/CabinetGrotesk-Bold.otf') format('opentype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('/fonts/CabinetGrotesk-Extrabold.otf') format('opentype'); font-weight: 800 900; font-display: swap; }

/* ---------- Tokens (from src/studio/styles.css) ---------- */

:root {
  color-scheme: dark;

  --night-0: light-dark(#a7a0ff, #7c6cff);
  --night-1: light-dark(#bdb7ff, #4a40f0);
  --night-2: light-dark(#d0ccfd, #2a31d8);
  --night-3: light-dark(#dfddfb, #1522a8);
  --night-4: light-dark(#e9e9fa, #0a1060);
  --night-5: light-dark(#f0f1fa, #04062a);
  --night-6: light-dark(#f4f5fb, #000000);
  --tint-a: light-dark(rgb(160 60 255 / .09), rgb(160 60 255 / .18));
  --tint-b: light-dark(rgb(60 80 255 / .07), rgb(60 80 255 / .14));

  --glass: light-dark(rgb(255 255 255 / .62), rgb(255 255 255 / .055));
  --glass-2: light-dark(rgb(255 255 255 / .82), rgb(255 255 255 / .09));
  --glass-3: light-dark(#ffffff, rgb(255 255 255 / .14));
  --well: light-dark(rgb(255 255 255 / .78), rgb(0 0 0 / .26));
  --hover: light-dark(rgb(14 18 90 / .07), rgb(255 255 255 / .12));
  --head: light-dark(rgb(246 247 253 / .7), rgb(7 9 26 / .55));
  --pop: light-dark(#ffffff, #10122b);
  --solid: light-dark(#f6f7fc, #06070f);
  --line: light-dark(rgb(14 18 90 / .12), rgb(255 255 255 / .12));
  --line-2: light-dark(rgb(14 18 90 / .22), rgb(255 255 255 / .2));
  --line-3: light-dark(rgb(14 18 90 / .42), rgb(255 255 255 / .38));
  --edge: light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .14));
  --shadow: light-dark(rgb(20 24 90 / .2), rgb(0 0 0 / .55));
  --bloom: light-dark(rgb(90 77 255 / .35), rgb(255 255 255 / .55));

  --text: light-dark(#0b0b24, #ffffff);
  --muted: light-dark(rgb(22 26 80 / .66), rgb(226 230 255 / .62));
  --dim: light-dark(rgb(22 26 80 / .44), rgb(226 230 255 / .4));
  --ink: light-dark(#0b0b3a, #ffffff);
  --ink-hover: light-dark(#23235c, #dfe2ff);
  --on-ink: light-dark(#ffffff, #0b0b3a);

  --video: #ff453a;
  --words: #ffd60a;
  --graphic: #bf5af2;
  --ready: #30d158;
  --video-ink: light-dark(#cf2a20, #ff453a);
  --words-ink: light-dark(#7d6400, #ffd60a);
  --graphic-ink: light-dark(#8d2fc6, #bf5af2);
  --ready-ink: light-dark(#187a34, #30d158);
  --on-video: #ffffff;
  --on-words: #0b0b14;
  --on-graphic: #ffffff;
  --on-ready: #06210f;
  --accent: var(--ink);
  --accent-ink: var(--text);
  --on-accent: var(--on-ink);

  --scroll: light-dark(rgb(14 18 90 / .2), rgb(255 255 255 / .16));
  --scroll-hover: light-dark(rgb(14 18 90 / .4), rgb(255 255 255 / .32));

  --font: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --r-panel: 18px;
  --r: 10px;
  --r-s: 8px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --io: cubic-bezier(.65, 0, .35, 1);
  --fast: .16s;
  --mid: .28s;
  --slow: .44s;

  /* The site's own measures: a comfortable line, never the whole width of a wide screen */
  --gutter: clamp(16px, 4vw, 40px);
  --wide: 1240px;
  --read: 34rem;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

[data-kind="video"] { --accent: var(--video); --accent-ink: var(--video-ink); --on-accent: var(--on-video); }
[data-kind="words"] { --accent: var(--words); --accent-ink: var(--words-ink); --on-accent: var(--on-words); }
[data-kind="graphic"] { --accent: var(--graphic); --accent-ink: var(--graphic-ink); --on-accent: var(--on-graphic); }
[data-kind="ready"] { --accent: var(--ready); --accent-ink: var(--ready-ink); --on-accent: var(--on-ready); }

/* ---------- Base ---------- */

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night-6); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100%;
  margin: 0;
  background: transparent;
  color: var(--text);
  font: 700 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
/* The light, painted once on its own fixed layer. */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 100% 0%, var(--tint-a), transparent 70%),
    radial-gradient(35% 45% at 0% 10%, var(--tint-b), transparent 70%),
    radial-gradient(120% 80% at 50% 125%, var(--night-0) 0%, var(--night-1) 14%, var(--night-2) 28%, var(--night-3) 42%, var(--night-4) 56%, var(--night-5) 72%, var(--night-6) 90%);
}
/* On a very wide screen the light keeps the shape it has on a laptop instead of flattening out */
@media (min-aspect-ratio: 2/1) {
  body::before {
    background:
      radial-gradient(40% 50% at 100% 0%, var(--tint-a), transparent 70%),
      radial-gradient(35% 45% at 0% 10%, var(--tint-b), transparent 70%),
      radial-gradient(70% 80% at 50% 125%, var(--night-0) 0%, var(--night-1) 14%, var(--night-2) 28%, var(--night-3) 42%, var(--night-4) 56%, var(--night-5) 72%, var(--night-6) 90%);
  }
}
/* The landing page: the light rises as the wordmark writes itself on, like the promo's end card */
:root.lift body::before { animation: lift 1.9s var(--ease) both; }
@keyframes lift { from { transform: translateY(9vh); opacity: .7; } }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
p, h1, h2, h3 { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
img, svg, video { display: block; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--on-ink); }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--scroll); border: 3.5px solid transparent; border-radius: 6px; background-clip: padding-box; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-hover); }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 12.5px; letter-spacing: .005em; }
.nums { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: calc(var(--wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* Caps label, as in the promo */
.label { font: 700 11px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; font-feature-settings: 'case'; color: var(--muted); }
.label--kind { color: var(--accent-ink); }
.h-big { font: 800 clamp(30px, 4.2vw, 52px)/1 var(--font); letter-spacing: -.045em; text-wrap: balance; }
.h-mid { font: 800 clamp(22px, 2.4vw, 30px)/1.06 var(--font); letter-spacing: -.035em; text-wrap: balance; }
.lede { font-size: 16.5px; line-height: 1.45; letter-spacing: .002em; color: var(--muted); text-wrap: pretty; }

/* A small solid tile in a meaning's color with its icon: how a thing says what it is at a glance. */
.tile { --s: 26px; display: grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .28); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 calc(var(--s) * .6) color-mix(in srgb, var(--accent) 33%, transparent); }
.tile svg { width: 62%; height: 62%; }
.ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico .fill { fill: currentColor; }
.tile .ico { width: 62%; height: 62%; stroke-width: 2.1; }

/* Glass */
.glass { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--glass); box-shadow: inset 0 1px 0 var(--edge); }
.glass--frost { -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }

/* ---------- Top bar ---------- */

.top { display: flex; align-items: center; gap: 16px; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.top__home { display: inline-flex; padding: 6px 0; line-height: 0; }
.top__mark { height: 20px; width: auto; }
.top__right { display: flex; align-items: center; gap: 14px; margin-left: auto; min-width: 0; }
.top__who { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
/* The wordmark has a light-on-dark and a dark-on-light drawing */
.mark-light { display: none; }
:root[data-theme="light"] .mark-dark { display: none; }
:root[data-theme="light"] .mark-light { display: block; }

.themebtn { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--fast) ease, box-shadow var(--fast) ease; }
.themebtn i { width: 15px; height: 15px; border: 1.6px solid var(--text); border-radius: 50%; background: linear-gradient(90deg, var(--text) 50%, transparent 50%); transition: transform .7s var(--ease); }
:root:not([data-theme="light"]) .themebtn i { transform: rotate(180deg); }
@media (hover: hover) { .themebtn:hover { background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line-2); } }

/* ---------- Controls ---------- */

.input { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); color: var(--text); transition: border-color var(--fast) ease, box-shadow var(--fast) ease; }
.input::placeholder { color: var(--dim); opacity: 1; }
@media (hover: hover) { .input:hover { border-color: var(--line-2); } }
.input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.input[aria-invalid="true"] { border-color: var(--text); }
textarea.input { display: block; resize: none; field-sizing: content; min-height: 76px; max-height: 40vh; line-height: 1.38; }
.field { display: grid; gap: 7px; min-width: 0; }
.field__l { font-size: 12.5px; letter-spacing: .01em; color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--r); background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background-color var(--fast) ease, color var(--fast) ease, box-shadow var(--fast) ease, transform .1s ease, opacity var(--fast) ease; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .55; }
.btn .ico { width: 16px; height: 16px; stroke-width: 2.1; }
.btn--primary { background: var(--ink); box-shadow: none; color: var(--on-ink); }
.btn--ready { background: var(--ready); box-shadow: 0 0 28px color-mix(in srgb, var(--ready) 30%, transparent); color: var(--on-ready); }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
.btn--small { min-height: 32px; padding: 0 12px; border-radius: var(--r-s); font-size: 12.5px; letter-spacing: .01em; }
.btn--big { min-height: 50px; padding: 0 24px; font-size: 16px; border-radius: 12px; }
@media (hover: hover) {
  .btn:not(.btn--primary):not(.btn--ready):not(:disabled):hover { background: var(--glass-3); box-shadow: inset 0 0 0 1px var(--line-3); }
  .btn--primary:not(:disabled):hover { background: var(--ink-hover); }
  .btn--ready:not(:disabled):hover { background: color-mix(in srgb, var(--ready) 86%, #fff); }
}
/* A done state draws its check on */
.tick { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15; stroke-dashoffset: 15; animation: draw .45s var(--ease) .05s forwards; }

.link { padding: 0; border: 0; background: none; color: var(--muted); font-size: 13.5px; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; transition: color var(--fast) ease, text-decoration-color var(--fast) ease; }
@media (hover: hover) { .link:hover { color: var(--text); text-decoration-color: currentColor; } }

/* Segmented choices with a sliding highlight */
.segs { position: relative; display: inline-flex; padding: 3px; border-radius: 11px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.segs__ind { position: absolute; top: 0; left: 0; border-radius: var(--r-s); background: var(--glass-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-ink) 72%, transparent); pointer-events: none; }
.segs.is-ready .segs__ind { transition: transform var(--slow) var(--ease), width var(--slow) var(--ease), height var(--slow) var(--ease); }
.seg { position: relative; z-index: 1; padding: 7px 13px; border: 0; border-radius: var(--r-s); background: none; color: var(--muted); font-size: 13px; white-space: nowrap; transition: color var(--mid) ease; }
.seg[aria-checked="true"] { color: var(--text); }
.seg:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .seg[aria-checked="false"]:hover { color: var(--text); } }

/* A job's state as a small drawing (from the review page) */
.ring { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ring__track { stroke: var(--line-2); }
.ring__arc { transition: stroke-dashoffset .6s linear; }
.ring__dot { fill: var(--accent-ink); stroke: none; }
.ring[data-state="waiting"] .ring__track, .ring[data-state="paused"] .ring__track { stroke: var(--line-3); stroke-dasharray: 2.4 3.1; }
.ring[data-state="done"] { stroke: var(--ready-ink); }
.ring[data-state="failed"] { stroke: var(--text); }
.bar { display: block; height: 3px; overflow: hidden; border-radius: 1.5px; background: var(--line-2); }
.bar i { display: block; width: 0; height: 100%; border-radius: 1.5px; background: var(--accent); transition: width .6s linear; }
.bar.is-paused i { background: var(--line-3); }

.err { padding-left: 10px; border-left: 2px solid var(--text); color: var(--text); font-weight: 800; text-wrap: pretty; }
.hint { color: var(--muted); font-size: 12.5px; letter-spacing: .005em; text-wrap: pretty; }

.empty { display: grid; justify-items: start; gap: 8px; padding: 22px 0; color: var(--muted); }
.loadbar { position: relative; width: 140px; height: 2px; overflow: hidden; border-radius: 1px; background: var(--line); }
.loadbar::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: 1px; background: var(--ink); animation: load 1.1s var(--ease) infinite; }

/* ---------- The play bar (workspace, and the landing page's small review screen) ---------- */

.pbar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 4px; min-height: 48px; }
.tbtn { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--text); text-decoration: none; transition: background-color var(--fast) ease, transform .1s ease; }
.tbtn:active { transform: scale(.95); }
.tbtn svg { width: 16px; height: 16px; fill: currentColor; }
.tbtn svg.ico { fill: none; }
@media (hover: hover) { .tbtn:hover { background: var(--glass-2); } }
.pbar__time { min-width: 86px; padding: 0 6px 0 2px; font-size: 12.5px; letter-spacing: .01em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pbar__time b { color: var(--text); font-weight: 700; }
/* The timeline: drag to move through the clip, tap to leave a note at that moment */
.track { position: relative; height: 48px; margin: 0 6px; cursor: pointer; touch-action: none; }
.track__rail { position: absolute; top: 30px; right: 0; left: 0; height: 4px; border-radius: 2px; background: var(--line-2); }
.track__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--ink); }
.track__head { position: absolute; top: 24px; left: 0; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 10px color-mix(in srgb, var(--ink) 40%, transparent); transition: transform var(--fast) var(--ease); }
.track.is-drag .track__head { transform: scaleX(1.5); }
/* Notes are words, so their marks are yellow */
.track__note { position: absolute; top: 2px; width: 26px; height: 26px; margin-left: -13px; padding: 0; border: 0; background: none; }
.track__note::before { content: ''; position: absolute; top: 9px; left: 8px; width: 10px; height: 10px; border-radius: 3px 3px 3px 0; background: var(--words); box-shadow: 0 0 10px color-mix(in srgb, var(--words) 55%, transparent); transform: rotate(-45deg); transition: transform var(--mid) var(--ease); }
.track__note::after { content: ''; position: absolute; top: 21px; left: 12px; width: 2px; height: 9px; border-radius: 1px; background: color-mix(in srgb, var(--words) 70%, transparent); }
.track__note.is-on::before { transform: rotate(-45deg) scale(1.3); }
.track__note.is-new::before { animation: flash-mark 2.6s var(--ease); }
.track__hint { position: absolute; top: 4px; left: 0; padding: 3px 7px; border-radius: 6px; background: var(--ink); color: var(--on-ink); font-size: 11.5px; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity .12s ease, transform .2s var(--ease); }
@media (hover: hover) { .track:hover .track__hint { opacity: 1; transform: translate(-50%, 0); } }
.track.is-drag .track__hint { opacity: 1; transform: translate(-50%, 0); }

/* ---------- The "new version" card, notices, the staging mark ---------- */

.toast { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 14px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 12px 12px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: color-mix(in srgb, var(--pop) 82%, transparent); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); box-shadow: inset 0 1px 0 var(--edge), 0 18px 50px var(--shadow); color: var(--text); font-size: 14px; animation: toast-in .5s var(--ease); }
.toast__t { flex: 1; min-width: 0; text-wrap: pretty; }
.toast__t .muted { display: block; font-size: 12.5px; }
.toast__x { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); }
.toast__x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
@media (hover: hover) { .toast__x:hover { background: var(--glass-2); color: var(--text); } }
.toast.is-out { animation: toast-out .25s ease forwards; }
.toast + .toast { bottom: 92px; }

/* Staging: a hairline across the top of the page and one quiet word in its corner */
.staging { position: fixed; top: 0; right: 0; left: 0; z-index: 90; height: 2px; background: repeating-linear-gradient(90deg, var(--line-3) 0 10px, transparent 10px 16px); pointer-events: none; }
.staging span { position: absolute; top: 2px; left: 50%; padding: 2px 8px 3px; border-radius: 0 0 6px 6px; background: var(--solid); box-shadow: 0 0 0 1px var(--line-2); color: var(--muted); font: 800 9.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; transform: translateX(-50%); }

/* A one-time quiet highlight for something that arrived from another device */
.is-new { animation: flash 2.6s var(--ease); }

/* ---------- The wordmark, written on (KC.writeMark) ---------- */

.wm { width: auto; height: 100%; overflow: visible; color: var(--text); }
.wm path { fill: currentColor; fill-opacity: 1; stroke: currentColor; stroke-opacity: 0; stroke-linejoin: round; }
.is-writing .wm path { fill-opacity: 0; stroke-opacity: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: wm-draw var(--dl) var(--io) var(--d0) forwards, wm-ink .3s linear var(--di) forwards, wm-solid .1s linear var(--hit) forwards; }
.is-writing .wm { animation: wm-bloom 1.5s cubic-bezier(.2, .7, .3, 1) var(--hit) backwards; }
@keyframes wm-draw { to { stroke-dashoffset: 0; } }
@keyframes wm-ink { to { fill-opacity: .12; } }
@keyframes wm-solid { from { fill-opacity: .12; stroke-opacity: 1; stroke-dashoffset: 0; } to { fill-opacity: 1; stroke-opacity: 0; stroke-dashoffset: 0; } }
@keyframes wm-bloom { 0% { filter: drop-shadow(0 0 24px var(--bloom)); } 100% { filter: drop-shadow(0 0 0 transparent); } }
/* The four meanings, as the end card's dots */
.dots4 { display: flex; justify-content: center; gap: 18px; }
.dots4 i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); animation: dot-in .33s var(--io) both; animation-delay: calc(var(--dots, 1.73s) + var(--n) * .1s); }
.dots4 i:nth-child(1) { --n: 0; --accent: var(--video); }
.dots4 i:nth-child(2) { --n: 1; --accent: var(--words); }
.dots4 i:nth-child(3) { --n: 2; --accent: var(--graphic); }
.dots4 i:nth-child(4) { --n: 3; --accent: var(--ready); }
@keyframes dot-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Motion ---------- */

@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes enter { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes open-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes flash { from { background-color: color-mix(in srgb, var(--words) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--words-ink) 60%, transparent); } }
@keyframes flash-mark { 0%, 30% { transform: rotate(-45deg) scale(1.45); box-shadow: 0 0 22px var(--words); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

@media (pointer: coarse) {
  .seg { padding: 10px 13px; }
  .tbtn { width: 44px; height: 44px; }
}