:root {
  color-scheme: dark;
  --bg: #09090b;
  --panel: #111216;
  --panel-2: #17181e;
  --ink: #f5f2e9;
  --muted: #9998a3;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --orange: #ff9737;
  --red: #ffae3d;
  --violet: #9567ff;
  --cyan: #55e6e0;
  --lime: #bbff58;
  --radius: 20px;
  --shell: min(1440px, calc(100% - 48px));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

/* transitions-dev — shared motion tokens. */
:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --text-swap-dur: 200ms;
  --text-swap-translate-y: 8px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-out;
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; background: var(--bg); color: var(--ink); }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; background: var(--ink); color: var(--bg); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(9, 9, 11, 0.86); backdrop-filter: blur(18px); }
.nav-shell { width: var(--shell); min-height: 78px; margin: 0 auto; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 760; letter-spacing: -0.03em; }
.brand img, .brand svg { display: block; flex: 0 0 auto; }
.kogni-eye-logo .kogni-logo-eye { will-change: transform; }
.brand-name { font-size: 20px; }
.brand-product { margin-left: 3px; padding-left: 13px; border-left: 1px solid var(--line-strong); color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 30px; color: #b9b7c0; font-size: 13px; }
.nav-links a, .nav-cta { transition: color 160ms ease, border-color 160ms ease, background 160ms ease; }
.nav-links a:hover, .nav-links a:focus-visible { color: #fff; }
.nav-cta { padding: 12px 17px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; font-weight: 700; }
.nav-cta:hover, .nav-cta:focus-visible { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.hero { position: relative; overflow: hidden; width: var(--shell); min-height: 780px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(430px, 0.75fr); gap: clamp(48px, 8vw, 130px); align-items: center; padding: 72px 0 82px; }
.hero::before { content: ""; position: absolute; top: 7%; left: 37%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 174, 61, 0.11), transparent 68%); filter: blur(20px); pointer-events: none; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.hero-copy, .hero-stage { position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: #b8b6c0; font: 650 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 2px; background: linear-gradient(90deg, var(--orange), var(--red)); box-shadow: 0 0 15px rgba(255, 151, 55, .8); }
.hero h1 { margin: 0; max-width: 780px; font: 830 clamp(56px, 6.3vw, 100px)/.91 "Arial Narrow", "Roboto Condensed", Impact, sans-serif; letter-spacing: -.065em; text-transform: uppercase; }
.hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1.5px rgba(245, 242, 233, .48); }
.hero-lead { max-width: 660px; margin: 29px 0 34px; color: #b7b4bd; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.68; }

.player-search { max-width: 720px; }
.data-mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 13px; }
.data-mode-button { min-height: 70px; border: 1px solid var(--line); border-radius: 14px; background: rgba(17, 18, 22, .9); padding: 13px 15px; display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer; }
.data-mode-button:hover { border-color: var(--line-strong); }
.data-mode-button.is-active { border-color: rgba(255, 151, 55, .65); background: linear-gradient(120deg, rgba(255, 151, 55, .14), rgba(255, 174, 61, .04)); box-shadow: inset 0 0 0 1px rgba(255, 151, 55, .08); }
.mode-index { color: #777782; font: 700 10px ui-monospace, monospace; }
.data-mode-button.is-active .mode-index { color: var(--orange); }
.data-mode-button > span:last-child { display: grid; gap: 4px; }
.data-mode-button strong { font-size: 13px; }
.data-mode-button small { color: #83828d; font-size: 11px; }
.search-label { display: block; margin: 0 0 9px 3px; color: #a9a7b1; font: 650 10px ui-monospace, monospace; letter-spacing: .13em; text-transform: uppercase; }
.search-control { position: relative; display: flex; min-height: 62px; padding: 6px 6px 6px 50px; border: 1px solid var(--line-strong); border-radius: 16px; background: rgba(19, 20, 24, .95); box-shadow: 0 18px 55px rgba(0,0,0,.3); }
.search-control:focus-within { border-color: rgba(255, 151, 55, .8); box-shadow: 0 0 0 4px rgba(255, 151, 55, .09), 0 18px 55px rgba(0,0,0,.3); }
.search-icon { position: absolute; top: 22px; left: 20px; width: 15px; height: 15px; border: 1.5px solid #8a8993; border-radius: 50%; }
.search-icon::after { content: ""; position: absolute; right: -5px; bottom: -3px; width: 6px; height: 1.5px; background: #8a8993; transform: rotate(45deg); }
.search-control input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #fff; font-size: 15px; }
.search-control input::placeholder { color: #686772; }
.search-control button { border: 0; border-radius: 11px; padding: 0 20px; background: linear-gradient(120deg, var(--orange), var(--red)); color: #130a08; font-size: 13px; font-weight: 800; cursor: pointer; }
.search-control button:hover { filter: brightness(1.08); }
.search-help { min-height: 18px; margin: 9px 3px 0; color: #777681; font-size: 11px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 28px; color: #777681; font-size: 11px; }
.hero-proof span { display: flex; align-items: center; gap: 6px; }
.hero-proof b { color: #dedbe4; font: 750 10px ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; }

.hero-stage { display: grid; justify-items: center; isolation: isolate; perspective: 800px; }
.stage-orbit { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.stage-orbit-one { width: 520px; height: 520px; top: 6%; left: 50%; transform: translateX(-50%); }
.stage-orbit-two { width: 370px; height: 370px; top: 16%; left: 50%; border-color: rgba(149,103,255,.13); transform: translateX(-50%); }
.player-card { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; position: relative; width: min(360px, 84vw); aspect-ratio: 3 / 4; outline: none; transform: translateZ(0); }
.player-card:focus-visible { border-radius: 25px; box-shadow: 0 0 0 4px rgba(85,230,224,.25); }
.player-card-inner { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.23); border-radius: 24px; background: radial-gradient(circle at 76% 20%, rgba(149,103,255,.38), transparent 33%), radial-gradient(circle at 30% 70%, rgba(255,174,61,.25), transparent 38%), linear-gradient(155deg, #191826 0%, #0e1015 58%, #17100f 100%); box-shadow: 0 36px 100px rgba(0,0,0,.62), inset 0 0 0 5px rgba(255,255,255,.025); transform: rotateX(var(--ry)) rotateY(var(--rx)); transform-style: preserve-3d; transition: transform 150ms ease-out; }
.player-card-inner::before { content: ""; position: absolute; inset: 9px; z-index: 4; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; pointer-events: none; }
.card-noise { position: absolute; inset: 0; opacity: .16; background-image: url("/assets/site-background-texture.svg"); background-size: 380px; mix-blend-mode: screen; }
.card-beam { position: absolute; width: 175%; height: 32%; top: 31%; left: -38%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), rgba(255,151,55,.34), transparent); transform: rotate(-22deg); filter: blur(1px); }
.card-header { position: absolute; z-index: 5; top: 30px; left: 31px; right: 31px; display: flex; justify-content: space-between; color: #c2bec9; font: 700 9px ui-monospace, monospace; letter-spacing: .1em; }
.live-mark { display: inline-flex; align-items: center; gap: 6px; }
.live-mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.card-identity-mark { position: absolute; top: 68px; left: 28px; z-index: 2; color: rgba(255,255,255,.05); font: 900 220px/.8 Impact, sans-serif; letter-spacing: -.08em; transform: rotate(-8deg); }
.card-rings { position: absolute; top: 75px; right: -52px; width: 265px; height: 265px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 33px rgba(255,255,255,.018), 0 0 0 65px rgba(149,103,255,.035); }
.card-player { position: absolute; z-index: 4; top: 200px; left: 31px; right: 31px; }
.card-player p { margin: 0 0 7px; color: var(--orange); font: 700 9px ui-monospace, monospace; letter-spacing: .15em; }
.card-player h2 { margin: 0; font: 900 70px/.9 "Arial Narrow", Impact, sans-serif; letter-spacing: -.055em; }
.card-player > span { display: inline-block; margin-top: 9px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #c8c4cd; font: 700 8px ui-monospace, monospace; letter-spacing: .12em; }
.card-metrics { position: absolute; z-index: 5; left: 31px; right: 31px; bottom: 80px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.card-metrics > div { min-width: 0; padding: 14px 10px 13px 0; display: grid; gap: 3px; }
.card-metrics > div + div { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.13); }
.card-metrics span { color: #8b8994; font: 700 7px ui-monospace, monospace; letter-spacing: .12em; }
.card-metrics strong { font: 790 25px/1 "Arial Narrow", sans-serif; }
.card-metrics small { color: var(--cyan); font: 700 7px ui-monospace, monospace; }
.card-footer { position: absolute; z-index: 5; left: 31px; right: 31px; bottom: 28px; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 12px; }
.agent-stack { display: flex; }
.agent-stack span { width: 23px; height: 23px; margin-left: -5px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: #20212a; font: 700 6px ui-monospace, monospace; }
.agent-stack span:first-child { margin-left: 0; }
.card-footer > div:nth-child(2) { display: grid; gap: 2px; }
.card-footer > div:nth-child(2) span { color: #73727c; font: 650 6px ui-monospace, monospace; }
.card-footer > div:nth-child(2) strong, .card-footer > b { font: 700 7px ui-monospace, monospace; letter-spacing: .08em; }
.card-shine { position: absolute; z-index: 8; inset: 0; pointer-events: none; opacity: .28; mix-blend-mode: color-dodge; background: repeating-linear-gradient(125deg, #ff6660, #ffe969 16%, #66fff2 31%, #708dff 47%, #ce69ff 62%, #ff6660 78%); background-size: 180% 180%; background-position: var(--mx) var(--my); }
.stage-caption { width: min(360px, 84vw); margin-top: 16px; display: flex; justify-content: space-between; color: #6f6e78; font: 650 8px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.stage-caption strong { color: #a8a5af; }

.signal-strip { width: var(--shell); margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }
.signal-strip > div { min-height: 118px; padding: 28px 28px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-content: center; }
.signal-strip > div + div { border-left: 1px solid var(--line); }
.signal-strip span { grid-row: 1 / 3; color: var(--orange); font: 700 10px ui-monospace, monospace; }
.signal-strip strong { font-size: 14px; }
.signal-strip small { margin-top: 5px; color: #777681; font-size: 11px; }

.featured, .how-it-works { width: var(--shell); margin: 0 auto; padding: 118px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.section-heading .eyebrow { margin-bottom: 13px; }
.section-heading h2, .how-it-works h2 { margin: 0; font: 820 clamp(40px, 5vw, 72px)/.96 "Arial Narrow", Impact, sans-serif; letter-spacing: -.045em; text-transform: uppercase; }
.section-heading > a { padding-bottom: 7px; border-bottom: 1px solid var(--line-strong); color: #bbb8c1; font-size: 12px; }
.collection-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mini-card { position: relative; overflow: hidden; min-height: 330px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; justify-content: flex-end; background: var(--panel); }
.mini-card::before { content: ""; position: absolute; width: 280px; height: 280px; top: -70px; right: -80px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.02), 0 0 0 70px rgba(255,255,255,.015); }
.mini-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 40%, rgba(255,255,255,.06)); }
.mini-card span, .mini-card strong, .mini-card small { position: relative; z-index: 1; }
.mini-card span { color: rgba(255,255,255,.65); font: 700 9px ui-monospace, monospace; letter-spacing: .14em; }
.mini-card strong { margin: 5px 0; font: 900 54px/.95 "Arial Narrow", Impact, sans-serif; letter-spacing: -.05em; }
.mini-card small { color: rgba(255,255,255,.56); }
.mini-card-red { background: radial-gradient(circle at 78% 22%, rgba(255,151,55,.38), transparent 31%), linear-gradient(145deg,#1b1010,#121216); }
.mini-card-violet { background: radial-gradient(circle at 78% 22%, rgba(149,103,255,.42), transparent 31%), linear-gradient(145deg,#15101d,#121216); }
.mini-card-cyan { background: radial-gradient(circle at 78% 22%, rgba(85,230,224,.32), transparent 31%), linear-gradient(145deg,#0e181b,#121216); }

.how-it-works { border-top: 1px solid var(--line); text-align: center; }
.how-it-works .eyebrow { justify-content: center; }
.how-it-works h2 { max-width: 900px; margin: 0 auto; }
.how-it-works > p:last-child { max-width: 720px; margin: 25px auto 0; color: #9896a0; font-size: 17px; line-height: 1.7; }

/* Home: the card is the whole visual, with no decorative grid, blob, or orbit chrome. */
.home-hero { width: var(--shell); min-height: 720px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.72fr); gap: clamp(48px,9vw,150px); align-items: center; padding: 84px 0 100px; }
.home-hero-copy h1 { margin: 0; max-width: 760px; font: 830 clamp(56px,6.3vw,100px)/.91 "Arial Narrow","Roboto Condensed",Impact,sans-serif; letter-spacing: -.065em; text-transform: uppercase; }
.home-hero-copy h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1.5px rgba(245,242,233,.48); }
.home-preview { display: grid; justify-items: center; }
.home-preview .player-card { width: min(400px,84vw); }
.collection { padding-top: 84px; }
.collection-kicker { margin: 0 0 13px; color: #aaa8b1; font: 650 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .16em; text-transform: uppercase; }
.collection-filters { margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; align-items: end; gap: 16px 28px; }
.collection-filters fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.collection-filters legend { margin-bottom: 8px; color: #9997a1; font: 700 9px ui-monospace,monospace; letter-spacing: .12em; text-transform: uppercase; }
.collection-filters legend small { color: #66656e; font-size: 8px; letter-spacing: 0; text-transform: none; }
.collection-filter-options { display: flex; flex-wrap: wrap; gap: 6px; }
.collection-filter-options label { position: relative; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); background: #101115; display: inline-flex; align-items: center; cursor: pointer; color: #85838e; font-size: 10px; font-weight: 700; }
.collection-filter-options input { position: absolute; opacity: 0; pointer-events: none; }
.collection-filter-options label:has(input:checked) { border-color: rgba(255,151,55,.64); background: #1b1714; color: var(--orange); box-shadow: inset 0 -2px var(--orange); }
.collection-filter-options label:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.collection-filters > button { min-height: 34px; padding: 0 5px; border: 0; background: transparent; color: #8d8b95; font-size: 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.collection-filters > button:hover { color: var(--ink); }
.collection-preview { display: grid; grid-template-columns: repeat(auto-fill,minmax(185px,230px)); justify-content: start; gap: 14px; }
.collection-card { --collection-rx: 0deg; --collection-ry: 0deg; --collection-lift: 0px; --collection-image-scale: 1; position: relative; min-width: 0; overflow: visible; aspect-ratio: 5 / 8; background: #111216; color: var(--ink); transform: perspective(900px) translateY(var(--collection-lift)) rotateX(var(--collection-rx)) rotateY(var(--collection-ry)); transform-style: preserve-3d; transition: transform 180ms ease-out,box-shadow 220ms ease-out; will-change: transform; }
.collection-card.is-hovering { --collection-lift: -3px; --collection-image-scale: 1.02; z-index: 2; box-shadow: 0 20px 46px rgba(0,0,0,.46); }
.collection-card:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.5),0 18px 42px rgba(0,0,0,.46); }
.collection-card-export { position: absolute; inset: 0; overflow: visible; display: grid; place-items: center; background: #111216; }
.collection-card-export img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--collection-image-scale)); transition: transform var(--resize-dur) var(--resize-ease); will-change: transform; }
.collection-card.is-loading .collection-card-export { color: var(--orange); }
.collection-card.is-unavailable .collection-card-export { color: #777681; font: 700 10px ui-monospace,monospace; text-transform: uppercase; }
.collection-card-meta { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 28px 12px 11px; display: grid; gap: 3px; opacity: 1; background: linear-gradient(transparent,rgba(4,5,8,.92) 52%); transform: translateY(0); transition: opacity var(--text-swap-dur) var(--text-swap-ease),transform var(--text-swap-dur) var(--text-swap-ease); will-change: opacity,transform; pointer-events: none; }
.collection-card.is-hovering .collection-card-meta { opacity: 0; transform: translateY(8px); }
.collection-card-meta small { color: rgba(255,250,242,.76); font: 700 7px ui-monospace,monospace; letter-spacing: .08em; }
.collection-card-meta strong { overflow: hidden; font: 850 21px/.95 "Arial Narrow",Impact,sans-serif; letter-spacing: -.035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.collection-loading, .collection-empty { grid-column: 1 / -1; min-height: 180px; margin: 0; display: grid; place-items: center; color: #85838e; font-size: 12px; }
.collection-loading { gap: 9px; grid-template-columns: auto auto; align-content: center; }
.collection-pagination { min-height: 38px; margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.collection-pagination button { min-width: 34px; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); background: #101115; color: #9997a1; font-size: 10px; font-weight: 700; cursor: pointer; }
.collection-pagination button:hover:not(:disabled), .collection-pagination button[aria-current="page"] { border-color: rgba(255,151,55,.64); color: var(--orange); }
.collection-pagination button:disabled { opacity: .35; cursor: not-allowed; }
.site-footer { width: var(--shell); min-height: 112px; margin: 0 auto; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 26px; color: #74737d; font-size: 11px; }
.site-footer p { margin-left: auto; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr 390px; gap: 42px; }
  .hero h1 { font-size: clamp(54px, 7vw, 78px); }
  .player-card { width: 330px; }
}

@media (max-width: 820px) {
  :root { --shell: min(100% - 32px, 680px); }
  .nav-links { display: none; }
  .brand-product { display: none; }
  .nav-cta { margin-left: auto; }
  .hero { grid-template-columns: 1fr; padding-top: 62px; }
  .hero-stage { margin-top: 18px; }
  .signal-strip { grid-template-columns: repeat(2, 1fr); }
  .signal-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .signal-strip > div:nth-child(4) { border-top: 1px solid var(--line); }
  .collection-preview { grid-template-columns: 1fr; }
  .mini-card { min-height: 250px; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 24px); }
  .nav-shell { min-height: 68px; }
  .nav-cta { padding: 10px 12px; font-size: 11px; }
  .hero { padding: 48px 0 62px; }
  .hero h1 { font-size: clamp(48px, 15vw, 67px); }
  .hero-lead { font-size: 15px; }
  .data-mode { grid-template-columns: 1fr; }
  .search-control { min-height: 58px; padding-left: 43px; }
  .search-control button { padding: 0 14px; font-size: 0; }
  .search-control button span { font-size: 17px; }
  .hero-proof { gap: 12px; }
  .player-card { width: min(340px, 89vw); }
  .signal-strip { grid-template-columns: 1fr; }
  .signal-strip > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .section-heading { align-items: start; flex-direction: column; }
  .featured, .how-it-works { padding: 80px 0; }
  .site-footer { padding: 28px 0; flex-wrap: wrap; }
  .site-footer p { width: 100%; order: 3; margin: 0; }
}

@media (max-width: 820px) {
  .home-hero { min-height: 0; grid-template-columns: 1fr; gap: 48px; padding: 62px 0 76px; text-align: center; }
  .home-hero-copy h1 { margin-inline: auto; }
  .home-preview { order: 2; }
  .collection-preview { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .home-hero { gap: 38px; padding: 48px 0 62px; }
  .home-preview .player-card { width: min(340px,89vw); }
  .collection { padding-top: 62px; }
  .collection-preview { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .collection-filters { display: grid; gap: 16px; }
  .collection-filters > button { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .player-card-inner { transform: none; }
  .card-shine { display: none; }
  .collection-card, .collection-card-export img, .collection-card-meta { transform: none !important; transition: none !important; }
}

/* Player Card Studio ------------------------------------------------------ */
.is-studio-route > .site-header,
.is-studio-route > .site-footer,
.is-public-route > .site-header,
.is-public-route > .site-footer { display: none; }

.studio-route, .public-route { min-height: 100vh; }
.studio-shell { width: min(1440px, calc(100% - 40px)); margin: 0 auto; padding-bottom: 70px; }
.studio-header { min-height: 64px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.studio-header > div { display: flex; align-items: center; gap: 22px; }
.studio-header a { min-height: 44px; display: inline-flex; align-items: center; color: #aaa8b1; font-size: 12px; }
.studio-header a:hover { color: var(--ink); }
.studio-header > div > span { padding-left: 22px; border-left: 1px solid var(--line); color: var(--orange); font: 700 10px ui-monospace, monospace; letter-spacing: .14em; }
.mobile-preview-trigger { min-height: 44px; display: none; }

.step-nav { display: grid; grid-template-columns: repeat(var(--step-count, 5), 1fr); margin: 28px 0; border: 1px solid var(--line); border-radius: 5px; background: #0d0e11; }
.step-nav button { position: relative; min-height: 64px; padding: 12px 18px; border: 0; border-right: 1px solid var(--line); background: transparent; display: flex; align-items: center; gap: 12px; color: #777681; text-align: left; cursor: pointer; }
.step-nav button:last-child { border-right: 0; }
.step-nav button::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px; background: var(--orange); transition: right 180ms ease; }
.step-nav button.is-active::after { right: 0; }
.step-nav button span { font: 700 9px ui-monospace, monospace; }
.step-nav button strong { color: #aaa8b1; font-size: 12px; }
.step-nav button.is-active span { color: var(--orange); }
.step-nav button.is-active strong { color: var(--ink); }
.step-nav button.is-complete span { color: #68d4a5; }

.studio-workspace { display: grid; grid-template-columns: minmax(0, 7fr) minmax(390px, 5fr); gap: 28px; align-items: start; }
.studio-form { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #101115; }
.step-intro { padding: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.step-intro > span { color: var(--orange); font: 700 9px ui-monospace, monospace; letter-spacing: .14em; }
.step-intro h2 { margin: 12px 0 10px; font: 820 clamp(34px, 4vw, 58px)/.95 "Arial Narrow", Impact, sans-serif; letter-spacing: -.045em; text-transform: uppercase; }
.step-intro p { max-width: 680px; margin: 0; color: #8c8b95; font-size: 14px; line-height: 1.65; }
.form-section { display: grid; gap: 28px; padding: clamp(24px, 3vw, 40px); }

.studio-mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.studio-mode-switch button { min-height: 48px; border: 0; border-right: 1px solid var(--line); background: #0d0e11; color: #8d8b96; font-size: 12px; font-weight: 700; cursor: pointer; }
.studio-mode-switch button:last-child { border-right: 0; }
.studio-mode-switch button.is-active { background: #1b1715; color: #fff; box-shadow: inset 0 -2px var(--orange); }

.studio-search-form > label, .form-grid label > span, .choice-field legend { display: block; margin-bottom: 9px; color: #b7b4bd; font: 700 10px ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }
.studio-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: #0b0c0f; }
.studio-search-row input, .studio-search-row select, .form-grid input, .form-grid select, .form-grid textarea, .override-grid input { width: 100%; min-height: 50px; border: 0; border-radius: 0; background: #0b0c0f; color: var(--ink); padding: 0 15px; outline: 0; }
.studio-search-row select { min-width: 145px; border-left: 1px solid var(--line); }
.studio-search-row button { min-width: 118px; border: 0; border-left: 1px solid var(--line); background: var(--orange); color: #160c07; font-size: 12px; font-weight: 800; cursor: pointer; }
.studio-search-row:focus-within, .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .override-grid input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255, 151, 55, .13); }
.field-help, .data-disclosure { margin: 8px 0 0; color: #73727c; font-size: 11px; line-height: 1.5; }

.candidate-list { display: grid; gap: 8px; }
.candidate { width: 100%; min-height: 76px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 4px; background: #14151a; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; text-align: left; cursor: pointer; }
.candidate:hover, .candidate:focus-visible { border-color: rgba(255,151,55,.65); background: #191714; }
.candidate-avatar { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,151,55,.45); border-radius: 5px; background: #201712; color: var(--orange); font: 800 13px ui-monospace, monospace; }
.candidate-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.candidate-copy { min-width: 0; display: grid; gap: 3px; }
.candidate-copy > strong { display: flex; align-items: baseline; gap: 7px; font-size: 14px; }
.candidate-copy > strong em { color: #8e8b96; font: 700 10px ui-monospace,monospace; font-style: normal; }
.candidate-copy small, .candidate-copy > span { overflow: hidden; color: #7e7d87; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.candidate-copy > .candidate-visual-meta { min-height: 25px; margin-top: 3px; display: flex; align-items: center; gap: 10px; color: #aaa8b2; overflow: visible; white-space: normal; }
.candidate-team { min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.candidate-team i, .candidate-agents i { width: 24px; height: 24px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: #202126; display: grid; place-items: center; color: #b7b4bd; font: 700 7px ui-monospace,monospace; }
.candidate-team img, .candidate-agents img { width: 100%; height: 100%; object-fit: contain; }
.candidate-team b { max-width: 150px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.candidate-agents { display: inline-flex; gap: 4px; }
.candidate-action { color: #aaa7b1; font: 700 10px ui-monospace, monospace; text-transform: uppercase; }
.candidate-action b { color: var(--orange); }
.studio-search-state { min-height: 124px; padding: 24px; border: 1px dashed var(--line); display: grid; place-items: center; align-content: center; gap: 7px; text-align: center; }
.studio-search-state small { color: #777681; }
.spinner { width: 18px; height: 18px; display: inline-block; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--orange); border-radius: 50%; animation: spin 700ms linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

.home-autocomplete { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); padding: 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: #0e0f12; box-shadow: 0 28px 70px rgba(0,0,0,.55); }
.player-search { position: relative; }
.home-autocomplete .search-state { margin: 4px 7px 9px; color: #85838d; font-size: 11px; }
.candidate.is-compact { min-height: 64px; border-color: transparent; border-top-color: var(--line); border-radius: 0; }
.candidate.is-compact .candidate-avatar { width: 36px; height: 36px; }
.candidate.is-compact .candidate-visual-meta { display: none; }

.selected-player-summary button { min-height: 42px; border: 1px solid var(--line); border-radius: 3px; background: #17181d; color: #bbb9c2; padding: 8px 11px; font-size: 10px; cursor: pointer; }
.selected-player-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); background: #0d0e11; }
.selected-player-summary > div { display: grid; gap: 3px; }
.selected-player-summary small { color: var(--orange); font: 700 8px ui-monospace, monospace; }
.selected-player-summary strong { display: flex; align-items: baseline; gap: 6px; font-size: 18px; }
.selected-player-summary strong em { color: #8c8993; font: 700 10px ui-monospace,monospace; font-style: normal; }
.selected-player-summary > div > span { color: #7f7d87; font-size: 11px; }
.choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-field legend { width: 100%; }
.choice-field legend small { float: right; color: #6d6c76; letter-spacing: 0; text-transform: none; }
.period-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); }
.period-grid.is-ranked { grid-template-columns: minmax(220px, 1fr); max-width: 360px; }
.choice-tile { min-height: 88px; padding: 15px; border-right: 1px solid var(--line); background: #0d0e11; display: grid; align-content: center; gap: 5px; cursor: pointer; }
.choice-tile:last-child { border-right: 0; }
.choice-tile input, .metric-choice input, .chip-choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-tile span { font-size: 12px; font-weight: 700; }
.choice-tile small { color: #686771; font-size: 9px; line-height: 1.35; }
.choice-tile.is-selected { background: #1b1714; box-shadow: inset 0 -2px var(--orange); }
.choice-tile.is-selected span { color: var(--orange); }
.rank-ledger, .public-stats-ledger { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.rank-ledger > div, .public-stats-ledger > div { min-height: 86px; padding: 16px; border-right: 1px solid var(--line); display: grid; align-content: center; gap: 7px; }
.rank-ledger > div:last-child { border-right: 0; }
.rank-ledger span, .public-stats-ledger span { color: #74737d; font: 700 8px ui-monospace, monospace; text-transform: uppercase; }
.rank-ledger strong, .public-stats-ledger strong { font: 800 22px "Arial Narrow", sans-serif; }

.metric-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.metric-choice { min-height: 58px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 3px; background: #0d0e11; cursor: pointer; }
.metric-choice > span { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.metric-choice strong { font-size: 11px; }
.metric-choice small { color: #777681; font: 700 11px ui-monospace, monospace; }
.metric-choice.is-selected { border-color: rgba(255,151,55,.55); background: #1a1714; }
.metric-choice.is-selected small { color: var(--orange); }
.metric-choice:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.override-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.override-grid label { display: grid; gap: 6px; }
.override-grid label > span { display: flex; justify-content: space-between; color: #9997a1; font-size: 10px; }
.override-grid label > span b { color: var(--orange); font: 700 8px ui-monospace, monospace; text-transform: uppercase; }
.override-grid input { min-height: 43px; border: 1px solid var(--line); }
.override-grid small { color: #66656e; font-size: 9px; }
.chip-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.chip-choice { position: relative; min-height: 76px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: #0d0e11; display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: 10px; cursor: pointer; isolation: isolate; }
.chip-choice-art { width: 54px; height: 54px; overflow: hidden; border-radius: 4px; background: #191a1f; display: grid; place-items: center; color: #777681; font: 700 9px ui-monospace,monospace; }
.chip-choice-art img { width: 100%; height: 100%; object-fit: contain; }
.chip-choice-map .chip-choice-art { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; border-radius: 0; opacity: .55; }
.chip-choice-map .chip-choice-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,8,11,.94) 6%,rgba(7,8,11,.72) 58%,rgba(7,8,11,.3)); }
.chip-choice-map .chip-choice-art img { object-fit: cover; }
.chip-choice-map .chip-choice-copy { grid-column: 1 / -1; padding-left: 4px; text-shadow: 0 2px 9px #000; }
.chip-choice-copy { min-width: 0; display: grid; gap: 5px; }
.chip-choice-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chip-choice-copy small { color: #8d8b95; font-size: 9px; }
.chip-choice.is-selected { border-color: rgba(255,151,55,.55); box-shadow: inset 3px 0 var(--orange); }
.chip-choice:has(input:focus-visible), .metric-choice:has(input:focus-visible), .choice-tile:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.snapshot-lock-note { margin: -6px 0 0; padding: 12px 14px; border-left: 2px solid #68d4a5; background: rgba(104,212,165,.055); color: #7f7d87; font-size: 10px; line-height: 1.5; }
.snapshot-lock-note b { color: #b9e6d2; }
.switch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.switch-row label { min-height: 64px; padding: 12px; border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-content: center; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; }
.switch-row label > span { grid-row: 1 / 3; width: 30px; height: 17px; border: 1px solid var(--line-strong); border-radius: 999px; background: #101115; position: relative; }
.switch-row label > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 9px; height: 9px; border-radius: 50%; background: #777681; transition: transform 160ms ease; }
.switch-row input:checked + span { border-color: rgba(255,151,55,.6); }
.switch-row input:checked + span::after { background: var(--orange); transform: translateX(13px); }
.switch-row label:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.switch-row b { font-size: 11px; }
.switch-row small { color: #6f6e78; font-size: 9px; }

.form-grid { display: grid; gap: 17px; }
.form-grid.two-column { grid-template-columns: 1fr 1fr; }
.form-grid label > span { display: flex; justify-content: space-between; }
.form-grid label > span small { color: #686771; letter-spacing: 0; text-transform: none; }
.form-grid input, .form-grid select, .form-grid textarea { border: 1px solid var(--line); }
.form-grid textarea { padding-top: 14px; resize: vertical; line-height: 1.55; }
.profile-fieldset { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 5px; }
.profile-fieldset > legend { padding: 0 7px; color: var(--orange); font: 700 9px ui-monospace,monospace; letter-spacing: .1em; text-transform: uppercase; }
.profile-fieldset > legend small { margin-left: 8px; color: #74737d; letter-spacing: 0; text-transform: none; }
.ranked-data-editor, .competitive-data-editor { gap: 16px; }
.ranked-tag-toggle { min-height: 68px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px; background: #0d0e11; display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; cursor: pointer; transition: border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease; }
.ranked-tag-toggle:has(input:checked) { border-color: rgba(255,151,55,.56); background: #1b1714; box-shadow: inset 3px 0 var(--orange); }
.ranked-tag-toggle input { position: absolute; opacity: 0; }
.ranked-tag-toggle > span { grid-row: 1 / 3; position: relative; width: 32px; height: 18px; border: 1px solid var(--line-strong); border-radius: 2px; background: #101115; }
.ranked-tag-toggle > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 1px; background: #777681; transition: transform 160ms ease,background-color 160ms ease; }
.ranked-tag-toggle input:checked + span { border-color: rgba(255,151,55,.72); }
.ranked-tag-toggle input:checked + span::after { background: var(--orange); transform: translateX(14px); }
.ranked-tag-toggle b { font-size: 12px; }
.ranked-tag-toggle small { color: #777681; font-size: 9px; }
.ranked-tag-toggle:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.ranked-data-field { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 2px; background: #0d0e11; }
.ranked-data-field > legend { padding: 0 7px; color: var(--orange); font: 700 9px ui-monospace,monospace; letter-spacing: .09em; text-transform: uppercase; }
.ranked-data-field > legend small { margin-left: 8px; color: #666b78; letter-spacing: 0; text-transform: none; }
.ranked-data-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ranked-option-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ranked-option { position: relative; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; background: #101115; display: inline-flex; align-items: center; color: #85838e; font-size: 10px; font-weight: 700; cursor: pointer; transition: border-color 160ms ease,color 160ms ease,background-color 160ms ease,box-shadow 160ms ease; }
.ranked-option input { position: absolute; opacity: 0; pointer-events: none; }
.ranked-option:hover { border-color: var(--line-strong); color: #d5d1db; }
.ranked-option.is-selected, .ranked-option:has(input:checked) { border-color: rgba(255,151,55,.62); background: #1b1714; color: var(--orange); box-shadow: inset 0 -2px var(--orange); }
.ranked-option:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.ranked-option.is-competitive-perk { padding-right: 28px; }
.language-option-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.language-option { min-width: 0; justify-content: center; padding: 0 8px; text-align: center; }
.competitive-perk-order { position: absolute; top: 5px; right: 7px; color: var(--orange); font: 900 10px/1 ui-monospace,monospace; }
.ranked-contact-grid label > span { color: #aaa8b1; }
.color-grid input[type="color"] { padding: 8px; cursor: pointer; }
.segmented-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); border: 1px solid var(--line); }
.segmented-choice button { min-height: 43px; border: 0; border-right: 1px solid var(--line); background: #0d0e11; color: #85838e; font-size: 10px; font-weight: 700; cursor: pointer; }
.segmented-choice button:last-child { border-right: 0; }
.segmented-choice button.is-selected { color: var(--orange); background: #1b1714; box-shadow: inset 0 -2px var(--orange); }
.range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.range-grid label { display: grid; gap: 10px; }
.range-grid label span { display: flex; justify-content: space-between; color: #aaa8b1; font-size: 10px; text-transform: uppercase; }
.range-grid b { color: var(--orange); font-family: ui-monospace, monospace; }
.range-grid input[type="range"] { --range-fill: 50%; width: 100%; height: 18px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.range-grid input[type="range"]::-webkit-slider-runnable-track { height: 7px; border: 1px solid #777681; border-radius: 99px; background: linear-gradient(90deg,var(--orange) 0 var(--range-fill),#25262c var(--range-fill) 100%); }
.range-grid input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5px; border: 0; border-radius: 50%; appearance: none; background: var(--orange); box-shadow: 0 0 0 3px rgba(255,151,55,.13); }
.range-grid input[type="range"]::-moz-range-track { height: 7px; border: 1px solid #777681; border-radius: 99px; background: linear-gradient(90deg,var(--orange) 0 var(--range-fill),#25262c var(--range-fill) 100%); }
.range-grid input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255,151,55,.13); }
.publish-confirm { padding: 16px; border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 12px; cursor: pointer; }
.publish-confirm input { width: 17px; height: 17px; accent-color: var(--orange); }
.publish-confirm > span { display: grid; gap: 5px; }
.publish-confirm strong { font-size: 12px; }
.publish-confirm small { color: #74737d; font-size: 10px; line-height: 1.4; }
.custom-export-note { padding: 17px; border: 1px solid rgba(104,212,165,.28); background: linear-gradient(115deg,rgba(104,212,165,.08),rgba(149,103,255,.04)); display: grid; gap: 5px; }
.custom-export-note span { color: #68d4a5; font: 700 8px ui-monospace,monospace; letter-spacing: .1em; }
.custom-export-note strong { font-size: 13px; }
.custom-export-note small { color: #83818b; font-size: 10px; }
.export-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.export-actions button, .public-actions button { min-height: 43px; border: 1px solid var(--line); border-radius: 3px; background: #15161a; color: #bbb9c2; font-size: 10px; font-weight: 700; cursor: pointer; }
.export-actions button:hover, .public-actions button:hover { border-color: var(--orange); color: #fff; }

.studio-controls { min-height: 76px; padding: 14px clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }
.studio-controls > span { color: #66656f; font-size: 9px; text-align: center; }
.studio-controls button { min-height: 44px; padding: 0 17px; border-radius: 3px; font-size: 11px; font-weight: 750; cursor: pointer; }
.studio-controls .secondary { border: 1px solid var(--line); background: transparent; color: #aaa8b1; }
.studio-controls .primary { border: 1px solid var(--orange); background: var(--orange); color: #160c07; }
.studio-controls button:disabled { opacity: .38; cursor: not-allowed; }

.studio-preview { position: sticky; top: 20px; min-height: 0; border: 0; border-radius: 0; background: transparent; padding: 4px 12px 20px; display: grid; justify-items: center; align-content: start; }
.studio-preview-heading { width: 100%; display: grid; place-items: center; margin-bottom: 20px; text-align: center; }
.studio-preview-heading span { color: var(--orange); font: 700 9px ui-monospace, monospace; letter-spacing: .15em; }
.preview-card-stage {
  position: relative;
  width: min(360px,100%);
  aspect-ratio: 5 / 8;
  outline: none;
  perspective: 1100px;
  perspective-origin: 50% 48%;
}
.preview-tilt-stage { display: grid; place-items: center; }
.preview-tilt-stage > .player-card { animation: preview-face-in 180ms cubic-bezier(.22,1,.36,1); }
.preview-card-stage[data-card-3d-stage] {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.preview-card-stage[data-card-3d-stage]:focus-visible { border-radius: 28px; outline: 2px solid var(--orange); outline-offset: 7px; }
.preview-card-stage.is-dragging { cursor: grabbing; }
.card-3d-object {
  --card-3d-rx: 0deg;
  --card-3d-ry: 0deg;
  position: absolute;
  inset: 0;
  transform: rotateX(var(--card-3d-rx)) rotateY(var(--card-3d-ry));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform var(--resize-dur) var(--resize-ease);
  will-change: transform;
}
.preview-card-stage.is-dragging .card-3d-object { transition: none; }
.card-3d-object::before {
  position: absolute;
  z-index: 0;
  inset: .45%;
  border: 2px solid rgba(255,255,255,.26);
  border-radius: 27px;
  background: #12141a;
  box-shadow: 0 18px 48px rgba(0,0,0,.5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  content: '';
  transform: translateZ(-2px);
}
.card-3d-face {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  pointer-events: none;
}
.card-3d-front { transform: translateZ(1px); }
.card-3d-back { transform: rotateY(180deg) translateZ(1px); }
.studio-preview .card-3d-face .kogni-card { width: 100%; height: 100%; }
@keyframes preview-face-in { from { opacity: 0; } to { opacity: 1; } }
.preview-empty-state { width: min(360px,100%); aspect-ratio: 5 / 8; border: 1px dashed var(--line-strong); border-radius: 22px; background: linear-gradient(145deg,rgba(255,151,55,.035),rgba(149,103,255,.025)); display: grid; place-items: center; align-content: center; gap: 7px; color: #777681; text-align: center; }
.preview-empty-state b { color: #b8b5be; font: 800 12px ui-monospace,monospace; text-transform: uppercase; }
.preview-empty-state span { font-size: 10px; }
.preview-controls { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.preview-flip, .preview-3d-toggle { min-width: 90px; min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 3px; background: #111216; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #d5d1db; font: 700 9px ui-monospace,monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color 160ms ease,color 160ms ease,background-color 160ms ease,box-shadow 160ms ease; }
.preview-flip:hover, .preview-flip:focus-visible, .preview-3d-toggle:hover, .preview-3d-toggle:focus-visible { border-color: var(--orange); color: #fff; }
.preview-flip b { color: var(--orange); font-size: 15px; }
.preview-3d-toggle span { font: 900 14px/1 "Arial Narrow",Arial,sans-serif; letter-spacing: .08em; }
.preview-3d-toggle.is-active { border-color: var(--orange); background: rgba(255,151,55,.1); box-shadow: inset 0 -2px var(--orange),0 0 18px rgba(255,151,55,.1); color: #fff; }
.preview-sheet-handle { display: none; }

.studio-player-card { width: min(360px, 100%); }
.studio-player-card .player-card-inner { border-color: color-mix(in srgb, var(--card-primary) 45%, white 18%); }
.studio-player-card .card-player { top: 166px; }
.studio-player-card .card-player p { color: var(--card-primary); }
.studio-player-card .card-player h2 { position: relative; z-index: 2; font-size: clamp(48px, 5.2vw, 66px); }
.studio-player-card .card-metrics { bottom: 75px; grid-template-columns: repeat(3, 1fr); }
.studio-player-card .card-metrics > div { padding-top: 9px; padding-bottom: 8px; }
.studio-player-card .card-metrics > div:nth-child(4) { border-left: 0; border-top: 1px solid rgba(255,255,255,.13); }
.studio-player-card .card-metrics > div:nth-child(5), .studio-player-card .card-metrics > div:nth-child(6) { border-top: 1px solid rgba(255,255,255,.13); }
.studio-player-card .card-metrics strong { font-size: 20px; }
.studio-player-card .card-agent-art { position: absolute; z-index: 2; top: 78px; right: -16px; width: 218px; height: 218px; object-fit: contain; opacity: .38; filter: drop-shadow(0 14px 35px color-mix(in srgb, var(--card-secondary) 45%, transparent)); transform: rotate(5deg); }
.studio-player-card .card-rings { border-color: color-mix(in srgb, var(--card-secondary) 35%, transparent); }
.studio-player-card .card-shine { opacity: calc(var(--card-shine) * .52); }
.finish-matte .card-shine { display: none; }
.finish-soft-glow .player-card-inner { box-shadow: 0 28px 85px color-mix(in srgb, var(--card-secondary) 24%, black); }
.finish-aurora .card-shine { opacity: calc(var(--card-shine) * .62); background-size: 240% 240%; animation: auroraShift 7s linear infinite; }
.finish-glitter .card-shine { opacity: calc(var(--card-shine) * .66); background-image: radial-gradient(circle at 10% 20%, white 0 1px, transparent 2px), radial-gradient(circle at 65% 38%, #9ff 0 1px, transparent 2px), radial-gradient(circle at 35% 73%, #fff1a8 0 1px, transparent 2px), repeating-linear-gradient(125deg,#ff7773,#ffed5f 15%,#83fff7 30%,#7894ff 45%,#d875ff 60%); background-size: 33px 41px, 47px 39px, 29px 53px, 180% 180%; }
@keyframes auroraShift { 50% { background-position: 100% 30%; } }
.is-back .card-agent-art, .is-back .card-identity-mark, .is-back .card-rings, .is-back .card-player, .is-back .card-metrics { display: none; }
.back-identity { position: absolute; z-index: 5; top: 76px; left: 31px; right: 31px; }
.back-identity > span { color: var(--card-primary); font: 700 8px ui-monospace, monospace; letter-spacing: .12em; }
.back-identity h2 { margin: 7px 0 2px; font: 900 50px/.95 "Arial Narrow", Impact, sans-serif; letter-spacing: -.05em; }
.back-identity p { margin: 0; color: #aaa7b1; font-size: 11px; }
.back-ledger { position: absolute; z-index: 5; top: 180px; left: 31px; right: 31px; bottom: 76px; display: grid; grid-template-rows: .9fr 1fr 1fr 1.25fr; border-top: 1px solid rgba(255,255,255,.16); }
.back-ledger section { min-height: 0; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.13); display: grid; align-content: center; gap: 4px; }
.back-ledger section > span { color: #777681; font: 700 7px ui-monospace, monospace; letter-spacing: .1em; }
.back-ledger section > strong { font-size: 13px; }
.back-ledger section > small { color: #96949e; font-size: 8px; }
.back-ledger section > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.back-ledger section > div b { display: grid; gap: 2px; font-size: 10px; }
.back-ledger section > div small { color: var(--card-primary); font: 700 7px ui-monospace, monospace; }
.back-story p { margin: 2px 0 0; color: #d1cdd6; font-size: 10px; line-height: 1.4; }
.is-back .card-footer { grid-template-columns: 1fr auto; }
.is-back .card-footer > div { display: grid; gap: 2px; }
.is-back .card-footer span { color: #777681; font: 700 6px ui-monospace, monospace; }

/* Public profile --------------------------------------------------------- */
.public-shell { width: min(1440px, calc(100% - 40px)); margin: 0 auto; padding-bottom: 30px; }
.public-header { min-height: 78px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.public-header > a { min-height: 44px; display: inline-flex; align-items: center; color: #9a98a2; font-size: 11px; }
.public-header > div { display: grid; justify-items: center; gap: 2px; }
.public-header > div span { color: var(--orange); font: 700 8px ui-monospace, monospace; text-transform: uppercase; }
.public-header > div strong { font-size: 14px; }
.public-header nav { justify-self: end; display: flex; align-items: center; gap: 7px; }
.public-header button { min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 3px; background: #121317; color: #b4b2bc; font: 700 9px ui-monospace, monospace; letter-spacing: .035em; cursor: pointer; }
.public-header button:hover { border-color: var(--line-strong); color: #fff; }
.public-header .public-download-trigger { border-color: rgba(255,151,55,.55); background: #121317; color: #ffe1bf; }
.public-header .public-download-trigger:hover { border-color: var(--orange); color: #fff8ef; }
.public-main { min-height: calc(100svh - 178px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(62px,8vw,112px); padding: 64px 0 96px; }
.public-card-gallery { width: min(420px,92vw); display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; gap: 14px; perspective: 800px; }
.t-card-flip-stage { position: relative; width: 100%; aspect-ratio: 5 / 8; transform-style: preserve-3d; transition: transform var(--resize-dur) var(--resize-ease); will-change: transform; }
.public-card-gallery.show-back:not(.is-3d) .t-card-flip-stage { transform: rotateY(180deg); }
.public-card-gallery.is-3d .t-card-flip-stage { cursor: grab; touch-action: none; }
.public-card-gallery.is-3d-dragging .t-card-flip-stage { cursor: grabbing; transition: none; }
.public-card-gallery.is-3d .public-card-face .player-card { pointer-events: none; }
.public-card-face { position: absolute; inset: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.public-card-face[data-public-back] { transform: rotateY(180deg); }
.public-card-gallery .studio-player-card { width: 100%; }
.public-dossier { width: min(920px,100%); max-width: 920px; margin: 0 auto; }
.public-dossier h1 { margin: 0; font: 900 clamp(62px, 6vw, 94px)/.86 "Arial Narrow", Impact, sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.public-real-name { margin: 14px 0 0; color: #c5c1ca; font-size: 17px; line-height: 1.45; }
.public-stats-ledger { grid-template-columns: repeat(3,minmax(0,1fr)); }
.public-stats-ledger > div { min-height: 112px; padding: 19px 20px; gap: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.public-stats-ledger > div:nth-child(3n) { border-right: 0; }
.public-stats-ledger > div:nth-child(n+10) { border-bottom: 0; }
.public-stats-ledger span { color: #a6a3ad; font-size: 10px; letter-spacing: .1em; }
.public-stats-ledger strong { color: #fffaf2; font-size: 27px; line-height: 1; }
.public-stats-ledger small { color: #9996a0; font-size: 10px; line-height: 1.25; }
.public-note { margin-top: 24px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.public-note span { color: var(--orange); font: 700 8px ui-monospace, monospace; }
.public-note p { margin: 8px 0 0; color: #c3c0c9; font-size: 14px; line-height: 1.55; }
.public-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 38px; margin: 26px 0; }
.public-meta div { min-height: 42px; padding: 11px 0; display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.07); }
.public-meta dt { color: #a5a2ac; font-size: 12px; }
.public-meta dd { margin: 0; color: #f0edf3; font-size: 12px; font-weight: 650; line-height: 1.35; text-transform: none; }
.public-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.public-profile-hero { display: grid; grid-template-columns: 132px minmax(0,1fr) auto; align-items: center; gap: 28px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.public-profile-photo { width: 132px; height: 132px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: radial-gradient(circle at 50% 10%,rgba(255,151,55,.18),transparent 58%),#111216; display: grid; place-items: center; color: var(--orange); font: 850 28px "Arial Narrow",sans-serif; }
.public-profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.public-profile-hero .eyebrow { margin-bottom: 12px; }
.public-team-lockup { min-width: 184px; padding: 15px; border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; gap: 12px; }
.public-team-lockup > .public-team-logo { width: 52px; height: 52px; flex: 0 0 auto; overflow: hidden; border-radius: 7px; background: linear-gradient(145deg,#fffdf7,#e9e5dd); box-shadow: inset 0 1px 0 rgba(255,255,255,.95),0 5px 14px rgba(0,0,0,.18); display: grid; place-items: center; color: #161719; font: 750 10px ui-monospace,monospace; }
.public-team-lockup img { width: 100%; height: 100%; padding: 7px; object-fit: contain; filter: saturate(108%) contrast(112%); }
.public-team-lockup > span { min-width: 0; display: grid; gap: 4px; }
.public-team-lockup small, .public-performance-grid > section > span { color: #aaa7b0; font: 700 10px ui-monospace,monospace; letter-spacing: .08em; text-transform: uppercase; }
.public-team-lockup strong { overflow: hidden; color: #fffaf2; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.public-story-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 24px 0; }
.public-story-grid article { min-height: 104px; padding: 17px; border: 1px solid var(--line); background: linear-gradient(125deg,rgba(255,151,55,.055),transparent 48%); }
.public-story-grid span { color: var(--orange); font: 700 8px ui-monospace,monospace; letter-spacing: .08em; }
.public-story-grid p { margin: 9px 0 0; color: #c5c2ca; font-size: 13px; line-height: 1.6; }
.public-performance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.public-performance-grid > section { padding: 20px; border: 1px solid var(--line); }
.public-agent-list, .public-map-list { margin-top: 13px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.public-agent-list > span, .public-map-list > span { position: relative; min-width: 0; min-height: 78px; padding: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 4px; background: #111216; display: grid; justify-items: center; align-content: center; gap: 4px; text-align: center; }
.public-agent-list i { width: 36px; height: 36px; display: grid; place-items: center; }
.public-agent-list img { width: 100%; height: 100%; object-fit: contain; }
.public-agent-list b, .public-map-list b { position: relative; z-index: 1; max-width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.public-agent-list small, .public-map-list small { position: relative; z-index: 1; color: #b0adb7; font-size: 10px; }
.public-map-list > span > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.public-map-list > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(7,8,11,.28),rgba(7,8,11,.9)); }
.public-map-list b, .public-map-list small { position: relative; z-index: 1; text-shadow: 0 2px 6px #000; }
.public-profile-footer { display: grid; grid-template-columns: minmax(0,1fr) minmax(250px,.55fr); align-items: end; gap: 24px; margin-top: 24px; padding-top: 2px; border-top: 1px solid var(--line); }
.public-profile-footer-private { grid-template-columns: minmax(0,1fr); }
.card-neighbors { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card-neighbors a, .card-neighbors > span { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); display: flex; align-items: center; color: #9997a1; font-size: 9px; }
.card-neighbors a:last-child { justify-content: flex-end; }
.card-neighbors a:hover { border-color: var(--orange); color: #fff; }
.public-footer { min-height: 64px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #676670; font: 700 8px ui-monospace, monospace; }
.public-footer a { min-height: 44px; display: inline-flex; align-items: center; color: #aaa8b1; }
.public-card-controls { display: flex; align-items: center; justify-content: center; gap: 8px; }
.card-flip, .public-3d-toggle { min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 3px; background: #15161a; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #d5d1db; font: 700 10px ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.public-3d-toggle { min-width: 72px; }
.card-flip:hover, .public-3d-toggle:hover, .public-3d-toggle.is-active { border-color: var(--orange); color: #fff; }
.card-flip b { color: var(--orange); font-size: 15px; }
.public-swipe-hint { display: none; margin: 0; color: #777681; font: 700 8px ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.public-card-gallery.is-3d .public-swipe-hint { display: none; }

.public-download-overlay { position: fixed; z-index: 90; inset: 0; padding: 22px; display: grid; place-items: center; background: rgba(2,3,6,.72); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--modal-open-dur) var(--modal-ease); }
.public-download-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.public-download-overlay.is-closing { opacity: 0; visibility: visible; pointer-events: none; transition: opacity var(--modal-close-dur) var(--modal-ease); }

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

.public-download-modal { position: relative; width: min(460px,100%); padding: 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: linear-gradient(145deg,rgba(30,31,38,.98),rgba(13,14,18,.99)); box-shadow: 0 28px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.08); }
.public-download-modal > p { margin: 0; color: var(--orange); font: 700 9px ui-monospace, monospace; letter-spacing: .12em; }
.public-download-modal h2 { margin: 12px 0 8px; font: 850 32px/.95 "Arial Narrow",Impact,sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.public-download-modal > span { color: #9896a0; font-size: 12px; line-height: 1.45; }
.public-download-modal > div { margin-top: 24px; display: grid; gap: 8px; }
.public-download-modal > div button { min-height: 62px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px; background: #14151a; display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; cursor: pointer; }
.public-download-modal > div button:hover { border-color: rgba(255,151,55,.72); background: linear-gradient(100deg,rgba(255,151,55,.11),rgba(149,103,255,.08)); }
.public-download-modal > div b { font-size: 13px; }
.public-download-modal > div small { color: #8d8b95; font-size: 10px; }
.public-download-close { position: absolute; top: 11px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #92909a; font-size: 22px; line-height: 1; cursor: pointer; }
.public-download-close:hover { background: rgba(255,255,255,.08); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .t-modal, .t-card-flip-stage, .card-3d-object { transition: none !important; animation: none !important; }
}
.public-loading, .public-not-found { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }
.public-loading h1, .public-not-found h1 { margin: 10px 0 0; font: 800 clamp(38px, 5vw, 66px)/1 "Arial Narrow", sans-serif; text-transform: uppercase; }
.public-loading p, .public-not-found p { margin: 0; color: #777681; }
.public-not-found > span { color: var(--orange); font: 700 9px ui-monospace, monospace; }
.public-not-found a { margin-top: 12px; color: var(--orange); font-size: 12px; }

.featured-card-link { position: relative; overflow: hidden; min-height: 330px; padding: 28px; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 78% 22%, rgba(255,151,55,.2), transparent 31%), #111216; }
.featured-card-link::before { content: ""; position: absolute; width: 260px; height: 260px; top: -70px; right: -70px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.018); }
.featured-card-link span, .featured-card-link strong, .featured-card-link small { position: relative; }
.featured-card-link span { color: var(--orange); font: 700 9px ui-monospace, monospace; }
.featured-card-link strong { font: 900 50px "Arial Narrow", Impact, sans-serif; }
.featured-card-link small { color: #8a8892; }

.toast { position: fixed; z-index: 100; right: 20px; bottom: 20px; max-width: 360px; padding: 13px 16px; border: 1px solid var(--line-strong); border-left: 3px solid var(--orange); border-radius: 4px; background: #15161a; color: #e9e5ed; box-shadow: 0 20px 50px rgba(0,0,0,.45); font-size: 11px; }
.toast.is-success { border-left-color: #68d4a5; }
.toast.is-error { border-left-color: #ff6258; }

@media (max-width: 1180px) {
  .studio-workspace { grid-template-columns: minmax(0, 1fr) 390px; }
  .period-grid { grid-template-columns: repeat(3, 1fr); }
  .choice-tile:nth-child(3) { border-right: 0; }
  .choice-tile:nth-child(n+4) { border-top: 1px solid var(--line); }
  .public-dossier { max-width: 920px; }
}

@media (max-width: 900px) {
  .studio-shell { width: min(100% - 24px, 720px); }
  .studio-workspace { grid-template-columns: 1fr; }
  .studio-preview { position: fixed; z-index: 50; top: auto; left: 0; right: 0; bottom: 0; min-height: 0; max-height: 86vh; padding: 10px 18px 28px; border-top: 1px solid var(--line-strong); border-radius: 14px 14px 0 0; background: #0d0e11; transform: translateY(calc(100% - 52px)); transition: transform 300ms ease; overflow-x: hidden; overflow-y: auto; box-shadow: 0 -25px 80px rgba(0,0,0,.65); }
  .studio-preview.is-open { transform: translateY(0); }
  .preview-sheet-handle { width: 100%; min-height: 44px; margin-bottom: 6px; border: 0; background: transparent; display: grid; place-items: center; gap: 5px; color: #8e8c96; font-size: 9px; cursor: pointer; }
  .preview-sheet-handle span { width: 42px; height: 3px; border-radius: 99px; background: #494851; }
  .studio-preview.is-open .preview-sheet-handle { min-height: 44px; margin-bottom: 0; }
  .studio-preview.is-open .preview-sheet-handle b { display: none; }
  .mobile-preview-trigger { display: grid; align-content: center; border: 0; background: transparent; text-align: right; }
  .mobile-preview-trigger span { color: var(--orange); font: 700 8px ui-monospace, monospace; }
  .mobile-preview-trigger strong { color: #ddd9e2; font-size: 11px; }
  .studio-player-card { width: min(330px, 86vw); }
  .public-shell { width: min(100% - 24px, 760px); }
  .public-card-gallery { width: min(380px,88vw); }
  .public-swipe-hint { display: block; }
  .public-profile-hero { grid-template-columns: 104px minmax(0,1fr); }
  .public-profile-photo { width: 104px; height: 104px; }
  .public-team-lockup { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 620px) {
  .studio-shell { width: 100%; padding: 0 10px 70px; }
  .studio-header { padding: 0 5px; }
  .studio-header > div > span { display: none; }
  .step-nav { margin: 14px 0; }
  .step-nav button { min-height: 52px; padding: 8px; justify-content: center; }
  .step-nav button strong { display: none; }
  .studio-form { border-radius: 4px; }
  .step-intro { padding: 26px 20px; }
  .form-section { padding: 22px 18px; }
  .studio-search-row { grid-template-columns: 1fr auto; }
  .studio-search-row select { grid-column: 1 / -1; grid-row: 2; min-height: 44px; border-top: 1px solid var(--line); border-left: 0; }
  .period-grid { grid-template-columns: 1fr; }
  .choice-tile, .choice-tile:nth-child(3) { border-right: 0; border-top: 1px solid var(--line); }
  .choice-tile:first-child { border-top: 0; }
  .metric-choice-grid, .override-grid, .chip-choice-grid, .switch-row, .form-grid.two-column, .range-grid { grid-template-columns: 1fr 1fr; }
  .segmented-choice { grid-template-columns: repeat(2, 1fr); }
  .segmented-choice button { border-bottom: 1px solid var(--line); }
  .export-actions { grid-template-columns: 1fr; }
  .studio-controls { grid-template-columns: 1fr 1fr; padding: 12px 18px; }
  .studio-controls > span { display: none; }
  .studio-controls button:last-child { grid-column: 2; }
  .public-header { grid-template-columns: 1fr auto; }
  .public-header > div { display: none; }
  .public-main { padding: 32px 0; }
  .public-dossier h1 { font-size: 62px; }
  .public-stats-ledger { grid-template-columns: repeat(2, 1fr); }
  .public-stats-ledger > div:nth-child(3n) { border-right: 1px solid var(--line); }
  .public-stats-ledger > div:nth-child(2n) { border-right: 0; }
  .public-stats-ledger > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .public-actions { grid-template-columns: 1fr; }
  .data-mode { grid-template-columns: 1fr; }
  .data-mode-button { min-height: 58px; }
  .public-story-grid, .public-performance-grid, .public-profile-footer { grid-template-columns: 1fr; }
  .ranked-data-two-column, .ranked-contact-grid { grid-template-columns: 1fr; }
  .public-profile-hero { grid-template-columns: 78px minmax(0,1fr); gap: 15px; }
  .public-profile-photo { width: 78px; height: 78px; }
  .public-dossier h1 { font-size: clamp(46px,15vw,62px); }
  .public-agent-list, .public-map-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 430px) {
  .metric-choice-grid, .override-grid, .chip-choice-grid, .switch-row, .form-grid.two-column, .range-grid { grid-template-columns: 1fr; }
  .visual-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .chip-choice { min-height: 94px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .chip-choice-map .chip-choice-copy { align-self: end; }
  .rank-ledger { grid-template-columns: 1fr; }
  .rank-ledger > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .rank-ledger > div:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
  .public-stats-ledger > div { min-height: 102px; padding: 17px 15px; border-top: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .public-stats-ledger > div:nth-child(3n) { border-right: 1px solid var(--line); }
  .public-stats-ledger > div:nth-child(2n) { border-right: 0; }
  .public-stats-ledger > div:nth-child(n+11) { border-bottom: 0; }
  .public-stats-ledger span { font-size: 9px; }
  .public-stats-ledger strong { font-size: 25px; }
  .public-stats-ledger small { font-size: 9px; }
  .public-meta { grid-template-columns: 1fr; gap: 0; margin: 22px 0; }
  .public-meta div { grid-template-columns: 104px minmax(0,1fr); min-height: 40px; padding: 10px 0; }
  .public-meta dt, .public-meta dd { font-size: 12px; }
}

/* Player card v2: 600 × 960 collectible format ------------------------- */
.player-card {
  --card-primary: #45efd0;
  --card-secondary: #9b63ff;
  --card-gradient: linear-gradient(142deg, #08c7b7 0%, #4167e8 28%, #6b45ea 45%, #d83cad 68%, #ff763f 100%);
  --card-ink: #fffaf2;
  --card-muted: rgba(255, 250, 242, .68);
  --card-wash: rgba(5, 6, 10, .32);
  --foil-x: 50%;
  --foil-y: 50%;
  --foil-texture-x: 50%;
  --foil-texture-y: 50%;
  aspect-ratio: 5 / 8;
  perspective: 800px;
  touch-action: pan-y;
}

.player-card-inner {
  border: 0;
  border-radius: 28px;
  color: var(--card-ink);
  background:
    linear-gradient(180deg, var(--card-wash), transparent 28%, transparent 68%, var(--card-wash)),
    radial-gradient(circle at 76% 17%, rgba(255, 255, 255, .23), transparent 34%),
    var(--card-gradient);
  box-shadow: 0 38px 100px rgba(0, 0, 0, .68), inset 0 0 35px rgba(255, 255, 255, .08);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin: 50% 50%;
  will-change: transform;
  transition: transform 180ms cubic-bezier(.2, .75, .25, 1), box-shadow 180ms ease;
}

.player-card.is-tilting .player-card-inner { transition: none; }
.player-card-inner::before,
.card-noise,
.card-beam,
.card-header,
.card-identity-mark,
.card-rings { display: none !important; }

.card-agent-art,
.studio-player-card .card-agent-art {
  top: 8%;
  right: -12%;
  width: 82%;
  height: 43%;
  opacity: .46;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(4, 5, 9, .3));
  transform: rotate(4deg);
}

.card-map-background {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .72;
  mix-blend-mode: luminosity;
  filter: saturate(82%) contrast(112%);
  pointer-events: none;
}

.background-team .card-agent-art { opacity: .22; transform: scale(.9) rotate(-3deg); }
.background-abstract .card-agent-art { display: none; }

.card-player,
.studio-player-card .card-player {
  top: 31%;
  left: 8%;
  right: 8%;
}

.card-player p,
.studio-player-card .card-player p {
  color: var(--card-muted);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .24);
}

.card-player h2,
.studio-player-card .card-player h2 {
  color: var(--card-ink);
  font-size: clamp(50px, 5.5vw, 72px);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .22);
}

.card-player > span {
  border-color: color-mix(in srgb, var(--card-ink) 34%, transparent);
  color: var(--card-ink);
  background: color-mix(in srgb, var(--card-wash) 72%, transparent);
}

.card-metrics,
.studio-player-card .card-metrics {
  top: 49%;
  bottom: auto;
  left: 8%;
  right: 8%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 0;
}

.card-metrics > div,
.studio-player-card .card-metrics > div,
.studio-player-card .card-metrics > div:nth-child(4),
.studio-player-card .card-metrics > div:nth-child(5),
.studio-player-card .card-metrics > div:nth-child(6) {
  min-height: 64px;
  padding: 11px 10px;
  border: 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--card-wash) 74%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card-ink) 13%, transparent);
}

.card-metrics span { color: var(--card-muted); }
.card-metrics strong,
.studio-player-card .card-metrics strong { color: var(--card-ink); font-size: 21px; }
.card-metrics small { display: none; }

.card-footer,
.is-back .card-footer {
  left: 8%;
  right: 8%;
  bottom: 6.5%;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  grid-template-columns: none;
}

.card-footer > b { display: none; }
.card-footer > div:nth-child(2),
.is-back .card-footer > div { display: grid; gap: 3px; }
.card-footer > div:nth-child(2) span,
.is-back .card-footer span { color: var(--card-muted); }
.card-footer > div:nth-child(2) strong,
.is-back .card-footer strong { color: var(--card-ink); }
.agent-stack span {
  border-color: color-mix(in srgb, var(--card-ink) 42%, transparent);
  background: color-mix(in srgb, var(--card-wash) 78%, transparent);
  color: var(--card-ink);
}

.back-identity {
  top: 9%;
  left: 8%;
  right: 8%;
}
.back-identity > span { color: var(--card-muted); }
.back-identity h2 { color: var(--card-ink); font-size: 52px; }
.back-identity p { color: var(--card-muted); }

.back-ledger {
  top: 28%;
  bottom: 15%;
  left: 8%;
  right: 8%;
  display: grid;
  grid-template-rows: .9fr 1fr 1fr 1.25fr;
  gap: 9px;
  border: 0;
}

.back-ledger section {
  padding: 12px 13px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-wash) 74%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card-ink) 12%, transparent);
}
.back-ledger section > span,
.back-ledger section > small,
.back-ledger section > div small { color: var(--card-muted); }
.back-ledger section > strong,
.back-ledger section > div b,
.back-story p { color: var(--card-ink); }

.card-surface-texture {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.card-surface-texture::before,
.card-surface-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.finish-matte .card-surface-texture {
  opacity: .72;
  mix-blend-mode: soft-light;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.15) 0 .45px, transparent .7px 2.4px),
    repeating-radial-gradient(circle at 73% 61%, rgba(0,0,0,.18) 0 .5px, transparent .8px 3px);
  background-size: 5px 7px, 7px 5px;
  filter: contrast(118%) saturate(72%);
}
.finish-matte .card-surface-texture::after {
  opacity: .16;
  background: repeating-linear-gradient(4deg, transparent 0 5px, rgba(255,255,255,.18) 5.5px 6px, transparent 6.5px 13px);
}
.finish-matte .card-shine { display: none; }

.finish-metallic .card-surface-texture {
  opacity: .64;
  mix-blend-mode: overlay;
  background:
    linear-gradient(108deg, transparent 17%, rgba(255,255,255,.08) 34%, rgba(255,255,255,.48) 48%, rgba(0,0,0,.18) 57%, transparent 74%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.11) 0 .55px, transparent .8px 3px);
  background-size: 180% 100%, 100% 4px;
  background-position: calc(var(--mx) * .45) 0, 0 0;
}
.finish-metallic .card-surface-texture::after {
  opacity: .28;
  background: linear-gradient(90deg, rgba(255,255,255,.06), transparent 18%, rgba(255,255,255,.14) 52%, transparent 84%);
}
.finish-metallic .card-shine {
  opacity: calc(var(--card-shine) * .42);
  mix-blend-mode: soft-light;
  background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.12) 38%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.1) 62%, transparent 80%);
  background-size: 190% 100%;
  background-position: var(--mx) 50%;
}

.finish-glitter .card-surface-texture {
  opacity: .78;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(ellipse at 12% 10%, rgba(255,222,147,.34) 0 5%, rgba(255,121,190,.18) 14%, transparent 31%),
    radial-gradient(ellipse at 82% 17%, rgba(126,255,231,.3) 0 4%, rgba(101,168,255,.19) 16%, transparent 34%),
    radial-gradient(ellipse at 25% 54%, rgba(160,255,204,.23) 0 7%, rgba(255,212,105,.15) 20%, transparent 38%),
    radial-gradient(ellipse at 78% 62%, rgba(244,115,255,.25) 0 5%, rgba(255,181,111,.17) 18%, transparent 38%),
    radial-gradient(ellipse at 40% 92%, rgba(111,222,255,.27) 0 6%, rgba(182,125,255,.18) 18%, transparent 38%),
    linear-gradient(118deg, rgba(88,255,218,.15) 2%, rgba(255,228,145,.17) 24%, rgba(255,119,210,.16) 46%, rgba(112,174,255,.18) 68%, rgba(173,255,215,.14) 88%);
  filter: saturate(138%) contrast(106%);
}
.finish-glitter .card-surface-texture::before {
  inset: -7%;
  opacity: .68;
  mix-blend-mode: color-dodge;
  background:
    linear-gradient(114deg,
      transparent 5%,
      rgba(102,255,224,.2) 19%,
      rgba(255,220,142,.24) 32%,
      rgba(255,255,255,.18) 44%,
      rgba(255,123,222,.24) 56%,
      rgba(123,166,255,.22) 69%,
      rgba(141,255,212,.18) 82%,
      transparent 96%);
  background-size: 220% 100%;
  background-position: var(--mx) 50%;
  filter: blur(8px) saturate(145%);
  transform: rotate(-3deg) scale(1.06);
}
.finish-glitter .card-surface-texture::after {
  opacity: .58;
  mix-blend-mode: overlay;
  background-image:
    url('/assets/foil-grain.svg'),
    repeating-linear-gradient(6deg, transparent 0 3px, rgba(255,255,255,.045) 3.5px 4px, transparent 4.5px 9px);
  background-size: cover, 100% 13px;
  background-position: var(--foil-texture-x) var(--foil-texture-y), 0 0;
  filter: contrast(132%);
  transition: background-position 110ms linear;
  will-change: background-position;
}
.finish-glitter .card-shine {
  opacity: var(--foil-opacity, calc(var(--card-shine) * .34));
  mix-blend-mode: color-dodge;
  background:
    linear-gradient(114deg,
      transparent 10%,
      rgba(85,255,229,.28) 24%,
      rgba(255,226,146,.52) 38%,
      rgba(255,255,255,.9) 48%,
      rgba(244,108,255,.48) 58%,
      rgba(102,154,255,.3) 72%,
      transparent 90%);
  background-size: 270% 180%;
  background-position: var(--foil-x) var(--foil-y);
  -webkit-mask-image: url('/assets/foil-grain.svg');
  mask-image: url('/assets/foil-grain.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: contrast(150%) saturate(155%) brightness(122%);
  transition: opacity 90ms linear, background-position 85ms linear;
  will-change: opacity, background-position;
}

.finish-glitter.is-tilting .card-shine,
.finish-glitter.is-tilting .card-surface-texture::after {
  transition-duration: 38ms;
}

.finish-aurora .card-surface-texture {
  opacity: .52;
  mix-blend-mode: color-dodge;
  background: linear-gradient(122deg, rgba(64,255,224,.32), transparent 28%, rgba(104,117,255,.42) 46%, rgba(233,82,255,.34) 64%, transparent 80%, rgba(255,204,89,.27));
  background-size: 220% 220%;
  background-position: var(--mx) var(--my);
  animation: cardAurora 7s ease-in-out infinite alternate;
}
@keyframes cardAurora { to { background-position: 100% 20%; } }

.finish-soft-glow .card-surface-texture {
  opacity: .42;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.38), transparent 42%);
}
.finish-soft-glow .card-shine {
  opacity: calc(var(--card-shine) * .28);
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.72), transparent 38%);
}

.map-preset-field { overflow: hidden; }
.map-preset-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
}
.map-preset {
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: #111216;
  color: #b7b4bd;
  cursor: pointer;
  position: relative;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.map-preset:hover,
.map-preset:focus-visible { border-color: rgba(255,255,255,.42); transform: translateY(-2px); }
.map-preset.is-selected { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,151,55,.18), inset 0 0 0 1px rgba(255,255,255,.28); }
.map-preset img,
.map-preset > span {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
}
.map-preset-none > span { background: linear-gradient(145deg,#08c7b7,#4167e8 33%,#8a48eb 56%,#df3aa5 75%,#ff763f); }
.map-preset-banner img { object-position: 50% 32%; filter: saturate(106%) contrast(108%) brightness(1.02); }
.map-preset-banner:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18),0 8px 22px rgba(46,211,255,.08); }
.map-preset-banner:disabled { cursor: not-allowed; opacity: .38; }
.map-preset-banner:disabled > span { background: linear-gradient(145deg,#1d2029,#111216); }
.map-preset small {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  padding: 4px 3px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(5,6,9,.76);
  color: #f4f0e8;
  font: 700 6px/1 ui-monospace, monospace;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.color-grid.is-disabled { opacity: .38; }
.color-grid.is-disabled input { cursor: not-allowed; }

.studio-preview { min-height: 0; }

@media (max-width: 900px) {
  .studio-preview { min-height: 0; }
  .studio-player-card { width: min(330px, 82vw); }
  .map-preset-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .language-option-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .language-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .player-card { width: min(320px, 86vw); }
  .map-preset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .player-card-inner { transform: none !important; transition: none !important; }
  .finish-aurora .card-surface-texture { animation: none; }
  .finish-glitter .card-shine { opacity: calc(var(--card-shine) * .24); transition: none; }
  .finish-glitter .card-surface-texture::after { background-position: 50% 50%, 0 0; transition: none; }
}