*{box-sizing:border-box}
html,body{margin:0;background:#000}
body{font-family:'Inter',sans-serif;color:#9A9A9A}
button{font-family:'Inter',sans-serif}
button:disabled{opacity:.3;cursor:default}
button:focus-visible{outline:2px solid #F4F2EC;outline-offset:3px}

.root{min-height:100vh;min-height:100dvh;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:56px;padding:40px;background:#000}

/* script column */
.leftcol{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.leftcol.zoomed{position:fixed;inset:0;z-index:1000;background:#000;overflow:auto;padding:12px 0;justify-content:flex-start;animation:zin 250ms ease}
@keyframes zin{from{opacity:0}to{opacity:1}}

.stage{position:relative;flex:none;margin:auto;width:51em;height:66em;perspective:160em;font-family:'Courier Prime','Courier New',monospace;line-height:1em;font-size:min(11.76px,calc((100vh - 190px) / 66))}
.stage.zoomed{font-size:calc((100vh - 120px) / 66)}

.pg{position:absolute;inset:0;padding:6em 6em 6em 9em;background:#F4F2EC;color:#141414;overflow:hidden;transform-origin:left center;backface-visibility:hidden;pointer-events:none;
  transform:rotateY(0deg);opacity:1;transition:transform 950ms cubic-bezier(.55,.05,.25,1),opacity 120ms ease 0ms}
.pg.flipped{transform:rotateY(-105deg);opacity:0;transition:transform 950ms cubic-bezier(.55,.05,.25,1),opacity 450ms ease 480ms}
.pg .shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity 950ms ease}
.pg.flipped .shade{opacity:.6}
.pgn{position:absolute;top:3em;right:6em}

.s-h{white-space:pre;margin-top:1em;text-transform:uppercase}
.s-a{white-space:pre;margin-top:1em}
.s-c{white-space:pre;margin-top:1em;margin-left:13.2em}
.s-p{white-space:pre;margin-left:9.6em}
.s-d{white-space:pre;margin-left:6em}
.s-t1{white-space:pre;text-align:center;margin-top:16em}
.s-t2{white-space:pre;text-align:center;margin-top:3em}
.s-t3{white-space:pre;text-align:center;margin-top:1em}
.s-h:first-child,.s-a:first-child{margin-top:0}

.zoombtn{position:absolute;z-index:100;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:zoom-in;touch-action:pan-y}
.stage.zoomed .zoombtn{cursor:zoom-out;touch-action:auto}
.zhint{display:none;position:absolute;z-index:101;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid #777;align-items:center;justify-content:center;pointer-events:none}
@media (hover:none){.zhint{display:flex}}
.zhint .icon-minus{display:none}
.stage.zoomed .zhint .icon-plus{display:none}
.stage.zoomed .zhint .icon-minus{display:block}

.nav{display:flex;align-items:center;justify-content:center;gap:32px}
.btn{min-width:44px;min-height:44px;border:1px solid #3A3A3A;background:transparent;color:#D8D8D8;font-size:18px;cursor:pointer}

/* references column */
.refcol{flex:1 1 560px;min-width:0;max-width:820px;display:flex;flex-direction:column;gap:14px}
.refframe{position:relative;display:block;width:100%;aspect-ratio:16 / 9;padding:0;border:1px solid #262626;background:#000;cursor:pointer;overflow:hidden}
.refframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 450ms ease}
.refframe img.on{opacity:1}
.refnav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.refnav .group{display:flex;align-items:center;gap:12px}
.count{min-width:80px;text-align:center;font-size:13px;letter-spacing:.08em}
.music{min-height:44px;padding:0 18px;font-size:13px;letter-spacing:.08em;cursor:pointer;border:1px solid #3A3A3A;background:transparent;color:#D8D8D8;transition:background 120ms ease,box-shadow 120ms ease}
.music[aria-pressed="true"]{border-color:#7A7A7A;background:#2B2B2B;color:#fff;box-shadow:inset 0 3px 8px rgba(0,0,0,.9);transform:translateY(1px)}

/* phone */
@media (max-width:760px){
  .root{min-height:0;padding:20px 16px 40px;gap:28px;align-items:flex-start}
  .leftcol{width:100%}
  .stage{width:41em;font-size:calc((100vw - 32px) / 41)}
  .stage.zoomed{font-size:13px}
  .pg{padding:6em 2em 6em 3em}
  .pgn{right:2em}
}

/* entry screen: frosted blur until the first click */
.intro{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border:0;padding:0;margin:0;cursor:pointer;color:#F4F2EC;background:rgba(18,18,20,.38);-webkit-backdrop-filter:blur(7px) saturate(180%);backdrop-filter:blur(7px) saturate(180%);transition:opacity 1000ms ease,background 1000ms ease,-webkit-backdrop-filter 1000ms ease,backdrop-filter 1000ms ease,visibility 0s linear 1000ms}
.intro.gone{opacity:0;visibility:hidden;pointer-events:none;background:rgba(18,18,20,0);-webkit-backdrop-filter:blur(0) saturate(100%);backdrop-filter:blur(0) saturate(100%)}
.intro-title{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(56px,11vw,150px);line-height:1;letter-spacing:-.01em;transition:transform 1000ms ease}
.intro.gone .intro-title{transform:scale(1.06)}
.intro-hint{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,236,.78)}

.intro[hidden]{display:none}
.intro.pw{cursor:default}
.pwrow{display:flex;align-items:center;gap:10px;position:relative}
.pwcaret{position:absolute;left:50%;top:50%;width:1.5px;height:18px;margin-top:-9px;background:#F4F2EC;pointer-events:none;display:none;animation:pwblink 1.1s steps(1) infinite}
.pwin:placeholder-shown{caret-color:transparent}
.pwin:placeholder-shown + .pwcaret{display:block}
@keyframes pwblink{0%,55%{opacity:1}56%,100%{opacity:0}}
.pwform{display:flex;flex-direction:column;align-items:center;margin:0}
.pwin{width:min(300px,78vw);height:54px;padding:0 20px;border-radius:16px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#F4F2EC;font-family:'Instrument Serif',Georgia,serif!important;font-style:normal;font-weight:400;font-size:26px;text-align:center;letter-spacing:.2em;outline:none;transition:border-color 200ms ease,background 200ms ease}
.pwin::placeholder{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,242,236,.72)}
.pwin:focus{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.16)}
.pwgo{width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#F4F2EC;font-size:22px;cursor:pointer;padding:0}
.pwform.shake{animation:shk 420ms ease}
@keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.intro.gone .pwform{transform:scale(1.04);transition:transform 1000ms ease}
.pwnote{margin-top:14px;width:100%;text-align:center;white-space:nowrap;font-family:'Instrument Serif',Georgia,serif;font-size:10px;letter-spacing:.04em;color:rgba(244,242,236,.82)}
.pwtitle{margin-bottom:14px;width:100%;text-align:center;white-space:nowrap;font-family:'Instrument Serif',Georgia,serif;font-size:12px;letter-spacing:.04em;color:#F4F2EC}