:root{color-scheme:dark;--gold:#e2c875;--paper:#f4e7c1;--ink:#080706;--red:#72201e;--green:#385c3d;--progress:0;--art:none}
*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;background:#050404;color:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{overflow-x:hidden}button,a{font:inherit}button{color:inherit}
#act-card{position:relative;isolation:isolate;display:grid;grid-template-rows:minmax(340px,1fr) auto;min-height:100svh;overflow:hidden;background:#090706}
.act-stage{position:relative;isolation:isolate;min-height:0;overflow:hidden;background:#080605}
.act-stage:before{content:"";position:absolute;z-index:0;inset:-25px;background-image:var(--art);background-position:center;background-size:cover;filter:blur(24px) brightness(.34) saturate(.8);opacity:0;transform:scale(1.08);pointer-events:none}
.act-art{position:absolute;z-index:1;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.04) brightness(.78);transform:scale(1.075);transition:transform 14s cubic-bezier(.15,.68,.25,1),filter 1.6s ease}
.act-film{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;background:#000;opacity:0;transition:opacity .45s ease}
body[data-state=running] .act-film,body[data-state=holding] .act-film{opacity:1}
body.leaving .act-film{filter:brightness(.25);transition:filter .6s ease}
body[data-state=running] .act-art,body[data-state=holding] .act-art{transform:scale(1.015);filter:saturate(1) contrast(1.03) brightness(.9)}
.act-wash{position:absolute;z-index:2;inset:0;background:linear-gradient(0deg,#05040378 0%,transparent 31%,#0504039c 100%),linear-gradient(90deg,#05040378 0%,transparent 16%,transparent 84%,#05040378 100%)}
.curtain{position:absolute;z-index:7;top:0;bottom:0;width:53%;pointer-events:none;background:repeating-linear-gradient(90deg,#2a0508 0,#6f121a 8%,#3b080d 17%,#8a1c22 25%,#32070b 34%);box-shadow:inset 0 0 70px #000c,0 0 60px #000c;transition:transform 1.25s cubic-bezier(.76,0,.24,1)}
.curtain-left{left:0;transform-origin:left}.curtain-right{right:0;transform-origin:right}body[data-state=waiting] .curtain-left{transform:translateX(-90%)}body[data-state=waiting] .curtain-right{transform:translateX(90%)}body[data-state=running] .curtain-left,body[data-state=ready] .curtain-left,body[data-state=holding] .curtain-left{transform:translateX(-98%)}body[data-state=running] .curtain-right,body[data-state=ready] .curtain-right,body[data-state=holding] .curtain-right{transform:translateX(98%)}body.leaving .curtain-left{transform:translateX(0)}body.leaving .curtain-right{transform:translateX(0)}
.proscenium{position:absolute;z-index:6;inset:0;border:clamp(10px,1.7vw,25px) solid #180807;box-shadow:inset 0 0 0 2px #cda95b66,inset 0 0 40px #000,0 0 0 8px #050303;pointer-events:none}.proscenium:before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:9px;background:linear-gradient(90deg,#5e1714,#e2c875,#5e1714,#e2c875,#5e1714)}.proscenium i{position:absolute;top:6%;bottom:6%;width:2px;background:linear-gradient(transparent,#e2c87588 20%,#e2c87588 80%,transparent)}.proscenium i:first-child{left:2.1%}.proscenium i:last-child{right:2.1%}
header{position:relative;z-index:8;display:flex;justify-content:space-between;align-items:center;padding:max(27px,env(safe-area-inset-top)) max(34px,calc(env(safe-area-inset-right) + 24px)) 0 max(34px,calc(env(safe-area-inset-left) + 24px))}.wordmark{text-decoration:none;color:#eee;font:900 clamp(20px,2vw,29px)/1 Georgia;letter-spacing:-.08em;text-shadow:0 3px 12px #000}.wordmark span:nth-child(odd){color:#b7443d}.wordmark span:nth-child(even){color:#6f9f65}.wordmark b{margin-left:.24em;color:var(--gold);font:800 .38em/1 ui-monospace,monospace;letter-spacing:0}.options{display:flex;gap:6px}.options button{width:42px;height:42px;border:1px solid #e2c8754d;border-radius:50%;background:#090706b8;backdrop-filter:blur(10px);cursor:pointer}.options button:hover,.options button:focus-visible{border-color:var(--gold);background:#271512}
.act-copy{position:relative;z-index:4;width:100%;min-height:clamp(250px,29svh,315px);padding:clamp(25px,3.4vh,38px) max(42px,calc(env(safe-area-inset-right) + 34px)) max(25px,calc(env(safe-area-inset-bottom) + 20px)) max(42px,calc(env(safe-area-inset-left) + 34px));display:grid;grid-template-columns:minmax(270px,1.08fr) minmax(250px,.92fr) minmax(330px,1.14fr);grid-template-rows:auto auto 1fr;column-gap:clamp(28px,4vw,70px);background:radial-gradient(circle at 20% 0,#39181355,transparent 42%),linear-gradient(100deg,#090605,#100a07 48%,#090605);box-shadow:inset 0 1px 0 #e2c8756b,inset 0 9px 22px #0008,0 -18px 40px #000b;text-shadow:0 3px 18px #000}
.eyebrow{grid-column:1;grid-row:1;margin:0 0 9px;color:var(--gold);font:800 10px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.24em}.act-number{grid-column:1;grid-row:2;margin:0 0 7px;color:#dbc579;font:500 clamp(14px,1.4vw,19px)/1 Georgia;letter-spacing:.2em}.act-number b{font-weight:500}.act-copy h1{grid-column:1;grid-row:3;align-self:start;max-width:620px;margin:0;color:#fff7db;font:500 clamp(36px,3.6vw,55px)/.94 Georgia,serif;letter-spacing:-.045em}.summary{grid-column:2;grid-row:1/4;align-self:center;max-width:470px;margin:0;color:#e8ddbd;font-size:clamp(14px,1.25vw,17px);line-height:1.58}.act-chapters{grid-column:3;grid-row:1;align-self:end;display:flex;gap:7px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.act-chapters li{padding:7px 10px;border:1px solid #e2c87542;border-radius:99px;background:#08060599;color:#dfd1aa;font:700 9px/1 ui-monospace,monospace;letter-spacing:.09em}.act-chapters li.current{border-color:#e2c875a1;color:#fff0b3;background:#5a2d22a6}.act-chapters li.upcoming:after{content:' · ◌';color:#d8bd70}
.actions{grid-column:3;grid-row:2;display:flex;align-items:center;gap:18px;margin-top:17px}.primary{min-width:205px;min-height:49px;padding:0 10px 0 19px;display:flex;align-items:center;justify-content:space-between;gap:25px;border:1px solid #ead38c87;border-radius:3px;background:linear-gradient(135deg,#8a342c,#57201d);box-shadow:0 8px 30px #0007;color:#fff1c2;font-weight:800;cursor:pointer}.primary b{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#e9cf82;color:#3c1713}.primary:hover,.primary:focus-visible{background:linear-gradient(135deg,#a4483e,#6d2924);transform:translateY(-1px)}.audio-status{grid-column:3;grid-row:3;min-height:17px;margin:12px 0 0;color:#bdae8a;font:600 10px ui-monospace,monospace;letter-spacing:.07em}
.progress{position:absolute;z-index:10;left:0;right:0;bottom:0;height:4px;background:#0009}.progress i{display:block;width:calc(var(--progress)*100%);height:100%;background:linear-gradient(90deg,#8e2823,#e7cf7d);box-shadow:0 0 14px #e7cf7d}.corner-credit{position:absolute;z-index:5;right:max(34px,calc(env(safe-area-inset-right) + 24px));bottom:28px;margin:0;color:#cdbf9694;font:700 8px ui-monospace,monospace;letter-spacing:.14em;writing-mode:vertical-rl}
body[data-state=waiting] .act-copy{animation:copy-in .9s .15s both cubic-bezier(.2,.75,.25,1)}body[data-state=running] .act-copy{animation:copy-settle .8s both}body.leaving .act-copy{opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s}body.leaving .act-art{filter:brightness(.25);transition:filter .6s}
@keyframes copy-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes copy-settle{from{filter:brightness(.88)}to{filter:none}}
@media(max-width:1100px){#act-card{grid-template-rows:minmax(330px,1fr) auto}.act-copy{min-height:290px;grid-template-columns:minmax(0,1fr) minmax(330px,1fr);grid-template-rows:auto auto auto 1fr;column-gap:45px}.eyebrow{grid-column:1;grid-row:1}.act-number{grid-column:1;grid-row:2}.act-copy h1{grid-column:1;grid-row:3}.summary{grid-column:1;grid-row:4;align-self:start;margin-top:13px}.act-chapters{grid-column:2;grid-row:1/3;align-self:start}.actions{grid-column:2;grid-row:3}.audio-status{grid-column:2;grid-row:4}}
@media(max-width:700px){body{overflow-y:auto}#act-card{display:block;min-height:100svh;overflow:hidden}.act-stage{height:min(56.25vw,44svh);min-height:210px}.act-stage:before{opacity:.8}.act-art{inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.025)}body[data-state=running] .act-art,body[data-state=holding] .act-art{transform:scale(1)}.act-wash{background:linear-gradient(0deg,#0504037d,transparent 38%,#05040374)}header{padding:20px 24px 0}.options button{width:38px;height:38px}.act-copy{display:block;min-height:calc(100svh - min(56.25vw,44svh));padding:27px 24px max(34px,calc(env(safe-area-inset-bottom) + 28px))}.eyebrow{margin-bottom:8px}.act-number{margin-bottom:6px}.act-copy h1{font-size:clamp(38px,11.5vw,55px)}.summary{margin:14px 0 0;font-size:14px;line-height:1.5}.act-chapters{display:flex;margin-top:17px}.actions{display:block;margin-top:19px}.primary{width:100%}.audio-status{margin-top:11px}.corner-credit{display:none}.proscenium{border-width:8px}}
@media(max-height:620px) and (min-width:701px){#act-card{grid-template-rows:minmax(250px,1fr) auto}.act-copy{min-height:240px;padding-top:20px;padding-bottom:20px}.act-copy h1{font-size:34px}.summary{font-size:13px}.actions{margin-top:12px}.primary{min-height:44px}.corner-credit{display:none}}
@media(prefers-reduced-motion:reduce){.act-art,.curtain,.act-copy{animation:none!important;transition-duration:.01ms!important}}