:root {
  --ink: #101310;
  --ink-soft: #2e332f;
  --paper: #f4f5f1;
  --paper-bright: #fbfcf9;
  --mist: #dde1dc;
  --line: rgba(17, 24, 18, 0.13);
  --green: #087642;
  --green-bright: #10a65e;
  --green-deep: #0d2d1e;
  --gold: #d6a555;
  --shadow: 0 28px 70px rgba(12, 24, 16, 0.14);
  --radius-lg: 2rem;
  --radius-md: 1.25rem;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(16, 166, 94, 0.08), transparent 24rem),
    linear-gradient(180deg, var(--paper-bright), var(--paper));
  font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.reader-open, body.auth-open { overflow: hidden; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { user-select: none; -webkit-user-select: none; caret-color: transparent; }
img { max-width: 100%; display: block; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 1000; background: #fff; padding: .7rem 1rem; border-radius: .5rem; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  max-width: calc(var(--max) + 3rem);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  background: rgba(250, 251, 248, 0.86);
  border-bottom: 1px solid rgba(17, 24, 18, 0.08);
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: .7rem; width: max-content; text-decoration: none; line-height: 1; }
.brand-mark { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; overflow: hidden; border: 1px solid rgba(8,118,66,.13); border-radius: .9rem; background: #f4f6f2; box-shadow: 0 8px 20px rgba(8,118,66,.14); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transform: scale(1.28); }
.brand b { display: block; font-size: 1.12rem; letter-spacing: -.03em; }
.brand small { display: block; margin-top: .34rem; font: 700 .58rem/1 Arial, sans-serif; letter-spacing: .22em; color: #556059; }
.desktop-nav { display: flex; gap: .35rem; padding: .3rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.62); }
.desktop-nav a { padding: .55rem .9rem; border-radius: 999px; text-decoration: none; font: 700 .78rem/1 Arial, sans-serif; letter-spacing: .05em; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { background: var(--ink); color: white; outline: none; }
.header-tools { justify-self: end; display: flex; align-items: center; gap: 1rem; }
.header-channel { text-decoration: none; font-weight: 700; font-size: .84rem; white-space: nowrap; }
.header-channel span, .text-link span { color: var(--green); }
.auth-trigger { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.7rem; padding: .55rem .9rem; border: 0; border-radius: 999px; color: white; background: var(--ink); cursor: pointer; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 22px rgba(13,23,17,.16); }
.auth-trigger:hover { background: var(--green); }
.auth-trigger:focus-visible, .auth-close:focus-visible, .provider-button:focus-visible, .auth-tabs button:focus-visible { outline: 3px solid rgba(16,166,94,.3); outline-offset: 3px; }
.auth-trigger-icon { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; color: var(--ink); background: white; font: 900 .86rem/1 Arial, sans-serif; }
.auth-trigger.is-signed-in { max-width: 14rem; color: var(--ink); border: 1px solid rgba(8,118,66,.22); background: rgba(255,255,255,.82); }
.auth-trigger.is-signed-in #auth-trigger-label { overflow: hidden; text-overflow: ellipsis; }
.auth-trigger.is-signed-in .auth-trigger-icon { color: white; background: var(--green); }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(33rem, 1.18fr);
  align-items: center;
  gap: 3.5rem;
  min-height: min(780px, calc(100vh - 5rem));
  max-width: var(--max);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 5rem;
  overflow: hidden;
}
.watercolor { position: absolute; z-index: -1; pointer-events: none; filter: blur(8px); opacity: .72; }
.watercolor-one { width: 33rem; height: 28rem; left: -17rem; top: 6rem; background: radial-gradient(ellipse at center, rgba(34,93,56,.21), rgba(80,90,82,.08) 45%, transparent 70%); transform: rotate(19deg); }
.eyebrow { margin: 0 0 1rem; color: var(--green); font: 800 .74rem/1.3 Arial, sans-serif; letter-spacing: .2em; }
.hero h1 { max-width: 9ch; margin: 0; font-size: clamp(3.2rem, 5.5vw, 5.5rem); font-weight: 900; line-height: .95; letter-spacing: -.07em; }
.hero h1 span { display: inline; color: var(--green); font-weight: 500; font-style: italic; }
.hero-intro { max-width: 42rem; margin: 1.8rem 0 0; color: #465049; font-size: 1.08rem; }
.hero-actions, .book-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { min-height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.25rem; border: 1px solid transparent; border-radius: 999px; cursor: pointer; text-decoration: none; font-weight: 800; transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .icon-button:focus-visible, .page-arrow:focus-visible { outline: 3px solid rgba(16,166,94,.3); outline-offset: 3px; }
.button-primary { color: white; background: linear-gradient(135deg, var(--green), var(--green-bright)); box-shadow: 0 14px 30px rgba(8,118,66,.22); }
.button-quiet { border-color: var(--line); background: rgba(255,255,255,.72); color: var(--ink); }
.hero-visual { position: relative; margin: 0; }
.hero-visual::before { content: ""; position: absolute; inset: 8% -3% -5% 14%; z-index: -1; border-radius: 3rem; background: linear-gradient(155deg, rgba(12,42,28,.12), rgba(16,166,94,.08)); transform: rotate(3deg); }
.hero-visual-link { display: block; border-radius: 2rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.hero-visual-link:hover { transform: translateY(-3px); }
.hero-visual-link:focus-visible { outline: 4px solid rgba(16,166,94,.32); outline-offset: 5px; }
.hero-visual img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; object-position: center; border: 1px solid rgba(255,255,255,.8); border-radius: 2rem; box-shadow: var(--shadow); }
.hero-visual figcaption { width: max-content; max-width: 90%; margin: -1.3rem 1.6rem 0 auto; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.11); font-size: .82rem; font-weight: 800; position: relative; }
.hero-visual figcaption a { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.05rem; border-radius: inherit; text-decoration: none; }
.hero-visual figcaption a:hover, .hero-visual figcaption a:focus-visible { color: white; background: var(--green); outline: none; }
.hero-visual figcaption span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 0 .25rem rgba(16,166,94,.13); }
.hero-visual figcaption a:hover span, .hero-visual figcaption a:focus-visible span { background: white; box-shadow: 0 0 0 .25rem rgba(255,255,255,.18); }

.section-divider { max-width: calc(var(--max) - 3rem); height: 1px; margin: 0 auto; background: var(--line); }

.section { max-width: var(--max); margin: 0 auto; padding: 7rem 1.5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 2.2rem; }
.section h2 { margin: 0; font-size: clamp(2.7rem, 5.4vw, 5.5rem); line-height: .96; letter-spacing: -.06em; }
.text-link { flex: 0 0 auto; text-decoration: none; font-weight: 800; }
.featured-video { display: grid; grid-template-columns: 1.45fr .55fr; overflow: hidden; min-height: 30rem; border-radius: var(--radius-lg); background: var(--ink); box-shadow: var(--shadow); }
.video-stage { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 2rem; min-height: 30rem; padding: 2.25rem; overflow: hidden; color: white; background: #07100b; }
.video-stage::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(3,8,5,.92) 0%, rgba(3,8,5,.68) 46%, rgba(3,8,5,.3) 100%), linear-gradient(0deg, rgba(3,8,5,.52), transparent 62%); }
.video-stage::after { content: ""; position: absolute; z-index: 1; width: 27rem; height: 27rem; right: 4rem; top: -12rem; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(255,255,255,.025), 0 0 0 10rem rgba(255,255,255,.018); }
.video-stage-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.video-stamp { position: absolute; z-index: 2; top: 1.7rem; left: 2rem; font: 1000 clamp(3rem, 9vw, 7rem)/.8 Arial Black, sans-serif; letter-spacing: -.1em; color: rgba(255,255,255,.09); transform: rotate(-4deg); }
.video-copy { position: relative; z-index: 2; }
.video-copy p { margin: 0 0 .7rem; color: #91d9ae; font: 800 .72rem/1 Arial, sans-serif; letter-spacing: .22em; }
.video-copy h3 { margin: 0; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1.02; letter-spacing: -.055em; }
.play-button { position: relative; z-index: 2; flex: 0 0 auto; display: grid; place-items: center; width: 5.4rem; height: 5.4rem; border-radius: 50%; color: var(--ink); background: white; text-decoration: none; font-size: 1.6rem; box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.play-button:hover { background: var(--green-bright); color: white; }
.live-panel { display: flex; flex-direction: column; justify-content: end; padding: 2rem; color: white; background: linear-gradient(180deg, #153523, #0b1710); }
.live-label { display: flex; align-items: center; gap: .6rem; margin: 0 auto auto 0; font: 800 .72rem/1 Arial, sans-serif; letter-spacing: .12em; }
.live-label span { width: .65rem; height: .65rem; border-radius: 50%; background: #ff4a4a; box-shadow: 0 0 0 .3rem rgba(255,74,74,.15); }
.live-panel h3 { margin: 3rem 0 .8rem; font-size: 1.55rem; line-height: 1.2; }
.live-panel > p:not(.live-label) { color: #bdc8c0; font-size: .9rem; }
.button-dark { margin-top: 1rem; border-color: rgba(255,255,255,.2); color: white; background: rgba(255,255,255,.06); }
.program-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; margin-top: 1rem; }
.program-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 1.25rem; background: rgba(255,255,255,.76); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.program-card:hover { transform: translateY(-4px); border-color: rgba(8,118,66,.38); box-shadow: 0 18px 34px rgba(17,37,24,.09); }
.program-image-wrap { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #122119; }
.program-card-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.program-card:hover .program-card-image { transform: scale(1.04); }
.program-image-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3), transparent 52%); }
.program-number { position: absolute; top: 1rem; left: 1rem; color: white; font: 800 .7rem/1 Arial, sans-serif; letter-spacing: .12em; text-shadow: 0 1px 8px rgba(0,0,0,.65); }
.program-card-copy { display: flex; flex: 1; flex-direction: column; min-height: 8.5rem; padding: 1.1rem 1.2rem 1.2rem; }
.program-card h3 { margin: 0 0 .4rem; font-size: 1.25rem; line-height: 1.16; }
.program-card p { margin: 0; color: #667069; font-size: .78rem; }
.program-arrow { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--green); background: rgba(255,255,255,.92); font-weight: 900; box-shadow: 0 5px 14px rgba(0,0,0,.14); }

.books-section { position: relative; max-width: none; padding-inline: max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem)); color: #f5f1e8; background: radial-gradient(circle at 76% 25%, rgba(191,132,48,.17), transparent 22rem), linear-gradient(135deg, #090b0a, #17201a 58%, #080a09); overflow: hidden; }
.books-section::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: repeating-linear-gradient(94deg, transparent 0 48px, rgba(255,255,255,.04) 49px 50px); pointer-events: none; }
.books-heading, .featured-book, .catalog-category { position: relative; z-index: 1; }
.books-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; max-width: var(--max); margin: 0 auto 4rem; }
.books-heading h2 { margin: 0; color: white; font: 500 clamp(3.5rem, 8vw, 7rem)/.85 Georgia, serif; letter-spacing: -.06em; }
.books-heading-copy { max-width: 31rem; }
.books-heading-copy > p { margin: 0 0 1rem; color: #bfc6c0; }
.member-required { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .85rem; border: 1px solid rgba(214,165,85,.28); border-radius: 999px; color: #f2d5a3; background: rgba(214,165,85,.08); font-size: .8rem; font-weight: 800; }
.member-required span { color: var(--gold); font-size: .55rem; }
.featured-book { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 6rem; max-width: var(--max); margin: 0 auto; padding: 3.5rem; border: 1px solid rgba(255,255,255,.12); border-radius: 2rem; background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); box-shadow: 0 34px 90px rgba(0,0,0,.26); }
.atheron-copy, .book-cover-wrap { position: relative; z-index: 1; }
.eyebrow-gold { color: var(--gold); }
.catalog-label { display: inline-flex; margin: 0 0 1.1rem; padding: .45rem .75rem; border-radius: 999px; color: #0f160f; background: var(--gold); font-size: .72rem; font-weight: 900; }
.featured-book h3 { margin: 0; color: white; font: 500 clamp(3rem, 5.5vw, 5.4rem)/.86 Georgia, serif; letter-spacing: -.055em; }
.book-kicker { margin: 1rem 0 0; color: var(--gold); font-size: 1.35rem; font-weight: 700; }
.book-description { max-width: 38rem; color: #bfc6c0; }
.atheron-copy blockquote { margin: 2rem 0; padding: 1rem 0 1rem 1.4rem; border-left: 3px solid var(--gold); color: white; font-size: 1.45rem; font-weight: 700; }
.book-progress { max-width: 36rem; padding: 1.1rem; border: 1px solid rgba(255,255,255,.13); border-radius: 1rem; background: rgba(255,255,255,.04); }
.book-progress > div:first-child { display: flex; justify-content: space-between; gap: 2rem; font-size: .86rem; }
.book-progress span { color: #aeb7b0; }
.progress-track { height: .32rem; margin-top: .8rem; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.11); }
.progress-track span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #f1cf8b); transition: width .3s ease; }
.button-gold { color: #15120c; background: linear-gradient(135deg, #c88e36, #f0c878); box-shadow: 0 14px 30px rgba(190,134,47,.18); }
.button-outline-light { color: white; border-color: rgba(255,255,255,.2); background: transparent; }
.book-cover-wrap { justify-self: center; width: min(100%, 31rem); text-align: center; }
.book-cover { position: relative; z-index: 2; width: 82%; height: auto; aspect-ratio: auto; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 38px 34px rgba(0,0,0,.58)); }
.book-cover-3d { transform: translateX(2%); }
.orbit { position: absolute; width: 28rem; height: 28rem; top: 43%; left: 50%; border: 1px solid rgba(214,165,85,.28); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 4rem rgba(214,165,85,.025), 0 0 0 8rem rgba(214,165,85,.018); }
.book-cover-wrap p { margin-top: 2.5rem; color: #c9b185; font: 700 .65rem/1.4 Georgia, serif; letter-spacing: .18em; }
.catalog-category { max-width: var(--max); margin: 5rem auto 0; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,.13); }
.catalog-category-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; }
.catalog-category-heading h3 { margin: .25rem 0 0; color: white; font: 500 clamp(2.5rem, 5vw, 4.2rem)/1 Georgia, serif; }
.catalog-category-actions { display: flex; align-items: end; gap: 1rem; }
.catalog-category-actions > p { max-width: 30rem; margin: 0; color: #aeb7b0; text-align: right; }
.catalog-scroll-controls { display: flex; flex: 0 0 auto; gap: .5rem; }
.catalog-scroll-controls[hidden] { display: none; }
.catalog-scroll-controls button { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: white; background: rgba(255,255,255,.06); cursor: pointer; }
.catalog-scroll-controls button:hover:not(:disabled), .catalog-scroll-controls button:focus-visible { border-color: rgba(245,198,110,.65); color: #f5c66e; background: rgba(245,198,110,.08); }
.catalog-scroll-controls button:focus-visible { outline: 3px solid rgba(214,165,85,.28); outline-offset: 3px; }
.catalog-scroll-controls button:disabled { opacity: .28; cursor: default; }
.catalog-scroll-controls svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.catalog-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.25rem) / 2); gap: 1.25rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: inline mandatory; scrollbar-color: rgba(214,165,85,.65) rgba(255,255,255,.06); scrollbar-width: thin; }
.catalog-grid > * { scroll-snap-align: start; }
.catalog-grid:focus-visible { outline: 3px solid rgba(214,165,85,.25); outline-offset: .55rem; }
.coming-soon-card, .comic-card, .comic-coming-soon { display: grid; grid-template-columns: minmax(9rem,.8fr) minmax(0,1.2fr); align-items: center; gap: 1.5rem; min-height: 20rem; padding: 1.5rem; border: 1px solid rgba(255,255,255,.13); border-radius: 1.6rem; background: rgba(255,255,255,.045); }
.coming-soon-art, .comic-coming-soon-art { display: grid; place-content: center; align-self: stretch; min-height: 17rem; border-radius: 1.1rem; color: #e8cf9f; background: radial-gradient(circle at 50% 38%, rgba(214,165,85,.22), transparent 38%), repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 12px), #111713; text-align: center; }
.coming-soon-art span, .coming-soon-art strong { display: block; font-family: Georgia, serif; letter-spacing: .1em; }
.coming-soon-art span { font-size: .8rem; }
.coming-soon-art strong { color: white; font-size: 2.35rem; line-height: 1; }
.catalog-chip { display: inline-flex; margin-bottom: .9rem; color: var(--gold); font: 800 .68rem/1 Arial, sans-serif; letter-spacing: .14em; }
.coming-soon-card h4, .comic-card h4, .comic-coming-soon h4 { margin: 0; color: white; font-size: 1.65rem; line-height: 1.15; }
.coming-soon-card p, .comic-card p, .comic-coming-soon p { color: #aeb7b0; }
.comic-card { grid-template-columns: minmax(11rem,.8fr) minmax(0,1.2fr); }
.comic-cover-button { position: relative; display: block; align-self: stretch; min-height: 25rem; padding: 0; overflow: hidden; border: 0; border-radius: 1.1rem; background: #121713; cursor: pointer; }
.comic-cover-button img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.comic-cover-button:hover img { transform: scale(1.025); }
.comic-cover-button span { position: absolute; right: .8rem; bottom: .8rem; padding: .45rem .7rem; border-radius: 999px; color: #18140e; background: #f0c878; font-size: .75rem; font-weight: 900; }
.comic-card-copy .button { width: 100%; margin-top: 1rem; }
.catalog-progress { font-size: .82rem; font-weight: 800; }
.comic-coming-soon { min-height: 20rem; }
.comic-coming-soon-art strong { color: white; font: 500 7rem/.85 Georgia, serif; }
.comic-coming-soon-art span { color: #cdb585; font-size: 1rem; font-weight: 800; }
.comic-coming-soon b { display: inline-flex; padding: .55rem .8rem; border-radius: 999px; color: #16120b; background: var(--gold); font-size: .72rem; letter-spacing: .1em; }

.shop-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.shop-section .section-heading { margin-bottom: .5rem; }
.shop-section .section-heading h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.3; letter-spacing: 0; }
.games-section { border-top: 1px solid var(--line); }
.game-feature { display: grid; grid-template-columns: minmax(180px, 320px) minmax(0, 1fr); gap: clamp(1rem, 4vw, 3rem); align-items: center; border-radius: 28px; padding: clamp(1rem, 3vw, 2rem); background: #242624; color: #fff; }
.game-feature img { display: block; width: 100%; max-height: 310px; object-fit: contain; }
.game-feature h3 { font-size: clamp(1.7rem, 4vw, 3rem); margin: .3rem 0; }
.game-feature p { font-size: 1rem; line-height: 1.6; }
.game-feature .game-tagline { color: #f2d391; font-weight: 700; }
.game-meta { opacity: .85; }
.more-game { display: flex; align-items: center; gap: 1rem; padding: 1rem; margin-bottom: 2rem; border: 1px solid var(--line); border-radius: 24px; }
.more-game img { width: 84px; height: 84px; object-fit: contain; }
.more-game > div { flex: 1; min-width: 0; }
.more-game h3 { margin: 0; font-size: 1.2rem; }
.more-game p { margin: .25rem 0; font-size: .9rem; }
.game-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; padding: 0; border: 0; margin: 0; background: #151515; color: white; }
.game-dialog::backdrop { background: #000; }
.game-dialog-shell { display: flex; flex-direction: column; width: 100%; height: 100%; }
.game-dialog-header { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: max(.4rem, env(safe-area-inset-top)) 1rem .4rem; background: #1b1b1b; }
.game-dialog-header button { padding: .45rem .8rem; color: inherit; border: 1px solid #777; border-radius: 10px; background: transparent; font-size: 1rem; }
.game-dialog iframe { width: 100%; flex: 1; min-height: 0; border: 0; }
body.game-open { overflow: hidden; }
.shop-visual { min-width: 0; margin: 0; }
.shop-visual img { width: 100%; height: auto; border-radius: 1.25rem; box-shadow: var(--shadow); }
.shop-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.shop-note { flex: 1 1 20rem; margin: 0; color: #465049; font-size: 1rem; }
.shop-contact .button { flex-shrink: 0; min-width: 12rem; font-size: 1rem; }

.more-section { border-top: 1px solid var(--line); }
.section-note { max-width: 34rem; margin: 0; color: #606a63; }
.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.social-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 7rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: rgba(255,255,255,.66); text-decoration: none; transition: transform .18s ease, background .18s ease; }
.social-card:hover { transform: translateY(-3px); background: white; }
.social-icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 1px solid rgba(18,24,20,.08); border-radius: 1rem; background: white; box-shadow: 0 8px 20px rgba(18,24,20,.07); }
.social-icon img { display: block; width: 2.15rem; height: 2.15rem; object-fit: contain; }
.social-card h3 { margin: 0; font-size: 1rem; }
.social-card p { margin: .2rem 0 0; color: #6c756f; font-size: .78rem; overflow-wrap: anywhere; }
.social-card > span:last-child { color: var(--green); font-weight: 900; }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; max-width: var(--max); margin: 0 auto; padding: 3rem 1.5rem 7rem; border-top: 1px solid var(--line); color: #68716b; font-size: .78rem; }
footer > p { margin: 0; text-align: center; letter-spacing: .12em; }
.footer-brand { color: var(--ink); }
.footer-meta { justify-self: end; display: grid; justify-items: end; gap: .45rem; }
.footer-meta p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1rem; }
.footer-legal a, .auth-disclosure a { color: var(--green); font-weight: 800; text-underline-offset: .18rem; }
.footer-legal a:hover, .footer-legal a:focus-visible, .auth-disclosure a:hover, .auth-disclosure a:focus-visible { color: var(--ink); }
.mobile-nav { display: none; }

.auth-dialog { width: min(60rem, calc(100vw - 2rem)); max-width: none; max-height: min(48rem, calc(100dvh - 2rem)); padding: 0; overflow: hidden auto; border: 0; border-radius: 1.8rem; color: var(--ink); background: #f7f8f4; box-shadow: 0 34px 100px rgba(4,14,8,.34); }
.auth-dialog::backdrop { background: rgba(6,12,8,.72); backdrop-filter: blur(8px); }
.auth-shell { min-height: 34rem; }
.auth-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.auth-brand .brand-mark { width: 2.45rem; height: 2.45rem; }
.auth-brand b { font-size: 1rem; }
.auth-close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: white; cursor: pointer; font-size: 1.45rem; }
.auth-guest[hidden],
.auth-member[hidden] { display: none !important; }
.auth-guest { display: grid; grid-template-columns: .8fr 1.2fr; }
.auth-intro { padding: 3rem; color: white; background: radial-gradient(circle at 20% 16%, rgba(16,166,94,.36), transparent 13rem), linear-gradient(145deg, #0d2d1e, #0b110d 72%); }
.auth-intro .eyebrow { color: #8ee0ae; }
.auth-intro h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -.045em; }
.auth-intro > p:last-child { margin-top: 1.4rem; color: #c0cec4; }
.auth-panel { position: relative; isolation: isolate; padding: 2.2rem 2.5rem 2.5rem; }
.auth-panel button, .auth-close { position: relative; z-index: 1; pointer-events: auto; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.auth-panel button > *, .auth-close > * { pointer-events: none; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin-bottom: 1.25rem; padding: .25rem; border: 1px solid var(--line); border-radius: 999px; background: #ebeee9; }
.auth-tabs button { min-height: 2.65rem; border: 0; border-radius: 999px; color: #667069; background: transparent; cursor: pointer; font-weight: 800; }
.auth-tabs button[aria-selected="true"] { color: white; background: var(--ink); box-shadow: 0 6px 16px rgba(12,18,14,.14); }
.auth-help { margin: -.45rem 0 .65rem; color: #667069; font-size: .8rem; }
.provider-button { width: 100%; min-height: 3rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .65rem .85rem; border: 1px solid rgba(8,118,66,.32); border-radius: .9rem; color: var(--ink); background: white; cursor: pointer; text-align: left; font-weight: 800; box-shadow: 0 8px 20px rgba(8,118,66,.08); }
.provider-button:hover { border-color: var(--green); background: #f4fbf7; transform: translateY(-1px); }
.provider-button:disabled { cursor: wait; opacity: .62; }
.provider-icon { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: .55rem; color: white; background: #4285f4; font: 900 .86rem/1 Arial, sans-serif; }
.provider-icon.google-icon { background: white; }
.provider-icon.google-icon svg { width: 1.2rem; height: 1.2rem; display: block; }
.provider-button small { padding: .18rem .45rem; border-radius: 999px; color: #6e776f; background: #edf0eb; font-size: .7rem; font-weight: 700; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.15rem 0; color: #7b837d; font-size: .76rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.email-auth-form { display: grid; gap: .5rem; }
.email-auth-form label { margin-top: .25rem; font-size: .84rem; font-weight: 800; }
.email-auth-form input { width: 100%; min-height: 3rem; padding: .72rem .85rem; border: 1px solid var(--line); border-radius: .85rem; color: var(--ink); background: white; outline: none; }
.email-auth-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(8,118,66,.1); }
.auth-submit { width: 100%; margin-top: .7rem; }
.auth-text-link { width: max-content; margin: .6rem 0 0 auto; padding: .2rem; border: 0; color: var(--green); background: transparent; cursor: pointer; font-weight: 800; text-decoration: underline; text-underline-offset: .2rem; }
.auth-text-link:disabled { opacity: .55; cursor: wait; }
.auth-disclosure { margin: 1rem 0 0; color: #737c75; font-size: .72rem; line-height: 1.5; }
.auth-status { min-height: 1.4rem; margin: 0 0 .65rem; color: #b42318; font-size: .8rem; font-weight: 700; }
.auth-status.success { color: var(--green); }
.auth-member { min-height: 32rem; padding: 2rem 2.5rem 2.5rem; }
.member-summary { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.member-summary .eyebrow { margin-bottom: .5rem; }
.member-avatar { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--green), var(--green-bright)); font-size: 1.8rem; font-weight: 900; box-shadow: 0 14px 34px rgba(8,118,66,.24); }
.auth-member h2 { margin: 0; font-size: 2.35rem; line-height: 1; letter-spacing: -.05em; }
.member-name { margin: .8rem 0 .05rem; font-weight: 800; }
.member-email { margin: 0; color: #68716b; font-size: .86rem; overflow-wrap: anywhere; }
.verification-badge { display: inline-flex; margin-top: .65rem; padding: .25rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.verification-badge.verified { color: #075d35; background: #d9f4e4; }
.verification-badge.unverified { color: #8a4e00; background: #fff0ce; }
.member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.member-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 1.2rem; background: rgba(255,255,255,.72); }
.member-card h3, .delete-confirm h3 { margin: 0 0 1rem; font-size: 1rem; }
.profile-form { display: grid; gap: .55rem; }
.profile-form label, .delete-confirm label { font-size: .84rem; font-weight: 800; }
.profile-form input, .delete-confirm input { width: 100%; min-height: 3rem; padding: .72rem .85rem; border: 1px solid var(--line); border-radius: .85rem; color: var(--ink); background: white; outline: none; }
.profile-form input:focus, .delete-confirm input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(8,118,66,.1); }
.profile-form .button { width: 100%; margin-top: .35rem; }
.verification-action { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.verification-action p, .member-card-note, .delete-confirm p { margin: 0; color: #667069; font-size: .8rem; }
.verification-action .auth-text-link { margin: .35rem 0 0; }
.member-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: 0; }
.member-stats div { padding: .9rem; border-radius: .9rem; background: #edf2ed; }
.member-stats dt { color: #68716b; font-size: .74rem; }
.member-stats dd { margin: .2rem 0 0; color: var(--green); font-size: 1.45rem; font-weight: 900; }
.sync-state { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 .45rem; color: #5d665f; font-size: .8rem; font-weight: 800; }
.sync-state::before { content: ""; width: .48rem; height: .48rem; border-radius: 50%; background: #8f9992; }
.sync-state[data-state="syncing"]::before { background: var(--gold); }
.sync-state[data-state="synced"] { color: var(--green); }
.sync-state[data-state="synced"]::before { background: var(--green-bright); }
.sync-state[data-state="error"] { color: #b42318; }
.sync-state[data-state="error"]::before { background: #d92d20; }
.member-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.member-actions .auth-text-link { margin: 0; }
.auth-danger-link { color: #b42318; }
.delete-confirm { margin-top: 1rem; padding: 1.25rem; border: 1px solid rgba(180,35,24,.22); border-radius: 1.2rem; background: #fff7f6; }
.delete-provider-note { margin-top: .6rem !important; font-weight: 700; }
.delete-confirm label { display: grid; gap: .45rem; margin-top: 1rem; }
.delete-confirm-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1rem; }
.button-danger { color: white; background: #b42318; }
.button-danger:hover { background: #8f1c13; }
.member-status { margin-top: 1rem; }

.reader { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; color: white; background: #090b0a; }
.reader::backdrop { background: rgba(0,0,0,.85); backdrop-filter: blur(8px); }
.reader-shell { display: grid; grid-template-rows: auto minmax(0,1fr) auto; width: 100%; height: 100dvh; min-height: 0; overflow: hidden; }
.reader-header { display: flex; align-items: center; justify-content: space-between; min-height: 5.2rem; padding: .8rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,.11); background: rgba(13,16,14,.97); }
.reader-header p { margin: 0; color: var(--gold); font: 700 .55rem/1 Arial, sans-serif; letter-spacing: .16em; }
.reader-header h2 { margin: .25rem 0 0; font: 500 1.3rem/1 Georgia, serif; letter-spacing: .08em; }
.reader-header-actions { display: flex; gap: .6rem; }
.reader-toc-button { min-height: 2.8rem; padding: 0 1rem; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; color: white; background: rgba(255,255,255,.05); cursor: pointer; font-weight: 800; }
.reader-toc-button:hover { border-color: rgba(245,198,110,.6); color: #f5c66e; background: rgba(245,198,110,.08); }
.icon-button { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; color: white; background: rgba(255,255,255,.05); cursor: pointer; font-size: 1.35rem; }
.icon-button.marked { color: #f5c66e; border-color: rgba(245,198,110,.4); background: rgba(245,198,110,.08); }
.reader-canvas { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0,1fr) 3.5rem; align-items: stretch; min-width: 0; min-height: 0; gap: .75rem; padding: .75rem; overflow: hidden; background: radial-gradient(circle at 50% 50%, #212a24, #070807 70%); }
.page-frame { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; scrollbar-color: rgba(245,198,110,.65) rgba(255,255,255,.06); scrollbar-width: thin; }
.page-stage { display: grid; place-items: center; min-width: 100%; min-height: 100%; }
.page-frame img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; box-shadow: 0 20px 55px rgba(0,0,0,.55); }
.page-frame.is-zoomed img { max-width: none; max-height: none; }
.page-arrow { position: relative; z-index: 3; align-self: center; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: white; background: rgba(5,8,6,.82); box-shadow: 0 8px 24px rgba(0,0,0,.32); cursor: pointer; touch-action: manipulation; }
.page-arrow svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.page-arrow:hover { border-color: rgba(245,198,110,.65); background: rgba(23,35,27,.96); }
.page-arrow:disabled { opacity: .25; cursor: default; }
.reader-controls { position: relative; z-index: 4; display: grid; grid-template-columns: auto auto minmax(8rem,1fr) auto auto; align-items: center; gap: .8rem 1rem; min-height: 5rem; padding: .7rem 1.1rem; border-top: 1px solid rgba(255,255,255,.11); background: #0d100e; }
.reader-controls label { font-size: .78rem; white-space: nowrap; }
.reader-controls input[type="range"] { width: 100%; accent-color: var(--gold); }
.reader-text-button { border: 0; color: #d1d7d2; background: transparent; cursor: pointer; font-size: .78rem; }
.reader-text-button span { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin-left: .3rem; border-radius: 999px; background: rgba(255,255,255,.1); }
.zoom-controls { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.reader-control-button, .reader-fit-button { min-height: 2.35rem; border: 1px solid rgba(255,255,255,.18); border-radius: .65rem; color: white; background: rgba(255,255,255,.07); cursor: pointer; font-weight: 800; }
.reader-control-button { width: 2.35rem; padding: 0; font-size: 1.25rem; }
.reader-fit-button { padding: .45rem .7rem; font-size: .72rem; }
.reader-control-button:hover, .reader-fit-button:hover, .reader-fit-button.active { border-color: rgba(245,198,110,.6); color: #f5c66e; background: rgba(245,198,110,.08); }
.reader-control-button:disabled { opacity: .3; cursor: default; }
#zoom-value { min-width: 3.7rem; color: #cbd2cc; text-align: center; font-size: .72rem; white-space: nowrap; }
#page-form { display: flex; align-items: center; gap: .5rem; }
#page-input { width: 4.8rem; padding: .42rem .5rem; border: 1px solid rgba(255,255,255,.16); border-radius: .5rem; color: white; background: #1b201c; }
.toc-dialog { width: min(48rem, calc(100vw - 2rem)); max-width: none; max-height: min(48rem, calc(100dvh - 2rem)); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 1.4rem; color: white; background: #101411; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.toc-dialog::backdrop { background: rgba(0,0,0,.62); backdrop-filter: blur(5px); }
.toc-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.15rem; border-bottom: 1px solid rgba(255,255,255,.11); }
.toc-header p { margin: 0; color: var(--gold); font: 700 .55rem/1 Arial, sans-serif; letter-spacing: .16em; }
.toc-header h2 { margin: .25rem 0 0; font: 500 1.3rem/1 Georgia, serif; }
.toc-list { display: grid; gap: .35rem; max-height: min(40rem, calc(100dvh - 8rem)); padding: .8rem; overflow-y: auto; }
.toc-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; width: 100%; padding: .72rem .85rem; border: 1px solid transparent; border-radius: .8rem; color: #edf1ed; background: transparent; cursor: pointer; text-align: left; }
.toc-item:hover, .toc-item:focus-visible { border-color: rgba(245,198,110,.35); color: #f5c66e; background: rgba(245,198,110,.07); outline: none; }
.toc-item[data-depth="1"] { padding-left: 1.8rem; color: #d7ded8; }
.toc-item[data-depth="2"] { padding-left: 3rem; color: #bdc8c0; font-size: .9rem; }
.toc-page { color: var(--gold); font-weight: 800; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 2rem; max-width: calc(100vw - 2rem); padding: .75rem 1rem; border-radius: 999px; color: white; background: #121713; box-shadow: 0 14px 34px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translate(-50%, 1rem); transition: .2s ease; font-size: .84rem; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1060px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 3rem; }
  .hero-copy { max-width: 48rem; }
  .hero h1 { max-width: none; }
  .hero-visual { width: min(100%, 52rem); }
  .program-grid { grid-template-columns: repeat(3, 1fr); }
  .books-heading { align-items: start; }
  .featured-book { grid-template-columns: 1fr; gap: 3.5rem; }
  .atheron-copy { order: 1; max-width: 44rem; }
  .book-cover-wrap { order: 2; width: min(72vw, 25rem); }
  .book-cover { width: 100%; }
  .catalog-grid { grid-auto-columns: min(34rem, 82vw); }
  .shop-section { grid-template-columns: 1fr; }
  .game-feature { grid-template-columns: 1fr; }
  .game-feature img { max-height: 210px; }
  .more-game { flex-wrap: wrap; }
  .more-game > button { width: 100%; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 5rem; }
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .site-header { gap: .75rem; padding: calc(.72rem + env(safe-area-inset-top)) .8rem .72rem; }
  .header-channel { display: none; }
  .auth-trigger { min-height: 2.45rem; padding: .48rem .72rem; font-size: .8rem; }
  .auth-trigger-icon { width: 1.2rem; height: 1.2rem; font-size: .75rem; }
  .brand-mark { width: 2.5rem; height: 2.5rem; border-radius: .78rem; }
  .brand b { font-size: 1rem; }
  .brand small { font-size: .52rem; }
  .hero { gap: 2.6rem; padding: 2.5rem 1rem 3.5rem; }
  .hero h1 { font-size: clamp(2.55rem, 11.5vw, 3.65rem); line-height: 1; letter-spacing: -.055em; }
  .hero-intro { font-size: 1rem; }
  .hero-actions .button { flex: 1 1 10rem; }
  .hero-visual img { min-height: 0; height: auto; aspect-ratio: auto; object-fit: contain; object-position: center; border-radius: 1.25rem; }
  .hero-visual figcaption { margin-inline: auto; }
  .section-divider { max-width: calc(100% - 2rem); }
  .section { padding: 5rem 1rem; }
  .section-heading { display: block; }
  .section h2 { font-size: clamp(2.35rem, 10vw, 3.35rem); line-height: 1; letter-spacing: -.045em; }
  .text-link { display: inline-block; margin-top: 1rem; }
  .featured-video { grid-template-columns: 1fr; }
  .video-stage { min-height: 26rem; padding: 1.4rem; }
  .video-copy h3 { font-size: clamp(2.2rem, 9.5vw, 3.25rem); }
  .play-button { width: 4.5rem; height: 4.5rem; }
  .live-panel { min-height: 18rem; }
  .program-grid { grid-template-columns: repeat(2, 1fr); }
  .program-card-copy { min-height: 7.5rem; }
  .books-section { padding-inline: 1rem; }
  .books-heading { display: block; margin-bottom: 2.5rem; }
  .books-heading-copy { margin-top: 1.5rem; }
  .featured-book { gap: 2.6rem; padding: 1.3rem; border-radius: 1.35rem; }
  .featured-book h3 { font-size: clamp(2.7rem, 13vw, 4.1rem); }
  .atheron-copy { order: 1; }
  .book-cover-wrap { order: 2; width: min(78vw, 22rem); }
  .book-cover { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
  .orbit { width: 20rem; height: 20rem; }
  .book-actions .button { flex: 1 1 12rem; }
  .catalog-category { margin-top: 3.5rem; padding-top: 2.3rem; }
  .catalog-category-heading { display: block; }
  .catalog-category-actions { align-items: center; justify-content: space-between; margin-top: .8rem; }
  .catalog-category-actions > p { text-align: left; }
  .catalog-grid { grid-auto-columns: min(88%, 28rem); padding-bottom: .65rem; }
  .coming-soon-card, .comic-card, .comic-coming-soon { grid-template-columns: 1fr; min-height: 0; padding: 1rem; }
  .coming-soon-art, .comic-coming-soon-art { min-height: 14rem; }
  .comic-cover-button { min-height: 0; aspect-ratio: 2 / 3; }
  .shop-section { gap: 1.25rem; }
  .shop-visual img { border-radius: .8rem; }
  .shop-contact { text-align: center; }
  .shop-note { flex-basis: 100%; }
  .shop-contact .button { width: 100%; }
  .social-grid { grid-template-columns: 1fr; }
  footer { display: grid; grid-template-columns: 1fr; justify-items: start; gap: 1rem; padding: 2.5rem 1rem 2rem; text-align: left; }
  footer > p { text-align: left; }
  .footer-meta { justify-self: stretch; justify-items: start; }
  .footer-legal { justify-content: flex-start; }
  .mobile-nav { position: fixed; z-index: 80; left: .65rem; right: .65rem; bottom: calc(.55rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,1fr); min-height: 4.2rem; padding: .35rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1.1rem; background: rgba(12,16,13,.93); box-shadow: 0 14px 40px rgba(0,0,0,.28); backdrop-filter: blur(16px); }
  .mobile-nav a { display: grid; place-items: center; align-content: center; gap: .25rem; border-radius: .8rem; color: #aeb8b1; text-decoration: none; font: 700 .59rem/1 Arial, sans-serif; }
  .mobile-nav a span { font-size: 1.05rem; }
  .mobile-nav a.active { color: white; background: rgba(255,255,255,.09); }
  .auth-dialog { width: 100vw; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .auth-dialog-header { padding: .75rem .85rem; }
  .auth-guest { grid-template-columns: 1fr; }
  .auth-intro { padding: 1.5rem 1rem; background: linear-gradient(145deg, #0d2d1e, #0b110d); }
  .auth-intro h2 { font-size: clamp(1.8rem, 8.5vw, 2.35rem); }
  .auth-intro > p:last-child { margin: .85rem 0 0; font-size: .9rem; }
  .auth-panel { padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
  .auth-member { padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
  .member-grid { grid-template-columns: 1fr; }
  .member-summary { align-items: start; }
  .member-avatar { width: 4rem; height: 4rem; font-size: 1.45rem; }
  .auth-member h2 { font-size: 2rem; }
  .member-actions { align-items: stretch; flex-direction: column; }
  .member-actions .button { width: 100%; }
  .member-actions .auth-text-link { margin-inline: auto; }
  .delete-confirm-actions { display: grid; grid-template-columns: 1fr; }
  .reader-header { min-height: 4rem; padding: .5rem .7rem; }
  .reader-header .icon-button { width: 2.5rem; height: 2.5rem; }
  .reader-toc-button { min-height: 2.5rem; padding-inline: .8rem; }
  .reader-canvas { grid-template-columns: 1fr; padding: .35rem; }
  .page-arrow { position: absolute; z-index: 3; top: 50%; width: 3rem; height: 3rem; transform: translateY(-50%); background: rgba(0,0,0,.74); }
  .page-prev { left: .55rem; }
  .page-next { right: .55rem; }
  .reader-controls { grid-template-columns: auto minmax(0,1fr) auto; gap: .45rem .55rem; min-height: 4.8rem; padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); }
  .reader-controls input[type="range"] { grid-column: 1 / -1; grid-row: 1; }
  .reader-controls > label { grid-column: 1; grid-row: 2; }
  .zoom-controls { grid-column: 2; grid-row: 2; justify-self: center; gap: .3rem; }
  #page-form { grid-column: 3; grid-row: 2; }
  .reader-text-button { display: none; }
  .toc-dialog { width: 100vw; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .toc-list { max-height: calc(100dvh - 4.5rem); }
  #page-form label { display: none; }
  #page-input { width: 4rem; }
  .reader-control-button { width: 2.2rem; min-height: 2.2rem; }
  .reader-fit-button { min-height: 2.2rem; padding: .4rem .55rem; }
  #zoom-value { min-width: 3.25rem; font-size: .68rem; }
}

@media (max-width: 420px) {
  .program-grid { grid-template-columns: 1fr; }
  .program-card-copy { min-height: 7rem; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .book-actions { display: grid; }
  .book-actions .button { width: 100%; }
  .brand { gap: .5rem; }
  .site-header .brand small { letter-spacing: .14em; }
  .auth-trigger #auth-trigger-label { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
  .reader-fit-button { font-size: .65rem; }
  #zoom-value { min-width: 2.9rem; }
}

@media (max-height: 640px) {
  .reader-header { min-height: 3.5rem; padding-block: .35rem; }
  .reader-header p { display: none; }
  .reader-header h2 { margin: 0; font-size: 1rem; }
  .reader-controls { min-height: 4.4rem; padding-block: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}