/* Hallmark · shape: the Today screen opened up · genre: playful · theme: custom · job: try · idea: "the page is the app's own Today screen, opened out so every part of it is explained" · vibe: "calm night lattice, one lime action, gold khatams"
 * paper: #0A0C0B (AppColors.background) · accent: #32CD32 (AppColors.green), gold #FFC66D for khatams only · display: Boldonse · body: Google Sans · hero: the Today screen with its own elements around it, the store badges and a trailer you start yourself · nav: edge-aligned bar · footer: colophon block · imagery: the product (screenshots, a trailer, the owner's posts) · signature: three phones fanned like the launch posts, the one you point at comes forward
 * axes: dark/display-heavy/chromatic-green · posture: inherited brand (the app's theme.dart) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: R, nineteen posts each with a comment; the wall opens with eight and filters the rest */
/* Hallmark · waive 37 · Noto Nastaliq Urdu in --font-urdu, never downloaded · it is only the local fallback for the Urdu post title, so the page loads three families */
/* Hallmark · waive 83 · app screenshots, a trailer and the owner's carousel posts, no photographs · the material is the product itself and the launch posts the owner asked to show */
/* Hallmark · dismissed F15 · the 24px gap belongs to the posts wall, a grid of equal cards; every two-column section uses 64px */
/* Hallmark · dismissed F4 · the selected feature tab and the pressed filter are a soft tint, not a second filled button; the lime fill stays on Get the app */
/* Hallmark · dismissed F7 · every pill left is a control: the trailer link, the two round play buttons and the slide dots */
/* Hallmark · dismissed 3 · the wall columns hold swipeable post carousels with comments, not icon tiles; the owner asked for a grid */
/* Hallmark · dismissed F5 · round icon buttons are the app's own control shape, not a decorative coin */
/* Hallmark · dismissed 23 · the lime is the app's own brand action colour, inherited from theme.dart */
/* Hallmark · dismissed 58 · the owner asked for every part of the app to be defined, and for the comment under each post */
/* Faces: the app's own (assets/fonts), self-hosted, all SIL Open Font License */
@font-face { font-family: "Google Sans"; src: url("fonts/google-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Boldonse"; src: url("fonts/boldonse.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Amiri Quran"; src: url("fonts/amiri-quran.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2rem, 3vw + 0.75rem, 3.25rem); --text-display: clamp(2.375rem, 4.4vw + 0.5rem, 5rem);
  --text-section: clamp(1.75rem, 2.2vw + 0.75rem, 2.75rem); --text-title: clamp(1.125rem, 0.5vw + 0.95rem, 1.375rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.3125rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --container: 1600px; --gutter: clamp(20px, 3.6vw, 56px); --gap-columns: 32px; --section-gap-s: 104px; --section-gap: 136px; --section-gap-l: 168px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* Colour: lib/src/ui/theme.dart, AppColors */
  --color-paper: #0A0C0B;        /* background */
  --color-paper-2: #151816;      /* surface */
  --color-paper-3: #1C201D;      /* surfaceRaised */
  --color-ink: #F2F5F3;          /* headings */
  --color-ink-2: #B8C0BB;        /* body */
  --color-muted: #89938C;        /* muted */
  --color-faint: #5E6661;        /* faint */
  --color-rule: #252A27;         /* border */
  --color-rule-2: #313733;
  --color-accent: #32CD32;       /* green */
  --color-accent-hover: #3FDB3F;
  --color-accent-ink: #071D07;   /* onGreen */
  --color-accent-deep: #20372D;  /* greenDeep */
  --color-accent-soft: rgb(50 205 50 / 0.12);
  --color-gold: #FFC66D;         /* gold: khatam milestones only */
  --color-gold-soft: rgb(255 198 109 / 0.12);
  /* award tracks: lib/src/services/progress_store.dart */
  --color-award-streak: #86AFFF;
  --color-award-surah: #3FB8A0;
  --color-award-ayah: #BF9BFF;
  --color-award-locked: #2A302C;
  --color-lattice: rgb(255 255 255 / 0.05);
  --color-scrim: rgb(5 6 5 / 0.88);
  --color-error: #FF8F7D;        /* danger */
  --color-success: #32CD32;
  --color-focus: #32CD32;
  /* store badges, drawn like the official ones */
  --color-badge: #060807; --color-badge-line: #A6A6A6; --color-badge-ink: #F7F9F8; --color-badge-hover: #141715;
  --color-play-blue: #00A0FF; --color-play-green: #00D46A; --color-play-yellow: #FFC400; --color-play-red: #FF3A44;

  --font-display: "Boldonse", "Google Sans", system-ui, sans-serif;
  --font-body: "Google Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "Amiri Quran", "Geeza Pro", "Noto Naskh Arabic", serif;
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Geeza Pro", serif;

  --radius-card: 22px; --radius-inner: 14px; --radius-pill: 999px; --radius-chip: 10px; --rule-hair: 1px;
  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.03) inset;
  --shadow-glow: 0 0 0 1px rgb(50 205 50 / 0.35), 0 18px 60px rgb(50 205 50 / 0.12);
  --tracking-display: -0.01em; --display-weight: 400;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 20px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 14px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }


/* ---------- ground: the app's star lattice ---------- */
body { position: relative; font-size: 1.0625rem; line-height: 1.6; color: var(--color-ink-2); }
body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--color-lattice); -webkit-mask: url("lattice.svg") 0 0 / 64px 64px repeat; mask: url("lattice.svg") 0 0 / 64px 64px repeat; }
h1, h2, h3 { color: var(--color-ink); }
h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.32; letter-spacing: var(--tracking-display); }
h3 { font-family: var(--font-body); font-weight: 600; }
.section { padding-block: var(--section-gap-s); }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-xl); }
.head h2 { font-size: var(--text-section); max-width: 20ch; }
.head p { max-width: 46ch; }
.card { position: relative; color: var(--color-ink-2); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card--lattice { isolation: isolate; overflow: hidden; }
.card--lattice::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-lattice); -webkit-mask: url("lattice.svg") 0 0 / 48px 48px repeat; mask: url("lattice.svg") 0 0 / 48px 48px repeat; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 1rem/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-rule-2); }
.btn--quiet:hover { background: var(--color-rule); }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.icon-btn:hover { background: var(--color-rule); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.icon-btn svg { width: 18px; height: 18px; }
.link { color: var(--color-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-thickness var(--dur-micro) var(--ease-out); }
.link:hover { text-decoration-thickness: 2px; }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

/* store badges, drawn like the official ones */
.stores { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.store { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 60px; padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-md); border: 1px solid var(--color-badge-line); border-radius: 12px; background: var(--color-badge); color: var(--color-badge-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.store:hover { background: var(--color-badge-hover); border-color: var(--color-badge-ink); }
.store:active { transform: scale(0.98); }
.store:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.store__icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; }
.store__icon svg { width: 100%; height: 100%; }
.store__icon--apple { color: var(--color-badge-ink); }
.store__text { display: grid; gap: var(--space-3xs); line-height: 1.05; white-space: nowrap; }
.store__text small { font-size: 0.75rem; }
.store__text strong { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
.store--soon { cursor: default; }
.store--soon:hover { background: var(--color-badge); border-color: var(--color-badge-line); }
.store--soon:active { transform: none; }
.store--soon .store__text small { color: var(--color-gold); }
.pl-b { fill: var(--color-play-blue); } .pl-g { fill: var(--color-play-green); } .pl-y { fill: var(--color-play-yellow); } .pl-r { fill: var(--color-play-red); }

.watch { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 48px; margin-top: var(--space-lg); padding: var(--space-2xs) var(--space-lg) var(--space-2xs) var(--space-2xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); color: var(--color-ink); font-weight: 600; text-decoration: none; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.watch:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.watch:active { transform: scale(0.98); }
.watch:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.watch__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); }
.watch__icon svg { width: 18px; height: 18px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in srgb, var(--color-paper) 86%, transparent); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 10px; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.nav__links a:not(.btn) { color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.nav__links a:not(.btn):hover { color: var(--color-ink); }
.nav__links a:not(.btn):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }
.nav__links .btn { min-height: 40px; padding-inline: var(--space-md); font-size: 0.9375rem; }

/* ---------- hero ---------- */
.hero { padding-block: var(--space-xl) var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.hero h1 { font-size: var(--text-display); max-width: 11ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 32ch; }
.hero .stores { margin-top: var(--space-xl); }
.screen { margin: 0; }
.screen__img { overflow: hidden; border: 1px solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper-2); aspect-ratio: 600 / 1235; }
.screen__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.screen figcaption { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: 0.9375rem; }

/* three phones, fanned like the posts; the one under the pointer comes forward */
.fan { position: relative; justify-self: center; width: min(100%, 660px); aspect-ratio: 1 / 0.96; margin: 0; }
.fan::before { content: ""; position: absolute; inset: 12% 10% 6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--color-accent-soft), transparent); }
.fan__phone { --x: 0%; --y: 0%; --r: 0deg; --s: 1; position: absolute; top: 0; left: 27%; z-index: 3; width: 46%; border-radius: 13%/6.4%; outline: none; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); transition: transform var(--dur-long) var(--ease-out), filter var(--dur-long) var(--ease-out); cursor: zoom-in; filter: drop-shadow(0 30px 40px var(--color-scrim)); }
.fan__phone img { width: 100%; height: auto; }
.fan__phone--l { --x: -58%; --y: 9%; --r: -9deg; --s: 0.9; z-index: 1; }
.fan__phone--r { --x: 58%; --y: 9%; --r: 9deg; --s: 0.9; z-index: 2; }
.fan:hover .fan__phone, .fan:focus-within .fan__phone, .fan[data-pick] .fan__phone { filter: drop-shadow(0 30px 40px var(--color-scrim)) brightness(0.5) saturate(0.7); }
.fan .fan__phone:hover, .fan .fan__phone:focus-visible, .fan .fan__phone[data-on] { --r: 0deg; --s: 1.04; --y: -2%; z-index: 5; filter: drop-shadow(0 40px 60px var(--color-scrim)) brightness(1) saturate(1); }
.fan .fan__phone:active { --s: 1.02; }
.fan .fan__phone:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.fan__star { position: absolute; width: 34px; height: 34px; pointer-events: none; }
.fan__star path { fill: none; stroke-width: 2; }
.fan__star--a { right: 2%; top: 4%; stroke: var(--color-accent); }
.fan__star--b { left: 0; bottom: 8%; width: 24px; height: 24px; stroke: var(--color-gold); }

/* ---------- feature guide ---------- */
.guide { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-2xl); align-items: start; }
.guide__tabs { display: grid; gap: var(--space-2xs); position: sticky; top: 92px; }
.guide__tabs[hidden] { display: none; }
.guide__tabs button { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-md); border: 1px solid transparent; border-radius: var(--radius-inner); background: transparent; color: var(--color-ink-2); font: 600 1rem/1.2 var(--font-body); text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.guide__tabs button:hover { background: var(--color-paper-2); color: var(--color-ink); }
.guide__tabs button:active { background: var(--color-paper-3); }
.guide__tabs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.guide__tabs button[aria-selected="true"] { background: var(--color-accent-soft); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); color: var(--color-ink); }
.guide__panels { display: grid; gap: var(--space-lg); }
.guide:not(:has(.guide__tabs:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.panel { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; padding: var(--space-xl); }
.panel__text h3 { font: 400 var(--text-section)/1.32 var(--font-display); }
.panel__text p { margin-top: var(--space-md); max-width: 52ch; font-size: 1.125rem; }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.facts li { padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-chip); color: var(--color-ink); font-size: 0.9375rem; }

/* ---------- trailer ---------- */
.trailer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.player { overflow: hidden; width: min(100%, 520px); justify-self: center; aspect-ratio: 4 / 5; padding: 0; }
.player video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-paper); }
.player__start { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.player__start span { display: grid; place-items: center; width: 88px; height: 88px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--shadow-glow); transition: transform var(--dur-short) var(--ease-out); }
.player__start svg { width: 34px; height: 34px; margin-left: var(--space-2xs); }
.player__start:hover span { transform: scale(1.06); }
.player__start:active span { transform: scale(0.97); }
.player__start:focus-visible span { outline: 3px solid var(--color-ink); outline-offset: 4px; }
.player__start[hidden] { display: none; }
.trailer__text h2 { font-size: var(--text-section); }
.trailer__text .lead { margin-top: var(--space-md); }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-xl) 0 0; }
.figures div { display: flex; flex-direction: column-reverse; justify-content: start; gap: var(--space-2xs); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.figures dd { margin: 0; color: var(--color-ink); font: 400 clamp(2rem, 2.4vw + 1rem, 3.25rem)/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.figures dt { color: var(--color-ink-2); font-size: 0.9375rem; }

/* ---------- posts ---------- */
.filters { display: flex; gap: var(--space-xs); margin-bottom: var(--space-lg); overflow-x: auto; scrollbar-width: none; }
.filters[hidden] { display: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 600 0.9375rem/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.filters button:hover { border-color: var(--color-muted); color: var(--color-ink); }
.filters button:active { background: var(--color-paper-3); }
.filters button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.filters button[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-ink); }
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin: 0; padding: 0; list-style: none; align-items: start; }
.wall > li[hidden] { display: none; }
.post { overflow: hidden; }
.post__head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); }
.post__head img { width: 40px; height: 40px; border-radius: 11px; }
.post__head b { display: block; color: var(--color-ink); font-weight: 600; font-size: 0.9375rem; }
.post__head p { color: var(--color-muted); font-size: var(--text-sm); }
.post__media { position: relative; }
.post__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; aspect-ratio: 4 / 5; background: var(--color-paper); }
.post__track::-webkit-scrollbar { display: none; }
.post__track:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.post__track img { width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.js .post__track img { cursor: zoom-in; }
.post__arrow { position: absolute; top: 50%; z-index: 1; translate: 0 -50%; display: none; background: var(--color-paper-3); }
.js .post__arrow { display: grid; }
.post__arrow[data-step="-1"] { left: var(--space-sm); }
.post__arrow[data-step="1"] { right: var(--space-sm); }
.post__arrow:disabled { visibility: hidden; }
.dots { display: flex; justify-content: center; gap: var(--space-xs); padding: var(--space-sm) 0 0; }
.dots i { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--color-rule-2); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.dots i[data-on] { background: var(--color-accent); transform: scale(1.35); }
.comment { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-sm); margin: var(--space-sm) var(--space-md) var(--space-md); }
.comment__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-accent-deep); color: var(--color-accent); font-size: 0.875rem; font-weight: 600; }
.comment__body { min-width: 0; padding: var(--space-sm) var(--space-md); border-radius: 4px var(--radius-inner) var(--radius-inner) var(--radius-inner); background: var(--color-paper-3); transition: box-shadow var(--dur-long) var(--ease-out); }
.post[data-last] .comment__body { box-shadow: 0 0 0 1px var(--color-accent); }
.comment__who { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.comment__who span { padding: 1px var(--space-xs); border-radius: 6px; background: var(--color-rule); color: var(--color-ink-2); font-size: 0.75rem; font-weight: 400; }
.comment__body p { margin-top: var(--space-2xs); font-size: 0.9375rem; color: var(--color-ink-2); }
.comment__link { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius-chip); color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.comment__link:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.comment__link:active { background: var(--color-rule); }
.comment__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.comment__link svg { width: 28px; height: 28px; flex: none; padding: var(--space-2xs); border-radius: 8px; background: var(--color-paper); }
.comment__link span { min-width: 0; }
.comment__link b { display: block; font-size: 0.875rem; font-weight: 600; }
.comment__link small { display: block; color: var(--color-muted); font-size: 0.75rem; }
.more { display: flex; justify-content: center; margin-top: var(--space-xl); }
.more[hidden] { display: none; }

/* viewer */
.viewer { width: min(94vw, 1040px); max-height: 94dvh; padding: 0; border: 0; background: transparent; color: var(--color-ink); overflow: visible; }
.viewer::backdrop { background: var(--color-scrim); }
.viewer__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); }
.viewer figure { display: grid; justify-items: center; gap: var(--space-sm); margin: 0; }
.viewer img { max-height: 82dvh; width: auto; max-width: 100%; aspect-ratio: 4 / 5; object-fit: contain; border-radius: var(--radius-inner); }
.viewer figcaption { color: var(--color-ink-2); font-size: 0.9375rem; }
.viewer__close { position: absolute; top: -12px; right: 0; translate: 0 -100%; }

/* ---------- privacy ---------- */
.private { padding: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.private h2 { font-size: var(--text-section); }
.private ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.private li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); color: var(--color-ink); }
.private li svg { width: 22px; height: 22px; margin-top: var(--space-2xs); color: var(--color-accent); }
.private .link { display: inline-block; margin-top: var(--space-lg); }

/* ---------- close ---------- */
.close { padding: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: center; background: linear-gradient(150deg, var(--color-accent-deep), var(--color-paper-2) 65%); }
.close h2 { font-size: var(--text-display-s); max-width: 12ch; }
.close .lead { margin-top: var(--space-md); }
.close .stores { margin-top: var(--space-xl); }
.close .screen { width: min(100%, 280px); justify-self: center; rotate: 3deg; }

/* ---------- footer ---------- */
.footer { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.footer p { max-width: 60ch; color: var(--color-muted); font-size: 0.9375rem; }
.footer ul { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-sm) var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.footer a { color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.footer a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.footer a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

/* ---------- legal pages ---------- */
.doc { padding-block: var(--space-2xl) var(--section-gap-s); }
.doc__sheet { max-width: 46rem; margin-inline: auto; padding: var(--space-2xl) clamp(var(--space-md), 5vw, var(--space-2xl)); }
.doc h1 { font-size: var(--text-display-s); }
.doc .updated { margin-top: var(--space-xs); color: var(--color-muted); }
.doc .short { margin-top: var(--space-xl); padding: var(--space-lg); border-radius: var(--radius-inner); background: var(--color-accent-soft); border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); color: var(--color-ink); }
.doc h2 { margin-top: var(--space-2xl); font-size: 1.375rem; }
.doc p, .doc ul { margin-top: var(--space-sm); }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: var(--space-2xs); }
.doc li::marker { color: var(--color-accent); }
.doc a { color: var(--color-accent); font-weight: 600; }
.doc a:hover { text-decoration-thickness: 2px; }
.doc a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.doc code { color: var(--color-ink); }

/* ---------- every screen size ---------- */
@media (max-width: 90rem) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 64rem) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 75rem) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); }
  .guide { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .guide__tabs { position: static; display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .guide__tabs::-webkit-scrollbar { display: none; }
  .guide__tabs button { flex: none; min-height: 44px; border-color: var(--color-rule-2); border-radius: var(--radius-pill); }
}
@media (max-width: 56rem) {
  .hero__grid, .trailer, .footer__grid, .head, .private, .close { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__text { text-align: center; }
  .hero h1, .hero .lead { margin-inline: auto; }
  .hero .stores { justify-content: center; }
        .private, .close { padding: var(--space-xl) var(--space-lg); }
  .close { text-align: center; }
  .close h2 { margin-inline: auto; }
  .close .stores { justify-content: center; }
  .footer ul { justify-content: start; }
  .trailer__text { order: -1; }
}
@media (max-width: 48rem) {
  .panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg); }
  .panel .screen { width: min(68%, 260px); justify-self: center; }
  .private ul { grid-template-columns: minmax(0, 1fr); }
  .viewer__inner { grid-template-columns: minmax(0, 1fr); }
  .viewer__inner > .icon-btn { display: none; }
}
@media (max-width: 40rem) {
  .nav__links li:not(:last-child) { display: none; }
  .brand { gap: var(--space-xs); font-size: 0.9375rem; }
  .brand img { width: 30px; height: 30px; }
  .nav__links .btn { padding-inline: var(--space-sm); font-size: 0.875rem; }
  .hero { padding-top: var(--space-md); }
  .stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); width: 100%; }
  .store { min-height: 52px; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 10px; }
  .store__icon { width: 24px; height: 24px; }
  .store__text small { font-size: 0.625rem; }
  .store__text strong { font-size: clamp(0.9375rem, 4.2vw, 1.125rem); }
                      .wall { grid-template-columns: minmax(0, 1fr); }
  .figures div { padding: var(--space-md); }
  .private, .close { padding: var(--space-lg) var(--space-md); }
  .close .screen { width: min(70%, 240px); }
}
@media (max-width: 22rem) {
    .brand span { display: none; }
  .store__icon { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fan__phone, .icon-btn, .store, .watch, .player__start span, .dots i { transition: none; } }