:root{--paper:#fffdf7;--ink:#293247;--muted:#657086;--line:#ded8c8}*{box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 82% 5%,#34527d 0,transparent 28rem),linear-gradient(180deg,#17284f,#0c1430);color:#fff;font-family:"DM Sans",system-ui,sans-serif;min-height:100vh}.shell{width:min(1180px,calc(100% - 28px));margin:auto;padding:24px 0 50px}header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}.brand{display:flex;align-items:center;gap:11px;font-weight:850}.brandmark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#f4ca73;color:#15203c;box-shadow:0 0 26px #f5bd5d55}.actions{display:flex;gap:10px;align-items:center}.actions a{color:#e4e9fb;text-decoration:none;font-weight:750;font-size:.85rem}.theme{border:1px solid #8293c2;background:#202d57;color:#fff;border-radius:999px;padding:9px 12px;cursor:pointer;font-weight:750}.draft{background:#ffe08b;color:#3d2b0c;border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.book{background:var(--paper);color:var(--ink);border-radius:26px;overflow:hidden;box-shadow:0 28px 70px #05081688}.book-top{padding:34px 42px 22px;border-bottom:1px solid var(--line)}.eyebrow{margin:0 0 10px;color:#966a38;text-transform:uppercase;font-weight:850;letter-spacing:.13em;font-size:.75rem}h1{font:700 clamp(2.2rem,5vw,4.2rem)/.98 "Libre Baskerville",serif;letter-spacing:-.045em;margin:0}.byline{margin:16px 0 0;color:var(--muted)}.story{padding:30px 42px 48px;font:400 1.12rem/1.95 "Libre Baskerville",serif}.story p{margin:0 0 1.35rem}.word{border-radius:4px;cursor:pointer}.word.heard{color:#9297a3}.word.active{background:#ffe3a6;box-shadow:0 0 0 3px #ffe3a6}.word.cue{border-bottom:2px dotted #c27d23}.figure{width:min(92%,740px);margin:1.8rem auto 2.1rem;border-radius:18px;overflow:hidden;background:#15203c;box-shadow:0 14px 35px #19213c2c}.figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.figure figcaption{background:#f1eadb;color:#5f5a51;padding:10px 14px;font:600 .82rem/1.45 "DM Sans",sans-serif}.scene{position:relative;overflow:hidden}.star-layer,.steam-layer{position:absolute;inset:0;pointer-events:none}.star-layer i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#fff4b3;box-shadow:0 0 7px 2px #ffe98a;animation:twinkle var(--d) ease-in-out var(--delay) infinite}.steam-layer{left:50%;top:22%;right:5%;bottom:35%}.steam-layer i{position:absolute;left:var(--x);bottom:0;width:12px;height:42px;border-radius:50%;border-left:4px solid #ffffffb8;filter:blur(1px);animation:steam 2.2s ease-out var(--delay) infinite}@keyframes twinkle{50%{opacity:.25;transform:scale(.45)}}@keyframes steam{0%{opacity:0;transform:translateY(18px) scale(.55)}25%{opacity:.8}100%{opacity:0;transform:translate(var(--drift),-65px) scale(1.45)}}
aside{position:sticky;top:16px}.panel,.tip{background:#17234a;border:1px solid #394a7b;border-radius:20px;padding:19px}.panel h2{margin:0 0 8px;font-size:1rem}.panel p{color:#c7d0eb;font-size:.86rem;line-height:1.55}.listen{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:0;border-radius:14px;background:#5e7bd4;color:#fff;padding:13px;cursor:pointer;font-weight:900;margin:15px 0 11px;font-size:.92rem}.listen.listening{background:#e47783}.mic{width:10px;height:10px;border-radius:50%;background:currentColor}.listen.listening .mic{animation:pulse 1.2s infinite}@keyframes pulse{50%{transform:scale(1.5)}}.status{min-height:48px;background:#0f1938;border-radius:12px;padding:11px 12px;color:#bac5e5;font-size:.8rem;line-height:1.45}.status strong{color:#fff}.meter{height:5px;background:#34436e;border-radius:5px;overflow:hidden;margin-top:12px}.meter span{display:block;width:0;height:100%;background:linear-gradient(90deg,#f3c96f,#71c7ce);transition:width .3s}.label{font-size:.71rem;text-transform:uppercase;letter-spacing:.12em;font-weight:850;color:#aeb9dd;margin:17px 0 9px}.sounds{display:flex;flex-wrap:wrap;gap:7px}.sound{border:1px solid #536596;background:#24315c;color:#f8f9ff;border-radius:999px;padding:7px 9px;cursor:pointer;font-size:.76rem}.reset{border:0;background:none;color:#cbd4f0;text-decoration:underline;padding:10px 0 0;cursor:pointer}.motion{width:100%;border:1px solid #6073aa;background:#25345f;color:#fff;border-radius:12px;padding:10px 12px;margin-top:12px;cursor:pointer;font-weight:800}.motion[aria-pressed=true]{background:#7f3c27;border-color:#e6a55f}.motion-note{display:none;margin:8px 2px 0!important;font-size:.76rem!important}.tip{margin-top:14px;color:#cbd4ed;font-size:.82rem;line-height:1.55}.tip strong{display:block;color:#fff0bc}.unsupported{display:none;background:#7b3545;color:#fff1f3;border-radius:10px;padding:9px;margin-top:10px;font-size:.8rem}.lentil-fx{position:fixed;inset:0;z-index:1000;pointer-events:none;overflow:hidden}.lentil-burst{position:absolute;inset:0;display:grid;place-items:center;animation:fx-life 4.6s ease both}.fx-plate{width:min(76vw,580px);height:auto;filter:drop-shadow(0 24px 28px #06112777);animation:plate-pulse 1.1s ease-in-out infinite}.fx-steam{position:absolute;left:calc(50% + var(--x));top:38%;width:18px;height:90px;border-radius:50%;border-left:7px solid #ffffffd1;filter:blur(2px);animation:fx-steam 2s ease-out var(--delay) infinite}@keyframes plate-pulse{50%{transform:scale(1.07)}}@keyframes fx-steam{0%{opacity:0;transform:translateY(30px) scale(.6)}24%{opacity:.85}100%{opacity:0;transform:translate(var(--drift),-125px) scale(1.45)}}@keyframes fx-life{0%,100%{opacity:0}9%,85%{opacity:1}}html[data-theme=dark]{--paper:#161d31;--ink:#f1f4ff;--muted:#bbc4dc;--line:#3b4668}html[data-theme=dark] .figure figcaption{background:#222c46;color:#d3daef}html[data-theme=dark] .word.active{background:#80632b;box-shadow:0 0 0 3px #80632b}html[data-theme=dark] .word.heard{color:#8e99b6}
@media(max-width:820px){.layout{grid-template-columns:1fr}.book{order:2}aside{position:static;order:1}.book-top,.story{padding-left:24px;padding-right:24px}.figure{width:100%}}@media(max-width:520px){.shell{width:calc(100% - 16px);padding-top:14px}.book-top,.story{padding-left:18px;padding-right:18px}.brand{font-size:.84rem}.theme{padding:8px 9px;font-size:.78rem}.story{font-size:1.04rem}.fx-plate{width:90vw}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.star-layer i,.steam-layer i,.fx-plate,.fx-steam{animation:none!important}.lentil-burst{animation:fx-life 4.6s ease both!important}}