/* Digital Discovery Group — design system tokens.
 *
 * GENERATED by scripts/build-design-tokens.mjs from
 * design/ddg-design-sys/project/tokens/*.css.
 * Edit the bundle and re-run; edits made here are lost on the next build.
 *
 * Flattened in styles.css order: fonts → colors → typography → spacing → radius → elevation → charts → motion → backgrounds → effects → semantic → base
 */

/* ── tokens/fonts.css ────────────────────────────────────────────────── */
/* Webfonts — self-hosted.
   ONE family carries the whole system: Manrope, from the 10px nano label to
   the 60px hero. JetBrains Mono is retained for one job only — tabular data,
   IDs, timestamps and code.

   The bundle's fonts.css imports these from fonts.googleapis.com. That is
   blocked by `font-src 'self'` in worker.js, and it fails silently: the page
   renders in the fallback and returns 200. Both families are served from
   assets/fonts/ instead, latin + latin-ext only, variable weight.
   Generated by scripts/build-design-tokens.mjs — do not edit here. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --font-sans:"Manrope","Helvetica Neue",system-ui,sans-serif;
  --font-display:var(--font-sans);
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── tokens/colors.css ───────────────────────────────────────────────── */
/* Base palette.
   Ink + slate ramp sampled from the wings lockup (assets/logo-wings-lockup.png).
   Spectrum accents sampled from the plume mark (assets/logo-plume-mark-64.png).
   --accent-red is the one derived value: the plume carries no true red, so it
   is interpolated in oklch from --accent-orange for destructive states. */
:root{
  /* Ink — the wordmark navy and its extensions */
  --ink-1000:#08171F;
  --ink-900:#0C2233;
  --ink-800:#123448;
  --ink-700:#184058; /* wordmark navy — the single brand colour */
  --ink-600:#1F5170;

  /* Slate — the wing gradient, lightest to darkest */
  --slate-900:#283840;
  --slate-800:#304048;
  --slate-700:#384850;
  --slate-600:#485860;
  --slate-500:#586870;
  --slate-400:#687880;
  --slate-300:#8890A0;
  --slate-200:#9098A8;
  --slate-100:#BFC6CF;

  /* Neutrals — paper, rules, fills */
  --neutral-0:#FFFFFF;
  --neutral-50:#FAFBFC;
  --neutral-100:#F3F5F7;
  --neutral-200:#E7EBEF;
  --neutral-300:#D8DEE4;
  --neutral-400:#B9C2CB;
  --neutral-900:#0F1A21;

  /* Spectrum accents — the plume. One per practice, plus status hues. */
  --accent-cyan:#00B8D0;
  --accent-blue:#3878E8;
  --accent-violet:#7858E0;
  --accent-green:#80B868;
  --accent-olive:#A0B050;
  --accent-amber:#F8C000;
  --accent-orange:#F87018;
  --accent-red:#D93A2B; /* derived */

  /* Deep plume — the three spectrum hues driven down the value ramp. Derived, like
     --accent-red. These are what a filled spectrum button uses: each carries WHITE
     text at 4.9:1 or better, which the bright plume values could not. */
  --accent-cyan-deep:#007A8C;
  --accent-green-deep:#3E7A2E;
  --accent-orange-deep:#C24A08;

  /* Practice colours — the four disciplines in the strapline */
  --practice-cyber:#3878E8;
  --practice-ai:#7858E0;
  --practice-digital:#00B8D0;
  --practice-retail:#F87018;

  /* Tinted washes — 8% accents over paper, precomputed for flat fills */
  --wash-cyber:#EBF1FD;
  --wash-ai:#F1EEFC;
  --wash-digital:#E5F7FA;
  --wash-retail:#FEF0E8;
  --wash-green:#F0F7EC;
  --wash-amber:#FEF8E5;
  --wash-red:#FBECEA;
}

/* ── tokens/typography.css ───────────────────────────────────────────── */
/* One family, one scale. Sizes are deliberately small and tight — platform
   density, not brochure display. Headlines carry weight (600/700) instead of
   size, and tracking goes negative as size grows. */
:root{
  --text-display-1:clamp(2.25rem,4.2vw,3.75rem);   /* 36 → 60 */
  --text-display-2:clamp(1.875rem,3vw,2.75rem);    /* 30 → 44 */
  --text-display-3:clamp(1.5rem,2.2vw,2rem);       /* 24 → 32 */
  --text-h1:1.625rem;    /* 26 */
  --text-h2:1.25rem;     /* 20 */
  --text-h3:1.0625rem;   /* 17 */
  --text-h4:0.9375rem;   /* 15 */
  --text-lead:1.0625rem; /* 17 */
  --text-body:0.9375rem; /* 15 */
  --text-body-sm:0.875rem;   /* 14 */
  --text-caption:0.8125rem;  /* 13 */
  --text-micro:0.6875rem;    /* 11 */
  --text-nano:0.625rem;      /* 10 */

  --leading-display:1.04;
  --leading-tight:1.16;
  --leading-snug:1.45;
  --leading-body:1.6;
  --leading-loose:1.7;

  --tracking-display:-0.032em;
  --tracking-tight:-0.018em;
  --tracking-normal:-0.006em;
  --tracking-wide:0.02em;
  --tracking-wider:0.08em;
  --tracking-widest:0.16em;
  --tracking-lockup:0.22em; /* wordmark / strapline artwork only */

  --weight-extralight:200;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-display:600;

  --measure-prose:70ch; /* @kind other */
  --measure-lead:52ch;  /* @kind other */
}

/* ── tokens/spacing.css ──────────────────────────────────────────────── */
/* 4px base grid; the editorial rhythm lands on 8 / 16 / 24 / 40 / 64 / 96. */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;
  --space-40:160px;

  --section-y:clamp(64px,9vw,128px); /* @kind spacing */
  --gutter:clamp(20px,4vw,48px); /* @kind spacing */
  --container-max:1240px;
  --container-prose:720px;
  --container-wide:1440px;
}

/* ── tokens/radius.css ───────────────────────────────────────────────── */
/* Softer than the old editorial system — platform surfaces read as panels,
   not printed cards. Controls 8px, panels 14px, overlays 20px. */
:root{
  --radius-0:0px;
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-pill:999px;
}

/* ── tokens/elevation.css ────────────────────────────────────────────── */
/* Borders, shadow and light. Shadow is always cool-tinted navy, never black.
   Dark surfaces get a 1px inner top highlight so they read as lit panels. */
:root{
  --border-hairline:1px solid var(--neutral-200); /* @kind other */
  --border-strong:1px solid var(--neutral-300); /* @kind other */
  --border-ink:1px solid var(--ink-700); /* @kind other */
  --border-inverse:1px solid rgba(255,255,255,.14); /* @kind other */

  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(24,64,88,.05);
  --shadow-sm:0 1px 3px rgba(24,64,88,.06),0 1px 2px rgba(24,64,88,.04);
  --shadow-md:0 10px 28px -10px rgba(24,64,88,.16),0 2px 6px rgba(24,64,88,.05);
  --shadow-lg:0 28px 60px -20px rgba(12,34,51,.24),0 6px 16px rgba(12,34,51,.08);
  --shadow-focus:0 0 0 3px rgba(56,120,232,.24);

  /* Lighting */
  --highlight-top:inset 0 1px 0 rgba(255,255,255,.09); /* @kind other */
  --highlight-edge:inset 0 0 0 1px rgba(255,255,255,.06); /* @kind other */
  --sheen:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 58%); /* @kind color */
  --glow-brand:0 0 0 1px rgba(56,120,232,.22),0 14px 44px -14px rgba(56,120,232,.42);
  --glow-ai:0 0 0 1px rgba(120,88,224,.22),0 14px 44px -14px rgba(120,88,224,.42);
  --glow-digital:0 0 0 1px rgba(0,184,208,.22),0 14px 44px -14px rgba(0,184,208,.40);
  --glow-green:0 0 0 1px rgba(128,184,104,.24),0 14px 44px -14px rgba(128,184,104,.42);
  --glow-retail:0 0 0 1px rgba(248,112,24,.24),0 14px 44px -14px rgba(248,112,24,.40);
  --glow-echo:0 0 0 1px rgba(120,88,224,.30),0 18px 54px -16px rgba(120,88,224,.50);
  --glow-soft:0 18px 50px -18px rgba(24,64,88,.30);
  --glow-inset-brand:inset 0 0 34px -8px rgba(56,120,232,.28); /* @kind other */

  --scrim-top:linear-gradient(180deg,rgba(8,23,31,.74) 0%,rgba(8,23,31,0) 62%); /* @kind color */
  --scrim-bottom:linear-gradient(0deg,rgba(8,23,31,.84) 0%,rgba(8,23,31,0) 70%); /* @kind color */
  --wing-gradient:linear-gradient(135deg,#9098A8 0%,#586870 38%,#304048 72%,#184058 100%); /* @kind color */
  --plume-gradient:linear-gradient(90deg,#00B8D0 0%,#3878E8 24%,#7858E0 46%,#80B868 68%,#F8C000 84%,#F87018 100%); /* @kind color */

  /* Ambient light washes for dark platform surfaces */
  --mesh-ink:radial-gradient(720px 380px at 12% -8%,rgba(56,120,232,.20),transparent 60%),radial-gradient(560px 320px at 88% 4%,rgba(120,88,224,.16),transparent 62%),radial-gradient(620px 420px at 60% 110%,rgba(0,184,208,.10),transparent 60%); /* @kind color */
  --mesh-paper:radial-gradient(620px 300px at 6% -10%,rgba(56,120,232,.07),transparent 62%),radial-gradient(520px 280px at 94% 0%,rgba(120,88,224,.06),transparent 62%); /* @kind color */
  --grid-lines:linear-gradient(rgba(24,64,88,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(24,64,88,.055) 1px,transparent 1px); /* @kind color */
  --grid-lines-inverse:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); /* @kind color */
  --grid-size:52px; /* @kind spacing */
}

/* ── tokens/charts.css ───────────────────────────────────────────────── */
/* Data visualisation palette.
   Every categorical hue is a plume accent — nothing new is invented here. The
   order is tuned so that adjacent series stay separable at 2px stroke weight
   and at 8px legend swatch size: hue rotates, value alternates.
   Soft/faint variants are the same hue pre-mixed for area fills and washes,
   so a chart never needs an opacity hack on the stroke colour. */
:root{
  /* Categorical sequence — assign in order, never skip */
  --chart-1:#3878E8; /* blue    · primary series */
  --chart-2:#00B8D0; /* cyan    · comparison series */
  --chart-3:#7858E0; /* violet  · AI / model series */
  --chart-4:#F87018; /* orange  · retail / revenue series */
  --chart-5:#80B868; /* green   · positive / completed */
  --chart-6:#F8C000; /* amber   · pending / at risk */
  --chart-7:#A0B050; /* olive   · long tail */
  --chart-8:#D93A2B; /* red     · failed / churn */

  /* 22% fills — area charts, stacked bands, donut hover */
  --chart-1-soft:rgba(56,120,232,.22);
  --chart-2-soft:rgba(0,184,208,.22);
  --chart-3-soft:rgba(120,88,224,.22);
  --chart-4-soft:rgba(248,112,24,.22);
  --chart-5-soft:rgba(128,184,104,.22);
  --chart-6-soft:rgba(248,192,0,.22);
  --chart-7-soft:rgba(160,176,80,.22);
  --chart-8-soft:rgba(217,58,43,.22);

  /* 8% washes — row tints, cell heat, legend hover */
  --chart-1-faint:rgba(56,120,232,.08);
  --chart-2-faint:rgba(0,184,208,.08);
  --chart-3-faint:rgba(120,88,224,.08);
  --chart-4-faint:rgba(248,112,24,.08);
  --chart-5-faint:rgba(128,184,104,.08);
  --chart-6-faint:rgba(248,192,0,.08);
  --chart-7-faint:rgba(160,176,80,.08);
  --chart-8-faint:rgba(217,58,43,.08);

  /* Sequential ramp — one metric, low to high. Ink to cyan, five steps. */
  --chart-ramp-1:#E5F7FA;
  --chart-ramp-2:#9EDCE8;
  --chart-ramp-3:#4BBFD4;
  --chart-ramp-4:#1D7FA0;
  --chart-ramp-5:#184058;

  /* Diverging — signed change against a neutral midpoint */
  --chart-diverge-low:#D93A2B;
  --chart-diverge-mid:#E7EBEF;
  --chart-diverge-high:#3878E8;

  /* Chart furniture. Grid is barely there on purpose — the data carries. */
  --chart-grid:rgba(24,64,88,.07); /* @kind color */
  --chart-grid-inverse:rgba(255,255,255,.07); /* @kind color */
  --chart-axis:rgba(24,64,88,.16); /* @kind color */
  --chart-axis-inverse:rgba(255,255,255,.16); /* @kind color */
  --chart-label:var(--slate-400); /* @kind color */
  --chart-label-inverse:rgba(255,255,255,.44); /* @kind color */
  --chart-value:var(--ink-900); /* @kind color */
  --chart-value-inverse:#FFFFFF; /* @kind color */
  --chart-track:var(--neutral-200); /* @kind color */
  --chart-track-inverse:rgba(255,255,255,.10); /* @kind color */
  --chart-crosshair:rgba(24,64,88,.28); /* @kind color */
  --chart-crosshair-inverse:rgba(255,255,255,.32); /* @kind color */
  --chart-surface:var(--neutral-0); /* @kind color */
  --chart-surface-inverse:rgba(255,255,255,.04); /* @kind color */

  --chart-stroke:2px; /* @kind spacing */
  --chart-stroke-thin:1.5px; /* @kind spacing */
  --chart-dot:3.5px; /* @kind spacing */
  --chart-bar-radius:3px; /* @kind spacing */
  --chart-anim-draw:1400ms; /* @kind other */
}

/* ── tokens/motion.css ───────────────────────────────────────────────── */
/* Motion is short and eased. Entrances rise a few pixels and fade; nothing
   bounces, nothing overshoots, nothing scales in. */
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:130ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --duration-reveal:560ms; /* @kind other */
  --duration-ambient:2400ms; /* @kind other */

  --ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.7,0,.84,0); /* @kind other */
  --ease-inout:cubic-bezier(.65,0,.35,1); /* @kind other */

  --transition-control:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard); /* @kind other */
  --transition-lift:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard); /* @kind other */
}

/* ── tokens/backgrounds.css ──────────────────────────────────────────── */
/* Layered background fields, atmosphere and shading.
   Every value is composed from the ink, slate and plume tokens — no new hue is
   introduced here. Fields that need a tile size ship a matching --*-size token;
   set both or the tile is wrong. Compose at most two field layers plus one
   atmosphere layer on a surface; more reads as decoration. */
:root{
  /* ── Technical fields — structure, not decoration ───────────────────── */
  --bg-blueprint:linear-gradient(rgba(24,64,88,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(24,64,88,.05) 1px,transparent 1px),linear-gradient(rgba(24,64,88,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(24,64,88,.024) 1px,transparent 1px); /* @kind color */
  --bg-blueprint-inverse:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px); /* @kind color */
  --bg-blueprint-size:var(--grid-size) var(--grid-size),var(--grid-size) var(--grid-size),13px 13px,13px 13px; /* @kind spacing */

  --bg-dots:radial-gradient(rgba(24,64,88,.14) 1px,transparent 1.5px); /* @kind color */
  --bg-dots-inverse:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1.5px); /* @kind color */
  --bg-dots-size:13px 13px; /* @kind spacing */

  --bg-hatch:repeating-linear-gradient(135deg,rgba(24,64,88,.05) 0 1px,transparent 1px 7px); /* @kind color */
  --bg-hatch-inverse:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 1px,transparent 1px 7px); /* @kind color */

  --bg-topo:repeating-radial-gradient(circle at 14% 8%,transparent 0 27px,rgba(24,64,88,.05) 27px 28px); /* @kind color */
  --bg-topo-inverse:repeating-radial-gradient(circle at 14% 8%,transparent 0 27px,rgba(255,255,255,.055) 27px 28px); /* @kind color */

  --bg-scanline-inverse:repeating-linear-gradient(180deg,rgba(255,255,255,.038) 0 1px,transparent 1px 3px); /* @kind color */

  /* ── Atmosphere — layered plume light. Ink surfaces only, one per view. ── */
  --bg-aurora-ink:conic-gradient(from 200deg at 16% 10%,transparent 0 4%,rgba(0,184,208,.26) 16%,rgba(56,120,232,.20) 34%,transparent 58%),conic-gradient(from 34deg at 84% 6%,transparent 0 4%,rgba(120,88,224,.26) 18%,rgba(56,120,232,.12) 34%,transparent 54%),radial-gradient(900px 460px at 50% 118%,rgba(56,120,232,.16),transparent 62%); /* @kind color */
  --bg-nebula-ink:radial-gradient(620px 320px at 8% 6%,rgba(0,184,208,.22),transparent 60%),radial-gradient(520px 460px at 74% -12%,rgba(120,88,224,.20),transparent 58%),radial-gradient(760px 300px at 96% 84%,rgba(56,120,232,.14),transparent 64%),radial-gradient(420px 240px at 34% 96%,rgba(128,184,104,.08),transparent 62%); /* @kind color */
  --bg-plume-bloom:radial-gradient(200px 200px at 12% 50%,rgba(0,184,208,.5),transparent 62%),radial-gradient(220px 220px at 38% 32%,rgba(56,120,232,.45),transparent 62%),radial-gradient(200px 200px at 62% 62%,rgba(120,88,224,.42),transparent 62%),radial-gradient(200px 200px at 86% 40%,rgba(248,112,24,.34),transparent 62%); /* @kind color */
  --bg-halo-paper:radial-gradient(760px 300px at 50% -22%,rgba(56,120,232,.10),transparent 66%),radial-gradient(520px 260px at 92% 8%,rgba(120,88,224,.07),transparent 62%),radial-gradient(600px 280px at 4% 96%,rgba(0,184,208,.06),transparent 62%); /* @kind color */

  /* Cursor-tracked light. Set --spot-x / --spot-y in px or % from script. */
  --bg-spotlight-inverse:radial-gradient(420px 420px at var(--spot-x,50%) var(--spot-y,0%),rgba(0,184,208,.16),rgba(120,88,224,.08) 42%,transparent 72%); /* @kind color */
  --bg-spotlight:radial-gradient(400px 400px at var(--spot-x,50%) var(--spot-y,0%),rgba(56,120,232,.10),transparent 70%); /* @kind color */

  /* Animated conic ring. Put it on a square layer centred in a clipped,
     rounded wrapper and spin the layer with --anim-orbit. */
  --bg-orbit-ring:conic-gradient(from 0deg,transparent 0 58%,rgba(0,184,208,.85) 74%,rgba(120,88,224,.9) 86%,transparent 100%); /* @kind color */
  --sheen-conic:conic-gradient(from 140deg at 50% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 66%,rgba(255,255,255,.10)); /* @kind color */

  /* ── Grain — 3% over ink, 2% over paper. Never more. ─────────────────── */
  --bg-noise:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiBmaWx0ZXI9InVybCgjbikiLz48L3N2Zz4="); /* @kind color */
  --bg-noise-opacity-ink:.035; /* @kind other */
  --bg-noise-opacity-paper:.022; /* @kind other */

  /* ── Vignettes and edge masks ────────────────────────────────────────── */
  --vignette-ink:radial-gradient(130% 110% at 50% 38%,transparent 38%,rgba(8,23,31,.62) 100%); /* @kind color */
  --vignette-paper:radial-gradient(130% 110% at 50% 34%,transparent 46%,rgba(24,64,88,.07) 100%); /* @kind color */
  --mask-fade-b:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%); /* @kind other */
  --mask-fade-t:linear-gradient(180deg,transparent 0%,#000 42%,#000 100%); /* @kind other */
  --mask-fade-edges:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); /* @kind other */
  --mask-fade-radial:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 80%); /* @kind other */
  /* Keeps a field in the margins and out of the centre column — for prose surfaces. */
  --mask-margins:radial-gradient(132% 104% at 50% 38%,transparent 24%,#000 64%,transparent 99%); /* @kind other */

  /* ── Shading — how a surface catches light ───────────────────────────── */
  --shade-emboss:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(24,64,88,.07),0 1px 2px rgba(24,64,88,.06); /* @kind other */
  --shade-engrave:inset 0 2px 3px rgba(24,64,88,.10),inset 0 -1px 0 rgba(255,255,255,.8); /* @kind other */
  --shade-pressed:inset 0 2px 4px rgba(24,64,88,.16); /* @kind other */
  --shade-bevel-inverse:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.4); /* @kind other */
  --shade-engrave-inverse:inset 0 2px 5px rgba(0,0,0,.46),inset 0 -1px 0 rgba(255,255,255,.07); /* @kind other */
  --shade-rim-inverse:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.24); /* @kind other */
  --shade-inner-brand:inset 0 -26px 44px -28px rgba(56,120,232,.55); /* @kind other */
  --shade-inner-digital:inset 0 -26px 44px -28px rgba(0,184,208,.5); /* @kind other */
  --shade-inner-echo:inset 0 -26px 44px -28px rgba(120,88,224,.55); /* @kind other */
  --shade-frost-edge:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.38); /* @kind other */
  --frost-blur:saturate(180%) blur(14px); /* @kind other */
  --frost-blur-heavy:saturate(160%) blur(22px); /* @kind other */
}

/* ── tokens/effects.css ──────────────────────────────────────────────── */
/* Keyframes shipped with the system. Prefix ddg- so they never collide.
   Use them through the transition/duration tokens, not with ad-hoc timings. */
@keyframes ddg-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ddg-fade{from{opacity:0}to{opacity:1}}
@keyframes ddg-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 currentColor}70%{opacity:.85;box-shadow:0 0 0 5px transparent}}
@keyframes ddg-shimmer{from{background-position:-160% 0}to{background-position:260% 0}}
@keyframes ddg-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}
@keyframes ddg-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes ddg-spin{to{transform:rotate(360deg)}}
@keyframes ddg-draw{from{stroke-dashoffset:2400}to{stroke-dashoffset:0}}
@keyframes ddg-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ddg-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ddg-echo-ring{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.85;transform:scale(1.045)}}
@keyframes ddg-echo-think{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
/* Atmosphere. Long, low-contrast, never a loop you can catch the seam of. */
@keyframes ddg-aurora{0%,100%{transform:translate3d(-2%,-1%,0) scale(1.05)}34%{transform:translate3d(2%,2%,0) scale(1.12)}67%{transform:translate3d(-1%,3%,0) scale(1.07)}}
@keyframes ddg-bloom{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
@keyframes ddg-pan{to{background-position:var(--grid-size) var(--grid-size)}}
@keyframes ddg-scan{0%{transform:translateY(-120%)}70%,100%{transform:translateY(320%)}}
@keyframes ddg-ring-out{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(2.4)}}
@keyframes ddg-slide-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@keyframes ddg-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Long-form editorial motion: a flock crossing a section, its vertical bob, and tiled wave crests. */
@keyframes ddg-flock{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--flock-distance,120vw),0,0)}}
@keyframes ddg-bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes ddg-wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

:root{
  --reveal-shift:14px; /* @kind spacing */
  --reveal-delay:0ms; /* @kind other */
  --anim-rise:ddg-rise var(--duration-reveal) var(--ease-out) both; /* @kind other */
  --anim-fade:ddg-fade var(--duration-slow) var(--ease-out) both; /* @kind other */
  --anim-pulse:ddg-pulse var(--duration-ambient) var(--ease-inout) infinite; /* @kind other */
  --anim-shimmer:ddg-shimmer 1.6s linear infinite; /* @kind other */
  --anim-spin:ddg-spin .7s linear infinite; /* @kind other */
  --anim-drift:ddg-drift 14s var(--ease-inout) infinite; /* @kind other */
  --anim-sweep:ddg-sweep 1.4s var(--ease-inout) infinite; /* @kind other */
  --anim-draw:ddg-draw var(--chart-anim-draw) var(--ease-out) both; /* @kind other */
  --anim-echo-ring:ddg-echo-ring 3.4s var(--ease-inout) infinite; /* @kind other */
  --anim-aurora:ddg-aurora 34s var(--ease-inout) infinite; /* @kind other */
  --anim-bloom:ddg-bloom 7s var(--ease-inout) infinite; /* @kind other */
  --anim-pan:ddg-pan 26s linear infinite; /* @kind other */
  --anim-scan:ddg-scan 7.5s var(--ease-inout) infinite; /* @kind other */
  --anim-orbit:ddg-spin 7s linear infinite; /* @kind other */
  --anim-ring-out:ddg-ring-out 2.4s var(--ease-out) infinite; /* @kind other */
  --anim-slide-in:ddg-slide-in var(--duration-slow) var(--ease-out) both; /* @kind other */
  --anim-caret:ddg-caret 1.1s steps(1,end) infinite; /* @kind other */
  --anim-flock:ddg-flock 58s linear infinite; /* @kind other */
  --anim-bob:ddg-bob 6.5s var(--ease-inout) infinite; /* @kind other */
  --anim-wave:ddg-wave 26s linear infinite; /* @kind other */
  --flock-distance:120vw; /* @kind other */
  --shimmer-fill:linear-gradient(90deg,var(--neutral-100) 0%,var(--neutral-200) 42%,var(--neutral-100) 84%); /* @kind color */
  --shimmer-fill-inverse:linear-gradient(90deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.14) 42%,rgba(255,255,255,.06) 84%); /* @kind color */
}

/* Scroll reveal. Opt in by setting data-ddg-motion on <html> (ui_kits/motion.js
   does it), so a page without the observer shows its content as normal.
   [data-reveal-index] staggers siblings — 70ms steps, never past 280ms. */
[data-ddg-motion] [data-reveal]{opacity:0;transform:translateY(var(--reveal-shift,14px));transition:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
[data-ddg-motion] [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  :root{--anim-rise:none; /* @kind other */
    --anim-fade:none; /* @kind other */
    --anim-pulse:none; /* @kind other */
    --anim-shimmer:none; /* @kind other */
    --anim-spin:none; /* @kind other */
    --anim-drift:none; /* @kind other */
    --anim-sweep:none; /* @kind other */
    --anim-draw:none; /* @kind other */
    --anim-echo-ring:none; /* @kind other */
    --anim-aurora:none; /* @kind other */
    --anim-bloom:none; /* @kind other */
    --anim-pan:none; /* @kind other */
    --anim-scan:none; /* @kind other */
    --anim-orbit:none; /* @kind other */
    --anim-ring-out:none; /* @kind other */
    --anim-slide-in:none; /* @kind other */
    --anim-caret:none; /* @kind other */
    --anim-flock:none; /* @kind other */
    --anim-bob:none; /* @kind other */
    --anim-wave:none; /* @kind other */}
  [data-ddg-motion] [data-reveal]{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ── tokens/semantic.css ─────────────────────────────────────────────── */
/* Semantic aliases. Components reference these, not the base palette. */
:root{
  --text-primary:var(--ink-900);
  --text-secondary:var(--slate-600);
  --text-tertiary:var(--slate-400);
  --text-brand:var(--ink-700);
  --text-inverse:var(--neutral-0);
  --text-inverse-muted:rgba(255,255,255,.68);
  --text-link:var(--ink-700);
  --text-link-hover:var(--accent-blue);
  --text-danger:var(--accent-red);

  --surface-page:var(--neutral-0);
  --surface-page-alt:var(--neutral-50);
  --surface-card:var(--neutral-0);
  --surface-sunken:var(--neutral-100);
  --surface-ink:var(--ink-900);
  --surface-ink-deep:var(--ink-1000);
  --surface-slate:var(--slate-800);
  --surface-overlay:rgba(8,23,31,.62);
  --surface-glass:rgba(255,255,255,.72);
  --surface-panel:var(--neutral-0);
  --surface-panel-inverse:rgba(255,255,255,.045);
  --surface-code:var(--ink-1000);

  --border-default:var(--neutral-200);
  --border-emphasis:var(--neutral-300);
  --border-inverse-default:rgba(255,255,255,.16);
  --border-focus:var(--accent-blue);

  --action-primary-bg:var(--ink-700);
  --action-primary-bg-hover:var(--ink-900);
  --action-primary-bg-active:var(--ink-1000);
  --action-primary-fg:var(--neutral-0);
  --action-secondary-border:var(--neutral-300);
  --action-secondary-fg:var(--ink-900);
  --action-secondary-bg-hover:var(--neutral-100);
  --action-ghost-fg:var(--slate-600);
  --action-accent-bg:var(--accent-blue);
  --action-accent-bg-hover:#2A66D6;
  --action-accent-fg:var(--neutral-0);
  --action-disabled-bg:var(--neutral-200);
  --action-disabled-fg:var(--slate-300);

  /* Spectrum actions. The three plume hues driven down the value ramp so a filled
     button carries WHITE text — one rule for every action in the system instead of
     an ink-text exception. Never more than one spectrum button in a view. */
  --action-cyan-bg:var(--accent-cyan-deep);
  --action-cyan-bg-hover:#00697A;
  --action-cyan-fg:var(--neutral-0);
  --action-green-bg:var(--accent-green-deep);
  --action-green-bg-hover:#356B27;
  --action-green-fg:var(--neutral-0);
  --action-orange-bg:var(--accent-orange-deep);
  --action-orange-bg-hover:#A83F06;
  --action-orange-fg:var(--neutral-0);

  /* Liquid glass actions. A lens, not a fill: the surface behind shows through,
     blurred and slightly over-saturated, with a bright specular arc across the top
     and a dark refraction line at the bottom edge. Needs something behind it to
     refract — never on flat paper. */
  --action-glass-bg:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,.28));
  --action-glass-bg-hover:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.40));
  --action-glass-border:rgba(255,255,255,.80);
  --action-glass-fg:var(--ink-900);
  --action-glass-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(24,64,88,.10),0 8px 22px -10px rgba(24,64,88,.42);
  --action-glass-bg-inverse:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
  --action-glass-bg-inverse-hover:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.13));
  --action-glass-border-inverse:rgba(255,255,255,.34);
  --action-glass-fg-inverse:var(--neutral-0);
  --action-glass-shadow-inverse:inset 0 1px 0 rgba(255,255,255,.40),inset 0 -1px 0 rgba(0,0,0,.28),0 12px 30px -14px rgba(0,0,0,.72);
  --glass-specular:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.20) 34%,rgba(255,255,255,0) 56%); /* @kind color */
  --glass-specular-inverse:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.07) 36%,rgba(255,255,255,0) 58%); /* @kind color */
  --glass-blur:blur(14px) saturate(180%); /* @kind other */
  --glass-blur-inverse:blur(16px) saturate(170%); /* @kind other */

  /* Echo — the assistant identity. Ink surface, violet light. */
  --echo-surface:var(--ink-1000);
  --echo-surface-soft:rgba(120,88,224,.08);
  --echo-accent:var(--accent-violet);
  --echo-accent-soft:rgba(120,88,224,.18);
  --echo-ring:rgba(120,88,224,.42);
  --echo-bubble:var(--neutral-100);
  --echo-bubble-inverse:rgba(255,255,255,.06);
  --echo-user-bubble:var(--ink-700);

  --status-success:var(--accent-green);
  --status-success-wash:var(--wash-green);
  --status-warning:var(--accent-amber);
  --status-warning-wash:var(--wash-amber);
  --status-danger:var(--accent-red);
  --status-danger-wash:var(--wash-red);
  --status-info:var(--accent-cyan);
  --status-info-wash:var(--wash-digital);
}

/* ── tokens/base.css ─────────────────────────────────────────────────── */
/* Minimal element defaults so a bare page picks up the brand voice.
   Consumers may override freely; nothing here is !important. */
:root{color-scheme:light}
body{font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-normal);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-primary);margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover)}
code,kbd,pre{font-family:var(--font-mono);font-size:.92em}
::selection{background:rgba(56,120,232,.18);color:var(--ink-1000)}
/* Date and time fields supply their own glyph — hide the browser's. */
input[type="date"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator,input[type="datetime-local"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator,input[type="week"]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;width:34px;height:100%;cursor:pointer}
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"]{position:relative}

/* ── fifth practice (added here, not in the bundle) ──────────────── */
:root{
  --practice-search:#1DBB91;
  --wash-search:#E8F8F4;
}

/* ── sixth practice (added here, not in the bundle) ──────────────── */
:root{
  --practice-it:#7C909C;
  --wash-it:#EFF2F4;
}

/* ── light-ground corrections (added here, not in the bundle) ────── */
:root{
  --text-tertiary:var(--slate-500);
  --action-accent-bg:#2A66D6;
  --action-accent-bg-hover:#2357B8;
  /* --accent-red is 4.03:1 on paper. --wash-red-fg is the same red cut to read
     as text, and it already carries both grounds, so --text-danger inherits the
     dark half for free. */
  --text-danger:var(--wash-red-fg);
  /* Accent AS TEXT. --accent-blue is 4.18:1 on paper, which is why every filled
     accent control uses --action-accent-bg instead; an arrow link has no fill
     to hide behind. Same numbers as the cyber wash cuts, because it is the same
     blue, under its own name rather than borrowing a practice's. */
  --text-accent:#1A61DE;
  /* The last raw-ramp reference in the token layer: axis and series labels are
     text at 11px and were reading --slate-400, the rung --text-tertiary used to
     point at. 4.42:1 on a card. (No backticks in here — see THEMED_CORRECTIONS.) */
  --chart-label:var(--text-tertiary);
}

/* ── dark theme (hoisted from templates/app-shell/AppShell.dc.html) ── */
/* Dark theme.
 *
 * EXTRACTED from templates/app-shell/AppShell.dc.html by scripts/build-design-tokens.mjs.
 * The bundle keeps this in the app shell template rather than in tokens/;
 * it is hoisted here so any surface can carry [data-theme="dark"].
 *
 * Only semantic tokens are re-pointed. The base ramps, the practice hues and
 * the spectrum accents do not change between themes — a brand colour that
 * shifts with the theme is a different brand colour. */
:root[data-theme="dark"]{color-scheme:dark;
--neutral-0:#0F2029;--neutral-50:#0A1821;--neutral-100:#16303C;--neutral-200:#22414F;--neutral-300:#2E5263;--neutral-400:#456C7E;
--ink-900:#E9F1F6;--slate-600:#A7B9C5;--slate-500:#95A9B6;--slate-400:#8098A6;--slate-300:#5D7383;--slate-200:#4A6274;--slate-100:#3A5464;
--text-primary:#E9F1F6;--text-secondary:#A7B9C5;--text-tertiary:#8098A6;--text-brand:#8CC6F0;--text-inverse:#FFFFFF;--text-link:#8CC6F0;--text-link-hover:#B6DDF7;
--surface-page:#08151D;--surface-page-alt:#0B1C25;--surface-card:#0F2029;--surface-sunken:#16303C;--surface-panel:#0F2029;
--surface-ink:#0C2233;--surface-ink-deep:#08171F;--surface-code:#08171F;--echo-surface:#08171F;--surface-glass:rgba(9,22,30,.74);--surface-overlay:rgba(4,11,16,.68);
--border-default:rgba(255,255,255,.10);--border-emphasis:rgba(255,255,255,.18);
--action-primary-bg:#2C6D94;--action-primary-bg-hover:#3A85B0;--action-primary-bg-active:#215779;--action-primary-fg:#FFFFFF;
--action-secondary-fg:#E9F1F6;--action-secondary-border:rgba(255,255,255,.18);--action-secondary-bg-hover:rgba(255,255,255,.07);
--action-ghost-fg:#A7B9C5;--action-accent-fg:#FFFFFF;--action-cyan-fg:#FFFFFF;--action-green-fg:#FFFFFF;--action-orange-fg:#FFFFFF;
--echo-bubble:rgba(255,255,255,.06);--action-glass-fg-inverse:#FFFFFF;--action-glass-fg:#0C2233;
--wash-cyber:rgba(56,120,232,.15);--wash-ai:rgba(120,88,224,.15);--wash-digital:rgba(0,184,208,.14);--wash-retail:rgba(248,112,24,.14);
--wash-green:rgba(128,184,104,.14);--wash-amber:rgba(248,192,0,.13);--wash-red:rgba(217,58,43,.14);
--shadow-xs:0 1px 2px rgba(0,0,0,.32);--shadow-sm:0 1px 3px rgba(0,0,0,.36);
--shadow-md:0 12px 30px -12px rgba(0,0,0,.62),0 2px 6px rgba(0,0,0,.3);--shadow-lg:0 34px 70px -24px rgba(0,0,0,.72),0 8px 20px rgba(0,0,0,.4)}

/* ── per-ground corrections (added here; must follow the dark block) ── */
:root{
  --text-required:#C14908;

  /* Ink cuts. Fixed on both grounds — they are for surfaces that never follow
     the theme, so they must not re-point with it. */
  --wash-cyber-ink:rgba(56,120,232,.15);
  --wash-ai-ink:rgba(120,88,224,.15);
  --wash-search-ink:rgba(29,187,145,.14);
  --wash-it-ink:rgba(124,144,156,.16);
  --wash-digital-ink:rgba(0,184,208,.14);
  --wash-retail-ink:rgba(248,112,24,.14);
  --wash-green-ink:rgba(128,184,104,.14);
  --wash-amber-ink:rgba(248,192,0,.13);
  --wash-red-ink:rgba(217,58,43,.14);

  --wash-cyber-fg-ink:#6597ED;
  --wash-ai-fg-ink:#9D86E8;
  --wash-search-fg-ink:#1CB38B;
  --wash-it-fg-ink:#9CB0BC;
  --wash-digital-fg-ink:#00B4CC;
  --wash-retail-fg-ink:#F86E14;
  --wash-green-fg-ink:#6EAE52;
  --wash-amber-fg-ink:#CC9E00;
  --wash-red-fg-ink:#E36E63;

  /* LoadingOverlay's scrim. It was a flat white at 58%, which over a dark card
     in the dark theme makes a PALE sheet — and the spinner's label, light on
     dark, then sat light-on-light at 1.36:1. The scrim has to dim the surface
     it is over, so it re-points with it.
     Written as rgba rather than a color-mix of --surface-card, which is what
     this was first: Chrome computes color-mix to the color(srgb R G B / A)
     form, whose components are 0-1 rather than 0-255, and anything parsing
     computed colours reads it as near-black. The contrast harness did exactly
     that and reported the fix as a worse failure than the bug.
     NO BACKTICKS ANYWHERE IN THIS STRING. It is a template literal, and one
     backtick closes it early — the whole file then fails to parse. */
  --overlay-veil:rgba(255,255,255,.78);

  /* Paper cuts, which is what the plain names mean on the light ground. */
  --wash-cyber-fg:#1A61DE;
  --wash-ai-fg:#6F4CDE;
  --wash-search-fg:#13795E;
  --wash-it-fg:#546C7B;
  --wash-digital-fg:#007585;
  --wash-retail-fg:#B24905;
  --wash-green-fg:#4A7637;
  --wash-amber-fg:#876900;
  --wash-red-fg:#C53123;
}
:root[data-theme="dark"]{
  --text-required:var(--accent-orange);
  --text-accent:var(--wash-cyber-fg-ink);
  --overlay-veil:rgba(15,32,41,.78);

  /* Search and IT were both added after the dark palette was hoisted out of
     the prototype, so the dark block re-points the original four washes and
     neither of these. Without these two lines the flat light washes survive
     into dark and a chip renders near-white on ink. */
  --wash-search:var(--wash-search-ink);
  --wash-it:var(--wash-it-ink);

  --wash-cyber-fg:var(--wash-cyber-fg-ink);
  --wash-ai-fg:var(--wash-ai-fg-ink);
  --wash-search-fg:var(--wash-search-fg-ink);
  --wash-it-fg:var(--wash-it-fg-ink);
  --wash-digital-fg:var(--wash-digital-fg-ink);
  --wash-retail-fg:var(--wash-retail-fg-ink);
  --wash-green-fg:var(--wash-green-fg-ink);
  --wash-amber-fg:var(--wash-amber-fg-ink);
  --wash-red-fg:var(--wash-red-fg-ink);
}

/* ── reset (added here, not in the bundle) ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh}
img,svg,video,canvas{max-width:100%}