*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--base:#14100E;--ink:#F4EDE1;--read:#C9BBA8;--dim:#8A7E6E;--accent:#E5A66B;--gold:#F2C572;--line:rgba(244,237,225,.13);--mx:22px}
body{background:var(--base);color:var(--ink);font-family:'Spline Sans Mono',ui-monospace,monospace;-webkit-font-smoothing:antialiased}
a{color:var(--gold)}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.folio{display:flex;align-items:center;gap:14px;padding:max(16px,env(safe-area-inset-top)) var(--mx) 14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.folio .mark{color:var(--ink);text-decoration:none}
.folio .rule{flex:1;height:1px;background:var(--line)}
.folio nav{display:flex;gap:16px}
.folio nav a{color:var(--read);text-decoration:none}
main{max-width:760px;margin:0 auto;padding:28px var(--mx) 56px}
main.library{max-width:1100px}
h1{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz'144,'wght'520,'SOFT'30;font-size:clamp(34px,7.5vw,60px);line-height:1;margin:10px 0 12px;letter-spacing:-.015em}
h1 em{font-style:italic;color:var(--gold)}
h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(24px,4.6vw,30px);font-weight:540;margin:40px 0 12px}
h2 small{font-size:14px;color:var(--dim);font-family:'Spline Sans Mono',monospace}
p,li{font-family:'Fraunces',Georgia,serif;font-size:18px;line-height:1.6;color:var(--read)}
.lede{font-size:clamp(18px,3.8vw,21px);max-width:36em;margin-bottom:18px}
.meta{font-size:13px;color:var(--dim);font-family:'Spline Sans Mono',monospace;margin-bottom:16px}
.player{position:relative;max-width:420px;margin:0 auto}
.player video,.cover{display:block;width:100%;aspect-ratio:9/16;border-radius:18px;background:#000;max-height:78vh;object-fit:contain}
.cover{position:relative;border:0;padding:0;cursor:pointer;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .play{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);white-space:nowrap;font:600 16px/1 'Spline Sans Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#1d1408;background:linear-gradient(180deg,#F7D58E,#DDA24E);border-radius:999px;padding:16px 24px;box-shadow:0 4px 0 #8f5f22}
.cover .tag{position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.6);color:var(--ink);border-radius:999px;padding:6px 10px}
[hidden]{display:none!important}
.status{font-size:14px;color:var(--dim);text-align:center;margin-top:8px;min-height:1em}
.end{position:absolute;inset:0;border-radius:18px;background:rgba(20,16,14,.93);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;text-align:center}
.end p{font-size:17px}
.end .end-h{font-size:24px;color:var(--ink)}
.end .small{font-size:14px;color:var(--dim)}
.cta{display:inline-block;font:600 15px/1 'Spline Sans Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#1d1408;background:linear-gradient(180deg,#F7D58E,#DDA24E);border-radius:999px;padding:16px 24px;box-shadow:0 4px 0 #8f5f22;text-decoration:none}
.notify{display:flex;gap:8px;width:100%;max-width:320px}
.notify input{flex:1;min-width:0;font:15px 'Spline Sans Mono',monospace;padding:12px;border-radius:12px;border:1px solid var(--line);background:#1b1512;color:var(--ink)}
.notify button{font:600 14px 'Spline Sans Mono',monospace;padding:12px 14px;border-radius:12px;border:1px solid var(--gold);background:none;color:var(--gold);cursor:pointer}
.notify .ok{font-size:15px;color:var(--gold)}
.link{background:none;border:0;color:var(--read);text-decoration:underline;font:14px 'Spline Sans Mono',monospace;cursor:pointer;padding:6px}
.about .app{font-size:16px;color:var(--dim)}
.scenes{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.scene{font:14px 'Spline Sans Mono',monospace;color:var(--ink);background:#1b1512;border:1px solid var(--line);border-radius:999px;padding:10px 14px;cursor:pointer}
.scene span{color:var(--accent);margin-right:8px}
.hint{font-size:14px;color:var(--dim);margin:-6px 0 8px}
.verses{list-style:none}
.verse{padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .2s}
.verse:hover{background:#1b1512}
.verse.now{background:rgba(242,197,114,.14);color:var(--ink)}
.vref{font:600 12px 'Spline Sans Mono',monospace;color:var(--accent);margin-right:8px;vertical-align:2px}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:40px;font-size:14px}
.pager a{text-decoration:none}
.all{margin-top:18px;font-size:15px}
.shelf{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.shelf a{text-decoration:none;display:flex;flex-direction:column;gap:4px}
.shelf img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;display:block;background:#1b1512}
.shelf .num{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.shelf b{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:540;color:var(--ink)}
.shelf .t{font-size:12px;color:var(--dim)}
.shelf .soon{display:flex;flex-direction:column;gap:4px;justify-content:flex-end;aspect-ratio:9/16;border:1px dashed var(--line);border-radius:14px;padding:12px}
footer{max-width:760px;margin:0 auto;padding:26px var(--mx) 46px;font-size:11px;line-height:1.7;color:var(--dim);border-top:1px solid var(--line)}
footer a{color:var(--read)}
.buybar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px auto 0;max-width:420px;font-size:13px;color:var(--dim)}
.small-cta{padding:12px 16px;font-size:13px}
.buy{margin-top:28px;border:1px solid rgba(242,197,114,.35);border-radius:20px;padding:20px}
.buy h2{margin-top:0}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:14px 0}
.plan{background:#1b1512;border-radius:16px;padding:16px;display:flex;flex-direction:column}
.price{font-family:'Fraunces',Georgia,serif;font-size:30px;color:var(--ink);margin-bottom:4px}
.price small{font-size:16px;color:var(--dim)}
.plan .note{font-size:15px;margin-bottom:12px;flex:1} /* pushes the buttons to the same height in both cards */
.pp{min-height:50px}
.fine{font-size:13px;color:var(--dim)}
.restore-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.restore-form label{font-size:14px;color:var(--read);display:flex;flex-direction:column;gap:6px}
.restore-form input{font:15px 'Spline Sans Mono',monospace;padding:12px;border-radius:12px;border:1px solid var(--line);background:#1b1512;color:var(--ink)}
.restore-form button{align-self:flex-start;font:600 14px 'Spline Sans Mono',monospace;padding:10px 16px;border-radius:12px;border:1px solid var(--gold);background:none;color:var(--gold);cursor:pointer}
.msg{font-size:15px;color:var(--gold);min-height:1em}
.end .small{font-size:14px;color:var(--read)}
.app-ctas{display:flex;gap:12px;flex-wrap:wrap}