:root {
  --bg: #0c0b09;
  --bg2: #15130f;
  --card: #1a1813;
  --line: #2c2820;
  --ink: #f4efe6;
  --dim: #a39d91;
  --faint: #6f6a60;
  --honey: #f2b33d;
  --honey2: #ffd36b;
  --violet: #b98cff;
  --ok: #7fd18b;
  --bad: #ff7b6b;
  --radius: 14px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f3ea; --bg2: #efe9dc; --card: #fffdf8; --line: #e1d9c8; --ink: #1c1913; --dim: #5e584d; --faint: #8d877b;
    --honey: #b77a06; --honey2: #8a5a00; --violet: #6b3fd0; --ok: #23803a; --bad: #c23a2a; color-scheme: light;
  }
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--honey); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: clamp(34px, 6vw, 64px); }
h2 { font-size: clamp(24px, 3.4vw, 34px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px max(16px, calc(50vw - 600px)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 20px; color: var(--ink); font-weight: 600; }
.brand span { color: var(--honey); }
.brand:hover { text-decoration: none; }
nav { display: flex; gap: 18px; align-items: center; font-size: 14px; }
nav a { color: var(--dim); }
nav a.nav-cta { color: var(--bg); background: var(--honey); padding: 7px 12px; border-radius: 999px; font-weight: 600; }
@media (max-width: 560px) { nav a:not(.nav-cta) { display: none; } }

main { max-width: 1200px; margin: 0 auto; padding: 28px 16px 60px; outline: none; }
.loading { color: var(--dim); }
.foot { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; color: var(--faint); font-size: 13px; border-top: 1px solid var(--line); }
.foot p { margin: 0 0 6px; }

/* hero */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 20px 0 36px; }
.hero p.lead { font-size: 19px; color: var(--dim); max-width: 34em; }
.hero .art { aspect-ratio: 1; color: var(--ink); border-radius: 24px; background: radial-gradient(circle at 50% 40%, var(--bg2), var(--bg)); border: 1px solid var(--line); padding: 18px; }
.hero .art svg { width: 100%; height: 100%; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero .art { max-width: 420px; } }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 11px 18px; border-radius: 999px; font: 600 15px var(--sans); cursor: pointer; }
.btn:hover { border-color: var(--honey); text-decoration: none; }
.btn.primary { background: var(--honey); color: #1a1206; border-color: var(--honey); }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 8px 0 40px; }
.stats div { background: var(--bg2); padding: 16px 18px; }
.stats b { display: block; font: 600 28px var(--serif); }
.stats span { color: var(--dim); font-size: 13px; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 36px 0 14px; }
.section-head p { color: var(--dim); margin: 0; }

/* fresco */
.fresco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .fresco { grid-template-columns: 1fr; } }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px; color: var(--ink); display: flex; flex-direction: column; gap: 10px; transition: transform .2s, border-color .2s; }
.tile:hover { transform: translateY(-3px); border-color: var(--honey); text-decoration: none; }
.tile .art { aspect-ratio: 1; color: var(--ink); }
.tile .art svg { width: 100%; height: 100%; }
.tile h3 { margin: 0; }
.tile p { color: var(--dim); margin: 0; font-size: 14px; }

.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.feed li:last-child { border-bottom: 0; }
.feed time { color: var(--faint); margin-left: auto; white-space: nowrap; font-size: 12px; }
.empty { color: var(--dim); font-size: 14px; }
.board { width: 100%; border-collapse: collapse; font-size: 14px; }
.board td { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.board td:last-child { text-align: right; font-family: var(--mono); color: var(--honey); }

/* badges */
.badge { display: inline-block; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; border: 1px solid currentColor; white-space: nowrap; }
.t-valid { color: var(--ink); }
.t-swarm { color: var(--honey); }
.t-perfect { color: var(--violet); }
.t-world { color: var(--honey2); background: color-mix(in srgb, var(--honey2) 14%, transparent); }
.t-reference { color: var(--dim); }
.t-attempt, .t-empty { color: var(--faint); }

/* cases grid */
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.case { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.case:hover { border-color: var(--honey); text-decoration: none; }
.case .art { aspect-ratio: 1; color: var(--ink); background: var(--bg2); border-radius: 8px; display: grid; place-items: center; }
.case .art svg { width: 100%; height: 100%; }
.case .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.case .n { font: 600 16px var(--serif); }
.case .s { font: 12px var(--mono); color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.case .art .q { color: var(--faint); font: 28px var(--serif); }

/* case page */
.casepage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .casepage { grid-template-columns: 1fr; } }
.bigart { aspect-ratio: 1; color: var(--ink); background: radial-gradient(circle at 50% 40%, var(--bg2), var(--bg)); border: 1px solid var(--line); border-radius: 20px; padding: 14px; display: grid; place-items: center; }
.bigart svg { width: 100%; height: 100%; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; margin: 14px 0; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; font-family: var(--mono); word-break: break-all; }
.crumbs { font-size: 14px; color: var(--dim); margin-bottom: 8px; }
textarea { width: 100%; min-height: 140px; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: 13px/1.4 var(--mono); resize: vertical; }
textarea:focus { outline: 2px solid var(--honey); outline-offset: 1px; }
.verdict { margin-top: 12px; padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); font-size: 14px; }
.verdict.ok { border-color: var(--ok); }
.verdict.bad { border-color: var(--bad); }
.verdict b { font-family: var(--serif); font-size: 18px; }
pre.prompt { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; font: 12.5px/1.5 var(--mono); max-height: 360px; overflow: auto; color: var(--dim); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 16px; }
.steps li { counter-increment: s; position: relative; padding: 0 0 12px 38px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--honey); color: #1a1206; display: grid; place-items: center; font: 600 13px var(--sans); }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
@media (max-width: 760px) { .levels { grid-template-columns: 1fr; } }
.levels .panel h3 { font-size: 17px; }
.levels .panel p { font-size: 14px; color: var(--dim); margin: 0; }
.strategy { border-left: 3px solid var(--honey); padding: 8px 14px; background: var(--bg2); border-radius: 0 10px 10px 0; margin: 10px 0 18px; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.gallery a { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); transition: transform .2s; }
.gallery a:hover { transform: translateY(-3px) rotate(-.4deg); }
.gallery img { width: 100%; display: block; }
.prose { max-width: 720px; }
.prose h2 { margin-top: 1.4em; }
.prose li { margin-bottom: .4em; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--honey); color: #1a1206; padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; z-index: 10; }

/* catalogue */
.catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cat .row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cat .rank { font: 600 28px var(--serif); color: var(--honey); }
.cat h3 { margin-bottom: 2px; }
.cat p { font-size: 14px; color: var(--dim); margin: 0 0 8px; }
.cat .dom { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.cat .ver { color: var(--ink); }

.share { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.gallery figure { margin: 0; }
.gallery figure .share { justify-content: center; }

/* hive */
.hive-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.hive-head .mode { color: var(--dim); max-width: 40em; }
.go { display: grid; justify-items: center; gap: 2px; min-width: 190px; padding: 18px 26px; border-radius: 26px; border: 2px solid var(--honey); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.go b { font: 600 22px var(--serif); }
.go small { color: var(--dim); }
.go .bee { font-size: 30px; }
.go.on { background: var(--honey); color: #1a1206; }
.go.on small { color: #4a3510; }
.go.on .bee { animation: buzz 1.2s ease-in-out infinite; }
@keyframes buzz { 0%,100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(3px,-2px) rotate(8deg); } 75% { transform: translate(-3px,1px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .go.on .bee { animation: none; } }
.voice { display: flex; gap: 8px; margin: 20px 0 8px; }
.voice input { flex: 1; min-width: 0; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font: inherit; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 860px) { .presets { grid-template-columns: repeat(2, 1fr); } }
.preset { text-align: left; display: grid; gap: 4px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.preset span { font-size: 26px; }
.preset small { color: var(--dim); font-size: 13px; line-height: 1.4; }
.preset.sel { border-color: var(--honey); box-shadow: 0 0 0 2px color-mix(in srgb, var(--honey) 35%, transparent); }
.src, .tier { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tier { padding-top: 14px; }
.src > div { flex: 1; min-width: 0; }
.src small, .tier small { display: block; color: var(--dim); font-size: 12px; }
.tier small { display: inline; margin-left: auto; }
.src:not(.on) { opacity: .55; }
.src .num { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); }
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: .2s; cursor: pointer; }
.switch span::after { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: var(--ink); transition: .2s; }
.switch input:checked + span { background: var(--honey); }
.switch input:checked + span::after { transform: translateX(16px); background: #1a1206; }
.switch input:focus-visible + span { outline: 2px solid var(--honey); outline-offset: 2px; }
.add summary { cursor: pointer; margin-top: 12px; color: var(--honey); }
.addrow { padding: 10px 0; border-bottom: 1px solid var(--line); }
.addrow small { display: block; color: var(--dim); font-size: 12px; }
.addkey { display: flex; gap: 6px; margin-top: 6px; }
.addkey input, .row input[type=number], .row input[type=time] { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; min-width: 0; }
.addkey input { flex: 1; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
label.row { justify-content: space-between; }
.row input[type=number] { width: 90px; }
.hint { color: var(--dim); font-size: 13px; }
.hunts label { display: inline-flex; gap: 6px; margin-right: 12px; }
.slots { display: grid; gap: 8px; margin-bottom: 12px; }
.slotcard { background: var(--bg2); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.bar { height: 4px; background: var(--line); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: var(--honey); transform-origin: left; animation: fill linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hivelog { max-height: 300px; overflow: auto; font-size: 13px; }
.hivelog time { margin: 0 8px 0 0; }

.t-known { color: #7fd1c4; }

/* ===== Art direction: the observatory notebook ===== */
:root { --paper-line: color-mix(in srgb, var(--ink) 9%, transparent); }
body {
  background:
    radial-gradient(1200px 700px at 70% -10%, color-mix(in srgb, var(--honey) 9%, transparent), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='72.75' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0l14 8.1v16.2L14 32.4 0 24.3V8.1zM14 32.4v16.1' fill='none' stroke='%23ffffff' stroke-opacity='0.028'/%3E%3C/svg%3E"),
    var(--bg);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body {
    background:
      radial-gradient(1200px 700px at 70% -10%, color-mix(in srgb, var(--honey) 10%, transparent), transparent 60%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='72.75' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0l14 8.1v16.2L14 32.4 0 24.3V8.1zM14 32.4v16.1' fill='none' stroke='%23000000' stroke-opacity='0.04'/%3E%3C/svg%3E"),
      var(--bg);
  }
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--honey); }
h1 { letter-spacing: -0.025em; }
.kicker { color: var(--honey); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
.btn .ic { width: 18px; height: 18px; }
.icon-btn { padding: 10px 12px; }
.honey { color: var(--dim); font-family: var(--sans); font-size: 12px; }

/* Plates: a drawing with corner ticks and a caption, like a figure in a field notebook. */
.plate { margin: 0; position: relative; padding: 18px 18px 12px; border-radius: 6px; color: var(--ink);
  background:
    linear-gradient(var(--faint), var(--faint)) left top / 16px 1.5px no-repeat,
    linear-gradient(var(--faint), var(--faint)) left top / 1.5px 16px no-repeat,
    linear-gradient(var(--faint), var(--faint)) right top / 16px 1.5px no-repeat,
    linear-gradient(var(--faint), var(--faint)) right top / 1.5px 16px no-repeat,
    linear-gradient(var(--faint), var(--faint)) left bottom / 16px 1.5px no-repeat,
    linear-gradient(var(--faint), var(--faint)) left bottom / 1.5px 16px no-repeat,
    linear-gradient(var(--faint), var(--faint)) right bottom / 16px 1.5px no-repeat,
    linear-gradient(var(--faint), var(--faint)) right bottom / 1.5px 16px no-repeat,
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--bg2) 85%, transparent), transparent 75%);
}
.plate .art { aspect-ratio: 1; display: grid; place-items: center; }
.plate .art svg { width: 100%; height: 100%; }
.plate figcaption { margin-top: 10px; font: italic 14px/1.4 var(--serif); color: var(--dim); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.plate figcaption i { color: var(--faint); }
.plate figcaption .mono { font-style: normal; font-size: 12px; color: var(--honey); margin-left: auto; }
.hero .plate.hero-plate { border: 0; background-color: transparent; }
.hero .art { border: 0; background: none; padding: 0; }
.tile .plate { padding: 12px 12px 6px; }
.tile .plate figcaption { font-size: 12px; }
.plate.big { padding: 22px 22px 14px; }
.case .art { background: color-mix(in srgb, var(--bg2) 80%, transparent); border-radius: 4px; }

/* The hive button: the bee in its cell, with one orbiting dot per worker. */
.go { position: relative; min-width: 220px; padding: 22px 28px 18px; border-radius: 28px; background: color-mix(in srgb, var(--card) 85%, transparent); }
.orbit { position: relative; width: 84px; height: 84px; display: grid; place-items: center; color: var(--honey); }
.go.on .orbit { color: #1a1206; }
.bee-mark { width: 46px; height: 46px; }
.orbit i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: currentColor; opacity: .75;
  transform: rotate(calc(var(--k) * 360deg / var(--n))) translateY(-40px); }
.go.on .orbit { animation: orbit 9s linear infinite; }
.go.on .orbit .bee-mark { animation: counter 9s linear infinite, hover 1.6s ease-in-out infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes counter { to { transform: rotate(-360deg); } }
@keyframes hover { 50% { translate: 0 -2px; } }
@media (prefers-reduced-motion: reduce) { .go.on .orbit, .go.on .orbit .bee-mark { animation: none; } }
.preset .pi, .src .pi { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); color: var(--honey); }
.preset .pi .ic { width: 22px; height: 22px; }
.preset.sel .pi { background: var(--honey); color: #1a1206; border-color: var(--honey); }
.mode .ic, .hint .ic { color: var(--honey); }
.slotcard .ic { color: var(--honey); margin-right: 4px; }
.feed .ic { color: var(--honey); }

/* Calmer chrome */
.panel, .tile, .case, .preset { background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(2px); }
.stats div { background: color-mix(in srgb, var(--bg2) 90%, transparent); }
.stats b { font-weight: 400; font-size: 34px; }
.section-head h2 { font-weight: 400; }

/* ===== The living hive (home) ===== */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
body.is-home .top { background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 80%, transparent), transparent); border-bottom-color: transparent; backdrop-filter: none; }
body.is-home main { padding-top: 0; }
.hero2 { position: relative; min-height: min(100svh, 980px); margin-top: -64px; overflow: hidden; display: flex; align-items: center; isolation: isolate; }
.hero2 canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero2-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 30%, color-mix(in srgb, var(--bg) 35%, transparent) 62%, transparent 85%),
    linear-gradient(to top, var(--bg) 0%, transparent 28%),
    radial-gradient(800px 500px at 80% 50%, transparent, color-mix(in srgb, var(--bg) 40%, transparent)); }
.hero2-in { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 120px 16px 80px; pointer-events: none; }
.hero2-in a, .hero2-in button { pointer-events: auto; }
.display { font-size: clamp(56px, 10.5vw, 148px); line-height: .9; letter-spacing: -0.035em; word-spacing: .06em; font-weight: 400; margin: 0 0 28px; }
.display em { font-weight: 400; }
.hero2 .lead { font-size: clamp(17px, 1.6vw, 21px); color: color-mix(in srgb, var(--ink) 78%, transparent); max-width: 32em; text-shadow: 0 1px 12px var(--bg); }
.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5fd17a; margin-right: 6px; box-shadow: 0 0 0 0 #5fd17a99; animation: pulse 2s infinite; vertical-align: 1px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px #5fd17a00; } 100% { box-shadow: 0 0 0 0 #5fd17a00; } }
.btn.big { padding: 15px 24px; font-size: 16px; }
.btn.ghost { background: transparent; border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.btn.primary { box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--honey) 70%, transparent); }
.btn.primary:hover { transform: translateY(-1px); }
.btn { transition: transform .15s, border-color .15s, background .15s; }
.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; margin: 46px 0 0; }
.hero-stats dt { color: var(--faint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.hero-stats dd { margin: 4px 0 0; font: 400 34px var(--serif); color: var(--ink); }
.hero-hint { position: absolute; right: 24px; bottom: 22px; color: var(--faint); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
@media (hover: none) { .hero-hint { display: none; } }

.ticker { border-block: 1px solid var(--line); overflow: hidden; background: color-mix(in srgb, var(--bg2) 70%, transparent); }
.ticker-track { display: inline-flex; align-items: center; gap: 22px; padding: 13px 0; white-space: nowrap; animation: tick 60s linear infinite; font-size: 14px; color: var(--dim); }
.ticker-track b { color: var(--ink); font-weight: 500; }
.ticker-track .mono { color: var(--honey); }
.ticker .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--honey); opacity: .6; flex: none; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

.sec { padding: clamp(70px, 10vw, 140px) 0 0; }
.secno { color: var(--honey); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.secno::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.h2big { font-size: clamp(36px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.035em; font-weight: 400; max-width: 16em; margin-bottom: 48px; }
.h3big { font-size: clamp(30px, 3.6vw, 48px); font-weight: 400; letter-spacing: -0.03em; margin-bottom: 14px; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.steps3 > div { background: color-mix(in srgb, var(--bg2) 92%, transparent); padding: 34px 30px 30px; position: relative; }
.steps3 .num { position: absolute; right: 24px; top: 18px; font: 400 64px var(--serif); color: color-mix(in srgb, var(--ink) 8%, transparent); letter-spacing: -0.04em; }
.steps3 .ic { width: 30px; height: 30px; color: var(--honey); margin-bottom: 22px; }
.steps3 h3 { font-size: 24px; font-weight: 400; }
.steps3 p { color: var(--dim); margin: 0; }
@media (max-width: 860px) { .steps3 { grid-template-columns: 1fr; } }

.hunt { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; padding: 30px 0 60px; }
.hunt.flip .hunt-art { order: 2; }
.hunt-art { display: block; color: var(--ink); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.hunt-art:hover { transform: scale(1.015); text-decoration: none; }
.hunt-n { color: var(--faint); font-size: 12px; letter-spacing: .12em; }
.hunt .lead { color: var(--dim); font-size: 18px; max-width: 28em; }
.facts-inline { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; padding: 0; margin: 18px 0 8px; }
.facts-inline li { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--dim); }
@media (max-width: 860px) { .hunt { grid-template-columns: 1fr; } .hunt.flip .hunt-art { order: 0; } }

.hive-promo { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
@media (max-width: 860px) { .hive-promo { grid-template-columns: 1fr; } }
.ticks { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 16px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; color: var(--dim); font-size: 17px; }
.ticks li b { color: var(--ink); font-weight: 500; }
.ticks .ic { width: 22px; height: 22px; color: var(--honey); margin-top: 2px; }
.phone { justify-self: center; width: min(320px, 82vw); aspect-ratio: 9 / 19; border-radius: 46px; padding: 12px; background: linear-gradient(145deg, #2a261e, #0d0c0a); box-shadow: 0 40px 120px -30px color-mix(in srgb, var(--honey) 35%, transparent), inset 0 0 0 1px #3a3428; transform: rotate(-4deg); }
.phone-screen { height: 100%; border-radius: 36px; background: radial-gradient(400px 300px at 50% 20%, #221d14, #0b0a08); padding: 30px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; color: #f4efe6; }
.ph-k { font-size: 10px; letter-spacing: .2em; color: #8b857a; text-align: center; margin: 0; }
.ph-go { display: grid; justify-items: center; gap: 2px; padding: 18px; border-radius: 24px; background: #f2b33d; color: #1a1206; }
.ph-go b { font: 400 22px var(--serif); }
.ph-go small { font-size: 11px; opacity: .7; }
.orbit.spin { animation: orbit 9s linear infinite; color: #1a1206; }
.orbit.spin .bee-mark { animation: counter 9s linear infinite; }
.ph-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ph-presets span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; border: 1px solid #2c2820; color: #f2b33d; }
.ph-presets span.sel { background: #f2b33d; color: #1a1206; }
.ph-line { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 2px; border-bottom: 1px solid #221f18; }
.ph-line i { width: 26px; height: 15px; border-radius: 999px; background: #2c2820; position: relative; }
.ph-line i::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; left: 2px; top: 2px; background: #a39d91; }
.ph-line i.on { background: #f2b33d; }
.ph-line i.on::after { left: 13px; background: #1a1206; }
.ph-line em { margin-left: auto; color: #8b857a; font-style: normal; font-size: 12px; }
.ph-rec { margin-top: auto; font-size: 11px; color: #f2b33d; border: 1px solid #3d2f12; border-radius: 12px; padding: 10px; text-align: center; }

.board .rank { color: var(--faint); margin-right: 8px; font-size: 12px; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.strip-card { scroll-snap-align: start; border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: color-mix(in srgb, var(--card) 85%, transparent); }
.strip-card .mono { color: var(--honey); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.strip-card h3 { font-weight: 400; font-size: 22px; }
.strip-card p:last-child { color: var(--dim); font-size: 14px; margin: 0; }

.outro { text-align: center; padding: clamp(90px, 14vw, 180px) 16px clamp(60px, 8vw, 100px); margin-top: 80px; border-top: 1px solid var(--line); background: radial-gradient(900px 400px at 50% 100%, color-mix(in srgb, var(--honey) 12%, transparent), transparent 70%); }
.wordmark { font: 400 clamp(64px, 17vw, 260px)/0.85 var(--serif); letter-spacing: -0.06em; margin: 0 0 24px; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--honey) 70%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--honey) 30%, transparent), transparent 80%); -webkit-background-clip: text; background-clip: text; }
.outro .lead { color: var(--dim); font-size: 19px; max-width: 30em; margin: 0 auto 26px; }

body.is-home.scrolled .top { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom-color: var(--line); }

@media (max-width: 700px) {
  .hero2-shade { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 45%, var(--bg) 100%); }
  .hero2-in { padding-top: 110px; }
  .hero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 18px; }
  .hero-stats dd { font-size: 26px; }
  .hero-stats dt { font-size: 9px; }
}

/* ===== Story sections ===== */
.dimlead { color: var(--dim); font-size: 19px; max-width: 34em; margin-top: -24px; margin-bottom: 36px; }
.gets { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .gets { grid-template-columns: 1fr; } }
.fan { position: relative; height: 430px; }
.fan a { position: absolute; left: 50%; top: 10px; width: 230px; margin-left: -115px; transform-origin: 50% 120%; transform: rotate(calc((var(--i) - 2) * 9deg)) translateX(calc((var(--i) - 2) * 26px)); transition: transform .4s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 20px 40px rgba(0,0,0,.55)); }
.fan a:hover { transform: rotate(calc((var(--i) - 2) * 9deg)) translateX(calc((var(--i) - 2) * 26px)) translateY(-26px); z-index: 5; }
.fan img { width: 100%; display: block; border-radius: 14px; }
.rarity { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.rarity.big { justify-content: flex-start; margin: 10px 0 26px; }
.rar { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.rar.none { opacity: .45; }
.get-list { display: grid; gap: 22px; }
.get-list h3 { font-weight: 400; font-size: 24px; display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.get-list h3 .ic { color: var(--honey); width: 22px; height: 22px; }
.get-list p { color: var(--dim); margin: 0; }

.proof { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.proof div { padding: 26px 22px 6px 0; border-right: 1px solid var(--line); margin-right: 22px; }
.proof div:last-child { border-right: 0; }
.proof b { display: block; font: 400 clamp(46px, 6vw, 84px)/1 var(--serif); letter-spacing: -0.04em; color: var(--honey); }
.proof span { color: var(--dim); font-size: 14px; display: block; margin-top: 10px; max-width: 16em; }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr 1fr; } .proof div:nth-child(2) { border-right: 0; } }

.ladder { list-style: none; padding: 0; margin: 0 0 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
.ladder li { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: color-mix(in srgb, var(--card) 85%, transparent); position: relative; }
.ladder li:nth-child(1) { min-height: 200px; }
.ladder li:nth-child(2) { min-height: 250px; }
.ladder li:nth-child(3) { min-height: 300px; }
.ladder li:nth-child(4) { min-height: 350px; }
.ladder li .mono { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ladder li h3 { font-weight: 400; font-size: 23px; margin: 10px 0 8px; }
.ladder li p { color: var(--dim); font-size: 14px; margin: 0; }
.ladder li.now { border-color: var(--honey); box-shadow: 0 0 0 1px var(--honey), 0 30px 80px -40px var(--honey); }
.ladder li.now .mono { color: var(--honey); }
.ladder li.now::after { content: "You are here"; position: absolute; top: -12px; right: 16px; background: var(--honey); color: #1a1206; font: 600 11px var(--sans); padding: 4px 10px; border-radius: 999px; }
@media (max-width: 860px) { .ladder { grid-template-columns: 1fr; } .ladder li { min-height: 0 !important; } }

.opendata { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (max-width: 900px) { .opendata { grid-template-columns: 1fr; } }
.datapeek { background: #0a0907; border: 1px solid var(--line); border-radius: 16px; padding: 22px; font-size: 13px; line-height: 1.6; color: #e6d9bd; overflow: auto; box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--honey) 50%, transparent); }
.datapeek .dim { color: var(--faint); }

.why { border-top: 1px solid var(--line); padding-top: 10px; }
.why-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.why-cols p { color: var(--dim); font-size: 17px; margin: 0; }
.why-cols b { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .why-cols { grid-template-columns: 1fr; } }

.feed a.who { color: var(--ink); font-weight: 600; }
.hunter-head { display: flex; gap: 24px; align-items: center; margin: 10px 0 8px; }
.avatar-hex { width: 96px; height: 110px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, var(--honey), #8a5a00); display: grid; place-items: center; flex: none; }
.avatar-hex span { font: 400 34px var(--serif); color: #1a1206; }
.hunter-stats { color: var(--dim); }
.hunter-stats b { color: var(--honey); font-weight: 500; }

/* ===== Join ===== */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .paths { grid-template-columns: 1fr; } }
.path { position: relative; border: 1px solid var(--line); border-radius: 22px; padding: 28px 24px; background: color-mix(in srgb, var(--card) 88%, transparent); }
.path.featured { border-color: var(--honey); box-shadow: 0 30px 90px -50px var(--honey); }
.path h2 { font-weight: 400; font-size: 27px; margin: 16px 0 8px; }
.path > p { color: var(--dim); }
.path .pnum { position: absolute; right: 22px; top: 18px; font-size: 13px; color: var(--faint); }
.path .pi { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line); color: var(--honey); }
.path .pi .ic { width: 24px; height: 24px; }
.path details { margin-top: 10px; color: var(--dim); }
.path details summary { cursor: pointer; color: var(--honey); }
.invite { margin-top: 40px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 22px; padding: 30px; background: radial-gradient(600px 200px at 0% 0%, color-mix(in srgb, var(--honey) 10%, transparent), transparent), color-mix(in srgb, var(--card) 85%, transparent); }

.gets, .fan { min-width: 0; }
.fan { overflow: hidden; }
@media (max-width: 700px) {
  .fan { height: 320px; }
  .fan a { width: 170px; margin-left: -85px; transform: rotate(calc((var(--i) - 2) * 7deg)) translateX(calc((var(--i) - 2) * 16px)); }
  .fan a:hover { transform: rotate(calc((var(--i) - 2) * 7deg)) translateX(calc((var(--i) - 2) * 16px)) translateY(-16px); }
  .datapeek { white-space: pre-wrap; word-break: break-all; }
}

.connect { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.connect h4 { font: 400 20px var(--serif); margin: 0 0 6px; }
.connect h4 small { font: 12px var(--sans); color: var(--faint); margin-left: 6px; }
.addrow.hero-row b { display: flex; gap: 8px; align-items: center; }
.addrow.hero-row b .ic { color: var(--honey); }
.addrow .ok { color: var(--ok); }
.addrow .dimmed { color: var(--faint); }
.chatapps { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }

/* ===== Stats ===== */
.statblock { margin-top: 18px; padding: 26px; }
.statblock h3 { font-weight: 400; font-size: 20px; }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 860px) { .statgrid { grid-template-columns: 1fr; } }
.hbars { display: grid; gap: 10px; margin-top: 10px; }
.hbar { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr 56px; grid-template-areas: "l t v" "s s s"; gap: 2px 12px; align-items: center; padding: 4px 6px; border-radius: 8px; }
.hbar:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.hbar .hl { grid-area: l; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .ht { grid-area: t; height: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 4px; overflow: hidden; }
.hbar .ht i { display: block; height: 100%; background: var(--honey); border-radius: 0 4px 4px 0; }
.hbar .hv { grid-area: v; text-align: right; font-size: 13px; color: var(--ink); }
.hbar .hs { grid-area: s; font-size: 12px; color: var(--faint); }
.tl { width: 100%; height: auto; margin-top: 8px; }
.tl .axis { stroke: var(--line); }
.tl .line { fill: none; stroke: var(--honey); stroke-width: 2; stroke-linejoin: round; }
.tl .area { fill: color-mix(in srgb, var(--honey) 12%, transparent); }
.tl .dot { fill: var(--honey); stroke: var(--bg); stroke-width: 2; pointer-events: none; }
.tl .hit { fill: transparent; cursor: default; }
.tl .pt:hover .dot { r: 6; }
.tl .tlv { fill: var(--ink); font: 400 22px var(--serif); }
.ladder.loop li { min-height: 0 !important; }

.proof b.txt { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15; overflow-wrap: anywhere; }

/* ===== Hunts hub ===== */
.filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 6px 0 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--dim); padding: 6px 12px; border-radius: 999px; font: 500 13px var(--sans); cursor: pointer; }
.chip.on { background: var(--honey); color: #1a1206; border-color: var(--honey); }
.sortby { color: var(--dim); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.sortby select { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.hcard { position: relative; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: color-mix(in srgb, var(--card) 90%, transparent); display: flex; flex-direction: column; transition: transform .25s, border-color .25s; }
.hcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--honey) 60%, var(--line)); }
.hcard.flag { border-color: color-mix(in srgb, var(--honey) 55%, var(--line)); box-shadow: 0 30px 80px -50px var(--honey); }
.hcard.later { opacity: .82; }
.flagtag { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--honey); color: #1a1206; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; }
.hthumb { display: block; height: 190px; background: radial-gradient(circle at 50% 40%, var(--bg2), var(--bg)); color: var(--ink); border-bottom: 1px solid var(--line); }
.hthumb .art { height: 100%; aspect-ratio: auto; display: grid; place-items: center; }
.hthumb .art svg { height: 100%; width: auto; }
.hthumb.ghost { display: grid; place-items: center; background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--ink) 4%, transparent) 14px 15px), radial-gradient(circle at 50% 40%, var(--bg2), var(--bg)); }
.hthumb.ghost span { font: italic 400 26px var(--serif); color: var(--faint); }
.hbody { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hbody h3 { font-weight: 400; font-size: 23px; margin: 2px 0 0; }
.hbody h3 a { color: var(--ink); }
.hbody p { color: var(--dim); font-size: 14px; margin: 0; }
.hbody .ver { color: var(--faint); font-size: 12.5px; }
.hbody .btn { align-self: flex-start; margin-top: auto; }
.hmeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hmeta .dom { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-left: auto; }
.hstats { display: flex; gap: 18px; font-size: 12px; color: var(--faint); }
.stars { color: var(--honey); letter-spacing: 1px; font-weight: 400; }
.stars.imp { color: var(--ok); }
.stars .off { color: color-mix(in srgb, var(--ink) 15%, transparent); }
.rar-tag { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.r-rare { color: #7fb2ff; background: color-mix(in srgb, #7fb2ff 14%, transparent); }
.r-epic { color: #c49bff; background: color-mix(in srgb, #c49bff 16%, transparent); }
.r-legendary { color: #1a1206; background: linear-gradient(90deg, #ffd36b, #ff9f43, #ffd36b); background-size: 200% 100%; animation: shine 4s linear infinite; }
@keyframes shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .r-legendary { animation: none; } }

/* ===== Medals ===== */
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.medal { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 14px 10px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--ink); transition: transform .2s; }
.medal:hover { transform: translateY(-3px); }
.medal b { font: 400 16px var(--serif); }
.medal small { color: var(--faint); font-size: 11.5px; line-height: 1.35; }
.medal.locked { color: var(--faint); }
.medal.locked b { color: var(--faint); }
.medal.has.r-legendary { border-color: #d48a12; box-shadow: 0 20px 60px -30px #ffb43b; }
.medal.has.r-epic { border-color: color-mix(in srgb, #7a45d6 60%, var(--line)); }
.medal.has.r-rare { border-color: color-mix(in srgb, #3d6fd1 50%, var(--line)); }
.medals.hall { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.medal .who a { color: var(--honey); }

/* ===== Players ===== */
.psearch input { width: 100%; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 14px 20px; font: 16px var(--sans); }
.psearch input:focus { outline: 2px solid var(--honey); outline-offset: 1px; }
.plist { display: grid; gap: 8px; margin-top: 10px; }
.pcard { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink); transition: border-color .2s, transform .2s; }
.pcard:hover { border-color: var(--honey); transform: translateX(2px); text-decoration: none; }
.pcard.me { border-color: color-mix(in srgb, var(--honey) 60%, var(--line)); }
.phex { width: 42px; height: 48px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, var(--honey), #8a5a00); display: grid; place-items: center; }
.phex span { font: 400 16px var(--serif); color: #1a1206; }
.pinfo { display: grid; min-width: 0; }
.pinfo b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinfo small { color: var(--faint); font-size: 12px; }
.pval { text-align: right; font-size: 20px; color: var(--honey); display: grid; }
.pval i { font-style: normal; color: var(--faint); font-size: 11px; }
.pval small { color: var(--faint); font: 11px var(--sans); }
.featcap { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px; font-size: 13px; }

/* ===== Learn more sheet ===== */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, #000 60%, transparent); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: relative; width: min(680px, 100%); max-height: 88vh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px 28px 24px; box-shadow: 0 40px 120px -40px var(--honey); }
.sheet h3 { font-weight: 400; font-size: 18px; color: var(--honey); margin: 18px 0 4px; }
.sheet p, .sheet li { color: var(--dim); }
.sheet .fun { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--honey) 10%, transparent); color: var(--ink); }
.sheet .fun .ic { color: var(--honey); }
.sheet-x { position: absolute; top: 14px; right: 14px; background: transparent; border: 1px solid var(--line); color: var(--dim); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; }

/* ===== Control room ===== */
.control { margin: 22px 0 8px; border: 1px solid var(--line); border-radius: 22px; padding: 18px; background: radial-gradient(800px 240px at 0% 0%, color-mix(in srgb, var(--honey) 9%, transparent), transparent), color-mix(in srgb, var(--card) 90%, transparent); }
.cbar { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 12px; align-items: center; margin-bottom: 14px; }
@media (max-width: 760px) { .cbar { grid-template-columns: 1fr 1fr; } .clevel { grid-column: 1 / -1; } }
.clevel { display: grid; gap: 4px; }
.lvl { color: var(--honey); font-size: 13px; letter-spacing: .1em; }
.xp { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--honey), #ffd36b); border-radius: 999px; transition: width .6s; }
.clevel small, .cstat small { color: var(--faint); font-size: 12px; }
.cstat { display: grid; }
.cstat b { font: 400 26px var(--serif); }
.cstat .ic { color: var(--honey); width: 14px; height: 14px; }
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.agent { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: var(--bg2); display: grid; gap: 8px; position: relative; overflow: hidden; }
.agent.ph-searching { border-color: color-mix(in srgb, var(--honey) 45%, var(--line)); }
.agent.ph-writing { border-color: color-mix(in srgb, #9a73f0 50%, var(--line)); }
.agent.idle { opacity: .6; }
.ahead { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.aav { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 600 13px var(--mono); color: #1a1206; background: var(--honey); }
.aav .bee-mark { width: 26px; height: 26px; color: var(--faint); }
.agent.idle .aav { background: transparent; border: 1px dashed var(--line); }
.aav.k-free { background: #7fd18b; } .aav.k-local { background: #7fd1c4; } .aav.k-sub { background: #c49bff; } .aav.k-paid { background: #ff9f7a; } .aav.k-cpu { background: var(--honey); }
.aname { display: grid; min-width: 0; }
.aname b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.kind.k-free { color: #7fd18b; } .kind.k-local { color: #7fd1c4; } .kind.k-sub { color: #c49bff; } .kind.k-paid { color: #ff9f7a; } .kind.k-cpu { color: var(--honey); }
.aphase .ic { color: var(--honey); }
.ph-searching .aphase .ic { animation: pulseic 1.4s ease-in-out infinite; }
@keyframes pulseic { 50% { opacity: .35; } }
.atask { font-size: 13px; color: var(--dim); }
.ascore { font: 13px var(--mono); color: var(--dim); }
.ascore b { color: var(--ink); }
.ascore .up, .ascore .up b { color: var(--ok); }
.ascore .aw { color: #c49bff; font-family: var(--sans); font-style: italic; }
.agent .bar { margin-top: 0; }
.bar.ind i { width: 40%; animation: ind 1.4s ease-in-out infinite; transform: none; }
@keyframes ind { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.arem { color: var(--faint); font: 11px var(--mono); }
@media (prefers-reduced-motion: reduce) { .ph-searching .aphase .ic, .bar.ind i { animation: none; } }

.lvtag { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; border: 1px solid currentColor; }
.lv-warm { color: #7fd18b; }
.lv-classic { color: var(--honey); }
.lv-hard { color: #ff7b6b; background: color-mix(in srgb, #ff7b6b 12%, transparent); }

/* ===== Join ===== */
.landing { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; padding: 30px 0; }
@media (max-width: 900px) { .landing { grid-template-columns: 1fr; } }
.epic { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 14px 0 0; padding: 12px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--honey) 55%, var(--line)); background: color-mix(in srgb, var(--honey) 9%, transparent); }
.epic .mono { font-size: 10.5px; letter-spacing: .14em; color: var(--honey); }
.epic b { font: 400 22px var(--serif); }
.epic small { color: var(--faint); }

/* ===== Mission tracker ===== */
.tracker { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.tracker li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; opacity: .55; transition: all .3s; }
.tracker li span { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font: 600 13px var(--sans); }
.tracker li small { color: var(--dim); }
.tracker li.on { opacity: 1; border-color: var(--honey); box-shadow: 0 10px 40px -25px var(--honey); }
.tracker li.on span { background: var(--honey); color: #1a1206; border-color: var(--honey); animation: buzz 1.6s ease-in-out infinite; }
.tracker li.done { opacity: .85; }
.tracker li.done span { background: var(--ok); color: #0c1a0f; border-color: var(--ok); }

/* ===== Live ===== */
.livestrip { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 10px max(16px, calc(50vw - 600px)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg2) 60%, transparent); scrollbar-width: none; }
.livestrip.inline { padding: 8px 0; border: 0; background: none; flex-wrap: wrap; }
.lhead { font-size: 11px; letter-spacing: .12em; color: var(--ok); white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.lhead a { color: var(--honey); }
.pdot { width: 8px; height: 8px; border-radius: 50%; background: #5fd17a; display: inline-block; animation: pulse 2s infinite; flex: none; }
.pdot.off { background: var(--faint); animation: none; }
.lchip { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; padding: 6px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, #5fd17a 40%, var(--line)); background: color-mix(in srgb, var(--card) 90%, transparent); color: var(--ink); font-size: 13px; }
.lchip:hover { text-decoration: none; border-color: #5fd17a; }
.lchip span { color: var(--dim); }
.lchip .up { color: var(--ok); }
.lchip .kind { margin-left: 2px; }
.livecase:not(:empty) { margin: 12px 0; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, #5fd17a 45%, var(--line)); display: grid; gap: 8px; }
.livecase h3 { font-weight: 400; font-size: 17px; margin: 0; color: var(--ok); display: flex; gap: 8px; align-items: center; }
.case.hunted { border-color: #5fd17a; box-shadow: 0 0 0 1px #5fd17a, 0 10px 40px -20px #5fd17a; position: relative; }
.case.hunted::after { content: attr(data-hunted); position: absolute; top: 8px; right: 8px; background: #5fd17a; color: #0c1a0f; font: 600 10px var(--mono); padding: 3px 7px; border-radius: 6px; letter-spacing: .06em; }
.phex.online { box-shadow: 0 0 0 3px #5fd17a; }

.todo { margin: 14px 0 0; padding: 14px 16px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--honey) 60%, var(--line)); }
.todo .mono { font-size: 10.5px; letter-spacing: .14em; color: var(--honey); }
.todo ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 760px) { .todo ol { grid-template-columns: 1fr 1fr; } }
.todo li { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--bg2); opacity: .6; }
.todo li small { color: var(--faint); font-size: 12px; }
.todo li.ok { opacity: .8; } .todo li.ok b { color: var(--ok); }
.todo li.now { opacity: 1; outline: 2px solid var(--honey); }

/* ===== Mobile tab bar ===== */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; color: var(--faint); font: 500 10.5px var(--sans); padding: 4px 0; text-decoration: none; }
  .tabbar a svg { width: 24px; height: 24px; }
  .tabbar a.on { color: var(--honey); }
  body { padding-bottom: 70px; }
  header.top nav { display: none; }
}

/* ===== War room: the pixel planet of a hunt ===== */
.war { --px: 'Silkscreen', ui-monospace, monospace; border: 2px solid #232a55; border-radius: 22px; padding: 16px; margin: 6px 0 24px;
  background: radial-gradient(ellipse at 85% 100%, rgba(80, 30, 150, .35), transparent 55%), radial-gradient(ellipse at 0% 0%, rgba(20, 50, 120, .35), transparent 50%), #070815; color: #e8ecff; }
.warhead { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pxkick { font: 400 11px var(--px); letter-spacing: .14em; color: #8fb6ff; margin: 0; }
.pxtitle { font: 700 clamp(22px, 4vw, 38px)/1.05 var(--px); margin: 2px 0 0; text-transform: uppercase; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff3b0 0%, #ffc531 45%, #ff7a1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 2px 0 #3a1500) drop-shadow(-1px -1px 0 #3a1500) drop-shadow(0 3px 0 #1a0800); }
.warbar { display: grid; grid-template-columns: auto auto; gap: 2px 10px; align-items: center; font-family: var(--px); }
.warbar small { font-size: 10px; color: #8fb6ff; letter-spacing: .1em; }
.warbar b { font-size: 22px; color: #ffd34d; text-align: right; }
.pxbar { grid-column: 1 / -1; display: block; height: 10px; width: 200px; background: #1a1f3f; border: 2px solid #2d3566; image-rendering: pixelated; }
.pxbar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #ffd34d 0 6px, #f2a51d 6px 8px); }
.waract { display: flex; gap: 8px; flex-wrap: wrap; }
.wargrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.war.mission .wargrid, .war.hive .wargrid { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 860px) { .wargrid, .war.mission .wargrid, .war.hive .wargrid { grid-template-columns: 1fr; } }
.warplanet { position: relative; }
canvas.planet { display: block; width: 100%; max-width: min(100%, 72vh); aspect-ratio: 1; margin: 0 auto; image-rendering: pixelated; border-radius: 14px; touch-action: manipulation; }
.ptip { position: absolute; z-index: 3; width: 180px; padding: 8px 10px; background: #0d1030; border: 2px solid #3a4590; color: #e8ecff; font-size: 12px; line-height: 1.35; pointer-events: none; box-shadow: 4px 4px 0 #000; }
.ptip .hot { color: #ff9a3c; }
.warside { display: grid; gap: 10px; }
.wbox { background: #0d1030; border: 2px solid #232a55; padding: 10px 12px; box-shadow: 3px 3px 0 #02030a; }
.wbox.you { border-color: #8a6a1c; background: linear-gradient(180deg, #1d1708, #0d1030); }
.wbox h4 { font: 400 11px var(--px); letter-spacing: .12em; text-transform: uppercase; color: #8fb6ff; margin: 0 0 8px; }
.wbox.you h4 { color: #ffd34d; }
.wrow { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 0; border-top: 1px dashed #262d5c; color: #e8ecff; font-size: 13px; }
.wrow:first-child { border-top: 0; }
.wrow:hover { text-decoration: none; }
.wrow b { font: 700 13px var(--px); }
.wrow .wm { color: #9aa3d6; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow .ws { font: 400 12px var(--px); color: #cfd6ff; text-align: right; }
.wrow .ws.up { color: #6dff8c; }
.wrow small { grid-column: 1 / -1; color: #8890c0; font-size: 11px; }
.wrow.fr i { width: 12px; height: 12px; display: inline-block; box-shadow: 1px 1px 0 #000; }
.wstats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #9aa3d6; margin-top: 6px; }
.wstats b { font: 700 16px var(--px); color: #fff; margin-right: 3px; }
.wempty { color: #9aa3d6; font-size: 13px; margin: 0; }
.wempty a, .wbox a:not(.wrow):not(.lordpx) { color: #ffd34d; }
.lordpx { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 4px 0; color: #e8ecff; font-size: 13px; }
.lordpx:hover { text-decoration: none; }
.lordpx i { width: 12px; height: 12px; box-shadow: 1px 1px 0 #000; }
.lordpx b { font: 400 12px var(--px); }
.lordpx span { font: 700 12px var(--px); color: #ffd34d; }
.warlegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 12px; color: #9aa3d6; }
.warlegend span { display: inline-flex; align-items: center; gap: 6px; }
.warlegend i { width: 12px; height: 12px; display: inline-block; }
.warlegend i.ring { border: 2px solid #fff; }
.warlegend i.beam { width: 18px; height: 4px; background: repeating-linear-gradient(90deg, #ffd34d 0 4px, transparent 4px 8px); }
.two > * { min-width: 0; }
.two .row input, .two .row select { max-width: 100%; }
.two .row { flex-wrap: wrap; }

/* ===== Join and invite ===== */
.joinbox { display: grid; gap: 8px; max-width: 420px; margin: 8px 0 14px; }
.joinbox label { font-weight: 600; }
.joinbox label small { display: block; font-weight: 400; color: var(--dim); }
.joinbox input { font-size: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); }
.joinbox input:focus { outline: 2px solid var(--honey); }
.sheet.invite { width: min(520px, 100%); }
.invlink { display: flex; gap: 8px; }
.invlink input { flex: 1; min-width: 0; font: 13px var(--mono); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); }
.invapps { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.invapp { display: grid; place-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font: inherit; cursor: pointer; }
.invapp:hover { text-decoration: none; border-color: var(--honey); }
.invapp.wa b { color: #4fd17a; } .invapp.tg b { color: #5ab4ff; } .invapp.sms b { color: #ffd34d; }
.invqr { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: #fff; color: #111; }
.invqr [data-w="qr"] { width: 128px; height: 128px; flex: none; }
.invqr [data-w="qr"] svg { width: 100%; height: 100%; display: block; }
.invqr p { margin: 0; color: #222; }

/* ===== Your hive, on every page ===== */
.hivepill { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 5px 11px; border-radius: 999px; font: 600 12px var(--mono); color: #0c1a0f; background: #5fd17a; white-space: nowrap; }
.hivepill:hover { text-decoration: none; filter: brightness(1.1); }
.hivepill[hidden] { display: none; }
.hivepill .pdot { background: #0c1a0f; }

/* Agent cards keep one size, whatever they show */
.agent { grid-template-rows: auto auto 1.4em auto auto; min-height: 170px; align-content: start; }
.ascore, .arem, .atask { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arem { min-height: 1.3em; }

/* ===== Loot: notifications and the record screen ===== */
.lootstack { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 760px) { .lootstack { bottom: 84px; } }
.lootpop { pointer-events: auto; cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #0d1030; color: #e8ecff; border: 2px solid #2d3566; box-shadow: 4px 4px 0 #000; font-size: 13px; animation: lootin .35s cubic-bezier(.2, 1.6, .4, 1); }
.lootpop > div, .lootpop > span { display: grid; gap: 2px; }
.lootpop span { color: #cfd6ff; }
.lootpop small { color: #8890c0; font-size: 11px; }
.lootpop .lk { font: 700 12px 'Silkscreen', monospace; letter-spacing: .06em; }
.lootpop.ok { border-color: #3d9a5a; } .lootpop.ok .lk { color: #6dff8c; }
.lootpop.gold { border-color: #c9952b; background: linear-gradient(180deg, #2a1f08, #0d1030); } .lootpop.gold .lk { color: #ffd34d; }
.lootpop.quiet { opacity: .85; } .lootpop.quiet .lk { color: #8fb6ff; }
.lootpop .lart { width: 54px; height: 54px; flex: none; background: #fff; border-radius: 6px; overflow: hidden; }
.lootpop .lart svg { width: 100%; height: 100%; display: block; }
.lootpop.out { opacity: 0; transform: translateX(30px); transition: .35s; }
@keyframes lootin { from { transform: translateY(20px) scale(.9); opacity: 0; } }
.lootwrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, rgba(255, 200, 60, .25), rgba(0, 0, 0, .8) 60%); animation: fade .25s; }
.lootbox { width: min(440px, 100%); text-align: center; padding: 22px 20px; background: #0d1030; color: #e8ecff; border: 3px solid #ffc531; box-shadow: 6px 6px 0 #000, 0 0 80px rgba(255, 197, 49, .45); animation: lootin .5s cubic-bezier(.2, 1.6, .4, 1); }
.lootkick { font: 700 13px 'Silkscreen', monospace; letter-spacing: .2em; color: #8fb6ff; margin: 0; }
.loottitle { font: 700 26px/1.1 'Silkscreen', monospace; margin: 6px 0 12px; background: linear-gradient(180deg, #fff3b0, #ffc531 45%, #ff7a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #3a1500); }
.lootart { width: 220px; height: 220px; margin: 0 auto 10px; background: #fff; border-radius: 10px; overflow: hidden; animation: lootspin 1s cubic-bezier(.2, 1.4, .4, 1); }
.lootart svg { width: 100%; height: 100%; display: block; }
@keyframes lootspin { from { transform: rotate(-12deg) scale(.6); opacity: 0; } }
.lootscore { font: 700 28px 'Silkscreen', monospace; color: #fff; margin: 4px 0; }
.lootscore small { font-size: 13px; color: #8890c0; }
.lootgains { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0; }
.lootgains span { padding: 5px 10px; border: 2px solid #2d3566; background: #141a45; font: 400 12px 'Silkscreen', monospace; color: #ffd34d; }
.lootwhy { color: #cfd6ff; font-size: 14px; }
.wbox.impact { border-color: #3d6a9a; }
.wbox.impact h4 { color: #6dc8ff; }
.wprog { display: grid; gap: 4px; margin-top: 8px; }
.wprog small { color: #9aa3d6; font-size: 11px; }
.wprog .pxbar { width: 100%; }
.wwhere { margin: 8px 0 0; font-size: 12px; color: #9aa3d6; line-height: 1.4; }
.wwhere b { color: #cfd6ff; }

/* ===== Money safety ===== */
.moneywarn { margin: 10px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, #ff9f7a 50%, var(--line)); background: color-mix(in srgb, #ff9f7a 8%, transparent); color: var(--ink); font-size: 13px; }
.apimode summary { color: var(--dim); }
.apimode.on summary { color: #ff9f7a; font-weight: 600; }
.apimode .risks { display: grid; gap: 8px; padding-left: 18px; color: var(--dim); font-size: 13px; }
.apimode .risks label { display: flex; gap: 8px; align-items: flex-start; }
.paidtag { font: 600 10px var(--mono); color: #ff9f7a; border: 1px solid #ff9f7a; border-radius: 4px; padding: 1px 4px; margin-left: 4px; }

.wonline { margin-top: 8px; }
.wrow.on .pdot { width: 8px; height: 8px; }
.wrow.on a { color: inherit; }
.wrow.on .ws a { color: #8fb6ff; }
.linkbtn { background: none; border: 0; padding: 0; color: #ffd34d; font: inherit; cursor: pointer; text-decoration: underline; }

/* ===== Where the hive hunts ===== */
.huntmode { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.huntmode > label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--dim); cursor: pointer; }
.huntmode > label b { color: var(--ink); }
.huntmode input[type="radio"] { margin-top: 4px; accent-color: var(--honey); }
.shares { display: grid; gap: 6px; margin: 4px 0 0 24px; }
.share { display: grid; grid-template-columns: minmax(0, 1fr) 140px 44px; gap: 10px; align-items: center; font-size: 13px; }
.share input { accent-color: var(--honey); width: 100%; }
.share output { font: 600 13px var(--mono); color: var(--honey); text-align: right; }
@media (max-width: 520px) { .share { grid-template-columns: 1fr 100px 40px; } }

.jpc { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, #5fd17a 50%, var(--line)); background: color-mix(in srgb, #5fd17a 8%, transparent); }
.jpc small { color: var(--dim); }