/* UnyHooks — the pirate edition.
   Night sea, brass and parchment. The gold is the brand: the hook, the primary
   button, the word that lands each headline, the glow on the water. Parchment
   sections read like a captain's chart; everything else stays dark and quiet so
   the gold can carry.

   Shared by every page: tokens, base, buttons, the nav and the brand live at
   the top; the landing page's sections follow. The token names are the ones
   the app's stylesheets already use (--pink is the accent, now gold). */

* { box-sizing: border-box; }
html { background: #070B14; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: #070B14; color: #F3EAD7; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dd { margin: 0; }

.uh {
  /* the accent: brass and gold */
  --pink: #E8B04B;
  --pink-hi: #F7D78C;
  --pink-grad: linear-gradient(135deg, #FBE7B0 0%, #E8B04B 48%, #B57A1F 100%);
  --pink-soft: rgba(232, 176, 75, .12);
  --pink-line: rgba(232, 176, 75, .4);
  --pink-glow: 0 12px 34px -12px rgba(232, 176, 75, .6);
  --gold-ink: #1A1206;

  /* the night sea */
  --bg: #070B14;
  --bg-tint: #0A1120;
  --card: #0F182B;
  --card-2: #0B1323;
  --ink: #F3EAD7;
  --prose: #BDB29C;
  --muted: #8D8576;
  --line: rgba(232, 196, 120, .13);
  --line-hi: rgba(232, 196, 120, .24);
  --ok: #5FD3A6;
  --ok-soft: rgba(95, 211, 166, .1);
  --ok-line: rgba(95, 211, 166, .35);
  --red: #E5624B;

  /* parchment */
  --parch: #F2E4C4;
  --parch-2: #E8D3A8;
  --parch-ink: #24180A;
  --parch-prose: #5E4A2E;
  --parch-line: rgba(94, 74, 46, .22);

  --font-body: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-display: 'Grenze Gotisch', 'Pirata One', Georgia, serif;
  --font-accent: 'IM Fell English', Georgia, 'Times New Roman', serif;
  --font-brand: 'Pirata One', Georgia, serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1180px;
  --anchor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='4.5' r='2.2'/%3E%3Cpath d='M12 6.7V21M7.5 10h9M4 13.5c.5 4.3 4 7.5 8 7.5s7.5-3.2 8-7.5'/%3E%3C/svg%3E");
  --r: 24px;

  position: relative;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden would make this the scroll container and break
     the sticky nav */
  overflow-x: hidden;
  overflow-x: clip;
  line-height: 1.6;
}

/* moonlight on the water behind the top of every page */
.uh::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1100px;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
  background:
    radial-gradient(42% 40% at 78% 8%, rgba(232, 176, 75, .16), transparent 70%),
    radial-gradient(50% 45% at 8% 90%, rgba(40, 92, 140, .22), transparent 70%);
  pointer-events: none;
}

.uh-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; position: relative; }
@media (min-width: 720px) { .uh-wrap { padding: 0 28px; } }

/* the words that land a headline: old printer's italic, in gold */
.uh-pink {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.02em;
  line-height: .9;
  letter-spacing: 0;
  padding-right: .12em;
  background: var(--pink-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.uh-mono { font-family: var(--font-mono); }
.uh-nw { white-space: nowrap; }

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

.uh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--font-body);
  cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, filter .18s ease;
}
.uh-btn svg { width: 16px; height: 16px; }
.uh-btn-pink { background: var(--pink-grad); color: var(--gold-ink); box-shadow: var(--pink-glow), inset 0 1px 0 rgba(255, 255, 255, .45); }
.uh-btn-pink:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 16px 38px -10px rgba(232, 176, 75, .7), inset 0 1px 0 rgba(255, 255, 255, .45); }
.uh-btn-pink:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.uh-btn-ghost { background: rgba(255, 255, 255, .03); color: var(--ink); border-color: var(--line-hi); }
.uh-btn-ghost:hover { border-color: var(--pink-line); background: rgba(232, 176, 75, .08); }
.uh-btn-sm { height: 40px; padding: 0 20px; font-size: 14px; }
.uh-btn-xs { height: 30px; padding: 0 14px; font-size: 12.5px; box-shadow: none; }
.uh-btn:focus-visible, .uh-icon:focus-visible, .uh-q summary:focus-visible, .uh-links a:focus-visible {
  outline: 2px solid var(--pink); outline-offset: 3px;
}

/* ---------- brand ---------- */

.uh-brand { display: inline-flex; align-items: center; gap: 9px; font: 400 25px/1 var(--font-brand); letter-spacing: .01em; color: var(--ink); cursor: pointer; }
.uh-brand b { font-weight: 400; background: var(--pink-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uh-mark { width: 26px; height: 32px; flex: none; }

/* ---------- nav ---------- */

.uh-head {
  position: sticky; top: 0; z-index: 50;
  padding: 10px 16px 0;
}
.uh-nav {
  max-width: calc(var(--wrap) + 40px); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 62px; padding: 0 10px 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.uh-head.is-stuck .uh-nav {
  background: rgba(8, 13, 24, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--line);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
}
.uh-links { display: flex; align-items: center; gap: 26px; font-size: 14px; color: var(--prose); }
.uh-links a { cursor: pointer; transition: color .15s ease; }
.uh-links a:hover, .uh-links a.is-active { color: var(--pink-hi); }
.uh-links .uh-link-token { color: var(--pink); font-weight: 500; }
.uh-nav-right { display: flex; align-items: center; gap: 8px; }
.uh-icon {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.uh-icon:hover { background: var(--pink-soft); border-color: var(--pink-line); }
.uh-burger { display: none; }
@media (max-width: 980px) {
  .uh-burger { display: inline-grid; }
  .uh-nav { padding: 0 6px 0 16px; background: rgba(8, 13, 24, .9); border-color: var(--line); }
  .uh-links {
    position: absolute; left: 16px; right: 16px; top: 78px;
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px; border-radius: 22px;
    background: #0C1424; border: 1px solid var(--line-hi);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
    font-size: 16px;
  }
  .uh-links.is-open { display: flex; }
  .uh-links a { padding: 12px 14px; border-radius: 12px; }
  .uh-links a:hover { background: var(--pink-soft); }
}
@media (max-width: 520px) { .uh-nav-right .uh-icon[data-link="x"] { display: none; } }

/* ---------- type ---------- */

.uh-eyebrow {
  display: inline-flex; align-items: center; gap: .9em;
  font: 500 12.5px/1.2 var(--font-mono); letter-spacing: .26em; text-transform: uppercase;
  color: var(--prose);
}
.uh-eyebrow::before {
  content: ''; flex: none; width: 1.15em; height: 1.15em;
  background: var(--pink); filter: drop-shadow(0 0 6px rgba(232, 176, 75, .7));
  -webkit-mask: var(--anchor) center / contain no-repeat; mask: var(--anchor) center / contain no-repeat;
}
.uh-sec { position: relative; padding: 112px 0; }
@media (min-width: 720px) { .uh-sec { padding: 136px 0; } }
.uh-h1 { margin-top: 26px; font: 500 clamp(58px, 7.8vw, 108px)/.95 var(--font-display); letter-spacing: 0; color: var(--ink); }
.uh-h1 .uh-pink { display: inline-block; margin-top: .08em; }
.uh-h2 { margin-top: 18px; max-width: 820px; font: 600 clamp(34px, 4.4vw, 56px)/1.08 var(--font-display); letter-spacing: 0; color: var(--ink); }
.uh-h3 { font: 600 22px/1.25 var(--font-display); letter-spacing: 0; }
.uh-sub { margin-top: 22px; max-width: 760px; font-size: 18px; line-height: 1.7; color: var(--prose); }
.uh-lead { margin-top: 30px; max-width: 620px; font-size: 19px; line-height: 1.7; color: var(--prose); }
.uh-lead b { display: block; color: var(--ink); font-weight: 600; }
.uh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.uh-btn svg { width: 16px; height: 16px; }

/* ---------- the line down the left side ---------- */

/* A rope down the left gutter. As the page scrolls the hook is let down it,
   the rope it has passed turns to gold and each section's knot lights up once
   its top has gone by. landing.js sets --rail-y and places the knots. */
.uh-rail { --rail-y: 0px; --rail-w: 16px; --rope: 3px; position: fixed; left: 2px; top: 84px; bottom: 24px; width: var(--rail-w); z-index: 30; pointer-events: none; }
.uh-rail::before { content: ''; position: absolute; left: calc(var(--rail-w) / 2 - var(--rope) / 2); top: 0; bottom: 0; width: var(--rope); border-radius: var(--rope); background: repeating-linear-gradient(-58deg, #5C4320 0 2px, #2C1F0E 2px 4px); opacity: .75; -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent); mask-image: linear-gradient(180deg, #000 92%, transparent); }
.uh-rail-fill { position: absolute; left: calc(var(--rail-w) / 2 - var(--rope) / 2); top: 0; width: var(--rope); height: calc(var(--rail-y) + 6px); border-radius: var(--rope); background: repeating-linear-gradient(-58deg, #FBE7B0 0 2px, #B57A1F 2px 4px); box-shadow: 0 0 10px rgba(232, 176, 75, .7), 0 0 26px rgba(232, 176, 75, .35); }
.uh-rail-fill::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 215, 140, .8), rgba(232, 176, 75, .2) 45%, transparent 70%); }
.uh-rail-dot { position: absolute; left: calc(var(--rail-w) / 2 - 4px); width: 8px; height: 8px; border-radius: 50%; background: #2C1F0E; border: 2px solid #5C4320; transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s var(--ease); }
.uh-rail-dot.is-past { background: var(--pink-hi); border-color: #B57A1F; box-shadow: 0 0 12px rgba(232, 176, 75, .9); transform: scale(1.3); }
.uh-rail-hook { position: absolute; left: 0; top: 0; width: var(--rail-w); height: calc(var(--rail-w) * 1.25); transform: translateY(var(--rail-y)) rotate(var(--rail-tilt, 0deg)); transform-origin: 50% 0; filter: drop-shadow(0 0 8px rgba(232, 176, 75, .7)); will-change: transform; }
@media (min-width: 760px) {
  .uh-rail { --rail-w: 34px; --rope: 5px; left: max(14px, calc(50% - var(--wrap) / 2 - 60px)); }
  .uh-rail-dot { width: 12px; height: 12px; left: calc(var(--rail-w) / 2 - 6px); }
}
/* Below 1300px the gutter is narrower than the hook: move the content over. */
@media (min-width: 760px) and (max-width: 1299px) {
  main .uh-wrap { padding-left: 68px; }
  .uh .uh-foot { padding-left: max(68px, calc(50% - var(--wrap) / 2 + 28px)); }
}
@media (max-width: 759px) {
  main .uh-wrap { padding-left: 24px; }
}

/* ---------- hero ---------- */

.uh-hero { display: grid; gap: 24px; align-items: center; padding-top: 48px; }
@media (min-width: 1000px) { .uh-hero { grid-template-columns: 1.1fr .9fr; gap: 12px; padding-top: 64px; } }
.uh-hero-copy { position: relative; z-index: 2; }
.uh-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px; }
.uh-steps span { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-hi); font: 500 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.uh-steps i { font-style: normal; color: var(--pink); font-size: 13px; }

.uh-orb { position: relative; width: 100%; max-width: 600px; aspect-ratio: 560 / 600; justify-self: center; }
.uh-orb > svg { width: 100%; height: 100%; overflow: visible; }
.uh-orb .uh-tag { position: absolute; z-index: 2; display: grid; gap: 4px; padding: 12px 16px; border-radius: 12px; background: rgba(8, 12, 22, .82); border: 1px solid rgba(232, 176, 75, .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 36px -10px rgba(232, 176, 75, .35); font: 12.5px/1.6 var(--font-mono); color: var(--prose); }
.uh-tag b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-hi); }
.uh-tag b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.uh-tag.is-fired b { color: var(--ok); }
.uh-tag.is-fired b::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.uh-tag em { font-style: normal; color: var(--ink); }
.uh-tag-a { right: 0; top: 10%; }
.uh-tag-b { left: 0; top: 52%; }
@media (min-width: 1000px) { .uh-tag-b { left: -4%; top: 58%; } }
.uh-hero.is-3d .uh-tag-a { right: -6%; top: 40%; }
.uh-hero.is-3d .uh-tag-b { left: auto; right: -4%; top: 72%; }
@media (max-width: 560px) { .uh-orb .uh-tag { font-size: 11px; padding: 9px 11px; } }
.uh-float { animation: uh-float 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.uh-spin-slow { animation: uh-spin 60s linear infinite; transform-origin: 280px 300px; }
.uh-twinkle { animation: uh-twinkle 3.6s ease-in-out infinite; }
@keyframes uh-float { 50% { transform: translateY(-12px); } }
@keyframes uh-spin { to { transform: rotate(360deg); } }
@keyframes uh-twinkle { 50% { opacity: .2; } }
/* the porthole: two swells rolling past, a ship riding them, the moon on the water */
.uh-wave { animation: uh-swell 14s linear infinite; }
.uh-wave-front { animation-duration: 9s; }
.uh-wave-fore { animation-duration: 6.5s; animation-direction: reverse; }
.uh-ship { animation: uh-ride 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.uh-glint { animation: uh-twinkle 2.8s ease-in-out infinite; }
@keyframes uh-swell { to { transform: translateX(-560px); } }
@keyframes uh-ride { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: translateY(4px) rotate(2.5deg); } }

.uh-guarantees { display: grid; margin-top: 56px; border: 1px solid var(--line-hi); border-radius: 18px; overflow: hidden; background: rgba(10, 16, 30, .6); }
@media (min-width: 720px) { .uh-guarantees { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .uh-guarantees { grid-template-columns: repeat(4, 1fr); } }
.uh-guarantees div { padding: 24px 24px 26px; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .uh-guarantees div:nth-child(-n+2) { border-top: 0; } .uh-guarantees div:nth-child(2n) { border-left: 1px solid var(--line); } }
@media (min-width: 1060px) { .uh-guarantees div { border-top: 0; } .uh-guarantees div + div { border-left: 1px solid var(--line); } }
.uh-guarantees div:first-child { border-top: 0; }
.uh-guarantees h3 { font: 600 17px/1.3 var(--font-display); letter-spacing: 0; }
.uh-guarantees p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--prose); }

/* ---------- rules ticker ---------- */

.uh-ticker { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: rgba(8, 12, 22, .75); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.uh-ticker-track { display: flex; width: max-content; animation: uh-ticker 60s linear infinite; }
.uh-ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 18px 26px; font: 14px var(--font-mono); color: var(--muted); white-space: nowrap; }
.uh-ticker-item::after { content: ''; width: 15px; height: 15px; margin-left: 26px; background: var(--pink); -webkit-mask: var(--anchor) center / contain no-repeat; mask: var(--anchor) center / contain no-repeat; }
.uh-ticker-item code { font-family: inherit; color: var(--ink); }
.uh-ticker-item em { font-style: normal; color: var(--pink-hi); }
@keyframes uh-ticker { to { transform: translateX(-50%); } }

/* ---------- see it react ---------- */

.uh-sim { margin-top: 56px; border-radius: 22px; border: 1px solid var(--line-hi); background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)), #0A101E; box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .9), 0 0 100px -50px rgba(232, 176, 75, .35); overflow: hidden; }
.uh-sim-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.uh-sim-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.uh-sim-tabs button { height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--prose); font: 500 15px var(--font-body); cursor: pointer; }
.uh-sim-tabs button:hover { color: var(--ink); }
.uh-sim-tabs button[aria-selected="true"] { background: rgba(232, 176, 75, .1); border-color: var(--pink-line); color: var(--ink); }
.uh-sim-top small { padding-right: 8px; font: 500 11px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.uh-sim-body { display: grid; }
@media (min-width: 900px) { .uh-sim-body { grid-template-columns: 1.15fr .85fr; } }
.uh-sim-left { padding: 28px; display: grid; gap: 14px; align-content: start; }
.uh-sim-right { padding: 28px; border-top: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
@media (min-width: 900px) { .uh-sim-right { border-top: 0; border-left: 1px solid var(--line); } }
.uh-sim-desc { font-size: 15.5px; line-height: 1.65; color: var(--prose); }
.uh-label { margin-top: 10px; font: 500 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.uh-rule { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.uh-rule code { display: block; font: 13.5px/1.6 var(--font-mono); color: var(--prose); }
.uh-rule code b { font-weight: 500; color: var(--ink); }
.uh-rule code i { font-style: normal; color: var(--pink-hi); }
.uh-rule-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 500 10.5px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.uh-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-hi); }
.uh-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.uh-pill.is-armed { color: var(--pink-hi); border-color: var(--pink-line); }
.uh-pill.is-armed::before { background: var(--pink); }
.uh-pill.is-fired { color: var(--ok); border-color: var(--ok-line); }
.uh-pill.is-fired::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.uh-pill.is-off { color: var(--muted); }
.uh-rule.is-fired { border-color: var(--ok-line); background: rgba(95, 211, 166, .05); box-shadow: 0 0 0 1px rgba(95, 211, 166, .08), 0 0 30px -14px rgba(95, 211, 166, .5); }
.uh-events { display: grid; gap: 8px; }
.uh-events button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--pink-line); background: rgba(232, 176, 75, .07); color: var(--ink); font: 500 14.5px var(--font-body); text-align: left; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.uh-events button:hover { background: rgba(232, 176, 75, .14); }
.uh-events button:active { transform: scale(.99); }
.uh-events button::after { content: '→'; color: var(--pink-hi); }
.uh-econ { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.uh-econ div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px; font-size: 15px; }
.uh-econ div + div { border-top: 1px solid var(--line); }
.uh-econ dt { color: var(--prose); }
.uh-econ dd { margin: 0; font: 500 14px var(--font-mono); color: var(--ink); text-align: right; transition: color .3s ease; }
.uh-econ dd.is-changed { color: var(--pink-hi); }
.uh-log { min-height: 64px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line-hi); font: 13px/1.6 var(--font-mono); color: var(--muted); }
.uh-log b { color: var(--ok); font-weight: 500; }
.uh-log b.is-no { color: var(--red); }
.uh-reset { justify-self: start; border: 0; background: none; padding: 0; font: 500 11.5px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--prose); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---------- light section ---------- */

.uh-light { overflow: hidden; color: #1E140A; background-color: #EBDCB9;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 45%, transparent 40%, rgba(120, 72, 18, .22) 100%),
    repeating-conic-gradient(from 0deg at 86% 16%, rgba(110, 66, 16, .16) 0 .18deg, transparent .18deg 11.25deg),
    repeating-conic-gradient(from 5.6deg at 6% 92%, rgba(110, 66, 16, .1) 0 .18deg, transparent .18deg 22.5deg),
    linear-gradient(180deg, #F1E4C4, #E6D3AA);
  box-shadow: inset 0 0 90px rgba(92, 52, 10, .35), inset 0 0 0 1px rgba(92, 52, 10, .2); }
.uh-map-rose { position: absolute; right: max(16px, calc(50% - 640px)); top: 56px; width: clamp(150px, 20vw, 260px); aspect-ratio: 220 / 228; color: #8A5A1A; opacity: .55; pointer-events: none; }
@media (max-width: 760px) { .uh-map-rose { opacity: .25; } }
.uh-light .uh-eyebrow { color: #6B5A43; }
.uh-light .uh-eyebrow::before { background: #8A5A1A; filter: none; }
.uh-light .uh-h2 { color: #17110A; }
.uh-light .uh-pink { background: linear-gradient(90deg, #C98B2A, #8A5410); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uh-light .uh-sub { color: #4E4232; }
.uh-timeline { position: relative; display: grid; gap: 30px; margin-top: 64px; }
@media (min-width: 900px) { .uh-timeline { grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 34px; } .uh-timeline::before { content: ''; position: absolute; left: 0; right: 12%; top: 5px; height: 3px; background: repeating-linear-gradient(90deg, #7A4A14 0 12px, transparent 12px 22px); } }
.uh-tl { position: relative; }
@media (min-width: 900px) {
  .uh-tl::before { content: ''; position: absolute; left: 0; top: -36px; width: 15px; height: 15px; border-radius: 50%; background: #EBDCB9; border: 3px solid #7A4A14; }
  .uh-tl-x::before { left: -6px; top: -44px; width: 30px; height: 30px; border: 0; border-radius: 0; background:
    linear-gradient(45deg, transparent 41%, #A3271B 41% 59%, transparent 59%),
    linear-gradient(-45deg, transparent 41%, #A3271B 41% 59%, transparent 59%); }
}
.uh-tl-x small { color: #A3271B; }
.uh-tl small { font: 500 13px var(--font-mono); letter-spacing: .1em; color: #A8701C; }
.uh-tl h3 { margin-top: 8px; font: 600 21px/1.25 var(--font-display); letter-spacing: 0; color: #17110A; }
.uh-tl p { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: #4E4232; }
.uh-statement { margin-top: 96px; max-width: 980px; font: 600 clamp(30px, 3.6vw, 46px)/1.18 var(--font-display); letter-spacing: 0; color: #17110A; }

/* ---------- cards ---------- */

.uh-cards { display: grid; gap: 18px; margin-top: 56px; }
@media (min-width: 760px) { .uh-cards { grid-template-columns: repeat(3, 1fr); } }
.uh-cards-4 { margin-top: 22px; }
@media (min-width: 760px) { .uh-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .uh-cards-4 { grid-template-columns: repeat(4, 1fr); } }
.uh-card { padding: 26px; border-radius: 18px; border: 1px solid var(--line-hi); background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)), #0B111F; }
.uh-card .uh-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(232, 176, 75, .12); border: 1px solid var(--pink-line); color: var(--pink-hi); }
.uh-card .uh-ico svg { width: 20px; height: 20px; }
.uh-card h3 { margin-top: 22px; font: 600 21px/1.25 var(--font-display); letter-spacing: 0; }
.uh-card p { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: var(--prose); }
.uh-card .uh-mono-tag { display: inline-block; padding: 5px 10px; border-radius: 7px; background: rgba(232, 176, 75, .1); border: 1px solid var(--pink-line); font: 500 12.5px var(--font-mono); color: var(--pink-hi); }
.uh-cards-4 .uh-card p { margin-top: 18px; }
.uh-subhead { margin-top: 64px; font: 600 24px/1.2 var(--font-display); letter-spacing: 0; }
.uh-syntax { margin-top: 48px; padding: 28px; border-radius: 18px; border: 1px solid var(--line-hi); background: #0B111F; font: 17px/1.6 var(--font-mono); color: var(--prose); overflow-x: auto; }
.uh-syntax b { font-weight: 500; color: var(--pink-hi); }
.uh-syntax span { color: var(--muted); }
.uh-syntax small { display: block; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.uh-syntax small code { color: var(--ink); font-family: inherit; }
.uh-callout { margin-top: 24px; padding: 22px 26px; border-radius: 16px; border: 1px solid var(--pink-line); background: rgba(232, 176, 75, .06); font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.uh-callout b { font-weight: 700; }
.uh-callout code { font-family: var(--font-mono); font-size: .92em; }
.uh-table { margin-top: 22px; border: 1px solid var(--line-hi); border-radius: 16px; overflow: hidden; background: #0B111F; }
.uh-table div { display: grid; gap: 6px; padding: 18px 22px; }
@media (min-width: 760px) { .uh-table div { grid-template-columns: 340px 1fr; gap: 24px; } }
.uh-table div + div { border-top: 1px solid var(--line); }
.uh-table dt { font: 500 13.5px var(--font-mono); color: var(--pink-hi); }
.uh-table dd { margin: 0; font-size: 15.5px; color: var(--ink); }

.uh-try { margin-top: 18px; padding: 22px; border-radius: 18px; border: 1px solid var(--line-hi); background: #0B111F; }
.uh-try-label { display: block; margin-bottom: 12px; font: 500 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.uh-try-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 999px; background: #070B14; border: 1px solid var(--line-hi); }
.uh-try-box:focus-within { border-color: var(--pink-line); box-shadow: 0 0 0 4px var(--pink-soft); }
.uh-try-box input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: 16px var(--font-body); color: var(--ink); }
.uh-try-box input::placeholder { color: var(--muted); }
.uh-try-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.uh-try-ideas button { height: 32px; padding: 0 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: transparent; font: 500 13px var(--font-body); color: var(--prose); }
.uh-try-ideas button:hover { border-color: var(--pink-line); color: var(--pink-hi); }
@media (max-width: 520px) { .uh-try-box { border-radius: 18px; flex-direction: column; align-items: stretch; padding: 8px; } .uh-try-box input { padding: 0 10px; } }

/* hard limits */
.uh-limits { display: grid; gap: 18px; margin-top: 56px; }
@media (min-width: 860px) { .uh-limits { grid-template-columns: repeat(3, 1fr); } }
.uh-limit { padding: 28px; border-radius: 18px; border: 1px solid var(--line-hi); background: linear-gradient(160deg, rgba(232, 176, 75, .06), transparent 50%), #0B111F; }
.uh-limit span { font: 400 64px/1 var(--font-brand); letter-spacing: 0; color: var(--pink); }
.uh-limit h3 { margin-top: 18px; font: 600 21px/1.25 var(--font-display); letter-spacing: 0; }
.uh-limit p { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--prose); }

/* ---------- the token ---------- */

.uh-panel {
  position: relative; overflow: hidden;
  border-radius: 32px;
  border: 1px solid var(--line-hi);
  background:
    radial-gradient(45% 55% at 100% 0%, rgba(232, 176, 75, .14), transparent 70%),
    radial-gradient(40% 55% at 0% 100%, rgba(40, 92, 140, .2), transparent 70%),
    #0B1323;
}
.uh-token { display: grid; gap: 40px; padding: 44px 22px; align-items: center; }
@media (min-width: 900px) { .uh-token { grid-template-columns: 1.15fr 1fr; padding: 72px 52px; } }
.uh-token-name { margin-top: 14px; font: 400 clamp(56px, 8vw, 92px)/1 var(--font-brand); letter-spacing: .01em; background: var(--pink-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uh-token .uh-sub { max-width: 440px; }
.uh-token .uh-label { margin-top: 36px; }
.uh-ca {
  margin-top: 12px; max-width: 580px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: 18px;
  background: #060A12; border: 1px solid var(--line-hi);
}
.uh-ca code { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.uh-note { margin-top: 16px; max-width: 580px; font-size: 14px; color: var(--prose); }
.uh-token .uh-actions { margin-top: 28px; }
.uh-coin { justify-self: center; width: min(320px, 72vw); aspect-ratio: 1; position: relative; }
.uh-coin svg { width: 100%; height: 100%; overflow: visible; }
.uh-coin .uh-spin { animation: uh-coin 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes uh-coin { 50% { transform: translateY(-10px) rotate(4deg); } }

/* live market (token.js) */
.uh-market {
  grid-column: 1 / -1;
  display: grid; gap: 20px;
  padding: 22px; border-radius: 22px;
  background: rgba(6, 10, 18, .7);
  border: 1px solid var(--line);
}
.uh-market-top { display: grid; gap: 16px; align-items: end; }
@media (min-width: 720px) { .uh-market-top { grid-template-columns: auto minmax(0, 1fr); gap: 32px; } }
.uh-price { display: grid; gap: 2px; }
.uh-price .uh-label { margin: 0; }
.uh-price b { font: 600 clamp(30px, 4vw, 40px) var(--font-body); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.uh-chg { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.uh-chg.is-up { color: var(--ok); }
.uh-chg.is-down { color: var(--red); }
.uh-spark-box { position: relative; min-width: 0; }
.uh-spark { display: block; width: 100%; height: 72px; overflow: visible; cursor: crosshair; }
.uh-spark-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--bg); pointer-events: none; }
.uh-spark-cap { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); text-align: right; }
.uh-spark-tip {
  position: absolute; top: -34px; transform: translateX(-50%);
  padding: 4px 8px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  background: var(--ink); color: var(--bg); font: 12px var(--font-mono);
}
.uh-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .uh-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.uh-stats div { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); min-width: 0; }
.uh-stats dt { font-size: 12px; color: var(--muted); }
.uh-stats dd { margin-top: 2px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.uh-market-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.uh-market-src { font-size: 12.5px; color: var(--muted); }
.uh-market-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.uh-market.is-waiting .uh-stats, .uh-market.is-waiting .uh-spark-box, .uh-market.is-waiting #mk-chart { display: none; }
.uh-fine { margin-top: 24px; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ---------- faq ---------- */

.uh-faq { max-width: 820px; }
.uh-qs { margin-top: 44px; border-top: 1px solid var(--line-hi); }
.uh-q { border-bottom: 1px solid var(--line-hi); }
.uh-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0;
  font: 500 18px var(--font-display); letter-spacing: 0;
  cursor: pointer; list-style: none;
}
.uh-q summary::-webkit-details-marker { display: none; }
.uh-q summary::after {
  content: ''; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--pink), var(--pink)) center / 100% 2px no-repeat, linear-gradient(var(--pink), var(--pink)) center / 2px 100% no-repeat;
  transition: transform .2s ease;
}
.uh-q[open] summary::after { transform: rotate(45deg); }
.uh-q p { padding: 0 0 24px; max-width: 680px; font-size: 16px; line-height: 1.7; color: var(--prose); }

/* ---------- closing call ---------- */

.uh-close { position: relative; overflow: hidden; text-align: center; padding: 150px 0 140px; }
.uh-close-glow { position: absolute; left: 50%; top: 50%; width: min(900px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 176, 75, .16), transparent 72%); pointer-events: none; }
.uh-close-glow::before, .uh-close-glow::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(232, 196, 120, .12); }
.uh-close-glow::after { inset: 24%; border-color: rgba(232, 196, 120, .08); }
.uh-close .uh-h2 { margin-inline: auto; font-size: clamp(42px, 6vw, 76px); }
.uh-close .uh-sub { margin-inline: auto; max-width: 560px; }
.uh-close .uh-actions { justify-content: center; }
.uh-close { padding-bottom: 230px; }
.uh-close-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none; overflow: hidden; }
.uh-close-waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; }
.uh-close-waves .uh-wave { animation-name: uh-swell-wide; }
.uh-wave-slow { animation-duration: 26s; }
@keyframes uh-swell-wide { to { transform: translateX(-1440px); } }
.uh-close-ship { position: absolute; left: 0; bottom: 78px; width: 104px; height: 102px; color: #E8B04B; opacity: .9; filter: drop-shadow(0 0 14px rgba(232, 176, 75, .35)); animation: uh-sail 48s linear infinite; }
@keyframes uh-sail { from { transform: translateX(-140px) rotate(-2deg); } 25% { transform: translateX(25vw) rotate(2deg); } 50% { transform: translateX(50vw) rotate(-2deg); } 75% { transform: translateX(75vw) rotate(2deg); } to { transform: translateX(calc(100vw + 40px)) rotate(-2deg); } }

/* ---------- footer ---------- */

.uh-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 34px max(24px, calc(50% - var(--wrap) / 2 + 28px)) 44px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.uh-foot p { max-width: 460px; }
.uh-foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
.uh-foot-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--prose); }
.uh-foot-links a:hover { color: var(--pink-hi); }

/* ---------- 3D (scene3d.js) ---------- */

/* Each canvas covers the 2D drawing of the same thing; the drawing is hidden
   only once the first 3D frame is on screen (.is-3d on the container). */
.uh-3d { position: absolute; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.is-3d > .uh-3d { opacity: 1; }
.uh-hero { position: relative; }
.uh-3d-hero { z-index: 0; left: 50%; width: 100vw; margin-left: -50vw; top: -140px; height: calc(100% + 220px);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.uh-3d-shade { position: absolute; z-index: 1; left: 50%; width: 100vw; margin-left: -50vw; top: -140px; height: calc(100% + 220px); pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: linear-gradient(90deg, rgba(7, 11, 20, .78) 0%, rgba(7, 11, 20, .5) 30%, rgba(7, 11, 20, 0) 55%); }
.is-3d > .uh-3d-shade { opacity: 1; }
@media (max-width: 999px) {
  .uh-3d-hero { height: calc(100% + 260px); -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent); mask-image: linear-gradient(180deg, #000 90%, transparent); }
  .uh-hero.is-3d .uh-tag-a { right: 0; top: 2%; }
  .uh-hero.is-3d .uh-tag-b { right: 0; top: 84%; }
}
@media (max-width: 999px) { .uh-3d-shade { background: linear-gradient(180deg, rgba(7, 11, 20, .55) 0%, rgba(7, 11, 20, .25) 45%, rgba(7, 11, 20, 0) 60%); } }
.uh-hero > .uh-orb { z-index: 2; }
.uh-hero.is-3d > .uh-orb > svg { opacity: 0; transition: opacity .8s ease; }
.uh-coin .uh-3d { inset: -14%; width: 128%; height: 128%; }
.uh-coin.is-3d > svg { opacity: 0; }
.uh-3d-sea { inset: 0; width: 100%; height: 100%; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%); mask-image: linear-gradient(180deg, transparent, #000 22%); }
.uh-close > .uh-wrap { position: relative; z-index: 2; }
.uh-close.is-3d .uh-close-sea, .uh-close.is-3d .uh-close-glow { opacity: 0; }
.uh-close.is-3d .uh-sub { color: #D8CDB6; }

/* ---------- motion ---------- */

/* Hidden only once the script has added .uh-js, so without JS (or with reduced
   motion) the page renders complete. */
.uh-js .uh-rise { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.uh-js .uh-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .uh-float, .uh-spin-slow, .uh-twinkle, .uh-ticker-track, .uh-wave, .uh-ship, .uh-glint, .uh-close-ship { animation: none !important; }
  .uh-close-ship { left: 60%; }
  .uh-js .uh-rise { opacity: 1; transform: none; transition: none; }
}