:root{--bg:#E9E2D4;--panel:#F6F1E6;--ink:#1F1A14;--muted:#6B5F50;--line:#CDC1AB;--accent:#7A4B22;--on-accent:#F6F1E6;
 --sky-ink:#0b0806;--strip-ink:#231d18;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14100C;--panel:#1E1812;--ink:#EFE6D6;--muted:#A39580;--line:#3A3025;--accent:#D2A15C;--on-accent:#1A140D}}
:root[data-theme="dark"]{--bg:#14100C;--panel:#1E1812;--ink:#EFE6D6;--muted:#A39580;--line:#3A3025;--accent:#D2A15C;--on-accent:#1A140D}
*,*::before,*::after{box-sizing:inherit}html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 17px/1.5 "EB Garamond",Garamond,Georgia,serif}
main{max-width:1360px;margin:0 auto;padding:clamp(14px,3vw,36px)}
h1{font:500 clamp(22px,3vw,30px)/1.2 "EB Garamond",Garamond,Georgia,serif;margin:0 0 4px}.sub{margin:0 0 18px;color:var(--muted)}
.stage{position:relative;margin:0;aspect-ratio:3/2;container-type:inline-size;--u:calc(100cqw / 1536);border-radius:6px;overflow:hidden;background:#17110C;box-shadow:0 10px 30px rgba(20,12,4,.28)}
.stage img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ln{position:absolute;white-space:nowrap;margin:0;line-height:1;font-kerning:normal;font-family:"EB Garamond",Garamond,Georgia,serif;font-weight:400}
.ln.strong{font-weight:600}
.ln.spell{font-weight:600}
.ln.spaced{font-family:"Libre Caslon Text",Georgia,serif;font-weight:700;--c:#6b1d16}
.ln.banner2{font-family:"Libre Caslon Text",Georgia,serif;font-weight:700;--c:#4a1a12}
.ln.banner{font-family:"Libre Caslon Text",Georgia,serif;font-weight:700;--c:#6b1d16}
.ln.title{font-family:"Libre Caslon Text","EB Garamond",Georgia,serif}
.ln.title,.ln.body,.ln.strong,.ln.spell{--c:var(--sky-ink)}.ln.cap,.ln.low{--c:var(--strip-ink)}
.w{position:relative;display:inline-block;cursor:pointer}
.g{color:color-mix(in srgb,var(--c) 26%,transparent)}
.k{position:absolute;left:-.05em;top:-.2em;padding:.2em .05em;white-space:nowrap;pointer-events:none;color:var(--c);
 -webkit-text-stroke:max(.4px,calc(.62 * var(--u))) var(--c);--p:0;
 -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p) * 1.08% - 8%),transparent calc(var(--p) * 1.08%));
 mask-image:linear-gradient(90deg,#000 calc(var(--p) * 1.08% - 8%),transparent calc(var(--p) * 1.08%))}
.rw{position:absolute;cursor:pointer;background-repeat:no-repeat;--p:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p) * 1.08% - 8%),transparent calc(var(--p) * 1.08%));
 mask-image:linear-gradient(90deg,#000 calc(var(--p) * 1.08% - 8%),transparent calc(var(--p) * 1.08%))}
.hot{position:absolute;padding:0;border:0;border-radius:12px;background:transparent;cursor:pointer;transition:box-shadow .15s,background .15s,transform .1s;z-index:3}
.hot:hover,.hot:focus-visible{background:rgba(122,75,34,.10);box-shadow:0 0 0 3px rgba(122,75,34,.6),0 6px 18px rgba(40,20,5,.28);outline:none}
.hot:active{transform:scale(.99)}
.dim{position:absolute;inset:0;background:rgba(15,8,3,.38);opacity:0;pointer-events:none;transition:opacity .2s;z-index:4}.dim.on{opacity:1;pointer-events:auto}
.pop{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.96);background:#F6EEDC;color:#241a10;border:2px solid #7A4B22;border-radius:16px;
 padding:calc(30 * var(--u)) calc(70 * var(--u));font:700 calc(54 * var(--u))/1.15 "Libre Caslon Text",Georgia,serif;text-align:center;white-space:nowrap;
 box-shadow:0 14px 44px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}.pop.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.toast{position:absolute;left:50%;bottom:calc(30 * var(--u));transform:translateX(-50%);background:rgba(36,26,16,.88);color:#F6EEDC;padding:.4em 1em;border-radius:999px;font:500 calc(26 * var(--u))/1.2 "EB Garamond",serif;opacity:0;transition:opacity .2s;z-index:6;pointer-events:none}.toast.on{opacity:1}
.bar{display:flex;align-items:center;gap:14px;margin:14px 0 6px}
.round{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer}
.round svg{width:22px;height:22px;fill:currentColor}
button:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#seek{flex:1;accent-color:var(--accent);height:28px;margin:0}#time{flex:none;min-width:5.6em;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
details{border-top:1px solid var(--line);margin-top:18px;padding-top:12px;color:var(--muted)}summary{cursor:pointer;color:var(--ink)}details p{margin:10px 0}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:10px 0}.row input[type=range]{accent-color:var(--accent);width:min(320px,100%)}
.ghostbtn{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 16px;cursor:pointer}
textarea{width:100%;min-height:150px;font:13px/1.45 ui-monospace,Menlo,Consolas,monospace;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px}