/* Lurkies design system — "The Dive". Direction and rules: DESIGN.md. Living style guide: /design/.
   Everything is inside cascade layers, so a page's own (unlayered) CSS still wins while pages move over one by one.
   Every class starts with tl- so nothing collides with the page styles of today (.btn, .card, .tabs …).
   Fonts (one <link> per page): Figtree 400..800 + Fraunces opsz,wght,SOFT,WONK — see DESIGN.md §3. */
@layer tl.tokens, tl.base, tl.components, tl.motion;

/* =============================================================== tokens */
@layer tl.tokens {
  /* fallbacks sized like the web fonts (measured), so text does not reflow when Fraunces and Figtree arrive */
  @font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 81%; }
  @font-face { font-family: "Figtree Fallback"; src: local("Arial"); size-adjust: 100.8%; }
  :root {
    /* ocean palette (TIDELINGS_PLAN.md §5) */
    --deep: #06243f; --sea: #0b4f7a; --panel: rgba(8, 46, 78, .82); --line: #2a7fb0;
    --foam: #e9fbff; --dim: #9cc9de; --accent: #ff7a59; --accent-dark: #c4482c; --sun: #ffd65a; --sand: #f3dfb0;
    --common: #9fb7c9; --uncommon: #3ddc97; --unique: #2fb8ff; --rare: #ff6fa8; --epic: #a86bff; --legendary: #ffc93c;
    /* supporting */
    --ink: #04223a; --ink-dim: #143f5c; --glow: #6ff5ff; --danger: #ff5d73; --ok: #3ddc97; --glass: #8fd3e6;

    /* depth zones: each gradient starts where the one above ends */
    --z-surface-top: #9fe8f5; --z-surface: #45c0dd; --z-twilight: #146d99; --z-midnight: var(--sea);
    --z-deep: var(--deep); --z-abyss: #020c18;

    /* type */
    --font-head: "Fraunces", "Fraunces Fallback", "Iowan Old Style", Georgia, serif;
    --font-body: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-display: clamp(2.75rem, 7.2vw, 5.25rem);
    --fs-h1: clamp(2.125rem, 4.6vw, 3.25rem);
    --fs-h2: 2.07rem;   /* 33px */
    --fs-h3: 1.66rem;   /* 26.5px */
    --fs-lead: 1.3125rem; /* 21px */
    --fs-body: 1.0625rem; /* 17px */
    --fs-ui: .9375rem;  /* 15px */
    --fs-small: .84rem; /* 13.5px */

    /* space (8px grid) */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
    --gutter: 16px; --content: 1120px; --gauge-w: 56px;

    /* shape */
    --r-pebble-a: 30px 22px 34px 20px / 26px 32px 22px 30px;
    --r-pebble-b: 22px 32px 20px 34px / 30px 22px 30px 24px;
    --r-pebble-sm: 18px 14px 20px 12px / 16px 20px 14px 18px;
    --r-btn: 14px; --r-input: 12px; --r-tag: 8px;

    /* motion */
    --t-quick: 140ms; --t-base: 260ms; --t-slow: 520ms;
    --ease-out: cubic-bezier(.22, .8, .3, 1); --ease-buoy: cubic-bezier(.34, 1.45, .64, 1); --ease-in: cubic-bezier(.5, 0, .8, .3);

    /* the zone defaults (midnight water); a .tl-zone--* section overrides them */
    --fg: var(--foam); --fg-dim: var(--dim); --card: var(--panel); --card-line: transparent; --card-hi: rgba(233, 251, 255, .09);
    --focus: var(--sun); --amount: var(--sun); --track: rgba(233, 251, 255, .14); --rule: rgba(233, 251, 255, .16);
  }
  @media (min-width: 720px) { :root { --gutter: 32px; } }

  /* rarity: any element with data-q gets --q */
  [data-q="common"] { --q: var(--common); } [data-q="uncommon"] { --q: var(--uncommon); } [data-q="unique"] { --q: var(--unique); }
  [data-q="rare"] { --q: var(--rare); } [data-q="epic"] { --q: var(--epic); } [data-q="legendary"] { --q: var(--legendary); }
}

/* =============================================================== base */
@layer tl.base {
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }   /* the components set display; hidden must still win */
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--deep); color: var(--fg);
    font: 400 var(--fs-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4 {
    margin: 0; font-family: var(--font-head); font-weight: 600; color: var(--fg); text-wrap: balance;
    font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.01em;
  }
  h1 { font-size: var(--fs-h1); line-height: 1.08; font-variation-settings: "SOFT" 100, "WONK" 1; }
  h2 { font-size: var(--fs-h2); line-height: 1.15; }
  h3 { font-size: var(--fs-h3); line-height: 1.2; }
  p { margin: 0; text-wrap: pretty; }
  a { color: inherit; text-underline-offset: .2em; }
  img { max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  ::selection { background: var(--sun); color: var(--ink); }

  .tl-display { font-size: var(--fs-display); line-height: 1.02; font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 640; letter-spacing: -.02em; }
  .tl-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-dim); max-width: 56ch; }
  .tl-prose { max-width: 64ch; }
  .tl-prose > * + * { margin-top: var(--s4); }
  .tl-small { font-size: var(--fs-small); color: var(--fg-dim); }
  .tl-num { font-variant-numeric: tabular-nums; }
  .tl-amount { color: var(--amount); font-weight: 700; font-variant-numeric: tabular-nums; }
  .tl-wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
  .tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* =============================================================== components */
@layer tl.components {

  /* ---------- depth zones ---------- */
  .tl-zone { position: relative; color: var(--fg); isolation: isolate; }
  .tl-zone--surface {
    --fg: var(--ink); --fg-dim: var(--ink-dim); --card: rgba(255, 255, 255, .42); --card-line: rgba(255, 255, 255, .65);
    --card-hi: rgba(255, 255, 255, .7); --focus: var(--ink); --amount: var(--ink); --track: rgba(4, 34, 58, .14); --rule: rgba(4, 34, 58, .2);
    background: linear-gradient(180deg, var(--z-surface-top), var(--z-surface));
  }
  .tl-thermocline { height: clamp(96px, 14vw, 160px); background: linear-gradient(180deg, var(--z-surface), var(--z-twilight)); position: relative; overflow: hidden; }
  /* dark water: every token is set again, so a zone nested inside a surface zone does not inherit its ink */
  .tl-zone--twilight, .tl-zone--midnight, .tl-zone--abyss {
    --fg: var(--foam); --fg-dim: var(--dim); --card: var(--panel); --card-line: transparent; --card-hi: rgba(233, 251, 255, .09);
    --focus: var(--sun); --amount: var(--sun); --track: rgba(233, 251, 255, .14); --rule: rgba(233, 251, 255, .16);
  }
  .tl-zone--twilight {
    --fg-dim: #cfeefa; --card: rgba(6, 36, 63, .38); --card-line: rgba(233, 251, 255, .14);
    background: linear-gradient(180deg, var(--z-twilight), var(--z-midnight));
  }
  .tl-zone--midnight { background: linear-gradient(180deg, var(--z-midnight), var(--z-deep)); }
  .tl-zone--abyss {
    --fg-dim: #86aec4; --card: #071a2c; --card-line: rgba(111, 245, 255, .14); --card-hi: rgba(111, 245, 255, .08);
    background: linear-gradient(180deg, var(--z-deep), var(--z-abyss));
  }
  /* sun rays at the surface */
  .tl-rays { position: absolute; inset: 0 0 auto; height: 70%; pointer-events: none; z-index: -1;
    background: repeating-conic-gradient(from 168deg at 62% -20%, rgba(255, 255, 255, .26) 0 3deg, transparent 3deg 9deg);
    mask: linear-gradient(180deg, #000, transparent); }
  /* bioluminescent specks in the abyss */
  .tl-specks { position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .7;
    background:
      radial-gradient(1.5px 1.5px at 12% 22%, var(--glow), transparent), radial-gradient(1px 1px at 33% 64%, var(--glow), transparent),
      radial-gradient(2px 2px at 71% 18%, var(--legendary), transparent), radial-gradient(1.5px 1.5px at 86% 72%, var(--glow), transparent),
      radial-gradient(1px 1px at 52% 41%, var(--epic), transparent), radial-gradient(1.5px 1.5px at 23% 88%, var(--glow), transparent); }

  /* ---------- porthole ---------- */
  .tl-porthole {
    --ring: var(--q, var(--glass)); --ring-w: 10px;
    position: relative; display: grid; aspect-ratio: 1; border-radius: 50%; padding: var(--ring-w);
    background:
      radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .6), transparent 34%),
      conic-gradient(from 210deg, color-mix(in srgb, var(--ring) 55%, #fff), var(--ring) 25%, color-mix(in srgb, var(--ring) 60%, #021526) 55%, var(--ring) 80%, color-mix(in srgb, var(--ring) 55%, #fff));
    box-shadow: 0 14px 26px -16px rgba(2, 12, 24, .85);
  }
  .tl-porthole::after { /* 12 rivets in the ring */
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(from -1.5deg, rgba(2, 21, 38, .55) 0 3deg, transparent 3deg 30deg);
    mask: radial-gradient(circle closest-side, transparent calc(100% - var(--ring-w) * .72), #000 calc(100% - var(--ring-w) * .7) calc(100% - var(--ring-w) * .34), transparent calc(100% - var(--ring-w) * .32));
  }
  .tl-porthole__glass {
    position: relative; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 35%, #6fd3ea, #1b86b4 60%, #0b4f7a);
    box-shadow: inset 0 0 0 3px rgba(2, 21, 38, .5), inset 0 10px 18px rgba(2, 21, 38, .35);
  }
  .tl-porthole__glass > img { width: 86%; height: 86%; object-fit: contain; }
  .tl-porthole__glass::after { /* the glass reflection */
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, .28), transparent 38%);
  }

  /* ---------- pebble ---------- */
  .tl-pebble {
    background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-pebble-a); padding: var(--s5);
    box-shadow: inset 0 1px 0 var(--card-hi), 0 22px 44px -32px rgba(1, 10, 20, .9); color: var(--fg);
  }
  .tl-zone--surface .tl-pebble, .tl-zone--twilight .tl-pebble { backdrop-filter: blur(8px); }
  .tl-pebble--b { border-radius: var(--r-pebble-b); }
  .tl-pebble--raised { box-shadow: inset 0 1px 0 var(--card-hi), 0 30px 60px -28px rgba(1, 10, 20, .95); }

  /* ---------- buttons ---------- */
  .tl-btn {
    --b-bg: linear-gradient(180deg, #ff9b80, var(--accent) 55%, #f5694a);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-btn); cursor: pointer;
    font: 650 var(--fs-ui)/1.1 var(--font-body); letter-spacing: .005em; color: var(--ink); text-decoration: none; white-space: nowrap;
    background: var(--b-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(196, 72, 44, .35), 0 12px 26px -12px rgba(255, 122, 89, .7);
    transition: transform var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out), filter var(--t-quick), background-color var(--t-quick);
  }
  .tl-btn:hover, .tl-btn.is-hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(196, 72, 44, .35), 0 16px 30px -12px rgba(255, 122, 89, .8); }
  .tl-btn:active, .tl-btn.is-pressed { transform: translateY(1px); filter: none;
    box-shadow: inset 0 3px 8px rgba(160, 52, 26, .45), 0 4px 12px -8px rgba(255, 122, 89, .6); }
  .tl-btn:focus-visible, .tl-btn.is-focus { outline: 3px solid var(--focus); outline-offset: 3px; }
  .tl-btn:disabled, .tl-btn[aria-disabled="true"] {
    cursor: not-allowed; transform: none; filter: grayscale(.9); opacity: .5; box-shadow: none; }
  .tl-btn[aria-busy="true"] { cursor: progress; }
  .tl-btn[aria-busy="true"]::before {
    content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
    animation: tl-spin .8s linear infinite; }
  .tl-btn > svg { width: 18px; height: 18px; flex: none; }

  .tl-btn--secondary { --b-bg: transparent; color: var(--fg);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 55%, transparent); }
  .tl-btn--secondary:hover, .tl-btn--secondary.is-hover { background: color-mix(in srgb, var(--fg) 10%, transparent); filter: none;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 80%, transparent); }
  .tl-btn--secondary:active, .tl-btn--secondary.is-pressed { background: color-mix(in srgb, var(--fg) 16%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--fg), inset 0 3px 8px rgba(1, 10, 20, .25); }
  .tl-btn--secondary:disabled, .tl-btn--secondary[aria-disabled="true"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 35%, transparent); }
  .tl-btn--quiet { --b-bg: transparent; color: var(--fg); box-shadow: none; padding: 0 var(--s2); min-height: 40px; }
  .tl-btn--quiet:hover, .tl-btn--quiet.is-hover { box-shadow: none; filter: none; transform: none;
    text-decoration: underline wavy color-mix(in srgb, var(--fg) 70%, transparent) 1.5px; text-underline-offset: 6px; }
  .tl-btn--quiet:active, .tl-btn--quiet.is-pressed { box-shadow: none; opacity: .75; }
  .tl-btn--sm { min-height: 40px; padding: 0 16px; font-size: .875rem; border-radius: 12px; }
  .tl-btn--porthole {
    --b-bg: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fg) 22%, transparent), color-mix(in srgb, var(--fg) 6%, transparent));
    width: 44px; min-height: 44px; height: 44px; padding: 0; border-radius: 50%; color: var(--fg);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg) 45%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--fg) 8%, transparent); }
  .tl-btn--porthole:hover, .tl-btn--porthole.is-hover { box-shadow: inset 0 0 0 2px var(--fg), inset 0 0 0 5px color-mix(in srgb, var(--fg) 12%, transparent); }
  .tl-btn--porthole:active, .tl-btn--porthole.is-pressed { box-shadow: inset 0 0 0 2px var(--fg), inset 0 3px 8px rgba(1, 10, 20, .35); }

  /* ---------- wordmark ---------- */
  /* "Lurkies" set in Fraunces, the dot of the i is a fishing float hanging on its line (the lure the name comes from).
     Markup: <a class="tl-wordmark" href="/"><span aria-hidden="true">Lurk<span class="tl-wordmark__i">ı<i></i></span>es</span><span class="tl-sr">Lurkies</span></a>
     --line-h sets how far the line climbs above the float (the hero lets it run up to the top of the page). */
  .tl-wordmark {
    --wm-size: 30px; --line-h: .32em;
    display: inline-block; flex: none; position: relative; color: var(--fg); text-decoration: none; white-space: nowrap;
    font: 640 var(--wm-size)/1 var(--font-head); letter-spacing: -.025em; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  }
  .tl-wordmark__i { position: relative; display: inline-block; }
  .tl-wordmark__i > i { /* the float: coral cap, foam belly, a dark band between */
    position: absolute; left: 50%; bottom: .64em; width: .25em; height: .25em; border-radius: 50%; translate: -50% 0;
    background: linear-gradient(180deg, var(--accent) 0 46%, var(--ink) 46% 56%, #fff 56%);
    box-shadow: 0 0 0 .025em var(--ink), inset -.03em -.04em .05em rgba(4, 34, 58, .25);
    transform-origin: 50% calc(-1 * var(--line-h));
  }
  .tl-wordmark__i > i::before { /* the line it hangs on */
    content: ""; position: absolute; left: 50%; bottom: 100%; width: max(1px, .025em); height: var(--line-h); translate: -50% 0;
    background: color-mix(in srgb, currentColor 75%, transparent);
  }
  .tl-wordmark:hover .tl-wordmark__i > i { animation: tl-nibble .9s var(--ease-out); }

  /* ---------- site nav ---------- */
  .tl-nav { /* every public page starts at the surface: ink until it is deep */
    --fg: var(--ink); --focus: var(--ink);
    position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--s4);
    min-height: 64px; padding: var(--s2) var(--gutter); color: var(--fg);
    transition: background-color var(--t-base) var(--ease-out), box-shadow var(--t-base);
  }
  .tl-nav.is-frosted { background: rgba(214, 246, 252, .7); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgba(4, 34, 58, .1); }
  .tl-nav.is-deep { --fg: var(--foam); --focus: var(--sun); background: rgba(6, 36, 63, .74);
    backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgba(233, 251, 255, .08); }
  .tl-nav__logo { display: block; flex: none; }
  .tl-nav__logo img { display: block; height: 42px; width: auto; }
  .tl-nav__links { display: flex; align-items: center; gap: var(--s1); margin-left: auto; padding: 0; list-style: none; }
  .tl-nav__links a { display: block; padding: 10px 12px; border-radius: 10px; font: 600 var(--fs-ui)/1 var(--font-body); text-decoration: none; color: var(--fg); }
  .tl-nav__links a:hover, .tl-nav__links a.is-hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
  .tl-nav__links a[aria-current="page"] { text-decoration: underline wavy 1.5px; text-underline-offset: 7px; }
  .tl-nav__menu { display: none; }
  .tl-nav__wallet svg { width: 18px; height: 18px; }
  .tl-nav__social { width: 40px; min-height: 40px; height: 40px; flex: none; }   /* the X account (hidden until the server sets X_URL) */
  .tl-nav__social svg { width: 18px; height: 18px; }
  .tl-nav__links .tl-nav__phone { display: none; }   /* links that only the phone menu needs (the wallet button folds into it) */
  /* 720-959 px: the links (with Catalysts) fill the bar, so the wallet button folds away; "Play now" opens the same page */
  @media (min-width: 720px) and (max-width: 959px) { .tl-nav .tl-nav__wallet { display: none; } }
  @media (max-width: 719px) {
    .tl-nav { gap: var(--s2); }
    .tl-nav .tl-nav__wallet, .tl-nav .tl-nav__social { display: none; }   /* both fold into the menu */
    .tl-nav__links .tl-nav__phone { display: block; }
  }
  @media (max-width: 719px) {
    .tl-nav__menu { display: inline-flex; margin-left: auto; }
    .tl-nav__links { display: none; }
    .tl-nav.is-open .tl-nav__links {
      display: grid; position: absolute; top: 100%; left: var(--s2); right: var(--s2); gap: 0; padding: var(--s2);
      background: rgba(6, 36, 63, .94); backdrop-filter: blur(14px); border-radius: var(--r-pebble-sm); --fg: var(--foam); }
    .tl-nav.is-open .tl-nav__links a { padding: 14px 12px; }
    .tl-nav .tl-nav__play { order: 0; }
  }

  /* ---------- depth gauge ---------- */
  .tl-depth {
    position: fixed; z-index: 40; right: 10px; top: 92px; bottom: 28px; width: 46px;
    --fg: var(--foam); --focus: var(--sun); font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
  }
  .tl-depth__rail {
    position: absolute; right: 21px; top: 0; bottom: 0; width: 4px; border-radius: 4px;
    background: rgba(2, 21, 38, .38); box-shadow: 0 0 0 1px rgba(233, 251, 255, .2);
  }
  .tl-depth__rail::before { /* a tick every 500 m */
    content: ""; position: absolute; left: -5px; right: -5px; top: 0; bottom: 0;
    background: repeating-linear-gradient(180deg, rgba(233, 251, 255, .55) 0 1px, transparent 1px calc(100% / 8));
    mask: linear-gradient(90deg, #000 4px, transparent 4px 10px, #000 10px);
  }
  .tl-depth__stops { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
  .tl-depth__stops li { position: absolute; right: 0; top: calc(var(--at) * 100%); transform: translateY(-50%); }
  .tl-depth__stops a {
    position: relative; display: flex; align-items: center; justify-content: flex-end; gap: var(--s2);
    min-height: 32px; padding-right: 15px; text-decoration: none; color: var(--fg); border-radius: 8px;
  }
  .tl-depth__stops a::after { /* the stop node on the rail */
    content: ""; position: absolute; right: 17px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--deep); box-shadow: inset 0 0 0 2px rgba(233, 251, 255, .7); transition: background-color var(--t-base), box-shadow var(--t-base);
  }
  .tl-depth__label {
    position: absolute; right: 38px; white-space: nowrap; padding: 6px 10px; border-radius: 10px;
    background: rgba(4, 26, 46, .86); backdrop-filter: blur(8px); color: var(--foam);
    opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  }
  .tl-depth__label b { font-family: var(--font-head); font-weight: 600; font-size: 14px; margin-right: 6px; font-variation-settings: "SOFT" 100; }
  .tl-depth__stops a:hover .tl-depth__label, .tl-depth__stops a:focus-visible .tl-depth__label, .tl-depth__stops a.is-hover .tl-depth__label { opacity: 1; transform: none; }
  .tl-depth__stops a[aria-current="true"]::after { background: var(--sun); box-shadow: 0 0 0 3px rgba(255, 214, 90, .35); }
  /* the marker box spans the rail and moves with transform (never top: that would count as a layout shift); the pill is ::before */
  .tl-depth__marker {
    position: absolute; right: 13px; top: 0; bottom: 0; width: 20px; pointer-events: none;
    transform: translateY(calc(var(--at, 0) * 100%)); transition: transform var(--t-base) var(--ease-out);
  }
  .tl-depth__marker::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--pill-h, 34px); transform: translateY(-50%); border-radius: 999px;
    background: linear-gradient(180deg, #fff, var(--glass)); box-shadow: 0 0 0 2px var(--deep), 0 4px 14px rgba(2, 12, 24, .6);
  }
  .tl-depth__readout {
    position: absolute; right: 28px; top: 0; transform: translateY(-50%); white-space: nowrap;
    padding: 5px 9px; border-radius: 9px; background: var(--foam); color: var(--ink); font-weight: 700; font-size: 12.5px;
  }
  .tl-depth--static { position: relative; right: auto; top: auto; bottom: auto; height: 100%; margin-left: auto; }
  /* a page whose stops are not evenly spaced draws its own ticks (<i class="tl-depth__tick" style="--at:…">) */
  .tl-depth:has(.tl-depth__tick) .tl-depth__rail::before { display: none; }
  .tl-depth__tick { position: absolute; right: 16px; top: calc(var(--at) * 100%); width: 14px; height: 1px; background: rgba(233, 251, 255, .55); pointer-events: none; }
  .tl-depth__tick::after { content: ""; position: absolute; left: 4px; right: 4px; top: 0; height: 1px; background: rgba(2, 21, 38, .6); }

  /* phones: a thin depth bar along the top of the screen instead of the rail */
  .tl-depthbar { position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; background: rgba(2, 21, 38, .25); }
  .tl-depthbar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--at, 0) * 100%);
    background: linear-gradient(90deg, var(--foam), var(--glow)); box-shadow: 0 0 8px rgba(111, 245, 255, .7); transition: width var(--t-base) var(--ease-out); }
  @media (min-width: 720px) { .tl-depthbar { display: none; } }
  @media (max-width: 719px) { body:has(.tl-depthbar) .tl-depth:not(.tl-depth--static) { display: none; } }
  @media (max-width: 719px) {
    .tl-depth:not(.tl-depth--static) { width: 12px; right: 4px; top: 76px; }
    .tl-depth:not(.tl-depth--static) .tl-depth__rail { right: 4px; width: 3px; }
    .tl-depth:not(.tl-depth--static) .tl-depth__stops { display: none; }
    .tl-depth:not(.tl-depth--static) .tl-depth__rail::before { display: none; }
    .tl-depth:not(.tl-depth--static) .tl-depth__marker { right: 1px; width: 9px; --pill-h: 22px; }
    .tl-depth:not(.tl-depth--static) .tl-depth__readout { right: 14px; font-size: 11.5px; padding: 4px 7px; }
  }

  /* ---------- section header ---------- */
  .tl-section-head { display: grid; gap: var(--s3); max-width: 46rem; }
  .tl-depth-tag {
    display: inline-flex; align-items: center; gap: var(--s2); width: max-content;
    font: 650 var(--fs-small)/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--fg-dim);
  }
  .tl-depth-tag::before { /* a plumb line */
    content: ""; width: 22px; height: 9px;
    background: linear-gradient(currentColor, currentColor) left center / 16px 1.5px no-repeat, radial-gradient(circle, currentColor 3.5px, transparent 4px) right center / 9px 9px no-repeat;
  }
  .tl-section-head h2 { font-size: var(--fs-h1); line-height: 1.08; font-variation-settings: "SOFT" 100, "WONK" 1; }

  /* ---------- sound button (site/music.js): a porthole fixed in a bottom corner; aria-pressed = music on ---------- */
  .tl-sound { position: fixed; z-index: 45; right: 16px; bottom: 16px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0;
    border-radius: 50%; cursor: pointer; color: var(--ink);
    background: radial-gradient(circle at 35% 30%, #e6fbff, #8fd3e6 70%);
    box-shadow: inset 0 0 0 3px rgba(4, 34, 58, .22), inset 0 0 0 6px rgba(255, 255, 255, .35), 0 10px 22px -10px rgba(2, 12, 24, .75);
    transition: transform var(--t-quick) var(--ease-out), box-shadow var(--t-quick); }
  .tl-sound:hover { transform: translateY(-1px); }
  .tl-sound:active { transform: translateY(1px); box-shadow: inset 0 0 0 3px rgba(4, 34, 58, .3), inset 0 3px 8px rgba(4, 34, 58, .3); }
  .tl-sound:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
  .tl-sound[aria-pressed="false"] { background: radial-gradient(circle at 35% 30%, #c9dde6, #7d9fb2 70%); color: rgba(4, 34, 58, .8); }
  @media (max-width: 719px) { .tl-sound { right: 12px; bottom: 12px; width: 42px; height: 42px; } }

  /* ---------- hanging crate: hauled up from the deep on a rope that runs up to the surface ----------
     On the element that holds the crate (the home page's demo crate, the app's Crates screen). The crate hangs in the page's own
     water instead of sitting in a frame. --rope-end: where the rope ties on, from the top of the element; --rope-len: how far up
     it runs (it fades in from the top). */
  .tl-hang { position: relative; --rope-end: 30%; --rope-len: 100vh; }
  .tl-hang::before {
    content: ""; position: absolute; z-index: 0; left: 50%; bottom: calc(100% - var(--rope-end)); width: 5px; height: var(--rope-len); translate: -50% 0;
    border-radius: 3px; pointer-events: none;
    background: repeating-linear-gradient(155deg, #e2bf86 0 3px, #b08750 3px 6px, #8a6a3e 6px 7px);   /* a twisted rope */
    box-shadow: 0 0 0 1px rgba(4, 34, 58, .14);
    -webkit-mask: linear-gradient(transparent, #000 35%); mask: linear-gradient(transparent, #000 35%);
  }

  /* ---------- site footer (the sea floor of every public page) ---------- */
  .tl-foot { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    padding-block: var(--s6); border-top: 1.5px dotted var(--rule); font-size: var(--fs-ui); color: var(--fg); }
  .tl-foot__brand { display: grid; gap: var(--s3); align-content: start; justify-items: start; }
  .tl-foot__brand .tl-wordmark { --wm-size: 34px; }
  .tl-foot__brand p { color: var(--fg-dim); max-width: 36ch; }
  .tl-foot h2 { font: 650 var(--fs-small)/1.2 var(--font-body); color: var(--fg-dim); margin-bottom: var(--s3); letter-spacing: 0; }
  .tl-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
  .tl-foot a { color: var(--fg); text-decoration: none; }
  .tl-foot a:hover { text-decoration: underline wavy 1.5px; text-underline-offset: 5px; }
  @media (max-width: 719px) { .tl-foot { grid-template-columns: 1fr 1fr; } .tl-foot__brand { grid-column: 1 / -1; } }

  /* ---------- rarity marker ---------- */
  .tl-rarity { display: inline-flex; align-items: center; gap: 6px; font: 650 var(--fs-small)/1.2 var(--font-body); color: var(--fg); }
  .tl-rarity::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--q, var(--common)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--q, var(--common)) 30%, transparent); }

  /* ---------- tag ---------- */
  .tl-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--r-tag);
    font: 650 12.5px/1.2 var(--font-body); background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }
  .tl-tag--coral { background: var(--accent); color: var(--ink); }
  .tl-tag--sun { background: var(--sun); color: var(--ink); }

  /* ---------- filter chip (a toggle: aria-pressed) ---------- */
  .tl-chip {
    display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 0; border-radius: 12px; cursor: pointer;
    font: 600 .875rem/1 var(--font-body); white-space: nowrap; color: var(--fg); background: color-mix(in srgb, var(--fg) 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent); transition: background-color var(--t-quick), color var(--t-quick);
  }
  .tl-chip:hover, .tl-chip.is-hover { background: color-mix(in srgb, var(--fg) 16%, transparent); }
  .tl-chip[aria-pressed="true"] { background: var(--fg); color: var(--chip-on, var(--deep)); box-shadow: none; }
  .tl-chip[data-q]::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--q); box-shadow: 0 0 0 2px color-mix(in srgb, var(--q) 30%, transparent); }
  .tl-chip small { font-size: 12px; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }

  /* ---------- gauges ---------- */
  .tl-gauge { --size: 120px; --gw: 11px; --gc: var(--unique); --v: 0; display: inline-grid; justify-items: center; gap: var(--s2); }
  .tl-gauge--sm { --size: 84px; --gw: 8px; }
  .tl-gauge--lg { --size: 168px; --gw: 14px; }
  .tl-gauge[data-tone="air"] { --gc: #59d8ff; }
  .tl-gauge[data-tone="haul"], .tl-gauge[data-tone="tide"] { --gc: var(--sun); }
  .tl-gauge[data-tone="ok"] { --gc: var(--ok); }
  .tl-gauge[data-level="low"] { --gc: var(--accent); }
  .tl-gauge__dial { position: relative; width: var(--size); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--fg) 6%, transparent) 55%, transparent 56%); }
  .tl-gauge__dial::before { /* the arc: 270° with the gap at the bottom */
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 225deg, var(--gc) 0 calc(var(--v) * 270deg), var(--track) calc(var(--v) * 270deg) 270deg, transparent 270deg);
    mask: radial-gradient(circle closest-side, transparent calc(100% - var(--gw)), #000 calc(100% - var(--gw) + .5px));
  }
  .tl-gauge__dial::after { /* scale ticks just inside the arc */
    content: ""; position: absolute; inset: calc(var(--gw) + 4px); border-radius: 50%;
    background: repeating-conic-gradient(from 225deg, color-mix(in srgb, var(--fg) 45%, transparent) 0 1.2deg, transparent 1.2deg 27deg);
    mask: radial-gradient(circle closest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)), conic-gradient(from 225deg, #000 0 271deg, transparent 0);
    mask-composite: intersect;
  }
  .tl-gauge__read { position: relative; font: 700 calc(var(--size) * .24)/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--fg); text-align: center; }
  .tl-gauge__read small { display: block; margin-top: 3px; font-size: max(11px, calc(var(--size) * .09)); font-weight: 600; color: var(--fg-dim); }
  .tl-gauge[data-level="low"] .tl-gauge__read { color: var(--accent); }
  .tl-gauge__label { font: 600 var(--fs-small)/1.2 var(--font-body); color: var(--fg-dim); text-align: center; }
  .tl-gauge[data-state="refilling"] .tl-gauge__dial::before { animation: tl-refill 1.6s ease-in-out infinite alternate; }
  .tl-gauge[aria-disabled="true"] { opacity: .45; filter: grayscale(1); }

  .tl-tube { --gc: #59d8ff; --v: 0; position: relative; height: 10px; border-radius: 6px; background: var(--track); overflow: hidden; }
  .tl-tube::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 6px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 70%, #fff), var(--gc) 60%); transition: width var(--t-slow) var(--ease-out); }
  .tl-tube[data-tone="haul"] { --gc: var(--sun); }
  .tl-tube[data-level="low"] { --gc: var(--accent); }
  .tl-tube[data-state="refilling"]::before {
    background: repeating-linear-gradient(115deg, var(--gc) 0 8px, color-mix(in srgb, var(--gc) 55%, transparent) 8px 16px);
    background-size: 34px 100%; animation: tl-flow 1.2s linear infinite; }
  .tl-meter { display: grid; gap: 6px; }
  .tl-meter__row { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
  .tl-meter__row b { color: var(--fg); font-weight: 650; }

  /* ---------- creature card ---------- */
  .tl-creature { position: relative; display: grid; gap: var(--s3); padding: var(--s4) var(--s4) var(--s5); margin-top: 44px; }
  .tl-creature__pic { --ring-w: 9px; width: 116px; margin: -60px 0 0 -4px; }
  .tl-creature__head { display: grid; gap: 4px; }
  .tl-creature__name { font-size: 1.5rem; line-height: 1.1; font-variation-settings: "SOFT" 100, "WONK" 1; }
  .tl-creature__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-small); color: var(--fg-dim); }
  .tl-creature__stats { display: flex; gap: var(--s5); margin: 0; }
  .tl-creature__stats div { display: grid; gap: 2px; }
  .tl-creature__stats dt { font-size: 12.5px; color: var(--fg-dim); }
  .tl-creature__stats dd { margin: 0; font: 700 1.25rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
  .tl-creature__status { font-size: var(--fs-small); color: var(--fg-dim); }
  .tl-creature__status b { color: var(--fg); font-weight: 650; }
  .tl-creature__badge { position: absolute; top: var(--s3); right: var(--s3); }
  .tl-creature__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
  /* diving: bubbles leave the porthole; napping: dim glass, Zz */
  .tl-creature[data-state="diving"] .tl-porthole__glass > img { animation: tl-bob 4.8s ease-in-out infinite alternate; }
  .tl-creature[data-state="diving"] .tl-creature__pic::before {
    content: ""; position: absolute; z-index: 2; left: 64%; top: -14px; width: 26px; height: 40px; pointer-events: none;
    background: radial-gradient(circle at 30% 80%, rgba(255, 255, 255, .85) 0 3px, transparent 3.5px), radial-gradient(circle at 70% 45%, rgba(255, 255, 255, .7) 0 2.4px, transparent 3px),
      radial-gradient(circle at 40% 10%, rgba(255, 255, 255, .6) 0 1.8px, transparent 2.2px);
    animation: tl-fizz 2.6s ease-in infinite;
  }
  .tl-creature[data-state="napping"] .tl-porthole__glass { background: radial-gradient(circle at 50% 35%, #3a7fa0, #0f4466 60%, #06243f); }
  .tl-creature[data-state="napping"] .tl-porthole__glass > img { filter: saturate(.35) brightness(.8); animation: tl-breathe 6s ease-in-out infinite alternate; }
  .tl-creature[data-state="napping"] .tl-creature__pic::before {
    content: "z Z"; position: absolute; z-index: 2; right: -6px; top: -2px; font: 700 18px/1 var(--font-head); color: var(--foam);
    letter-spacing: 2px; text-shadow: 0 2px 6px rgba(2, 12, 24, .7);
  }
  .tl-creature.is-selected { box-shadow: inset 0 0 0 2.5px var(--q), 0 22px 44px -28px color-mix(in srgb, var(--q) 70%, transparent); }
  .tl-creature[data-state="unknown"] .tl-porthole { --ring: color-mix(in srgb, var(--fg) 30%, #0b4f7a); }
  .tl-creature[data-state="unknown"] .tl-porthole__glass > img { filter: brightness(0); opacity: .45; }
  .tl-creature[data-state="unknown"] .tl-creature__name { color: var(--fg-dim); }
  .tl-creature[data-dome] .tl-creature__pic::after { /* the Bubble Dome around the porthole */
    content: ""; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .55), transparent 22%), radial-gradient(circle, transparent 62%, rgba(143, 211, 230, .35) 70%, rgba(233, 251, 255, .65) 71.5%, transparent 73%);
  }
  .tl-creature[data-q="epic"], .tl-creature[data-q="legendary"] {
    box-shadow: inset 0 1px 0 var(--card-hi), 0 0 0 1px color-mix(in srgb, var(--q) 45%, transparent), 0 18px 50px -18px color-mix(in srgb, var(--q) 65%, transparent); }
  .tl-creature[data-q="epic"] .tl-porthole, .tl-creature[data-q="legendary"] .tl-porthole {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--q) 22%, transparent), 0 0 34px color-mix(in srgb, var(--q) 60%, transparent); }
  .tl-creature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 212px), 1fr)); gap: var(--s5) var(--s4); padding-top: var(--s2); }
  .tl-creature-grid > :nth-child(even) { border-radius: var(--r-pebble-b); }

  /* ---------- crate stage ---------- */
  .tl-crate-stage { --burst: var(--q, var(--glass)); display: grid; justify-items: center; gap: var(--s4); }
  .tl-crate-stage__window { --ring-w: 18px; width: min(360px, 82vw); }
  .tl-crate-stage__window .tl-porthole__glass { background: radial-gradient(circle at 50% 18%, #8fe6f6, #2a9bc7 45%, #0b4f7a 80%); isolation: isolate; }
  .tl-porthole__glass > .tl-crate-stage__crate { position: relative; z-index: 2; width: 52%; height: auto; margin-top: 18%; transition: transform var(--t-slow) var(--ease-buoy); }
  .tl-crate-stage__rays { position: absolute; inset: -20%; z-index: 0; opacity: 0;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--burst) 70%, #fff) 0 7deg, transparent 7deg 22deg);
    mask: radial-gradient(circle, #000 8%, transparent 62%); transition: opacity var(--t-slow) var(--ease-out); }
  .tl-crate-stage__burst { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .tl-crate-stage__burst i { position: absolute; left: 50%; top: 58%; width: var(--s, 14px); aspect-ratio: 1; border-radius: 50%; opacity: 0;
    border: 1.5px solid color-mix(in srgb, var(--burst) 55%, #fff);
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .9) 0 18%, color-mix(in srgb, var(--burst) 35%, transparent) 60%); }
  .tl-porthole__glass > .tl-crate-stage__creature { position: absolute; z-index: 4; width: 40%; height: auto; left: 30%; top: 14%; opacity: 0; transform: translateY(40%) scale(.6); }
  .tl-crate-stage__banner { font: 640 var(--fs-h2)/1 var(--font-head); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--q);
    text-shadow: 0 0 24px color-mix(in srgb, var(--q) 70%, transparent); min-height: 1em; }
  .tl-crate-stage__flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--burst) 55%, #fff), transparent 70%); }
  /* states */
  .tl-crate-stage[data-state="idle"] .tl-crate-stage__crate { animation: tl-bob 4.8s ease-in-out infinite alternate; }
  .tl-crate-stage[data-state="drawing"] .tl-crate-stage__crate { animation: tl-wobble .42s ease-in-out infinite; }
  .tl-crate-stage[data-state="open"] .tl-crate-stage__rays { opacity: .55; animation: tl-turn 24s linear infinite; }
  .tl-crate-stage[data-state="open"] .tl-crate-stage__crate { transform: translateY(14%) scale(.94); }
  .tl-crate-stage[data-state="open"] .tl-crate-stage__creature { animation: tl-rise-out var(--t-slow) var(--ease-buoy) .12s forwards, tl-bob 4.8s ease-in-out .7s infinite alternate; }
  .tl-crate-stage[data-state="open"] .tl-crate-stage__burst i { animation: tl-burst 1.1s var(--ease-out) forwards; }
  .tl-crate-stage[data-best="epic"], .tl-crate-stage[data-best="legendary"] { --ring-boost: 1; }
  .tl-crate-stage[data-state="open"][data-best="epic"] .tl-crate-stage__rays,
  .tl-crate-stage[data-state="open"][data-best="legendary"] .tl-crate-stage__rays { opacity: .85; inset: -40%; }
  .tl-crate-stage[data-state="open"][data-best="epic"] .tl-crate-stage__burst i,
  .tl-crate-stage[data-state="open"][data-best="legendary"] .tl-crate-stage__burst i { animation-duration: 1.5s; --far: 1.7; }
  .tl-crate-stage[data-state="open"][data-best="epic"] .tl-crate-stage__flash,
  .tl-crate-stage[data-state="open"][data-best="legendary"] .tl-crate-stage__flash { animation: tl-flash .9s var(--ease-out); }

  /* ---------- toast ---------- */
  .tl-toast-region { position: fixed; z-index: 80; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    display: grid; gap: var(--s2); width: min(440px, calc(100% - 24px)); }
  .tl-toast {
    --tone: var(--unique); display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: var(--s3);
    padding: 12px 14px 12px 12px; border-radius: var(--r-pebble-sm); color: var(--foam); --fg: var(--foam); --focus: var(--sun);
    background: linear-gradient(180deg, #0c3d63, #072a47); box-shadow: inset 0 1px 0 rgba(233, 251, 255, .12), 0 18px 40px -16px rgba(1, 10, 20, .9);
    font-size: var(--fs-ui); line-height: 1.4; animation: tl-surface var(--t-base) var(--ease-buoy);
  }
  .tl-toast[data-tone="success"] { --tone: var(--ok); } .tl-toast[data-tone="warning"] { --tone: var(--sun); } .tl-toast[data-tone="error"] { --tone: var(--danger); }
  .tl-toast__icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tone) 55%, #fff), var(--tone)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 25%, transparent); }
  .tl-toast__icon svg { width: 18px; height: 18px; }
  .tl-toast .tl-btn--quiet { min-height: 32px; font-size: .875rem; }

  /* ---------- modal ---------- */
  .tl-scrim { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: var(--s4);
    background: rgba(2, 12, 24, .62); backdrop-filter: blur(6px); }
  .tl-scrim--contained { position: absolute; }
  .tl-modal {
    --fg: var(--foam); --fg-dim: var(--dim); --focus: var(--sun);
    width: min(520px, 100%); max-height: calc(100% - 2 * var(--s4)); overflow: auto; color: var(--fg);
    padding: var(--s5) var(--s5) var(--s5) var(--s6); border-radius: var(--r-pebble-a);
    background: linear-gradient(180deg, #0d5585, var(--deep)); box-shadow: inset 0 1px 0 rgba(233, 251, 255, .18), 0 40px 80px -30px rgba(1, 8, 16, .95);
    animation: tl-surface var(--t-slow) var(--ease-buoy);
  }
  .tl-modal__head { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s3); }
  .tl-modal__head h2 { font-size: var(--fs-h3); flex: 1; padding-top: 6px; }
  .tl-modal__body { color: var(--fg-dim); }
  .tl-modal__body > * + * { margin-top: var(--s3); }
  .tl-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s3); margin-top: var(--s5); }

  /* ---------- table (logbook) ---------- */
  .tl-table-wrap { overflow-x: auto; }
  .tl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-ui); }
  .tl-table th { text-align: left; font-weight: 600; font-size: var(--fs-small); color: var(--fg-dim); padding: 0 12px 10px; white-space: nowrap; }
  .tl-table td { padding: 13px 12px; border-top: 1.5px dotted var(--rule); vertical-align: middle; }
  .tl-table tbody tr:last-child td { border-bottom: 1.5px dotted var(--rule); }
  .tl-table .tl-num, .tl-table th.tl-num { text-align: right; font-variant-numeric: tabular-nums; }
  .tl-table tbody tr:hover td, .tl-table tbody tr.is-hover td { background: color-mix(in srgb, var(--fg) 6%, transparent); }
  .tl-table tbody tr[aria-current] td { background: color-mix(in srgb, var(--sun) 12%, transparent); }
  .tl-table tbody tr[aria-current] td:first-child { box-shadow: inset 3px 0 0 var(--sun); }
  .tl-table__empty td { text-align: center; padding: var(--s6) var(--s4); color: var(--fg-dim); }

  /* ---------- code block ---------- */
  .tl-code { --fg: #d7eef8; --focus: var(--sun); background: #041729; color: var(--fg); border-radius: 18px 12px 20px 12px / 14px 18px 12px 18px; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(111, 245, 255, .1); }
  .tl-code__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 6px 6px 6px 16px;
    font-size: var(--fs-small); color: #86aec4; border-bottom: 1px solid rgba(233, 251, 255, .08); }
  .tl-code__head .tl-btn--quiet { min-height: 34px; font-size: .84rem; }
  .tl-code pre { margin: 0; padding: var(--s4) 18px; overflow-x: auto; font: 14px/1.65 var(--font-code); tab-size: 2; }
  .tl-code .k { color: #ff9fc4; } .tl-code .s { color: #9df0c8; } .tl-code .n { color: var(--sun); } .tl-code .c { color: #6f93a8; font-style: italic; } .tl-code .f { color: #8fdcff; }

  /* ---------- docs sidebar (a depth line) ---------- */
  .tl-docs-nav { font-size: var(--fs-ui); }
  .tl-docs-nav > summary { cursor: pointer; font-weight: 650; padding: 10px 0; list-style: none; }
  .tl-docs-nav > summary::-webkit-details-marker { display: none; }
  .tl-docs-nav > summary::after { content: " +"; color: var(--fg-dim); }
  .tl-docs-nav[open] > summary::after { content: " −"; }
  .tl-docs-nav ol { position: relative; margin: 0; padding: 4px 0; list-style: none; }
  .tl-docs-nav ol::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 2px; background: var(--rule); }
  .tl-docs-nav li a { position: relative; display: block; padding: 7px 8px 7px 28px; border-radius: 8px; color: var(--fg-dim); text-decoration: none; line-height: 1.35; }
  .tl-docs-nav li a::before { content: ""; position: absolute; left: 1px; top: 12px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--deep); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg) 40%, transparent); }
  .tl-docs-nav li a:hover, .tl-docs-nav li a.is-hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
  .tl-docs-nav li a.is-visited::before { background: color-mix(in srgb, var(--fg) 45%, var(--deep)); box-shadow: none; }
  .tl-docs-nav li a[aria-current="true"] { color: var(--fg); font-weight: 650; }
  .tl-docs-nav li a[aria-current="true"]::before { background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 214, 90, .22); }
  @media (min-width: 960px) {
    .tl-docs-nav { position: sticky; top: 88px; }
    .tl-docs-nav > summary { pointer-events: none; color: var(--fg-dim); font-size: var(--fs-small); }
    .tl-docs-nav > summary::after { content: none; }
  }

  /* ---------- dock (app navigation) ---------- */
  .tl-dock {
    --fg: var(--foam); --focus: var(--sun);
    position: fixed; z-index: 60; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: min(560px, calc(100% - 20px)); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px;
    border-radius: 28px 22px 30px 20px / 22px 28px 20px 30px; background: rgba(4, 26, 46, .84); backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(233, 251, 255, .12), 0 20px 40px -18px rgba(1, 8, 16, .95);
  }
  .tl-dock--static { position: relative; left: auto; bottom: auto; transform: none; margin-top: 30px; }
  .tl-dock__item { position: relative; display: grid; justify-items: center; align-content: end; gap: 3px; min-height: 58px; padding: 6px 2px;
    border-radius: 16px; color: var(--dim); text-decoration: none; font: 600 12.5px/1.1 var(--font-body); }
  .tl-dock__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    transition: transform var(--t-base) var(--ease-buoy), width var(--t-base) var(--ease-buoy), height var(--t-base) var(--ease-buoy), background var(--t-base); }
  .tl-dock__icon svg { width: 24px; height: 24px; }
  .tl-dock__item:hover, .tl-dock__item.is-hover { color: var(--foam); }
  .tl-dock__item[aria-current="page"] { color: var(--foam); }
  .tl-dock__item[aria-current="page"] .tl-dock__icon { /* rises into a porthole */
    width: 52px; height: 52px; transform: translateY(-22px); margin-bottom: -14px;
    background: radial-gradient(circle at 34% 28%, #bff0fb, #4fb9da 45%, #146d99); color: var(--ink);
    box-shadow: 0 0 0 4px rgba(4, 26, 46, .9), 0 0 0 6px rgba(143, 211, 230, .55), 0 10px 22px -6px rgba(1, 8, 16, .9); }
  .tl-dock__badge { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--accent); color: var(--ink); font: 700 11px/18px var(--font-body); text-align: center; box-shadow: 0 0 0 2px rgba(4, 26, 46, .95); }
  .tl-dock__item[aria-current="page"] .tl-dock__badge { top: -16px; left: calc(50% + 16px); }

  /* ---------- instrument strip (app top bar) ---------- */
  .tl-instruments { --fg: var(--foam); --fg-dim: var(--dim); display: flex; align-items: center; gap: var(--s4); min-height: 58px; padding: 8px var(--gutter);
    background: rgba(4, 26, 46, .8); backdrop-filter: blur(14px); color: var(--fg); box-shadow: 0 1px 0 rgba(233, 251, 255, .08); }
  .tl-instruments__who { display: flex; align-items: center; gap: var(--s2); font-weight: 650; font-size: var(--fs-ui); min-width: 0; }
  .tl-instruments__who .tl-porthole { --ring-w: 3px; width: 34px; flex: none; }
  .tl-instruments__readings { display: flex; align-items: center; min-width: 0; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
  .tl-reading { display: grid; grid-template-columns: 22px auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 0 14px;
    border-left: 1px solid rgba(233, 251, 255, .12); white-space: nowrap; }
  .tl-reading:first-child { border-left: 0; }
  .tl-reading img { grid-row: span 2; width: 22px; height: 22px; object-fit: contain; }
  .tl-reading b { font: 700 15px/1.1 var(--font-body); font-variant-numeric: tabular-nums; }
  .tl-reading small { font-size: 11.5px; color: var(--fg-dim); line-height: 1.2; }
  .tl-reading[data-tone="tide"] b { color: var(--sun); }
  @media (max-width: 719px) { .tl-reading small { display: none; } .tl-reading { padding: 0 9px; grid-template-columns: 18px auto; } .tl-reading img { width: 18px; height: 18px; grid-row: auto; } }

  /* ---------- light & bubbles ---------- */
  .tl-caustics { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; opacity: var(--caustic-o, .45); mix-blend-mode: soft-light; }
  .tl-zone--twilight .tl-caustics { --caustic-o: .2; }
  .tl-caustics::before, .tl-caustics::after {
    content: ""; position: absolute; left: -420px; top: -420px; width: calc(100% + 840px); height: calc(100% + 840px);   /* a fixed corner: growing never shifts it */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 .15 1 .15 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
    background-size: 420px 420px; animation: tl-drift 19s linear infinite;
  }
  .tl-caustics::after { background-size: 620px 620px; opacity: .7; animation-duration: 27s; animation-direction: reverse; }
  .tl-bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
  .tl-bubbles i { position: absolute; bottom: -24px; left: var(--x, 50%); width: var(--s, 10px); aspect-ratio: 1; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .55); background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .85) 0 16%, rgba(255, 255, 255, .08) 55%);
    animation: tl-rise var(--d, 12s) linear var(--delay, 0s) infinite; }
  .tl-bob { animation: tl-bob 4.8s ease-in-out infinite alternate; }

  /* ---------- small layout helpers used across pages ---------- */
  .tl-stack { display: grid; gap: var(--s4); }
  .tl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
}

/* =============================================================== motion */
@layer tl.motion {
  @keyframes tl-spin { to { transform: rotate(1turn); } }
  @keyframes tl-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
  @keyframes tl-breathe { from { transform: scale(1); } to { transform: scale(1.015); } }
  @keyframes tl-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg) translateX(-2px); } 75% { transform: rotate(3deg) translateX(2px); } }
  @keyframes tl-turn { to { transform: rotate(1turn); } }
  @keyframes tl-rise-out { to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes tl-burst {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(0) scale(.4); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(calc(-150px * var(--far, 1))) scale(1); }
  }
  @keyframes tl-flash { 0% { opacity: 0; } 20% { opacity: .9; } 100% { opacity: 0; } }
  @keyframes tl-fizz { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } }
  @keyframes tl-refill { from { opacity: .45; } to { opacity: 1; } }
  @keyframes tl-flow { to { background-position: 34px 0; } }
  @keyframes tl-surface { from { opacity: 0; transform: translateY(14px) scale(.98); } }
  @keyframes tl-drift { to { transform: translate(420px, 140px); } }
  @keyframes tl-nibble { 0%, 100% { transform: none; } 20% { transform: translateY(.06em); } 45% { transform: rotate(-8deg); } 70% { transform: rotate(5deg); } }
  @keyframes tl-rise {
    0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .9; }
    50% { transform: translate(10px, -50vh); } 100% { transform: translate(-6px, -105vh); opacity: 0; }
  }

  /* reduced motion: no drifting light, no bubbles, no bob or shake; state changes become short cross-fades */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
    .tl-caustics::before, .tl-caustics::after, .tl-bubbles, .tl-bob,
    .tl-creature .tl-porthole__glass > img, .tl-creature__pic::before { animation: none !important; }
    .tl-bubbles { display: none; }
    .tl-crate-stage__crate { animation: none !important; }
    .tl-crate-stage__rays { transition: opacity 160ms linear !important; animation: none !important; }
    .tl-crate-stage[data-state="open"] .tl-crate-stage__creature { animation: none !important; opacity: 1; transform: none; transition: opacity 160ms linear; }
    .tl-crate-stage__burst, .tl-crate-stage__flash { display: none; }
    .tl-modal, .tl-toast { animation: none !important; }
    .tl-depth__marker { transition: none !important; }
  }
}