/* Hallmark · macrostructure: Narrative Workflow (14) · genre: atmospheric
 * hero: H6 Photographic · knobs: image=full-bleed, caption=overlaid, text=left-bias
 * nav: N5 Floating pill · footer: Ft5 Statement
 * features: F4 Step sequence · knobs: numbering=01/02/03, layout=vertical stack, connector=line
 * theme: in-game palette (crates/web/index.html :root) — not a catalog theme
 * pre-emit critique: P5 H4 E4 S5 R4 V5
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–55)
 *
 * 팔레트·9-슬라이스 실측값은 crates/web/index.html에서 그대로 가져왔다 —
 * 랜딩과 게임이 다른 색을 쓰면 클릭한 순간 다른 제품이 된다.
 */

/* ── 도트 글자 ────────────────────────────────────────────
   5×7 비트맵이라 **9의 배수 크기에서만 또렷하다.** 18px과 27px만 쓴다.
   그리고 문단은 도트로 쓰지 않는다 — 라벨·버튼·수치만 도트가 맡는다. */
@font-face{ font-family:pix; font-display:block; src:url(static/pix.woff2) format("woff2") }

:root{
  /* 면 */
  --ground:#141b33; --deep:#0a0e1c; --ink:#1a1030;
  /* 글자 — `--body`와 `--sub`는 종전에 본문·리드에 하드코딩돼 있던 값이다.
     `--on-accent`는 순수 #fff이었다 (게이트 7). 앵커 색조로 살짝 눕힌다. */
  --text:#f3ecdc; --body:#ded6c4; --sub:#cfc7b6; --dim:#98a2bd;
  --accent:#ff2e83; --on-accent:#fff6fa;
  /* 선 — `--rule`은 어두운 `--deep` 위에서 쓴다. 밝은 `--ground` 위에서는
     대비가 1.19:1까지 떨어져 **선이 안 보였다**(실측). 그 위에서는
     `--rule-lift`를 쓴다. */
  --rule:#22284a; --rule-lift:#454d7d; --rule-ink:#2a2050;
  /* 마스크 전용 불투명 — 색이 아니라 알파 채널 스텐실이다 */
  --stencil:#000;
  --scrim-strong:rgba(10,14,28,.96);
  --scrim-deep:rgba(10,14,28,.92);
  --scrim-mid:rgba(10,14,28,.86);
  --scrim-soft:rgba(10,14,28,.74);
  --scrim-low:rgba(10,14,28,.35);
  --scrim-edge:rgba(10,14,28,.72);
  --scrim-fade:rgba(10,14,28,.9);
  --scrim-panel:rgba(10,14,28,.6);
  --overlay-nav:rgba(10,14,28,.9);
  --overlay-sticky:rgba(10,14,28,.82);
  --shadow-float:rgba(10,14,28,.35);
  --shadow-face:rgba(10,14,28,.85);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-short:180ms;

  --font-pix:pix, ui-monospace, monospace;
  --font-display:var(--font-pix);
  --font-ui:system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 4pt 스케일. 여백·간격은 전부 여기서만 고른다 (게이트 24).
     ⚠️ 9-슬라이스 `border-width`는 여기 해당되지 않는다 — 그 숫자는
     `part_fit.py`가 그림에서 잰 값이라 바꾸면 프레임이 깨진다. */
  --space-3xs:4px;  --space-2xs:8px;  --space-xs:12px; --space-sm:16px;
  --space-md:24px;  --space-lg:32px;  --space-xl:48px; --space-2xl:64px;
  --space-3xl:96px; --space-4xl:112px;

  --wrap:1120px;
}
*{ box-sizing:border-box }
/* 게이트 34 — 모든 폭에서 가로 스크롤 금지. `hidden`이 아니라 `clip`이다
   (`clip`은 자손의 sticky/fixed를 살려 둔다). */
html,body{ overflow-x:clip }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--deep); color:var(--text);
  font-family:var(--font-ui); font-size:17px; line-height:1.65;
  -webkit-text-size-adjust:100%;
}
img{ max-width:100%; display:block }
a{ color:inherit }

/* 키보드로 오는 사람에게도 지금 어디에 있는지 보여야 한다 (게이트 26).
   ⚠️ 포커스 링은 **즉시** 나타난다 — transition을 걸지 않는다. */
:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:1px;
}

/* ── 9-슬라이스 부품 ──────────────────────────────────────
   ⚠️ border-image 두께는 **내용 상자를 먹는다.** 안쪽 여백을 따로 준다. */
.panel{ border:20px solid transparent;
  border-image:url(static/ui/panel.webp) 15 fill / 20px / 0 stretch }
.talk{ border:18px solid transparent;
  border-image:url(static/ui/talk.webp) 27 fill / 18px / 0 stretch }
.chip{ border:14px solid transparent; display:inline-block;
  border-image:url(static/ui/chip.webp) 11 fill / 14px / 0 stretch }
.badge{ border:10px solid transparent; display:inline-block;
  border-image:url(static/ui/badge.webp) 13 fill / 10px / 0 stretch }

/* ── 버튼 ─────────────────────────────────────────────── */
.btn{
  border:14px solid transparent; display:inline-block;
  border-image:url(static/ui/btn.webp) 21 fill / 14px / 0 stretch;
  font-family:var(--font-pix); font-size:18px; letter-spacing:0;
  -webkit-font-smoothing:none; color:var(--text);
  text-decoration:none; padding:0 var(--space-xs); line-height:2;
  /* ⚠️ 게이트 49 — 클릭 대상은 **한 줄짜리 물건이다.** 320px에서 헤더
     "PLAY FREE"가 두 줄로 접혀 버튼이 고장 난 것처럼 보였다(실측). */
  white-space:nowrap;
  transition:transform var(--dur-short) var(--ease-out);
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn--go{ color:var(--on-accent); text-shadow:0 0 14px var(--accent) }
.btn--ghost{ border-image-source:url(static/ui/well.webp); color:var(--dim) }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--space-md) }

.label{
  font-family:var(--font-pix); font-size:18px; letter-spacing:0;
  -webkit-font-smoothing:none; color:var(--accent);
  display:block; margin-bottom:var(--space-sm);
}
h2{
  font-size:clamp(28px,4vw,42px); line-height:1.2; margin:0 0 var(--space-sm);
  font-weight:700; letter-spacing:-.02em;
  /* 게이트 51 — 긴 합성어가 좁은 화면을 넘지 않게 */
  overflow-wrap:anywhere; min-width:0;
}
h3{ font-size:21px; margin:0 0 var(--space-2xs); font-weight:700 }
body.landing h2{ font-family:var(--font-display); font-weight:400; letter-spacing:0 }
body.landing h3{ font-family:var(--font-display); font-weight:400; letter-spacing:0 }
p{ margin:0 0 var(--space-sm); color:var(--body) }
.dim{ color:var(--dim) }

header{
  position:sticky; top:0; z-index:50;
  background:var(--overlay-sticky); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
body.landing > header{
  position:fixed; top:16px; left:50%;
  width:min(calc(100% - 32px),640px); transform:translateX(-50%);
  background:var(--overlay-nav); backdrop-filter:blur(10px);
  border:1px solid var(--rule-lift); border-radius:999px;
  box-shadow:0 10px 28px var(--shadow-float);
}
.bar{
  max-width:var(--wrap); margin:0 auto;
  padding:var(--space-xs) var(--space-md);
  /* 게이트 36 — 높이가 다른 것들이 한 줄에 서면 중앙을 명시한다 */
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm);
}
body.landing .bar{ width:100%; max-width:none; padding:var(--space-2xs) var(--space-xs) }
.mark{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-pix); font-size:18px; letter-spacing:.03em;
  -webkit-font-smoothing:none; text-decoration:none; white-space:nowrap;
  line-height:1;
}
.mark__symbol{ width:28px; height:28px; flex:0 0 auto; object-fit:contain }

/* ⚠️ 320px에서 워드마크(132px) + 버튼(160px) + 여백(48px) = 340px 로
   **20px 넘쳤다.** `nowrap`만 걸면 접히는 대신 잘린다 — 게이트 49의
   1순위 수정은 "라벨을 줄인다"이다. 헤더에서만 PLAY FREE → PLAY. */
.lbl-short{ display:none }
@media(max-width:420px){
  .bar{ padding:var(--space-xs) var(--space-sm) }
  .bar .lbl-full{ display:none }
  .bar .lbl-short{ display:inline }
}

/* ══ 히어로 — H6 Photographic ══════════════════════════
   아무도 없는 스트리밍 방. 그가 아직 없다는 것이 곧 카피다. */
.hero{ position:relative; overflow:hidden; min-height:min(88vh,760px); display:flex }
.hero__bg{
  position:absolute; inset:0; background:url(static/hero.webp) center 38%/cover no-repeat;
  filter:saturate(.9);
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--scrim-strong) 0%, var(--scrim-mid) 42%, var(--scrim-low) 72%, var(--scrim-edge) 100%),
    radial-gradient(120% 80% at 50% 120%, var(--scrim-fade), transparent 60%);
}
/* 게이트 44 — 아래 여백이 위보다 두꺼워야 히어로가 다음 섹션에 얹힌다 */
.hero__in{
  position:relative; max-width:var(--wrap); margin:0 auto;
  padding:var(--space-2xl) var(--space-md) var(--space-3xl);
  display:flex; align-items:center; width:100%;
}
.hero__copy{ max-width:600px }
.title{
  font-family:var(--font-pix); font-size:36px; letter-spacing:0;
  -webkit-font-smoothing:none; margin:0 0 var(--space-md); line-height:1.3;
}
.title b{ color:var(--accent); font-weight:400 }
.hero h1{
  font-size:clamp(32px,5.2vw,56px); line-height:1.08; margin:0 0 var(--space-md);
  font-weight:700; letter-spacing:-.025em; overflow-wrap:anywhere; min-width:0;
}
.hero .sub{ font-size:clamp(18px,2.2vw,22px); color:var(--sub); margin:0 0 var(--space-lg) }
.cta{ display:flex; gap:var(--space-sm); flex-wrap:wrap; align-items:center }
.hero__note{ margin-top:var(--space-md); font-size:14px; color:var(--dim) }
.hero__route{
  display:flex; gap:var(--space-xs); align-items:center; flex-wrap:wrap;
  margin:var(--space-md) 0 0; color:var(--dim);
  font-family:var(--font-pix); font-size:14px; -webkit-font-smoothing:none;
}
.hero__route span{ color:var(--accent) }

/* 히어로 인물 — 표정이 조용히 바뀐다. 12종이 이미 있으니 안 쓸 이유가 없다.
   ⚠️ **폭으로 크기를 잡으면 안 된다.** 세로로 긴 인물이라 폭에 맞추는 순간
   히어로 높이를 넘겨 머리가 잘렸다. 상자를 히어로 높이에 붙이고
   그림은 높이 기준으로 맞춘다. */
.hero__her{
  position:absolute; right:max(-40px,-4vw); top:0; bottom:0; width:min(46vw,520px);
  pointer-events:none; mask-image:linear-gradient(to bottom,var(--stencil) 78%,transparent 99%);
}
.hero__her img{
  position:absolute; right:0; bottom:0; height:100%; width:auto; max-width:none;
  object-fit:contain; object-position:bottom right; opacity:0;
  filter:drop-shadow(-24px 0 60px var(--shadow-face));
}
.hero__her img.on{ opacity:1 }
/* ⚠️ 좁은 화면에서는 인물을 **내린다.** 흐리게 깔아 봤더니 얼굴이 제목·버튼
   바로 뒤에 앉아 둘 다 안 읽혔다. 배경(빈 방)만으로도 충분하고, 얼굴은
   바로 아래 로스터에서 여섯 번 나온다. 공유 카드(og:image)도 얼굴이다. */
@media(max-width:900px){
  .hero__her{ display:none }
  .hero{ min-height:min(84vh,680px) }
  .hero__bg{ background-position:64% 42% }
  .hero__scrim{
    background:
      linear-gradient(180deg, var(--scrim-deep) 0%, var(--scrim-soft) 46%, var(--scrim-fade) 100%);
  }
  .hero__in{
    padding:var(--space-4xl) var(--space-md) var(--space-2xl);
    align-items:flex-start;
  }
}

/* ══ 지금 플레이 가능 스트립 ═══════════════════════════ */
.strip{ background:var(--ground); border-block:1px solid var(--rule) }
.strip__in{
  max-width:var(--wrap); margin:0 auto;
  padding:var(--space-md);
  display:flex; gap:var(--space-xs) var(--space-lg); flex-wrap:wrap; align-items:center;
}
.strip .chip{ font-family:var(--font-pix); font-size:18px; -webkit-font-smoothing:none }
.strip .say{ color:var(--dim); font-size:15px }

/* ══ 섹션 리듬 ════════════════════════════════════════
   ⚠️ 종전에는 다섯 섹션이 전부 `padding:96px 0`이었다 — 게이트 9가 잡는
   "리듬 없음"이다. 섹션마다 다르게 준다. 조인 것과 벌린 것이 있어야 한다. */
section{ padding:var(--space-3xl) 0; scroll-margin-top:96px }
#comments{ padding:var(--space-3xl) 0 var(--space-xl) }
#how{ padding:var(--space-xl) 0 var(--space-3xl) }
#roster{ padding:var(--space-2xl) 0 var(--space-xl) }
#stage{ padding:var(--space-3xl) 0 var(--space-4xl) }
.section--tint{ background:var(--ground) }
.lede{ font-size:19px; max-width:68ch }

/* ══ 댓글 ═════════════════════════════════════════════
   Slay the Princess는 이 자리에 언론 리뷰를 넣는다. 우리는 리뷰가 없다.
   대신 **게임이 쓴 그의 댓글창**을 넣는다 — 없는 신뢰를 빌리는 대신
   있는 물건(글)을 보여주는 쪽이다. 출처는 아래에 분명히 밝힌다.

   9-슬라이스 대사 상자를 쓰는 자리는 페이지에서 여기 하나뿐이다. 댓글이
   실제로 대사라서 그렇고, 세 덩어리가 서로 다른 모양이어야 하기 때문이다. */
.thread{ display:grid; gap:var(--space-sm); grid-template-columns:repeat(12,minmax(0,1fr)) }
.thread .cmt:nth-child(1){ grid-column:span 7 }
.thread .cmt:nth-child(2){ grid-column:span 5 }
.thread .cmt:nth-child(3){ grid-column:span 4 }
.thread .cmt:nth-child(4){ grid-column:span 8 }
.thread .cmt:nth-child(5){ grid-column:span 3 }
.thread .cmt:nth-child(6){ grid-column:span 5 }
.cmt{ padding:var(--space-3xs) }
.cmt .u{
  font-family:var(--font-pix); font-size:18px; letter-spacing:0;
  -webkit-font-smoothing:none; color:var(--accent); display:block; margin-bottom:var(--space-2xs);
}
.cmt p{ margin:0; font-size:16px }
.cmt .meta{
  font-family:var(--font-pix); font-size:18px; -webkit-font-smoothing:none;
  color:var(--dim); margin-top:var(--space-xs); display:block;
}
.thread__src{ margin-top:var(--space-md); font-size:14px; color:var(--dim) }

.journey{ list-style:none; margin:var(--space-lg) 0 0; padding:0; border-top:1px solid var(--rule-lift) }
.journey li{
  display:grid; grid-template-columns:8ch minmax(0,1fr); gap:var(--space-md);
  padding:var(--space-md) 0; border-bottom:1px solid var(--rule-lift);
}
.journey__mark{ display:flex; flex-direction:column; gap:var(--space-2xs); color:var(--accent) }
.journey__mark span{ font-family:var(--font-pix); font-size:27px; line-height:1; -webkit-font-smoothing:none }
.journey__mark small{ color:var(--dim); font-family:var(--font-pix); font-size:14px; -webkit-font-smoothing:none }
.journey h3{ margin:0 0 var(--space-2xs) }
.journey p{ margin:0; color:var(--body); max-width:70ch }

/* ══ 로스터 ═══════════════════════════════════════════ */
.roster{ display:flex; gap:var(--space-sm); overflow-x:auto; padding:var(--space-3xs) 0 var(--space-sm); scroll-snap-type:x mandatory }
.roster figure{ margin:0; flex:0 0 200px; scroll-snap-align:start }
/* 인물은 가슴께에서 잘려 있다 — 그대로 두면 단면이 보인다. 아래를 흘린다. */
.roster img{ width:100%; mask-image:linear-gradient(to bottom,var(--stencil) 74%,transparent 99%) }
.roster figcaption{
  font-family:var(--font-pix); font-size:18px; letter-spacing:0;
  -webkit-font-smoothing:none; color:var(--dim); margin-top:var(--space-2xs);
}

/* ══ 네트워크 ═════════════════════════════════════════
   앱 넷은 카드가 아니라 **한 줄로 늘어선 띠**다. 위 명세표가 세로 규칙선,
   여기는 가로 구분선 — 두 덩어리가 같은 모양이 되지 않게. */
.apps{
  margin-top:var(--space-lg);
  display:flex; flex-wrap:wrap;
}
.apps .app{
  flex:1 1 200px; min-width:0;
  padding:0 var(--space-md);
  border-left:1px solid var(--rule-lift);
}
.apps .app:first-child{ flex-basis:40%; padding-left:0; border-left:0 }
.apps .n{
  font-family:var(--font-pix); font-size:27px; letter-spacing:0;
  -webkit-font-smoothing:none; display:block; margin-bottom:var(--space-2xs);
}
.apps .app p{ font-size:15px; margin:0; color:var(--dim) }
/* ⚠️ 768px에서 넷이 **3+1로 쪼개져** 마지막 하나가 한 줄을 통째로 먹었다.
   `.feat`에서 고쳤던 고아 문제가 여기서 되살아난 것이다. 중간 폭에서는
   2×2로 접는다 — 그리고 두 번째 줄의 첫 칸은 세로선을 뗀다. */
@media(min-width:721px) and (max-width:960px){
  .apps .app{ flex:0 0 50%; }
  .apps .app:nth-child(3){ padding-left:0; border-left:0 }
  .apps .app:nth-child(n+3){ margin-top:var(--space-md) }
}
@media(max-width:720px){
  .apps{ gap:var(--space-md) }
  .apps .app{ flex:1 1 100%; padding:0 0 0 var(--space-sm); border-left:1px solid var(--rule-lift) }
  .apps .app:first-child{ padding-left:var(--space-sm); border-left:1px solid var(--rule-lift) }
}

.stage{ position:relative; overflow:hidden; margin-top:var(--space-2xl) }
.stage__bg{ position:absolute; inset:0; background:url(static/street.webp) center 55%/cover no-repeat }
.stage__scrim{ position:absolute; inset:0; background:linear-gradient(90deg,var(--scrim-strong),var(--scrim-panel)) }
/* ⚠️ 가로 그라디언트는 글이 왼쪽에 몰려 있을 때만 맞다. 좁은 화면에서는
   글이 폭을 다 쓰므로 오른쪽 끝이 알파 0.6 위에 얹혀 상점 조명과 겹쳤다.
   여기서는 균일하게 덮는다 (게이트 40). */
@media(max-width:720px){
  .stage__scrim{ background:var(--scrim-deep) }
}
.stage__in{ position:relative; padding:var(--space-xl) var(--space-2xs) }
.stage__in .lede{ max-width:56ch }

/* ══ 경고 ═════════════════════════════════════════════
   Slay the Princess의 "Don't even think about trying to romance her."
   같은 자리다. 톤을 정하면서 동시에 잘못 온 관객을 돌려보낸다. */
.warn{ text-align:center; padding-block:var(--space-3xl) var(--space-2xl) }
/* ⚠️ 순서 주의 — 아래 `.warn p`가 `.big`도 잡아 문장이 흐려졌었다.
   그래서 `.big`을 뒤에 두고 색을 되돌린다. */
.warn p{ max-width:44ch; margin:0 auto; color:var(--dim) }
.warn .big{
  font-size:clamp(26px,4.4vw,44px); font-weight:700; line-height:1.25;
  margin:0 auto var(--space-sm); max-width:15ch; letter-spacing:-.02em;
  color:var(--text); overflow-wrap:anywhere; min-width:0;
}
body.landing .warn .big{ font-family:var(--font-display); font-weight:400 }

/* ══ 마지막 CTA ═══════════════════════════════════════ */
.end{ text-align:center; padding-block:var(--space-md) var(--space-xl) }
.end .cta{ justify-content:center }
.back{ color:var(--dim); font-family:var(--font-pix); font-size:14px; -webkit-font-smoothing:none; text-decoration:none; white-space:nowrap }
.back:hover{ color:var(--text) }

footer{ background:var(--ink); padding:var(--space-lg) 0; border-top:1px solid var(--rule-ink) }
.foot{ display:flex; gap:var(--space-sm); flex-wrap:wrap; align-items:center; font-size:14px; color:var(--dim) }
.foot a{ text-decoration:none; color:var(--dim); white-space:nowrap }
.foot__statement{ max-width:38ch; margin:0 0 var(--space-md); color:var(--text); font-family:var(--font-display); font-size:20px; line-height:1.3 }
.foot__meta{ display:flex; gap:var(--space-sm); flex-wrap:wrap; align-items:center; font-size:14px; color:var(--dim) }
.foot__meta a{ text-decoration:none; color:var(--dim); white-space:nowrap }
.foot a:hover{ color:var(--text) }
.foot__meta .sp{ margin-left:auto }
body.landing .foot{ display:block }

.header-actions{ display:flex; align-items:center; gap:var(--space-2xs) }
.header-fan{ font-size:14px; line-height:1.7; padding-inline:var(--space-2xs) }
.fan-page{ background:var(--deep); }
.fan-hero{ position:relative; overflow:hidden; min-height:620px; border-bottom:1px solid var(--rule) }
.fan-hero::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 78% 32%,rgba(255,46,131,.18),transparent 25%),
  linear-gradient(135deg,var(--deep) 0%,#151b38 56%,#27153f 100%) }
.fan-hero::after{ content:""; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(90deg,#000,transparent 78%) }
.fan-hero__in{ position:relative; z-index:1; max-width:var(--wrap); min-height:620px; margin:0 auto; padding:var(--space-4xl) var(--space-md) var(--space-2xl); display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.8fr); gap:var(--space-xl); align-items:center }
.fan-hero__copy{ max-width:620px }
.fan-kicker,.fan-label{ display:block; margin:0 0 var(--space-xs); color:var(--accent); font-family:var(--font-pix); font-size:14px; line-height:1.3; -webkit-font-smoothing:none }
.fan-hero h1{ max-width:10ch; margin:0 0 var(--space-md); font-size:clamp(44px,6vw,76px); line-height:1.02; letter-spacing:-.03em; overflow-wrap:anywhere }
.fan-hero .sub{ max-width:40ch; margin:0 0 var(--space-lg); color:var(--sub); font-size:20px; line-height:1.55 }
.fan-proof{ display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-md); margin-top:var(--space-lg); color:var(--dim); font-family:var(--font-pix); font-size:14px; -webkit-font-smoothing:none }
.fan-proof b{ color:var(--text); font-weight:400 }
.fan-hero__visual{ position:relative; min-height:440px; display:flex; justify-content:flex-end; align-items:flex-end }
.fan-hero__visual::before{ content:""; position:absolute; width:360px; height:360px; right:12%; bottom:18%; border:1px solid var(--rule-lift); border-radius:50%; box-shadow:0 0 0 24px rgba(255,46,131,.04),0 0 0 48px rgba(255,46,131,.025) }
.fan-hero__portrait{ position:relative; z-index:1; width:min(100%,390px); height:520px; object-fit:cover; object-position:center top; mask-image:linear-gradient(to bottom,#000 78%,transparent 100%); filter:drop-shadow(-18px 12px 0 rgba(10,14,28,.65)) }
.fan-hero__tag{ position:absolute; z-index:2; left:0; bottom:56px; max-width:230px; padding:var(--space-xs); background:var(--ink); border-left:2px solid var(--accent); color:var(--text); font-family:var(--font-pix); font-size:14px; line-height:1.55; -webkit-font-smoothing:none }
.fan-main{ padding:var(--space-3xl) 0 var(--space-4xl) }
.fan-section{ margin-top:var(--space-3xl) }
.fan-section:first-child{ margin-top:0 }
.fan-section__head{ display:flex; justify-content:space-between; align-items:end; gap:var(--space-md); margin-bottom:var(--space-lg) }
.fan-section__head h2{ margin:0; max-width:18ch }
.fan-section__head p{ max-width:42ch; margin:0; color:var(--dim); font-size:15px }
.fan-creator-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:var(--space-md); align-items:stretch }
.fan-directory__bar{ display:flex; justify-content:space-between; gap:var(--space-sm); padding:var(--space-2xs) 0; border-top:1px solid var(--rule-lift); border-bottom:1px solid var(--rule-lift); color:var(--dim); font-family:var(--font-pix); font-size:11px; -webkit-font-smoothing:none }
.fan-directory__bar b{ color:var(--text); font-weight:400 }
.fan-directory__status{ margin:var(--space-sm) 0 0; padding:var(--space-2xs) var(--space-xs); border-inline-start:2px solid var(--accent); background:var(--ink); color:var(--text); font-size:12px; line-height:1.45 }
.fan-directory__status.is-success{ border-color:#7fc7a0; color:#7fc7a0 }
.fan-directory__tools{ display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:var(--space-sm); margin-block-start:var(--space-sm) }
.fan-directory__tools label{ display:flex; flex-direction:column; gap:var(--space-3xs); color:var(--accent); font:10px var(--font-pix); -webkit-font-smoothing:none }
.fan-directory__tools input,.fan-directory__tools select{ min-height:42px; width:100%; padding:0 var(--space-xs); border:1px solid var(--rule-lift); border-radius:0; background:var(--ink); color:var(--text); font:14px var(--font-ui) }
.fan-directory__tools input::placeholder{ color:var(--dim) }
.fan-recommendation{ margin-block-start:var(--space-lg); padding-block-end:var(--space-md); border-block-end:1px solid var(--rule-lift) }
.fan-recommendation__head{ display:flex; justify-content:space-between; align-items:end; gap:var(--space-md); margin-block-end:var(--space-sm) }
.fan-recommendation__head h3{ margin:.2rem 0 0; font-family:var(--font-pix); font-size:22px; font-weight:400; -webkit-font-smoothing:none }
.fan-recommendation__head small{ max-width:34ch; color:var(--dim); font-size:11px; text-align:right }
.fan-creator-list--recommended{ margin-block-start:0 }
.fan-creator-list--recommended .fan-creator-card{ border-color:var(--color-accent-soft) }
.fan-full-list-head{ display:flex; justify-content:space-between; gap:var(--space-sm); align-items:baseline; margin-block-start:var(--space-lg); color:var(--accent); font:10px var(--font-pix); -webkit-font-smoothing:none }
.fan-full-list-head small{ color:var(--dim); font:11px var(--font-ui) }
.fan-creator-list{ display:flex; flex-direction:column; gap:var(--space-2xs); margin-top:var(--space-sm) }
.fan-creator-card{ display:grid; grid-template-columns:48px 180px minmax(0,1fr) minmax(280px,.7fr) minmax(190px,.6fr) auto; gap:var(--space-sm); align-items:center; min-width:0; padding:var(--space-2xs); border:1px solid var(--rule); background:rgba(20,27,51,.72); transition:border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out) }
.fan-creator-card:hover{ border-color:var(--rule-lift); transform:translateX(4px) }
.fan-creator-card__rank{ color:var(--accent); font-family:var(--font-pix); font-size:24px; -webkit-font-smoothing:none }
.fan-creator-card__pfp{ width:180px; height:180px; object-fit:cover; border:1px solid var(--rule-lift); background:var(--ink) }
.fan-creator-card__identity{ min-width:0 }
.fan-creator-card__identity h3{ margin:0 0 2px; font-size:20px }
.fan-creator-card__identity p{ margin:0; color:var(--dim); font-family:var(--font-pix); font-size:11px; overflow-wrap:anywhere; word-break:break-word; -webkit-font-smoothing:none }
.fan-creator-card__identity span{ display:inline-block; margin-top:var(--space-2xs); padding:2px 6px; border:1px solid var(--accent); color:var(--accent); font-family:var(--font-pix); font-size:10px; -webkit-font-smoothing:none }
.fan-signal-badges{ display:flex; flex-wrap:wrap; gap:var(--space-3xs); margin-top:var(--space-2xs) }
.fan-signal-badges b{ padding:2px 5px; border:1px solid var(--rule-lift); color:var(--text); font:9px var(--font-pix); font-weight:400; -webkit-font-smoothing:none }
.fan-creator-card__metrics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2xs) var(--space-xs); min-width:0 }
.fan-creator-card__metric{ min-width:0 }
.fan-creator-card__metric b{ display:block; color:var(--text); font-family:var(--font-pix); font-size:14px; font-weight:400; white-space:nowrap; -webkit-font-smoothing:none }
.fan-creator-card__metric span{ display:block; color:var(--dim); font-family:var(--font-pix); font-size:9px; white-space:nowrap; -webkit-font-smoothing:none }
.fan-creator-card__supporters{ min-width:0 }
.fan-creator-card__supporters > span{ display:block; margin-bottom:4px; color:var(--dim); font-family:var(--font-pix); font-size:9px; -webkit-font-smoothing:none }
.fan-supporter-row{ display:flex; align-items:center; min-width:0 }
.fan-supporter{ width:28px; height:28px; margin-left:-5px; object-fit:cover; border:2px solid var(--ground); background:var(--ink) }
.fan-supporter:first-child{ margin-left:0 }
.fan-supporter-amount{ margin-left:var(--space-2xs); color:var(--text); font-family:var(--font-pix); font-size:11px; white-space:nowrap; -webkit-font-smoothing:none }
.fan-creator-card > .btn{ grid-column:6; grid-row:1; justify-self:end; font-size:12px; padding-inline:var(--space-2xs); }
.fan-screen[hidden]{ display:none }
.fan-back{ margin:0 0 var(--space-lg); padding:0; border:0; background:none; color:var(--dim); font-family:var(--font-pix); font-size:13px; cursor:pointer; -webkit-font-smoothing:none }
.fan-back:hover{ color:var(--text) }
.fan-detail__head,.fan-content-detail__head{ display:flex; justify-content:space-between; align-items:end; gap:var(--space-md); padding-bottom:var(--space-md); border-bottom:1px solid var(--rule-lift) }
.fan-detail__identity{ display:flex; align-items:center; gap:var(--space-sm); min-width:0 }
.fan-detail__identity img{ width:220px; height:260px; object-fit:cover; object-position:center top; border:1px solid var(--rule-lift); background:var(--ink) }
.fan-detail__identity h2,.fan-content-detail__head h2{ margin:0 0 var(--space-2xs); max-width:22ch }
.fan-detail__identity p,.fan-content-detail__head p{ margin:0; color:var(--dim); font-size:15px; overflow-wrap:anywhere; word-break:break-word }
.fan-content-detail__head .fan-label{ overflow-wrap:anywhere; word-break:break-word }
.fan-detail__actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-2xs) }
.fan-detail__actions .btn{ font-size:12px; padding-inline:var(--space-2xs) }
.member-action:disabled,#support-button:disabled{ opacity:.45; filter:grayscale(.5); cursor:not-allowed; transform:none }
.fan-detail__metrics{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--space-2xs); margin:var(--space-md) 0 }
.fan-detail__metric{ padding:var(--space-2xs); border:1px solid var(--rule); background:var(--ink) }
.fan-detail__metric b{ display:block; color:var(--text); font-family:var(--font-pix); font-size:16px; font-weight:400; white-space:nowrap; -webkit-font-smoothing:none }
.fan-detail__metric span{ display:block; color:var(--dim); font-family:var(--font-pix); font-size:9px; white-space:nowrap; -webkit-font-smoothing:none }
.fan-detail__grid,.fan-content-detail__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:var(--space-md); align-items:start }
.fan-card__head{ display:flex; justify-content:space-between; align-items:start; gap:var(--space-sm); margin-bottom:var(--space-sm) }
.fan-card__head h3{ margin:0; font-size:25px }
.fan-card__hint{ color:var(--dim); font-family:var(--font-pix); font-size:10px; -webkit-font-smoothing:none }
.fan-content-list{ display:flex; flex-direction:column; gap:var(--space-2xs) }
.fan-content-item{ display:grid; grid-template-columns:180px minmax(0,1fr) auto; gap:var(--space-sm); align-items:center; padding:var(--space-2xs); border:1px solid var(--rule); background:var(--deep) }
.fan-content-item img{ width:180px; height:220px; object-fit:contain; object-position:center top; background:var(--ink) }
.fan-content-item h4{ margin:0 0 3px; font-size:16px }
.fan-content-item p{ margin:0; color:var(--dim); font-size:13px }
.fan-content-item__meta{ display:block; margin-top:4px; color:var(--accent); font-family:var(--font-pix); font-size:10px; -webkit-font-smoothing:none }
.fan-content-item .btn{ font-size:11px; padding-inline:var(--space-2xs) }
.fan-request{ display:flex; flex-direction:column; gap:var(--space-xs) }
.fan-request h3{ margin:0; font-size:25px }
.fan-request p{ margin:0; color:var(--sub); font-size:15px }
.fan-request textarea{ min-height:112px; width:100%; resize:vertical; padding:var(--space-2xs); border:1px solid var(--rule-lift); border-radius:0; background:var(--ink); color:var(--text); font:15px/1.5 var(--font-ui) }
.fan-request textarea::placeholder{ color:var(--dim) }
.fan-request__status{ min-height:22px; color:#7fc7a0!important; font-family:var(--font-pix); font-size:11px!important; -webkit-font-smoothing:none }
.fan-content-detail__head{ align-items:start }
.fan-content-detail__head h2{ max-width:26ch }
.fan-content-preview{ display:grid; grid-template-columns:minmax(320px,1.25fr) minmax(240px,.75fr); gap:var(--space-md); align-items:center }
.fan-content-preview > img{ width:100%; height:auto; max-height:520px; object-fit:contain; object-position:center top; background:var(--ink) }
.fan-content-preview__copy p{ margin:0; color:var(--sub); font-size:16px }
.fan-content-stats{ display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-top:var(--space-md); padding-top:var(--space-xs); border-top:1px solid var(--rule-lift) }
.fan-content-stat b{ display:block; color:var(--text); font-family:var(--font-pix); font-size:17px; font-weight:400; -webkit-font-smoothing:none }
.fan-content-stat span{ display:block; color:var(--dim); font-family:var(--font-pix); font-size:9px; -webkit-font-smoothing:none }
.fan-content-comments{ margin-top:var(--space-md) }
.fan-card{ min-width:0; padding:var(--space-md); background:rgba(20,27,51,.72) }
.fan-creator{ display:grid; grid-template-columns:minmax(190px,.7fr) minmax(0,1fr); gap:var(--space-md); align-items:stretch }
.fan-creator__image{ min-height:340px; background:var(--ink); overflow:hidden }
.fan-creator__image img{ width:100%; height:100%; min-height:340px; object-fit:cover; object-position:center top }
.fan-creator__body{ display:flex; flex-direction:column; justify-content:center; min-width:0 }
.fan-creator__body h3{ margin:0 0 var(--space-2xs); font-size:30px }
.fan-creator__body p{ margin:0 0 var(--space-md); color:var(--sub) }
.fan-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2xs); margin-top:auto }
.fan-stat{ padding-top:var(--space-2xs); border-top:1px solid var(--rule-lift) }
.fan-stat b{ display:block; color:var(--text); font-family:var(--font-pix); font-size:21px; font-weight:400; -webkit-font-smoothing:none }
.fan-stat span{ color:var(--dim); font-family:var(--font-pix); font-size:11px; -webkit-font-smoothing:none }
.fan-support{ display:flex; flex-direction:column; gap:var(--space-sm) }
.fan-support__head{ display:flex; justify-content:space-between; align-items:start; gap:var(--space-sm) }
.fan-support h3{ margin:0; font-size:30px }
.fan-wallet{ flex:none; padding:var(--space-2xs) var(--space-xs); border:1px solid var(--rule-lift); background:var(--deep); text-align:right }
.fan-wallet span{ display:block; color:var(--dim); font-family:var(--font-pix); font-size:11px; -webkit-font-smoothing:none }
.fan-wallet b{ display:block; color:var(--text); font-family:var(--font-pix); font-size:24px; font-weight:400; -webkit-font-smoothing:none }
.fan-wallet em{ color:var(--accent); font-style:normal; font-family:var(--font-pix); font-size:11px; -webkit-font-smoothing:none }
.fan-support > p{ margin:0; color:var(--sub); font-size:15px }
.fan-amounts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2xs) }
.fan-amount{ width:100%; padding:var(--space-2xs); border:1px solid var(--rule-lift); background:var(--deep); color:var(--dim); font-family:var(--font-pix); font-size:14px; cursor:pointer; -webkit-font-smoothing:none }
.fan-amount:hover,.fan-amount[aria-pressed=true]{ border-color:var(--accent); color:var(--text); background:var(--ink) }
.fan-support__status{ min-height:26px; margin:0; color:var(--dim); font-family:var(--font-pix); font-size:11px; line-height:1.55; -webkit-font-smoothing:none }
.fan-support__status.is-success{ color:#7fc7a0 }
.fan-note{ margin:0; color:var(--dim); font-size:13px }
.fan-flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--rule-lift); border-bottom:1px solid var(--rule-lift) }
.fan-flow__step{ position:relative; min-width:0; padding:var(--space-md) var(--space-sm); border-left:1px solid var(--rule-lift) }
.fan-flow__step:first-child{ border-left:0 }
.fan-flow__num{ display:block; margin-bottom:var(--space-md); color:var(--accent); font-family:var(--font-pix); font-size:27px; line-height:1; -webkit-font-smoothing:none }
.fan-flow__step h3{ margin:0 0 var(--space-2xs); font-family:var(--font-pix); font-size:16px; font-weight:400; -webkit-font-smoothing:none }
.fan-flow__step p{ margin:0; color:var(--dim); font-size:14px; line-height:1.55 }
.fan-flow__step:not(:last-child)::after{ content:"→"; position:absolute; right:-10px; top:var(--space-md); z-index:1; color:var(--accent); font-family:var(--font-pix); font-size:18px; background:var(--deep); -webkit-font-smoothing:none }
.fan-community-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:var(--space-md); align-items:start }
.fan-community{ display:flex; flex-direction:column; gap:var(--space-sm) }
.fan-community__bar{ display:flex; justify-content:space-between; align-items:start; gap:var(--space-sm) }
.fan-community h3{ margin:0; font-size:29px }
.fan-like{ flex:none; border:1px solid var(--rule-lift); background:transparent; color:var(--dim); padding:var(--space-2xs) var(--space-xs); font-family:var(--font-pix); font-size:12px; cursor:pointer; -webkit-font-smoothing:none }
.fan-like[aria-pressed=true]{ border-color:var(--accent); color:var(--text); background:var(--ink) }
.fan-comments{ display:flex; flex-direction:column; gap:var(--space-2xs) }
.fan-comment{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-xs); padding:var(--space-xs); border:1px solid var(--rule); background:var(--deep) }
.fan-comment b{ display:block; margin-bottom:2px; color:var(--accent); font-family:var(--font-pix); font-size:12px; font-weight:400; -webkit-font-smoothing:none }
.fan-comment p{ margin:0; color:var(--body); font-size:15px; line-height:1.5 }
.fan-comment button{ align-self:center; border:0; background:transparent; color:var(--dim); font-family:var(--font-pix); font-size:12px; cursor:pointer; -webkit-font-smoothing:none }
.fan-comment button[aria-pressed=true]{ color:var(--accent) }
.fan-form{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2xs); align-items:stretch }
.fan-form textarea{ min-height:82px; width:100%; resize:vertical; padding:var(--space-2xs); border:1px solid var(--rule-lift); border-radius:0; background:var(--ink); color:var(--text); font:15px/1.5 var(--font-ui) }
.fan-form textarea::placeholder{ color:var(--dim) }
.fan-form .btn{ align-self:stretch; min-width:132px; font-size:14px }
.fan-rewards{ display:flex; flex-direction:column; gap:var(--space-sm) }
.fan-rewards h3{ margin:0; font-size:29px }
.fan-rewards > p{ margin:0; color:var(--sub); font-size:15px }
.fan-progress{ height:15px; background:var(--deep); border:1px solid var(--rule-lift) }
.fan-progress span{ display:block; width:72%; height:100%; background:var(--accent) }
.fan-progress__label{ margin:0; color:var(--dim); font-family:var(--font-pix); font-size:11px; -webkit-font-smoothing:none }
.fan-reward-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-2xs) }
.fan-reward-stat{ padding:var(--space-xs); border:1px solid var(--rule-lift); background:var(--deep) }
.fan-reward-stat span{ display:block; color:var(--dim); font-family:var(--font-pix); font-size:11px; -webkit-font-smoothing:none }
.fan-reward-stat b{ display:block; color:var(--text); font-family:var(--font-pix); font-size:27px; font-weight:400; -webkit-font-smoothing:none }
.fan-reward-stat em{ color:var(--accent); font-family:var(--font-pix); font-size:11px; font-style:normal; -webkit-font-smoothing:none }
.fan-collection{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-sm) }
.fan-nft{ min-width:0; margin:0 }
.fan-nft img{ width:100%; border:1px solid var(--rule-lift); background:var(--ink) }
.fan-nft figcaption{ padding-top:var(--space-2xs); color:var(--dim); font-family:var(--font-pix); font-size:12px; -webkit-font-smoothing:none }
.fan-nft strong{ display:block; color:var(--text); font-weight:400 }
.fan-footer{ padding:var(--space-xl) 0; border-top:1px solid var(--rule); background:var(--ink) }
.fan-footer__in{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); flex-wrap:wrap }
.fan-footer p{ margin:0; color:var(--dim); font-family:var(--font-pix); font-size:14px; -webkit-font-smoothing:none }
.fan-footer a{ color:var(--dim); font-family:var(--font-pix); font-size:14px; text-decoration:none; -webkit-font-smoothing:none }
.fan-footer a:hover{ color:var(--text) }

@media(max-width:900px){
  .fan-hero__in{ grid-template-columns:minmax(0,1fr) minmax(280px,.75fr); gap:var(--space-md) }
  .fan-hero__portrait{ height:440px }
  .fan-hero__visual{ min-height:440px }
  .fan-creator-grid,.fan-community-grid,.fan-detail__grid,.fan-content-detail__grid{ grid-template-columns:minmax(0,1fr) }
  .fan-creator-card{ grid-template-columns:48px 160px minmax(0,1fr) auto }
  .fan-creator-card__metrics{ grid-column:3 / -1 }
  .fan-creator-card__supporters{ grid-column:3 / -1 }
  .fan-creator-card > .btn{ grid-column:3 / -1; grid-row:auto; justify-self:start }
}
@media(max-width:720px){
  .header-actions .header-fan{ display:none }
  .fan-hero{ min-height:0 }
  .fan-hero__in{ display:flex; flex-direction:column; align-items:stretch; min-height:0; padding-top:var(--space-4xl); gap:var(--space-lg) }
  .fan-hero h1{ max-width:11ch; font-size:clamp(42px,12vw,64px) }
  .fan-hero .sub{ font-size:18px }
  .fan-hero__visual{ min-height:350px; justify-content:center; }
  .fan-hero__visual::before{ width:250px; height:250px; right:50%; transform:translateX(50%); bottom:12% }
  .fan-hero__portrait{ width:min(100%,290px); height:370px }
  .fan-hero__tag{ left:4%; bottom:28px; font-size:12px }
  .fan-section__head{ display:block }
  .fan-section__head p{ margin-top:var(--space-xs) }
  .fan-creator{ grid-template-columns:minmax(120px,.6fr) minmax(0,1fr); gap:var(--space-xs) }
  .fan-directory__bar{ display:block; line-height:1.8 }
  .fan-directory__bar span{ display:block }
  .fan-creator-card{ grid-template-columns:42px 110px minmax(0,1fr); gap:var(--space-2xs) }
  .fan-creator-card__pfp{ width:110px; height:120px }
  .fan-creator-card__metrics,.fan-creator-card__supporters{ grid-column:2 / -1 }
  .fan-creator-card > .btn{ grid-column:2 / -1; grid-row:auto; justify-self:start }
  .fan-detail__head,.fan-content-detail__head{ display:block }
  .fan-detail__identity{ align-items:start }
  .fan-detail__identity img{ width:140px; height:180px }
  .fan-detail__actions{ justify-content:flex-start; margin-top:var(--space-sm) }
  .fan-detail__metrics{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .fan-content-item{ grid-template-columns:120px minmax(0,1fr) }
  .fan-content-item img{ width:120px; height:180px }
  .fan-content-item .btn{ grid-column:2; justify-self:start }
  .fan-content-preview{ grid-template-columns:1fr }
  .fan-content-preview > img{ max-height:none }
  .fan-creator__image,.fan-creator__image img{ min-height:260px }
  .fan-creator__body h3,.fan-support h3,.fan-community h3,.fan-rewards h3{ font-size:24px }
  .fan-stats{ grid-template-columns:1fr; gap:var(--space-2xs) }
  .fan-stat{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2xs) }
  .fan-flow{ grid-template-columns:1fr; border-bottom:0 }
  .fan-flow__step,.fan-flow__step:first-child{ padding:var(--space-sm) 0; border-left:0; border-bottom:1px solid var(--rule-lift) }
  .fan-flow__step:not(:last-child)::after{ content:"↓"; right:auto; left:50%; top:auto; bottom:-12px; transform:translateX(-50%); padding-inline:4px }
  .fan-collection{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .fan-form{ grid-template-columns:1fr }
  .fan-form .btn{ min-height:52px }
}

@media(max-width:720px){
  .thread{ grid-template-columns:minmax(0,1fr) }
  .thread .cmt:nth-child(n){ grid-column:auto }
  .journey li{ grid-template-columns:6ch minmax(0,1fr); gap:var(--space-sm) }
  .apps .app:first-child{ flex-basis:100% }
  .foot__meta .sp{ margin-left:0 }
}

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .btn{ transition:none }
}

body.fan-page{ background:var(--deep); min-height:100dvh }
body.fan-page header.fan-app-header{ position:sticky; top:0; left:auto; width:100%; transform:none; border:0; border-bottom:1px solid var(--rule-lift); border-radius:0; box-shadow:none; background:rgba(10,14,28,.94); z-index:50 }
body.fan-page header.fan-app-header .bar{ max-width:none; padding:var(--space-xs) var(--space-md) }
.fan-header-title{ display:flex; align-items:baseline; gap:var(--space-xs); margin-inline:auto; font-family:var(--font-pix); -webkit-font-smoothing:none }
.fan-header-title b{ color:var(--text); font-size:16px; font-weight:400 }
.fan-header-title span{ color:var(--dim); font-size:10px }
.header-game{ font-size:12px; line-height:1.7; padding-inline:var(--space-2xs) }
.fan-app{ min-height:calc(100dvh - 68px) }
.fan-app-shell{ display:block; min-height:calc(100dvh - 68px) }
.fan-membership{ display:flex; flex-direction:column; gap:var(--space-2xs); padding:var(--space-xs); border:1px solid var(--rule-lift); background:var(--deep) }
.fan-membership strong{ color:var(--text); font-family:var(--font-pix); font-size:14px; font-weight:400; -webkit-font-smoothing:none }
.fan-membership small{ color:var(--dim); font-size:12px; line-height:1.45 }
.fan-membership .btn{ margin-top:var(--space-2xs); font-size:11px; line-height:1.75; padding-inline:var(--space-2xs) }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.fan-membership__network{ color:var(--dim); font-family:var(--font-pix); font-size:9px; line-height:1.3; -webkit-font-smoothing:none }
.fan-nft-selector{ display:flex; flex-direction:column; gap:var(--space-3xs); min-width:180px; max-width:360px }
.fan-nft-selector[hidden]{ display:none }
.fan-nft-selector__chips{ display:flex; flex-wrap:wrap; gap:var(--space-3xs) }
.fan-nft-chip{ min-height:30px; padding:0 var(--space-2xs); border:1px solid var(--rule-lift); background:var(--deep); color:var(--dim); font:10px var(--font-pix); cursor:pointer; -webkit-font-smoothing:none }
.fan-nft-chip.is-selected,.fan-nft-chip:hover{ border-color:var(--accent); color:var(--text); background:var(--ink) }
.fan-nft-selector small{ color:var(--dim); font-size:10px; line-height:1.35 }
.fan-nft-selector__manual{ display:grid; gap:var(--space-3xs) }
.fan-nft-selector__manual label{ color:var(--accent); font:9px var(--font-pix); -webkit-font-smoothing:none }
.fan-nft-selector__manual > div{ display:flex; gap:var(--space-3xs) }
.fan-nft-selector__manual input{ min-width:0; width:100%; min-height:34px; padding:0 var(--space-2xs); border:1px solid var(--rule-lift); border-radius:0; background:var(--deep); color:var(--text); font:12px var(--font-ui) }
.fan-nft-selector__manual .fan-copy{ min-height:34px; padding-inline:var(--space-2xs); white-space:nowrap }
.fan-nft-selector__manual > span{ color:var(--accent); font:9px var(--font-pix); line-height:1.4; -webkit-font-smoothing:none }
.fan-amount-control{ display:flex; flex-direction:column; gap:var(--space-2xs); min-width:0; width:min(100%,560px); color:var(--dim); font-family:var(--font-pix); font-size:10px; -webkit-font-smoothing:none }
.fan-amounts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-2xs) }
.fan-amount-control .fan-amount{ width:auto; min-height:40px; padding:var(--space-2xs); border:1px solid var(--rule-lift); border-radius:0; background:var(--deep); color:var(--dim); font:11px var(--font-pix); cursor:pointer; -webkit-font-smoothing:none }
.fan-amount-control .fan-amount:hover,.fan-amount-control .fan-amount[aria-pressed=true]{ border-color:var(--accent); color:var(--text); background:var(--ink) }
.fan-amount-custom{ display:flex; align-items:center; gap:var(--space-2xs); max-width:220px; padding:var(--space-2xs) var(--space-xs); border:1px solid var(--rule-lift); background:var(--deep); color:var(--text) }
.fan-amount-custom input{ min-width:0; width:100%; border:0; outline:0; background:transparent; color:inherit; font:14px var(--font-pix); -webkit-font-smoothing:none }
.fan-amount-custom b{ flex:none; color:var(--accent); font-size:11px; font-weight:400 }
.fan-next-rank{ align-self:flex-start; min-height:36px; padding-inline:var(--space-xs); border:1px dashed var(--rule-lift); background:transparent; color:var(--dim); font-family:var(--font-pix); font-size:10px; cursor:not-allowed; -webkit-font-smoothing:none }
.fan-next-rank:disabled{ opacity:.72 }
.fan-amount-help{ display:block; max-width:62ch; color:var(--dim); font-size:11px; line-height:1.45 }
.fan-amount-help b,.fan-amount-help strong{ color:var(--text); font-weight:400 }
.fan-app__workspace{ min-width:0; padding:0; background:var(--deep) }
.fan-app__controls{ max-width:1240px; margin:0 auto; padding:var(--space-sm) var(--space-xl) 0; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-md) }
.fan-app__controls .fan-membership{ flex-direction:row; align-items:center; gap:var(--space-2xs) var(--space-xs); padding:0; border:0; background:none }
.fan-app__controls .fan-membership .fan-label{ margin:0; }
.fan-app__controls .fan-membership small{ max-width:240px; }
.fan-app__controls .fan-membership .btn{ margin:0; }
.fan-app__content{ max-width:1240px; margin:0 auto; padding:var(--space-xl) var(--space-xl) var(--space-2xl) }
.fan-live-desk{ margin-block-end:var(--space-2xl); padding-block-start:0; padding-block-end:var(--space-xl); border-block-end:1px solid var(--rule-lift) }
.fan-live-desk__head{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr); gap:var(--space-xl); align-items:end; margin-block-end:var(--space-lg) }
.fan-live-desk__head h1{ max-width:16ch; margin:0 0 var(--space-xs); font-family:var(--font-pix); font-size:clamp(28px,4vw,44px); font-weight:400; line-height:1.2; -webkit-font-smoothing:none }
.fan-live-desk__head p{ max-width:65ch; margin:0; color:var(--dim); font-size:15px; line-height:1.6 }
.fan-live-desk__status{ display:flex; flex-direction:column; gap:var(--space-2xs); min-width:0; padding:var(--space-sm); border-inline-start:2px solid var(--accent); background:var(--ink) }
.fan-live-desk__status span,.fan-live-desk__grid span,.fan-basket__intro span,.fan-allocation > span,.fan-star-trust > span:first-child{ color:var(--accent); font-family:var(--font-pix); font-size:10px; -webkit-font-smoothing:none }
.fan-live-desk__status strong{ color:var(--text); font-family:var(--font-pix); font-size:15px; font-weight:400; overflow-wrap:anywhere; -webkit-font-smoothing:none }
.fan-live-desk__status small,.fan-live-desk__grid small,.fan-basket__intro p,.fan-allocation small{ color:var(--dim); font-size:12px; line-height:1.45 }
.fan-live-desk__grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; margin-block-end:var(--space-sm); background:var(--rule-lift) }
.fan-live-desk__grid article{ min-width:0; min-height:130px; padding:var(--space-sm); background:var(--deep) }
.fan-live-desk__grid span{ display:block; margin-block-end:var(--space-xs) }
.fan-live-desk__grid strong{ display:block; margin-block-end:var(--space-2xs); color:var(--text); font-family:var(--font-pix); font-size:15px; font-weight:400; overflow-wrap:anywhere; -webkit-font-smoothing:none }
.fan-live-desk__grid progress{ display:block; width:100%; height:10px; margin-block:var(--space-2xs) var(--space-xs); appearance:none; border:1px solid var(--rule-lift); border-radius:0; background:var(--deep) }
.fan-live-desk__grid progress::-webkit-progress-bar{ background:var(--deep) }
.fan-live-desk__grid progress::-webkit-progress-value{ background:var(--accent) }
.fan-live-desk__grid progress::-moz-progress-bar{ background:var(--accent) }
.fan-basket{ display:grid; grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr); gap:var(--space-md); align-items:center; padding:var(--space-sm); border:1px solid var(--rule-lift); background:rgba(20,27,51,.72) }
.fan-basket__intro p{ margin:var(--space-2xs) 0 0; max-width:30ch }
.fan-basket__lines{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-2xs) }
.fan-basket__lines span{ display:flex; flex-direction:column; gap:var(--space-3xs); padding:var(--space-xs); border:1px solid var(--rule-lift); background:var(--deep) }
.fan-basket__lines b{ color:var(--text); font-family:var(--font-pix); font-size:15px; font-weight:400; -webkit-font-smoothing:none }
.fan-basket__lines small{ color:var(--accent); font-family:var(--font-pix); font-size:11px; -webkit-font-smoothing:none }
.fan-allocation{ display:flex; flex-direction:column; gap:var(--space-2xs); margin-block-start:var(--space-sm); padding:var(--space-sm); border:1px solid var(--rule); background:var(--ink) }
.fan-allocation strong{ color:var(--text); font-family:var(--font-pix); font-size:13px; font-weight:400; line-height:1.5; overflow-wrap:anywhere; -webkit-font-smoothing:none }
.fan-allocation__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2xs) }
.fan-allocation__list > span{ display:flex; flex-direction:column; gap:var(--space-3xs); padding:var(--space-2xs); border:1px solid var(--rule-lift); background:var(--deep) }
.fan-allocation__list b{ color:var(--text); font:10px var(--font-pix); -webkit-font-smoothing:none }
.fan-allocation__list small{ color:var(--dim); font-size:10px; line-height:1.35 }
.fan-history,.fan-settlement-history{ margin-block-start:var(--space-sm); padding:var(--space-sm); border:1px solid var(--rule); background:rgba(20,27,51,.72) }
.fan-history__head{ display:flex; justify-content:space-between; gap:var(--space-sm); align-items:baseline; margin-block-end:var(--space-2xs) }
.fan-history__head small{ color:var(--dim); font-size:11px; text-align:right }
.fan-history__list{ display:grid; gap:var(--space-2xs); margin:0; padding:0; list-style:none }
.fan-history__list li{ display:grid; grid-template-columns:minmax(100px,.35fr) minmax(120px,.8fr) minmax(160px,1fr); gap:var(--space-xs); padding-block:var(--space-2xs); border-block-start:1px solid var(--rule-lift); color:var(--dim); font-size:11px }
.fan-history__list li:first-child{ border-block-start:0 }
.fan-history__list b{ color:var(--text); font:11px var(--font-pix); -webkit-font-smoothing:none }
.fan-history__list small{ color:var(--dim); font-size:10px }
.fan-attestation{ display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.65fr); gap:var(--space-md); align-items:start; margin-block-start:var(--space-sm); padding-block-start:var(--space-sm); border-block-start:1px solid var(--rule) }
.fan-attestation label{ display:flex; align-items:flex-start; gap:var(--space-2xs); color:var(--body); font-size:13px; line-height:1.5; cursor:pointer }
.fan-attestation input{ flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent) }
.fan-attestation p{ margin:0; color:var(--dim); font-size:12px; line-height:1.5 }
.fan-star-trust{ display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr); gap:var(--space-xs); align-items:center; margin-block-start:var(--space-sm); padding-block-start:var(--space-sm); border-block-start:1px solid var(--rule) }
.fan-star-trust code{ min-width:0; color:var(--text); font-family:var(--font-pix); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; -webkit-font-smoothing:none }
.fan-copy{ min-height:36px; padding-inline:var(--space-xs); border:1px solid var(--rule-lift); background:transparent; color:var(--dim); font-family:var(--font-pix); font-size:10px; cursor:pointer; -webkit-font-smoothing:none }
.fan-copy:not(:disabled):hover{ border-color:var(--accent); color:var(--text) }
.fan-copy:disabled{ cursor:not-allowed; opacity:.6 }
.fan-star-trust__status{ min-width:0; color:var(--accent); font-family:var(--font-pix); font-size:10px; overflow-wrap:anywhere; -webkit-font-smoothing:none }
.fan-screen{ padding:0; scroll-margin-top:148px }
.fan-screen[hidden]{ display:none }
.fan-view-header{ display:flex; justify-content:space-between; align-items:end; gap:var(--space-xl); margin-bottom:var(--space-lg); padding-bottom:var(--space-lg); border-bottom:1px solid var(--rule-lift) }
.fan-view-header h1,.fan-view-header h2{ margin:var(--space-2xs) 0; font-family:var(--font-pix); font-size:clamp(32px,4vw,48px); font-weight:400; line-height:1.15; -webkit-font-smoothing:none }
.fan-view-header p{ max-width:52ch; margin:0; color:var(--dim); font-size:14px }
.fan-view-header__meta{ display:flex; flex-direction:column; gap:var(--space-2xs); flex:none; color:var(--dim); font-family:var(--font-pix); font-size:10px; text-align:right; -webkit-font-smoothing:none }
.fan-view-header__meta b{ color:var(--text); font-size:14px; font-weight:400 }
.fan-detail,.fan-content-detail{ max-width:1100px; margin:0 auto }
.fan-detail__head,.fan-content-detail__head{ align-items:center }
.fan-action-status{ flex-basis:100%; min-height:18px; color:#7fc7a0; font-family:var(--font-pix); font-size:10px; line-height:1.4; text-align:right; -webkit-font-smoothing:none }
.fan-detail__actions{ max-width:410px }
.fan-creator-card{ background:rgba(20,27,51,.9) }
.fan-supporter-row{ flex-wrap:wrap; gap:var(--space-2xs) }
.fan-supporter{ display:grid; grid-template-columns:28px minmax(70px,1fr); grid-template-rows:auto auto; width:122px; height:auto; margin:0; padding:4px; border:1px solid var(--rule-lift); background:var(--deep); align-items:center; column-gap:6px }
.fan-supporter img{ grid-row:1 / 3; width:28px; height:28px; object-fit:cover }
.fan-supporter b,.fan-supporter small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-pix); -webkit-font-smoothing:none }
.fan-supporter b{ color:var(--text); font-size:9px; font-weight:400; line-height:1.2 }
.fan-supporter small{ color:var(--accent); font-size:8px; line-height:1.2 }
.fan-supporter-amount{ display:none }
.fan-content-item{ background:rgba(10,14,28,.72) }
.fan-card.panel{ border:1px solid var(--rule-lift); background:rgba(20,27,51,.72); }

@media(max-width:900px){
  .fan-app-shell{ display:block }
  .fan-app__controls{ flex-direction:column; align-items:stretch; padding-inline:var(--space-md) }
  .fan-app__controls .fan-membership{ flex-wrap:wrap }
  .fan-amount-control{ width:100%; }
  .fan-app__content{ padding-inline:var(--space-md) }
  .fan-view-header{ gap:var(--space-md) }
  .fan-creator-card{ grid-template-columns:48px 160px minmax(0,1fr) auto }
  .fan-creator-card__metrics{ grid-column:3 / -1 }
  .fan-creator-card__supporters{ grid-column:3 / -1 }
}
@media(max-width:900px){
  .fan-live-desk__head{ grid-template-columns:minmax(0,1fr) minmax(220px,.7fr); gap:var(--space-md) }
  .fan-live-desk__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .fan-app__controls .fan-membership{ flex-wrap:wrap }
  .fan-nft-selector{ flex-basis:100%; max-width:none }
  .fan-recommendation__head{ align-items:start }
}
@media(max-width:720px){
  body.fan-page header.fan-app-header .bar{ padding-inline:var(--space-xs) }
  .fan-header-title{ display:none }
  .header-game{ font-size:10px }
  .fan-app-shell{ display:block; min-height:0 }
  .fan-membership{ grid-column:2; grid-row:1 / 3; min-width:148px; padding:var(--space-2xs) var(--space-xs) }
  .fan-membership small,.fan-membership .btn{ display:none }
  .fan-app__controls{ align-items:stretch; justify-content:stretch; padding:var(--space-xs); }
  .fan-app__controls .fan-membership{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto; align-items:center; gap:var(--space-3xs) var(--space-xs); }
  .fan-app__controls .fan-membership .fan-label,.fan-app__controls .fan-membership strong,.fan-app__controls .fan-membership small,.fan-app__controls .fan-membership__network{ grid-column:1; }
  .fan-app__controls .fan-membership .btn{ grid-column:2; grid-row:1 / span 3; align-self:center; }
  .fan-amount-control{ flex-direction:column; align-items:stretch; }
  .fan-amounts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fan-amount-custom{ max-width:none; }
  .fan-directory__tools{ grid-template-columns:1fr }
  .fan-recommendation__head{ display:block }
  .fan-recommendation__head small{ display:block; margin-top:var(--space-2xs); text-align:left }
  .fan-allocation__list{ grid-template-columns:1fr }
  .fan-history__head{ align-items:start; flex-direction:column; gap:var(--space-3xs) }
  .fan-history__head small{ text-align:left }
  .fan-history__list li{ grid-template-columns:1fr; gap:var(--space-3xs) }
  .fan-app__controls .fan-membership small,.fan-app__controls .fan-membership .btn{ display:block; }
  .fan-app__content{ padding:var(--space-lg) var(--space-xs) var(--space-xl) }
  .fan-live-desk{ margin-block-end:var(--space-xl); padding-block-end:var(--space-lg) }
  .fan-live-desk__head{ display:block }
  .fan-live-desk__head h1{ max-width:18ch; font-size:32px }
  .fan-live-desk__status{ margin-block-start:var(--space-md) }
  .fan-live-desk__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fan-live-desk__grid article{ min-height:0; padding:var(--space-xs) }
  .fan-basket{ grid-template-columns:1fr; gap:var(--space-sm) }
  .fan-star-trust{ grid-template-columns:auto minmax(0,1fr); }
  .fan-star-trust .fan-copy{ grid-column:1; }
  .fan-star-trust__status{ grid-column:2; }
  .fan-attestation{ grid-template-columns:1fr; }
  .fan-view-header{ display:block; margin-bottom:var(--space-md); padding-bottom:var(--space-md) }
  .fan-view-header h1,.fan-view-header h2{ font-size:32px }
  .fan-view-header__meta{ align-items:flex-start; margin-top:var(--space-sm); text-align:left }
  .fan-directory__bar{ line-height:1.8 }
  .fan-creator-card{ grid-template-columns:42px 110px minmax(0,1fr); gap:var(--space-2xs) }
  .fan-creator-card__pfp{ width:110px; height:120px }
  .fan-creator-card__metrics,.fan-creator-card__supporters{ grid-column:2 / -1 }
  .fan-creator-card > .btn{ grid-column:2 / -1; grid-row:auto; justify-self:start }
  .fan-supporter{ width:118px }
  .fan-detail__head,.fan-content-detail__head{ display:block }
  .fan-detail__actions{ justify-content:flex-start; max-width:none; margin-top:var(--space-sm) }
  .fan-action-status{ text-align:left }
  .fan-detail__metrics{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .fan-content-item{ grid-template-columns:120px minmax(0,1fr) }
  .fan-content-item img{ width:120px; height:180px }
  .fan-content-item .btn{ grid-column:2; justify-self:start }
  .fan-content-preview{ grid-template-columns:1fr }
  .fan-content-preview > img{ height:auto; max-height:none }
}
@media(max-width:360px){
  .fan-live-desk__grid{ grid-template-columns:1fr; }
  .fan-basket__lines{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fan-star-trust{ grid-template-columns:1fr; }
  .fan-star-trust code,.fan-star-trust .fan-copy,.fan-star-trust__status{ grid-column:1; }
}