:root{--g:#7dff9a;--r:#ff3b30}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;background:#050506;color:#d8dcdc;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
.hidden{display:none!important}
#vid{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none}

/* intro / loading screen */
#intro{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top)) 0 max(24px,env(safe-area-inset-bottom));text-align:center;background:#050806 url(../skin/loading-bg.webp) center/cover no-repeat;font-family:"Share Tech Mono",ui-monospace,monospace;transition:opacity .7s;overflow:hidden;--u:min(1vw,.5vh)}
#intro::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.25) 2px 3px);animation:flick 4s infinite}
#intro::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,0,0,.65))}
@keyframes flick{0%,94%,100%{opacity:1}95%{opacity:.7}97%{opacity:.9}}
#intro>*{position:relative;z-index:1}
#intro.out{opacity:0;pointer-events:none}
.lsub{color:#7dff9a;letter-spacing:.55em;font-size:calc(var(--u)*3.4);margin-left:.55em;text-shadow:0 0 10px rgba(125,255,154,.45)}
#intro h1{margin:calc(var(--u)*5) 0 calc(var(--u)*9);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:900;font-size:calc(var(--u)*17);line-height:.92;letter-spacing:.04em;color:#eef6f0;text-shadow:0 0 22px rgba(125,255,154,.35),.06em 0 rgba(255,59,48,.55),-.06em 0 rgba(80,180,255,.55);animation:jit 5s infinite}
@keyframes jit{0%,92%,100%{transform:none}93%{transform:translate(3px,-1px) skewX(4deg)}95%{transform:translate(-4px,1px)}97%{transform:translate(2px,0) skewX(-3deg)}}
#lstat{color:#b9c6bd;letter-spacing:.32em;font-size:calc(var(--u)*3.3);margin-bottom:calc(var(--u)*4)}
.lbar{display:flex;align-items:center;gap:calc(var(--u)*3);width:calc(var(--u)*72);margin-left:calc(var(--u)*10)}
.lframe{flex:1;padding:calc(var(--u)*1.2);border:2px solid #7dff9a;border-radius:calc(var(--u)*1.2);box-shadow:0 0 14px rgba(125,255,154,.45),inset 0 0 10px rgba(125,255,154,.15)}
#lsegs{display:flex;gap:calc(var(--u)*1.1);height:calc(var(--u)*3.6)}
#lsegs i{flex:1;background:rgba(125,255,154,.1);border-radius:1px}
#lsegs i.on{background:#7dff9a;box-shadow:0 0 8px rgba(125,255,154,.8)}
#lpct{width:4.2em;text-align:left;color:#7dff9a;font-size:calc(var(--u)*4.4);text-shadow:0 0 8px rgba(125,255,154,.6)}
#lsteps{list-style:none;margin:calc(var(--u)*6) 0 0;padding:0;width:calc(var(--u)*72);text-align:left;font-size:calc(var(--u)*2.9);letter-spacing:.2em;color:#9aa69e;line-height:2.1;min-height:8.4em}
#lsteps li{opacity:0;transition:opacity .25s}
#lsteps li.run,#lsteps li.ok,#lsteps li.fail{opacity:1}
#lsteps li b{margin-left:.6em;font-weight:400}
#lsteps li.ok b::after{content:"\2713";color:#7dff9a}
#lsteps li.fail b::after{content:attr(data-note);color:#ffb15a}
#lsteps li.run b::after{content:"";display:inline-block;width:.6em;height:1em;vertical-align:-.15em;background:#7dff9a;animation:blink 1s steps(2) infinite}
#begin{margin-top:calc(var(--u)*6);padding:calc(var(--u)*3) calc(var(--u)*6);background:none;border:0;color:#7dff9a;font-family:inherit;font-size:calc(var(--u)*4.4);letter-spacing:.25em;text-shadow:0 0 10px rgba(125,255,154,.7);animation:blink 1.4s steps(2) infinite}
#intro.loading #begin,#intro.loading .ltip{display:none}
.ltip{margin-top:calc(var(--u)*2);font-size:calc(var(--u)*2.6);letter-spacing:.2em;color:#5d6a61}
.ltag{position:absolute!important;bottom:max(6vh,env(safe-area-inset-bottom));left:0;right:0;color:#5d6a61;letter-spacing:.4em;font-size:calc(var(--u)*3)}
#warn{display:none;max-width:calc(var(--u)*80);margin-top:calc(var(--u)*4);padding:12px 14px;border:1px solid #ff9f0a;border-radius:6px;background:rgba(255,159,10,.1);color:#ffc266;font-size:13px;line-height:1.5;letter-spacing:.04em}
#warn button{margin-top:8px;padding:7px 14px;border-radius:6px;border:1px solid #ff9f0a;background:transparent;color:#ffc266;font-family:inherit}
@keyframes blink{50%{opacity:0}}
/* ?xr8 only: 8th Wall XR Engine attribution (added by js/xr8.js) */
.xr8credit{position:absolute!important;bottom:max(1.2vh,env(safe-area-inset-bottom));left:16px;right:16px;color:#4a564e;font-size:9px;line-height:1.45;letter-spacing:.06em;font-family:ui-monospace,monospace}
.xr8credit a{color:#6f7f74}
#intro:has(.xr8credit) .ltag{bottom:calc(max(1.2vh,env(safe-area-inset-bottom)) + 72px)}

/* camcorder: PARASIGHT skin, live parts positioned by js/skin.js */
#rig{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0b}
.skin{position:relative;width:min(100vw,50dvh);aspect-ratio:1/2;background:#111 url(../skin/base.webp) 0 0/100% 100% no-repeat;container-type:size}
.skin>*{position:absolute;margin:0;padding:0;border:0}
.screen{border-radius:1.4cqw;overflow:hidden;background:#000}
#glc{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.015) 30%,transparent 31%),radial-gradient(ellipse at 50% 50%,transparent 62%,rgba(0,0,0,.4))}
.screen.boot{animation:boot .9s cubic-bezier(.2,.8,.2,1)}
@keyframes boot{0%{clip-path:inset(49.6% 0 49.6% 0);filter:brightness(3)}35%{clip-path:inset(49.6% 0 49.6% 0);filter:brightness(3)}70%{clip-path:inset(0);filter:brightness(1.6)}100%{clip-path:inset(0);filter:none}}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#pwr{position:absolute;inset:0;background:#000;pointer-events:none;opacity:0}
#pwr.off{opacity:1;animation:crtoff .5s ease-in}
@keyframes crtoff{0%{opacity:0;transform:none;background:#fff}30%{opacity:1;transform:scaleY(.01);background:#fff}70%{opacity:1;transform:scale(.002,.01);background:#fff}100%{opacity:1;transform:none;background:#000}}
.osd{position:absolute;inset:0;pointer-events:none;color:#fff;font-size:max(11px,3.1cqw);letter-spacing:.06em;text-shadow:1px 1px 0 #000,0 0 4px rgba(0,0,0,.8);font-weight:700}
.osd>div{position:absolute}
.tl{top:4%;left:4%}.tr{top:4%;right:4%;display:flex;gap:8px;align-items:center}
.bl{bottom:4%;left:4%}.br{bottom:4%;right:4%;text-align:right;line-height:1.35}
.rec{color:#6b6b6b}
.rec.live{color:var(--r);animation:blink 1.2s steps(2) infinite}
#irl{color:#ffb15a}
@keyframes blink{50%{opacity:0}}
.batt{display:inline-flex;gap:1px;padding:2px;border:1.5px solid #fff;border-radius:2px;position:relative}
.batt::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:5px;background:#fff}
.batt b{width:4px;height:7px;background:#fff;display:block}
.ctr{white-space:pre-line;top:46%;left:0;right:0;text-align:center;font-size:1.1em;letter-spacing:.12em;opacity:0;transition:opacity .25s;padding:0 16px;line-height:1.4}
.ctr.on{opacity:1}
.brk{inset:0}
.brk i{position:absolute;width:7%;aspect-ratio:1;border:2px solid rgba(255,255,255,.65)}
.brk i:nth-child(1){left:20%;top:30%;border-right:0;border-bottom:0}.brk i:nth-child(2){right:20%;top:30%;border-left:0;border-bottom:0}
.brk i:nth-child(3){left:20%;bottom:30%;border-right:0;border-top:0}.brk i:nth-child(4){right:20%;bottom:30%;border-left:0;border-top:0}
#zm{bottom:12%;left:0;right:0;text-align:center;opacity:0;transition:opacity .3s}
@keyframes fadeio{0%{opacity:0}8%,80%{opacity:1}100%{opacity:0}}
#sbx{top:12%;left:0;right:0;text-align:center}
#sbf{display:inline-block;padding:2px 8px;border:1px solid rgba(255,255,255,.6);letter-spacing:.15em}
#sbw{margin-top:22%;font-size:2.4em;letter-spacing:.25em;opacity:0;transition:opacity .15s;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.6),2px 0 rgba(255,59,48,.6),-2px 0 rgba(80,180,255,.6)}
#sbw.on{opacity:1}
#evps{top:12%;left:4%;color:var(--r)}

#dbg{position:absolute;left:3%;right:3%;top:11%;z-index:3;pointer-events:auto}
#dbg pre{margin:0;padding:4px 6px;background:rgba(0,0,0,.55);color:#9f9;font:10px/1.35 ui-monospace,monospace;white-space:pre-wrap}
#dbg button{margin-top:4px;padding:6px 12px;background:#c01d14;color:#fff;border:0;border-radius:4px;font:700 11px ui-monospace,monospace}

/* pressable buttons: a sprite of the art under them */
.hot{background-repeat:no-repeat;border-radius:1.6cqw;cursor:pointer;transition:transform .06s,filter .06s;-webkit-appearance:none;appearance:none}
.hot::before{content:"";position:absolute;inset:-6px}
.hot:active,.hot.press{transform:scale(.965) translateY(.25cqw);filter:brightness(.68) contrast(1.05);box-shadow:inset 0 .5cqw 1.2cqw rgba(0,0,0,.7)}
.hot.round{border-radius:50%}
.hot.small{border-radius:1.2cqw}
.hot.on{filter:brightness(1.12);box-shadow:inset 0 0 0 .35cqw rgba(110,255,190,.55),0 0 2cqw rgba(110,255,190,.35)}
.hot.on:active{filter:brightness(.75)}
#recbtn.live{animation:recpulse 1.2s infinite}
@keyframes recpulse{50%{box-shadow:0 0 0 .6cqw rgba(255,59,48,.55),0 0 4cqw rgba(255,59,48,.6)}}

/* live readouts */
.lcdtxt{display:flex;align-items:center;font-family:"Share Tech Mono",ui-monospace,monospace;color:#8ff5d4;text-shadow:0 0 1.2cqw rgba(110,255,200,.55);pointer-events:none;line-height:1}
#pips{justify-content:center;font-size:3.2cqw}
.num{justify-content:flex-end;font-size:4.6cqw;letter-spacing:-.02em}
.num.tmp{justify-content:flex-start;padding-left:.4cqw;font-size:3.2cqw}
#leds{inset:0;pointer-events:none}
#leds i{position:absolute;background:0 0/100% 100% no-repeat;opacity:0;transition:opacity .08s}
#leds i.on{opacity:1}
.bar{pointer-events:none;overflow:hidden;border-radius:.5cqw}
.bar b{position:absolute;left:1.5%;top:14%;bottom:14%;width:0;border-radius:.4cqw;background:linear-gradient(#b8ffe6,#6cf0bf);box-shadow:0 0 1.6cqw rgba(110,255,200,.7);transition:width .1s}
#reclamp{background:url(../skin/reclamp.png) 0 0/100% 100%;opacity:0;pointer-events:none}
#reclamp.live{animation:lamp 1.2s steps(2) infinite}
@keyframes lamp{0%{opacity:1}50%{opacity:0}}

/* sliding switches */
.sw{background:none;cursor:pointer}
.sw .knob{position:absolute;background:0 0/100% 100% no-repeat;transition:transform .16s cubic-bezier(.3,1.4,.5,1)}
.sw:active .knob{filter:brightness(.85)}
#irtick{background:#ff8a1e;box-shadow:0 0 1.4cqw #ff8a1e,0 0 .4cqw #ffb15a;border-radius:2px;pointer-events:none}

/* modals */
.modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom))}
#viewer img,#viewer video{max-width:100%;max-height:68vh;border-radius:6px;box-shadow:0 0 0 1px #333,0 10px 40px #000}
#viewer img{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}
.modal .row{display:flex;gap:10px}
.modal .row button{padding:11px 20px;border-radius:999px;border:1px solid #555;background:#17181b;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.modal .row button.p{border-color:var(--g);color:var(--g)}
.modal p{margin:0;font-size:11px;color:#777;letter-spacing:.08em}

/* gallery button label (the artwork's CASE FILE label was painted out) */
.glbl{position:absolute;left:44%;top:0;bottom:0;display:flex;align-items:center;font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-weight:400;font-size:3.05cqw;letter-spacing:.05em;color:#cfd3d4;text-shadow:0 1px 1px rgba(0,0,0,.8);pointer-events:none}

/* gallery */
#gallery{justify-content:flex-start;gap:12px;overflow:auto;-webkit-overflow-scrolling:touch}
.ghead{width:100%;max-width:520px;display:flex;justify-content:space-between;align-items:center;font-size:14px;letter-spacing:.3em;color:var(--g)}
.ghead span{color:#6f7a73;letter-spacing:.15em;margin-left:8px;font-size:11px}
#gclose{border:0;background:none;color:#aaa;font-size:30px;line-height:1;padding:0 4px}
#ggrid{width:100%;max-width:520px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gtile{position:relative;aspect-ratio:3/4;padding:0;border:1px solid #2a2d2b;border-radius:4px;overflow:hidden;background:#0b0c0d}
.gtile img,.gtile video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.gtile span{position:absolute;left:4px;bottom:3px;font-size:9px;letter-spacing:.08em;color:#fff;text-shadow:1px 1px 0 #000}
.gtile.clip::after{content:"\25B6";position:absolute;right:5px;top:4px;font-size:11px;color:#fff;text-shadow:0 0 4px #000}
#gempty,.gnote{text-align:center;line-height:1.8}
.gnote{margin-top:auto!important;font-size:10px!important;color:#4f5a53!important}