:root{--bg: #f4efe6;--ink: #2b2b2b;--accent: #5b7fa6;--card: #fffaf0;--ph: #dcd6c8;--radius: 16px;--tap: 48px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:clamp(16px,2.2vw,22px);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.app{min-height:100%;display:flex;flex-direction:column}main{flex:1;display:flex;justify-content:center;padding:16px;padding-top:max(16px,env(safe-area-inset-top))}.screen{width:100%;max-width:760px;display:flex;flex-direction:column;gap:14px;align-items:stretch}.cover{align-items:center;text-align:center}.cover .placeholder{width:min(70vw,360px)}h1{font-size:clamp(2rem,7vw,3.4rem);margin:0;letter-spacing:.08em}h2{margin:0}.subtitle{margin:0;opacity:.7}.placeholder,.media{width:100%;border-radius:var(--radius);background:var(--ph);display:grid;place-items:center;color:#6b6558;text-align:center;padding:8px;border:2px dashed #b9b1a0}.media{border:0;padding:0;height:auto;display:block}.btn{min-height:var(--tap);padding:0 20px;border-radius:999px;border:2px solid var(--accent);background:transparent;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}.btn.primary{background:var(--accent);color:#fff}.btn:disabled{opacity:.35;cursor:default}.pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}.page-text{line-height:1.5}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}.card{background:var(--card);border:0;border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:8px;align-items:center;font:inherit;color:inherit;box-shadow:0 2px 6px #00000014}button.card{cursor:pointer}.tabbar{position:sticky;bottom:0;display:flex;background:var(--card);border-top:1px solid #e2dccd;padding-bottom:env(safe-area-inset-bottom)}.tabbar button{flex:1;min-height:56px;border:0;background:none;font:inherit;color:#6b6558;cursor:pointer}.tabbar button.active{color:var(--accent);font-weight:700;box-shadow:inset 0 3px 0 var(--accent)}@media (orientation: landscape) and (max-height: 500px){.cover .placeholder{width:min(30vw,200px)}}