:root {
  --bg: #100d0b;
  --surface: #1a1511;
  --surface-2: #251e18;
  --text: #f1e9dc;
  --muted: #b8ab9c;
  --gold: #e4b657;
  --gold-soft: #8a6830;
  --red: #6f2525;
  --border: rgba(228,182,87,.2);
  --reader-size: 19px;
  --reader-line: 1.75;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; min-height: 100vh; background:
  radial-gradient(circle at 50% -20%, rgba(228,182,87,.13), transparent 36rem),
  linear-gradient(180deg, #120e0b 0%, #0d0b09 100%);
  color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; padding-bottom: calc(76px + var(--safe-bottom)); }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(16,13,11,.9); backdrop-filter: blur(18px); }
.brand { display: flex; gap: 11px; align-items: center; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
.brand strong { display: block; font-family: Georgia, serif; letter-spacing: .03em; font-size: 16px; }
.brand small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.mini-lantern { width: 30px; height: 36px; position: relative; display: grid; place-items: center; border: 2px solid #8a6830; border-radius: 7px 7px 10px 10px; box-shadow: 0 0 15px rgba(228,182,87,.16); }
.mini-lantern::before { content:""; position: absolute; top:-8px; width:15px; height:10px; border:2px solid #8a6830; border-bottom:0; border-radius:9px 9px 0 0; }
.mini-flame { width: 10px; height: 16px; background: radial-gradient(circle at 50% 70%, #fff4bf 0 12%, #ffcf5a 45%, #b9451f 100%); border-radius: 50% 50% 46% 46%; filter: drop-shadow(0 0 8px #ffc84f); animation: lanternFlicker 1.7s infinite steps(1,end); transform-origin: 50% 100%; }
@keyframes lanternFlicker { 0%,100%{transform:scale(1) rotate(-1deg);opacity:.95} 18%{transform:scale(.84,1.12) rotate(2deg);opacity:.8} 37%{transform:scale(1.1,.92) rotate(-2deg)} 61%{transform:scale(.92,1.08) rotate(1deg);opacity:1} 78%{transform:scale(1.04,.9) rotate(-1deg);opacity:.88} }
.header-actions { display:flex; gap:8px; align-items:center; }
.ghost-button, .primary-button, .secondary-button, .icon-button, .chip, .reader-action { border:1px solid var(--border); border-radius:999px; cursor:pointer; transition:.18s ease; }
.ghost-button, .secondary-button, .icon-button, .reader-action { background:rgba(255,255,255,.04); }
.ghost-button { padding:8px 12px; color:var(--gold); font-weight:700; font-size:13px; }
.icon-button { width:38px; height:38px; display:grid; place-items:center; font-weight:700; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 18px; background:linear-gradient(180deg,#e8bd67,#b98735); color:#1b1208; font-weight:850; border-color:#f0cf8c; text-decoration:none; }
.secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 16px; text-decoration:none; }
button:hover, a.primary-button:hover, a.secondary-button:hover { transform:translateY(-1px); border-color:rgba(228,182,87,.55); }
main { max-width: 980px; margin: 0 auto; padding: 0 16px 34px; }
.hero { min-height: 430px; display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center; padding:42px 8px 28px; }
.eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.18em; font-weight:800; font-size:12px; }
h1,h2,h3 { font-family:Georgia, "Times New Roman", serif; }
h1 { margin:.45rem 0 .8rem; font-size:clamp(38px,7vw,68px); line-height:.98; max-width:730px; }
.hero p { color:var(--muted); font-size:clamp(16px,2.5vw,20px); line-height:1.65; max-width:620px; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.hero-lantern-wrap { min-height:310px; display:grid; place-items:center; position:relative; }
.hero-glow { position:absolute; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(255,194,65,.25),rgba(255,194,65,.04) 48%,transparent 70%); animation:glowPulse 2.3s infinite ease-in-out; }
@keyframes glowPulse { 50%{transform:scale(1.08);opacity:.75} }
.hero-lantern { width:150px; height:210px; border:9px solid #76552b; border-radius:28px 28px 38px 38px; position:relative; background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,221,145,.08),rgba(0,0,0,.12)); box-shadow:inset 0 0 40px rgba(0,0,0,.9),0 24px 80px rgba(0,0,0,.6); z-index:1; }
.hero-lantern::before { content:""; position:absolute; left:31px; top:-58px; width:70px; height:61px; border:10px solid #76552b; border-bottom:0; border-radius:40px 40px 0 0; }
.hero-lantern::after { content:""; position:absolute; inset:30px; border-left:5px solid #76552b; border-right:5px solid #76552b; opacity:.8; }
.hero-flame { position:absolute; left:50%; bottom:42px; width:48px; height:78px; transform:translateX(-50%); background:radial-gradient(circle at 50% 70%,#fffbe3 0 10%,#ffd36a 32%,#db771c 66%,#76230f 100%); border-radius:55% 45% 48% 52% / 65% 65% 35% 35%; filter:drop-shadow(0 0 22px #ffbd32); animation:heroFlicker 1.35s infinite steps(1,end); z-index:2; }
@keyframes heroFlicker { 0%,100%{transform:translateX(-50%) scale(1) rotate(-2deg)} 16%{transform:translateX(-50%) scale(.88,1.09) rotate(2deg)} 31%{transform:translateX(-50%) scale(1.06,.93) rotate(-3deg)} 53%{transform:translateX(-50%) scale(.92,1.06) rotate(1deg)} 74%{transform:translateX(-50%) scale(1.02,.9) rotate(-1deg)} 89%{transform:translateX(-50%) scale(.95,1.04) rotate(2deg)} }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin:24px 0 14px; }
.section-head h2 { margin:0; font-size:29px; }
.section-head button { background:none; border:0; color:var(--gold); cursor:pointer; }
.story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.story-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); cursor:pointer; transition:.2s ease; }
.story-card:hover { transform:translateY(-3px); border-color:rgba(228,182,87,.52); box-shadow:0 15px 35px rgba(0,0,0,.24); }
.cover { aspect-ratio:16/10; padding:18px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; background:radial-gradient(circle at 70% 20%,var(--cover-a),transparent 34%),linear-gradient(135deg,var(--cover-b),#0b0908 72%); }
.cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.7)); }
.cover-mark { position:relative; z-index:1; font-size:42px; filter:drop-shadow(0 5px 15px rgba(0,0,0,.5)); }
.cover-label { position:relative; z-index:1; color:#f0c979; font-size:10px; text-transform:uppercase; letter-spacing:.17em; font-weight:850; }
.card-body { padding:15px; }
.card-meta { display:flex; gap:7px; flex-wrap:wrap; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.09em; }
.card-body h3 { margin:8px 0 7px; font-size:21px; line-height:1.15; }
.card-body p { margin:0; color:var(--muted); line-height:1.5; font-size:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.progress-track { height:3px; background:rgba(255,255,255,.08); margin-top:14px; border-radius:99px; overflow:hidden; }
.progress-track span { display:block; height:100%; background:var(--gold); }
.badge { display:inline-flex; padding:5px 8px; border:1px solid var(--border); border-radius:999px; color:var(--gold); font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.search-wrap { position:sticky; top:63px; z-index:20; padding:14px 0 10px; background:linear-gradient(180deg,var(--bg) 78%,transparent); }
.search-box { width:100%; min-height:48px; padding:0 16px; border-radius:16px; border:1px solid var(--border); background:#17120f; color:var(--text); outline:none; }
.search-box:focus { border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(228,182,87,.08); }
.chip-row { display:flex; gap:8px; overflow:auto; padding:10px 0 5px; scrollbar-width:none; }
.chip { flex:0 0 auto; padding:8px 12px; color:var(--muted); background:rgba(255,255,255,.03); }
.chip.active { color:#1a1208; background:var(--gold); border-color:var(--gold); font-weight:800; }
.page-title { padding:28px 0 4px; }
.page-title h1 { font-size:42px; margin-bottom:8px; }
.page-title p { color:var(--muted); margin:0; }
.empty-state { border:1px dashed var(--border); border-radius:22px; padding:42px 20px; text-align:center; color:var(--muted); }
.empty-state strong { display:block; color:var(--text); font-family:Georgia,serif; font-size:23px; margin-bottom:8px; }
.bottom-nav { position:fixed; z-index:40; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,720px); display:grid; grid-template-columns:repeat(4,1fr); padding:8px 10px calc(8px + var(--safe-bottom)); background:rgba(20,16,13,.94); border:1px solid var(--border); border-bottom:0; border-radius:22px 22px 0 0; backdrop-filter:blur(20px); }
.nav-item { border:0; background:none; color:var(--muted); display:grid; justify-items:center; gap:2px; cursor:pointer; padding:5px; }
.nav-item span { font-size:21px; line-height:1; }
.nav-item small { font-size:10px; letter-spacing:.04em; }
.nav-item.active { color:var(--gold); }
.reader-shell { max-width:800px; margin:0 auto; padding-top:16px; }
.reader-top { display:flex; justify-content:space-between; gap:10px; align-items:center; padding-bottom:14px; }
.back-button { background:none; border:0; color:var(--gold); cursor:pointer; padding:8px 0; }
.reader-actions { display:flex; gap:7px; }
.reader-action { width:40px; height:40px; display:grid; place-items:center; }
.reader-cover { min-height:280px; border-radius:28px; padding:30px; display:flex; align-items:end; overflow:hidden; position:relative; background:radial-gradient(circle at 80% 20%,var(--cover-a),transparent 38%),linear-gradient(135deg,var(--cover-b),#090807 75%); box-shadow:0 20px 55px rgba(0,0,0,.3); }
.reader-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.82)); }
.reader-cover-content { position:relative; z-index:1; max-width:650px; }
.reader-cover h1 { font-size:clamp(34px,7vw,58px); margin:.35rem 0 .5rem; }
.reader-cover p { color:#d7c9b8; line-height:1.55; }
.reader-toolbar { position:sticky; top:64px; z-index:15; margin:14px 0; padding:9px; display:flex; gap:8px; align-items:center; justify-content:space-between; border:1px solid var(--border); border-radius:18px; background:rgba(25,20,16,.94); backdrop-filter:blur(18px); }
.narration-group { display:flex; gap:7px; }
.narration-status { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-content { font-family:Georgia,"Times New Roman",serif; font-size:var(--reader-size); line-height:var(--reader-line); padding:20px clamp(4px,4vw,42px) 90px; }
.reader-content p { margin:0 0 1.2em; }
.reader-content .story-break { text-align:center; color:var(--gold); letter-spacing:.6em; margin:2.3em 0; }
.reader-shell.sepia .reader-content { background:#efe2c6; color:#382b20; border-radius:22px; }
.reader-shell.black .reader-content { background:#000; color:#ddd; border-radius:22px; }
.reader-progress { position:fixed; left:0; top:0; height:3px; background:var(--gold); z-index:80; transition:width .1s linear; }
.sample-note { margin:14px 0; padding:12px 14px; border:1px solid rgba(228,182,87,.25); border-radius:14px; color:#dac7a6; background:rgba(228,182,87,.06); font-size:13px; line-height:1.5; }
.about-card { margin-top:20px; border:1px solid var(--border); border-radius:24px; padding:24px; background:rgba(255,255,255,.025); }
.about-card h2 { margin-top:0; }
.about-card p, .about-card li { color:var(--muted); line-height:1.65; }
.settings-dialog { width:min(92vw,440px); border:1px solid var(--border); border-radius:24px; padding:0; color:var(--text); background:#1b1612; box-shadow:0 30px 90px rgba(0,0,0,.6); }
.settings-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }
.settings-dialog form { padding:20px; }
.dialog-header { display:flex; justify-content:space-between; align-items:center; }
.dialog-header h2 { margin:0; }
.settings-dialog label { display:block; margin-top:24px; color:var(--muted); }
.settings-dialog output { float:right; color:var(--gold); }
.settings-dialog input[type=range] { width:100%; margin-top:12px; accent-color:var(--gold); }
.settings-dialog fieldset { border:0; padding:0; margin-top:24px; }
.settings-dialog legend { color:var(--muted); }
.theme-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.theme-options button { padding:12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.04); cursor:pointer; }
.theme-options button.active { border-color:var(--gold); color:var(--gold); }
.toast { position:fixed; z-index:100; left:50%; bottom:100px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#efe3ce; color:#21170e; border-radius:999px; padding:10px 16px; font-weight:750; font-size:13px; transition:.2s ease; box-shadow:0 10px 35px rgba(0,0,0,.35); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.install-card { display:none; margin:16px 0; padding:16px; border:1px solid var(--border); border-radius:18px; background:rgba(228,182,87,.05); }
.install-card.show { display:block; }
.install-card strong { display:block; margin-bottom:5px; }
.install-card p { color:var(--muted); margin:0 0 12px; font-size:14px; line-height:1.5; }
@media (max-width:760px) { .hero{grid-template-columns:1fr;min-height:auto;padding-top:30px}.hero-lantern-wrap{min-height:250px;order:-1}.hero-lantern{transform:scale(.82)}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reader-cover{min-height:240px}.narration-status{display:none} }
@media (max-width:480px) { main{padding-left:12px;padding-right:12px}.story-grid{grid-template-columns:1fr}.hero h1{font-size:44px}.hero-lantern-wrap{min-height:215px}.hero-lantern{transform:scale(.7)}.topbar{padding-left:12px;padding-right:12px}.reader-toolbar{top:61px}.reader-content{padding-left:8px;padding-right:8px}.ghost-button{font-size:11px;padding:7px 9px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} }