/* Blueprint app kit: the base every Blup app starts from.
 *
 * Three layers, in this order of strength: kit (this file) < style (styles/<id>/style.css) < the app's own CSS, which
 * is unlayered and so always wins without specificity fights. A style sets the tokens below plus a few surface
 * treatments; the markup is the same for every style, so an app can switch styles by swapping one stylesheet.
 *
 * The app gives its coin's colours once, on :root: --coin-1 (the art's main colour), --coin-2 (its strongest contrasting
 * colour), --coin-3 (a third, for prizes and highlights). Each style derives its roles from them.
 *
 * Classes start with k-. States live in attributes: disabled, aria-busy="true" (loading), aria-invalid="true" (error),
 * data-state="success|error|copied|launching|done", aria-selected, aria-current, aria-expanded.
 */
@layer kit, style;

@layer kit {
  :root {
    /* coin seeds (the app overrides these) */
    --coin-1: oklch(0.62 0.12 170);
    --coin-2: oklch(0.66 0.17 30);
    --coin-3: oklch(0.9 0.14 95);

    /* colour roles: a quiet default so the kit renders without a style */
    --scheme: light;
    --ground: oklch(0.965 0.006 170);
    --ground-2: oklch(0.945 0.008 170);
    --ground-deep: oklch(0.86 0.012 170);
    --surface-1: oklch(0.992 0.003 170);
    --surface-2: oklch(0.962 0.007 170);
    --surface-3: oklch(0.93 0.012 170);
    --inverse: oklch(0.24 0.02 170);
    --inverse-2: oklch(0.3 0.022 170);
    --inverse-3: oklch(0.36 0.024 170);
    --on-inverse: oklch(0.97 0.006 170);
    --on-inverse-2: oklch(0.8 0.012 170);
    --on-inverse-3: oklch(0.68 0.014 170);
    --line-inverse: oklch(0.36 0.02 170);
    --ink-1: oklch(0.24 0.02 170);
    --ink-2: oklch(0.42 0.018 170);
    --ink-3: oklch(0.54 0.016 170);
    --on-ground: var(--ink-1);
    --on-ground-2: var(--ink-2);
    --line: oklch(0.9 0.01 170);
    --outline: oklch(0.8 0.012 170);
    --rim: var(--surface-1);
    --accent: oklch(0.52 0.12 170);
    --accent-side: oklch(0.42 0.1 170);
    --on-accent: oklch(0.99 0.004 170);
    --highlight: oklch(0.93 0.1 95);
    --on-highlight: var(--ink-1);
    --good: oklch(0.8 0.15 150);
    --on-good: var(--ink-1);
    --good-ink: oklch(0.47 0.12 150);
    --warn: oklch(0.87 0.15 85);
    --on-warn: var(--ink-1);
    --warn-ink: oklch(0.52 0.12 70);
    --bad: oklch(0.7 0.18 28);
    --on-bad: var(--ink-1);
    --bad-ink: oklch(0.5 0.18 28);
    --focus: var(--ink-1);
    --focus-inverse: var(--highlight);
    --scrim: oklch(0.2 0.02 170 / 0.45);
    --gloss: oklch(0.99 0.01 170 / 0);
    --skel-1: var(--surface-2);
    --skel-2: var(--surface-3);

    /* type */
    --font-display: system-ui, sans-serif;
    --font-heading: var(--font-display);
    --font-text: system-ui, sans-serif;
    --font-mono: ui-monospace, monospace;
    --display-weight: 700;
    --display-case: none;
    --display-tracking: 0;
    --display-leading: 1.05;
    --text-weight: 400;
    --text-weight-strong: 600;
    --text-weight-heavy: 800;
    --leading-tight: 1.2;
    --leading-body: 1.5;
    /* fixed sizes for app panels (ratio 1.25) */
    --t-xs: 0.75rem;
    --t-sm: 0.875rem;
    --t-md: 1rem;
    --t-lg: 1.25rem;
    --t-xl: 1.5625rem;
    --t-2xl: 1.953rem;
    /* fluid sizes for brand moments, bounded at 2.5x */
    --t-h2: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
    --t-h1: clamp(2.25rem, 1.4rem + 2.8vw, 4.25rem);
    --t-hero: clamp(3rem, 1.7rem + 4.6vw, 7rem);
    /* display titles: styles give them an outline and an extrusion */
    --title-fill: currentColor;
    --title-stroke: 0px;
    --title-extrude: none;

    /* space: one 4px scale */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --gutter: clamp(1rem, 3.2vw, 3.5rem);
    --page-max: 105rem;
    --topbar-h: 3.75rem;
    --tabbar-h: 4rem;
    --actionbar-h: 4.75rem;

    /* shape */
    --r-1: 6px;
    --r-2: 10px;
    --r-3: 16px;
    --r-4: 22px;
    --outline-w: 1px;
    --outline-w-sm: 1px;
    --line-w: 1px;
    --sticker-rim: 0px;
    --focus-w: 3px;
    --focus-offset: 3px;

    /* depth: the pressed face of buttons, the base under panels, shadows */
    --press-depth: 0px;
    --tile-depth: 0px;
    --tile-side: var(--ground-deep);
    --shadow-1: 0 1px 2px oklch(0.2 0.02 170 / 0.08);
    --shadow-2: 0 2px 8px -2px oklch(0.2 0.02 170 / 0.12);
    --shadow-3: 0 18px 40px -12px oklch(0.2 0.02 170 / 0.3);
    --shadow-up: 0 -8px 24px -12px oklch(0.2 0.02 170 / 0.25);
    /* a sticker's lift is a filter, so it follows the sticker's own shape */
    --sticker-lift: drop-shadow(0 3px 5px oklch(0.2 0.02 170 / 0.25));

    /* motion: exponential ease-out, no bounce */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --d-1: 90ms;
    --d-2: 180ms;
    --d-3: 320ms;
    --d-4: 600ms;

    /* density: controls, rows and panel padding scale with --density (data-density="compact" on <body> or a
       container sets 0.84) */
    --density: 1;
    --control-h-sm: 2.25rem;
    --control-h: 2.75rem;
    --control-h-lg: 3.5rem;
    --row-h: 3rem;
    --pad-panel: clamp(1rem, 0.7rem + 1vw, 1.5rem);

    /* stacking */
    --z-sticky: 200;
    --z-dropdown: 300;
    --z-sheet: 400;
    --z-toast: 500;
    --z-tip: 600;

    /* surface treatments (styles fill these) */
    --ground-image: none;
    --panel-image: none;

    /* wallet identicons: lightness and chroma of their two colours (hues come from the address) */
    --id-l: 0.78;
    --id-c: 0.12;
    --id-l2: 0.42;
    --id-c2: 0.1;

    /* icons, drawn as masks so they take the text colour */
    --i-copy: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='8.5' y='8.5' width='11.5' height='11.5' rx='2.8'/><path d='M15.5 8.5V6.3A2.3 2.3 0 0 0 13.2 4H6.3A2.3 2.3 0 0 0 4 6.3v6.9a2.3 2.3 0 0 0 2.3 2.3h2.2'/></svg>");
    --i-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.8l4.4 4.4L19 7.6'/></svg>");
    --i-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'><path d='M6.5 6.5l11 11M17.5 6.5l-11 11'/></svg>");
    --i-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 9.5l5.5 5.5 5.5-5.5'/></svg>");
    --i-external: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M13.5 4.5h6v6M19.5 4.5l-8.5 8.5M18 14v3.7a2.3 2.3 0 0 1-2.3 2.3H6.3A2.3 2.3 0 0 1 4 17.7V8.3A2.3 2.3 0 0 1 6.3 6H10'/></svg>");
    --i-alert: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='12' cy='12' r='8.8'/><path d='M12 7.4v5.6M12 16.6v.1'/></svg>");
    --i-info: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='12' cy='12' r='8.8'/><path d='M12 11v5.6M12 7.4v.1'/></svg>");
    --i-up: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5.5l7.5 11.5h-15z' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
    --i-down: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 18.5l7.5-11.5h-15z' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
    --i-sort: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 4l5 6H7zM12 20l5-6H7z'/></svg>");
    --i-play: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5.5l11 6.5-11 6.5z' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
    --i-pause: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.5 5.5h3v13h-3zM14.5 5.5h3v13h-3z' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
  }

  /* roles derived from the others, worked out again wherever a palette is (an element with data-palette and its own
     --coin-*), so they follow it */
  :root, [data-palette] {
    /* secondary text on the highlight (the visitor's own row): the highlight's ink, a step toward the highlight; a
       browser without color-mix() lets such text take the colour around it */
    --on-highlight-2: color-mix(in oklch, var(--on-highlight) 80%, var(--highlight));
    /* the number on a medal (ranks 1 to 3), in any context (an inverse panel too): a style whose ink is light sets a
       dark one */
    --on-medal: var(--ink-1);
  }

  [data-density="compact"] { --density: 0.84; }

  /* ---------- base ---------- */

  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html {
    color-scheme: var(--scheme);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    min-height: 100dvh;
    font-family: var(--font-text);
    font-size: var(--t-md);
    font-weight: var(--text-weight);
    line-height: var(--leading-body);
    color: var(--on-ground);
    background-color: var(--ground);
    background-image: var(--ground-image);
    background-repeat: no-repeat;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  img, svg, video, canvas { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
  a { color: inherit; text-decoration-thickness: 0.09em; text-underline-offset: 0.2em; }
  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: var(--display-weight);
    line-height: var(--display-leading);
    letter-spacing: var(--display-tracking);
    text-transform: var(--display-case);
    text-wrap: balance;
  }
  p, li, dd { text-wrap: pretty; }
  ::selection { background: var(--highlight); color: var(--on-highlight); }
  :focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0s !important;
      scroll-behavior: auto !important;
    }
  }

  /* ---------- layout primitives ---------- */

  .k-stack { display: flex; flex-direction: column; gap: var(--gap, var(--s-4)); min-width: 0; }
  .k-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--s-3)); }
  .k-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--gap, var(--s-3)); min-width: 0; }
  .k-grid { display: grid; gap: var(--gap, var(--s-5)); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 18rem), 100%), 1fr)); }
  .k-page { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
  .k-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  @media (max-width: 767.98px) { .k-desk-only { display: none !important; } }
  @media (min-width: 768px) { .k-phone-only { display: none !important; } }

  /* The app shell: a sticky top bar, the main area that takes the leftover height (so a short page keeps its footer at
     the window's bottom), the footer; on phones a bottom tab bar and an optional action bar above it. */
  .k-app { min-height: 100dvh; display: flex; flex-direction: column; }
  .k-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .k-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: var(--topbar-h);
    /* its content lines up with .k-page's, however wide the window */
    padding: var(--s-2) max(var(--gutter), (100% - var(--page-max)) / 2 + var(--gutter));
    color: var(--on-ground);
    transition: background-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
  }
  /* kit.js sets data-k-scrolled on <html> once the page scrolls: the bar gets its own ground then */
  [data-k-scrolled] .k-topbar { background-color: var(--ground); box-shadow: 0 var(--outline-w) 0 0 var(--outline), var(--shadow-2); }
  .k-topbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
  .k-nav { display: flex; align-items: center; gap: var(--s-1); }
  .k-nav a, .k-nav button {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h-sm);
    padding: 0 var(--s-3);
    border-radius: var(--r-1);
    font-weight: var(--text-weight-heavy);
    font-size: var(--t-sm);
    color: var(--on-ground-2);
    text-decoration: none;
    transition: color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
  }
  .k-nav a:hover, .k-nav button:hover { color: var(--on-ground); background: var(--ground-2); }
  /* the current route sits on a surface, so it takes the surface's ink */
  .k-nav [aria-current="page"] { color: var(--ink-1); background: var(--surface-1); box-shadow: inset 0 0 0 var(--outline-w-sm) var(--outline); }
  /* below 1024px the routes move to the bottom tab bar, and the chips drop to what fits */
  @media (max-width: 1023.98px) {
    .k-topbar .k-nav { display: none; }
    .k-topbar .k-wallet__addr { display: none; }
    .k-topbar .k-wallet { padding-right: var(--s-1); }
  }
  @media (max-width: 767.98px) {
    .k-topbar { gap: var(--s-2); }
    .k-topbar__end { gap: var(--s-2); }
    .k-topbar .k-btn { --btn-h: var(--control-h-sm); font-size: var(--t-sm); }
  }
  /* the narrowest phones: with a button beside it in the top bar (Sign in), the coin chip keeps its symbol and drops
     the change (the coin's sheet still shows it) */
  @media (max-width: 419.98px) { .k-topbar:has(.k-btn:not([hidden])) .k-coin .k-change { display: none; } }

  .k-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: var(--t-lg);
    line-height: 1;
    letter-spacing: var(--display-tracking);
    text-transform: var(--display-case);
    color: var(--on-ground);
    text-decoration: none;
    white-space: nowrap;
  }
  .k-mark__art { width: 2.5rem; height: 2.5rem; flex: none; }

  .k-footer { padding: var(--s-7) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom)); }

  .k-tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--s-1);
    min-height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: var(--surface-1);
    color: var(--ink-2);
    box-shadow: 0 calc(-1 * var(--outline-w)) 0 0 var(--outline), var(--shadow-up);
  }
  .k-tabbar a, .k-tabbar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 3rem;
    border-radius: var(--r-2);
    font-size: var(--t-xs);
    font-weight: var(--text-weight-heavy);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
  }
  .k-tabbar svg, .k-tabbar .k-icon { width: 1.5rem; height: 1.5rem; }
  .k-tabbar [aria-current="page"] { color: var(--on-highlight); background: var(--highlight); box-shadow: inset 0 0 0 var(--outline-w-sm) var(--outline); }
  @media (min-width: 1024px) { .k-tabbar { display: none; } }
  @media (max-width: 1023.98px) {
    body:has(.k-tabbar) { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  }

  /* The primary action within thumb reach on phones (above the tab bar when there is one); in the flow on wider
     screens. On phones it is a strip of surface with a top edge, so the ink the app writes in it reads in every
     style. --actionbar-h is the height the page keeps free for it: a style with taller buttons raises it. */
  .k-actionbar { display: flex; align-items: center; gap: var(--s-3); }
  @media (max-width: 767.98px) {
    .k-actionbar {
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      z-index: var(--z-sticky);
      min-height: var(--actionbar-h);
      padding: var(--s-3) var(--gutter) calc(var(--s-3) + var(--press-depth) + env(safe-area-inset-bottom));
      background: var(--surface-1);
      color: var(--ink-1);
      box-shadow: 0 calc(-1 * var(--outline-w)) 0 0 var(--outline);
    }
    body:has(.k-actionbar) { padding-bottom: calc(var(--actionbar-h) + env(safe-area-inset-bottom)); }
    body:has(.k-tabbar) .k-actionbar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: calc(var(--s-3) + var(--press-depth)); }
    body:has(.k-tabbar):has(.k-actionbar) { padding-bottom: calc(var(--tabbar-h) + var(--actionbar-h) + env(safe-area-inset-bottom)); }
  }

  /* A stage: one scene that is the app; its HUD sits at the edges, controls stay clickable, the scene shows between. */
  .k-stage { position: relative; isolation: isolate; overflow: hidden; }
  .k-stage--full { height: 100dvh; }
  .k-hud {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-areas: "tl t tr" "l c r" "bl b br";
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: var(--s-3);
    padding: max(var(--s-4), env(safe-area-inset-top)) max(var(--s-4), env(safe-area-inset-right)) max(var(--s-4), env(safe-area-inset-bottom)) max(var(--s-4), env(safe-area-inset-left));
    pointer-events: none;
  }
  .k-hud > * { pointer-events: auto; }
  .k-hud__tl { grid-area: tl; justify-self: start; align-self: start; }
  .k-hud__t { grid-area: t; align-self: start; }
  .k-hud__tr { grid-area: tr; justify-self: end; align-self: start; }
  .k-hud__bl { grid-area: bl; justify-self: start; align-self: end; }
  .k-hud__b { grid-area: b; align-self: end; }
  .k-hud__br { grid-area: br; justify-self: end; align-self: end; }

  /* ---------- surfaces ---------- */

  .k-panel {
    position: relative;
    background-color: var(--surface-1);
    background-image: var(--panel-image);
    color: var(--ink-1);
    border: var(--outline-w) solid var(--outline);
    border-radius: var(--r-3);
    box-shadow: 0 var(--tile-depth) 0 0 var(--tile-side), var(--shadow-2);
    padding: calc(var(--pad-panel) * var(--density));
    min-width: 0;
  }
  .k-panel--flush { padding: 0; overflow: clip; }
  .k-panel__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
  .k-panel--flush > .k-panel__head { margin: 0; padding: var(--pad-panel) var(--pad-panel) var(--s-4); }
  .k-panel__title { font-size: var(--t-xl); }
  /* A dark surface inside a light app (or the reverse): every token inside flips, so nested parts just work. */
  .k-inverse {
    --surface-1: var(--inverse);
    --surface-2: var(--inverse-2);
    --surface-3: var(--inverse-3);
    --ink-1: var(--on-inverse);
    --ink-2: var(--on-inverse-2);
    --ink-3: var(--on-inverse-3);
    --line: var(--line-inverse);
    --focus: var(--focus-inverse);
    --skel-1: var(--inverse-2);
    --skel-2: var(--inverse-3);
    --panel-image: none;
    color: var(--ink-1);
  }
  .k-inverse.k-panel, .k-inverse .k-panel { background-color: var(--surface-1); }

  .k-title {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    line-height: var(--display-leading);
    letter-spacing: var(--display-tracking);
    text-transform: var(--display-case);
    color: var(--title-fill);
    -webkit-text-stroke: var(--title-stroke) var(--outline);
    paint-order: stroke fill;
    text-shadow: var(--title-extrude);
    text-wrap: balance;
  }
  /* tabular figures only where numbers are (big figures, .k-num for a number in running text, tables, prices, clocks,
     ranks, badges): in prose a face's tabular set can space out its punctuation */
  .k-figure { font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1; letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
  .k-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .k-muted { color: var(--ink-2); }
  .k-link { font-weight: var(--text-weight-strong); color: inherit; text-decoration-line: underline; text-decoration-color: var(--link-line, currentColor); text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; border-radius: 2px; }
  .k-link:hover { text-decoration-color: currentColor; }
  /* a sticker: a paper rim outside its outline, a lift, a slight tilt (the rim is an outline, so a sticker on a panel
     never reads as a card inside a card) */
  .k-sticker {
    rotate: var(--tilt, -3deg);
    outline: var(--sticker-rim) solid var(--rim);
    outline-offset: 0;
    filter: var(--sticker-lift);
  }

  .k-icon {
    display: inline-block;
    flex: none;
    width: 1.25em;
    height: 1.25em;
    background-color: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
  }
  .k-icon--copy { --i: var(--i-copy); }
  .k-icon--check { --i: var(--i-check); }
  .k-icon--close { --i: var(--i-close); }
  .k-icon--chevron { --i: var(--i-chevron); }
  .k-icon--external { --i: var(--i-external); }
  .k-icon--alert { --i: var(--i-alert); }
  .k-icon--info { --i: var(--i-info); }
  .k-icon--up { --i: var(--i-up); }
  .k-icon--down { --i: var(--i-down); }
  .k-icon--play { --i: var(--i-play); }
  .k-icon--pause { --i: var(--i-pause); }

  .k-avatar {
    --size: 2rem;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: var(--outline-w-sm) solid var(--outline);
    background: var(--surface-2);
    overflow: hidden;
  }
  .k-avatar > img, .k-avatar > svg { width: 100%; height: 100%; object-fit: cover; }
  .k-id { width: 100%; height: 100%; }

  /* ---------- buttons ---------- */

  .k-btn {
    --btn-face: var(--surface-1);
    /* the face under the pointer and pressed; a style may set them on .k-btn or a variant (the face by default) */
    --btn-face-hover: var(--btn-face);
    --btn-face-active: var(--btn-face);
    --btn-ink: var(--ink-1);
    --btn-side: var(--outline);
    --btn-edge: var(--outline);
    --btn-h: calc(var(--control-h) * var(--density));
    --depth: var(--press-depth);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: var(--btn-h);
    padding: 0.375em calc(var(--btn-h) * 0.42);
    border: var(--outline-w) solid var(--btn-edge);
    border-radius: var(--r-2);
    background-color: var(--btn-face);
    color: var(--btn-ink);
    font-family: var(--font-text);
    font-size: var(--t-md);
    font-weight: var(--text-weight-heavy);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 2px 0 0 var(--gloss), 0 var(--depth) 0 0 var(--btn-side);
    transition: transform var(--d-1) var(--ease-out), box-shadow var(--d-1) var(--ease-out), background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
  }
  @media (hover: hover) {
    .k-btn:hover { transform: translateY(-1px); box-shadow: inset 0 2px 0 0 var(--gloss), 0 calc(var(--depth) + 1px) 0 0 var(--btn-side); }
    .k-btn:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"], [data-state])):hover { background-color: var(--btn-face-hover); }
  }
  .k-btn:active { transform: translateY(var(--depth)); box-shadow: inset 0 2px 0 0 var(--gloss), 0 0 0 0 var(--btn-side); transition-duration: 40ms; }
  .k-btn:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"], [data-state])):active { background-color: var(--btn-face-active); }
  /* focus: a ring that wraps the face and its base */
  .k-btn:focus-visible { outline: none; }
  .k-btn:focus-visible::after {
    content: "";
    position: absolute;
    inset: calc(-1 * (var(--outline-w) + var(--focus-offset) + var(--focus-w)));
    bottom: calc(-1 * (var(--outline-w) + var(--focus-offset) + var(--focus-w) + var(--depth)));
    border: var(--focus-w) solid var(--focus);
    border-radius: calc(var(--r-2) + var(--focus-offset) + var(--focus-w));
    pointer-events: none;
  }
  /* sizes first, so a variant that has no base (quiet) keeps it flat at any size */
  .k-btn--sm { --btn-h: calc(var(--control-h-sm) * var(--density)); --depth: calc(var(--press-depth) * 0.6); font-size: var(--t-sm); }
  .k-btn--lg { --btn-h: calc(var(--control-h-lg) * var(--density)); font-size: var(--t-lg); border-radius: calc(var(--r-2) + 2px); }
  .k-btn--block { display: flex; width: 100%; }
  .k-btn--icon { padding: 0; width: var(--btn-h); }
  .k-btn--icon .k-icon { width: 1.35em; height: 1.35em; }
  .k-btn--primary { --btn-face: var(--accent); --btn-ink: var(--on-accent); --btn-side: var(--accent-side); }
  .k-btn--secondary { --btn-face: var(--surface-1); }
  .k-btn--quiet { --depth: 0px; --btn-face: transparent; --btn-edge: transparent; --gloss: transparent; }
  @media (hover: hover) { .k-btn--quiet:hover { --btn-face: var(--surface-2); transform: none; } }
  .k-btn--quiet:active { transform: none; --btn-face: var(--surface-3); }
  .k-btn:disabled, .k-btn[aria-disabled="true"] {
    --btn-face: var(--surface-2);
    --btn-ink: var(--ink-3);
    --btn-edge: var(--ink-3);
    --gloss: transparent;
    transform: translateY(var(--depth));
    box-shadow: none;
    cursor: not-allowed;
  }
  .k-btn--quiet:disabled, .k-btn--quiet[aria-disabled="true"] { --btn-face: transparent; --btn-edge: transparent; transform: none; }
  /* loading: the label keeps its width, a spinner takes its place */
  .k-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
  .k-btn[aria-busy="true"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.15em;
    height: 1.15em;
    margin: -0.575em 0 0 -0.575em;
    border-radius: 50%;
    border: 0.18em solid var(--btn-ink);
    border-right-color: transparent;
    animation: k-spin 0.7s linear infinite;
  }
  .k-btn[aria-busy="true"] > * { visibility: hidden; }
  .k-btn[data-state="success"] { --btn-face: var(--good); --btn-ink: var(--on-good); --btn-side: var(--outline); }
  .k-btn[data-state="error"] { --btn-face: var(--bad); --btn-ink: var(--on-bad); --btn-side: var(--outline); }
  .k-btn[data-state="success"]::before, .k-btn[data-state="error"]::before {
    content: "";
    flex: none;
    width: 1.2em;
    height: 1.2em;
    background: currentColor;
    -webkit-mask: var(--i-check) center / contain no-repeat;
    mask: var(--i-check) center / contain no-repeat;
  }
  .k-btn[data-state="error"]::before { -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }
  @keyframes k-spin { to { transform: rotate(1turn); } }

  /* ---------- fields ---------- */

  .k-field { display: grid; gap: var(--s-2); min-width: 0; }
  .k-label { font-size: var(--t-sm); font-weight: var(--text-weight-heavy); color: var(--ink-1); }
  .k-hint { font-size: var(--t-sm); color: var(--ink-2); }
  .k-error { display: flex; align-items: flex-start; gap: var(--s-1); font-size: var(--t-sm); font-weight: var(--text-weight-strong); color: var(--bad-ink); }
  .k-error::before { content: ""; flex: none; width: 1.15em; height: 1.15em; margin-top: 0.12em; background: currentColor; -webkit-mask: var(--i-alert) center / contain no-repeat; mask: var(--i-alert) center / contain no-repeat; }
  .k-error:empty { display: none; }
  .k-input {
    display: block;
    width: 100%;
    min-height: calc(var(--control-h) * var(--density));
    padding: 0 var(--s-3);
    border: var(--outline-w) solid var(--outline);
    border-radius: var(--r-2);
    background-color: var(--surface-2);
    color: var(--ink-1);
    font-size: var(--t-md);
    font-weight: var(--text-weight-strong);
    box-shadow: inset 0 3px 0 0 var(--field-inset, transparent);
    transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
  }
  textarea.k-input { min-height: 6.5rem; padding-block: var(--s-3); line-height: var(--leading-body); resize: vertical; }
  .k-input::placeholder { color: var(--ink-3); opacity: 1; font-weight: var(--text-weight); }
  .k-input:is([inputmode="decimal"], [inputmode="numeric"], [type="number"]) { font-variant-numeric: tabular-nums; }
  @media (hover: hover) { .k-input:hover:not(:disabled):not(:focus) { background-color: var(--surface-3); } }
  .k-input:focus { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); background-color: var(--surface-1); }
  .k-input[aria-invalid="true"] { border-color: var(--bad-ink); background-color: var(--surface-1); box-shadow: inset 0 3px 0 0 var(--bad); }
  .k-input:disabled, .k-input[readonly] { border-color: var(--ink-3); color: var(--ink-2); cursor: not-allowed; }
  .k-input[readonly] { cursor: default; }
  /* an input with fixed text inside its border ("SOL", "$") */
  .k-input-group { position: relative; display: flex; align-items: center; }
  .k-input-group > .k-input { padding-right: calc(var(--s-3) + var(--addon-w, 3.2em)); }
  .k-input-group__addon { position: absolute; right: calc(var(--outline-w) + var(--s-3)); font-weight: var(--text-weight-heavy); color: var(--ink-2); pointer-events: none; }

  /* ---------- listbox (the dropdown the app draws; never the operating system's menu) ---------- */

  .k-select { position: relative; min-width: 0; }
  .k-select__button {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    min-height: calc(var(--control-h) * var(--density));
    padding: 0 var(--s-2) 0 var(--s-3);
    border: var(--outline-w) solid var(--outline);
    border-radius: var(--r-2);
    background-color: var(--surface-2);
    color: var(--ink-1);
    font-weight: var(--text-weight-strong);
    text-align: left;
    box-shadow: inset 0 3px 0 0 var(--field-inset, transparent);
    transition: background-color var(--d-2) var(--ease-out);
  }
  @media (hover: hover) { .k-select__button:hover { background-color: var(--surface-3); } }
  .k-select__button:focus-visible, .k-select__button[aria-expanded="true"] { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); background-color: var(--surface-1); }
  .k-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .k-select__value:empty::before { content: attr(data-placeholder); color: var(--ink-3); font-weight: var(--text-weight); }
  .k-select__button::after {
    content: "";
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    background: currentColor;
    -webkit-mask: var(--i-chevron) center / contain no-repeat;
    mask: var(--i-chevron) center / contain no-repeat;
    transition: transform var(--d-2) var(--ease-out);
  }
  .k-select__button[aria-expanded="true"]::after { transform: rotate(180deg); }
  .k-select__button[aria-invalid="true"] { border-color: var(--bad-ink); box-shadow: inset 0 3px 0 0 var(--bad); }
  .k-select__button:disabled { color: var(--ink-3); border-color: var(--ink-3); cursor: not-allowed; }
  .k-select__list, .k-menu {
    position: fixed;
    inset: auto;
    z-index: var(--z-dropdown);
    margin: 0;
    padding: var(--s-1);
    min-width: 12rem;
    max-height: min(20rem, 60dvh);
    overflow: auto;
    overscroll-behavior: contain;
    list-style: none;
    background: var(--surface-1);
    color: var(--ink-1);
    border: var(--outline-w) solid var(--outline);
    border-radius: var(--r-3);
    box-shadow: 0 var(--tile-depth) 0 0 var(--tile-side), var(--shadow-3);
    opacity: 1;
    transform: none;
    transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out), overlay var(--d-2) allow-discrete, display var(--d-2) allow-discrete;
  }
  .k-select__list:popover-open, .k-menu:popover-open { display: block; }
  @starting-style {
    .k-select__list:popover-open, .k-menu:popover-open { opacity: 0; transform: translateY(-6px); }
  }
  .k-select__list[data-flip]:popover-open { transform-origin: bottom; }
  .k-select__list:focus, .k-menu:focus { outline: none; }
  .k-option {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: calc(2.75rem * var(--density));
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    font-weight: var(--text-weight-strong);
    cursor: pointer;
    user-select: none;
  }
  .k-option__meta { margin-left: auto; font-size: var(--t-sm); font-weight: var(--text-weight); color: var(--ink-2); }
  .k-option::after { content: ""; flex: none; width: 1.1rem; height: 1.1rem; }
  .k-option[aria-selected="true"] { font-weight: var(--text-weight-heavy); }
  .k-option[aria-selected="true"]::after { background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
  .k-option.is-active { background: var(--surface-3); }
  .k-option[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed; }
  .k-option[aria-disabled="true"] .k-option__meta { color: var(--ink-3); }
  .k-option[aria-disabled="true"].is-active { background: var(--surface-2); }

  .k-menu { min-width: 13rem; }
  .k-menu__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    min-height: calc(2.75rem * var(--density));
    padding: 0 var(--s-3);
    border-radius: var(--r-2);
    font-weight: var(--text-weight-strong);
    color: var(--ink-1);
    text-decoration: none;
  }
  .k-menu__item:hover, .k-menu__item:focus-visible { background: var(--surface-3); outline: none; }
  .k-menu__item[data-tone="bad"] { color: var(--bad-ink); }
  .k-menu__sep { height: var(--line-w); margin: var(--s-1) var(--s-2); background: var(--line); }

  /* ---------- tabs and segmented control ---------- */

  .k-tabs { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
  .k-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: calc(var(--control-h) * var(--density));
    padding: 0 var(--s-3);
    border-radius: var(--r-2);
    font-weight: var(--text-weight-heavy);
    color: var(--ink-2);
    white-space: nowrap;
    transition: color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
  }
  .k-tab::after {
    content: "";
    position: absolute;
    left: var(--s-3);
    right: var(--s-3);
    bottom: 3px;
    height: 4px;
    border-radius: 4px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform var(--d-3) var(--ease-out);
  }
  @media (hover: hover) { .k-tab:hover { color: var(--ink-1); background: var(--surface-2); } }
  .k-tab[aria-selected="true"] { color: var(--ink-1); }
  .k-tab[aria-selected="true"]::after { transform: scaleX(1); box-shadow: 0 0 0 var(--outline-w-sm) var(--outline); }
  .k-tab__count { font-size: var(--t-xs); padding: 1px 6px; border-radius: var(--r-1); background: var(--surface-3); color: var(--ink-1); font-variant-numeric: tabular-nums; }
  .k-tabpanel:focus-visible { outline-offset: calc(var(--focus-offset) * 2); border-radius: var(--r-2); }

  /* segmented: a native radio group, keyboard-ready without script */
  .k-seg {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    border: var(--outline-w-sm) solid var(--outline);
    border-radius: calc(var(--r-2) + 3px);
    background: var(--surface-2);
    min-width: 0;
  }
  .k-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .k-seg label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--control-h-sm) * var(--density) - 4px);
    padding: 0 var(--s-3);
    border-radius: var(--r-2);
    border: var(--outline-w-sm) solid transparent;
    font-size: var(--t-sm);
    font-weight: var(--text-weight-heavy);
    color: var(--ink-2);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), transform var(--d-1) var(--ease-out);
  }
  @media (hover: hover) { .k-seg label:hover { color: var(--ink-1); } }
  .k-seg input:checked + label {
    background: var(--surface-1);
    color: var(--ink-1);
    border-color: var(--outline);
    box-shadow: inset 0 2px 0 0 var(--gloss), 0 calc(var(--press-depth) * 0.5) 0 0 var(--outline);
    transform: translateY(calc(var(--press-depth) * -0.25));
  }
  .k-seg input:focus-visible + label { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
  .k-seg input:disabled + label { color: var(--ink-3); cursor: not-allowed; }

  /* ---------- the coin chip and the wallet chip ---------- */

  .k-coin, .k-wallet {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: calc(var(--control-h) * var(--density));
    padding: 0 var(--s-3) 0 var(--s-1);
    border: var(--outline-w-sm) solid var(--outline);
    border-radius: var(--r-2);
    background: var(--surface-1);
    color: var(--ink-1);
    font-weight: var(--text-weight-heavy);
    font-size: var(--t-sm);
    white-space: nowrap;
    box-shadow: inset 0 2px 0 0 var(--gloss), 0 calc(var(--press-depth) * 0.6) 0 0 var(--outline);
    transition: transform var(--d-1) var(--ease-out), box-shadow var(--d-1) var(--ease-out);
  }
  @media (hover: hover) { .k-coin:hover, .k-wallet:hover { transform: translateY(-1px); box-shadow: inset 0 2px 0 0 var(--gloss), 0 calc(var(--press-depth) * 0.6 + 1px) 0 0 var(--outline); } }
  .k-coin:active, .k-wallet:active { transform: translateY(calc(var(--press-depth) * 0.6)); box-shadow: inset 0 2px 0 0 var(--gloss); }
  .k-coin__img { width: 2rem; height: 2rem; flex: none; border-radius: 50%; overflow: hidden; }
  .k-coin__img > img, .k-coin__img > svg { width: 100%; height: 100%; object-fit: cover; }
  .k-coin__sym { font-size: var(--t-sm); }
  .k-coin__price { font-weight: var(--text-weight-strong); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .k-coin[aria-busy="true"] .k-coin__price, .k-coin[aria-busy="true"] .k-change { color: transparent; background: var(--skel-2); border-color: transparent; border-radius: var(--r-1); }
  .k-coin[data-state="launching"] .k-coin__price { color: var(--ink-2); font-weight: var(--text-weight-strong); }
  .k-coin[data-state="launching"] .k-change { display: none; }
  @media (max-width: 1099.98px) { .k-topbar .k-coin__price { display: none; } }
  .k-wallet { padding-left: var(--s-1); }
  .k-wallet .k-avatar { --size: 2rem; }
  .k-wallet[aria-expanded="true"] { transform: translateY(calc(var(--press-depth) * 0.6)); box-shadow: inset 0 2px 0 0 var(--gloss); }

  /* a price change: sign, triangle and colour together, never colour alone */
  .k-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px 2px 4px;
    border-radius: var(--r-1);
    font-size: var(--t-xs);
    font-weight: var(--text-weight-heavy);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    background: var(--surface-3);
    color: var(--ink-1);
  }
  .k-change::before { content: ""; width: 0.85em; height: 0.85em; background: currentColor; -webkit-mask: var(--i-up) center / contain no-repeat; mask: var(--i-up) center / contain no-repeat; }
  .k-change[data-dir="up"] { background: var(--good); color: var(--on-good); }
  .k-change[data-dir="down"] { background: var(--bad); color: var(--on-bad); }
  .k-change[data-dir="down"]::before { -webkit-mask-image: var(--i-down); mask-image: var(--i-down); }
  .k-change[data-dir="flat"]::before { display: none; }

  /* ---------- tables, lists, leaderboards ---------- */

  .k-table-wrap { overflow: auto; max-height: var(--table-max, none); overscroll-behavior-x: contain; }
  .k-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
  .k-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--s-2) var(--s-3);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--t-sm);
    font-weight: var(--text-weight-heavy);
    text-align: left;
    white-space: nowrap;
    /* the second shadow covers the hairline seams sticky cells leave between them */
    box-shadow: inset 0 calc(-1 * var(--outline-w-sm)) 0 0 var(--outline), 1px 0 0 0 var(--surface-2);
  }
  .k-table td { height: calc(var(--row-h) * var(--density)); padding: var(--s-1) var(--s-3); border-bottom: var(--line-w) solid var(--line); vertical-align: middle; }
  .k-table th:first-child, .k-table td:first-child { padding-left: var(--pad-panel); }
  .k-table th:last-child, .k-table td:last-child { padding-right: var(--pad-panel); }
  .k-table .is-num { text-align: right; white-space: nowrap; }
  .k-table tbody tr { transition: background-color var(--d-2) var(--ease-out); }
  @media (hover: hover) { .k-table tbody tr:hover { background: var(--surface-2); } }
  /* the visitor's own row (or a pinned row that stands in for it, "Sign in to see your place"): highlighted, and it
     sticks to the bottom of a long table so it is always in sight */
  .k-table tr.is-you, .k-table tr.is-you:hover { background: var(--highlight); color: var(--on-highlight); }
  .k-table tr.is-you td, .k-table tr.is-pinned td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--highlight);
    border-bottom-color: transparent;
    box-shadow: inset 0 var(--outline-w-sm) 0 0 var(--outline);
  }
  .k-table tr.is-pinned td { background: var(--surface-2); text-align: center; }
  .k-table tr.is-gap td { height: auto; padding-block: var(--s-1); text-align: center; color: var(--ink-3); font-weight: var(--text-weight-heavy); letter-spacing: 0.2em; border-bottom: 0; }
  .k-sort { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; border-radius: var(--r-1); }
  .k-sort::after { content: ""; width: 0.85em; height: 0.85em; background: currentColor; opacity: 0.45; -webkit-mask: var(--i-sort) center / contain no-repeat; mask: var(--i-sort) center / contain no-repeat; }
  [aria-sort="ascending"] .k-sort::after { opacity: 1; -webkit-mask-image: var(--i-up); mask-image: var(--i-up); }
  [aria-sort="descending"] .k-sort::after { opacity: 1; -webkit-mask-image: var(--i-down); mask-image: var(--i-down); }

  /* the rank cell: plain numbers, a medal for the first three */
  .k-rank {
    display: inline-grid;
    place-items: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 4px;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: var(--t-md);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .k-rank[data-rank="1"], .k-rank[data-rank="2"], .k-rank[data-rank="3"] {
    border-radius: 50%;
    border: var(--outline-w-sm) solid var(--outline);
    box-shadow: 0 2px 0 0 var(--outline);
    color: var(--on-medal);
  }
  .k-rank[data-rank="1"] { background: var(--medal-1, oklch(0.87 0.15 90)); }
  .k-rank[data-rank="2"] { background: var(--medal-2, oklch(0.88 0.02 250)); }
  .k-rank[data-rank="3"] { background: var(--medal-3, oklch(0.76 0.1 55)); }
  .k-who { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
  /* the avatar, with a "You" sticker on it in the visitor's own row: it costs no width on a phone */
  .k-who__pic { position: relative; flex: none; display: inline-grid; }
  .k-who__you { position: absolute; left: 50%; bottom: -0.6rem; translate: -50% 0; rotate: -6deg; min-height: 1.05rem; padding: 0 0.3rem; font-size: 0.625rem; box-shadow: 0 0 0 var(--outline-w-sm) var(--rim); }
  .k-who__text { display: grid; min-width: 0; line-height: 1.25; }
  .k-who__name { font-weight: var(--text-weight-heavy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .k-who__name .k-badge { margin-left: var(--s-1); vertical-align: 1px; }
  .k-who__addr { font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* secondary text in the visitor's own row takes the highlight's own secondary ink */
  .k-table tr.is-you .k-who__addr, .k-table tr.is-you .k-muted { color: var(--on-highlight-2); }

  .k-list { list-style: none; padding: 0; display: grid; }
  .k-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    min-height: calc(var(--row-h) * var(--density));
    padding: var(--s-2) 0;
    border-bottom: var(--line-w) solid var(--line);
    transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out);
  }
  .k-list__item:last-child { border-bottom: 0; }
  @starting-style { .k-list__item { opacity: 0; transform: translateY(-8px); } }
  .k-list__item[data-new] { animation: k-flash 1.4s var(--ease-out); }
  .k-list__meta { font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
  @keyframes k-flash { from { background-color: var(--highlight); } to { background-color: transparent; } }

  /* ---------- toasts ---------- */

  .k-toasts {
    position: fixed;
    z-index: var(--z-toast);
    top: calc(var(--topbar-h) + var(--s-2));
    inset-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    pointer-events: none;
  }
  @media (min-width: 768px) {
    .k-toasts { top: auto; left: auto; right: var(--s-5); bottom: var(--s-5); width: min(25rem, 100vw - 2 * var(--s-5)); flex-direction: column-reverse; align-items: stretch; }
  }
  .k-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-3);
    width: 100%;
    max-width: 25rem;
    padding: var(--s-3);
    background: var(--surface-1);
    color: var(--ink-1);
    border: var(--outline-w) solid var(--outline);
    border-radius: var(--r-3);
    box-shadow: 0 var(--tile-depth) 0 0 var(--outline), var(--shadow-3);
    transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out);
  }
  @starting-style { .k-toast { opacity: 0; transform: translateY(14px) scale(0.97); } }
  @media (max-width: 767.98px) { @starting-style { .k-toast { opacity: 0; transform: translateY(-14px) scale(0.97); } } }
  .k-toast[data-leaving] { opacity: 0; transform: translateY(8px) scale(0.98); transition-duration: var(--d-2); transition-timing-function: var(--ease-in); }
  .k-toast__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: var(--outline-w-sm) solid var(--outline);
    background: var(--surface-3);
    color: var(--ink-1);
  }
  .k-toast__icon::before { content: ""; width: 1.15rem; height: 1.15rem; background: currentColor; -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat; }
  .k-toast[data-tone="good"] .k-toast__icon { background: var(--good); color: var(--on-good); }
  .k-toast[data-tone="good"] .k-toast__icon::before { -webkit-mask-image: var(--i-check); mask-image: var(--i-check); }
  .k-toast[data-tone="bad"] .k-toast__icon { background: var(--bad); color: var(--on-bad); }
  .k-toast[data-tone="bad"] .k-toast__icon::before { -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }
  .k-toast__body { display: grid; gap: 2px; padding-top: 3px; }
  .k-toast__title { font-weight: var(--text-weight-heavy); line-height: var(--leading-tight); }
  .k-toast__text { font-size: var(--t-sm); color: var(--ink-2); }
  .k-toast__link { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s-1); font-size: var(--t-sm); font-weight: var(--text-weight-heavy); color: var(--ink-1); text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; text-decoration-color: var(--link-line, currentColor); }
  .k-toast__link::after { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--i-external) center / contain no-repeat; mask: var(--i-external) center / contain no-repeat; }
  .k-toast__close { display: grid; place-items: center; width: 2rem; height: 2rem; margin: -2px -2px 0 0; border-radius: var(--r-2); color: var(--ink-2); }
  .k-toast__close::before { content: ""; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: var(--i-close) center / contain no-repeat; mask: var(--i-close) center / contain no-repeat; }
  .k-toast__close:hover { background: var(--surface-2); color: var(--ink-1); }

  /* ---------- sheets: from the bottom on phones, from the side on wider screens ---------- */

  .k-sheet {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-1);
    overflow: hidden;
  }
  .k-sheet[open] { display: flex; align-items: flex-end; justify-content: center; }
  .k-sheet::backdrop { background: var(--scrim); transition: opacity var(--d-3) var(--ease-out); }
  @starting-style { .k-sheet[open]::backdrop { opacity: 0; } }
  .k-sheet[data-closing]::backdrop { opacity: 0; transition-duration: var(--d-2); }
  .k-sheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100% - var(--s-6));
    background-color: var(--surface-1);
    background-image: var(--panel-image);
    border: var(--outline-w) solid var(--outline);
    border-bottom: 0;
    border-radius: var(--r-4) var(--r-4) 0 0;
    box-shadow: var(--shadow-3);
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform var(--d-3) var(--ease-out);
    touch-action: pan-y;
  }
  @starting-style { .k-sheet[open] .k-sheet__panel { transform: translateY(100%); } }
  .k-sheet[data-closing] .k-sheet__panel { transform: translateY(100%); transition-duration: var(--d-2); transition-timing-function: var(--ease-in); }
  .k-sheet[data-dragging] .k-sheet__panel { transition: none; }
  .k-sheet__grip { flex: none; display: grid; place-items: center; height: var(--s-5); cursor: grab; touch-action: none; }
  .k-sheet__grip::before { content: ""; width: 2.75rem; height: 5px; border-radius: 5px; background: var(--ink-3); }
  .k-sheet__head { flex: none; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4) var(--s-3) var(--s-5); touch-action: none; }
  .k-sheet__title { flex: 1; font-size: var(--t-xl); }
  .k-sheet__body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--s-5) var(--s-5); }
  .k-sheet__foot { flex: none; display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5) calc(var(--s-4) + var(--press-depth)); border-top: var(--line-w) solid var(--line); }
  @media (min-width: 768px) {
    .k-sheet[open] { justify-content: flex-end; align-items: stretch; }
    .k-sheet__panel {
      width: min(27rem, 100% - 2 * var(--s-4));
      max-height: none;
      margin: var(--s-4);
      border-bottom: var(--outline-w) solid var(--outline);
      border-radius: var(--r-4);
      box-shadow: 0 var(--tile-depth) 0 0 var(--outline), var(--shadow-3);
      padding-bottom: 0;
    }
    .k-sheet__grip { display: none; }
    .k-sheet__head { padding: var(--s-5) var(--s-4) var(--s-3) var(--s-5); }
    @starting-style { .k-sheet[open] .k-sheet__panel { transform: translateX(calc(100% + var(--s-5))); } }
    .k-sheet[data-closing] .k-sheet__panel { transform: translateX(calc(100% + var(--s-5))); }
    /* a small sheet that drops from its chip in the top bar (the coin, the wallet) */
    .k-sheet--corner[open] { align-items: flex-start; }
    .k-sheet--corner .k-sheet__panel { width: min(23rem, 100% - 2 * var(--s-4)); max-height: calc(100% - var(--topbar-h) - var(--s-5)); margin: calc(var(--topbar-h) + var(--s-1)) var(--gutter) var(--s-4); }
    @starting-style { .k-sheet--corner[open] .k-sheet__panel { transform: translateY(-10px); opacity: 0; } }
    .k-sheet--corner[data-closing] .k-sheet__panel { transform: translateY(-10px); opacity: 0; }
    .k-sheet--corner .k-sheet__panel { transition: transform var(--d-3) var(--ease-out), opacity var(--d-3) var(--ease-out); }
  }

  /* key figures in a sheet or panel: a quiet list of label and value, not a hero row of stats */
  .k-stats { display: grid; }
  .k-stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: var(--line-w) solid var(--line); }
  .k-stats > div:last-child { border-bottom: 0; }
  .k-stats dt { font-size: var(--t-sm); font-weight: var(--text-weight-strong); color: var(--ink-2); }
  .k-stats dd { font-weight: var(--text-weight-heavy); font-variant-numeric: tabular-nums; text-align: right; }

  /* ---------- small parts ---------- */

  .k-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 1.5rem;
    padding: 0 0.5rem;
    border: var(--outline-w-sm) solid var(--outline);
    border-radius: var(--r-1);
    background: var(--surface-2);
    color: var(--ink-1);
    font-size: var(--t-xs);
    font-weight: var(--text-weight-heavy);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
  }
  .k-badge[data-tone="accent"] { background: var(--accent); color: var(--on-accent); }
  .k-badge[data-tone="highlight"] { background: var(--highlight); color: var(--on-highlight); }
  .k-badge[data-tone="good"] { background: var(--good); color: var(--on-good); }
  .k-badge[data-tone="warn"] { background: var(--warn); color: var(--on-warn); }
  .k-badge[data-tone="bad"] { background: var(--bad); color: var(--on-bad); }
  .k-badge[data-tone="ink"] { background: var(--ink-1); color: var(--surface-1); }

  .k-skel {
    display: block;
    height: 1em;
    border-radius: var(--r-1);
    background: linear-gradient(100deg, var(--skel-1) 0 40%, var(--skel-2) 50%, var(--skel-1) 60% 100%) 0 0 / 300% 100%;
    animation: k-shimmer 1.4s linear infinite;
  }
  .k-skel--text { height: 0.85em; margin-block: 0.3em; }
  .k-skel--circle { border-radius: 50%; }
  @keyframes k-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

  /* an empty state is an empty slot: it says what will land here and how to make it happen */
  .k-empty {
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    padding: var(--s-6) var(--s-4);
    text-align: center;
    border: var(--outline-w-sm) dashed var(--ink-3);
    border-radius: var(--r-3);
    background: var(--surface-2);
  }
  .k-empty__art { width: 4.5rem; height: 4.5rem; margin-bottom: var(--s-1); }
  .k-empty__title { font-family: var(--font-heading); font-weight: var(--display-weight); font-size: var(--t-lg); line-height: var(--leading-tight); }
  .k-empty__text { max-width: 34ch; color: var(--ink-2); }
  .k-empty > .k-btn { margin-top: var(--s-2); }

  /* countdown: digits in fixed cells, as wide as the face's zero (1ch), so nothing jumps each second */
  .k-countdown { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .k-countdown__unit { display: inline-flex; }
  .k-countdown__d { display: inline-block; width: 1ch; text-align: center; }
  .k-countdown__sep { padding-inline: 0.06em; }
  /* tiles: big digits, set like .k-figure in the display face and weight */
  .k-countdown--tiles { align-items: center; gap: 0.08em; font-family: var(--font-display); font-weight: var(--display-weight); }
  .k-countdown--tiles .k-countdown__unit {
    padding: 0.14em 0.08em 0.1em;
    border: var(--outline-w-sm) solid var(--outline);
    border-radius: calc(var(--r-1) + 2px);
    background: var(--surface-1);
    color: var(--ink-1);
    box-shadow: inset 0 -0.5em 0 0 var(--surface-2), 0 calc(var(--press-depth) * 0.6) 0 0 var(--outline);
  }
  .k-countdown[data-state="done"] { color: var(--good-ink); }

  /* meter: how full, how far; the fill is clipped, never stretched */
  .k-meter {
    --value: 0;
    position: relative;
    height: var(--meter-h, 0.875rem);
    border: var(--outline-w-sm) solid var(--outline);
    border-radius: var(--r-1);
    background: var(--surface-2);
    overflow: hidden;
  }
  .k-meter__fill {
    position: absolute;
    inset: 0;
    background-color: var(--meter-fill, var(--accent));
    background-image: var(--meter-texture, none);
    clip-path: inset(0 calc((1 - var(--value)) * 100%) 0 0);
    transition: clip-path var(--d-4) var(--ease-out);
  }
  .k-meter[data-tone="good"] { --meter-fill: var(--good); }
  .k-meter[data-tone="highlight"] { --meter-fill: var(--highlight); }

  /* tooltip: one element, placed by kit.js next to whatever has data-k-tip */
  .k-tip {
    position: fixed;
    z-index: var(--z-tip);
    top: 0;
    left: 0;
    max-width: min(18rem, 100vw - 16px);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-1);
    background: var(--inverse);
    color: var(--on-inverse);
    font-size: var(--t-sm);
    font-weight: var(--text-weight-strong);
    line-height: var(--leading-tight);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--d-2) var(--ease-out);
  }
  .k-tip[data-show] { opacity: 1; }

  /* copy an address: the icon turns to a check and a small "Copied" lands above */
  .k-copy {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--control-h-sm);
    padding: 0 var(--s-2) 0 var(--s-3);
    border: var(--outline-w-sm) solid var(--outline);
    border-radius: var(--r-2);
    background: var(--surface-2);
    color: var(--ink-1);
    font-weight: var(--text-weight-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background-color var(--d-2) var(--ease-out);
  }
  .k-copy::before {
    content: "";
    order: 2;
    width: 1.15rem;
    height: 1.15rem;
    background: currentColor;
    -webkit-mask: var(--i-copy) center / contain no-repeat;
    mask: var(--i-copy) center / contain no-repeat;
  }
  @media (hover: hover) { .k-copy:hover { background: var(--surface-3); } }
  .k-copy::after {
    content: attr(data-copied);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    padding: 3px 8px;
    border-radius: var(--r-1);
    background: var(--inverse);
    color: var(--on-inverse);
    font-size: var(--t-xs);
    font-weight: var(--text-weight-heavy);
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
    pointer-events: none;
  }
  .k-copy:not([data-copied])::after { content: "Copied"; }
  .k-copy[data-state="copied"] { background: var(--good); color: var(--on-good); }
  .k-copy[data-state="copied"]::before { -webkit-mask-image: var(--i-check); mask-image: var(--i-check); }
  .k-copy[data-state="copied"]::after { opacity: 1; transform: translate(-50%, 0); }
  .k-copy[data-state="error"] { background: var(--bad); color: var(--on-bad); }

  /* a number that rolls to its new value, digit by digit */
  .k-roll { display: inline-flex; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .k-roll__col { display: inline-block; height: 1.1em; overflow: hidden; line-height: 1.1; white-space: pre; }
  .k-roll__col--d { width: 1ch; text-align: center; }
  .k-roll__strip { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -1.1em)); transition: transform var(--d-4) var(--ease-out); }
  .k-roll__strip > span { height: 1.1em; }
  .k-roll[data-flash] { animation: k-flash-text 0.9s var(--ease-out); }
  @keyframes k-flash-text { from { color: var(--good-ink); } }
}