/* Tin Hat landing page — hero/intro stage + feature sections. Stage internals are in DESIGN px (1280x800 canvas,
 * scaled by intro.js). The Tin Hat replica's colours are the app's own theme roles (resolved with the app's engine). */

/* ================= HERO ================= */
.hero { position: relative; min-height: 100svh; margin-top: calc(-1 * var(--nav-h)); overflow: clip; isolation: isolate; }
@supports not (overflow: clip) { .hero { overflow: hidden; } }
.hero-sky {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 38%, rgba(60, 186, 208, .13), transparent 70%),
    radial-gradient(40% 40% at 85% 10%, rgba(169, 139, 255, .08), transparent 70%),
    linear-gradient(to bottom, #020304, #020304 70%, var(--bg));
  transition: background .8s;
}
.hero-sky::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 75%);
}
.hero.villain .hero-sky { background: radial-gradient(60% 60% at 50% 60%, rgba(120, 30, 90, .22), transparent 70%), radial-gradient(50% 40% at 50% 10%, rgba(88, 101, 242, .18), transparent 70%), #030205; }

.hero-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform-origin: 50% 0; }
.stage { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; }
.stage > * { position: absolute; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; mix-blend-mode: screen; }

.hero-inner { position: relative; z-index: 2; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: 40px; padding-top: calc(var(--nav-h) + 30px); padding-bottom: 60px; }
.hero-copy { max-width: 580px; opacity: 0; transform: translateY(18px); }
.fx-back { position: absolute; }
.no-js .hero-copy, .hero-copy.show { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.hero h1 { font-size: clamp(44px, 5.2vw, 80px); font-stretch: 116%; font-weight: 850; letter-spacing: -.035em; line-height: 1; margin: 22px 0 22px; }
.hero-sub { font-size: clamp(17.5px, 1.4vw, 20px); color: var(--tx-2); max-width: 32em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 18px; }
.hero-fine { color: var(--tx-3); font-size: 14.5px; }
.hero-slot { align-self: stretch; min-height: 420px; }
.intro-ctl { position: absolute; z-index: 3; right: var(--gutter); bottom: 26px; display: flex; gap: 8px; }
.intro-skip { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.intro-skip kbd { font-size: 11px; height: 20px; min-width: 0; border-bottom-width: 2px; margin-left: 2px; }
.intro-replay svg { width: 16px; height: 16px; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; z-index: 3; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .28); opacity: 0; transition: opacity .6s; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--teal); animation: cue 1.8s ease-in-out infinite; }
.scroll-cue.show { opacity: .8; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80%, 100% { transform: translateY(14px); opacity: 0; } }

@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; align-items: start; gap: 0; padding-top: calc(var(--nav-h) + 26px); }
  .hero-copy { max-width: 640px; }
  .hero-slot { min-height: 0; height: min(62vw, 520px); margin-top: 28px; }
  .intro-ctl { bottom: 16px; }
  .scroll-cue { display: none; }
}
@media (max-width: 560px) { .hero-ctas .btn { width: 100%; } .hero h1 { margin-top: 18px; } }

/* ================= INTRO: the other app ================= */
.fk {
  left: 170px; top: 160px; width: 940px; height: 580px; border-radius: 10px; overflow: hidden;
  background: #313338; color: #dbdee1; font: 400 14px/1.375 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
}
.fk-title { height: 26px; background: #1e1f22; display: flex; align-items: center; padding: 0 10px; font-size: 12px; color: #949ba4; font-weight: 600; }
.fk-dotrow { display: none; }
.fk-tname { letter-spacing: .02em; }
.fk-wb { margin-left: auto; color: #b5bac1; font-size: 11px; }
.fk-body { display: flex; height: calc(100% - 26px); }
.fk-rail { width: 66px; background: #1e1f22; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 10px; }
.fk-home { width: 46px; height: 46px; border-radius: 15px; background: #5865f2; color: #fff; display: grid; place-items: center; }
.fk-home svg { width: 24px; height: 24px; }
.fk-sep { width: 30px; height: 2px; background: #35363c; border-radius: 1px; }
.fk-srv { width: 46px; height: 46px; border-radius: 50%; background: #313338; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #dbdee1; position: relative; }
.fk-srv.on { border-radius: 15px; background: #2f7a55; }
.fk-srv.on::before { content: ""; position: absolute; left: -10px; width: 4px; height: 38px; background: #fff; border-radius: 0 4px 4px 0; }
.fk-srv.s2 { background: #7b3fb1; } .fk-srv.s3 { background: #9b6a1c; } .fk-srv.s4 { background: #3a5aa8; }
.fk-srv.add { color: #23a559; font-size: 24px; font-weight: 400; }
.fk-side { width: 228px; background: #2b2d31; display: flex; flex-direction: column; position: relative; }
.fk-sname { height: 48px; display: flex; align-items: center; padding: 0 16px; font-weight: 700; color: #f2f3f5; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.fk-sname span { margin-left: auto; }
.fk-boostbar { margin: 10px 8px 4px; padding: 7px 10px; border-radius: 6px; background: linear-gradient(90deg, #ff73fa33, #5865f233); color: #f0b3ff; font-size: 12.5px; font-weight: 600; }
.fk-boostbar em { float: right; font-style: normal; }
.fk-cat { margin: 16px 8px 2px 14px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #949ba4; }
.fk-ch { margin: 1px 8px; padding: 6px 8px; border-radius: 5px; color: #949ba4; font-weight: 500; }
.fk-ch b { font-weight: 400; margin-right: 6px; opacity: .8; }
.fk-ch.on { background: #404249; color: #fff; }
.fk-vc { margin: 2px 8px 2px 34px; display: flex; align-items: center; gap: 8px; color: #949ba4; font-size: 13px; }
.fk-vc .fk-av { width: 22px; height: 22px; font-size: 11px; }
.fk-user { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: #232428; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.fk-user span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; color: #f2f3f5; font-size: 13.5px; }
.fk-user small { font-size: 11.5px; color: #949ba4; font-weight: 400; }
.fk-user em { margin-left: auto; font-style: normal; color: #b5bac1; font-size: 13px; letter-spacing: 3px; }
.fk-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #fff; flex: none; font-size: 15px; }
.fk-user .fk-av { width: 32px; height: 32px; font-size: 13px; }
.a0 { background: #3cbad0; } .a1 { background: #e0663a; } .a2 { background: #d3499b; } .a3 { background: #4f8f3a; } .a4 { background: #8a63d2; }
.fk-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fk-chead { height: 48px; display: flex; align-items: center; padding: 0 16px; font-weight: 700; color: #f2f3f5; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.fk-chead b { color: #80848e; font-weight: 400; font-size: 22px; margin-right: 8px; }
.fk-cicons { margin-left: auto; color: #b5bac1; font-weight: 400; letter-spacing: 8px; font-size: 15px; display: flex; align-items: center; }
.fk-cicons i { font-style: normal; letter-spacing: 0; font-size: 12.5px; background: #1e1f22; color: #949ba4; padding: 4px 40px 4px 8px; border-radius: 4px; margin-left: 6px; }
.fk-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 12px; }
.fk-msg { display: flex; gap: 14px; padding: 6px 16px 6px 16px; }
.fk-msg b { font-weight: 600; } .fk-msg small { font-size: 11.5px; color: #949ba4; margin-left: 8px; }
.fk-msg p { margin: 1px 0 0; color: #dbdee1; }
.n1 { color: #f47b67; } .n2 { color: #f47fff; } .n3 { color: #7cd97c; }
.fk-comp { margin: 0 16px 22px; height: 44px; border-radius: 8px; background: #383a40; display: flex; align-items: center; gap: 12px; padding: 0 14px; color: #b5bac1; }
.fk-comp.focus { box-shadow: 0 0 0 2px rgba(88, 101, 242, .55); }
.fk-plus { width: 24px; height: 24px; border-radius: 50%; background: #b5bac1; color: #383a40; display: grid; place-items: center; font-weight: 800; flex: none; }
.fk-input { flex: 1; color: #dbdee1; white-space: nowrap; overflow: hidden; position: relative; display: flex; align-items: center; }
.fk-ph { color: #6d6f78; }
.fk-caret { display: inline-block; width: 1.5px; height: 18px; background: #dbdee1; margin-left: 1px; opacity: 0; }
.fk-cico { color: #b5bac1; font-weight: 800; font-size: 12.5px; letter-spacing: .04em; display: flex; gap: 12px; align-items: center; }
.fk-cico .gift { font-style: normal; filter: saturate(1.4); }

.fk-modal {
  left: 430px; top: 250px; width: 420px; padding: 0 0 18px; border-radius: 12px; overflow: hidden; background: #313338; color: #dbdee1;
  font: 400 14px/1.45 "Segoe UI", "Helvetica Neue", Arial, sans-serif; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); opacity: 0;
}
.fk-mhero { height: 92px; background: linear-gradient(120deg, #8e3ff5, #d24fd0 55%, #ff7bbf); display: grid; place-items: center; margin-bottom: 14px; }
.fk-mhero span { font-size: 44px; color: #fff; text-shadow: 0 0 24px rgba(255, 255, 255, .8); }
.fk-mhero.age { background: linear-gradient(120deg, #3a3f9e, #5865f2 60%, #8792ff); }
.fk-modal h4 { font-size: 20px; font-weight: 800; color: #f2f3f5; margin: 0 20px 6px; }
.fk-modal p { margin: 0 26px 16px; color: #b5bac1; }
.fk-modal p b { color: #f2f3f5; }
.fk-mbtns { display: flex; gap: 10px; justify-content: center; }
.fk-b { padding: 9px 16px; border-radius: 4px; font-weight: 600; font-size: 14px; }
.fk-b.ghost { color: #dbdee1; }
.fk-b.prem { color: #fff; background: linear-gradient(90deg, #8e3ff5, #d24fd0); box-shadow: 0 4px 18px rgba(210, 79, 208, .45); }
.ad-age { left: 450px; top: 300px; width: 380px; z-index: 3; }

.ad {
  padding: 10px 14px; border-radius: 10px; font: 400 13px/1.35 "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: #fff; opacity: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
}
.ad span { display: inline-block; margin-top: 6px; padding: 5px 10px; border-radius: 5px; background: #fff; color: #111; font-weight: 700; font-size: 12px; }
.ad p { margin: 2px 0 0; }
.ad-boost { left: 400px; top: 222px; width: 700px; border-radius: 0; padding: 9px 14px; background: linear-gradient(90deg, #ff73fa, #8e5cff); font-weight: 500; box-shadow: none; }
.ad-boost span { margin: 0 0 0 10px; float: right; padding: 3px 12px; }
.ad-quest { left: 860px; top: 575px; width: 240px; background: linear-gradient(140deg, #1d2b6b, #3b2a8f); border: 1px solid #6b7cff; }
.ad-quest b { color: #ffd84d; font-size: 11px; letter-spacing: .16em; }
.ad-shop { left: 190px; top: 380px; width: 230px; background: linear-gradient(140deg, #ff5a8a, #ff9d4d); }
.ad-shop em { display: block; font-style: normal; font-size: 11.5px; opacity: .9; margin-top: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ad-super { left: 560px; top: 470px; background: #111214; border: 1px solid #f0b232; color: #f7d27c; }
.ad-spons { left: 240px; top: 590px; width: 200px; background: #232428; border: 1px solid #3a3c42; }
.ad-spons small { display: block; color: #949ba4; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.ad-spons span { background: #23a559; color: #fff; }
.ad-trial { left: 830px; top: 272px; background: #f0b232; color: #1b1300; font-weight: 600; }

.cursor { left: 0; top: 0; width: 26px; height: 26px; z-index: 8; opacity: 0; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); transform-origin: 3px 2px; }
.cursor svg { width: 26px; height: 26px; }

.evil { left: 260px; top: -60px; width: 760px; height: 608px; opacity: 0; }
.evil-svg { width: 100%; height: 100%; overflow: visible; }
.evil-glow { position: absolute; left: 50%; top: 45%; width: 1100px; height: 900px; margin: -450px 0 0 -550px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 30, 80, .42), rgba(120, 40, 255, .2) 55%, transparent); opacity: .8; }
.shards { left: 0; top: 0; width: 1280px; height: 800px; pointer-events: none; }
.shards > * { position: absolute; }

.hat { left: 440px; top: 180px; width: 400px; height: 400px; opacity: 0; z-index: 7; }
.hat-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .65)) drop-shadow(0 0 30px rgba(120, 220, 240, .35)); }
.hat-halo { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(111, 220, 236, .45), rgba(60, 186, 208, .12) 55%, transparent 75%); opacity: 0; }

/* ================= INTRO: the Tin Hat replica ================= */
.th {
  --w: #000; --i: #0a0a0a; --r: #1a1a1a; --a: #1e6a76; --ab: #3cbad0; --t: #e0e0e0; --t2: #aaa; --bd: #222; --sp: #3ad07a;
  --wn: #e0a020; --in: #4da3ff; --dg: #c74848; --n1: #e09085; --n2: #e0ba85; --n3: #85e0c5; --sel: rgba(30, 106, 118, .22);
  --gap: 0px; --rad: 0px;
  left: 80px; top: 50px; width: 1120px; height: 700px; border-radius: 12px; overflow: hidden; opacity: 0;
  background: var(--w); color: var(--t); border: 1px solid color-mix(in srgb, var(--t) 14%, transparent);
  font: 400 12.5px/1.4 "Mona Sans", "Segoe UI", system-ui, sans-serif; font-stretch: 100%;
  box-shadow: 0 50px 140px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .7), 0 0 120px -40px color-mix(in srgb, var(--ab) 60%, transparent);
}
.th[data-theme="goose"] { --w: #1a0a1a; --i: #2a1030; --r: #351540; --a: #b0508c; --ab: #e87cc0; --t: #f0e0f0; --t2: #c8a0c8; --bd: #4a2050; --sp: #58c88a; --wn: #dfa44c; --in: #8fa6ff; --n1: #e09085; --n2: #e0ba85; --n3: #85e0c5; --sel: rgba(176, 80, 140, .22); }
.th[data-theme="mocha"] { --w: #11111c; --i: #1e1e2e; --r: #28293a; --a: #89b4fa; --ab: #aeccfc; --t: #cdd6f4; --t2: #979db7; --bd: #313244; --sp: #a6e3a1; --wn: #f9e2af; --in: #94e2d5; --n1: #f38ba8; --n2: #f5c2e7; --n3: #aeccfc; --sel: rgba(137, 180, 250, .18); }
.th[data-theme="dracula"] { --w: #181921; --i: #282a36; --r: #343642; --a: #bd93f9; --ab: #d6acff; --t: #f8f8f2; --t2: #b8b9b9; --bd: #3f414c; --sp: #50fa7b; --wn: #f1fa8c; --in: #8be9fd; --n1: #ff5555; --n2: #ff79c6; --n3: #d6acff; --sel: rgba(189, 147, 249, .2); }
.th[data-theme="gruvbox"] { --w: #181818; --i: #282828; --r: #343331; --a: #4d8a8c; --ab: #83a598; --t: #ebdbb2; --t2: #afa488; --bd: #3e3c38; --sp: #98971a; --wn: #d79921; --in: #689d6a; --n1: #d95547; --n2: #b5688b; --n3: #83a598; --sel: rgba(77, 138, 140, .22); }
.th[data-theme="latte"] { --w: #e4e6ec; --i: #eff1f5; --r: #f9f9fb; --a: #b26e60; --ab: #835045; --t: #4c4f69; --t2: #606274; --bd: #d8dae2; --sp: #399126; --wn: #b37115; --in: #168d94; --n1: #d20f39; --n2: #bc5ea3; --n3: #3878f6; --sel: rgba(178, 110, 96, .16); }
.th[data-theme="tokyo"] { --w: #0e0f16; --i: #1a1b26; --r: #242532; --a: #7aa2f7; --ab: #7aa2f7; --t: #c0caf5; --t2: #8d94b5; --bd: #2c2e3d; --sp: #9ece6a; --wn: #e0af68; --in: #7dcfff; --n1: #f7768e; --n2: #bb9af7; --n3: #7aa2f7; --sel: rgba(122, 162, 247, .18); }
.th[data-theme="rosepine"] { --w: #0d0c15; --i: #191724; --r: #242230; --a: #9ccfd8; --ab: #9ccfd8; --t: #e0def4; --t2: #a2a0b4; --bd: #2f2d3b; --sp: #397993; --wn: #f6c177; --in: #ebbcba; --n1: #eb6f92; --n2: #c4a7e7; --n3: #9ccfd8; --sel: rgba(156, 207, 216, .16); }

.th-tb { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12px; color: var(--t2); background: var(--w); }
.th-tb img { width: 18px; height: 18px; }
.th-tb em { margin-left: auto; font-style: normal; font-size: 11px; opacity: .8; }
.th-body { display: grid; grid-template-columns: 62px 264px 1fr; height: calc(100% - 32px); gap: var(--gap); padding: 0 var(--gap) var(--gap); }
.th-pane { background: var(--i); border-radius: var(--rad); min-width: 0; min-height: 0; position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bd) calc(var(--isl, 0) * 100%), transparent); }
.th-rail { background: var(--w); border-color: transparent; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; }
.th.islands .th-rail { background: var(--i); }
.th-ri { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--r); color: var(--t); position: relative; font-style: normal; }
.th-ri svg { width: 20px; height: 20px; }
.th-ri.on { background: color-mix(in srgb, var(--a) 40%, var(--r)); box-shadow: 0 0 0 2px var(--ab); color: #fff; }
.th-ri b { position: absolute; right: -2px; bottom: -2px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--a); color: #fff; font-size: 10px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--w); }
.th-rsep { width: 30px; height: 1px; background: var(--bd); }
.th-rav { width: 40px; height: 40px; }
.th-rsp { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; color: #fff; background: #3a4a8a; }
.th-rsp.on { background: linear-gradient(135deg, var(--ab), var(--a)); box-shadow: 0 0 0 2px var(--w), 0 0 0 4px var(--ab); }
.th-rsp.s2 { background: #8a3e5c; } .th-rsp.s3 { background: #4c6b33; }
.th-radd { margin-top: auto; width: 42px; height: 42px; border-radius: 50%; border: 1px dashed var(--t2); color: var(--t2); display: grid; place-items: center; font-style: normal; font-size: 20px; }

.th-col { display: flex; flex-direction: column; padding: 0 8px 8px; background: var(--i); }
.th-colhead { height: 46px; display: flex; align-items: center; padding: 0 6px; font-size: 15px; }
.th-colhead b { font-weight: 700; }
.th-colhead span { margin-left: auto; color: var(--t2); font-size: 18px; }
.th-filter { height: 32px; border-radius: 8px; border: 1px solid var(--bd); background: var(--w); color: var(--t2); display: flex; align-items: center; gap: 8px; padding: 0 10px; margin-bottom: 8px; }
.th-filter svg { width: 14px; height: 14px; }
.th-room { height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 9px; border-radius: 8px; color: var(--t2); font-size: 13.5px; position: relative; }
.th-room.on { background: var(--sel); color: var(--t); }
.th-hash { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; background: var(--r); color: var(--t2); font-weight: 700; font-size: 12px; }
.th-room.on .th-hash { background: var(--a); color: #fff; }
.th-badge { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--a); color: #fff; font-size: 10.5px; display: grid; place-items: center; }
.th-badge.men { background: var(--dg); }
.th-incall { margin-left: auto; display: flex; }
.th-incall .av { width: 18px; height: 18px; margin-left: -5px; box-shadow: 0 0 0 2px var(--i); }
.th-widgets { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.th-w { border-radius: 12px; background: color-mix(in srgb, var(--r) 70%, var(--i)); border: 1px solid var(--bd); padding: 10px 11px; opacity: 0; }
.th-wh { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; margin-bottom: 8px; }
.th-wh svg { width: 14px; height: 14px; color: var(--ab); }
.th-up { display: flex; gap: 10px; align-items: flex-start; }
.th-up b { display: block; font-size: 13px; }
.th-up small { color: var(--t2); font-size: 11px; }
.th-date { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ab); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-weight: 800; font-size: 14px; flex: none; }
.th-date small { font-size: 8px; color: var(--t2); }
.th-avs { display: flex; align-items: center; margin-top: 5px; }
.th-avs .av { width: 18px; height: 18px; margin-right: -4px; box-shadow: 0 0 0 2px var(--r); }
.th-avs em { font-style: normal; margin-left: 9px; font-size: 10.5px; color: var(--t2); }
.th-cover { margin-left: auto; width: 34px; height: 51px; border-radius: 5px; flex: none; position: relative; overflow: hidden;
  background: #1b2430 url(games/valheim.webp) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.th-cover.sm { width: 42px; height: 63px; margin: 0; }
.th-rsvp { display: flex; gap: 6px; margin-top: 9px; }
.th-rsvp span { flex: 1; text-align: center; padding: 4px 0; border-radius: 6px; background: var(--r); color: var(--t2); font-size: 11px; border: 1px solid var(--bd); }
.th-rsvp span.on { background: color-mix(in srgb, var(--sp) 25%, var(--r)); color: var(--t); border-color: color-mix(in srgb, var(--sp) 60%, transparent); }
.th-who { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.th-who .av { width: 26px; height: 26px; }
.th-who b { display: block; font-size: 12px; line-height: 1.2; }
.th-who small { color: var(--t2); font-size: 10.5px; }
.th-who small.c { color: var(--sp); }
.th-srv { display: flex; align-items: center; gap: 9px; }
.th-srv b { display: block; font-size: 12.5px; }
.th-srv small { color: var(--t2); font-size: 10.5px; }
.th-srv span { margin-left: auto; font-size: 10.5px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--bd); color: var(--t2); }
.th-led { width: 9px; height: 9px; border-radius: 50%; background: var(--sp); box-shadow: 0 0 10px var(--sp); flex: none; }
.th-acct { margin-top: auto; height: 48px; border-radius: 12px; background: var(--r); border: 1px solid var(--bd); display: flex; align-items: center; gap: 9px; padding: 0 10px; opacity: 0; }
.th-acct .av { width: 30px; height: 30px; }
.th-acct b { font-size: 13px; }
.th-acct span { margin-left: auto; display: flex; gap: 12px; color: var(--t2); }
.th-acct svg { width: 18px; height: 18px; }

.th-main { display: flex; flex-direction: column; background: var(--i); }
.th-head { height: 54px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--bd); }
.th-hav { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--a); color: #fff; font-style: normal; font-weight: 800; }
.th-head b { font-size: 14.5px; display: block; line-height: 1.2; }
.th-head small { color: var(--t2); font-size: 11px; }
.th-hicons { margin-left: auto; display: flex; gap: 16px; color: var(--t2); }
.th-hicons svg { width: 19px; height: 19px; }
.th-call { flex: none; height: 330px; padding: 10px 12px 8px; display: grid; grid-template-columns: 1fr 150px; grid-template-rows: 1fr 44px; gap: 8px; border-bottom: 1px solid var(--bd); opacity: 0; }
.th-share { border-radius: 10px; overflow: hidden; position: relative; background: #0b0d18; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.th-tag { position: absolute; left: 8px; bottom: 8px; font-size: 10.5px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; display: flex; align-items: center; gap: 6px; }
.th-live { width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 8px #ff4d5e; }
.th-tiles { display: grid; grid-template-rows: repeat(4, 1fr); gap: 6px; }
.th-tile { border-radius: 10px; background: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; border: 2px solid transparent; }
.th-tile .av { width: 34px; height: 34px; }
.th-tile span { font-size: 10.5px; color: var(--t2); }
.th-tile.spk { border-color: var(--sp); box-shadow: 0 0 14px -2px var(--sp); }
.th-tile .gc { font-style: normal; color: var(--in); }
.th-cbar { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; align-items: center; }
.th-cbar i { width: 40px; height: 34px; border-radius: 17px; display: grid; place-items: center; background: var(--r); color: var(--t); }
.th-cbar i.mic { background: color-mix(in srgb, var(--sp) 30%, var(--r)); color: var(--sp); }
.th-cbar i.end { background: #d0404c; color: #fff; width: 50px; }
.th-cbar svg { width: 18px; height: 18px; }
.th-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 10px 16px; }
.th-msg { display: flex; gap: 10px; align-items: flex-start; }
.th-msg .av { width: 32px; height: 32px; flex: none; }
.th-msg .nm { display: block; font-size: 11.5px; margin-bottom: 2px; }
.th-msg .n1 { color: var(--n1); } .th-msg .n2 { color: var(--n2); } .th-msg .n3 { color: var(--n3); }
.th-msg p { margin: 0; display: inline-block; padding: 7px 11px; border-radius: 12px; border-top-left-radius: 4px; background: var(--r); font-size: 13px; }
.th-react { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px; font-size: 11px; background: var(--sel); border: 1px solid color-mix(in srgb, var(--ab) 50%, transparent); }
.th-reel { display: flex; gap: 10px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 12px; background: var(--r); border: 1px solid color-mix(in srgb, var(--wn) 40%, var(--bd)); }
.th-reel small { display: block; font-size: 9.5px; letter-spacing: .14em; color: var(--wn); font-weight: 700; }
.th-reel b { display: block; font-size: 15px; }
.th-reel span { font-size: 11px; color: var(--t2); }
.th-comp { margin: 0 12px 12px; height: 44px; flex: none; border-radius: 12px; background: var(--r); border: 1px solid color-mix(in srgb, var(--ab) 55%, var(--bd)); display: flex; align-items: center; gap: 12px; padding: 0 8px 0 12px; color: var(--t2); }
.th-plus { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--t2); font-size: 15px; }
.th-ph { flex: 1; }
.th-cicons { font-weight: 700; font-size: 11.5px; }
.th-send { padding: 6px 13px; border-radius: 9px; background: var(--a); color: #fff; font-weight: 600; font-size: 12px; }

/* Pixel's stream in the replica: a real Valheim screenshot (official Steam art, tools/shots/real-art.json) */
.th-game { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th-themechip { position: absolute; right: 16px; bottom: 16px; z-index: 5; padding: 7px 12px; border-radius: 9px; background: rgba(0, 0, 0, .72); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font: 700 12px/1 var(--mono); letter-spacing: .06em; opacity: 0; }

/* avatars: generated pixel sprites (intro.js); fallback = gradient disc */
.av { display: block; border-radius: 50%; overflow: hidden; position: relative; flex: none; font-style: normal; background: linear-gradient(135deg, #3cbad0, #1e6a76); }
.av svg { width: 100%; height: 100%; image-rendering: pixelated; }
.av u { position: absolute; right: -1px; bottom: -1px; width: 32%; height: 32%; border-radius: 50%; box-shadow: 0 0 0 2px var(--i, #000); display: none; }
.av u.on { display: block; background: var(--sp, #3ad07a); }
.av u.aw { display: block; background: var(--wn, #e0a020); }
.th-rav u { display: block; background: var(--sp); }
.th-rav:nth-of-type(odd) u { background: var(--wn); }
.th-acct .av, .th-who .av { overflow: visible; }
.th-acct .av svg, .th-who .av svg { border-radius: 50%; }

/* ================= ABOUT / STATEMENT ================= */
.about { padding-top: clamp(70px, 9vw, 130px); }
.statement { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.18; font-weight: 750; font-stretch: 110%; letter-spacing: -.022em; max-width: 22em; margin: 0 0 clamp(50px, 7vw, 90px); color: var(--tx); }
.statement em { font-style: normal; color: var(--teal-hi); }
.statement .w { color: rgba(232, 238, 241, .16); transition: color .5s; }
.statement .w.lit { color: var(--tx); }
.statement .w.hl.lit { color: var(--teal-hi); }
.no-js .statement .w, .reduce .statement .w { color: var(--tx); }


/* ================= FEATURE BLOCKS ================= */
.feat { overflow: clip; }
.feat::before { content: ""; position: absolute; inset: 10% -10% auto; height: 70%; pointer-events: none; z-index: -1;
  background: radial-gradient(45% 50% at 72% 50%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%); }
.feat.alt::before { background: radial-gradient(45% 50% at 28% 50%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%); }
.feat-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.feat.alt .feat-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feat.alt .feat-copy { order: 2; }
.feat .frame { --glow: color-mix(in srgb, var(--accent) 40%, transparent); }
@media (max-width: 960px) {
  .feat-grid, .feat.alt .feat-grid { grid-template-columns: 1fr; }
  .feat.alt .feat-copy { order: 0; }
}
.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.ticks li { position: relative; padding-left: 30px; color: var(--tx-2); font-size: 16px; line-height: 1.55; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.ticks li::after { content: ""; position: absolute; left: 5px; top: calc(.3em + 3px); width: 5px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.ticks b { color: var(--tx); font-weight: 650; }
.rec { display: inline-flex; align-items: center; gap: 5px; font: 700 .78em/1 var(--mono); color: #ff6b76; padding: 3px 6px; border: 1px solid rgba(255, 93, 108, .5); border-radius: 5px; }
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5d6c; box-shadow: 0 0 8px #ff5d6c; }
.muted-h { color: var(--tx-3); }
.native-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }

/* make it yours */
.themer { max-width: 1100px; margin: 0 auto; }
.themer-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.tchip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--tx-2); font: 600 14px/1 var(--font); cursor: pointer; transition: all .2s; }
.tchip i { width: 22px; height: 22px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.tchip:hover { color: var(--tx); border-color: var(--line-3); }
.tchip[aria-selected="true"] { color: #fff; border-color: var(--pink); background: rgba(232, 124, 192, .12); }
.themer-frame { transition: box-shadow .5s; }
.themer-frame img { transition: opacity .35s; }
.yours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
.yours-grid .h3 { margin-bottom: 10px; }
.yours-grid p { margin: 0; font-size: 15.5px; }
@media (max-width: 900px) { .yours-grid { grid-template-columns: 1fr; } }

/* widgets wall */
.wall { position: relative; overflow: hidden; padding: 10px 0 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wall-track { display: flex; gap: 18px; width: max-content; animation: wall 60s linear infinite; }
.wall:hover .wall-track { animation-play-state: paused; }
.wall-item { width: 300px; flex: none; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #050505; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); }
.wall-item img { width: 100%; height: auto; }
.wall-item figcaption { font: 600 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); padding: 10px 12px 12px; border-top: 1px solid var(--line); }
@keyframes wall { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
@media (prefers-reduced-motion: reduce) { .wall-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .wall { -webkit-mask-image: none; mask-image: none; } }
.wall-names { text-align: center; margin-top: 18px; }

/* private */
.lockcard { position: relative; border-radius: var(--r-l); border: 1px solid var(--line-2); background: linear-gradient(180deg, #07100b, #030605); padding: 12px 26px; overflow: hidden;
  box-shadow: 0 40px 100px -40px rgba(58, 208, 122, .35); }
.lock-row { display: flex; justify-content: space-between; gap: 16px; padding: 17px 0; border-bottom: 1px dashed rgba(255, 255, 255, .09); font-size: 16px; position: relative; z-index: 1; }
.lock-row:last-of-type { border-bottom: 0; }
.lk-k { color: var(--tx-2); }
.lk-v { font: 700 13.5px/1.5 var(--mono); color: #ff8791; text-transform: uppercase; letter-spacing: .06em; }
.lk-v.on { color: var(--green); }
.lock-hat { position: absolute; right: -40px; bottom: -50px; width: 240px; opacity: .08; z-index: 0; transform: rotate(-12deg); }

/* devices */
.devices { position: relative; padding-right: 12%; }
.dev-phone { position: absolute; right: 0; bottom: -8%; width: 29%; border-radius: 26px; border: 3px solid #1d2226; box-shadow: 0 30px 80px -10px rgba(0, 0, 0, .9); }
.dev-phone > img, .dev-phone > picture > img { border-radius: 22px; }
.dev-phone .shot-missing { aspect-ratio: 393 / 852; border-radius: 22px; }

/* crew: the tracker section */
.crew .lead { max-width: 34em; }

.crew-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.crew-fine { margin: 16px 0 0; max-width: 36em; }

/* the tracker card */
.tracker { border-radius: var(--r-l); border: 1px solid var(--line-2); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)); box-shadow: 0 40px 100px -40px rgba(232, 185, 35, .22); }
.tracker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 12px; border-bottom: 1px solid var(--line); }
.tracker-tabs { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.tracker-tabs button { height: 32px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--tx-2); font: 650 13.5px/1 var(--font); cursor: pointer; transition: background .2s, color .2s; }
.tracker-tabs button:hover { color: var(--tx); }
.tracker-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .09); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line-2); }
.tracker-live { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
.tracker-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(58, 208, 122, .6); animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(58, 208, 122, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(58, 208, 122, 0); } }
@media (prefers-reduced-motion: reduce) { .tracker-live i { animation: none; } }
.tracker-list { list-style: none; margin: 0; padding: 6px 0; min-height: 420px; }
.tracker-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 16px; }
.tracker-list li + li { border-top: 1px solid rgba(255, 255, 255, .045); }
.rp-badge { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.rp-badge svg { width: 17px; height: 17px; }
.rp-badge.bug { background: rgba(255, 93, 108, .1); color: #ff8b95; border: 1px solid rgba(255, 93, 108, .28); }
.rp-badge.feature { background: rgba(169, 139, 255, .1); color: #c5b3ff; border: 1px solid rgba(169, 139, 255, .3); }
.rp-badge.done { background: rgba(58, 208, 122, .1); color: #7fe3a8; border: 1px solid rgba(58, 208, 122, .3); }
.rp-t { min-width: 0; }
.rp-t a { display: block; color: var(--tx); font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-t a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.rp-t small { display: block; margin-top: 3px; color: var(--tx-3); font: 500 12px/1.4 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-ver { font: 700 11px/1 var(--mono); padding: 5px 7px; border-radius: 6px; color: #7fe3a8; background: rgba(58, 208, 122, .1); border: 1px solid rgba(58, 208, 122, .3); white-space: nowrap; }
.rp-empty { display: block !important; color: var(--tx-3); padding: 18px 16px !important; }
.tracker-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--tx-2); font-weight: 650; font-size: 14.5px; }
.tracker-foot:hover { color: var(--tx); background: rgba(255, 255, 255, .025); }
.tracker-foot span { color: var(--gold); font-size: 17px; }
@media (max-width: 560px) { .tracker-list li { grid-template-columns: 30px minmax(0, 1fr); } .tracker-list li > :last-child { grid-column: 2; justify-self: start; } .rp-badge { width: 30px; height: 30px; } .tracker-list { min-height: 0; } }

/* ================= DOWNLOAD ================= */
.get { background: radial-gradient(50% 40% at 50% 0%, rgba(60, 186, 208, .09), transparent 70%); }
.plats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plat { position: relative; border-radius: var(--r-l); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)); padding: 28px 26px 26px; display: flex; flex-direction: column; transition: border-color .3s, transform .3s var(--ease-out), box-shadow .3s; }
.plat:hover { border-color: var(--line-3); transform: translateY(-3px); }
.plat.mine { border-color: rgba(60, 186, 208, .55); box-shadow: 0 30px 80px -40px rgba(60, 186, 208, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
.plat.mine::after { content: "Your device"; position: absolute; top: -11px; left: 24px; font: 700 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #031418; background: var(--teal); padding: 5px 8px; border-radius: 6px; }
.plat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.plat-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(60, 186, 208, .1); color: var(--teal-hi); border: 1px solid rgba(60, 186, 208, .25); }
.plat-ico svg { width: 26px; height: 26px; }
.plat-ver { font-size: 12px; color: var(--tx-3); }
.plat h3 { margin-bottom: 10px; }
.plat-desc { font-size: 15.5px; margin: 0 0 22px; }
.plat-ctas { display: grid; gap: 8px; margin-top: auto; }
.plat-ctas .btn { width: 100%; }
.plat-fine { margin: 16px 0 0; font-size: 13.5px; }
.distro-pills { gap: 6px; }
@supports (grid-template-rows: subgrid) {
  /* every card shares the same five rows, so titles, text, buttons and notes line up across the three */
  .plats { grid-template-rows: repeat(5, auto); }
  .plat { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .plat-ctas { margin-top: 0; align-self: end; }
  .plat-fine { align-self: start; }
  @media (max-width: 960px) { .plats { grid-template-rows: none; } .plat { grid-row: auto; display: flex; } }
}
.distro-pills .chip { height: 24px; font-size: 11.5px; padding: 0 9px; }
.get-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.guest { display: flex; gap: 18px; align-items: flex-start; }
.guest p { margin: 8px 0 0; font-size: 15.5px; }
.gx-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--tx-2); }
.gx-ico svg { width: 22px; height: 22px; }
@media (max-width: 960px) { .plats, .get-extra { grid-template-columns: 1fr; } }

/* ================= WHAT'S NEW ================= */
.releases { list-style: none; margin: 0; padding: 0; position: relative; }
.releases::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(to bottom, var(--teal), rgba(60, 186, 208, .1)); }
.rel { position: relative; padding: 0 0 30px 40px; }
.rel::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--teal); }
.rel.latest::before { background: var(--teal); box-shadow: 0 0 0 5px rgba(60, 186, 208, .18), 0 0 20px var(--teal); }
.rel-v { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.rel-v b { font-size: 24px; font-weight: 800; font-stretch: 115%; letter-spacing: -.01em; }
.rel-v span { font: 600 12px/1 var(--mono); color: var(--tx-3); letter-spacing: .06em; }
.rel-v .chip-new { height: 22px; font-size: 10.5px; }
.rel p { color: var(--tx-2); margin: 0; max-width: 75ch; font-size: 16px; }
.rel.hidden { display: none; }
.rel-more { margin-left: 40px; }

/* game night: the RSVP card overlaps the reel */
.stack { position: relative; padding-bottom: 9%; }
.stack .over { position: absolute; left: -7%; bottom: -6%; width: 34%; border-radius: 14px; box-shadow: 0 30px 70px -10px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08); }
.stack .over > img { border-radius: 13px; }
.stack .over.wide { width: 44%; left: -9%; bottom: -10%; }
@media (max-width: 960px) { .stack .over { left: auto; right: -2%; width: 40%; } }
/* make-it-yours cards with a real screenshot on top */
.card-shot { margin: -8px -8px 18px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10.5; background: #000; border: 1px solid var(--line); }
.card-shot img, .card-shot .shot-missing { width: 100%; height: 100%; object-fit: cover; object-position: top center; aspect-ratio: auto; }

.no-js .hero-stage, .no-js .intro-ctl { display: none; }
.hero-noscript { margin-top: 20px; }
@media (max-width: 960px) { .plat.mine { order: -1; } }

/* compositor hints only while the intro plays (dropped afterwards so the settled hero renders crisp and cheap) */
.hero.intro-on .stage, .hero.intro-on .fk, .hero.intro-on .evil, .hero.intro-on .hat, .hero.intro-on .th, .hero.intro-on .ad,
.hero.intro-on .fk-modal, .hero.intro-on .shards > *, .hero.intro-on .th-w, .hero.intro-on .th-call, .hero.intro-on .th-acct { will-change: transform, opacity; }

/* ================= INTRO: edit mode ("make it yours" beat) ================= */
.th [data-isl] { position: relative; }
.th [data-isl]::after {
  content: ""; position: absolute; inset: 3px; z-index: 6; pointer-events: none; border-radius: max(8px, calc(var(--rad) - 3px));
  border: 1.5px dashed var(--ab); opacity: calc(var(--ed, 0) * .85);
}
.th [data-isl]::before {
  content: "\283F\00a0 " attr(data-isl); position: absolute; left: 9px; top: 9px; z-index: 7; padding: 5px 9px 5px 7px; border-radius: 8px;
  font: 700 10.5px/1 "Mona Sans", system-ui, sans-serif; letter-spacing: .01em; color: var(--t); white-space: nowrap;
  background: color-mix(in srgb, var(--w) 84%, transparent); border: 1px solid color-mix(in srgb, var(--ab) 70%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45); opacity: var(--ed, 0);
}
.th [data-isl=""]::before { display: none; }
.th .lift { z-index: 3; box-shadow: 0 30px 70px -14px rgba(0, 0, 0, .9), 0 0 0 1.5px var(--ab) !important; }
.th .th-call.lift, .th .th-chat.lift { background: var(--i); border-radius: 12px; }
.th .raise { z-index: 3; }
.th-edwrap { position: absolute; left: 0; right: 0; top: 4px; z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.th-edbar {
  position: relative; display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 4px 0 12px; border-radius: 11px; opacity: 0;
  background: color-mix(in srgb, var(--r) 94%, #000); border: 1px solid color-mix(in srgb, var(--t) 16%, transparent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .65); font: 600 11.5px/1 "Mona Sans", system-ui, sans-serif; color: var(--t); white-space: nowrap;
}
.eb-t { color: var(--t2); margin-right: 6px; } .eb-t b { color: var(--t); }
.eb-s { width: 1px; height: 18px; background: var(--bd); margin: 0 6px; }
.eb-i { width: 26px; height: 26px; display: grid; place-items: center; color: var(--t2); }
.eb-i svg { width: 15px; height: 15px; } .eb-i.dim { opacity: .45; }
.eb-b { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; color: var(--t); }
.eb-b svg { width: 14px; height: 14px; color: var(--t2); flex: none; }
.eb-b.on { background: color-mix(in srgb, var(--ab) 24%, transparent); }
.eb-done { display: inline-flex; align-items: center; height: 26px; padding: 0 14px; margin-left: 4px; border-radius: 8px; background: var(--a); color: #fff; font-weight: 700; }
.eb-done.press { filter: brightness(1.3); transform: scale(.94); }
.th-edmenu {
  position: absolute; left: -4px; top: calc(100% + 9px); width: 322px; padding: 6px; border-radius: 12px; opacity: 0; white-space: normal;
  background: color-mix(in srgb, var(--r) 96%, #000); border: 1px solid color-mix(in srgb, var(--t) 14%, transparent); box-shadow: 0 22px 50px rgba(0, 0, 0, .7);
}
.em-i { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 8px; }
.em-i b { display: block; font-size: 12px; } .em-i small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 500; line-height: 1.3; color: var(--t2); }
.em-i.hover { background: color-mix(in srgb, var(--ab) 18%, transparent); }
.em-ck { margin-left: auto; color: var(--ab); font-style: normal; font-weight: 800; font-size: 13px; opacity: 0; } .em-i.picked .em-ck { opacity: 1; }
.em-th { position: relative; flex: none; width: 46px; height: 30px; border-radius: 5px; border: 1px solid var(--bd); background: var(--w); display: block; }
.em-th::before, .em-th::after { content: ""; position: absolute; top: 3px; height: 22px; border-radius: 2px; background: color-mix(in srgb, var(--ab) 55%, var(--r)); }
.em-th::after { background: color-mix(in srgb, var(--t) 22%, var(--r)); }
.em-th.c1::before { left: 3px; width: 12px; } .em-th.c1::after { left: 18px; width: 24px; }
.em-th.c2::before { left: 3px; width: 8px; } .em-th.c2::after { left: 13px; width: 29px; }
.em-th.c3::before { left: 3px; width: 26px; } .em-th.c3::after { left: 32px; width: 10px; }
.em-th.c4::before { left: 3px; width: 39px; height: 6px; } .em-th.c4::after { left: 3px; top: 12px; width: 39px; height: 13px; }
.em-th.c5::before { left: 3px; width: 15px; } .em-th.c5::after { left: 21px; width: 21px; }
.th-kbd { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px 6px 7px; border-radius: 9px; opacity: 0;
  background: color-mix(in srgb, var(--w) 86%, transparent); border: 1px solid color-mix(in srgb, var(--ab) 60%, transparent);
  font: 700 11px/1 "Mona Sans", system-ui, sans-serif; color: var(--t); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.th-kbd kbd { font-size: 10px; height: 20px; min-width: 0; padding: 0 6px; border-bottom-width: 2px; }
.th-kbd span { margin-left: 3px; color: var(--t2); }
.th-dz { position: absolute; z-index: 2; display: grid; place-items: center; opacity: 0; pointer-events: none; border-radius: 12px;
  border: 2px dashed var(--ab); background: color-mix(in srgb, var(--ab) 12%, transparent); }
.th-dz span { font: 700 12px/1 "Mona Sans", system-ui, sans-serif; color: var(--ab); letter-spacing: .02em; padding: 7px 11px; border-radius: 8px; background: color-mix(in srgb, var(--w) 72%, transparent); }
.cursor2 { z-index: 9; }
.hero.intro-on .th-edbar, .hero.intro-on .cursor2, .hero.intro-on .th-col, .hero.intro-on .th-main, .hero.intro-on .th-chat { will-change: transform, opacity; }
@media (max-width: 560px) {
  .crew-ctas { display: grid; } .crew-ctas .btn { width: 100%; }
  .tracker-list li:nth-child(n+6) { display: none; }
}

/* intro controls on phones and tablets (the hero is taller than the screen there, so its bottom edge is off screen):
   Skip floats at the bottom of the screen while the intro plays; Replay sits under the buttons afterwards. */
.skip-ico { display: none; }
.replay-inline { display: none; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 0; border: 0; background: none; color: var(--teal); font: 650 15px/1 var(--font); cursor: pointer; }
.replay-inline svg { width: 17px; height: 17px; }
.replay-inline:hover { color: var(--teal-hi); }
@media (max-width: 1099px) {
  .intro-replay { display: none !important; }
  .replay-inline:not([hidden]) { display: inline-flex; }
  .hero.intro-on .intro-ctl { position: fixed; left: 50%; right: auto; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; }
  .intro-skip { height: 42px; padding: 0 18px; border-radius: 999px; background: rgba(0, 0, 0, .72); border-color: var(--line-3); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
  .intro-skip kbd { display: none; }
  .intro-skip .skip-ico { display: block; width: 14px; height: 14px; }
}

/* 10 · for the nerds (teaser) */
.nerdy-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.nerdy-stats > div { background: var(--bg); padding: 26px 24px; }
.nerdy-stats b { display: block; font-size: clamp(36px, 4vw, 54px); font-weight: 850; font-stretch: 122%; letter-spacing: -.03em; line-height: 1; margin-bottom: 10px;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.nerdy-stats > div:last-child b { background: none; -webkit-text-fill-color: var(--green); color: var(--green); }
.nerdy-stats span { color: var(--tx-2); font-size: 15px; font-family: var(--mono); }