/* ============================================================
   MagicReader — web edition
   Design system from the icon: coral book + camera-lens eye +
   gold sparkle + smile. Premium-but-friendly, paper-warm.
   ============================================================ */

/* ---- self-hosted reading faces (shipped with the iOS app) ---- */
@font-face{font-family:"Literata";src:url("assets/fonts/Literata-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url("assets/fonts/Literata-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Literata";src:url("assets/fonts/Literata-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url("assets/fonts/Literata-BoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"OpenDyslexic";src:url("assets/fonts/OpenDyslexic-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"OpenDyslexic";src:url("assets/fonts/OpenDyslexic-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"OpenDyslexic";src:url("assets/fonts/OpenDyslexic-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --coral:#FB6A50; --coral-400:#FE8A72; --coral-600:#E0492F; --coral-700:#B83A22; --coral-50:#FAECE7;
  --gold:#FFC23D; --gold-light:#FFD981; --gold-deep:#E0A21E;
  --paper:#FBF5E9; --paper-2:#F3E9D6; --edge:#DAC3A2;
  --ink:#2A2422; --ink-2:#6B5F57; --ink-3:#9A8B79;
  --sage:#3E8E7E; --sage-light:#E1F0EC;
  --danger:#C8442B;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --read:"Literata",Georgia,serif;
  --maxw:1180px;
  --r-sm:8px; --r:12px; --r-lg:20px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(42,36,34,.06),0 2px 8px rgba(42,36,34,.06);
  --shadow:0 8px 30px rgba(42,36,34,.12);
  --shadow-lg:0 24px 70px rgba(42,36,34,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
[hidden]{display:none!important}   /* author display rules must not defeat the hidden attribute */
html{scroll-behavior:smooth;background:#04184D}   /* over-scroll at the top shows night sky, not cream */
body{
  margin:0;font-family:var(--ui);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body[data-view="reader"]{overflow:hidden}
a{color:var(--coral-600);text-decoration:none}
a:hover{color:var(--coral)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.01em;margin:0}
img{max-width:100%;display:block}
.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}

/* ---- buttons ---- */
.btn{font-family:var(--ui);font-weight:500;font-size:1rem;border:0;border-radius:var(--r);
  padding:.7em 1.2em;cursor:pointer;display:inline-flex;align-items:center;gap:.55em;
  transition:transform .15s var(--ease),background .2s,box-shadow .2s,color .2s;line-height:1;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 6px 18px rgba(251,106,80,.32)}
.btn-coral:hover{background:var(--coral-400)}
.btn-ghost{background:transparent;color:var(--coral-700);box-shadow:inset 0 0 0 1.5px var(--edge)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--coral);color:var(--coral-600)}
.btn-soft{background:var(--coral-50);color:var(--coral-700)}
.btn-soft:hover{background:#f6ded4}
.btn-text{background:none;color:var(--ink-2);font-size:.92rem;padding:.5em}
.btn-text:hover{color:var(--coral-600)}
.btn-lg{font-size:1.06rem;padding:.85em 1.4em;border-radius:14px}
.btn-sm{font-size:.86rem;padding:.55em .9em}
.btn.full{width:100%;justify-content:center}
:focus-visible{outline:3px solid var(--coral-700);outline-offset:2px;border-radius:4px}
/* theme-aware focus so the ring always contrasts the reading surface */
.reader[data-theme="white"] :focus-visible{outline-color:#1c1c1c}
.reader[data-theme="beige"] :focus-visible{outline-color:#3a2f24}
.reader[data-theme="black"] :focus-visible{outline-color:#fff}
.hud-chip:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.settings-sheet :focus-visible{outline-width:2px;outline-offset:-1px}

/* ============================ NAV ============================ */
/* Cosmos: transparent over the twilight sky; a twilight-indigo glass capsule once scrolled
   (the app's #101A3E@0.55 blurred capsule) — dark glass reads well over the cream below too. */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem clamp(1rem,4vw,2.4rem);background:transparent;
  backdrop-filter:none;transition:background .3s,box-shadow .25s,border-color .25s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(16,26,62,.72);backdrop-filter:saturate(1.3) blur(14px);
  box-shadow:0 4px 24px rgba(4,24,77,.35);border-bottom-color:rgba(200,220,248,.14)}
.brand{display:flex;align-items:center;gap:.55rem;color:#F2F7FF}
.brand-mark{display:grid;place-items:center;filter:drop-shadow(0 2px 6px rgba(4,24,77,.5))}
.brand-word{font-family:var(--display);font-size:1.32rem;font-weight:500;letter-spacing:-.02em;color:#F2F7FF}
.brand-word b{color:var(--coral-400);font-weight:600}
.nav-links{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.8rem)}
.nav-links a{color:#C8DCF8;font-weight:500;font-size:.95rem}
.nav-links a:hover{color:#fff}

/* ==================== COSMOS HERO (twilight sky) ====================
   Ported from the app's Cosmos shelf theme: deep navy → cobalt → sky cyan
   falling to a warm cream horizon (Figma stops 0/36/76/93%), breathing
   atmospheric blooms, twinkling stars, and an occasional shooting star. */
.cosmos-hero{position:relative;overflow:hidden;
  margin-top:calc(-1 * (30px + 1.7rem));   /* extend the sky up behind the sticky nav */
  padding-top:calc(30px + 1.7rem)}
.cosmos-sky{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,#04184D 0%,#0F60CF 40%,#32B1DF 82%,#FBE3BA 97%,#FBE3BA 100%)}
/* content must stack above the absolutely-positioned sky */
.cosmos-hero .hero,.cosmos-hero .hero-carousel{position:relative;z-index:1}
/* Blooms use closest-side ellipses so each gradient reaches full transparency INSIDE its
   own box — a farthest-corner gradient cut off at the box edge draws a visible seam line. */
.sky-blob{position:absolute;pointer-events:none;will-change:opacity}
.sky-horizon{left:-18%;right:-18%;bottom:-34%;height:70%;
  background:radial-gradient(ellipse closest-side at center,rgba(255,226,176,.6),transparent);
  animation:skyBreatheA 17s ease-in-out infinite}
.sky-cerulean{left:-8%;top:28%;width:78%;height:62%;
  background:radial-gradient(ellipse closest-side at center,rgba(90,154,232,.4),transparent);
  animation:skyBreatheB 23s ease-in-out infinite}
.sky-nebula{right:-14%;top:-4%;width:62%;height:58%;
  background:radial-gradient(ellipse closest-side at center,rgba(106,90,216,.34),transparent)}
.sky-moonlight{right:10%;top:-14%;width:44%;height:40%;
  background:radial-gradient(ellipse closest-side at center,rgba(191,216,255,.3),transparent)}
@keyframes skyBreatheA{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes skyBreatheB{0%,100%{opacity:1}50%{opacity:.62}}

/* twinkling stars (js-placed; upper ~72% of the sky) */
.sky-stars{position:absolute;inset:0}
.sky-stars .star{position:absolute;border-radius:50%;opacity:.1;
  background:radial-gradient(circle,var(--star-c,#EAF2FF) 0%,rgba(234,242,255,.32) 42%,transparent 70%);
  animation:twinkle var(--dur,4s) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.1}50%{opacity:var(--peak,.7)}}
/* 8 accent stars: 4-point diffraction-spike flare — dim most of the cycle, then a quick anime pop */
.sky-stars .spark{border-radius:0;background:radial-gradient(circle,#fff 0%,rgba(232,246,255,.5) 16%,transparent 30%);
  animation:sparkpop var(--dur,9s) ease-in-out infinite}
.sky-stars .spark::before,.sky-stars .spark::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(232,246,255,.9) 46%,#fff 50%,rgba(232,246,255,.9) 54%,transparent)}
.sky-stars .spark::after{transform:translateY(-50%) rotate(90deg)}
@keyframes sparkpop{0%,78%,100%{opacity:.12;transform:scale(.55)}88%{opacity:.95;transform:scale(1.3)}}

/* the occasional shooting star: faint tail -> bright head, right → left, ~1s flight */
.shooting-star{position:absolute;width:110px;height:2.2px;border-radius:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(234,248,255,0),#F6FCFF)}
.shooting-star.fly{animation:shoot .95s linear forwards}
@keyframes shoot{
  0%{opacity:0;transform:translate(0,0) rotate(var(--rot,156deg))}
  15%{opacity:.95}
  72%{opacity:.6}
  100%{opacity:0;transform:translate(var(--dx,-320px),var(--dy,150px)) rotate(var(--rot,156deg))}}

/* sky → paper transition below the horizon */
.horizon-bridge{height:90px;background:linear-gradient(180deg,#FBE3BA,var(--paper))}

/* hero content over the sky: moonlight text, soft #7FB8FF title glow (the app's centre-title glow) */
.cosmos-hero .eyebrow{background:rgba(16,26,62,.55);color:#7FE0FF;backdrop-filter:blur(6px)}
.cosmos-hero .hero-title{color:#F4F8FF;text-shadow:0 0 30px rgba(127,184,255,.5),0 2px 18px rgba(4,24,77,.4)}
.cosmos-hero .hero-sub{color:#DCE8FF}
.cosmos-hero .hero-reassure{color:rgba(220,232,255,.78)}
.cosmos-hero .hero-reassure svg{color:#6FE3C4}
.cosmos-hero .btn-coral{box-shadow:0 6px 26px rgba(251,106,80,.5)}
.cosmos-hero .btn-ghost{box-shadow:inset 0 0 0 1.5px rgba(220,232,255,.4);color:#DCE8FF}
.cosmos-hero .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #7FE0FF;color:#fff}
/* covers float on the horizon glow: a moonlight halo instead of a hard drop shadow
   (the app: "Neon/Cosmos get a GLOW halo — a drop shadow is invisible on a dark bg") */
.cosmos-hero .hcover{box-shadow:0 0 26px rgba(200,220,248,.3),0 12px 34px rgba(4,24,77,.45)}
.cosmos-hero button.hcover:hover{box-shadow:0 0 38px rgba(255,226,176,.5),0 14px 40px rgba(4,24,77,.5)}

/* ============================ HERO ============================ */
.hero{max-width:860px;margin:0 auto;padding:clamp(2rem,5vw,3.6rem) clamp(1rem,4vw,2.4rem) 0;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy{display:flex;flex-direction:column;align-items:center}
.eyebrow{display:inline-block;background:var(--coral-50);color:var(--coral-700);font-weight:600;
  font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:.45em .9em;border-radius:var(--r-pill)}
.hero-title{font-size:clamp(2.6rem,6vw,4.2rem);line-height:1.02;margin:1.1rem 0 0;font-weight:600}
.hero-sub{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);line-height:1.55;max-width:42ch;margin:1.1rem auto 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;justify-content:center}
.hero-reassure{display:flex;align-items:center;gap:.5rem;color:var(--ink-3);font-size:.86rem;margin-top:1.2rem}
.hero-reassure svg{color:var(--sage);flex:none}

/* ---- floating cover carousel ---- */
.hero-carousel{position:relative;width:100%;margin-top:clamp(2rem,4vw,3rem);padding:34px 0 24px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cover-track{display:flex;gap:26px;width:max-content;padding:0 13px;animation:coverScroll 80s linear infinite;will-change:transform}
.hero-carousel:hover .cover-track{animation-play-state:paused}
@keyframes coverScroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}   /* covers drift left → right */
.hcover{position:relative;flex:0 0 auto;width:160px;height:240px;border-radius:3px 5px 5px 3px;
  background:var(--ground,#2f5d4f);color:#f4ead4;display:flex;flex-direction:column;align-items:center;
  padding:24px 15px 16px;box-shadow:0 16px 32px rgba(20,16,14,.34),0 4px 10px rgba(0,0,0,.22);
  border:0;font-family:var(--display);overflow:hidden;animation:hbob 5.5s ease-in-out infinite}
button.hcover{cursor:pointer}
.hcover::before{content:"";position:absolute;inset:7px;border:1px solid rgba(244,234,212,.34);border-radius:2px;pointer-events:none}
.hcover::after{content:"";position:absolute;inset:10px;border:1px solid rgba(244,234,212,.16);border-radius:2px;pointer-events:none}
.hcover-title{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:21px;line-height:1.03;
  letter-spacing:.012em;text-align:center;text-wrap:balance;margin-top:6px}
.hcover.sm .hcover-title{font-size:16px}
.hcover.xs .hcover-title{font-size:13px;letter-spacing:.02em}
.hcover-orn{color:var(--accent,#e9c46a);font-size:14px;margin-top:auto;margin-bottom:7px;line-height:1}
.hcover-author{font-family:var(--ui);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;color:rgba(244,234,212,.82);padding-top:7px;border-top:1px solid rgba(244,234,212,.32);align-self:stretch}
button.hcover{transition:transform .2s var(--ease),box-shadow .2s}
button.hcover:hover{box-shadow:0 22px 44px rgba(20,16,14,.42),0 6px 14px rgba(0,0,0,.28);filter:brightness(1.06)}
.cover-track .hcover:nth-child(3n){animation-delay:-1.9s}
.cover-track .hcover:nth-child(3n+1){animation-delay:-3.7s}
@keyframes hbob{0%,100%{transform:translateY(3px)}50%{transform:translateY(-7px)}}

/* ---- camera lens (used by the camera-permission modal) ---- */
.eye-lens{position:relative;border-radius:50%;background:
   radial-gradient(circle at 38% 32%,#3a3338,#211c20 60%,#171317);
   display:grid;place-items:center;overflow:hidden;border:6px solid #2c262b}
.eye-lens.sm{width:96px;aspect-ratio:1;border-width:4px;box-shadow:0 10px 26px rgba(42,36,34,.3)}
.lens-glass{position:absolute;inset:0;display:grid;place-items:center}
.lens-iris{width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#5b5560,#1c181c 70%);
  box-shadow:inset 0 0 18px rgba(0,0,0,.7),0 0 30px rgba(251,106,80,.18)}
.lens-glint{position:absolute;width:16%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.85);
  transform:translate(-90%,-90%);filter:blur(.5px)}

/* ---- camera-eye motif ---- */
.hero-eye{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:440px;margin:0 auto;width:100%}
.eye-rings,.eye-rings span{position:absolute;inset:0;border-radius:50%}
.eye-rings span{border:2px solid var(--coral);opacity:0;animation:scan 2.6s var(--ease) infinite}
.eye-rings span:nth-child(2){animation-delay:.8s}
.eye-rings span:nth-child(3){animation-delay:1.6s}
@keyframes scan{0%{transform:scale(.62);opacity:.5}80%{opacity:0}100%{transform:scale(1.05);opacity:0}}
.eye-lens{position:relative;width:64%;aspect-ratio:1;border-radius:50%;background:
   radial-gradient(circle at 38% 32%,#3a3338,#211c20 60%,#171317);
   box-shadow:0 24px 60px rgba(42,36,34,.34),inset 0 0 0 10px rgba(255,255,255,.04),inset 0 8px 26px rgba(0,0,0,.6);
   display:grid;place-items:center;overflow:hidden;border:6px solid #2c262b}
.eye-lens.sm{width:96px;border-width:4px;box-shadow:0 10px 26px rgba(42,36,34,.3)}
.eye-lens video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:0;transition:opacity .6s}
.hero-eye.live video{opacity:.95}
.hero-eye.live .lens-glass{opacity:0}
.lens-glass{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .5s}
.lens-iris{width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#5b5560,#1c181c 70%);
  box-shadow:inset 0 0 18px rgba(0,0,0,.7),0 0 30px rgba(251,106,80,.18)}
.lens-glint{position:absolute;width:16%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.85);
  transform:translate(-90%,-90%);filter:blur(.5px)}
.eye-sparkle{position:absolute;top:8%;right:10%;filter:drop-shadow(0 2px 6px rgba(224,162,30,.55));animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:rotate(0) scale(1);opacity:.95}50%{transform:rotate(20deg) scale(1.12);opacity:1}}
.eye-caption{position:absolute;bottom:-2.4rem;font-family:var(--display);color:var(--ink-2);font-style:italic;font-size:1.05rem}

/* ====================== HOW IT WORKS ====================== */
.section-title{font-size:clamp(1.7rem,3.4vw,2.4rem);text-align:center}
.section-sub{text-align:center;color:var(--ink-2);max-width:46ch;margin:.7rem auto 0;font-size:1.05rem}
.how{max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,2.4rem)}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.4rem}
.how-card{background:#fff;border:1px solid var(--edge);border-radius:var(--r-lg);padding:1.5rem 1.3rem;
  box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s}
.how-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.how-ico{font-size:1.8rem;width:54px;height:54px;display:grid;place-items:center;border-radius:14px;
  background:var(--coral-50);margin-bottom:1rem}
.how-card h3{font-size:1.2rem;margin-bottom:.45rem}
.how-card p{color:var(--ink-2);font-size:.94rem;line-height:1.55;margin:0}

/* ========================= LIBRARY ========================= */
.library{max-width:var(--maxw);margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2.4rem) 4rem}
.library-head{margin-bottom:2rem}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:clamp(1rem,2.4vw,1.8rem)}
.book-card{cursor:pointer;border:0;background:none;padding:0;text-align:left;font-family:inherit;
  display:flex;flex-direction:column;gap:.7rem;transition:transform .2s var(--ease)}
.book-card:hover{transform:translateY(-5px)}
.book-cover{position:relative;aspect-ratio:2/3;border-radius:6px 10px 10px 6px;overflow:hidden;
  background:var(--paper-2);box-shadow:var(--shadow);
  background-size:cover;background-position:center}
.book-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0));z-index:2}
.book-cover::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);border-radius:inherit}
.cover-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:1rem;color:#f7eede;font-family:var(--display);text-align:center;gap:.4rem}
.cover-fallback .cf-title{font-size:1.1rem;font-weight:600;line-height:1.15}
.cover-fallback .cf-author{font-size:.78rem;opacity:.8;font-family:var(--ui)}
.book-cover .read-badge{position:absolute;left:50%;bottom:12px;transform:translate(-50%,8px);opacity:0;
  background:var(--coral);color:#fff;font-size:.8rem;font-weight:600;padding:.45em .9em;border-radius:var(--r-pill);
  box-shadow:var(--shadow);transition:.2s var(--ease);z-index:3;white-space:nowrap}
.book-card:hover .read-badge{opacity:1;transform:translate(-50%,0)}
.book-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.18);z-index:3}
.book-progress i{display:block;height:100%;background:var(--coral);width:0}
.book-meta .bm-title{font-family:var(--display);font-size:1rem;font-weight:600;line-height:1.2}
.book-meta .bm-author{color:var(--ink-2);font-size:.85rem}
.book-meta .bm-len{color:var(--ink-3);font-size:.76rem;margin-top:.15rem}

/* ========================== FOOTER ========================== */
.site-footer{background:#0B173E;color:#DCE8FF;margin-top:2rem}
.foot-grid{max-width:var(--maxw);margin:0 auto;padding:3rem clamp(1rem,4vw,2.4rem) 1.5rem;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem}
.site-footer .brand-word{color:#fff;font-size:1.4rem}
.site-footer .brand-word b{color:var(--coral-400)}
.foot-brand p,.foot-col p{color:#9FB4DE;font-size:.92rem;line-height:1.6;margin:.7rem 0 0}
.foot-col h4{color:#fff;font-size:1rem;font-family:var(--ui);font-weight:600}
.foot-fine{max-width:var(--maxw);margin:0 auto;padding:1.3rem clamp(1rem,4vw,2.4rem) 2.4rem;
  border-top:1px solid #1E2C5C;color:#7C90C0;font-size:.8rem}

/* ============================================================
   READER
   ============================================================ */
.reader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);font-family:var(--read)}
.reader[data-theme="white"]{--bg:#fff;--fg:#1c1c1c;--muted:#6e6e6e;--accent:#c8442b;--chrome:#faf8f3;--chrome-line:#e7e0d3}
.reader[data-theme="beige"]{--bg:#f6ecd4;--fg:#3a2f24;--muted:#8a795f;--accent:#b83a22;--chrome:#efe3c8;--chrome-line:#dcccaa}
.reader[data-theme="black"]{--bg:#121212;--fg:#cfc7bb;--muted:#8a847b;--accent:#fe8a72;--chrome:#1c1c1c;--chrome-line:#2c2c2c}
.reader{background:var(--bg);color:var(--fg)}

.chrome{display:flex;align-items:center;gap:.6rem;padding:.6rem clamp(.6rem,2vw,1.2rem);
  background:var(--chrome);border-color:var(--chrome-line);transition:opacity .3s, transform .3s;z-index:6}
.reader-top{border-bottom:1px solid var(--chrome-line)}
.reader-bottom{border-top:1px solid var(--chrome-line);gap:1rem}
.reader.immersive .chrome{opacity:0;pointer-events:none}
.reader.immersive .reader-top{transform:translateY(-100%)}
.reader.immersive .reader-bottom{transform:translateY(100%)}
.reader-head{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;line-height:1.2}
.rh-title{font-family:var(--display);font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh-chapter{font-family:var(--ui);font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-tools{display:flex;gap:.2rem}
.icon-btn{position:relative;background:none;border:0;color:var(--fg);width:42px;height:42px;border-radius:10px;display:grid;
  place-items:center;cursor:pointer;transition:background .15s,color .15s;flex:none}
.icon-btn:hover{background:rgba(128,128,128,.16)}
.icon-btn.on{color:var(--accent);background:rgba(184,58,34,.12)}
.icon-btn.on::after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--accent)}  /* non-color "on" cue */
.icon-btn .aa{font-family:var(--display);font-weight:600;font-size:1.05rem}

/* page surface */
.page-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.edge-nav{position:absolute;top:0;bottom:0;width:13%;min-width:64px;border:0;background:none;cursor:pointer;z-index:4;
  opacity:0;transition:opacity .2s}
.edge-prev{left:0}.edge-next{right:0}
.page-stage:hover .edge-nav{opacity:.0}
.edge-nav:hover{opacity:.06;background:radial-gradient(circle,var(--fg),transparent 70%)}
.page-viewport{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 1.5rem),720px);overflow:hidden}
.page-flow{height:100%;column-fill:auto;font-family:var(--read);color:var(--fg);
  transition:transform .3s var(--ease);will-change:transform}
.page-flow.flip-off{transition:none}
.page-flow p{margin:0 0 1em;line-height:1.7;text-align:justify;hyphens:auto;orphans:2;widows:2}
.page-flow .first-para{text-indent:0}
.page-flow p+p{text-indent:1.3em}
.page-flow h2,.page-flow h3{font-family:var(--display);color:var(--fg);break-after:avoid;
  margin:.2em 0 .8em;line-height:1.2;font-weight:600}
.page-flow h2{font-size:1.5em;break-before:column}
.page-flow h2.book-open{break-before:auto}
.page-flow h3{font-size:1.18em}
.reader[data-font="opendyslexic"] .page-flow{font-family:"OpenDyslexic",sans-serif}
.reader[data-font="opendyslexic"] .page-flow p{text-align:left}

.page-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.7rem;
  background:var(--bg);color:var(--muted);font-family:var(--ui);z-index:7;transition:opacity .3s}
.page-loading.hide{opacity:0;pointer-events:none}
.spinner{width:18px;height:18px;border:2.5px solid var(--edge);border-top-color:var(--coral);border-radius:50%;
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* directional gesture flash */
.turn-arc{position:absolute;top:0;bottom:0;width:30%;pointer-events:none;opacity:0;z-index:5}
.turn-arc-left{left:0;background:linear-gradient(90deg,rgba(251,106,80,.5),transparent)}
.turn-arc-right{right:0;background:linear-gradient(270deg,rgba(251,106,80,.5),transparent)}
.turn-arc.flash{animation:arcflash .42s var(--ease)}
@keyframes arcflash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* finger-control margin zones (swipe left→right inside one to turn) */
.swipe-zones{position:absolute;inset:0;pointer-events:none;z-index:4}
.swipe-zone{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;opacity:0;color:var(--sage);transition:opacity .2s var(--ease),background .2s}
.reader[data-theme="black"] .swipe-zone{color:#5fc4ad}
.swipe-zone-left{left:0;width:24%}
.swipe-zone-right{right:0;width:24%}
.swipe-zones.show .swipe-zone{opacity:.4}
.swipe-zone.active{opacity:1;background:linear-gradient(rgba(62,142,126,.16),rgba(62,142,126,.16))}
.swipe-zone.active.ready{background:linear-gradient(rgba(62,142,126,.34),rgba(62,142,126,.34))}
.swipe-zone-left.active{box-shadow:inset -2px 0 0 rgba(62,142,126,.6)}
.swipe-zone-right.active{box-shadow:inset 2px 0 0 rgba(62,142,126,.6)}
.swipe-zone-left.ready .zone-arrow{animation:nudgeR 1s ease-in-out infinite}    /* left margin: flick inward = →  */
.swipe-zone-right.ready .zone-arrow{animation:nudgeL 1s ease-in-out infinite}   /* right margin: flick inward = ←  */
@keyframes nudgeR{0%,100%{transform:translateX(-5px)}50%{transform:translateX(6px)}}
@keyframes nudgeL{0%,100%{transform:translateX(5px)}50%{transform:translateX(-6px)}}
.zone-cap{font-family:var(--ui);font-size:.58rem;text-transform:uppercase;letter-spacing:.2em;opacity:.85}
.zone-arrow{font-size:2.3rem;line-height:1;font-weight:700}
.zone-label{font-family:var(--ui);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}

/* finger-control fingertip cursor: coral (free) → gold (in a margin) → green (armed/ready) */
.finger-cursor{position:absolute;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);
  border:2px solid var(--coral);background:rgba(251,106,80,.16);box-shadow:0 0 16px rgba(251,106,80,.35);
  pointer-events:none;z-index:5;transition:left .04s linear,top .04s linear,background .15s,border-color .15s,box-shadow .15s}
.finger-cursor::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--coral);transition:background .15s}
.finger-cursor.in-zone{border-color:var(--gold);background:rgba(255,194,61,.18);box-shadow:0 0 18px rgba(255,194,61,.45)}
.finger-cursor.in-zone::after{background:var(--gold)}
.finger-cursor.armed{border-color:#3fae93;background:rgba(62,142,126,.3);box-shadow:0 0 24px rgba(62,142,126,.6)}
.finger-cursor.armed::after{background:#7fe0c6}

/* progress / scrubber */
.progress-wrap{flex:1;display:flex;flex-direction:column;gap:.2rem}
.scrubber{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
  background:var(--chrome-line);outline:none;cursor:pointer}
.scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--coral);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.scrubber::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--coral)}
.progress-meta{text-align:center;font-family:var(--ui);font-size:.74rem;color:var(--muted)}

/* settings sheet */
.settings-sheet{position:absolute;top:56px;right:clamp(.5rem,2vw,1.2rem);width:min(330px,calc(100vw - 1.5rem));
  background:var(--chrome);border:1px solid var(--chrome-line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:1.1rem;z-index:9;display:flex;flex-direction:column;gap:1rem;font-family:var(--ui)}
.sheet-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sheet-label{font-size:.85rem;color:var(--muted);font-weight:500}
.swatches{display:flex;gap:.5rem}
.swatch{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;cursor:pointer;border:2px solid var(--chrome-line)}
.swatch.active{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral-50)}
.swatch.active::after{content:"✓";font-size:1rem;font-weight:700}  /* non-color selected cue */
.sw-white{background:#fff}.sw-beige{background:#f6ecd4}.sw-black{background:#121212}
.sw-white.active::after{color:#1c1c1c}.sw-beige.active::after{color:#3a2f24}.sw-black.active::after{color:#fff}
.seg{display:flex;background:rgba(128,128,128,.12);border-radius:10px;padding:3px}
.seg button{border:0;background:none;color:var(--fg);font-family:var(--ui);font-size:.82rem;padding:.4em .7em;border-radius:7px;cursor:pointer}
.seg button.active{background:var(--bg);box-shadow:var(--shadow-sm)}
.stepper{display:flex;align-items:center;gap:.5rem}
.stepper button{width:34px;height:34px;border-radius:8px;border:1px solid var(--chrome-line);background:var(--bg);color:var(--fg);cursor:pointer;font-weight:600}
.stepper input[type=range]{width:110px}
.sens-end{font-family:var(--ui);font-weight:600;color:var(--muted);width:14px;text-align:center}
.chapter-select{flex:1;max-width:60%;background:var(--bg);color:var(--fg);border:1px solid var(--chrome-line);border-radius:8px;padding:.45em;font-family:var(--ui);font-size:.85rem}

/* camera HUD */
.cam-hud{position:absolute;right:clamp(.6rem,2vw,1.2rem);bottom:74px;z-index:8;display:flex;gap:.6rem;
  background:rgba(20,18,18,.78);backdrop-filter:blur(8px);padding:.55rem;border-radius:14px;
  box-shadow:var(--shadow-lg);color:#f2ece2;align-items:center;animation:hudIn .3s var(--ease)}
@keyframes hudIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hud-lens{position:relative;width:108px;height:80px;border-radius:10px;overflow:hidden;
  background:#000;box-shadow:inset 0 0 0 2px var(--gold)}
.reader[data-theme="black"] .hud-lens{box-shadow:inset 0 0 0 2px var(--coral-400)}
.hud-lens video,.hud-lens canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.hud-ring{position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 2px rgba(255,194,61,.0);
  animation:breathe 2.6s ease-in-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{box-shadow:inset 0 0 0 2px rgba(255,194,61,.25)}50%{box-shadow:inset 0 0 0 3px rgba(255,194,61,.85)}}
.hud-lens.fired{animation:firedpulse .4s var(--ease)}
@keyframes firedpulse{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.hud-meta{display:flex;flex-direction:column;gap:.4rem;min-width:148px}
.hud-mode-row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.hud-mode{font-family:var(--ui);font-size:.8rem;font-weight:600}
.hud-readout{font-family:var(--ui);font-size:.74rem;opacity:.85;font-variant-numeric:tabular-nums;white-space:nowrap}
.hud-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.hud-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--coral));transition:width .1s}
.hud-actions{display:flex;gap:.3rem;flex-wrap:wrap}
.hud-chip{background:rgba(255,255,255,.12);color:#f2ece2;border:0;border-radius:7px;font-size:.74rem;
  padding:.35em .5em;cursor:pointer;font-family:var(--ui)}
.hud-chip:hover{background:rgba(255,255,255,.24)}

/* ===================== ONBOARDING MODAL ===================== */
.modal-scrim{position:fixed;inset:0;z-index:200;background:rgba(34,28,26,.55);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:1.2rem;animation:fade .25s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:relative;background:var(--paper);border-radius:var(--r-lg);max-width:430px;width:100%;
  padding:2.2rem 1.9rem;box-shadow:var(--shadow-lg);text-align:center;animation:pop .3s var(--ease)}
@keyframes pop{from{transform:translateY(12px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.modal-x{position:absolute;top:1rem;right:1rem;border:0;background:none;font-size:1.1rem;color:var(--ink-3);cursor:pointer}
.onb-eye{display:grid;place-items:center;margin-bottom:1rem}
.modal h2{font-size:1.65rem}
.onb-lead{color:var(--ink-2);line-height:1.55;margin:.7rem 0 1.3rem}
.onb-points{list-style:none;padding:0;margin:0 0 1.5rem;text-align:left;display:flex;flex-direction:column;gap:.7rem}
.onb-points li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink);font-size:.92rem;line-height:1.4}
.onb-points li span{flex:none}
.onb-status{color:var(--danger);font-size:.86rem;margin:.9rem 0 0;min-height:1.1em}
.btn-text{display:block;margin:.6rem auto 0}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:300;
  background:var(--ink);color:var(--paper);padding:.7em 1.1em;border-radius:var(--r-pill);font-size:.9rem;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.3s var(--ease);font-family:var(--ui);max-width:90vw;text-align:center}
.toast.show{opacity:1;pointer-events:auto;transform:translateX(-50%)}

/* ========================= RESPONSIVE ========================= */
@media (max-width:900px){
  .how-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr;gap:1.6rem}
}
@media (max-width:560px){
  .hcover{width:128px;height:192px;padding:18px 12px 13px}
  .hcover-title{font-size:17px}
  .hcover.sm .hcover-title{font-size:14px}
  .hcover.xs .hcover-title{font-size:11.5px}
}
@media (max-width:560px){
  .nav-links a:not(.btn){display:none}
  .how-grid{grid-template-columns:1fr}
  .cam-hud{left:50%;right:auto;transform:translateX(-50%);bottom:70px}
  .reader-head{font-size:.9rem}
  .edge-nav{min-width:74px}   /* easier one-handed tap targets */
}

/* The landing is a fixed piece of brand artwork now (the Cosmos twilight → cream horizon),
   identical in OS light and dark mode — matching the app, where Cosmos is one fixed look.
   The reader keeps its own three themes and still defaults from prefers-color-scheme. */

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hud-ring,.cover-track,.hcover{animation:none}
  .page-flow{transition:opacity .12s linear}
  .turn-arc.flash{animation:none}
  .finger-cursor{transition:none}
  .swipe-zone.ready .zone-arrow{animation:none}
  /* Cosmos sky: hold a calm, static twilight */
  .sky-blob,.sky-stars .star{animation:none}
  .sky-stars .star{opacity:.55}
  .sky-stars .spark{opacity:.7;transform:scale(1)}
  .shooting-star{display:none}
  .btn:active{transform:none}
}