:root { --ink:#2b2340; --muted:#7a7290; --bg:#fbf7f0; --card:#fff; --accent:#e0703c; --accent2:#5b3a8c; --ok:#3c9a5f; --bad:#c94040; }
* { box-sizing:border-box; }
body { margin:0; font:17px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
.top { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; }
.brand { font-weight:700; color:var(--accent2); text-decoration:none; font-size:20px; }
#who { color:var(--muted); font-size:14px; }
#who button { margin-left:8px; }
main { max-width:860px; margin:0 auto; padding:8px 18px 60px; }
h1 { font-family:Georgia, serif; font-size:30px; margin:12px 0 6px; }
h2 { font-family:Georgia, serif; font-size:22px; margin:26px 0 8px; }
.muted { color:var(--muted); }
.card { background:var(--card); border-radius:16px; padding:18px; box-shadow:0 2px 10px #0001; margin:12px 0; }
button, .btn { font:inherit; border:0; border-radius:999px; padding:10px 20px; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; }
button.ghost, .btn.ghost { background:#efe9f6; color:var(--accent2); }
button.danger { background:#fbe9e9; color:var(--bad); }
button.small { padding:5px 12px; font-size:14px; }
button:disabled { opacity:.5; cursor:default; }
input[type=text], input[type=email], input[type=password], textarea { font:inherit; width:100%; padding:10px 14px; border:1.5px solid #ddd5e8; border-radius:12px; background:#fff; }
label { display:block; margin:10px 0; }
label.check { display:flex; gap:10px; align-items:flex-start; }
label.check input { margin-top:5px; width:20px; height:20px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.book { cursor:pointer; text-align:center; }
.book img { width:100%; border-radius:12px; aspect-ratio:3/2; object-fit:cover; }
.list > div { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #eee; }
.list > div:last-child { border:0; }
.pill { font-size:13px; border-radius:999px; padding:2px 10px; background:#efe9f6; color:var(--accent2); }
.pill.wait { background:#fff3d6; color:#8a6200; }
.pill.new { background:#ffe2d6; color:var(--accent); }
.err { color:var(--bad); }
.linkbox { word-break:break-all; background:#f4f0fa; padding:10px; border-radius:10px; font-size:14px; }
.reading img { width:96px; border-radius:8px; aspect-ratio:3/2; object-fit:cover; }

/* the book stage: page big, the reader small in the corner */
.stage { position:relative; background:#000; border-radius:18px; overflow:hidden; }
.stage .page { width:100%; display:block; aspect-ratio:3/2; object-fit:contain; background:#fff; }
.stage .text { background:#fff; padding:14px 20px; font-family:Georgia, serif; font-size:22px; min-height:70px; }
.stage .face { position:absolute; right:12px; top:12px; width:28%; max-width:240px; aspect-ratio:1; object-fit:cover; border-radius:50%; border:5px solid #fff; box-shadow:0 4px 16px #0005; background:#333; }
.stage .face.mirror { transform:scaleX(-1); }
.stage .rec { position:absolute; left:14px; top:14px; background:var(--bad); color:#fff; border-radius:999px; padding:4px 12px; font-size:14px; }
.stage .rec::before { content:"● "; }
.stage .counter { position:absolute; left:14px; bottom:84px; background:#0007; color:#fff; border-radius:999px; padding:2px 10px; font-size:13px; }
.controls { display:flex; justify-content:center; gap:12px; margin:14px 0; flex-wrap:wrap; }
.controls button { font-size:20px; padding:14px 30px; }
.child .stage .text { font-size:26px; }
.big-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#0004; }
.big-play button { font-size:28px; padding:22px 44px; }
.side { display:grid; grid-template-columns:2fr 1fr; gap:12px; }
.side video { width:100%; border-radius:14px; background:#000; }
@media (max-width:640px) { .side { grid-template-columns:1fr; } .stage .text { font-size:18px; } }
.tabs { display: flex; gap: 8px; margin-bottom: 4px; }
.tabs button { flex: 1; background: transparent; color: inherit; border: 1px solid currentColor; opacity: .6; }
.tabs button.on { opacity: 1; font-weight: 700; }
[hidden] { display: none !important; }