/* YarvixLab app shell — 6 themes, shared with chapters via localStorage 'yarvix-theme' */
:root, [data-theme="cosmos"]{
  --bg:#080c18; --surface:#101828; --card:#18243a;
  --accent1:#4f8ef7; --accent2:#34d399; --accent3:#fbbf24;
  --text:#e2e8f0; --muted:#94a3b8; --border:#1e3050;
  --wrong:#f87171; --radius:14px;
}
[data-theme="chalk"]{
  --bg:#f0f4f8; --surface:#ffffff; --card:#e8eef6;
  --accent1:#1d4ed8; --accent2:#059669; --accent3:#b45309;
  --text:#1e293b; --muted:#475569; --border:#c2cedc; --wrong:#dc2626;
}
[data-theme="neon"]{
  --bg:#040408; --surface:#09090f; --card:#0f0f1e;
  --accent1:#ff2d78; --accent2:#00f5a0; --accent3:#ffe600;
  --text:#f0f0ff; --muted:#888aaa; --border:#1a1a35; --wrong:#ff2d78;
}
[data-theme="ember"]{
  --bg:#0d0905; --surface:#1a1108; --card:#271a0e;
  --accent1:#f97316; --accent2:#22c55e; --accent3:#facc15;
  --text:#fef3e2; --muted:#c4a87a; --border:#3d2510; --wrong:#f87171;
}
[data-theme="aurora"]{
  --bg:#0a0618; --surface:#150e2e; --card:#1f1642;
  --accent1:#a78bfa; --accent2:#2dd4bf; --accent3:#fcd34d;
  --text:#ede9fe; --muted:#a5a0c4; --border:#33265e; --wrong:#fb7185;
}
[data-theme="midnight"]{
  --bg:#0c1524; --surface:#152338; --card:#111d2f;
  --accent1:#69a7ff; --accent2:#37c7bc; --accent3:#ffc857;
  --text:#edf4ff; --muted:#a9b7ca; --border:#33445d; --wrong:#ff786f;
}

/* theme swatches */
.swatches{display:flex;gap:5px;align-items:center}
.swatch{width:15px;height:15px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.15s;flex-shrink:0}
.swatch:hover,.swatch.active{transform:scale(1.25);border-color:var(--text)}
.sw-cosmos{background:linear-gradient(135deg,#4f8ef7,#34d399)}
.sw-chalk{background:linear-gradient(135deg,#1d4ed8,#f0f4f8)}
.sw-neon{background:linear-gradient(135deg,#ff2d78,#00f5a0)}
.sw-ember{background:linear-gradient(135deg,#f97316,#facc15)}
.sw-aurora{background:linear-gradient(135deg,#a78bfa,#2dd4bf)}
.sw-midnight{background:linear-gradient(135deg,#69a7ff,#ffc857)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* dev ribbon */
.dev-ribbon{position:fixed;top:0;left:0;right:0;z-index:999;background:#7c2d12;color:#fdba74;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-align:center;padding:3px 0;text-transform:uppercase}
body.has-ribbon{padding-top:22px}

/* header */
.hdr{display:flex;align-items:center;gap:14px;padding:14px 22px;background:var(--surface);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.logo{position:relative;display:inline-flex;align-items:baseline;white-space:nowrap;
  font-size:1.25rem;font-weight:900;letter-spacing:-.02em;padding-bottom:6px}
.logo .lg-l,.logo .lg-r{display:inline-block;color:var(--text);font-weight:900}
.logo .lg-bar{position:absolute;left:1px;right:1px;bottom:-1px;height:3px;border-radius:3px;
  background:linear-gradient(95deg,var(--accent1),var(--accent2) 55%,var(--accent3));transform-origin:center}
@keyframes lgL{0%{opacity:0;transform:translateX(-28px)}55%{opacity:1;transform:translateX(3px)}100%{opacity:1;transform:translateX(0)}}
@keyframes lgR{0%{opacity:0;transform:translateX(28px)}55%{opacity:1;transform:translateX(-3px)}100%{opacity:1;transform:translateX(0)}}
@keyframes lgBar{0%{opacity:0;transform:translateY(-16px) scaleX(.35)}60%{opacity:1;transform:translateY(2px) scaleX(1.06)}100%{opacity:1;transform:translateY(0) scaleX(1)}}
.logo .lg-l{animation:lgL 1.3s cubic-bezier(.22,1,.36,1) both}
.logo .lg-r{animation:lgR 1.3s cubic-bezier(.22,1,.36,1) both}
.logo .lg-bar{animation:lgBar 1.1s cubic-bezier(.34,1.56,.64,1) .32s both}
@media (prefers-reduced-motion: reduce){
  .logo .lg-l,.logo .lg-r,.logo .lg-bar{animation:none!important;opacity:1!important;transform:none!important}
}
.hdr .spacer{flex:1}
.hdr .who{font-size:.8rem;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn{display:inline-block;background:var(--accent1);color:#fff;border:none;border-radius:9px;
  padding:10px 22px;font-size:.92rem;font-weight:700;cursor:pointer;transition:.15s}
.btn:hover{opacity:.88;transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.small{padding:6px 14px;font-size:.8rem}

/* landing */
@keyframes lpIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes lpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero{position:relative;max-width:980px;margin:0 auto;padding:48px 24px 20px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;top:-140px;left:50%;transform:translateX(-50%);
  width:640px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent1) 26%,transparent),transparent);filter:blur(20px)}
.hero-badge{position:relative;display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.05em;
  color:var(--accent3);border:1px solid var(--border);background:var(--card);border-radius:30px;padding:6px 16px;margin-bottom:22px;animation:lpIn .5s both}
.hero h1{position:relative;font-size:clamp(2.1rem,5.6vw,3.5rem);font-weight:900;line-height:1.12;animation:lpIn .5s .05s both}
.hero h1 em{color:var(--accent2);font-style:normal;position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:.28em;border-radius:6px;
  background:color-mix(in srgb,var(--accent2) 26%,transparent);z-index:-1}
.hero p.sub{position:relative;color:var(--muted);font-size:1.1rem;margin:20px auto 28px;max-width:660px;line-height:1.75;animation:lpIn .5s .1s both}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* hero mascots — boy left, girl right, dropping in from the sides; free space only */
.hero-stage{position:relative;overflow:visible;min-height:min(50vh,500px)}
.hero-char{position:absolute;bottom:6px;height:min(46vh,460px);width:auto;
  pointer-events:none;user-select:none;z-index:0;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.35))}
.hero-char-l{left:clamp(4px,3.4vw,64px)}
.hero-char-r{right:clamp(4px,3.4vw,64px)}
@keyframes charInL{0%{opacity:0;transform:translateX(-170px) rotate(-5deg)}
  60%{opacity:1;transform:translateX(16px) rotate(1.5deg)}
  100%{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes charInR{0%{opacity:0;transform:translateX(170px) rotate(5deg)}
  60%{opacity:1;transform:translateX(-16px) rotate(-1.5deg)}
  100%{opacity:1;transform:translateX(0) rotate(0)}}
.hero-char-l{animation:charInL 1.7s cubic-bezier(.22,1,.36,1) both}
.hero-char-r{animation:charInR 1.7s cubic-bezier(.22,1,.36,1) .1s both}
@keyframes ctaDrop{0%{opacity:0;transform:translateY(-46px) scale(.94)}
  55%{opacity:1;transform:translateY(6px) scale(1.03)}
  100%{opacity:1;transform:translateY(0) scale(1)}}
.hero-cta{animation:ctaDrop 1s cubic-bezier(.34,1.56,.64,1) .75s both}
.hero{position:relative;z-index:1}
@media (max-width:1180px){.hero-char{display:none}}
@media (prefers-reduced-motion: reduce){
  .hero-char,.hero-cta{animation:none!important;opacity:1!important;transform:none!important}
}
.hero-free{position:relative;margin-top:16px;font-size:.84rem;color:var(--muted);animation:lpIn .5s .2s both}
.btn.big{font-size:1.05rem;padding:13px 32px;border-radius:12px}
.btn.big:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent1) 30%,transparent)}

/* single rotating quote — compact, eye-level */
.quote-solo{max-width:760px;margin:6px auto 8px;padding:18px 24px;text-align:center}
.quote-solo blockquote{margin:0;transition:opacity .45s ease}
.quote-solo blockquote.fade{opacity:0}
.quote-solo .q-text{display:block;font-size:clamp(1.05rem,2.4vw,1.4rem);line-height:1.55;font-weight:600;color:var(--text)}
.quote-solo .q-cite{display:block;margin-top:10px;font-size:.85rem;font-style:normal;font-weight:700;color:var(--accent3);letter-spacing:.03em}
/* final CTA — one clean button */
.final-cta{text-align:center;margin:14px auto 40px}

/* feature section */
.feat-head{max-width:760px;margin:22px auto 4px;padding:0 24px;text-align:center}
.feat-head h2{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:800;line-height:1.25}
.feat-head h2 em{color:var(--accent1);font-style:italic}
.feat-head p{color:var(--muted);font-size:.98rem;line-height:1.7;margin-top:12px}
.feat-grid{max-width:1080px;margin:24px auto 40px;padding:0 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.feat{position:relative;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;text-align:left;
  transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden}
.feat::before{content:"";position:absolute;top:-30px;right:-30px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent1) 14%,transparent),transparent);pointer-events:none;transition:opacity .25s;opacity:0}
.feat:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent1) 45%,var(--border));
  box-shadow:0 16px 38px rgba(0,0,0,.28)}
.feat:hover::before{opacity:1}
.feat:hover .ic-orb{animation:lpFloat 2.4s ease-in-out infinite}
.ic-orb{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent1) 22%,var(--card)),color-mix(in srgb,var(--accent2) 18%,var(--card)));
  border:1px solid var(--border);box-shadow:0 6px 16px color-mix(in srgb,var(--accent1) 18%,transparent)}
.feat h3{font-size:1.05rem;margin:14px 0 7px;font-weight:800}
.feat p{font-size:.87rem;color:var(--muted);line-height:1.62}
.feat-hero{background:linear-gradient(150deg,color-mix(in srgb,var(--accent3) 14%,var(--card)),var(--card));
  border-color:color-mix(in srgb,var(--accent3) 40%,var(--border))}
.feat-hero .ic-orb{background:linear-gradient(135deg,var(--accent3),var(--accent1));box-shadow:0 6px 20px color-mix(in srgb,var(--accent3) 40%,transparent)}
.feat-tag{display:inline-block;margin-top:12px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent3);border:1px solid var(--accent3);border-radius:20px;padding:3px 10px}

/* stats band */
.stats{max-width:940px;margin:18px auto 8px;padding:26px 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;text-align:center}
.stat b{display:block;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;color:var(--accent1);line-height:1}
.stat span{display:block;margin-top:6px;font-size:.82rem;color:var(--muted)}

/* closing CTA */
.cta{max-width:720px;margin:24px auto 56px;padding:44px 28px;text-align:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent1) 12%,var(--card)),var(--card));
  border:1px solid var(--border);border-radius:24px}
.cta h2{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:800;line-height:1.25}
.cta p{color:var(--muted);font-size:1rem;line-height:1.7;margin:14px auto 24px;max-width:520px}
.cta em,.cta h2 em{color:var(--accent2);font-style:normal}
.badge-free{display:inline-block;background:var(--accent2);color:#04120c;font-size:.66rem;font-weight:800;
  border-radius:20px;padding:2px 9px;letter-spacing:.04em;vertical-align:middle}

/* auth card */
.auth-wrap{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:34px}
.auth-card h2{margin-bottom:6px}
.auth-card p.hint{color:var(--muted);font-size:.84rem;margin-bottom:22px;line-height:1.6}
.field{margin-bottom:16px}
.field label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:6px;font-weight:600}
.field input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:9px;
  color:var(--text);padding:11px 13px;font-size:.95rem;outline:none}
.field input:focus{border-color:var(--accent1)}
.auth-err{color:var(--wrong);font-size:.82rem;min-height:18px;margin-bottom:10px}

/* library */
.lib{max-width:1120px;margin:0 auto;padding:28px 24px 80px}
.lib h2.cls{font-size:1.15rem;color:var(--accent3);margin:34px 0 16px;display:flex;align-items:center;gap:10px}
.lib h2.cls::after{content:"";flex:1;height:1px;background:var(--border)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.chap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;cursor:pointer;transition:.15s;position:relative;display:block}
.chap:hover{border-color:var(--accent1);transform:translateY(-2px)}
.chap .top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.chap .ic{font-size:1.5rem}
.chap .num{font-size:.7rem;color:var(--muted);font-weight:700;letter-spacing:.06em}
.chap h3{font-size:.97rem;line-height:1.4}
.chap .foot{margin-top:10px;font-size:.76rem;color:var(--muted);line-height:1.5;min-height:2.2em}
.chap .lock{position:absolute;top:12px;right:12px;font-size:.85rem}

/* reader */
.reader-bar{display:flex;align-items:center;gap:12px;padding:9px 16px;background:var(--surface);
  border-bottom:1px solid var(--border)}
.reader-bar .title{font-size:.92rem;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-wrap{position:fixed;inset:0;display:flex;flex-direction:column}
body.has-ribbon .reader-wrap{top:22px}
#frame{flex:1;border:0;width:100%;background:#0b0f1c}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.95rem;pointer-events:none}

footer{padding:34px 24px;text-align:center;color:var(--muted);font-size:.78rem;border-top:1px solid var(--border)}