/* Prozorro AI — «Папір і космос».
   By day the app is warm paper drawn on with a marker; by night it is a starry cosmos drawn in chalk.
   An outline is a ring over an element's edge run through the #sketch filters in index.html, so every
   box wobbles like a hand-drawn one while its text stays crisp. Inputs, which can't carry a ring, get a
   hand-drawn 9-slice frame instead. Colour comes as highlighter fills with pencil hatching. The moving
   parts live in motion.js (transitions, stars, sparkles) and art.js (the spark and the drawings), and
   everything here that moves sits in the motion layer at the end, which reduced motion switches off.
   Type is the system's own grotesk, so nothing comes from the internet. */

/* ---------- tokens: paper ---------- */
:root {
  --cosmos: 0; /* motion.js draws the stars only where this is 1 */
  --paper: #efebe3;
  --paper-deep: #e4ded2;
  --sheet: #fbf9f4;
  --sheet-2: #f4f0e8;
  --sheet-3: #ebe6dc;
  --ink: #1d1b22;
  --ink-2: #3a3641;
  --muted: #5b5563;
  --faint: #68626f;
  --pencil: rgba(29, 27, 34, .15);
  --pencil-2: rgba(29, 27, 34, .3);
  --outline: #1d1b22;
  --outline-soft: rgba(29, 27, 34, .5);
  --key: rgba(29, 27, 34, .3); /* the hard shadow under a key-like button */
  --key-strong: rgba(29, 27, 34, .8);
  --input-bg: #fbf9f4;
  --doc-plain: #e4ded2; /* a file type without its own colour */
  --on-fill: #1d1b22; /* text on a highlighter fill, in both themes */

  --coral: #e07250; --coral-s: #b9482a; --coral-ink: #a8401f; --coral-t: #f6cdbd;
  --mint: #86e8a8; --mint-s: #22a55a; --mint-ink: #146b3a; --mint-t: #c4f2d3;
  --sky: #93c2fb; --sky-s: #2e5bdb; --sky-ink: #1e3fa6; --sky-t: #d2e5fd;
  --pink: #f5a6d2; --pink-s: #d02a74; --pink-ink: #9a1d55; --pink-t: #fbd9eb;
  --sun: #f6cf5e; --sun-s: #d69a0e; --sun-ink: #6e4c00; --sun-t: #fbe9b2;
  --violet: #bba2f4; --violet-s: #7a47d6; --violet-ink: #5a2fb0; --violet-t: #e3d8fb;
  --red: #f7afa6; --red-s: #d63a3a; --red-ink: #9e2424; --red-t: #fbd6d0;
  --cream: #f3ebdd;
  /* a tint's text: ink on paper, the hue's own light ink in the dark */
  --mint-on: var(--ink); --sky-on: var(--ink); --pink-on: var(--ink); --sun-on: var(--ink); --violet-on: var(--ink); --red-on: var(--ink); --coral-on: var(--ink);

  /* what a status means, in colour (app.js reads these names) */
  --go: var(--mint-s); --info: var(--sky-s); --warn: var(--sun-s); --bad: var(--red-s); --brand: var(--sky-s); --purple: var(--violet-s);
  --star: #e3a008;

  --hatch: repeating-linear-gradient(-62deg, transparent 0 6px, rgba(255, 255, 255, .42) 6px 7.4px, transparent 7.4px 12px);
  --hatch-soft: repeating-linear-gradient(-62deg, transparent 0 7px, rgba(255, 255, 255, .26) 7px 8.2px, transparent 8.2px 14px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .1 0 0 0 0 .13 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  --clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .47 0 0 0 0 .4 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23c)'/%3E%3C/svg%3E");
  --page-art: var(--grain), var(--clouds);
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M12.5 2.2C24 1.4 40 2.6 51.8 1.9C58.6 2.1 62 5.6 61.8 12.4C62.3 21 61.4 28.5 61.9 35.4C62.1 42.4 58.4 46.2 51.6 45.9C39 46.6 25.5 45.4 12.2 46.1C5.4 45.8 2.1 42.3 2.3 35.6C1.8 27 2.6 19.6 2.1 12.7C2.2 5.6 5.9 2.3 12.5 2.2Z' fill='%23FBF9F4' stroke='%231D1B22' stroke-width='2.1' stroke-linejoin='round'/%3E%3Cpath d='M50 2.4C55 2.2 58.5 3.3 60.2 6.8' fill='none' stroke='%231D1B22' stroke-width='1.2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  --frame-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M12.5 2.2C24 1.4 40 2.6 51.8 1.9C58.6 2.1 62 5.6 61.8 12.4C62.3 21 61.4 28.5 61.9 35.4C62.1 42.4 58.4 46.2 51.6 45.9C39 46.6 25.5 45.4 12.2 46.1C5.4 45.8 2.1 42.3 2.3 35.6C1.8 27 2.6 19.6 2.1 12.7C2.2 5.6 5.9 2.3 12.5 2.2Z' fill='%23FBF9F4' stroke='%232E5BDB' stroke-width='2.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1.6 2.4C3.8 4.3 5.4 6.2 7.1 8.1C8.9 6 10.6 4 12.5 1.9' fill='none' stroke='%231D1B22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%2322A55A'/%3E%3Cstop offset='.36' stop-color='%232E5BDB'/%3E%3Cstop offset='.7' stop-color='%237A47D6'/%3E%3Cstop offset='1' stop-color='%23D02A74'/%3E%3C/linearGradient%3E%3Cpath d='M3 9C11 3 19 2 27 8S43 15 51 8 67 1 75 8 91 15 99 8 115 1 123 8 139 15 147 8 163 1 171 8 187 14 197 7' fill='none' stroke='url(%23g)' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cg stroke='%231D1B22' stroke-width='2.2' stroke-linecap='round' opacity='.16'%3E%3Cpath d='M3 12v4M9 8v12M15 11v6M21 5v18M27 9v10M33 12v4M39 7v14M45 10v8M51 3v22M57 9v10M63 12v4M69 6v16M75 10v8M81 4v20M87 9v10M93 12v4M99 7v14M105 10v8M111 6v16M117 11v6'/%3E%3C/g%3E%3C/svg%3E");

  /* hand-drawn frames, 9-sliced so corners keep their shape at any size (soft pencil, full ink, always-dark ink) */
  --fr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M15.1 2.4C27 1.8 39.6 2.7 48.7 2.2C57.4 2.2 61.8 6.6 61.6 15C62.1 26 61.4 38.5 61.8 48.8C61.9 57.4 57.4 61.8 48.9 61.6C38 62.2 26.4 61.3 15.2 61.9C6.7 61.7 2.3 57.3 2.4 48.9C1.9 38 2.6 26.6 2.1 15.4C2.2 6.8 6.6 2.6 15.1 2.4Z' fill='none' stroke='%23A39EA8' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fr-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M15.1 2.4C27 1.8 39.6 2.7 48.7 2.2C57.4 2.2 61.8 6.6 61.6 15C62.1 26 61.4 38.5 61.8 48.8C61.9 57.4 57.4 61.8 48.9 61.6C38 62.2 26.4 61.3 15.2 61.9C6.7 61.7 2.3 57.3 2.4 48.9C1.9 38 2.6 26.6 2.1 15.4C2.2 6.8 6.6 2.6 15.1 2.4Z' fill='none' stroke='%231D1B22' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fr-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M15.1 2.4C27 1.8 39.6 2.7 48.7 2.2C57.4 2.2 61.8 6.6 61.6 15C62.1 26 61.4 38.5 61.8 48.8C61.9 57.4 57.4 61.8 48.9 61.6C38 62.2 26.4 61.3 15.2 61.9C6.7 61.7 2.3 57.3 2.4 48.9C1.9 38 2.6 26.6 2.1 15.4C2.2 6.8 6.6 2.6 15.1 2.4Z' fill='none' stroke='%231D1B22' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fr2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M14.4 2.8C26.6 2.1 39.9 2.9 49.5 2.4C57.8 2.6 61.5 6.2 61.9 14.3C61.6 25.9 62.2 38.3 61.7 49.6C61.6 57.7 57.8 61.4 49.8 61.8C38.4 61.3 25.9 62.1 14.1 61.6C6.2 61.9 2.6 58 2.2 50.1C2.6 38.6 1.9 25.8 2.5 13.9C2.3 6.3 6.2 2.7 14.4 2.8Z' fill='none' stroke='%23A39EA8' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fr2-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M14.4 2.8C26.6 2.1 39.9 2.9 49.5 2.4C57.8 2.6 61.5 6.2 61.9 14.3C61.6 25.9 62.2 38.3 61.7 49.6C61.6 57.7 57.8 61.4 49.8 61.8C38.4 61.3 25.9 62.1 14.1 61.6C6.2 61.9 2.6 58 2.2 50.1C2.6 38.6 1.9 25.8 2.5 13.9C2.3 6.3 6.2 2.7 14.4 2.8Z' fill='none' stroke='%231D1B22' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M12 2.3C20 1.8 28 2.6 35.8 2.1C42.4 2.2 45.8 5.4 45.6 11.9C45.9 19.6 45.4 28.4 45.8 36.1C45.9 42.6 42.5 45.8 36 45.6C28.2 46.1 19.8 45.4 12.1 45.9C5.6 45.7 2.2 42.4 2.4 35.9C2 28.3 2.6 19.8 2.2 12.2C2.3 5.5 5.6 2.4 12 2.3Z' fill='none' stroke='%23A39EA8' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frs-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M12 2.3C20 1.8 28 2.6 35.8 2.1C42.4 2.2 45.8 5.4 45.6 11.9C45.9 19.6 45.4 28.4 45.8 36.1C45.9 42.6 42.5 45.8 36 45.6C28.2 46.1 19.8 45.4 12.1 45.9C5.6 45.7 2.2 42.4 2.4 35.9C2 28.3 2.6 19.8 2.2 12.2C2.3 5.5 5.6 2.4 12 2.3Z' fill='none' stroke='%231D1B22' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frs-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M12 2.3C20 1.8 28 2.6 35.8 2.1C42.4 2.2 45.8 5.4 45.6 11.9C45.9 19.6 45.4 28.4 45.8 36.1C45.9 42.6 42.5 45.8 36 45.6C28.2 46.1 19.8 45.4 12.1 45.9C5.6 45.7 2.2 42.4 2.4 35.9C2 28.3 2.6 19.8 2.2 12.2C2.3 5.5 5.6 2.4 12 2.3Z' fill='none' stroke='%231D1B22' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M16 2.2C28 1.6 37 2.6 48 2C56.6 2.2 61.9 8.4 61.7 16.2C61.9 24 56.2 30.1 48.2 29.9C37 30.5 27.6 29.6 15.8 30.1C7.6 29.9 2.2 23.8 2.4 15.8C2.1 8.2 7.8 2.4 16 2.2Z' fill='none' stroke='%23A39EA8' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frp-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M16 2.2C28 1.6 37 2.6 48 2C56.6 2.2 61.9 8.4 61.7 16.2C61.9 24 56.2 30.1 48.2 29.9C37 30.5 27.6 29.6 15.8 30.1C7.6 29.9 2.2 23.8 2.4 15.8C2.1 8.2 7.8 2.4 16 2.2Z' fill='none' stroke='%231D1B22' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frp-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M16 2.2C28 1.6 37 2.6 48 2C56.6 2.2 61.9 8.4 61.7 16.2C61.9 24 56.2 30.1 48.2 29.9C37 30.5 27.6 29.6 15.8 30.1C7.6 29.9 2.2 23.8 2.4 15.8C2.1 8.2 7.8 2.4 16 2.2Z' fill='none' stroke='%231D1B22' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64' viewBox='0 0 128 64'%3E%3Cpath d='M32 2.6C52 1.8 76 2.8 96 2.2C113.5 2.4 125.8 15 125.6 32.2C125.9 49.4 113.2 61.8 96.2 61.6C76 62.2 52.2 61.3 31.8 61.9C14.6 61.6 2.2 49.2 2.4 31.8C2.1 15.1 14.8 2.4 32 2.6Z' fill='none' stroke='%231D1B22' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frb-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64' viewBox='0 0 128 64'%3E%3Cpath d='M32 2.6C52 1.8 76 2.8 96 2.2C113.5 2.4 125.8 15 125.6 32.2C125.9 49.4 113.2 61.8 96.2 61.6C76 62.2 52.2 61.3 31.8 61.9C14.6 61.6 2.2 49.2 2.4 31.8C2.1 15.1 14.8 2.4 32 2.6Z' fill='none' stroke='%232E5BDB' stroke-width='2.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rule-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C60 2.2 120 4.2 200 3C280 2 340 4 399 2.9' fill='none' stroke='%23B9B4BC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --rule-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 400' preserveAspectRatio='none'%3E%3Cpath d='M3.4 1C2.2 60 4.2 120 3 200C2 280 4 340 2.9 399' fill='none' stroke='%23B9B4BC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --shadow-1: 0 2px 0 rgba(29, 27, 34, .06), 0 9px 18px -12px rgba(29, 27, 34, .34);
  --shadow-2: 0 3px 0 rgba(29, 27, 34, .08), 0 18px 30px -16px rgba(29, 27, 34, .44);
  --shadow-3: 0 5px 0 rgba(29, 27, 34, .08), 0 30px 64px -24px rgba(29, 27, 34, .56);
  --glow: 0 0 0 transparent;
  --scrim: rgba(29, 27, 34, .3);

  --r-xl: 16px; --r-lg: 15px; --r: 14px; --r-sm: 10px; --r-xs: 7px;
  --wonky: 15px;
  --wonky-sm: 11px;
  --stroke: 2.2px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --t1: 140ms; --t2: 240ms; --t3: 320ms; --t4: 520ms;
  --side: 264px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* ---------- tokens: cosmos (the same block twice: chosen, or the system's when "auto") ---------- */
:root[data-theme="dark"] {
  --cosmos: 1;
  --paper: #0e0b26; --paper-deep: #090719; --sheet: #1f1946; --sheet-2: #282156; --sheet-3: #312a64;
  --ink: #f1eef8; --ink-2: #d9d4ea; --muted: #bdb6d6; --faint: #a39cc0;
  --pencil: rgba(236, 232, 245, .14); --pencil-2: rgba(236, 232, 245, .28);
  --outline: rgba(236, 232, 245, .62); --outline-soft: rgba(236, 232, 245, .34); --key: rgba(3, 2, 12, .7); --key-strong: rgba(3, 2, 12, .85); --on-fill: #0e0b26; --input-bg: #282156; --doc-plain: #c9c3de;
  --coral: #ff8a63; --coral-s: #ffb394; --coral-ink: #ffb394; --coral-t: rgba(255, 138, 99, .2);
  --mint: #3fd487; --mint-s: #7df5b5; --mint-ink: #a6f7cb; --mint-t: rgba(63, 212, 135, .2);
  --sky: #5b8cff; --sky-s: #9dbbff; --sky-ink: #c3d5ff; --sky-t: rgba(91, 140, 255, .22);
  --pink: #f062b0; --pink-s: #ff9ad5; --pink-ink: #ffc2e6; --pink-t: rgba(240, 98, 176, .22);
  --sun: #f2b83a; --sun-s: #ffd873; --sun-ink: #ffe3a0; --sun-t: rgba(242, 184, 58, .2);
  --violet: #8d63f0; --violet-s: #c1a6ff; --violet-ink: #d9cbff; --violet-t: rgba(141, 99, 240, .26);
  --red: #e8594f; --red-s: #ff9a90; --red-ink: #ffc4be; --red-t: rgba(232, 89, 79, .22);
  --cream: #3a2f6e;
  --mint-on: var(--mint-ink); --sky-on: var(--sky-ink); --pink-on: var(--pink-ink); --sun-on: var(--sun-ink); --violet-on: var(--violet-ink); --red-on: var(--red-ink); --coral-on: var(--coral-ink);
  --star: #ffd873;
  --hatch: repeating-linear-gradient(-62deg, transparent 0 6px, rgba(255, 255, 255, .2) 6px 7.4px, transparent 7.4px 12px);
  --hatch-soft: repeating-linear-gradient(-62deg, transparent 0 7px, rgba(255, 255, 255, .1) 7px 8.2px, transparent 8.2px 14px);
  --page-art: radial-gradient(ellipse 70% 55% at 52% 30%, rgba(108, 76, 210, .32), transparent 70%), radial-gradient(ellipse 50% 40% at 12% 88%, rgba(240, 98, 176, .12), transparent 70%), radial-gradient(ellipse 45% 35% at 92% 70%, rgba(91, 140, 255, .12), transparent 70%), linear-gradient(180deg, #120e30, #0b0920);
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M12.5 2.2C24 1.4 40 2.6 51.8 1.9C58.6 2.1 62 5.6 61.8 12.4C62.3 21 61.4 28.5 61.9 35.4C62.1 42.4 58.4 46.2 51.6 45.9C39 46.6 25.5 45.4 12.2 46.1C5.4 45.8 2.1 42.3 2.3 35.6C1.8 27 2.6 19.6 2.1 12.7C2.2 5.6 5.9 2.3 12.5 2.2Z' fill='%23282156' stroke='%23CDC6E6' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frame-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M12.5 2.2C24 1.4 40 2.6 51.8 1.9C58.6 2.1 62 5.6 61.8 12.4C62.3 21 61.4 28.5 61.9 35.4C62.1 42.4 58.4 46.2 51.6 45.9C39 46.6 25.5 45.4 12.2 46.1C5.4 45.8 2.1 42.3 2.3 35.6C1.8 27 2.6 19.6 2.1 12.7C2.2 5.6 5.9 2.3 12.5 2.2Z' fill='%23282156' stroke='%239DBBFF' stroke-width='2.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1.6 2.4C3.8 4.3 5.4 6.2 7.1 8.1C8.9 6 10.6 4 12.5 1.9' fill='none' stroke='%23F1EEF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%237DF5B5'/%3E%3Cstop offset='.36' stop-color='%239DBBFF'/%3E%3Cstop offset='.7' stop-color='%23C1A6FF'/%3E%3Cstop offset='1' stop-color='%23FF9AD5'/%3E%3C/linearGradient%3E%3Cpath d='M3 9C11 3 19 2 27 8S43 15 51 8 67 1 75 8 91 15 99 8 115 1 123 8 139 15 147 8 163 1 171 8 187 14 197 7' fill='none' stroke='url(%23g)' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cg stroke='%230E0B26' stroke-width='2.2' stroke-linecap='round' opacity='.22'%3E%3Cpath d='M3 12v4M9 8v12M15 11v6M21 5v18M27 9v10M33 12v4M39 7v14M45 10v8M51 3v22M57 9v10M63 12v4M69 6v16M75 10v8M81 4v20M87 9v10M93 12v4M99 7v14M105 10v8M111 6v16M117 11v6'/%3E%3C/g%3E%3C/svg%3E");
  --fr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M15.1 2.4C27 1.8 39.6 2.7 48.7 2.2C57.4 2.2 61.8 6.6 61.6 15C62.1 26 61.4 38.5 61.8 48.8C61.9 57.4 57.4 61.8 48.9 61.6C38 62.2 26.4 61.3 15.2 61.9C6.7 61.7 2.3 57.3 2.4 48.9C1.9 38 2.6 26.6 2.1 15.4C2.2 6.8 6.6 2.6 15.1 2.4Z' fill='none' stroke='%235A538C' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fr-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M15.1 2.4C27 1.8 39.6 2.7 48.7 2.2C57.4 2.2 61.8 6.6 61.6 15C62.1 26 61.4 38.5 61.8 48.8C61.9 57.4 57.4 61.8 48.9 61.6C38 62.2 26.4 61.3 15.2 61.9C6.7 61.7 2.3 57.3 2.4 48.9C1.9 38 2.6 26.6 2.1 15.4C2.2 6.8 6.6 2.6 15.1 2.4Z' fill='none' stroke='%23CFC9E6' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fr-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M15.1 2.4C27 1.8 39.6 2.7 48.7 2.2C57.4 2.2 61.8 6.6 61.6 15C62.1 26 61.4 38.5 61.8 48.8C61.9 57.4 57.4 61.8 48.9 61.6C38 62.2 26.4 61.3 15.2 61.9C6.7 61.7 2.3 57.3 2.4 48.9C1.9 38 2.6 26.6 2.1 15.4C2.2 6.8 6.6 2.6 15.1 2.4Z' fill='none' stroke='%230E0B26' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fr2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M14.4 2.8C26.6 2.1 39.9 2.9 49.5 2.4C57.8 2.6 61.5 6.2 61.9 14.3C61.6 25.9 62.2 38.3 61.7 49.6C61.6 57.7 57.8 61.4 49.8 61.8C38.4 61.3 25.9 62.1 14.1 61.6C6.2 61.9 2.6 58 2.2 50.1C2.6 38.6 1.9 25.8 2.5 13.9C2.3 6.3 6.2 2.7 14.4 2.8Z' fill='none' stroke='%235A538C' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fr2-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M14.4 2.8C26.6 2.1 39.9 2.9 49.5 2.4C57.8 2.6 61.5 6.2 61.9 14.3C61.6 25.9 62.2 38.3 61.7 49.6C61.6 57.7 57.8 61.4 49.8 61.8C38.4 61.3 25.9 62.1 14.1 61.6C6.2 61.9 2.6 58 2.2 50.1C2.6 38.6 1.9 25.8 2.5 13.9C2.3 6.3 6.2 2.7 14.4 2.8Z' fill='none' stroke='%23CFC9E6' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M12 2.3C20 1.8 28 2.6 35.8 2.1C42.4 2.2 45.8 5.4 45.6 11.9C45.9 19.6 45.4 28.4 45.8 36.1C45.9 42.6 42.5 45.8 36 45.6C28.2 46.1 19.8 45.4 12.1 45.9C5.6 45.7 2.2 42.4 2.4 35.9C2 28.3 2.6 19.8 2.2 12.2C2.3 5.5 5.6 2.4 12 2.3Z' fill='none' stroke='%235A538C' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frs-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M12 2.3C20 1.8 28 2.6 35.8 2.1C42.4 2.2 45.8 5.4 45.6 11.9C45.9 19.6 45.4 28.4 45.8 36.1C45.9 42.6 42.5 45.8 36 45.6C28.2 46.1 19.8 45.4 12.1 45.9C5.6 45.7 2.2 42.4 2.4 35.9C2 28.3 2.6 19.8 2.2 12.2C2.3 5.5 5.6 2.4 12 2.3Z' fill='none' stroke='%23CFC9E6' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frs-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M12 2.3C20 1.8 28 2.6 35.8 2.1C42.4 2.2 45.8 5.4 45.6 11.9C45.9 19.6 45.4 28.4 45.8 36.1C45.9 42.6 42.5 45.8 36 45.6C28.2 46.1 19.8 45.4 12.1 45.9C5.6 45.7 2.2 42.4 2.4 35.9C2 28.3 2.6 19.8 2.2 12.2C2.3 5.5 5.6 2.4 12 2.3Z' fill='none' stroke='%230E0B26' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M16 2.2C28 1.6 37 2.6 48 2C56.6 2.2 61.9 8.4 61.7 16.2C61.9 24 56.2 30.1 48.2 29.9C37 30.5 27.6 29.6 15.8 30.1C7.6 29.9 2.2 23.8 2.4 15.8C2.1 8.2 7.8 2.4 16 2.2Z' fill='none' stroke='%235A538C' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frp-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M16 2.2C28 1.6 37 2.6 48 2C56.6 2.2 61.9 8.4 61.7 16.2C61.9 24 56.2 30.1 48.2 29.9C37 30.5 27.6 29.6 15.8 30.1C7.6 29.9 2.2 23.8 2.4 15.8C2.1 8.2 7.8 2.4 16 2.2Z' fill='none' stroke='%23CFC9E6' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frp-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M16 2.2C28 1.6 37 2.6 48 2C56.6 2.2 61.9 8.4 61.7 16.2C61.9 24 56.2 30.1 48.2 29.9C37 30.5 27.6 29.6 15.8 30.1C7.6 29.9 2.2 23.8 2.4 15.8C2.1 8.2 7.8 2.4 16 2.2Z' fill='none' stroke='%230E0B26' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64' viewBox='0 0 128 64'%3E%3Cpath d='M32 2.6C52 1.8 76 2.8 96 2.2C113.5 2.4 125.8 15 125.6 32.2C125.9 49.4 113.2 61.8 96.2 61.6C76 62.2 52.2 61.3 31.8 61.9C14.6 61.6 2.2 49.2 2.4 31.8C2.1 15.1 14.8 2.4 32 2.6Z' fill='none' stroke='%23CFC9E6' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --frb-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64' viewBox='0 0 128 64'%3E%3Cpath d='M32 2.6C52 1.8 76 2.8 96 2.2C113.5 2.4 125.8 15 125.6 32.2C125.9 49.4 113.2 61.8 96.2 61.6C76 62.2 52.2 61.3 31.8 61.9C14.6 61.6 2.2 49.2 2.4 31.8C2.1 15.1 14.8 2.4 32 2.6Z' fill='none' stroke='%239DBBFF' stroke-width='2.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rule-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C60 2.2 120 4.2 200 3C280 2 340 4 399 2.9' fill='none' stroke='%234A4479' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --rule-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 400' preserveAspectRatio='none'%3E%3Cpath d='M3.4 1C2.2 60 4.2 120 3 200C2 280 4 340 2.9 399' fill='none' stroke='%234A4479' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --shadow-1: 0 10px 24px -16px rgba(0, 0, 0, .8);
  --shadow-2: 0 18px 34px -18px rgba(0, 0, 0, .85), 0 0 26px -12px rgba(141, 99, 240, .45);
  --shadow-3: 0 30px 70px -26px rgba(0, 0, 0, .9), 0 0 40px -16px rgba(141, 99, 240, .5);
  --glow: 0 0 18px -4px rgba(157, 187, 255, .45);
  --scrim: rgba(5, 4, 18, .58);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --cosmos: 1;
    --paper: #0e0b26; --paper-deep: #090719; --sheet: #1f1946; --sheet-2: #282156; --sheet-3: #312a64;
    --ink: #f1eef8; --ink-2: #d9d4ea; --muted: #bdb6d6; --faint: #a39cc0;
    --pencil: rgba(236, 232, 245, .14); --pencil-2: rgba(236, 232, 245, .28);
    --outline: rgba(236, 232, 245, .62); --outline-soft: rgba(236, 232, 245, .34); --key: rgba(3, 2, 12, .7); --key-strong: rgba(3, 2, 12, .85); --on-fill: #0e0b26; --input-bg: #282156; --doc-plain: #c9c3de;
    --coral: #ff8a63; --coral-s: #ffb394; --coral-ink: #ffb394; --coral-t: rgba(255, 138, 99, .2);
    --mint: #3fd487; --mint-s: #7df5b5; --mint-ink: #a6f7cb; --mint-t: rgba(63, 212, 135, .2);
    --sky: #5b8cff; --sky-s: #9dbbff; --sky-ink: #c3d5ff; --sky-t: rgba(91, 140, 255, .22);
    --pink: #f062b0; --pink-s: #ff9ad5; --pink-ink: #ffc2e6; --pink-t: rgba(240, 98, 176, .22);
    --sun: #f2b83a; --sun-s: #ffd873; --sun-ink: #ffe3a0; --sun-t: rgba(242, 184, 58, .2);
    --violet: #8d63f0; --violet-s: #c1a6ff; --violet-ink: #d9cbff; --violet-t: rgba(141, 99, 240, .26);
    --red: #e8594f; --red-s: #ff9a90; --red-ink: #ffc4be; --red-t: rgba(232, 89, 79, .22);
    --cream: #3a2f6e;
    --mint-on: var(--mint-ink); --sky-on: var(--sky-ink); --pink-on: var(--pink-ink); --sun-on: var(--sun-ink); --violet-on: var(--violet-ink); --red-on: var(--red-ink); --coral-on: var(--coral-ink);
    --star: #ffd873;
    --hatch: repeating-linear-gradient(-62deg, transparent 0 6px, rgba(255, 255, 255, .2) 6px 7.4px, transparent 7.4px 12px);
    --hatch-soft: repeating-linear-gradient(-62deg, transparent 0 7px, rgba(255, 255, 255, .1) 7px 8.2px, transparent 8.2px 14px);
    --page-art: radial-gradient(ellipse 70% 55% at 52% 30%, rgba(108, 76, 210, .32), transparent 70%), radial-gradient(ellipse 50% 40% at 12% 88%, rgba(240, 98, 176, .12), transparent 70%), radial-gradient(ellipse 45% 35% at 92% 70%, rgba(91, 140, 255, .12), transparent 70%), linear-gradient(180deg, #120e30, #0b0920);
    --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M12.5 2.2C24 1.4 40 2.6 51.8 1.9C58.6 2.1 62 5.6 61.8 12.4C62.3 21 61.4 28.5 61.9 35.4C62.1 42.4 58.4 46.2 51.6 45.9C39 46.6 25.5 45.4 12.2 46.1C5.4 45.8 2.1 42.3 2.3 35.6C1.8 27 2.6 19.6 2.1 12.7C2.2 5.6 5.9 2.3 12.5 2.2Z' fill='%23282156' stroke='%23CDC6E6' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    --frame-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M12.5 2.2C24 1.4 40 2.6 51.8 1.9C58.6 2.1 62 5.6 61.8 12.4C62.3 21 61.4 28.5 61.9 35.4C62.1 42.4 58.4 46.2 51.6 45.9C39 46.6 25.5 45.4 12.2 46.1C5.4 45.8 2.1 42.3 2.3 35.6C1.8 27 2.6 19.6 2.1 12.7C2.2 5.6 5.9 2.3 12.5 2.2Z' fill='%23282156' stroke='%239DBBFF' stroke-width='2.7' stroke-linejoin='round'/%3E%3C/svg%3E");
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1.6 2.4C3.8 4.3 5.4 6.2 7.1 8.1C8.9 6 10.6 4 12.5 1.9' fill='none' stroke='%23F1EEF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%237DF5B5'/%3E%3Cstop offset='.36' stop-color='%239DBBFF'/%3E%3Cstop offset='.7' stop-color='%23C1A6FF'/%3E%3Cstop offset='1' stop-color='%23FF9AD5'/%3E%3C/linearGradient%3E%3Cpath d='M3 9C11 3 19 2 27 8S43 15 51 8 67 1 75 8 91 15 99 8 115 1 123 8 139 15 147 8 163 1 171 8 187 14 197 7' fill='none' stroke='url(%23g)' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cg stroke='%230E0B26' stroke-width='2.2' stroke-linecap='round' opacity='.22'%3E%3Cpath d='M3 12v4M9 8v12M15 11v6M21 5v18M27 9v10M33 12v4M39 7v14M45 10v8M51 3v22M57 9v10M63 12v4M69 6v16M75 10v8M81 4v20M87 9v10M93 12v4M99 7v14M105 10v8M111 6v16M117 11v6'/%3E%3C/g%3E%3C/svg%3E");
      --fr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M15.1 2.4C27 1.8 39.6 2.7 48.7 2.2C57.4 2.2 61.8 6.6 61.6 15C62.1 26 61.4 38.5 61.8 48.8C61.9 57.4 57.4 61.8 48.9 61.6C38 62.2 26.4 61.3 15.2 61.9C6.7 61.7 2.3 57.3 2.4 48.9C1.9 38 2.6 26.6 2.1 15.4C2.2 6.8 6.6 2.6 15.1 2.4Z' fill='none' stroke='%235A538C' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
      --fr-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M15.1 2.4C27 1.8 39.6 2.7 48.7 2.2C57.4 2.2 61.8 6.6 61.6 15C62.1 26 61.4 38.5 61.8 48.8C61.9 57.4 57.4 61.8 48.9 61.6C38 62.2 26.4 61.3 15.2 61.9C6.7 61.7 2.3 57.3 2.4 48.9C1.9 38 2.6 26.6 2.1 15.4C2.2 6.8 6.6 2.6 15.1 2.4Z' fill='none' stroke='%23CFC9E6' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E");
      --fr-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M15.1 2.4C27 1.8 39.6 2.7 48.7 2.2C57.4 2.2 61.8 6.6 61.6 15C62.1 26 61.4 38.5 61.8 48.8C61.9 57.4 57.4 61.8 48.9 61.6C38 62.2 26.4 61.3 15.2 61.9C6.7 61.7 2.3 57.3 2.4 48.9C1.9 38 2.6 26.6 2.1 15.4C2.2 6.8 6.6 2.6 15.1 2.4Z' fill='none' stroke='%230E0B26' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
      --fr2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M14.4 2.8C26.6 2.1 39.9 2.9 49.5 2.4C57.8 2.6 61.5 6.2 61.9 14.3C61.6 25.9 62.2 38.3 61.7 49.6C61.6 57.7 57.8 61.4 49.8 61.8C38.4 61.3 25.9 62.1 14.1 61.6C6.2 61.9 2.6 58 2.2 50.1C2.6 38.6 1.9 25.8 2.5 13.9C2.3 6.3 6.2 2.7 14.4 2.8Z' fill='none' stroke='%235A538C' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
      --fr2-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M14.4 2.8C26.6 2.1 39.9 2.9 49.5 2.4C57.8 2.6 61.5 6.2 61.9 14.3C61.6 25.9 62.2 38.3 61.7 49.6C61.6 57.7 57.8 61.4 49.8 61.8C38.4 61.3 25.9 62.1 14.1 61.6C6.2 61.9 2.6 58 2.2 50.1C2.6 38.6 1.9 25.8 2.5 13.9C2.3 6.3 6.2 2.7 14.4 2.8Z' fill='none' stroke='%23CFC9E6' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E");
      --frs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M12 2.3C20 1.8 28 2.6 35.8 2.1C42.4 2.2 45.8 5.4 45.6 11.9C45.9 19.6 45.4 28.4 45.8 36.1C45.9 42.6 42.5 45.8 36 45.6C28.2 46.1 19.8 45.4 12.1 45.9C5.6 45.7 2.2 42.4 2.4 35.9C2 28.3 2.6 19.8 2.2 12.2C2.3 5.5 5.6 2.4 12 2.3Z' fill='none' stroke='%235A538C' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
      --frs-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M12 2.3C20 1.8 28 2.6 35.8 2.1C42.4 2.2 45.8 5.4 45.6 11.9C45.9 19.6 45.4 28.4 45.8 36.1C45.9 42.6 42.5 45.8 36 45.6C28.2 46.1 19.8 45.4 12.1 45.9C5.6 45.7 2.2 42.4 2.4 35.9C2 28.3 2.6 19.8 2.2 12.2C2.3 5.5 5.6 2.4 12 2.3Z' fill='none' stroke='%23CFC9E6' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
      --frs-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M12 2.3C20 1.8 28 2.6 35.8 2.1C42.4 2.2 45.8 5.4 45.6 11.9C45.9 19.6 45.4 28.4 45.8 36.1C45.9 42.6 42.5 45.8 36 45.6C28.2 46.1 19.8 45.4 12.1 45.9C5.6 45.7 2.2 42.4 2.4 35.9C2 28.3 2.6 19.8 2.2 12.2C2.3 5.5 5.6 2.4 12 2.3Z' fill='none' stroke='%230E0B26' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E");
      --frp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M16 2.2C28 1.6 37 2.6 48 2C56.6 2.2 61.9 8.4 61.7 16.2C61.9 24 56.2 30.1 48.2 29.9C37 30.5 27.6 29.6 15.8 30.1C7.6 29.9 2.2 23.8 2.4 15.8C2.1 8.2 7.8 2.4 16 2.2Z' fill='none' stroke='%235A538C' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
      --frp-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M16 2.2C28 1.6 37 2.6 48 2C56.6 2.2 61.9 8.4 61.7 16.2C61.9 24 56.2 30.1 48.2 29.9C37 30.5 27.6 29.6 15.8 30.1C7.6 29.9 2.2 23.8 2.4 15.8C2.1 8.2 7.8 2.4 16 2.2Z' fill='none' stroke='%23CFC9E6' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
      --frp-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M16 2.2C28 1.6 37 2.6 48 2C56.6 2.2 61.9 8.4 61.7 16.2C61.9 24 56.2 30.1 48.2 29.9C37 30.5 27.6 29.6 15.8 30.1C7.6 29.9 2.2 23.8 2.4 15.8C2.1 8.2 7.8 2.4 16 2.2Z' fill='none' stroke='%230E0B26' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
      --frb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64' viewBox='0 0 128 64'%3E%3Cpath d='M32 2.6C52 1.8 76 2.8 96 2.2C113.5 2.4 125.8 15 125.6 32.2C125.9 49.4 113.2 61.8 96.2 61.6C76 62.2 52.2 61.3 31.8 61.9C14.6 61.6 2.2 49.2 2.4 31.8C2.1 15.1 14.8 2.4 32 2.6Z' fill='none' stroke='%23CFC9E6' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
      --frb-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64' viewBox='0 0 128 64'%3E%3Cpath d='M32 2.6C52 1.8 76 2.8 96 2.2C113.5 2.4 125.8 15 125.6 32.2C125.9 49.4 113.2 61.8 96.2 61.6C76 62.2 52.2 61.3 31.8 61.9C14.6 61.6 2.2 49.2 2.4 31.8C2.1 15.1 14.8 2.4 32 2.6Z' fill='none' stroke='%239DBBFF' stroke-width='2.8' stroke-linejoin='round'/%3E%3C/svg%3E");
      --rule-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C60 2.2 120 4.2 200 3C280 2 340 4 399 2.9' fill='none' stroke='%234A4479' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      --rule-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 400' preserveAspectRatio='none'%3E%3Cpath d='M3.4 1C2.2 60 4.2 120 3 200C2 280 4 340 2.9 399' fill='none' stroke='%234A4479' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --shadow-1: 0 10px 24px -16px rgba(0, 0, 0, .8);
    --shadow-2: 0 18px 34px -18px rgba(0, 0, 0, .85), 0 0 26px -12px rgba(141, 99, 240, .45);
    --shadow-3: 0 30px 70px -26px rgba(0, 0, 0, .9), 0 0 40px -16px rgba(141, 99, 240, .5);
    --glow: 0 0 18px -4px rgba(157, 187, 255, .45);
    --scrim: rgba(5, 4, 18, .58);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--pencil-2) transparent; }
body {
  margin: 0; min-height: 100vh;
  font: 15px/1.55 var(--font); color: var(--ink); background-color: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* the paper's grain and clouds, or the night's nebula: one fixed layer, so scrolling never repaints it */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--page-art); }
/* above motion.js's star canvas (z-index 0) */
.app { position: relative; z-index: 1; }
a { color: var(--sky-ink); text-decoration: none; }
a:hover { text-decoration: underline wavy var(--coral); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--sky-s); outline-offset: 3px; }
::selection { background: var(--sun); color: #1d1b22; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: var(--pencil-2) padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 16px; height: 16px; }
.ic.lg { width: 26px; height: 26px; }
.num, .money { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
kbd {
  display: inline-block; min-width: 22px; padding: 3px 6px 2px; border-radius: 6px 7px 6px 8px; border: 1.5px solid var(--outline-soft);
  background: var(--sheet); color: var(--muted); box-shadow: 0 2px 0 var(--outline-soft);
  font: 600 11px/1.2 var(--mono); text-align: center;
}
.noscript { margin: 40px; font-size: 18px; }
.spacer { flex: 1; }

/* ---------- the marker outline ----------
   Every outline is a hand-drawn frame laid over the edge of its box (::after), 9-sliced so it fits any
   size: --fr is soft pencil, --fr-ink full ink, --fr-black ink that stays dark on a bright fill. Round
   marks get a plain ring. */
:where(.panel, .box, .card, .stat, .tpl, .empty, .skel-card, .fact, .kpi, .gstep, .vcard, .syn, .life, .acc, .shortcut,
    .kind-card, .check, .channel-box, .preview-card, .found, .modal, .ob-card, .chat-sug, .chat-key, .col, .bcard, .mini,
    .verdict, .search-hero, .feed-box, .me-card, .live-card, .cd > div, .stage-pill, .tip-card, .hero-guide,
    .filters-grid, .vw-paper, .tldr, .msg, .note-line, .warn-line, .chat-err, .mini-stats > div, .pv-list li, .cm.user)::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  border: 16px solid transparent; border-image: var(--fr) 16 / 16px / 0 stretch;
}
:where(.btn, .icon-btn, .star-btn, .seg, .doc-ic, .vw-zoom, .vw-nav, .vw-sheets button)::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  border: 12px solid transparent; border-image: var(--frs-ink) 12 / 12px / 0 stretch;
}
:where(.chip, .st-chip, .cstep)::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  border: 16px solid transparent; border-image: var(--frp) 16 / 16px / 0 stretch;
}
:where(.searchbar)::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  border: 32px solid transparent; border-image: var(--frb) 32 / 32px / 0 stretch;
}
:where(.panel, .box, .card, .stat, .tpl, .empty, .skel-card, .fact, .kpi, .gstep, .vcard, .syn, .life, .acc, .shortcut,
    .kind-card, .check, .channel-box, .preview-card, .found, .modal, .ob-card, .chat-sug, .chat-key, .col, .bcard, .mini,
    .verdict, .search-hero, .searchbar, .feed-box, .me-card, .live-card, .cd > div, .stage-pill, .tip-card, .hero-guide,
    .save-bar, .filters-grid, .vw-paper, .tldr, .btn, .chip, .st-chip, .icon-btn, .star-btn, .seg, .badge-ic, .kind-ic,
    .chat-fab, .cstep, .vchip, .toast, .doc-ic, .vw-zoom, .vw-nav, .vw-sheets button, .cm.user, .rank, .me-av, .msg,
    .note-line, .warn-line, .chat-err, .mini-stats > div, .pv-list li, .sealed, .sealed .lock) { position: relative; }
/* every other sheet in a list is drawn by a slightly different hand */
.card:nth-child(even)::after, .bcard:nth-child(even)::after, .mini:nth-child(even)::after, .tpl:nth-child(even)::after { border-image-source: var(--fr2); }
/* round marks: a plain ink ring */
.badge-ic, .kind-ic, .me-av, .rank, .ev .bubble, .step .dot, .sealed .lock { box-shadow: 0 0 0 2px var(--ring-c, var(--outline)); }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 20px;
  padding: 22px 18px 18px; z-index: 20;
}
/* the page's margin: a pencil rule, not a border */
.sidebar::after {
  content: ""; position: absolute; top: 18px; bottom: 18px; right: -2px; width: 6px; pointer-events: none;
  background: var(--rule-v) 0 0 / 100% 100% no-repeat;
}
.logo { display: flex; align-items: center; gap: 12px; padding: 2px 6px; color: var(--ink); }
.logo:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; flex: none; }
.brand-mark > svg { width: 100%; height: 100%; overflow: visible; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.brand-text b .ai { color: var(--coral-ink); }
.brand-text small { margin-top: 3px; color: var(--muted); font-size: 12px; }

.nav { position: relative; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  --hl: var(--sun);
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 44px;
  border-radius: var(--wonky-sm); color: var(--ink-2); font-weight: 600; transition: color var(--t2) var(--ease);
}
.nav-item:hover { text-decoration: none; color: var(--ink); }
.nav-item .ic { color: var(--muted); transition: color var(--t2) var(--ease); }
.nav-item:hover .ic { color: var(--ink); }
.nav-item[aria-current="page"] { color: var(--on-fill); font-weight: 750; }
.nav-item[aria-current="page"] .ic { color: var(--on-fill); }
.nav-item > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item kbd { position: absolute; right: 10px; opacity: 0; transition: opacity var(--t2); }
.nav-item .nav-badge { margin-left: auto; }
.nav-item .nav-badge + kbd { display: none; }
.nav:hover .nav-item:not([aria-current="page"]) kbd { opacity: .85; }
/* the highlighter swipe behind the section you are in */
.nav-pill {
  position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 14px 19px 13px 18px / 18px 13px 19px 14px;
  background-color: var(--hl, var(--sun)); background-image: var(--hatch);
  box-shadow: 0 3px 0 var(--key-strong); transform-origin: 50% 50%;
  transition: transform .5s var(--ease-pop), height var(--t3) var(--ease-out), background-color var(--t3) var(--ease);
}
.nav-pill::after { content: ""; position: absolute; inset: -2px; border: 12px solid transparent; border-image: var(--frs-black) 12 / 12px / 0 stretch; }
.nav-badge {
  position: relative; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px 12px 10px 13px; background: var(--coral); color: #1d1b22;
  box-shadow: 0 0 0 1.8px var(--ink); font: 800 11px/22px var(--font); text-align: center;
}
.nav-badge.soft { background: var(--sheet); color: var(--ink-2); }
/* the assistant: a button among the sections, mint while its panel is open */
button.nav-item { width: 100%; border: 0; background: none; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.nav-ai-tag {
  margin-left: auto; padding: 1px 7px; border-radius: 9px 10px 8px 11px; background: var(--mint); color: var(--on-fill);
  box-shadow: 0 0 0 1.6px var(--ink); font: 800 10.5px/17px var(--font); letter-spacing: .04em;
}
.nav-ai-tag + kbd { display: none; }
.nav:hover .nav-ai-tag { opacity: .9; }
.nav-ai[aria-pressed="true"] { color: var(--on-fill); font-weight: 750; background-color: var(--mint); background-image: var(--hatch); box-shadow: 0 3px 0 var(--key-strong); }
.nav-ai[aria-pressed="true"]::after { content: ""; position: absolute; inset: -2px; border: 12px solid transparent; border-image: var(--frs-black) 12 / 12px / 0 stretch; pointer-events: none; }
.nav-ai[aria-pressed="true"] .ic { color: var(--on-fill); }
.nav-ai[aria-pressed="true"] .nav-ai-tag { background: var(--sheet); color: var(--ink); }
.nav-ai:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.live-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--wonky); background: var(--sheet); box-shadow: var(--shadow-1); }
.live-card b { display: block; font-size: 13.5px; }
.live-card small { display: block; color: var(--muted); font-size: 12px; }
/* the live mark: a dot that sends out thin rings while the copy keeps up */
.live-dot { position: relative; display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 1.5px var(--sheet); }
.live-dot.on { background: var(--mint-s); }
.live-dot.stale { background: var(--sun-s); }
.live-dot.off { background: var(--red-s); }
.prefs { display: flex; align-items: center; gap: 8px; }
.seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px 14px 11px 15px / 14px 11px 15px 12px; background: var(--sheet);
}
.seg button {
  position: relative; z-index: 1; border: 0; background: transparent; padding: 6px 12px; border-radius: 9px 10px 8px 11px; font-size: 12.5px; font-weight: 750;
  color: var(--muted); letter-spacing: .02em; transition: color var(--t2), background-color var(--t2), transform var(--t2) var(--ease-pop);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .seg button[aria-checked="true"] { background: var(--sun); color: #0e0b26; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .seg button[aria-checked="true"] { background: var(--sun); color: #0e0b26; } }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border: 0; border-radius: 12px 13px 11px 14px;
  background: var(--sheet); color: var(--ink-2); box-shadow: 0 2px 0 var(--key);
  transition: transform var(--t1) var(--ease), box-shadow var(--t1), background-color var(--t2), color var(--t2);
}
.icon-btn:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 3px 0 var(--key); text-decoration: none; }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--key); }
.icon-btn:disabled { opacity: .45; transform: none; cursor: default; }

.main { position: relative; min-width: 0; padding: 30px clamp(16px, 3.2vw, 46px) 96px; outline: none; }
/* while anything loads: a rainbow line scanning across the top, like the scan over a document */
.topline {
  position: fixed; top: 0; left: var(--side); right: 0; height: 3px; z-index: 40; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--mint-s), var(--sky-s), var(--violet-s), var(--pink-s), transparent);
  background-size: 50% 100%; background-repeat: no-repeat; filter: drop-shadow(0 0 6px rgba(122, 71, 214, .55));
  transition: opacity var(--t2);
}
.topline.run { opacity: 1; }

.view { max-width: 1380px; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.page-head h1 { margin: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.12; letter-spacing: -.03em; font-weight: 820; overflow-wrap: anywhere; }
/* a rainbow squiggle under every page title, drawn in when the page opens */
.page-head h1::after { content: ""; display: block; width: min(230px, 70%); height: 14px; margin-top: 8px; background: var(--squiggle) left center / 100% 100% no-repeat; }
.page-head p { margin: 10px 0 0; color: var(--muted); max-width: 660px; font-size: 15.5px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--coral-ink);
  font: 750 12px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow > .ic { display: none; }
.eyebrow .live-dot { width: 9px; height: 9px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px;
  border: 0; border-radius: 13px 15px 12px 16px / 15px 12px 16px 13px; background: var(--sheet); color: var(--ink);
  box-shadow: 0 3px 0 var(--key); font-weight: 680; font-size: 14.5px; white-space: nowrap;
  transition: transform var(--t1) var(--ease), box-shadow var(--t1), background-color var(--t2), color var(--t2);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 0 var(--key); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--key); }
.btn.primary { background-color: var(--coral); background-image: var(--hatch-soft); color: #1d1b22; box-shadow: 0 3px 0 var(--key-strong); }
.btn.primary:hover { box-shadow: 0 4px 0 var(--key-strong); }
.btn.primary:active { box-shadow: 0 1px 0 var(--key-strong); }
.btn.primary::after { border-image-source: var(--frs-black); }
.btn.primary .ic { stroke-width: 2.2; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost::after { border-image-source: none; }
.btn.ghost:hover { background: var(--sheet-2); transform: none; box-shadow: none; }
.btn.ghost:hover::after { border-image-source: var(--frs); }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px 12px 9px 13px; }
.btn.lg { height: 48px; padding: 0 22px; font-size: 15.5px; border-radius: 15px 17px 14px 18px / 17px 14px 18px 15px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
/* a busy mark: the brand's three bars, bouncing like the send button in the reference */
.spin, .spinner {
  position: relative; display: inline-block; flex: none; width: 4px; height: 14px; margin: 0 6px; border-radius: 2px;
  background: var(--sky); box-shadow: 0 0 0 1.2px var(--ink); transform-origin: 50% 100%; vertical-align: -2px;
}
.spin::before, .spin::after, .spinner::before, .spinner::after {
  content: ""; position: absolute; bottom: 0; width: 4px; height: 100%; border-radius: 2px; box-shadow: 0 0 0 1.2px var(--ink);
  transform-origin: 50% 100%;
}
.spin::before, .spinner::before { left: -6px; background: var(--mint); transform: scaleY(.7); }
.spin::after, .spinner::after { left: 6px; background: var(--pink); transform: scaleY(.55); }
.btn.primary .spin, .btn.primary .spin::before, .btn.primary .spin::after { box-shadow: 0 0 0 1.2px #1d1b22; }

/* ---------- inputs: a hand-drawn frame, 9-sliced so corners keep their size ---------- */
.select, .input, .chat-compose textarea, .searchbar input {
  min-width: 0; height: 42px; padding: 0 12px; border: 2px solid transparent; border-radius: 12px; outline: none;
  background: transparent; color: var(--ink);
  border-image: var(--frame) 16 / 16px / 0 stretch; background: var(--input-bg) padding-box;
  transition: border-image-source var(--t1);
}
.select:focus, .input:focus, .chat-compose textarea:focus { border-image-source: var(--frame-focus); }
.select:focus-visible, .input:focus-visible, .chat-compose textarea:focus-visible, .searchbar input:focus-visible { outline: none; }
.input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
.select {
  padding-right: 36px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--chev) calc(100% - 12px) 50% / 14px 10px no-repeat, var(--input-bg) padding-box;
}
.select option { background: var(--sheet); color: var(--ink); }
textarea.input { height: auto; padding: 10px 12px; resize: vertical; min-height: 64px; line-height: 1.45; }
.select.sm { height: 32px; padding-left: 10px; padding-right: 30px; font-size: 12.5px; background-position: calc(100% - 10px) 50%; }
.icon-btn.sm { width: 30px; height: 30px; border-radius: 9px 10px 8px 11px; }
.icon-btn.sm .ic { width: 15px; height: 15px; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-weight: 650; font-size: 14px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  position: relative; flex: none; width: 48px; height: 28px; border-radius: 15px 16px 14px 17px; background: var(--sheet-3);
  transition: background-color var(--t2);
}
.switch .track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--outline); }
.switch .track::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--sheet); box-shadow: 0 0 0 2px var(--ink); transition: transform var(--t3) var(--ease-pop), background-color var(--t2);
}
.switch input:checked + .track { background-color: var(--mint); background-image: var(--hatch); }
.switch input:checked + .track::after { transform: translateX(20px); background: var(--coral); box-shadow: 0 0 0 2px #1d1b22; }
.switch input:focus-visible + .track { outline: 2.5px solid var(--sky-s); outline-offset: 3px; }
.switch small { color: var(--muted); font-weight: 400; }

/* ---------- chips and badges: highlighter marks ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 13px; border: 0;
  border-radius: 16px 17px 15px 18px / 17px 15px 18px 16px; background: var(--sheet); color: var(--ink-2);
  font-size: 13px; font-weight: 650; transition: background-color var(--t2), color var(--t2), transform var(--t1) var(--ease);
}
.chip button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.chip button:hover { background: var(--sheet-3); color: var(--ink); }
.chip.click { cursor: pointer; padding-right: 13px; }
.chip.click:hover { color: var(--ink); transform: translateY(-1px); }
.chip.click:hover::after { border-image-source: var(--frp-ink); }
.chip .n { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.on { background-color: var(--sun-t); color: var(--sun-on); }
.chip.on::after { border-image-source: var(--frp-ink); }
.chip.mine .ic { color: var(--star); }
.chip.mine.on .ic { color: currentColor; }
.active-filters { margin-top: 14px; }
.active-filters:empty { display: none; }

.badge {
  --dot: var(--faint);
  display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 9px; border-radius: 7px 9px 6px 10px;
  background: var(--sheet-3); color: var(--ink-2); font-size: 12px; font-weight: 650; white-space: nowrap;
}
.badge::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1.5px var(--sheet); }
.badge.plain { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pencil-2); color: var(--muted); }
.badge.plain::before, .badge:has(> .ic)::before { display: none; }
.badge .ic { width: 14px; height: 14px; }
.badge.sm { height: 21px; padding: 0 7px; font-size: 11px; gap: 4px; }
/* a status is a highlighter swipe in its hue; text stays ink so it reads in both themes */
.badge.go { --dot: var(--mint-s); background: var(--mint-t); color: var(--mint-on); }
.badge.info { --dot: var(--sky-s); background: var(--sky-t); color: var(--sky-on); }
.badge.warn { --dot: var(--sun-s); background: var(--sun-t); color: var(--sun-on); }
.badge.bad { --dot: var(--red-s); background: var(--red-t); color: var(--red-on); }
.badge.brand { --dot: var(--sky-s); background: var(--sky-t); color: var(--sky-on); }
.badge.violet { --dot: var(--violet-s); background: var(--violet-t); color: var(--violet-on); }
.badge.sun { --dot: var(--sun-s); background: var(--sun-t); color: var(--sun-on); }
.badge.sun .ic { color: var(--sun-s); }
.badge.plain.go, .badge.plain.info, .badge.plain.warn, .badge.plain.bad, .badge.plain.brand, .badge.plain.violet { background: transparent; color: var(--muted); }
.badge.stage { --dot: var(--stage); background: color-mix(in srgb, var(--stage) 16%, transparent); color: var(--ink-2); }
.badge.you { height: 20px; margin-left: 8px; padding: 0 8px; font-size: 11px; vertical-align: 1px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 650; }
.urgent { color: var(--red-ink); font-weight: 750; }
.soon { color: var(--sun-ink); font-weight: 750; }
:root[data-theme="dark"] .urgent { color: var(--red-s); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .urgent { color: var(--red-s); } }

/* the verdict, at a glance: a small stamp of colour and the word */
.vchip {
  --tone: var(--sun-s); --tone-t: var(--sun-t); --tone-on: var(--sun-on);
  display: inline-flex; align-items: center; gap: 7px; height: 23px; padding: 0 9px; border: 0; border-radius: 7px 9px 6px 10px;
  background: var(--tone-t); color: var(--tone-on); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.vchip { box-shadow: inset 0 0 0 1.5px var(--tone); }
.vchip i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tone); }
.vchip small { margin-left: 2px; color: inherit; opacity: .85; font-size: 11.5px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.vchip.go { --tone: var(--mint-s); --tone-t: var(--mint-t); --tone-on: var(--mint-on); }
.vchip.bad { --tone: var(--red-s); --tone-t: var(--red-t); --tone-on: var(--red-on); }

/* the star: follow a tender */
.star-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 10px 12px 9px 13px;
  background: var(--sheet); color: var(--faint); transition: color var(--t2), background-color var(--t2), transform var(--t1) var(--ease);
}
.star-btn::after { border-image-source: var(--frs); }
.star-btn:hover { color: var(--star); transform: translateY(-1px); }
.star-btn.on { color: var(--on-fill); background: var(--sun); }
.star-btn.on::after { border-image-source: var(--frs-black); }
.star-btn.on .ic { color: var(--on-fill); }
.star-btn.btn { display: inline-flex; width: auto; height: 34px; padding: 0 12px; color: var(--ink-2); box-shadow: none; }
.star-btn.btn .ic { color: var(--faint); }
.star-btn.btn.on { color: var(--on-fill); }
.star-btn.btn.on .ic, .star-btn.btn:hover .ic { color: var(--sun-s); }
.star-btn.btn.on .ic { color: var(--on-fill); }

/* ---------- KPI tiles: highlighter cards ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat {
  --fill: var(--mint);
  display: flex; flex-direction: column; align-items: flex-start; min-height: 112px; padding: 16px 18px 14px;
  border-radius: var(--wonky); background-color: var(--fill); background-image: var(--wave), var(--hatch-soft);
  background-position: right 12px bottom 10px, 0 0; background-repeat: no-repeat, repeat; background-size: 96px 22px, auto;
  color: var(--on-fill); box-shadow: var(--shadow-1);
}
.stat::after { border-image-source: var(--fr-black); }
.stat:nth-child(2) { --fill: var(--sky); }
.stat:nth-child(3) { --fill: var(--pink); }
.stat:nth-child(4) { --fill: var(--sun); }
/* the icon sits in a paper disc, like the icons on the pills in the reference */
.stat > .ic {
  position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; padding: 8px; border-radius: 50%;
  background: #fbf9f4; color: #1d1b22; box-shadow: 0 0 0 2px #1d1b22; stroke-width: 2;
}
.stat b { display: block; margin-top: auto; font-size: 31px; font-weight: 820; line-height: 1.05; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
/* softened ink, but never below AA on the palest fill (the dark theme's sky: 5.3:1 and 5.4:1) */
.stat span { margin-top: 4px; font-size: 13px; font-weight: 650; opacity: .88; }
.stat-sub { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; opacity: .9; }
.stat.accent b { font-size: 34px; }
button.stat { width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; transition: transform var(--t2) var(--ease), box-shadow var(--t2); }
button.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
button.stat:active { transform: translateY(0); }

/* ---------- search: the pill from the reference, with the spark at its start ---------- */
.search-hero { padding: 20px; border-radius: var(--r-xl); background: var(--sheet); box-shadow: var(--shadow-2); margin-bottom: 22px; }
.searchbar {
  display: flex; align-items: center; gap: 10px; height: 62px; padding: 0 8px 0 12px; border-radius: 32px 34px 31px 35px / 34px 31px 35px 32px;
  background: var(--sheet); box-shadow: 0 4px 0 var(--pencil), inset 0 0 0 0 transparent; transition: box-shadow var(--t2);
}
.searchbar:focus-within { box-shadow: 0 4px 0 var(--pencil), 0 0 0 5px color-mix(in srgb, var(--sky-s) 22%, transparent); }
.searchbar:focus-within::after { border-image-source: var(--frb-focus); }
.searchbar .lead { position: static; width: 38px; height: 38px; flex: none; color: var(--muted); }
.searchbar .lead-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
.searchbar .lead-mark > svg { width: 100%; height: 100%; overflow: visible; }
.searchbar input {
  flex: 1; height: 100%; padding: 0 4px; border: 0; border-image: none; border-radius: 0; background: transparent; font-size: 17px; font-weight: 500;
}
.searchbar input::placeholder { color: var(--faint); transition: opacity var(--t2); }
.searchbar input.ph-swap::placeholder { opacity: 0; }
.searchbar input::-webkit-search-cancel-button { display: none; }
.searchbar .tail { display: flex; align-items: center; gap: 6px; }
.searchbar input:placeholder-shown ~ .tail .btn.ghost { opacity: 0; pointer-events: none; }
.searchbar.has-tpl .tail .btn.ghost { opacity: 1; pointer-events: auto; }
.searchbar .tail .btn.ghost { width: 36px; padding: 0; border-radius: 50%; }
/* the send button: coral, round; while searching it turns into three bars, as in the reference */
.searchbar .tail .btn.primary { height: 46px; padding: 0 18px 0 14px; border-radius: 24px 25px 23px 26px; }
.searchbar .tail .btn.primary .bars { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.searchbar .tail .btn.primary .bars i { width: 5px; height: 100%; border-radius: 3px; box-shadow: 0 0 0 1.5px #1d1b22; transform-origin: 50% 100%; }
.searchbar .tail .btn.primary .bars i:nth-child(1) { background: var(--mint); }
.searchbar .tail .btn.primary .bars i:nth-child(2) { background: var(--sky); }
.searchbar .tail .btn.primary .bars i:nth-child(3) { background: var(--pink); }
.searchbar.busy .tail .btn.primary .bars { display: inline-flex; }
.searchbar.busy .tail .btn.primary > .ic { display: none; }
.tpl-in-bar { position: absolute; left: 60px; top: 50%; transform: translateY(-50%); z-index: 2; }
.chip-tpl {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 12px; border-radius: 17px 18px 16px 19px;
  background: var(--sun); color: var(--on-fill); box-shadow: 0 0 0 2px var(--ink); font-weight: 700; font-size: 13.5px;
}
.chip-tpl button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.chip-tpl button:hover { background: rgba(29, 27, 34, .12); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.toolbar .select { min-width: 190px; }

.filters { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; transition: grid-template-rows var(--t3) var(--ease-out), opacity var(--t3), margin var(--t3); }
.filters.open { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
.filters > div { overflow: hidden; padding: 3px; }
.filters-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 16px; padding: 18px;
  border-radius: var(--r-lg); background: var(--sheet-2);
}
.filters-grid::after { border: 1.8px dashed var(--outline-soft); border-image: none; border-radius: inherit; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.field .row { display: flex; gap: 8px; }
.field .row > * { flex: 1; min-width: 0; }
.field small { color: var(--faint); font-size: 12px; }

/* every status with its count */
.status-bar { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.st-chip {
  --st: var(--faint);
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 9px 11px 8px 12px;
  background: transparent; color: var(--ink-2); font: 600 13px var(--font); white-space: nowrap; cursor: pointer;
  transition: background-color var(--t2), color var(--t2), transform var(--t1) var(--ease);
}
.st-chip:hover { transform: translateY(-1px); color: var(--ink); }
.st-chip:hover::after { border-image-source: var(--frp-ink); }
.st-chip .n { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.st-chip.on { background: color-mix(in srgb, var(--st) 18%, var(--sheet)); color: var(--ink); font-weight: 700; }
.st-chip.on::after { border-image-source: var(--frp-ink); }
.st-chip.on .n { color: var(--ink-2); }
.st-mark { width: 9px; height: 9px; border-radius: 50%; background: var(--st, var(--faint)); }
#res-title { scroll-margin-top: 14px; }

/* ---------- templates ---------- */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 14px; }
.section-title h2 { margin: 0; font-size: 20px; font-weight: 780; letter-spacing: -.02em; }
.section-title p { margin: 0; color: var(--muted); font-size: 13.5px; }
.templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; }
.tpl {
  --hue: var(--sky); --hue-s: var(--sky-s);
  display: grid; grid-template-columns: 42px minmax(0, 1fr); align-content: center; column-gap: 12px; row-gap: 3px;
  min-height: 76px; padding: 13px 14px; border: 0; border-radius: var(--wonky); background: var(--sheet); color: var(--ink); text-align: left;
  box-shadow: var(--shadow-1); transition: transform var(--t2) var(--ease), box-shadow var(--t2), background-color var(--t2);
}
.tpl:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tpl:hover::after { border-image-source: var(--fr-ink); }
.tpl.on { background: color-mix(in srgb, var(--hue) 30%, var(--sheet)); }
.tpl.on::after { border-image-source: var(--fr-ink); }
.tpl .badge-ic {
  grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background-color: var(--hue); background-image: var(--hatch); color: var(--on-fill);
}
.tpl .badge-ic { --ring-c: var(--ink); }
.tpl b { font-size: 14.5px; font-weight: 720; line-height: 1.25; padding-right: 52px; }
.tpl small { grid-column: 2; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.tpl.nocount b { padding-right: 0; }
.tpl .count {
  position: absolute; right: 12px; top: 12px; min-width: 30px; height: 22px; padding: 0 8px; border-radius: 11px;
  background: var(--sheet-2); box-shadow: inset 0 0 0 1.5px var(--pencil-2); color: var(--ink-2);
  font: 750 12px/22px var(--font); text-align: center; font-variant-numeric: tabular-nums;
}
.tpl .count.loading { color: transparent; }

/* ---------- results ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 26px; align-items: start; }
.rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.results-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 16px; }
.results-head .count { font-size: 15px; font-weight: 700; }
.results-head .count b { font-size: 26px; font-weight: 820; letter-spacing: -.03em; margin-right: 4px; }
.results-head .ms { color: var(--faint); font-size: 12.5px; }
.results { display: flex; flex-direction: column; gap: 14px; }
.results.busy { opacity: .55; transition: opacity var(--t2); }
.facets { display: flex; flex-wrap: wrap; gap: 8px; }

/* a tender: a sheet of paper, its status a highlighter stroke down the margin */
.card {
  --status: var(--pencil-2);
  padding: 17px 20px 16px 30px; border-radius: var(--wonky); background: var(--sheet); box-shadow: var(--shadow-1);
  cursor: pointer; outline: none; transition: transform var(--t2) var(--ease), box-shadow var(--t2);
}
.card::before {
  content: ""; position: absolute; left: 11px; top: 16px; bottom: 16px; width: 6px; border-radius: 4px;
  background: var(--status); opacity: .9;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card:focus-visible { outline: 2.5px solid var(--sky-s); outline-offset: 4px; }
.card .top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 9px; }
.card h3 {
  margin: 0; font-size: 16.5px; line-height: 1.35; font-weight: 720; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .snippet {
  margin-top: 9px; padding: 1px 0 1px 12px; color: var(--muted); font-size: 13px; border-left: 2px solid var(--pencil-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 13px; color: var(--muted); font-size: 13px; }
.card .bottom .money { color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.card .bottom span { display: inline-flex; align-items: center; gap: 6px; }
.card .bottom .ic { width: 15px; height: 15px; }
.card .go-arrow {
  position: absolute; right: 16px; bottom: 15px; display: grid; place-items: center; width: 30px; height: 30px;
  color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity var(--t2), transform var(--t2) var(--ease-out);
}
.card:hover .go-arrow { opacity: 1; transform: none; }
.more-wrap { display: flex; justify-content: center; margin-top: 20px; }
.more-wrap:empty { display: none; }

/* ---------- nothing here: a drawing and a way on ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 22px 34px;
  border-radius: var(--r-xl); background: var(--sheet);
}
.empty::after { border: 2px dashed var(--outline-soft); border-image: none; border-radius: inherit; }
.empty .art, .empty .pai-art { width: 220px; height: auto; max-width: 70%; }
.empty svg.art { width: 120px; height: 96px; }
.empty h3 { margin: 6px 0 0; font-size: 18.5px; font-weight: 760; letter-spacing: -.015em; }
.empty p { margin: 0; color: var(--muted); max-width: 470px; }
.empty .chips { justify-content: center; margin-top: 8px; }
.empty .btn { margin-top: 6px; }

/* ---------- loading: blank papers with a rainbow line scanning them ---------- */
.skel { position: relative; overflow: hidden; background: var(--pencil); border-radius: 6px; }
.skel-card { display: flex; flex-direction: column; gap: 11px; padding: 18px 22px; border-radius: var(--wonky); background: var(--sheet); overflow: hidden; }
.skel-card .skel:first-child { background: var(--pencil-2); }
.scanline, .skel-card::before, .skel-paper::before {
  content: ""; position: absolute; left: -2%; right: -2%; top: 0; height: 100%; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0, var(--mint-s) 14%, var(--sky-s) 38%, var(--violet-s) 62%, var(--pink-s) 86%, transparent 100%) 0 0 / 100% 2.5px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--sky) 22%, transparent), transparent 46px) 0 2.5px / 100% 46px no-repeat;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--violet-s) 55%, transparent));
  transform: translateY(-4px); opacity: .95;
}

/* ---------- side panels ---------- */
.panel { padding: 18px; border-radius: var(--r-lg); background: var(--sheet); box-shadow: var(--shadow-1); }
.panel h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 15.5px; font-weight: 760; letter-spacing: -.01em; }
.panel h3 > .ic { color: var(--ink); }
.panel h3 .spacer { flex: 1; }
.rail .panel h3 { flex-wrap: wrap; row-gap: 6px; white-space: nowrap; }
.tip { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.tip + .tip { margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--pencil); }
.tip .ic { color: var(--coral-ink); margin-top: 1px; }

/* ---------- the feed ---------- */
.feed { display: flex; flex-direction: column; }
.ev {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 13px; align-items: start;
  padding: 12px 10px; border-radius: var(--r); cursor: pointer; transition: background-color var(--t2);
}
.ev:hover { background: var(--sheet-2); }
.ev + .ev::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; border-top: 1.5px solid var(--pencil); }
.ev .bubble {
  --b: var(--sheet-3);
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background-color: var(--b); background-image: var(--hatch); color: var(--on-fill);
}
.ev .bubble.bid { --b: var(--sky); }
.ev .bubble.win { --b: var(--mint); }
.ev .bubble.bad { --b: var(--red); }
.ev .bubble.new { --b: var(--sun); }
.ev .bubble.deal { --b: var(--violet); }
.ev .bubble.warn { --b: var(--coral); }
.ev .bubble:not(.bid):not(.win):not(.bad):not(.new):not(.deal):not(.warn) { color: var(--ink-2); }
.ev .what { font-size: 14px; line-height: 1.45; }
.ev .what b { font-weight: 750; }
.ev .ttl { margin-top: 3px; color: var(--muted); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ev time { color: var(--faint); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev.static { cursor: default; }
.ev.static:hover { background: transparent; }
.ev.compact { grid-template-columns: 32px minmax(0, 1fr); gap: 11px; padding: 9px 4px; }
.ev.compact .bubble { width: 32px; height: 32px; }
.ev.compact .bubble .ic { width: 16px; height: 16px; }
.ev.compact .what { font-size: 13px; }
.ev.compact time { display: block; margin-top: 2px; }
.ev.compact + .ev.compact::before { left: 4px; right: 4px; }
.feed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.feed-tools .input { flex: 1 1 200px; max-width: 320px; }
.feed-tools .switch { flex-basis: 100%; }
.feed-box { padding: 6px 12px; border-radius: var(--r-xl); background: var(--sheet); box-shadow: var(--shadow-1); }
.new-pill { position: sticky; top: 14px; z-index: 5; display: flex; justify-content: center; margin: -4px 0 10px; pointer-events: none; }
.new-pill:empty { display: none; }
.new-pill button { pointer-events: auto; }

/* ---------- the tender card: a sheet slid over the desk ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; backdrop-filter: blur(2px); transition: opacity var(--t3) var(--ease); }
.scrim.on { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(760px, 100vw); overflow-y: auto; overscroll-behavior: contain;
  background-color: var(--paper); background-image: var(--grain); box-shadow: var(--shadow-3);
  transform: translateX(104%); transition: transform var(--t4) var(--ease-out);
}
.drawer.on { transform: none; }
.drawer-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px);
}
.drawer-head::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -2px; height: 6px; background: var(--rule-h) 0 0 / 100% 100% no-repeat; pointer-events: none; }
/* the tender number is never cut: short of room, the status gives way (with an ellipsis) */
.drawer-head .uid { flex: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.drawer-head .uid + .btn { width: 32px; padding: 0; justify-content: center; }
.drawer-head > .badge { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 23px; }
.drawer-head > .badge::before { display: inline-block; margin-right: 6px; }
/* bottom room for the assistant's button, so the end of the card is never under it */
.drawer-body { padding: 24px 24px 96px; display: flex; flex-direction: column; gap: 18px; }
.drawer h2 { margin: 6px 0 0; font-size: 24px; line-height: 1.28; font-weight: 800; letter-spacing: -.025em; }
.drawer .who { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 13.5px; margin-top: 10px; }
.drawer .who span { display: inline-flex; align-items: center; gap: 6px; }
.box { padding: 20px; border-radius: var(--r-lg); background: var(--sheet); box-shadow: var(--shadow-1); }
.box h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; font-size: 16.5px; font-weight: 780; letter-spacing: -.015em; }
.box h3 .ic { color: var(--ink); }
.box h3 small { margin-left: auto; color: var(--faint); font-weight: 600; font-size: 12px; }
.live-note { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.table tr.lot-row td { padding-top: 18px; background: transparent; color: var(--ink-2); font-size: 13px; }
.table tr.lot-row .sub { display: inline; margin-left: 10px; }

/* the countdown: one paper tile per unit */
.countdown { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.countdown .label { margin-bottom: 8px; font-size: 13px; color: var(--muted); font-weight: 700; }
.countdown .muted { display: inline-flex; align-items: center; gap: 6px; }
.cd { display: flex; gap: 9px; }
.cd > div { min-width: 66px; padding: 10px 8px 8px; border-radius: 10px 12px 9px 13px; background: var(--sheet-2); text-align: center; overflow: hidden; }
.cd b { display: block; font-size: 28px; font-weight: 820; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.cd small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.cd.urgent > div { background: var(--red-t); }
.cd.urgent b { color: var(--red-on); }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.fact { padding: 13px 15px; border-radius: var(--r); background: var(--sheet); min-width: 0; }
.fact small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.fact small .ic { width: 14px; height: 14px; }
.fact b { display: block; margin-top: 5px; font-size: 15.5px; font-weight: 760; overflow-wrap: anywhere; }
.fact span { color: var(--muted); font-size: 12.5px; }
.fact:first-child b { font-size: 19px; letter-spacing: -.02em; }

/* the stepper: hand-drawn circles on a pencil line */
.stepper { display: flex; align-items: flex-start; overflow-x: auto; padding: 6px 2px 2px; }
.step { position: relative; flex: 1 0 88px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.step::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; border-top: 2px dashed var(--pencil-2); }
.step:first-child::before { display: none; }
.step .dot {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sheet); color: var(--faint); font-weight: 750; font-size: 13px;
}
.step .dot { --ring-c: var(--outline-soft); }
.step .dot .ic { width: 16px; height: 16px; stroke-width: 2.5; }
.step small { font-size: 12px; color: var(--muted); font-weight: 650; line-height: 1.25; }
.step.done .dot { background-color: var(--mint); background-image: var(--hatch); color: var(--on-fill); }
.step.done .dot { --ring-c: var(--outline); }
.step.done::before, .step.now::before { border-top: 2.5px solid var(--mint-s); }
.step.now .dot { background: var(--sky); color: var(--on-fill); box-shadow: 0 0 0 5px var(--sky-t); }
.step.now .dot { --ring-c: var(--outline); }
.step.now small { color: var(--ink); font-weight: 780; }
.step.fail .dot { background-color: var(--red); background-image: var(--hatch); color: var(--on-fill); }
.step.fail .dot { --ring-c: var(--outline); }
.step.fail small { color: var(--red-ink); font-weight: 780; }
:root[data-theme="dark"] .step.fail small { color: var(--red-s); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .step.fail small { color: var(--red-s); } }
.step.fail::before { border-top: 2.5px solid var(--red-s); }

/* bids still sealed: an airmail envelope */
.sealed {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px; border-radius: var(--r);
  background: var(--sheet-2); border: 7px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--red-s) 0 9px, transparent 9px 15px, var(--sky-s) 15px 24px, transparent 24px 30px) 7;
}
.sealed::after { display: none; }
.sealed .lock { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--sheet); color: var(--red-s); }
.sealed .lock .ic { width: 32px; height: 32px; }
.sealed b { display: block; font-size: 16px; font-weight: 780; margin-bottom: 4px; }
.sealed p { margin: 0; color: var(--muted); font-size: 13.5px; }
.sealed .btn { height: auto; min-height: 34px; margin-top: 12px; padding: 7px 13px; white-space: normal; text-align: left; }

/* tables: pencil rules, ranks in drawn circles, the leader highlighted */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table th { text-align: left; font-size: 11.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--pencil-2); white-space: nowrap; }
.table td { padding: 11px 10px; border-bottom: 1.5px solid var(--pencil); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--t2); }
.table tbody tr:hover { background: var(--sheet-2); }
.table td.num, .table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .rank { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sheet); font-weight: 780; font-size: 12px; }
.table .rank { --ring-c: var(--outline-soft); }
.table tr.top .rank { background-color: var(--mint); background-image: var(--hatch); color: var(--on-fill); }
.table tr.top .rank { --ring-c: var(--outline); }
.table tr.top td { background: color-mix(in srgb, var(--mint) 14%, transparent); }
.table .sub { display: block; color: var(--faint); font-size: 12px; font-family: var(--mono); }
.bar { height: 8px; border-radius: 6px; background: var(--pencil); overflow: hidden; margin-top: 7px; min-width: 70px; }
.bar i { display: block; height: 100%; border-radius: 6px; background-color: var(--sky); background-image: var(--hatch); box-shadow: inset 0 0 0 1.4px var(--sky-s); transform-origin: 0 50%; }
.bar.go i { background-color: var(--mint); box-shadow: inset 0 0 0 1.4px var(--mint-s); }
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.table tr.ours td { background: var(--sun-t); }
.table tr.ours td:first-child { box-shadow: inset 4px 0 0 var(--sun-s); }

/* ---------- "can we win": the calculator ---------- */
.calc { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.calc .field { flex: 1 1 220px; }
.money-input { position: relative; }
.money-input .input { width: 100%; padding-left: 32px; font-variant-numeric: tabular-nums; }
.money-input::before { content: "₴"; position: absolute; left: 13px; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--muted); font-weight: 750; }
.range { display: flex; align-items: center; gap: 12px; }
.range output { min-width: 50px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
/* a range: a pencil groove with a highlighter fill to the thumb (app.js keeps --val up to date) */
input[type="range"] {
  --val: 50%;
  flex: 1; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--outline);
  background: linear-gradient(90deg, var(--sun) 0 var(--val), var(--sheet-2) var(--val) 100%);
}
input[type="range"]::-moz-range-track { height: 10px; border-radius: 6px; background: var(--sheet-2); box-shadow: inset 0 0 0 2px var(--outline); }
input[type="range"]::-moz-range-progress { height: 10px; border-radius: 6px; background: var(--sun); }
input[type="range"]::-webkit-slider-thumb {
  width: 24px; height: 24px; margin-top: -7px; border-radius: 50%; -webkit-appearance: none; appearance: none;
  background: var(--coral); box-shadow: 0 0 0 2.2px var(--ink), 0 3px 0 2px var(--key); transition: transform var(--t1) var(--ease);
}
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 2.2px solid var(--ink); border-radius: 50%; background: var(--coral); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2.2px var(--ink), 0 0 0 6px color-mix(in srgb, var(--sky-s) 35%, transparent); }

/* the verdict: a rubber stamp on the sheet */
.verdict {
  --tone: var(--sun-s); --tone-fill: var(--sun); --tone-t: var(--sun-t); --tone-on: var(--sun-on);
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 20px 22px; border-radius: var(--r-lg);
  background: var(--tone-t);
}
.verdict.go { --tone: var(--mint-s); --tone-fill: var(--mint); --tone-t: var(--mint-t); --tone-on: var(--mint-on); }
.verdict.nogo { --tone: var(--red-s); --tone-fill: var(--red); --tone-t: var(--red-t); --tone-on: var(--red-on); }
.verdict .seal {
  position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  color: var(--tone); transform: rotate(-9deg);
  box-shadow: inset 0 0 0 3px var(--tone), inset 0 0 0 5.5px var(--tone-t), inset 0 0 0 7.5px var(--tone);
}
.verdict .seal .ic { width: 32px; height: 32px; stroke-width: 2.6; }
.verdict .label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tone-on); }
.verdict .headline { margin-top: 3px; font-size: 30px; font-weight: 840; letter-spacing: -.035em; line-height: 1.1; }
.verdict .headline small { margin-left: 8px; font-size: 14px; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.kpi { padding: 12px 14px; border-radius: var(--r); background: var(--sheet); }
.kpi small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.kpi b { display: block; margin-top: 3px; font-size: 21px; font-weight: 820; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.gauge-wrap { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: center; }
.gauge { width: 160px; height: 96px; overflow: visible; }
.gauge .track { stroke: var(--pencil-2); stroke-dasharray: 2 7; }
.gauge .val { stroke: var(--tone, var(--sky-s)); transition: stroke-dashoffset 1.1s var(--ease-out); }
.gauge .low { stroke: color-mix(in srgb, var(--tone, var(--sky-s)) 38%, transparent); transition: stroke-dashoffset 1.1s var(--ease-out); }
.gauge text { fill: var(--ink); font: 840 24px var(--font); letter-spacing: -.03em; }
.gauge .cap { fill: var(--muted); font: 700 10px var(--font); letter-spacing: .02em; }
.list-why { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.list-why li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.list-why li .ic { margin-top: 2px; color: var(--mint-s); }
.list-why.risks li .ic { color: var(--sun-s); }
.curve { width: 100%; height: 130px; overflow: visible; }
.curve .area { fill: color-mix(in srgb, var(--sky) 26%, transparent); }
.curve .line { fill: none; stroke: var(--sky-s); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.curve .mark { fill: var(--coral); stroke: var(--ink); stroke-width: 2; }
.curve .axis { fill: var(--muted); font: 650 10px var(--font); }
.an-notes { display: flex; flex-direction: column; gap: 7px; }

/* the alert as it will arrive: a phone's chat on paper */
.tldr { padding: 16px; border-radius: var(--r-lg); background: var(--sheet-2); }
.tldr::after { border: 1.8px dashed var(--outline-soft); border-image: none; border-radius: inherit; }
.tldr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.tldr-head .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sheet); box-shadow: 0 0 0 1.8px var(--outline); }
.tldr-head .av svg { width: 22px; height: 22px; }
.bubble-msg {
  position: relative; max-width: 580px; padding: 13px 15px 24px; border-radius: 6px 18px 18px 18px; background: var(--sheet);
  box-shadow: 0 0 0 1.8px var(--outline-soft), var(--shadow-1); font-size: 14px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere;
}
.bubble-msg p { margin: 0 0 6px; }
.bubble-msg ul { margin: 4px 0 0; padding-left: 18px; }
.bubble-msg li { margin: 2px 0; }
.bubble-msg .stamp { position: absolute; right: 12px; bottom: 6px; font-size: 11px; color: var(--faint); }
.bubble-msg.small { padding: 10px 12px; font-size: 13px; }

/* ---------- forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form .full { grid-column: 1 / -1; }
.err { color: var(--red-ink); font-size: 12.5px; font-weight: 700; }
.err:empty { display: none; }
:root[data-theme="dark"] .err { color: var(--red-s); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .err { color: var(--red-s); } }
.mini-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mini {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 11px 13px; border-radius: var(--r);
  background: var(--sheet); cursor: pointer; transition: transform var(--t2) var(--ease), background-color var(--t2);
}
.mini:hover { transform: translateX(3px); background: var(--sheet-2); }
.mini span { font-size: 13.5px; font-weight: 650; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.mini small { color: var(--muted); font-size: 12px; }
.mini .money { font-weight: 800; font-size: 13.5px; text-align: right; }
.mini > .badge { justify-self: end; align-self: start; }
.mini > small:not(.side) { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini > .side { text-align: right; white-space: nowrap; }

/* ---------- the company's workspace ---------- */
.me-card {
  display: flex; align-items: center; gap: 11px; margin-top: -6px; padding: 11px 12px; border-radius: var(--wonky);
  background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-1); transition: transform var(--t2) var(--ease), box-shadow var(--t2);
}
.me-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-2); }
.me-card:hover::after { border-image-source: var(--fr-ink); }
.me-av {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background-color: var(--coral); background-image: var(--hatch); color: #1d1b22; font-weight: 820; font-size: 13px;
}
.me-av { --ring-c: var(--ink); }
.me-av.sm { width: 30px; height: 30px; font-size: 12px; background-color: var(--sheet-3); color: var(--ink-2); }
.me-av.sm { --ring-c: var(--outline-soft); }
.me-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.me-t b, .me-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-t b { font-size: 13.5px; font-weight: 750; }
.me-t small { color: var(--muted); font-size: 12px; }
.me-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.card.fits { }

/* overview */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 26px; align-items: start; }
.home-side { display: flex; flex-direction: column; gap: 16px; }
.home-sec > .section-title { flex-wrap: wrap; margin-top: 4px; }
.home-sec .seg button { white-space: nowrap; }
.sec-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.computing { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 650; }
.stage-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.stage-pill {
  --stage: var(--sky-s);
  flex: 1 1 88px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 10px 4px 9px;
  border-radius: var(--r-sm); background: var(--sheet); color: var(--ink); transition: transform var(--t2) var(--ease), background-color var(--t2);
}
.stage-pill:hover { text-decoration: none; transform: translateY(-2px); background: color-mix(in srgb, var(--stage) 14%, var(--sheet)); }
.stage-pill b { font-size: 21px; font-weight: 820; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stage-pill b::after { content: ""; display: block; height: 4px; margin: 3px auto 0; width: 22px; border-radius: 3px; background: var(--stage); }
/* a long stage name ("Готовлю предложение") takes two lines rather than losing its end */
.stage-pill span { max-width: 100%; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; text-wrap: balance; }
[data-stage="look"] { --stage: var(--sky-s); }
[data-stage="prepare"] { --stage: var(--sun-s); }
[data-stage="submitted"] { --stage: var(--violet-s); }
[data-stage="won"] { --stage: var(--mint-s); }
[data-stage="lost"] { --stage: var(--red-s); }
[data-stage="skip"] { --stage: var(--faint); }
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mini-stats > div { padding: 11px 13px; border-radius: var(--r); background: var(--sheet-2); }
.mini-stats b { display: block; font-size: 20px; font-weight: 820; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mini-stats small { color: var(--muted); font-size: 12px; }
.rivals { display: flex; flex-direction: column; gap: 14px; }
.list-h { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rival { display: flex; align-items: center; gap: 11px; padding: 7px 0; }
.rival + .rival { border-top: 1.5px dashed var(--pencil); }
.rival > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rival b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rival small { color: var(--muted); font-size: 12px; }

/* notifications that were sent */
.inbox { display: flex; flex-direction: column; gap: 7px; }
.msg { border-radius: var(--r); background: var(--sheet-2); overflow: hidden; }
.msg summary { display: flex; align-items: center; gap: 8px; padding: 9px 11px; cursor: pointer; list-style: none; }
.msg summary::-webkit-details-marker { display: none; }
.msg summary:hover { background: var(--sheet-3); }
.msg .badge { height: 21px; padding: 0 8px; font-size: 11px; }
.msg-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg time { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.msg .bubble-msg { margin: 2px 10px 10px; max-width: none; }

/* the board: columns pinned to the wall, tenders as small sheets */
.board { display: grid; grid-template-columns: repeat(6, minmax(166px, 1fr)); gap: 10px; align-items: start; overflow-x: auto; padding: 14px 4px 14px; scroll-snap-type: x proximity; }
.col {
  display: flex; flex-direction: column; min-height: 280px; border-radius: var(--r-lg); background: var(--sheet-2); scroll-snap-align: start;
}
/* a strip of tape holding each column */
.col::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 64px; height: 20px; z-index: 2; transform: translateX(-50%) rotate(-2deg);
  background: color-mix(in srgb, var(--stage) 38%, rgba(255, 255, 255, .55)); box-shadow: 0 1px 2px rgba(29, 27, 34, .12); opacity: .9;
}
.col:nth-child(even)::before { transform: translateX(-50%) rotate(2.5deg); }
.col-head { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 16px 12px 8px; font-size: 13.5px; line-height: 1.25; }
.col-head::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--stage); box-shadow: 0 0 0 1.5px var(--outline); }
.col-head b { font-weight: 780; }
.col-head .n {
  margin-left: auto; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--pencil-2);
  color: var(--ink-2); font: 780 12px/24px var(--font); text-align: center;
}
.col-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 4px 7px 12px; border-radius: 0 0 var(--r-lg) var(--r-lg); transition: background-color var(--t2), box-shadow var(--t2); }
.col-body.over { background: color-mix(in srgb, var(--stage) 12%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--stage) 60%, transparent); }
.drop-hint { display: none; padding: 18px 10px; border-radius: var(--r); border: 2px dashed var(--pencil-2); color: var(--faint); font-size: 12.5px; text-align: center; }
.col-body:not(:has(.bcard)) .drop-hint, .col-body.over .drop-hint { display: block; }
.col.won .col-head b { color: var(--mint-ink); }
:root[data-theme="dark"] .col.won .col-head b { color: var(--mint-s); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .col.won .col-head b { color: var(--mint-s); } }
.col.dim { background: transparent; }
.col.dim::after { border: 1.8px dashed var(--outline-soft); border-image: none; border-radius: inherit; }
.col.dim .bcard:not(:hover)::before { opacity: .45; } /* a quieter status strip; the text keeps full ink (fading the card took it below AA) */
.bcard {
  --status: var(--pencil-2);
  padding: 12px 10px 10px 17px; border-radius: var(--r); background: var(--sheet); box-shadow: var(--shadow-1);
  cursor: grab; outline: none; transition: transform var(--t2) var(--ease), box-shadow var(--t2), opacity var(--t2);
}
.bcard::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 4px; border-radius: 3px; background: var(--status); }
.bcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.bcard:focus-visible { outline: 2.5px solid var(--sky-s); outline-offset: 3px; }
.bcard.dragging { opacity: .55; transform: rotate(2deg) scale(.97); cursor: grabbing; }
.bcard .top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.bcard .top .badge { display: inline-block; max-width: 100%; height: 21px; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 21px; }
.bcard .top .badge::before { display: none; }
.bcard .vchip { height: 21px; padding: 0 8px; font-size: 10px; }
.bcard h4 { margin: 0; font-size: 13.5px; line-height: 1.35; font-weight: 720; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: break-word; } /* a code longer than the card («021:2015:09130000-9») wraps instead of being cut at its edge */
.bmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 9px; color: var(--muted); font-size: 12.5px; }
.bmeta .money { color: var(--ink); font-size: 14.5px; font-weight: 800; }
.bnote { display: flex; gap: 6px; margin: 9px 0 0; padding: 7px 9px; border-radius: 8px; background: var(--sun-t); color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.bnote .ic { flex: none; margin-top: 2px; color: var(--sun-s); }
.bfoot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
/* the stage gets the card's whole width (the × sits in the card's corner); a name still too long ends in "…", never mid-letter */
.bfoot .select { flex: 1; min-width: 0; padding-left: 8px; padding-right: 20px; font-size: 12px; background-position: calc(100% - 7px) 50%;
  background-size: 11px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bfoot .icon-btn { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; }
.bcard .top { padding-right: 28px; }
.empty.wide { grid-column: 1 / -1; }

/* ---------- onboarding: one sheet, five steps ---------- */
.onboard {
  position: fixed; inset: 0; z-index: 92; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px;
  overflow-y: auto; overscroll-behavior: contain; background: var(--scrim); backdrop-filter: blur(5px);
}
.ob-card {
  width: min(900px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); background-color: var(--paper); background-image: var(--grain); box-shadow: var(--shadow-3);
}
.ob-card::after { border-image-source: var(--fr-ink); }
.ob-head { display: flex; align-items: center; gap: 14px; padding: 22px 26px 0; }
.ob-head .brand-mark { width: 46px; height: 46px; }
.ob-head b { display: block; font-size: 16.5px; font-weight: 780; letter-spacing: -.01em; }
.ob-head small { color: var(--muted); font-size: 13px; }
.ob-head .icon-btn { margin-left: auto; }
/* progress: five marker strokes, filled as you go */
.ob-progress { display: flex; gap: 8px; padding: 18px 26px 0; }
.ob-progress i { position: relative; flex: 1; height: 9px; border-radius: 6px; background: var(--sheet-3); box-shadow: inset 0 0 0 1.5px var(--pencil-2); overflow: hidden; }
.ob-progress i.done { background-color: var(--mint); background-image: var(--hatch); box-shadow: inset 0 0 0 1.8px var(--mint-s); }
.ob-progress i.now { box-shadow: inset 0 0 0 1.8px var(--outline); }
.ob-progress i.now::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background-color: var(--sky); background-image: var(--hatch); transform-origin: 0 50%; transform: scaleX(.5); }
.ob-step { padding: 20px 26px 0; }
.ob-step .step-no { color: var(--coral-ink); font-size: 13px; font-weight: 750; letter-spacing: .01em; } /* not uppercase: «З» would read as a 3 */
.ob-step h2 { margin: 6px 0 6px; font-size: 30px; font-weight: 820; letter-spacing: -.03em; }
.ob-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 26px 24px; }
.ob-body.with-preview { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.ob-foot { position: relative; display: flex; align-items: center; gap: 10px; padding: 15px 26px; background: var(--sheet-2); }
.ob-foot::before { content: ""; position: absolute; left: 16px; right: 16px; top: -2px; height: 6px; background: var(--rule-h) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.ob-done { align-items: center; gap: 6px; width: min(560px, 100%); padding: 38px 30px 32px; text-align: center; }
.ob-done .done-art { width: 260px; max-width: 80%; height: auto; margin: 0 auto 4px; }
.ob-done h2 { margin: 10px 0 4px; font-size: 30px; font-weight: 820; letter-spacing: -.03em; }
.ob-done p { margin: 0 0 20px; color: var(--muted); }
.ob-done .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.done-seal {
  width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; color: var(--on-fill);
  background-color: var(--mint); background-image: var(--hatch); box-shadow: 0 0 0 2.4px var(--ink), 0 6px 0 2px var(--key);
}
.done-seal .ic { width: 42px; height: 42px; stroke-width: 2.6; }

/* ---------- the profile form, in onboarding and on the company page ---------- */
.sec-body { display: grid; gap: 15px; }
.sec-lead { margin: 0; color: var(--muted); font-size: 14px; }
.kind-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kind-card {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; column-gap: 13px; row-gap: 2px;
  padding: 15px 42px 15px 15px; border: 0; border-radius: var(--wonky); background: var(--sheet); color: var(--ink); text-align: left;
  box-shadow: var(--shadow-1); transition: transform var(--t2) var(--ease), background-color var(--t2), box-shadow var(--t2);
}
.kind-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kind-card:hover::after { border-image-source: var(--fr-ink); }
.kind-card.on { background: var(--sky-t); }
.kind-card.on::after { border-image-source: var(--fr-ink); }
.kind-ic { grid-row: span 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--sheet-2); color: var(--ink-2); transition: background-color var(--t2), color var(--t2); }
.kind-ic { --ring-c: var(--outline-soft); }
.kind-card.on .kind-ic { background-color: var(--sky); background-image: var(--hatch); color: var(--on-fill); }
.kind-card.on .kind-ic { --ring-c: var(--outline); }
.kind-card b { font-size: 15.5px; font-weight: 760; }
.kind-card small { grid-column: 2; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.kind-card .tick {
  position: absolute; right: 13px; top: 13px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--mint); color: var(--on-fill); box-shadow: 0 0 0 2px var(--ink); transform: scale(0); transition: transform var(--t3) var(--ease-pop);
}
.kind-card.on .tick { transform: scale(1); }
.kind-card .tick .ic { width: 14px; height: 14px; stroke-width: 3; }
.lookup { display: grid; gap: 8px; }
.lookup:empty { display: none; }
.found { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r); background: var(--mint-t); }
.found-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background-color: var(--mint); background-image: var(--hatch); color: var(--on-fill); box-shadow: 0 0 0 2px var(--ink); }
.found > div { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.found small { color: var(--mint-on); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.found b { font-size: 15px; font-weight: 760; overflow-wrap: anywhere; }
.found span { color: var(--ink-2); font-size: 12.5px; }
.warn-line { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 13px; border-radius: var(--r-sm); background: var(--sun-t); color: var(--sun-on); font-size: 13px; font-weight: 650; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px; border-radius: var(--r); cursor: pointer;
  background: var(--sheet); transition: background-color var(--t2);
}
.check:has(input:checked) { background: var(--mint-t); }
.check:has(input:checked)::after { border-image-source: var(--fr-ink); }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .tick-box {
  position: relative; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px 8px 6px 9px;
  background: var(--sheet); box-shadow: 0 0 0 2px var(--outline); color: transparent; transition: background-color var(--t2), color var(--t2);
}
.check .tick-box .ic { width: 15px; height: 15px; stroke-width: 3; }
.check input:checked + .tick-box { background: var(--mint); color: var(--on-fill); box-shadow: 0 0 0 2px var(--ink); }
.check input:focus-visible + .tick-box { outline: 2.5px solid var(--sky-s); outline-offset: 3px; }
.check b { display: block; font-size: 14px; font-weight: 720; }
.check small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.templates.compact { container: tiles / inline-size; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 9px; }
.templates.compact .tpl { grid-template-columns: 34px minmax(0, 1fr); column-gap: 9px; min-height: 58px; padding: 10px; }
.templates.compact .tpl .badge-ic { grid-row: auto; width: 34px; height: 34px; }
.templates.compact .tpl .badge-ic .ic { width: 18px; height: 18px; }
/* names wrap at spaces only, never «Постачальни|к»: a 178px tile keeps 115px beside its icon, and the longest
   word («Компьютерная») needs 112 even in a wide font (DejaVu Sans) */
.templates.compact .tpl b { padding-right: 0; font-size: 13px; overflow-wrap: normal; }
/* two tiles side by side on a phone are narrower than that: the icon goes above the name */
@container tiles (max-width: 364px) {
  .templates.compact .tpl { grid-template-columns: minmax(0, 1fr); row-gap: 7px; align-content: start; }
}
.templates.compact .tpl.on .badge-ic::before {
  content: ""; position: absolute; right: -6px; top: -6px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink);
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.2 12.8c1.6 1.4 3 2.8 4.3 4.4C12.4 13 15.6 9.6 18.9 6.8' fill='none' stroke='%231D1B22' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.ratio-row { display: flex; align-items: center; gap: 20px; }
.ratio-row .range { flex: 1; }
.big-pct { min-width: 104px; color: var(--ink); font-size: 44px; font-weight: 840; letter-spacing: -.04em; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.note-line { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 13px; border-radius: var(--r-sm); background: var(--sheet-2); color: var(--ink-2); font-size: 13px; }
.note-line .ic { flex: none; margin-top: 1px; }
.note-line.go { background: var(--mint-t); color: var(--mint-on); }
.note-line.warn { background: var(--sun-t); color: var(--sun-on); }
.note-line.info { background: var(--sky-t); color: var(--sky-on); }
.channel-box { display: grid; gap: 11px; padding: 15px 17px; border-radius: var(--r); background: var(--sheet-2); }
.channel-box h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 760; }
.channel-box .muted.small { display: flex; align-items: center; gap: 6px; margin: 0; }
.steps-mini { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 13px; }
.steps-mini li::marker { color: var(--coral-ink); font-weight: 800; }
.tg-chats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tg-chats:empty { display: none; }
.tg-chats > small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.test-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.test-result { display: flex; flex-wrap: wrap; gap: 6px; }
.linkish { justify-self: start; padding: 0; border: 0; background: none; color: var(--sky-ink); font-size: 12.5px; font-weight: 650; text-align: left; }
.linkish:hover { text-decoration: underline wavy var(--coral); text-underline-offset: 3px; }

/* how many tenders the profile catches, live */
.preview-card { padding: 20px; border-radius: var(--r-xl); color: var(--on-fill); background-color: var(--sun); background-image: var(--hatch-soft); box-shadow: var(--shadow-1); }
.preview-card::after { border-image-source: var(--fr-black); }
.preview-card > small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.pv-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; margin: 6px 0 14px; }
.pv-num b { font-size: 46px; font-weight: 860; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.pv-sub { font-size: 13.5px; font-weight: 650; opacity: .85; }
.pv-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pv-list:empty { display: none; }
.pv-list li { display: grid; gap: 2px; padding: 9px 11px; border-radius: var(--r-sm); background: #fbf9f4; color: #1d1b22; font-size: 12.5px; }
.pv-list li::after { border-image-source: var(--fr-black); opacity: .45; }
.pv-list li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-list li small { color: #5b5563; font-weight: 700; }

/* the company page */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 26px; align-items: start; }
.co-main { display: flex; flex-direction: column; gap: 18px; }
.co-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.co-sec { scroll-margin-top: 24px; }
.co-sec > h3 .ic { color: var(--ink); }
.save-bar {
  position: fixed; z-index: 45; bottom: 24px; left: calc(var(--side) + (100vw - var(--side)) / 2); width: min(660px, calc(100vw - var(--side) - 32px));
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 20px; border-radius: 22px 24px 21px 25px;
  background: #1d1b22; color: #fbf9f4; box-shadow: var(--shadow-3);
  opacity: 0; pointer-events: none; transform: translate(-50%, 150%); transition: transform var(--t4) var(--ease-pop), opacity var(--t2);
}
:root[data-theme="dark"] .save-bar { background: #2b2360; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .save-bar { background: #2b2360; } }
.save-bar.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
body:has(.save-bar.on) .toasts { bottom: 100px; }
body:has(.save-bar.on) .chat-fab { display: none; } /* it sat on «Зберегти» on a phone; Ctrl+K still opens the assistant */
.save-bar > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }
.save-bar > span:first-child .ic { color: var(--sun); }
.save-bar .btn.ghost { color: #fbf9f4; }
.save-bar .btn.ghost:hover { background: rgba(255, 255, 255, .1); }
.save-bar .btn.primary { box-shadow: 0 3px 0 rgba(0, 0, 0, .55); }

/* the tender card, personal parts */
.foryou { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.watch-box { background: var(--sun-t); }
.watch-box h3 .ic { color: var(--sun-s); }
.watch-row { display: flex; align-items: flex-start; gap: 12px; }
.watch-row > .field:first-child { flex: 0 0 214px; }
.field.grow { flex: 1; }
.docs { display: flex; flex-direction: column; }
.doc { position: relative; display: flex; align-items: center; gap: 2px; border-radius: var(--r-sm); transition: background-color var(--t2); }
.doc + .doc::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; border-top: 1.5px dashed var(--pencil); }
.doc:hover { background: var(--sheet-2); }
.doc-open {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 12px;
  padding: 10px 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.doc-open:focus-visible { outline: 2.5px solid var(--sky-s); outline-offset: 1px; }
.doc-open:disabled { cursor: default; }
.doc-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-t > span { font-size: 13.5px; font-weight: 650; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-t small { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; color: var(--faint); font-size: 12px; }
.doc-eye { display: grid; place-items: center; color: var(--faint); opacity: 0; transition: opacity var(--t2), color var(--t2), transform var(--t2); }
.doc:hover .doc-eye, .doc-open:focus-visible .doc-eye { opacity: 1; color: var(--ink); transform: translateX(2px); }
.doc-dl { flex: none; width: 34px; height: 34px; box-shadow: none; background: transparent; color: var(--faint); }
.doc-dl::after { border-image-source: none; }
.doc-dl:hover { color: var(--ink); background: var(--sheet); box-shadow: 0 2px 0 var(--key); }
.doc-dl:hover::after { border-image-source: var(--frs); }
.doc.off { opacity: .62; }
.doc-seal { display: inline-flex; align-items: center; gap: 3px; color: var(--mint-ink); }
:root[data-theme="dark"] .doc-seal { color: var(--mint-s); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .doc-seal { color: var(--mint-s); } }
/* a file's type: a little highlighter label */
.doc-ic {
  --dc: var(--doc-plain);
  width: 44px; height: 32px; display: grid; place-items: center; border-radius: 6px 8px 5px 9px;
  background-color: var(--dc); background-image: var(--hatch); color: #1d1b22; font: 820 10.5px/1 var(--font); letter-spacing: .04em;
}
.doc-ic::after { border-width: 8px; border-image: var(--frs-black) 12 / 8px / 0 stretch; }
.doc-ic[data-ext="PDF"] { --dc: var(--red); }
.doc-ic[data-ext="DOC"], .doc-ic[data-ext="DOCX"], .doc-ic[data-ext="RTF"], .doc-ic[data-ext="ODT"] { --dc: var(--sky); }
.doc-ic[data-ext="XLS"], .doc-ic[data-ext="XLSX"], .doc-ic[data-ext="ODS"], .doc-ic[data-ext="CSV"] { --dc: var(--mint); }
.doc-ic[data-ext="ZIP"], .doc-ic[data-ext="RAR"], .doc-ic[data-ext="7Z"], .doc-ic[data-ext="ASIC"] { --dc: var(--violet); }
.doc-ic[data-ext="JPG"], .doc-ic[data-ext="JPEG"], .doc-ic[data-ext="PNG"], .doc-ic[data-ext="BMP"], .doc-ic[data-ext="GIF"] { --dc: var(--sun); }
.docs-tabs { margin: -2px 0 12px; max-width: 100%; overflow-x: auto; }
.docs-tabs button small { margin-left: 6px; font-weight: 650; font-variant-numeric: tabular-nums; } /* full colour: at .7 it fell to 3.4:1 */
.doc-who { position: relative; }
.doc-who + .doc-who::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; border-top: 1.5px dashed var(--pencil); }
.doc-who-h {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 8px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer;
}
.doc-who-h:hover { background: var(--sheet-2); }
.doc-who-h > span:not(.badge) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-who-h > .ic:first-child { color: var(--faint); }
.doc-who-h small { color: var(--faint); font-weight: 550; white-space: nowrap; }
.doc-who-h .chev { color: var(--faint); transition: transform var(--t2) var(--ease); }
.doc-who.open .doc-who-h .chev { transform: rotate(180deg); }
.doc-who .docs { padding: 0 0 6px 18px; }
.docs-all { margin-top: 8px; }
.docs-hint { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--faint); font-size: 12px; line-height: 1.4; }
.docs-hint .ic { flex: none; }
.ic.up { transform: rotate(180deg); }

/* ---------- login, toasts, dialogs, the tour ---------- */
.modal.login { display: grid; gap: 12px; width: min(430px, 100%); }
.modal.login .art, .modal.login .pai-art { width: 120px; height: auto; margin: 0 auto 2px; }
.modal.login h2 { margin: 0; }
.modal.login p { margin: 0 0 6px; }
.modal.login .input { height: 50px; font-size: 16px; text-align: center; }
.modal.login .login-err { margin: 0; color: var(--red-ink); font-size: 13.5px; font-weight: 700; }
:root[data-theme="dark"] .modal.login .login-err { color: var(--red-s); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .modal.login .login-err { color: var(--red-s); } }
.toasts { position: fixed; left: 50%; bottom: 28px; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 20px 22px 19px 23px;
  background: #1d1b22; color: #fbf9f4; box-shadow: var(--shadow-3); font-size: 14px; font-weight: 650;
}
.toast .ic { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--coral); color: #1d1b22; stroke-width: 2.4; }
:root[data-theme="dark"] .toast { background: #f1eef8; color: #0e0b26; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .toast { background: #f1eef8; color: #0e0b26; } }
.modal-wrap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: var(--scrim); backdrop-filter: blur(5px); }
.modal {
  width: min(560px, 100%); padding: 30px; border-radius: var(--r-xl); background-color: var(--paper); background-image: var(--grain);
  box-shadow: var(--shadow-3); text-align: center;
}
.modal::after { border-image-source: var(--fr-ink); }
.modal .art { width: 96px; height: 96px; margin: 0 auto 14px; }
.modal h2 { margin: 0 0 8px; font-size: 26px; font-weight: 820; letter-spacing: -.03em; }
.modal p { margin: 0 0 20px; color: var(--muted); }
.modal .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tour { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.tour .spot {
  position: absolute; border-radius: var(--r-lg); box-shadow: 0 0 0 9999px var(--scrim), 0 0 0 3px var(--coral), 0 0 0 7px color-mix(in srgb, var(--coral) 30%, transparent);
  transition: all var(--t4) var(--ease-out); pointer-events: none;
}
.tour .tip-card {
  position: absolute; width: min(350px, calc(100vw - 32px)); padding: 20px; border-radius: var(--r-xl); background-color: var(--paper); background-image: var(--grain);
  box-shadow: var(--shadow-3); pointer-events: auto; transition: top var(--t4) var(--ease-out), left var(--t4) var(--ease-out);
}
.tour .tip-card .step-no { font-size: 13px; font-weight: 750; color: var(--coral-ink); }
.tour .tip-card p { margin: 6px 0 16px; font-size: 15px; }
.tour .tip-card .actions { display: flex; gap: 8px; align-items: center; }
.tour .dots { display: flex; gap: 6px; margin-right: auto; }
.tour .dots i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--outline-soft); transition: all var(--t3) var(--ease); }
.tour .dots i.on { width: 22px; border-radius: 5px; background: var(--coral); box-shadow: inset 0 0 0 1.6px var(--ink); }

/* ---------- the guide ---------- */
.hero-guide {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: center; padding: 32px; border-radius: var(--r-xl);
  background: var(--sheet); box-shadow: var(--shadow-2);
}
.hero-guide h1 { margin: 0 0 12px; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.12; font-weight: 830; letter-spacing: -.03em; }
.hero-guide h1::after { content: ""; display: block; width: 200px; max-width: 70%; height: 14px; margin-top: 8px; background: var(--squiggle) left center / 100% 100% no-repeat; }
.hero-guide p { margin: 0 0 20px; color: var(--muted); font-size: 15.5px; max-width: 540px; }
.flow { width: 100%; height: auto; overflow: visible; }
.flow .node rect { fill: var(--sheet); stroke: var(--outline-soft); stroke-width: 1.8; }
.flow .node .hl { stroke: none; filter: none; }
.flow .node text { fill: var(--ink); font: 760 14px var(--font); }
.flow .node .sub { fill: var(--muted); font: 600 11.5px var(--font); }
.flow .node .glyph { color: var(--on-fill); }
.flow .wire { fill: none; stroke: var(--outline); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 7; }
.flow .wire-head { fill: none; stroke: var(--outline); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.flow .packet { fill: var(--coral); stroke: var(--ink); stroke-width: 1.6; }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.gstep {
  --c: var(--mint);
  display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; border-radius: var(--wonky); background: var(--sheet);
  box-shadow: var(--shadow-1); transition: transform var(--t2) var(--ease), box-shadow var(--t2);
}
.gstep:nth-child(2) { --c: var(--sky); } .gstep:nth-child(3) { --c: var(--pink); } .gstep:nth-child(4) { --c: var(--sun); } .gstep:nth-child(5) { --c: var(--violet); }
.gstep:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.gstep .no {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background-color: var(--c); background-image: var(--hatch);
  color: var(--on-fill); box-shadow: 0 0 0 2.2px var(--ink); font-size: 17px; font-weight: 840;
}
.gstep h3 { margin: 2px 0 0; font-size: 16.5px; font-weight: 780; letter-spacing: -.015em; }
.gstep p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.gstep .btn { align-self: flex-start; }
.verdicts { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 12px; }
.vcard { display: flex; gap: 14px; padding: 17px; border-radius: var(--r-lg); background: var(--sheet); box-shadow: var(--shadow-1); }
.vcard .seal {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: transparent !important;
  color: var(--v, var(--sun-s)); transform: rotate(-9deg); box-shadow: inset 0 0 0 2.6px var(--v, var(--sun-s)), inset 0 0 0 4.6px var(--sheet), inset 0 0 0 6.4px var(--v, var(--sun-s));
}
.vcard .seal .ic { stroke-width: 2.6; }
.vcard b { display: block; font-size: 12.5px; font-weight: 820; letter-spacing: .06em; }
.vcard p { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; }
.acc { border-radius: var(--r-lg); background: var(--sheet); box-shadow: var(--shadow-1); overflow: hidden; }
.acc details { position: relative; }
.acc details + details::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; border-top: 1.5px dashed var(--pencil-2); }
.acc summary {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14.5px;
  transition: background-color var(--t2);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--sheet-2); }
.acc summary .ic.chev { margin-left: auto; color: var(--muted); transition: transform var(--t3) var(--ease); }
.acc details[open] summary .ic.chev { transform: rotate(180deg); }
.acc .ans { padding: 0 20px 18px 52px; color: var(--ink-2); font-size: 14px; }
.acc summary .ic.lead { color: var(--coral-ink); }
.shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 10px; }
.shortcut { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r); background: var(--sheet); font-size: 14px; }
.shortcut kbd { font-size: 12.5px; padding: 5px 9px 4px; border-color: var(--outline); box-shadow: 0 2.5px 0 var(--outline); color: var(--ink); }
/* a tender's path: stations on a pencil line */
.lifecycle { position: relative; display: grid; gap: 9px; padding-left: 26px; }
.lifecycle::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 18px; border-left: 2.2px dashed var(--pencil-2); }
.life {
  display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 13px 17px;
  border: 0; border-radius: var(--r); background: var(--sheet); color: inherit; font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--shadow-1); transition: transform var(--t2) var(--ease), box-shadow var(--t2);
}
.life::before { content: ""; position: absolute; left: -24px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 2px var(--outline); }
.life:hover { transform: translateX(4px); box-shadow: var(--shadow-2); }
.life:hover::after { border-image-source: var(--fr-ink); }
.life:hover::before { background: var(--coral); }
.life p { margin: 0; color: var(--muted); font-size: 14px; }
.life-go { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-size: 13px; font-weight: 650; white-space: nowrap; }
.life:hover .life-go { color: var(--ink); }
/* how to search: examples that run on a click */
.syntax { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.syn {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto auto; gap: 7px 10px; align-items: center;
  padding: 15px 17px; border: 0; border-radius: var(--r-lg); background: var(--sheet); color: var(--ink); text-align: left;
  box-shadow: var(--shadow-1); transition: transform var(--t2) var(--ease), box-shadow var(--t2);
}
.syn code { justify-self: start; padding: 3px 10px; border-radius: 6px 8px 5px 9px; font: 650 13.5px/1.45 var(--mono); background: var(--sun-t); color: var(--ink); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--sun) 60%, transparent); }
.syn span { grid-column: 1; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.syn .ic { grid-column: 2; grid-row: 1 / 3; color: var(--ink); opacity: 0; transform: translateX(-4px); transition: opacity var(--t2), transform var(--t2) var(--ease); }
button.syn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
button.syn:hover::after { border-image-source: var(--fr-ink); }
button.syn:hover .ic { opacity: 1; transform: none; }
.syn.note { grid-template-columns: 20px minmax(0, 1fr); background: transparent; box-shadow: none; }
.syn.note::after { border: 1.8px dashed var(--outline-soft); border-image: none; border-radius: inherit; }
.syn.note .ic { grid-column: 1; grid-row: 1; opacity: 1; transform: none; color: var(--muted); }
.syn.note span { grid-column: 2; }

/* ---------- the document viewer: papers on a desk by day, floating in space by night ---------- */
:root { --view-bg: #e3ddd1; --paper-page: #ffffff; --paper-2: #f3f1ec; --paper-ink: #1b1f27; --paper-muted: #5c6474; --paper-line: #d8d4cb; }
:root[data-theme="dark"] {
  --view-bg: #0b0920; --paper-page: #ffffff; --paper-2: #f3f1ec; --paper-ink: #1b1f27; --paper-muted: #5c6474; --paper-line: #d8d4cb;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { --view-bg: #0b0920; --paper-page: #ffffff; --paper-2: #f3f1ec; --paper-ink: #1b1f27; --paper-muted: #5c6474; --paper-line: #d8d4cb; }
}
.viewer {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background-color: var(--view-bg);
  background-image: var(--grain); opacity: 0; transition: opacity var(--t2) var(--ease);
}
:root[data-theme="dark"] .viewer { background-image: var(--night-sky), radial-gradient(ellipse 70% 60% at 50% 40%, rgba(108, 76, 210, .28), transparent 70%); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .viewer { background-image: var(--night-sky), radial-gradient(ellipse 70% 60% at 50% 40%, rgba(108, 76, 210, .28), transparent 70%); } }
:root {
  /* a few fixed stars for the full-screen layers that cover motion.js's canvas */
  --night-sky: radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, .8), transparent 60%), radial-gradient(1px 1px at 27% 72%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 34%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 63% 81%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.3px 1.3px at 78% 22%, rgba(255, 255, 255, .75), transparent 60%), radial-gradient(1px 1px at 88% 58%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 6% 52%, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(1.2px 1.2px at 36% 90%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1px 1px at 54% 8%, rgba(255, 255, 255, .55), transparent 60%), radial-gradient(1.4px 1.4px at 94% 88%, rgba(255, 255, 255, .65), transparent 60%);
}
.viewer.on { opacity: 1; }
.vw-bar { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; background: var(--paper); }
.vw-bar::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 6px; background: var(--rule-h) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.vw-bar .doc-ic { flex: none; }
.vw-title { flex: 1; min-width: 0; }
.vw-title h2 { margin: 0; overflow: hidden; font-size: 15.5px; font-weight: 740; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.vw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.vw-seal { display: inline-flex; align-items: center; gap: 4px; color: var(--mint-ink); }
:root[data-theme="dark"] .vw-seal { color: var(--mint-s); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .vw-seal { color: var(--mint-s); } }
.vw-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.vw-zoom, .vw-nav { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px 13px 11px 14px; background: var(--sheet); }
.vw-zoom::after, .vw-nav::after { border-image-source: var(--frs); }
.vw-zoom .icon-btn, .vw-nav .icon-btn { width: 30px; height: 30px; box-shadow: none; background: transparent; }
.vw-zoom .icon-btn::after, .vw-nav .icon-btn::after { border-image-source: none; }
.vw-zoom .icon-btn:hover, .vw-nav .icon-btn:hover { background: var(--sheet-2); transform: none; }
.vw-zoom .icon-btn:disabled, .vw-nav .icon-btn:disabled { opacity: .35; cursor: default; }
.vw-zoom-n { min-width: 52px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 700 12.5px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.vw-zoom-n:hover { background: var(--sheet-2); }
.vw-count { min-width: 58px; color: var(--muted); font-size: 12.5px; text-align: center; font-variant-numeric: tabular-nums; }
.vw-mode button { padding: 0 12px; }
.vw-close { flex: none; }
.vw-crumbs { display: flex; align-items: center; gap: 10px; padding: 7px 16px; background: var(--paper); color: var(--muted); font-size: 13px; }
.vw-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-find { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--paper); color: var(--muted); }
.vw-find .input { flex: 1; max-width: 440px; height: 38px; }
.vw-find .input::-webkit-search-cancel-button { display: none; }
.vw-find .icon-btn { width: 32px; height: 32px; }
.vw-hits { min-width: 92px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vw-hits.none { color: var(--red-ink); }
:root[data-theme="dark"] .vw-hits.none { color: var(--red-s); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .vw-hits.none { color: var(--red-s); } }
.vw-body { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 28px 16px 96px; outline: none; } /* room for the assistant's button */
.vw-paper {
  max-width: 880px; margin: 0 auto; padding: 58px 66px; border-radius: 4px; background: var(--paper-page); color: var(--paper-ink);
  box-shadow: 0 2px 0 rgba(15, 20, 30, .06), 0 18px 40px -20px rgba(15, 20, 30, .5);
}
.vw-paper::after { border-image-source: var(--fr-black); opacity: .35; }
.vw-doc { font-size: 15px; line-height: 1.62; overflow-wrap: anywhere; }
.vw-doc p, .vw-doc .vw-h { margin: 0 0 6px; white-space: pre-wrap; tab-size: 4; }
.vw-doc .vw-h { margin: 16px 0 8px; font-weight: 760; line-height: 1.35; }
.vw-doc h3.vw-h { font-size: 19px; }
.vw-doc h4.vw-h { font-size: 17px; }
.vw-doc h5.vw-h, .vw-doc h6.vw-h { font-size: 15.5px; }
.vw-doc .li { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; padding-left: calc(var(--lvl, 0) * 22px); }
.vw-doc .mk { min-width: 16px; font-variant-numeric: tabular-nums; }
.vw-gap { height: 10px; }
.vw-tbl { margin: 10px 0 14px; overflow-x: auto; }
.vw-tbl table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.vw-tbl td, .vw-tbl th { padding: 6px 8px; border: 1px solid var(--paper-line); text-align: left; vertical-align: top; }
.vw-tbl th { background: var(--paper-2); font-weight: 680; }
.vw-tbl p { margin: 0; white-space: pre-wrap; }
.vw-tbl p + p { margin-top: 4px; }
.vw-tbl .li { padding-left: 0; }
.vw-img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.vw-pic { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1.5px dashed var(--paper-line); border-radius: 6px; color: var(--paper-muted); font-size: 12.5px; }
.vw-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; padding: 11px 13px; border-radius: 8px; background: var(--paper-2); color: var(--paper-muted); font-size: 13px; }
.vw-note .btn { margin-left: auto; }
.vw-pages { display: flex; flex-direction: column; align-items: center; gap: 32px; min-width: min-content; padding-bottom: 8px; }
.vw-page { position: relative; width: calc(min(880px, 100vw - 32px) * var(--zoom, 1) * var(--pw, 1)); margin: 0; background: #fff; box-shadow: 0 2px 0 rgba(15, 20, 30, .08), 0 20px 44px -22px rgba(15, 20, 30, .55); }
.vw-page img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity var(--t3); }
.vw-page.ready img { opacity: 1; }
.vw-page:not(.ready)::before { content: ""; position: absolute; inset: 0; background: #faf8f4; }
.vw-page:not(.ready)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, #22a55a 15%, #2e5bdb 40%, #7a47d6 65%, #d02a74 88%, transparent) 0 0 / 100% 2.5px no-repeat;
  filter: drop-shadow(0 0 5px rgba(122, 71, 214, .5));
}
.vw-page.broken::after { display: none; }
/* the page number sits under the page, on a plate of the viewer's own colour: never read against the white page */
.vw-page figcaption {
  position: absolute; left: 50%; bottom: -23px; transform: translateX(-50%); padding: 0 8px; border-radius: 8px; background: var(--view-bg);
  color: var(--muted); font-size: 11.5px; text-align: center; font-variant-numeric: tabular-nums;
}
.vw-retry { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.vw-pageno { position: absolute; left: 50%; bottom: 22px; z-index: 5; padding: 7px 14px; border-radius: 16px; background: #1d1b22; color: #fbf9f4; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity var(--t2); }
.vw-pageno.on { opacity: 1; }
.vw-ptext pre, .vw-pre { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font: 12.5px/1.55 var(--mono); }
.vw-psep { margin: 20px 0 8px; padding-top: 8px; border-top: 1px solid var(--paper-line); color: var(--paper-muted); font-size: 11.5px; font-weight: 650; }
.vw-ptext section:first-child .vw-psep { margin-top: 0; padding-top: 0; border-top: 0; }
.vw-frame { display: flex; flex-direction: column; gap: 8px; height: 100%; max-width: 1100px; margin: 0 auto; }
.vw-frame iframe { flex: 1; width: 100%; min-height: 72vh; border: 0; border-radius: 4px; background: #fff; }
.vw-frame .vw-note { margin: 0; }
.vw-sheet { max-width: 100%; }
.vw-sheets { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; padding: 3px; }
.vw-sheets button { flex: none; height: 34px; padding: 0 13px; border: 0; border-radius: 9px 11px 8px 12px; background: var(--sheet); color: var(--ink-2); font: 650 13px var(--font); cursor: pointer; }
.vw-sheets button::after { border-image-source: var(--frs); }
.vw-sheets button small { margin-left: 6px; color: var(--faint); font-weight: 550; }
.vw-sheets button[aria-selected="true"] { background: var(--sun); color: var(--on-fill); }
.vw-sheets button[aria-selected="true"]::after { border-image-source: var(--frs-ink); }
.vw-sheets button[aria-selected="true"] small { color: inherit; opacity: .75; }
.vw-grid { max-height: calc(100vh - 200px); overflow: auto; border-radius: 6px; background: var(--paper-page); box-shadow: 0 0 0 1.5px rgba(29, 27, 34, .35), 0 18px 40px -22px rgba(15, 20, 30, .5); }
.vw-grid table { border-collapse: separate; border-spacing: 0; color: var(--paper-ink); font-size: 13px; line-height: 1.4; }
.vw-grid td, .vw-grid th { max-width: 380px; padding: 5px 8px; border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); vertical-align: top; overflow-wrap: anywhere; white-space: pre-wrap; }
.vw-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--paper-2); color: var(--paper-muted); font-size: 11.5px; font-weight: 650; text-align: center; }
.vw-grid tbody th { position: sticky; left: 0; z-index: 1; min-width: 40px; background: var(--paper-2); color: var(--paper-muted); font-size: 11.5px; font-weight: 550; text-align: right; }
.vw-grid thead th.corner { left: 0; z-index: 3; }
.vw-grid td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vw-more { display: flex; margin: 14px auto 0; }
.vw-photo-wrap { display: grid; place-items: start center; min-width: min-content; }
.vw-photo { width: calc(min(1100px, 100vw - 32px) * var(--zoom, 1)); height: auto; background: #fff; box-shadow: 0 2px 0 rgba(15, 20, 30, .08), 0 20px 44px -22px rgba(15, 20, 30, .55); cursor: zoom-in; }
.vw-zip { padding: 28px 32px; }
.vw-zip h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; font-weight: 760; }
.vw-zip h3 .ic { color: var(--paper-muted); }
.vw-zip .doc-open { color: var(--paper-ink); }
.vw-zip .doc:hover { background: var(--paper-2); }
.vw-zip .doc-t small { color: var(--paper-muted); }
.vw-empty { display: grid; justify-items: center; gap: 10px; max-width: 560px; margin: 8vh auto 0; padding: 30px 26px; border-radius: var(--r-xl); background: var(--paper); text-align: center; box-shadow: var(--shadow-2); }
.vw-empty > .ic { width: 42px; height: 42px; color: var(--muted); }
.vw-empty h3 { margin: 4px 0 0; font-size: 19px; font-weight: 780; }
.vw-empty p { margin: 0; color: var(--muted); line-height: 1.5; }
.vw-empty .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.vw-wait { display: grid; gap: 16px; max-width: 880px; margin: 0 auto; }
.skel-paper { position: relative; display: grid; align-content: start; gap: 14px; min-height: 340px; overflow: hidden; }
.skel-paper .skel { background: rgba(29, 27, 34, .12); }
.skel-paper .skel:first-child { height: 16px !important; width: 46% !important; background: rgba(29, 27, 34, .32); }
.vw-wait-t { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; color: var(--ink); font-weight: 700; }
.vw-wait .muted { min-height: 1.4em; margin: 0; text-align: center; }
:root[data-theme="dark"] .vw-wait .muted, :root[data-theme="dark"] .vw-page figcaption { color: var(--muted); }
mark.hit { padding: 0 1px; border-radius: 3px; background: #ffe07a; color: #111; box-shadow: 0 0 0 1px #e8b400; }
mark.hit.on { background: #ff9f1a; box-shadow: 0 0 0 2px #e07250; }

/* ---------- the assistant: a sheet docked at the right ---------- */
:root { --chat-w: 0px; }
body.chat-docked { --chat-w: 410px; }
body.chat-docked .app { margin-right: var(--chat-w); }
body.chat-docked .topline { right: var(--chat-w); }
body.chat-docked .drawer { right: var(--chat-w); width: min(760px, calc(100vw - var(--side) - var(--chat-w))); }
/* the card's head fits one row at its full 760px; narrowed by the docked assistant, the number takes a row of its own */
@media (max-width: 1433px) {
  body.chat-docked .drawer-head { flex-wrap: wrap; row-gap: 6px; }
  body.chat-docked .drawer-head .uid { order: 10; flex: 1 1 70%; }
  body.chat-docked .drawer-head .uid + .btn { order: 11; }
}
body.chat-docked .viewer { right: var(--chat-w); }
body.chat-docked .toasts { left: calc((100vw - var(--chat-w)) / 2); }
body.chat-docked .save-bar { left: calc(var(--side) + (100vw - var(--side) - var(--chat-w)) / 2); width: min(660px, calc(100vw - var(--side) - var(--chat-w) - 32px)); }
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 82; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 10px;
  border: 0; border-radius: 24px 26px 23px 27px; background: #1d1b22; color: #fbf9f4; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), var(--shadow-3);
  font-weight: 700; font-size: 14.5px; cursor: pointer; transition: transform var(--t2) var(--ease), box-shadow var(--t2);
}
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab:active { transform: translateY(2px); }
.chat-fab .fab-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fbf9f4; }
.chat-fab .fab-mark svg { width: 24px; height: 24px; overflow: visible; }
.chat-fab > .ic { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--coral); color: #1d1b22; }
.chat-fab kbd { margin-left: 2px; background: transparent; color: rgba(251, 249, 244, .8); border-color: rgba(251, 249, 244, .4); box-shadow: 0 2px 0 rgba(251, 249, 244, .3); }
:root[data-theme="dark"] .chat-fab { background: #f1eef8; color: #0e0b26; }
:root[data-theme="dark"] .chat-fab kbd { color: rgba(14, 11, 38, .75); border-color: rgba(14, 11, 38, .35); box-shadow: 0 2px 0 rgba(14, 11, 38, .25); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .chat-fab { background: #f1eef8; color: #0e0b26; }
  :root[data-theme="auto"] .chat-fab kbd { color: rgba(14, 11, 38, .75); border-color: rgba(14, 11, 38, .35); box-shadow: 0 2px 0 rgba(14, 11, 38, .25); }
}
#chat {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 85; display: flex; flex-direction: column; width: min(450px, 100vw);
  background-color: var(--paper); background-image: var(--grain); box-shadow: var(--shadow-3);
}
#chat::before { content: ""; position: absolute; left: -2px; top: 14px; bottom: 14px; width: 6px; background: var(--rule-v) 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 2; }
body.chat-docked #chat { width: var(--chat-w); box-shadow: none; }
#chat .chat-head { position: relative; display: flex; align-items: center; gap: 6px; min-height: 64px; padding: 10px 10px 10px 16px; }
#chat .chat-head::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 6px; background: var(--rule-h) 0 0 / 100% 100% no-repeat; pointer-events: none; }
#chat .chat-head .head-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 2px var(--outline); }
#chat .chat-head .head-mark svg { width: 28px; height: 28px; overflow: visible; }
#chat .chat-head .t { flex: 1; min-width: 0; }
#chat .chat-head b { display: block; font-size: 15.5px; font-weight: 780; }
#chat .chat-head small { display: block; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#chat .chat-head .icon-btn { box-shadow: none; background: transparent; }
#chat .chat-head .icon-btn::after { border-image-source: none; }
#chat .chat-head .icon-btn:hover, #chat .chat-head .icon-btn[aria-pressed="true"] { background: var(--sheet-2); }
/* the history: every conversation by day, the open one in mint */
#chat .chat-convs { display: flex; flex-direction: column; gap: 4px; padding: 4px 2px 16px; }
#chat .chat-convs-day { margin: 14px 4px 4px; color: var(--muted); font: 750 11.5px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; }
#chat .chat-convs-day:first-child { margin-top: 2px; }
#chat .chat-convs-none { margin: 24px 8px; color: var(--muted); text-align: center; }
#chat .chat-conv { position: relative; display: flex; align-items: center; gap: 4px; border-radius: 12px 14px 11px 15px; }
#chat .chat-conv:hover { background: var(--sheet-2); }
#chat .chat-conv.on { background-color: var(--mint-t); box-shadow: inset 0 0 0 1.6px var(--mint-s); }
#chat .chat-conv-open {
  display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; border: 0; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: inherit;
}
#chat .chat-conv-open .ic { flex: none; color: var(--muted); }
#chat .chat-conv-t { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; font-size: 14px; }
#chat .chat-conv-open small { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#chat .chat-conv-del { flex: none; margin-right: 4px; box-shadow: none; background: transparent; opacity: 0; }
#chat .chat-conv-del::after { border-image-source: none; }
#chat .chat-conv:hover .chat-conv-del, #chat .chat-conv-del:focus-visible, #chat .chat-conv.on .chat-conv-del { opacity: 1; }
#chat .chat-conv.ask { gap: 8px; padding: 8px 8px 8px 12px; background: var(--red-t); box-shadow: inset 0 0 0 1.6px var(--red-s); }
#chat .chat-conv.ask .btn.danger { background: var(--red); color: var(--on-fill); }
@media (hover: none) { #chat .chat-conv-del { opacity: 1; } }
#chat .chat-head .icon-btn:hover::after, #chat .chat-head .icon-btn[aria-pressed="true"]::after { border-image-source: var(--frs); }
.chat-body { flex: 1; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px; }
.cm { max-width: 100%; font-size: 14px; line-height: 1.58; overflow-wrap: anywhere; }
.cm.user {
  align-self: flex-end; max-width: 86%; padding: 10px 14px; border-radius: 16px 6px 16px 16px; background-color: var(--sky-t);
  color: var(--ink); white-space: pre-wrap;
}
.cm.bot { color: var(--ink); }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 22px; }
.md li { margin: 3px 0; }
.md li::marker { color: var(--coral-ink); }
.md .md-h { margin: 12px 0 6px; font-weight: 780; }
.md code { padding: 1px 6px; border-radius: 5px; background: var(--sheet-3); font: 12.5px/1.4 var(--mono); }
.md pre { margin: 0 0 8px; padding: 10px 12px; overflow-x: auto; border-radius: 8px; background: var(--sheet-3); font: 12.5px/1.5 var(--mono); white-space: pre; }
.md blockquote { margin: 0 0 8px; padding-left: 11px; border-left: 3px solid var(--sun); color: var(--ink-2); }
.md .tw { margin: 4px 0 10px; overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 13px; }
.md th, .md td { padding: 5px 8px; border: 1px solid var(--pencil-2); text-align: left; vertical-align: top; }
.md th { background: var(--sheet-2); font-weight: 700; }
.md a { color: var(--sky-ink); text-decoration: underline; text-underline-offset: 2px; }
.md a.uid-link { font: 650 12.5px/1.4 var(--mono); text-decoration: none; border-bottom: 1.5px solid currentColor; }
/* a step: the green/blue/pink pills of the reference, an icon in a paper disc, a waveform while it runs */
.cstep-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 11px; }
.cstep {
  --c: var(--mint);
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 30px; padding: 0 11px 0 3px; border-radius: 15px 16px 14px 17px;
  background-color: var(--c); background-image: var(--hatch-soft); color: var(--on-fill); font-size: 12.5px; font-weight: 650; white-space: nowrap;
}
.cstep::after { border-width: 15px; border-image: var(--frp-black) 16 / 15px / 0 stretch; }
.cstep > .ic, .cstep > .wave { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: #fbf9f4; color: #1d1b22; box-shadow: 0 0 0 1.5px #1d1b22; }
.cstep.run { --c: var(--sky); }
.cstep.bad { --c: var(--red); }
.cstep .arg { overflow: hidden; text-overflow: ellipsis; max-width: 190px; opacity: .8; }
.cstep .wave { display: inline-flex; align-items: center; justify-content: center; gap: 1.5px; padding: 0 4px; }
.cstep .wave i { width: 2.4px; height: 12px; border-radius: 2px; background: #1d1b22; transform-origin: 50% 50%; }
.cstep .wave i:nth-child(2) { transform: scaleY(.6); } .cstep .wave i:nth-child(3) { transform: scaleY(.9); } .cstep .wave i:nth-child(4) { transform: scaleY(.45); }
.chat-wait { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; }
.chat-err { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; padding: 11px 13px; border-radius: var(--r); background: var(--sun-t); color: var(--sun-on); font-size: 13.5px; }
.chat-meta { margin-top: 5px; color: var(--muted); font-size: 12px; }
.chat-empty { display: flex; flex-direction: column; gap: 10px; margin: auto 0 0; }
.chat-empty .chat-art { width: 200px; max-width: 70%; height: auto; margin-bottom: 4px; }
.chat-empty h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.chat-empty p { margin: 0 0 4px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.chat-sug {
  display: block; width: 100%; padding: 11px 14px; border: 0; border-radius: var(--r); background: var(--sheet); color: var(--ink);
  font-size: 13.5px; line-height: 1.4; text-align: left; cursor: pointer; transition: transform var(--t2) var(--ease), background-color var(--t2);
}
.chat-sug:hover { transform: translateX(3px); background: var(--sun-t); }
.chat-sug:hover::after { border-image-source: var(--fr-ink); }
.chat-key { display: grid; gap: 10px; padding: 15px; border-radius: var(--r-lg); background: var(--sheet); font-size: 13.5px; line-height: 1.5; }
.chat-key h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 760; }
.chat-key p { margin: 0; color: var(--ink-2); }
.chat-key .row { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-key .input { flex: 1 1 200px; font-family: var(--mono); }
.chat-compose { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 14px 12px 8px; }
.chat-compose::before { content: ""; position: absolute; left: 12px; right: 12px; top: -2px; height: 6px; background: var(--rule-h) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.chat-compose textarea { flex: 1; min-width: 0; height: auto; min-height: 46px; max-height: 168px; padding: 11px 13px; resize: none; font-size: 14px; line-height: 1.4; }
.chat-compose .btn { width: 46px; height: 46px; padding: 0; border-radius: 50%; }
.chat-foot { margin: 0; padding: 0 14px 10px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }

/* ---------- responsive ---------- */
/* the views lay themselves out by the room they actually have (the docked assistant takes 410px of it);
   the company page stays a media query, because its save bar is fixed to the window and a container
   would hold it */
#view-home, #view-search, #view-watch, #view-feed, #view-guide { container: view / inline-size; }
@container view (max-width: 899px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@container view (max-width: 979px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container view (max-width: 859px) {
  .hero-guide { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container view (max-width: 600px) {
  .rail, .home-side { grid-template-columns: minmax(0, 1fr); }
  .layout { gap: 18px; }
  .section-title { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@container view (max-width: 520px) {
  .templates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .tpl { grid-template-columns: minmax(0, 1fr); padding: 12px; row-gap: 8px; }
  .tpl .badge-ic { grid-row: auto; width: 36px; height: 36px; }
  .tpl small { display: none; }
  .tpl b { padding-right: 0; }
  .stats { gap: 9px; }
  .stat { min-height: 98px; padding: 13px 14px 12px; background: var(--fill) var(--hatch-soft); }
  .stat b, .stat.accent b { font-size: 25px; }
  .stat > .ic { width: 30px; height: 30px; padding: 6px; right: 10px; top: 10px; }
  .card { padding: 15px 15px 14px 25px; }
  .card::before { left: 9px; }
  .hero-guide { padding: 22px; }
  .stage-pills { gap: 5px; }
  .stage-pill b { font-size: 18px; }
}
@media (max-width: 1100px) {
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-side .preview-card { grid-column: 1 / -1; }
}
@media (max-width: 1510px) {
  body.chat-docked .co-grid { grid-template-columns: minmax(0, 1fr); }
  body.chat-docked .co-side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.chat-docked .co-side .preview-card { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .ob-body.with-preview { display: flex; flex-direction: column; gap: 16px; }
  .ob-body .preview-card { flex: none; order: -1; padding: 14px 16px; }
  .ob-body .pv-num { margin-bottom: 0; }
  .ob-body .pv-num b { font-size: 36px; }
  .ob-body .pv-list { display: none; }
}
@media (max-width: 860px) {
  :root { --side: 0px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  /* the phone's top strip, under the logo and the preferences */
  .app::before {
    content: ""; position: fixed; inset: 0 0 auto 0; height: calc(60px + env(safe-area-inset-top)); z-index: 49;
    background: var(--paper); box-shadow: 0 2px 0 var(--pencil);
  }
  .sidebar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 50; flex-direction: row; align-items: center;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 0; background: var(--paper); box-shadow: 0 -2px 0 var(--pencil);
  }
  .sidebar::after { display: none; }
  .logo { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 12px; z-index: 51; padding: 0; gap: 9px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-text b { font-size: 17px; }
  .brand-text small, .sidebar-foot .live-card, .me-card, .nav-guide, .nav-ai { display: none; } /* the phone has the assistant's own button */
  .nav { flex-direction: row; flex: 1; gap: 2px; }
  .nav-item { flex: 1 1 0; min-width: 0; min-height: 0; flex-direction: column; gap: 3px; padding: 7px 4px; font-size: 11.5px; justify-content: center; text-align: center; }
  .nav-item > span { max-width: 100%; }
  .nav-item kbd { display: none; }
  .nav-pill { display: none; }
  .nav-item[aria-current="page"] { background-color: var(--sun); background-image: var(--hatch); box-shadow: inset 0 0 0 2px var(--ink); }
  .nav-badge { position: absolute; top: 1px; right: calc(50% - 24px); min-width: 18px; height: 17px; padding: 0 4px; line-height: 17px; font-size: 10px; }
  .nav-item .nav-badge { margin-left: 0; }
  .sidebar-foot { position: fixed; top: calc(11px + env(safe-area-inset-top)); right: 12px; margin: 0; z-index: 51; }
  .seg button { padding: 6px 10px; }
  .main { padding: 82px 14px calc(148px + env(safe-area-inset-bottom)); } /* the bottom bar, and the assistant's button above it */
  .page-head h1 { font-size: 27px; }
  .section-title { flex-direction: column; align-items: flex-start; gap: 4px; }
  .home-sec > .section-title { flex-wrap: nowrap; align-items: stretch; }
  .home-sec .sec-tools { flex-direction: column; align-items: stretch; }
  .home-sec .seg { display: flex; }
  .home-sec .seg button { flex: 1 1 0; min-width: 0; padding: 7px 6px; white-space: normal; line-height: 1.2; }
  .toolbar .switch { flex-basis: 100%; }
  .toolbar .spacer { display: none; }
  .toolbar #filters-btn, .toolbar #sort { flex: 1 1 0; min-width: 0; }
  /* half a phone's width holds «По совпадению» with a narrower arrow margin; anything longer ends in "…" */
  .toolbar #sort { padding-left: 10px; padding-right: 30px; background-position: calc(100% - 10px) 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #feed-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 4px 14px; flex-basis: calc(100% + 28px); }
  #feed-kinds::-webkit-scrollbar { display: none; }
  #feed-kinds .chip { flex: none; }
  .feed-tools .input { max-width: none; }
  .search-hero { padding: 14px; }
  .searchbar { height: 58px; padding: 0 6px 0 8px; gap: 6px; }
  .searchbar .lead-mark { width: 32px; height: 32px; }
  .searchbar input { font-size: 16px; }
  .searchbar .tail .btn.primary { width: 46px; padding: 0; }
  .searchbar .tail .btn.primary span { display: none; }
  .tpl-in-bar { left: 46px; }
  .drawer-head { flex-wrap: wrap; row-gap: 6px; padding: 12px 14px; }
  .drawer-head .uid { order: 10; flex: 1 1 70%; min-width: 0; }
  .drawer-head .uid + .btn { order: 11; }
  .drawer-head .btn .lbl, .drawer-head .star-btn span { display: none; }
  .drawer-head .star-btn.btn { width: 36px; padding: 0; }
  .drawer-head .icon-btn { width: 36px; height: 36px; }
  .drawer h2 { font-size: 21px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { flex: 1 0 72px; }
  .step small { font-size: 11px; padding: 0 3px; }
  .verdict { gap: 14px; padding: 16px; }
  .verdict .seal { width: 56px; height: 56px; }
  .verdict .headline { font-size: 25px; }
  .verdict .headline small { display: block; margin: 2px 0 0; }
  .gauge-wrap { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .gauge-wrap .gauge { justify-self: center; max-width: 220px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topline { left: 0; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .cd > div { min-width: 56px; }
  .cd b { font-size: 23px; }
  .life { grid-template-columns: minmax(0, 1fr); }
  .life-go { justify-self: start; }
  .status-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px 3px 4px; margin: 10px -3px 0; }
  .status-bar::-webkit-scrollbar { display: none; }
  .st-chip { flex: none; }
  #res-title { scroll-margin-top: calc(74px + env(safe-area-inset-top)); }
  .toasts { bottom: 88px; width: calc(100vw - 24px); }
  .drawer { width: 100vw; }
  .co-side { grid-template-columns: minmax(0, 1fr); }
  /* a carousel of columns: one at a time, snapped, with the edge of the next one showing so it is plain that more follow */
  .board { grid-template-columns: repeat(6, min(340px, calc(100vw - 64px))); margin: 0 -14px; padding: 14px 14px 12px; scroll-padding: 0 14px;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .board .col { scroll-snap-stop: always; }
  .save-bar { left: 50%; bottom: calc(78px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); flex-wrap: wrap; gap: 8px; padding: 12px; }
  .save-bar > span:first-child { flex: 1 0 100%; justify-content: center; font-size: 13px; }
  .save-bar .spacer { display: none; }
  .save-bar .btn { flex: 1 1 0; }
  body:has(.save-bar.on) .toasts { bottom: calc(200px + env(safe-area-inset-bottom)); }
  .watch-row { flex-direction: column; align-items: stretch; }
  .watch-row > .field:first-child { flex: none; }
  .onboard { display: block; padding: 0; overflow: hidden; }
  .ob-card { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .ob-card::after { display: none; }
  .ob-card.ob-done { width: 100%; justify-content: center; }
  .ob-head, .ob-progress, .ob-step, .ob-body, .ob-foot { padding-left: 16px; padding-right: 16px; }
  .ob-head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .ob-head small { display: none; }
  .ob-step { padding-top: 14px; }
  .ob-step h2 { font-size: 24px; }
  .ob-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .lifecycle { padding-left: 22px; }
  .life::before { left: -20px; }
  .lifecycle::before { left: 6px; }
}
@media (max-width: 520px) {
  .drawer-body { padding: 16px 14px 72px; }
  .box { padding: 16px; }
  .kind-cards, .checks { grid-template-columns: minmax(0, 1fr); }
  .templates.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big-pct { min-width: 80px; font-size: 36px; }
  .ob-foot { gap: 6px; }
  .ob-foot .btn.lg { height: 46px; padding: 0 14px; font-size: 14.5px; }
  .chat-fab .fab-label { display: none; }
}
@media (max-width: 760px) {
  .vw-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .vw-title { flex: 1 1 calc(100% - 110px); }
  .vw-title h2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .vw-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vw-tools { width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; }
  .vw-tools .vw-ask { margin-left: auto; }
  .vw-tools .vw-dl { margin-left: 0; }
  .vw-mode button { padding: 0 10px; }
  .vw-zoom-n { display: none; }
  .vw-dl .lbl { display: none; }
  .vw-dl { width: 38px; padding: 0; justify-content: center; }
  /* fixed, not absolute: the toolbar is positioned (for its drawn rule), so absolute put the nav over «Текст» */
  .vw-nav { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 6; transform: translateX(-50%); box-shadow: var(--shadow-2); }
  .vw-pageno { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .vw-find { padding: 6px 10px; }
  .vw-hits { min-width: 0; }
  .vw-crumbs { padding: 6px 10px; }
  .vw-body { padding: 14px 8px 66px; }
  .vw-paper { padding: 24px 18px; }
  .vw-doc { font-size: 14.5px; }
  .vw-zip { padding: 16px 12px; }
  .vw-page { width: calc((100vw - 16px) * var(--zoom, 1) * var(--pw, 1)); }
  .vw-photo { width: calc((100vw - 16px) * var(--zoom, 1)); }
  .vw-grid { max-height: calc(100vh - 230px); }
}
@media (max-width: 860px) {
  #chat { width: 100vw; box-shadow: none; padding-bottom: env(safe-area-inset-bottom); }
  #chat::before { display: none; }
  #chat .chat-head { padding-top: calc(10px + env(safe-area-inset-top)); }
  .chat-compose textarea { font-size: 16px; } /* smaller text makes a phone zoom in on focus */
  .chat-fab { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
  .chat-fab .fab-label, .chat-fab kbd { display: none; }
  #viewer:not([hidden]) ~ .chat-fab, #drawer:not([hidden]) ~ .chat-fab { display: none; }
}

/* ---------- the motion layer: everything that moves, and only when motion is welcome ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* a view comes in; "backwards", never "both", so no transform is left on it afterwards (the save bar
     is position: fixed inside the company view and must stay pinned to the window) */
  .view.enter { animation: view-in var(--t4) var(--ease-out) backwards; }
  .view.enter .page-head h1::after, .hero-guide h1::after { animation: line-in .9s var(--ease-out) .18s backwards; }
  .view.enter .eyebrow { animation: rise var(--t4) var(--ease-out) backwards; }

  .stat { animation: deal .6s var(--ease-out) backwards; }
  .search-hero, .tpl, .panel, .empty, .gstep, .vcard, .syn, .life, .acc, .shortcut, .mini, .msg, .col, .bcard, .me-card, .kind-card, .check,
  .channel-box, .preview-card, .fact, .kpi, .table tbody tr { animation: rise var(--t4) var(--ease-out) backwards; }
  .card, .skel-card { animation: deal .55s var(--ease-out) backwards; }
  .card:nth-child(even), .skel-card:nth-child(even) { --deal-r: .8deg; }
  .drawer-body > * { animation: rise var(--t4) var(--ease-out) backwards; }
  .drawer-body > .still, .drawer-body > .box.still { animation: none; }
  .bar i { animation: grow .9s var(--ease-out) .15s backwards; }
  .cd b.tick { animation: tick var(--t3) var(--ease-out); }
  .skel-card::before, .skel-paper::before { animation: scan 1.7s cubic-bezier(.45, 0, .55, 1) infinite; }
  .vw-page:not(.ready)::after { animation: scan 1.7s cubic-bezier(.45, 0, .55, 1) infinite; }
  .topline.run { animation: topline 1.25s linear infinite; }
  .live-dot.on { animation: ring 2.2s var(--ease-out) infinite; }
  .spin, .spinner, .searchbar.busy .tail .btn.primary .bars i:nth-child(2) { animation: eq .9s ease-in-out infinite; }
  .spin::before, .spinner::before, .searchbar.busy .tail .btn.primary .bars i:nth-child(1) { animation: eq .9s ease-in-out -.3s infinite; }
  .spin::after, .spinner::after, .searchbar.busy .tail .btn.primary .bars i:nth-child(3) { animation: eq .9s ease-in-out -.6s infinite; }
  .cstep.run .wave i { animation: eq .8s ease-in-out infinite; }
  .cstep.run .wave i:nth-child(2) { animation-delay: -.2s; } .cstep.run .wave i:nth-child(3) { animation-delay: -.4s; } .cstep.run .wave i:nth-child(4) { animation-delay: -.6s; }
  .cstep { animation: pop var(--t3) var(--ease-pop) backwards; }
  .ev.fresh { animation: ev-in var(--t4) var(--ease-out) backwards; }
  .ev.fresh::after { content: ""; position: absolute; inset: 2px; border-radius: var(--r); background: var(--sun-t); pointer-events: none; animation: marker 2.4s var(--ease) forwards; z-index: -1; }
  .nav-item[aria-current="page"] .ic { animation: nudge .5s var(--ease-pop); }
  .verdict .seal { animation: stamp .5s cubic-bezier(.2, 1.4, .4, 1) .1s backwards; }
  .verdict { animation: rise var(--t4) var(--ease-out) backwards; }
  .done-seal { animation: pop .55s var(--ease-pop) backwards; }
  .done-seal .ic { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw-check .55s var(--ease-out) .3s forwards; }
  .toast { animation: toast-in var(--t3) var(--ease-pop) backwards; }
  .toast.out { animation: toast-out var(--t2) var(--ease) forwards; }
  .modal, .tour .tip-card { animation: pop var(--t3) var(--ease-pop) backwards; }
  .modal-wrap, .onboard { animation: fade var(--t3) var(--ease) backwards; }
  .ob-step { animation: ob-in var(--t3) var(--ease-out) backwards; }
  .ob-body { animation: ob-in var(--t3) var(--ease-out) 50ms backwards; }
  .ob-card.back .ob-step, .ob-card.back .ob-body { animation-name: ob-back; }
  .ob-card:not(.stay) { animation: pop var(--t4) var(--ease-out) backwards; }
  .ob-progress i.now::after { animation: ob-fill var(--t4) var(--ease-out) backwards; }
  .acc .ans { animation: rise var(--t3) var(--ease-out) backwards; }
  .modal.shake { animation: shake .42s var(--ease) both; }
  .lang-swap { animation: lang-swap var(--t3) var(--ease-out); }
  .star-btn.pop { animation: pop .45s var(--ease-pop); }
  .curve .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s var(--ease-out) .2s forwards; }
  .curve .mark { animation: pop .45s var(--ease-pop) 1.2s backwards; }
  .flow .wire { animation: march 1.6s linear infinite; }
  .kind-card.on .tick .ic, .check input:checked + .tick-box .ic { stroke-dasharray: 26; animation: draw-tick .4s var(--ease-out) backwards; }
  .brand-mark:hover .mark-bar, .logo:hover .mark-bar { animation: eq .7s ease-in-out 2; }
  .brand-mark:hover .mark-bar:nth-child(2), .logo:hover .mark-bar:nth-child(2) { animation-delay: .08s; }
  .brand-mark:hover .mark-bar:nth-child(3), .logo:hover .mark-bar:nth-child(3) { animation-delay: .16s; }
  .chip.click:active, .st-chip:active, .tpl:active { transform: scale(.97); }
}
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes deal { from { opacity: 0; transform: translateY(18px) rotate(var(--deal-r, -.8deg)); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.94); } 65% { opacity: 1; transform: scale(1.012); } 100% { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes line-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tick { from { transform: translateY(-40%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes scan { 0% { transform: translateY(-6px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes topline { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@keyframes ring { 0% { box-shadow: 0 0 0 1.5px var(--sheet), 0 0 0 1.5px color-mix(in srgb, var(--mint-s) 70%, transparent); } 80%, 100% { box-shadow: 0 0 0 1.5px var(--sheet), 0 0 0 10px transparent; } }
@keyframes eq { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@keyframes ev-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes marker { 0% { opacity: 0; transform: scaleX(.2); transform-origin: 0 50%; } 15% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nudge { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.6) rotate(-20deg); } 70% { opacity: 1; transform: scale(.94) rotate(-8deg); } 100% { opacity: 1; transform: rotate(-9deg); } }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
@keyframes draw-tick { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes march { to { stroke-dashoffset: -18; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes ob-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes ob-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes ob-fill { from { transform: scaleX(0); } to { transform: scaleX(.5); } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
@keyframes lang-swap { 0% { opacity: .3; filter: blur(2px); } 100% { opacity: 1; filter: none; } }

/* with reduced motion nothing moves, and whatever an inline style starts ends at once */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- the brand mark: three highlighter bars ---------- */
.mark { display: block; overflow: visible; }
.mark .mark-base, .mark .mark-bar > path:first-child { stroke: var(--ink); }
.mark .mark-base { opacity: .7; }
.mark .mark-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.searchbar .lead-mark .mark, .fab-mark .mark, .head-mark .mark, .tldr-head .av .mark { width: 100%; height: 100%; }
.empty.flat { background: transparent; box-shadow: none; }
.empty.flat::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .curve.by-pencil .line { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* what you can open shows its full ink line when pointed at */
.card:hover::after, .mini:hover::after, .bcard:hover::after, .gstep:hover::after, .life:hover::after, .tpl:hover::after, .card:nth-child(even):hover::after, .bcard:nth-child(even):hover::after, .mini:nth-child(even):hover::after,
.kind-card:hover::after, .chat-sug:hover::after, .me-card:hover::after, .stage-pill:hover::after, button.syn:hover::after { border-image-source: var(--fr-ink); }
/* the search bar's send button is a pill (a circle on a phone): its line follows that shape */
.searchbar .tail .btn.primary::after { border-width: 23px; border-image: var(--frp-black) 16 / 23px / 0 stretch; }
.chat-compose .btn::after { border-width: 23px; border-image: var(--frp-ink) 16 / 23px / 0 stretch; }
.chat-compose .btn.primary::after { border-image-source: var(--frp-black); }
/* drawings whose lines are redrawn a few times a second (motion.js moves the #boil noise) */
.boil { filter: url(#boil); }

/* ---------- help videos: a hint in the flow, the guide's shelf, the player ---------- */
/* a hint is a small sheet: the clip's poster, what it explains, how long it is; it sits in the page, never over it */
.hint {
  position: relative; display: flex; align-items: center; gap: 2px; width: fit-content; max-width: min(100%, 460px); padding: 6px;
  border-radius: var(--r); background: var(--sheet); box-shadow: var(--shadow-1); text-align: left;
}
.hint::after, .help-card::after, .help-welcome::after, .player::after, .player-screen::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  border: 16px solid transparent; border-image: var(--fr) 16 / 16px / 0 stretch;
}
.help-card:nth-child(even)::after { border-image-source: var(--fr2); }
.hint:hover::after, .help-card:hover::after { border-image-source: var(--fr-ink); }
.hint-open {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 8px 0 0; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.hint-pic {
  position: relative; display: block; flex: none; width: 92px; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 7px 9px 6px 10px; background: var(--paper-deep); box-shadow: 0 0 0 1.5px var(--outline-soft);
  transition: box-shadow var(--t2);
}
.hint-open:hover .hint-pic, .help-card:hover .hint-pic, .hw-pic:hover .hint-pic { box-shadow: 0 0 0 1.5px var(--outline); }
.hint-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* the play mark: the coral of the app's main button, an ink ring, the triangle filled in */
.hint-play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; background-color: var(--coral); background-image: var(--hatch-soft); color: #1d1b22;
  box-shadow: 0 0 0 2px #1d1b22, 0 2px 0 1.5px rgba(29, 27, 34, .3);
}
.hint-play .ic, .help-link .disc .ic { width: 12px; height: 12px; margin-left: 2px; fill: currentColor; stroke-width: 2; }
.hint-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hint-t b { font-size: 13.5px; font-weight: 720; line-height: 1.3; }
.hint-t small { color: var(--muted); font-size: 12px; font-weight: 600; }
.hint-x {
  flex: none; align-self: center; padding: 7px 9px; border: 0; border-radius: 8px; background: none; color: var(--muted);
  font-size: 12px; font-weight: 650; cursor: pointer; transition: background-color var(--t2), color var(--t2);
}
.hint-x:hover { background: var(--sheet-2); color: var(--ink); }
.empty > .hint { margin-top: 8px; }
.box > .hint { margin-top: 14px; }
.vw-empty > .hint { margin-top: 6px; }

/* the quiet way in, for a header: a play mark and a few words */
.help-link {
  display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; padding: 2px 4px 2px 0; border: 0; background: none;
  color: var(--ink-2); font: 650 13.5px/1.4 var(--font); text-align: left; cursor: pointer;
}
.help-link .disc {
  display: grid; place-items: center; flex: none; width: 21px; height: 21px; margin-top: -.5px; border-radius: 50%;
  background-color: var(--coral); color: #1d1b22; box-shadow: 0 0 0 1.6px var(--outline);
}
.help-link .disc .ic { width: 10px; height: 10px; margin-left: 1.5px; }
.help-link .hl-t { min-width: 0; }
.help-link small { color: var(--muted); font-size: 12px; font-weight: 600; }
.help-link .nw { white-space: nowrap; }
.help-link:hover { color: var(--ink); }
.help-link:hover .hl-r { text-decoration: underline wavy var(--coral); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.page-head .help-link { margin-top: 10px; }
.ob-head .help-link { margin-top: 7px; font-size: 13px; }
.ob-head .help-link small { display: inline; } /* the phone hides the header's lead, never the clip's length */

/* the overview's one offer of the whole set, after onboarding */
.help-welcome {
  position: relative; display: flex; align-items: center; gap: 18px; margin: -4px 0 24px; padding: 12px 16px 12px 12px;
  border-radius: var(--r-xl); background: var(--sheet); box-shadow: var(--shadow-1);
}
.hw-pic { flex: none; display: block; width: 152px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.hw-pic .hint-pic { width: 100%; }
.hw-pic .hint-play { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.hw-pic .hint-play .ic { width: 15px; height: 15px; margin-left: 3px; }
.hw-t { flex: 1; min-width: 0; }
.hw-t b { display: block; font-size: 17px; font-weight: 780; letter-spacing: -.015em; line-height: 1.3; }
.hw-t p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.hw-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* the guide's shelf: one sheet per clip, numbered in the order they play */
.help-lib .section-title p { margin-top: 4px; }
.help-lib .section-title .btn { flex: none; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; } /* twelve clips: two rows of six */
.help-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 8px 8px 12px; border: 0;
  border-radius: var(--wonky); background: var(--sheet); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--shadow-1); transition: transform var(--t2) var(--ease), box-shadow var(--t2);
}
.help-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.help-card .hint-pic { width: 100%; border-radius: 8px 10px 7px 11px; }
.help-card .hint-play { width: 36px; height: 36px; margin: -18px 0 0 -18px; box-shadow: 0 0 0 2px #1d1b22, 0 3px 0 1.5px rgba(29, 27, 34, .3); }
.help-card .hint-play .ic { width: 15px; height: 15px; margin-left: 3px; }
.hc-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 3px; }
.hc-t .no { color: var(--coral-ink); font: 800 11.5px/1.2 var(--mono); letter-spacing: .06em; }
.hc-t b { font-size: 13.5px; font-weight: 740; line-height: 1.3; letter-spacing: -.01em; }
.hc-t small:last-child { color: var(--muted); font-size: 12px; font-weight: 600; }

/* the player: a sheet over everything, the film in a drawn frame, the set as a rainbow strip under it */
.player-wrap {
  position: fixed; inset: 0; z-index: 97; display: grid; place-items: center; padding: 24px;
  background: var(--scrim); backdrop-filter: blur(6px); overscroll-behavior: contain;
}
.player {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 14px 18px 16px;
  width: min(980px, 100%, calc((100vh - 200px) * 16 / 9)); width: min(980px, 100%, calc((100dvh - 200px) * 16 / 9));
  border-radius: var(--r-xl); background-color: var(--sheet); background-image: var(--grain); box-shadow: var(--shadow-3);
}
.player::after { border-image-source: var(--fr-ink); }
.player-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player-head .brand-mark { width: 36px; height: 36px; }
.player-t { flex: 1; min-width: 0; }
.player-t h2 { margin: 0; overflow: hidden; font-size: 18px; font-weight: 780; letter-spacing: -.015em; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.player-meta { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.player-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 10px 12px 9px 13px; background: var(--paper-deep); }
.player-screen::after { border-image-source: var(--fr-ink); }
.player-screen video { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--paper-deep); }
.player-screen video:focus-visible { outline-offset: 5px; }
.player-screen video::cue { background: rgba(14, 11, 38, .84); color: #fbf9f4; font: 500 1em/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.player-err {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 32px);
  margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-2);
  font-size: 13.5px; font-weight: 650; transform: translate(-50%, -50%);
}
.player-foot { display: flex; align-items: center; gap: 14px; min-height: 34px; }
/* each clip a slice of one rainbow line: watched ones whole, the one playing filling up, the rest in pencil */
.player-strip { flex: 1 1 auto; display: flex; gap: 5px; min-width: 0; max-width: 560px; margin: 0; padding: 0; list-style: none; }
.player-strip li { flex: 1; min-width: 0; }
.player-strip button { position: relative; display: block; width: 100%; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.player-strip i { position: absolute; left: 0; right: 0; top: 8px; height: 6px; overflow: hidden; border-radius: 4px; background: var(--pencil-2); }
.player-strip i::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--mint-s), var(--sky-s), var(--violet-s), var(--pink-s)) calc(var(--k, 0) / max(1, var(--n, 2) - 1) * 100%) 0 / calc(var(--n, 1) * 100%) 100% no-repeat;
}
.player-strip button.now i { box-shadow: 0 0 0 1.5px var(--outline); }
.player-strip button:hover i { top: 7px; height: 8px; }
.player-strip button:focus-visible { outline-offset: 1px; }
.player-next { flex: none; }

@container view (max-width: 640px) {
  .help-welcome { flex-wrap: wrap; gap: 12px 14px; padding: 12px; }
  .hw-pic { width: 112px; }
  .hw-act { flex-basis: 100%; }
  .hw-act .btn.primary { flex: 1; }
}
@container view (max-width: 520px) {
  /* on a phone the shelf is a list: the poster beside the words, like a hint */
  .help-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .help-card { flex-direction: row; align-items: center; gap: 12px; padding: 6px; border-radius: var(--r); }
  .help-card .hint-pic { width: 112px; }
  .help-card .hint-play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .help-card .hint-play .ic { width: 13px; height: 13px; margin-left: 2px; }
  .hc-t { padding: 0 6px 0 0; }
}
@media (max-width: 860px) {
  .player-wrap { padding: 0; }
  .player {
    width: min(100%, calc((100vh - 170px) * 16 / 9)); width: min(100%, calc((100dvh - 170px) * 16 / 9));
    gap: 12px; padding: 12px 12px 14px; border-radius: 0;
  }
  .player::after { display: none; }
  .player-head .brand-mark { width: 30px; height: 30px; }
  .player-t h2 { font-size: 16px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .player-foot { flex-wrap: wrap; gap: 8px 12px; }
  .player-strip { flex-basis: 100%; max-width: none; }
  .hint { max-width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .player-wrap { animation: fade var(--t3) var(--ease) backwards; }
  .player { animation: pop var(--t3) var(--ease-pop) backwards; }
  .help-card { animation: rise var(--t4) var(--ease-out) backwards; }
  .help-card:nth-child(2) { animation-delay: 30ms; } .help-card:nth-child(3) { animation-delay: 60ms; } .help-card:nth-child(4) { animation-delay: 90ms; }
  .help-card:nth-child(n+5) { animation-delay: 120ms; }
  .hint-play, .help-link .disc { transition: transform var(--t2) var(--ease-pop); }
  .hint-open:hover .hint-play, .help-card:hover .hint-play, .hw-pic:hover .hint-play, .help-link:hover .disc { transform: scale(1.08); }
  .player-strip i { transition: top var(--t2), height var(--t2); }
  .player-strip i::after { transition: transform .26s linear; }
}
@media (prefers-reduced-motion: reduce) {
  .player-strip i, .player-strip i::after { transition-property: none; } /* the fill steps with the film, not even an instant transition */
}