:root{--night:#142126;--ivory:#ece4d3;--dim:#c0c6c2;--brass:#d2ba85}
a{color:inherit}
#gate{overflow-y:auto;align-items:safe center}
html,body{min-height:100dvh}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid var(--brass);outline-offset:5px}canvas#gl:focus{outline:none}.mono{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:16px}
#gate{background:#142126;isolation:isolate}#gate:before{content:"";position:absolute;inset:0 0 0 38%;background:linear-gradient(90deg,#142126,transparent 35%),linear-gradient(0deg,#14212666,#14212666),url('plates/rubens-copenhagen-web.webp') center/cover;z-index:-1;opacity:.55}#gate .gate-inner{max-width:650px;align-items:flex-start;text-align:left;margin-right:33vw;padding:50px;gap:20px}.gate-title{margin:12px 0 15px;font-size:clamp(55px,6.5vw,104px);font-weight:400}.gate-title span:first-child{font-size:24px;font-style:normal;line-height:1.6;margin-bottom:20px;opacity:.75}.gate-line{font-size:clamp(23px,2.2vw,31px);font-style:normal;color:var(--ivory);line-height:1.2}.gate-how{max-width:37ch;font-size:18px;line-height:1.6;color:var(--dim)}.back-to-painting{font-style:italic;text-decoration:none;border-bottom:1px solid #adb5ac66;font-size:17px}.gate-inner #enter{margin-top:10px;text-transform:none;letter-spacing:0;font:22px var(--body);padding:15px 26px;background:#e4d4b4;color:#1a292e;border:1px solid #e4d4b4}.gate-inner #enter:hover{background:#fff0cf}#load-status{font:15px/1.5 var(--body);color:var(--dim);max-width:38ch}#orient{text-transform:none;letter-spacing:0;font:16px var(--body)}
#head{top:28px;padding:0 35px}#act{font-size:30px}#act small{font:17px var(--body);text-transform:none;letter-spacing:0;color:#eadfc9}#beatname{display:none}.vignette{background:linear-gradient(0deg,#0a1319bb,transparent 28%,transparent 77%,#0a131966),radial-gradient(70% 65% at 50% 45%,transparent 55%,#0009)}#grain{opacity:.035}
#hint{display:none}#facing{bottom:112px;min-height:48px;max-width:90vw;width:450px}#facing .name{font:20px var(--body);text-transform:none;letter-spacing:0}#action-hint{font:17px/1.4 var(--body);color:#fff2cd;margin-top:7px;text-shadow:0 2px 12px #000}#facing .hold{height:2px;width:150px;opacity:.25;margin-top:10px}#facing.can-act .hold{opacity:1}#facing .hold i{background:#f5dda5}#line{top:43%}#line .decl{font-size:clamp(25px,3.2vw,45px)}
#controls{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:95;display:none;align-items:center;gap:8px;padding:7px 14px;background:#132027dc;backdrop-filter:blur(12px);border:1px solid #e2d7b647;border-radius:4px;white-space:nowrap;font:16px var(--body)}body[data-started] #controls{display:flex}#controls button,#controls a{font:inherit;padding:8px 13px;color:#ece4d3;text-decoration:none}#controls button:hover,#controls a:hover{background:#d9d2bc16}#controls button:disabled{opacity:.35;cursor:default}#controls [aria-pressed="true"]{color:#ffe0a0}#controls a{border-left:1px solid #acbaa03b;margin-left:4px}
#paused-panel{position:fixed;inset:0;z-index:90;background:#0b171cb5;backdrop-filter:blur(6px);display:grid;align-content:center;justify-items:center;gap:25px}#paused-panel[hidden]{display:none}#paused-panel p{font:65px var(--display)}#resume{font:22px var(--body);border-bottom:1px solid var(--brass);padding:8px 4px}
#subtitles{position:fixed;bottom:188px;left:50%;transform:translateX(-50%);z-index:30;width:min(760px,90vw);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px}#subtitles[hidden]{display:none}#subtitles p{font:18px/1.4 var(--body);color:#fff1d9;max-width:58ch;padding:8px 15px;background:#101b23e8;border-radius:3px}#subtitles p:empty{display:none}
#turn{background:#131c21}#turn .decl{font-size:clamp(30px,4.3vw,62px);line-height:1.15;max-width:19ch;white-space:pre-line}#reading{top:42%;width:min(900px,86vw)}#reading .cue{font:16px/1.6 var(--body);letter-spacing:0;text-transform:none}#reading .sent{font-size:clamp(27px,3vw,43px);line-height:1.25}
#openwhole{bottom:105px;right:35px;font:16px var(--body);letter-spacing:0;text-transform:none}#next-line{position:fixed;bottom:105px;left:35px;z-index:26;font:16px var(--body);border-bottom:1px solid #eee7cd88;padding:4px 0}#next-line[hidden]{display:none}
dialog#drawer{inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;background:#1d2b30;color:#ece4d3;opacity:1;visibility:visible;overflow:auto}dialog#drawer:not([open]){display:none}dialog#drawer[open]{display:block}#drawer .inner{max-width:780px;padding:90px 40px}#drawer .fine,#drawer .record{font:16px/1.7 var(--body);text-transform:none;letter-spacing:0}#drawer .record{padding-top:25px;border-top:1px solid #8a9a9066}#drawer #close{position:sticky;float:right;top:25px;right:30px;background:#1d2b30;padding:5px 10px;z-index:2}
@media(max-width:650px){#gate .gate-inner{padding:30px;margin:0;max-width:95vw}.gate-title{font-size:65px}#gate:before{inset:0;opacity:.2}.gate-line{font-size:27px}.gate-how{font-size:17px}#head{top:20px;padding:0 22px}#act{font-size:26px}#facing{bottom:105px;width:92vw}#action-hint{font-size:16px}#controls{width:calc(100% - 28px);justify-content:space-between;padding:6px;bottom:18px;gap:0;font-size:14px}#controls button,#controls a{padding:10px 7px}#controls a{margin:0}#subtitles{bottom:180px}#subtitles p{font-size:16px;padding:6px 10px}#openwhole{right:20px;bottom:100px}#next-line{left:20px;bottom:100px}#drawer .inner{padding:90px 25px}#drawer p{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}#grain{display:none}}
@media(max-height:700px){#gate{align-items:start}#gate .gate-inner{padding-block:25px;gap:14px}#gate .gate-title{font-size:64px;margin-block:8px}#gate .gate-title span:first-child{margin-bottom:10px}}

#opening{position:fixed;inset:0;z-index:56;background:#101a1e;display:grid;place-items:center;overflow:hidden;pointer-events:none}
#opening[hidden]{display:none}#opening img{width:100%;height:100%;object-fit:contain;will-change:transform}#opening span{position:absolute;bottom:8%;left:0;right:0;text-align:center;font:italic clamp(23px,3vw,38px) var(--display);text-shadow:0 2px 18px #000;background:linear-gradient(90deg,transparent,#111b22c9,transparent);padding:20px}
#turn{transition:none;background:#101a1e;pointer-events:none}#turn.on{transition:none}#turn .turn-paint{position:absolute;inset:8% 8% 18%;display:grid;place-items:center;overflow:hidden;opacity:.8}#turn .turn-paint img{width:100%;height:100%;object-fit:contain}#turn .turn-paint .ash{position:absolute;inset:0;clip-path:inset(0 0 0 100%)}#turn .decl{position:absolute;bottom:7%;font-size:clamp(23px,3vw,38px);font-style:italic;max-width:90vw}
#head{opacity:.8}#act{font-size:25px}#act small{font-size:15px}#controls{bottom:18px;background:#101b21ba;border-color:#e2d7b62b;border-radius:0;backdrop-filter:blur(8px)}#controls button,#controls a{font-size:15px;padding:7px 11px}
#facing{bottom:104px}#facing .name{font-size:17px;color:#eee4d0}#action-hint{font-size:16px}#subtitles{bottom:165px}#subtitles p{font-size:18px;box-shadow:0 2px 14px #0002}
body[data-ended] .vignette{background:linear-gradient(0deg,#0c171ecc,#0c171e99)}body[data-ended] #head{opacity:.3}body[data-ended] #reading .sent{font-size:clamp(29px,3.3vw,47px)}body[data-ended] #facing{display:none}
body.torn:after{content:"";pointer-events:none;position:fixed;left:50%;bottom:0;width:1px;height:14vh;background:linear-gradient(transparent,#b8aaa06b);transform:rotate(5deg);z-index:6}
@media(max-width:650px){#controls button,#controls a{font-size:14px;padding:10px 6px}#subtitles p{font-size:16px}#turn .turn-paint{inset:15% 4% 24%}#turn .decl{bottom:14%}#reading{top:39%}body[data-ended] #reading .sent{font-size:29px}#opening span{bottom:16%;padding:16px 25px}}
@media(max-width:360px){body[data-ended] #reading .sent{font-size:26px}}
@media(max-height:500px) and (min-width:651px){#reading{top:40%;width:min(900px,76vw)}body[data-ended] #reading .sent{font-size:26px}#reading .cue{margin-top:12px}}
#rehearsal{position:fixed;top:20px;right:20px;z-index:100;background:#142126ed;padding:12px 16px;font:16px/1.4 var(--body);max-width:240px;border:1px solid #e2d7b647}#rehearsal summary{cursor:pointer}#rehearsal button{display:block;padding:8px 0;text-decoration:underline}#rehearsal p{font-size:13px;color:var(--dim);margin-top:8px}
.entry-options{display:flex;align-items:center;flex-wrap:wrap;gap:18px}.entry-options #enter{margin:0}.entry-options #enter-quiet{font:17px var(--body);padding:10px 0;border-bottom:1px solid #adb5ac66}.entry-options #enter-quiet:disabled{opacity:.4;cursor:default}
#subtitles{bottom:88px;width:min(760px,90vw)}#subtitles p{max-width:60ch;text-align:center;font-size:19px;line-height:1.35;background:#101b23e3;padding:9px 17px}body:has(#subtitles:not([hidden]) p:not(:empty)) #facing{bottom:176px}
@media(max-width:650px){#subtitles{bottom:90px}#subtitles p{font-size:16px}body:has(#subtitles:not([hidden]) p:not(:empty)) #facing{bottom:220px}}