:root{--bg: #fbf3e0;--bg-soft: #fff8ea;--card: #fffdf5;--ink: #3a2f28;--muted: #8a7f72;--accent: #ef6c4d;--accent-strong: #d9583a;--accent-soft: #fde3d9;--gold: #f4a259;--green: #5ba36a;--border: #eadfca;--shadow: 0 10px 30px rgba(74, 54, 30, .12);--radius: 20px;font-family:ui-rounded,PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);min-height:100vh}button{font-family:inherit}.btn-primary{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:var(--accent);color:#fff;font-size:1.15rem;font-weight:700;padding:.9rem 1.6rem;border-radius:999px;cursor:pointer;box-shadow:0 6px 0 var(--accent-strong),0 12px 24px #ef6c4d59;transition:transform .08s ease,box-shadow .08s ease}.btn-primary:hover{filter:brightness(1.04)}.btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--accent-strong)}.btn-ghost{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--muted);font-size:.95rem;cursor:pointer;padding:.4rem .6rem;border-radius:8px}.btn-ghost:hover{color:var(--ink)}.landing{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:radial-gradient(circle at 15% 20%,rgba(244,162,89,.25),transparent 40%),radial-gradient(circle at 85% 80%,rgba(91,163,106,.18),transparent 45%),var(--bg)}.landing-card{max-width:560px;width:100%;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);padding:3rem 2.4rem}.kicker{letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;color:var(--gold);font-weight:700;margin:0 0 .6rem}.landing-card h1{font-size:2.6rem;margin:0 0 1rem}.tagline{font-size:1.05rem;color:var(--muted);line-height:1.7;margin:0 0 2rem}.demo-note{margin:1.4rem 0 0;font-size:.85rem;color:var(--muted);background:var(--accent-soft);border-radius:12px;padding:.7rem 1rem;line-height:1.6}.status-bar{position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:.8rem;color:var(--muted);background:#fbf3e0e6;padding:.5rem}.loading,.error-view{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;padding:2rem;text-align:center}.spinner{width:44px;height:44px;border:5px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-track{width:min(320px,70vw);height:10px;background:var(--accent-soft);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .2s ease}.error-view h1{margin:0}.error-message{color:var(--muted);max-width:480px;line-height:1.6}.reader{min-height:100vh;display:flex;flex-direction:column;padding:.8rem 1rem 2.5rem;gap:.8rem}.reader-header{display:flex;align-items:center;gap:.8rem}.reader-header h1{flex:1;font-size:1.15rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-count{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}.stage{display:flex;gap:1.2rem;align-items:flex-start;justify-content:center;flex:1;min-height:0}.page-frame{flex:1 1 60%;max-width:900px;display:flex;justify-content:center}.page-frame img{max-width:100%;max-height:68vh;border-radius:14px;box-shadow:var(--shadow);object-fit:contain;background:#fff}.panel{flex:1 1 38%;max-width:460px;min-width:260px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.9rem}.text-block h2{font-size:.78rem;letter-spacing:.12em;color:var(--gold);margin:0 0 .3rem;text-transform:uppercase}.english{font-size:1.05rem;line-height:1.7;margin:0;white-space:pre-wrap}.chinese{font-size:1.15rem;line-height:1.8;margin:0;color:#2f5d43;white-space:pre-wrap}.badge{display:inline-block;align-self:flex-start;background:var(--bg-soft);border:1px solid var(--border);color:var(--muted);font-size:.8rem;font-weight:700;padding:.25rem .7rem;border-radius:999px}.skip-note{margin:0;color:var(--muted);line-height:1.7}.muted{color:var(--muted);margin:0}.mock-tag{margin:0;font-size:.78rem;color:var(--gold)}.controls{display:flex;align-items:center;justify-content:center;gap:1.4rem}.btn-play{width:64px;height:64px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:1.6rem;cursor:pointer;box-shadow:0 5px 0 var(--accent-strong),0 10px 20px #ef6c4d4d;display:grid;place-items:center}.btn-play:active{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-strong)}.btn-control{width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--ink);font-size:1.15rem;cursor:pointer;box-shadow:0 3px #4a361e1f}.btn-control:disabled{opacity:.4;cursor:default}.dots{display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem;padding:.3rem 0}.dot{width:10px;height:10px;border-radius:50%;border:none;background:var(--border);cursor:pointer;padding:0}.dot.active{background:var(--accent);transform:scale(1.25)}@media (max-width: 760px){.stage{flex-direction:column;align-items:center}.panel{width:100%;max-width:560px}.page-frame img{max-height:46vh}}