.top{display:flex;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 16px 4px}
.brand{font:600 italic 22px/1 ui-serif,"New York",Georgia,serif;letter-spacing:.5px;color:var(--accent)}
.prov{font-size:10px;margin-left:2px;opacity:.7}
main{max-width:560px;margin:0 auto;padding:0 16px 24px}
.stage{position:relative;width:100%;aspect-ratio:1000/1400;max-height:76vh;margin:8px auto 0;border-radius:18px;outline:none;cursor:grab}
.stage:focus-visible{box-shadow:0 0 0 3px var(--focus)}
.hint{text-align:center;color:var(--muted);margin:10px 0 6px;font-size:15px}
body[data-state=card] .hint:empty{display:none}
.controls{display:flex;gap:12px;align-items:center;justify-content:center;margin:6px 0 14px}
.controls[hidden]{display:none}
.slider input{width:180px;accent-color:var(--accent)}
.btn{appearance:none;border:0;border-radius:999px;padding:12px 20px;font:600 16px/1 system-ui,-apple-system,sans-serif;background:var(--accent);color:#1b1407;min-height:44px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px #4a5784}
.btn:focus-visible,.link:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.card-text{background:var(--panel);border-radius:14px;padding:14px 18px;margin:8px 0 16px}
.card-text h2{font:600 13px/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:0 0 6px}
.card-text p{margin:4px 0;font-family:ui-serif,"New York",Georgia,serif;font-size:1.05rem;white-space:pre-wrap;overflow-wrap:anywhere}
.cta{display:block;text-align:center;text-decoration:none;background:#fff;color:#16213f;border-radius:999px;padding:14px 18px;font-weight:700;margin:6px auto;max-width:340px}
.report{text-align:center;margin:14px 0 0}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;font:inherit;font-size:14px;cursor:pointer;min-height:44px}
.center{text-align:center;padding:48px 8px}
.center h1{font:600 italic 26px/1.2 ui-serif,"New York",Georgia,serif;margin:16px 0 8px}
.center p{color:var(--muted)}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid #33406b;border-top-color:var(--accent);margin:24px auto;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
.foot{text-align:center;font-size:13px;color:var(--muted);padding:16px 16px max(16px,env(safe-area-inset-bottom))}
.foot a{color:var(--muted)}
dialog{border:0;border-radius:16px;background:#fffaf2;color:#1b1a2a;max-width:420px;width:calc(100% - 32px);padding:20px}
dialog::backdrop{background:rgba(5,8,20,.6)}
dialog label{display:block;margin:10px 0;font-weight:600}
dialog select,dialog textarea{display:block;width:100%;margin-top:6px;font:inherit;padding:10px;border-radius:10px;border:1px solid #c9c2b4;background:#fff}
dialog .row{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
dialog .btn.ghost{color:#1b1a2a;box-shadow:inset 0 0 0 1px #c9c2b4}
@media (min-width:900px){main{max-width:620px}}
.stage.book{aspect-ratio:auto;height:min(72vh,720px);max-height:none;border-radius:14px;cursor:grab}