/* ==================================================================
   MEGA-SCOPES :: The Files :: Project Owlian research facility
   Palette lifted from the Escape From Area 51 video: magenta lab light,
   ice-blue cryo glass, pixel-green captions, orange alarm.
   ================================================================== */

.file-body{--lab-pink:#ff3fc8;--lab-ice:#8fe7ff;--lab-green:#46ff6e;--lab-orange:#ff8a1c}
.file-body main{background:
  radial-gradient(ellipse 60% 40% at 10% 0%,rgba(255,63,200,.16),transparent 70%),
  radial-gradient(ellipse 50% 40% at 95% 20%,rgba(143,231,255,.12),transparent 70%)}

/* ---------------- boot ---------------- */
/* scrolls on short phones; the buttons stay pinned to the bottom so they are
   always reachable while the text is still typing */
.boot{position:fixed;inset:0;z-index:400;background:#000;display:grid;place-items:center;
  padding:var(--gut);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.boot-in{max-width:760px;width:100%}
.boot-tag{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lab-green);margin:0 0 18px}
.boot-text{font-family:var(--mono);font-size:clamp(13px,1.7vw,16px);line-height:1.75;color:#e8ffe8;
  white-space:pre-wrap;margin:0 0 26px;min-height:12em}
.boot-text em{font-style:normal;color:var(--lab-green)}
.boot-text .cursor{display:inline-block;width:.6em;height:1.1em;vertical-align:-2px;
  background:var(--lab-green);animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.boot-actions{display:flex;gap:12px;flex-wrap:wrap;position:sticky;bottom:0;
  padding:14px 0 max(14px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#000 30%)}
@media (max-width:600px){
  .boot{place-items:start center}
  .boot-text{font-size:12px;line-height:1.6;min-height:0}
  .boot-actions .btn,.boot-actions .ghost{flex:1;justify-content:center}
}
.boot.out{animation:bootOut .6s var(--ease) forwards}
@keyframes bootOut{to{opacity:0;visibility:hidden}}

/* ---------------- hero ---------------- */
.file-hero .big{color:var(--lab-green);text-shadow:0 0 18px rgba(70,255,110,.35)}
.hud-row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:20px}
.clear-badge,.anom{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;padding:7px 13px;color:var(--dim);
  display:inline-flex;align-items:center;gap:8px}
.clear-badge i{width:8px;height:8px;border-radius:50%;background:var(--lab-orange);
  box-shadow:0 0 8px var(--lab-orange);animation:blink 1.6s steps(2) infinite}
.file-body.cleared .clear-badge i{background:var(--lab-green);box-shadow:0 0 8px var(--lab-green)}
.anom b{color:var(--lab-green);font-weight:700}
.ghost.small,.btn.small{padding:8px 13px;font-size:11px}

/* ---------------- bench grid ---------------- */
.bench{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-areas:
    "pods pods cctv cctv"
    "pods pods danger beacon"
    "term term term dna"
    "chem chem xray xray"
    "chem chem gauge face"
    "screens guide guide exit"}
.st-pods{grid-area:pods}.st-cctv{grid-area:cctv}.st-danger{grid-area:danger}
.st-beacon{grid-area:beacon}.st-term{grid-area:term}.st-dna{grid-area:dna}
.st-xray{grid-area:xray}.st-gauge{grid-area:gauge}.st-chem{grid-area:chem}
.st-face{grid-area:face}.st-screens{grid-area:screens}.st-guide{grid-area:guide}.st-exit{grid-area:exit}

.st{position:relative;display:flex;flex-direction:column;min-width:0;
  border:1px solid #1d2a3f;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#0a1220,#070c16)}
.st::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.st.found{border-color:rgba(70,255,110,.45)}
.st-h{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #1d2a3f;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.st-h .code{color:var(--lab-pink)}
.st-h b{font-weight:500;color:var(--bone);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-h .tick{width:10px;height:10px;border-radius:50%;border:1px solid #2c3b54}
.st.found .st-h .tick{background:var(--lab-green);border-color:var(--lab-green);box-shadow:0 0 8px var(--lab-green)}
.st-b{position:relative;flex:1;min-height:180px;overflow:hidden;background:#05080e;display:block;
  color:inherit;text-decoration:none}
.st-b picture,.st-b img{display:block;width:100%;height:100%;object-fit:cover}
.st-hint{margin:0;padding:8px 12px;font-family:var(--mono);font-size:11px;color:var(--dimmer);
  border-top:1px solid #121b2a}
.st-hint code{color:var(--lab-green)}
button.st-b{border:0;padding:0;cursor:pointer;width:100%;text-align:left;font:inherit}
.hit img{transition:transform .5s var(--smooth),filter .3s}
.hit:hover img,.hit:focus-visible img{transform:scale(1.04);filter:brightness(1.12)}
.hit:focus-visible{outline:2px solid var(--lab-green);outline-offset:-2px}

/* ---------------- 01 pods ---------------- */
.pods{min-height:clamp(300px,40vw,520px)}
.pods>picture,.pods .breach-img{position:absolute;inset:0}
.pods .breach-img{opacity:0;transition:opacity .6s}
.file-body.breach .pods .breach-img{opacity:1}
.frost{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.tags{position:absolute;left:0;right:0;bottom:12px}
.ptag{position:absolute;bottom:0;padding:5px 8px;border-radius:3px;cursor:pointer;
  background:rgba(4,8,14,.82);border:1px solid var(--lab-ice);color:var(--lab-ice);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;animation:tagIn .5s var(--smooth) both}
.ptag:nth-child(2){animation-delay:.12s}.ptag:nth-child(3){animation-delay:.24s}
.ptag:hover,.ptag:focus-visible{background:var(--lab-ice);color:#031016}
@keyframes tagIn{from{opacity:0;transform:translateY(8px)}}

/* ---------------- 02 cctv ---------------- */
.cctv{min-height:240px;filter:grayscale(1) contrast(1.15)}
.cctv .feed{position:absolute;inset:0;opacity:0;transition:opacity .15s}
.cctv .feed.on{opacity:1}
.cctv::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.cctv-snow{position:absolute;inset:0;width:100%;height:100%;z-index:3;opacity:0;image-rendering:pixelated}
.cctv.static .cctv-snow{opacity:.9}
.osd{position:absolute;left:10px;right:10px;top:8px;z-index:4;display:flex;gap:12px;
  font-family:var(--mono);font-size:11px;color:#fff;text-shadow:0 1px 2px #000}
.osd .rec::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#ff2d3d;margin-right:5px;animation:blink 1s steps(2) infinite}
.osd .tc{margin-left:auto}
.lost{position:absolute;inset:0;z-index:5;display:none;place-items:center;align-content:center;gap:8px;
  font-family:var(--mono);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:#fff;
  text-align:center}
.lost a{display:block;font-size:11px;letter-spacing:.14em;color:var(--lab-green);margin-top:8px}
.cctv.static .lost{display:grid}
.cams{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #121b2a}
.cams button{padding:9px 0;background:none;border:0;border-right:1px solid #121b2a;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim)}
.cams button:last-child{border-right:0}
.cams button[aria-pressed="true"]{color:#031016;background:var(--lab-ice)}

/* ---------------- 03 danger / 04 beacon ---------------- */
.danger,.beacon,.gauge,.face{min-height:200px}
.spark{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 30% 45%,rgba(255,255,255,.9),rgba(143,231,255,.4) 12%,transparent 30%)}
.danger:active .spark{opacity:1}
.sweep{position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(255,138,28,.5),transparent 18%,transparent 50%,rgba(255,138,28,.5) 68%,transparent 86%);
  display:none}
.file-body.breach .sweep{display:block;mix-blend-mode:screen;animation:spinDisk 1.2s linear infinite}

/* ---------------- 05 terminal ---------------- */
.term{min-height:260px;background:#020604;display:flex;flex-direction:column;
  font-family:var(--mono);font-size:13px;color:#b9ffc8}
.term-out{flex:1;overflow-y:auto;padding:12px 14px;max-height:300px;white-space:pre-wrap;
  text-shadow:0 0 6px rgba(70,255,110,.35)}
.term-out .cmd{color:#fff}
.term-out .err{color:#ff8c8c}
.term-out a{color:var(--lab-ice)}
.term-in{display:flex;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid #0f2a18}
.term-in label{color:var(--lab-green);white-space:nowrap}
.term-in input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;
  font:inherit;caret-color:var(--lab-green)}

/* ---------------- 06 dna ---------------- */
.dna{min-height:320px;display:grid;grid-template-rows:auto 1fr;background:
  linear-gradient(180deg,rgba(4,10,20,.4),rgba(4,10,20,.95)),#040a14}
.helix{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.dna-ui{position:relative;display:grid;gap:8px;padding:12px}
.dna-ui fieldset{border:0;margin:0;padding:0;display:grid;gap:3px}
.dna-ui legend{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lab-ice);padding:0}
.dna-ui select{width:100%;background:rgba(5,10,18,.85);border:1px solid #24405a;color:var(--bone);
  padding:7px 8px;border-radius:4px;font:inherit;font-size:13px}
.dna-out{position:relative;padding:0 12px 12px;font-family:var(--mono);font-size:12px;color:var(--lab-green)}
.dna-out b{display:block;font-family:var(--disp);font-size:20px;letter-spacing:.04em;color:var(--bone);
  font-weight:400;margin:4px 0}
.dna-out a{color:var(--lab-ice)}

/* ---------------- 07 xray ---------------- */
.xray{min-height:260px;cursor:none;touch-action:none}
.xray-lens{position:absolute;inset:0;pointer-events:none;filter:invert(1) hue-rotate(180deg) brightness(1.1);
  clip-path:circle(0px at 50% 50%);transition:clip-path .08s linear}
.xray-lens img{object-fit:contain;background:#000}
.xray.scanning .xray-lens{clip-path:circle(var(--r,70px) at var(--x,50%) var(--y,50%))}
.xray::after{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:calc(var(--r,70px)*2);
  aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2px solid var(--lab-ice);
  box-shadow:0 0 18px rgba(143,231,255,.6),inset 0 0 18px rgba(143,231,255,.3);pointer-events:none;
  opacity:0;transition:opacity .2s}
.xray.scanning::after{opacity:1}

/* ---------------- 08 gauge ---------------- */
.steam{position:absolute;left:62%;top:20%;pointer-events:none}
.steam i{position:absolute;width:60px;height:60px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.7),transparent 70%)}
.gauge.venting .steam i{animation:steam 1.4s ease-out forwards}
.gauge.venting .steam i:nth-child(2){animation-delay:.2s;left:20px}
.gauge.venting .steam i:nth-child(3){animation-delay:.4s;left:-18px}
@keyframes steam{0%{opacity:.9;transform:translateY(0) scale(.4)}100%{opacity:0;transform:translateY(-120px) scale(2.4)}}
.valve-note{position:absolute;left:10px;bottom:10px;padding:4px 8px;border-radius:3px;
  background:rgba(0,0,0,.7);font-family:var(--mono);font-size:11px;color:var(--lab-orange)}
.reveal{padding:10px 12px;border-top:1px solid #121b2a;font-size:14px}
.reveal p{margin:0 0 6px}
.reveal a{color:var(--lab-green)}
.codebox{display:inline-block;font-family:var(--mono);font-size:18px;letter-spacing:.14em;color:var(--lab-green);
  border:1px dashed var(--lab-green);padding:6px 10px;border-radius:4px;margin:4px 0 8px}

/* ---------------- 09 chem ---------------- */
.bubbles{position:absolute;inset:0;pointer-events:none}
.bubbles i{position:absolute;bottom:-20px;width:14px;height:14px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 30% 30%,#fff,var(--lab-pink) 60%)}
.chem.boiling .bubbles i{animation:bub 1.6s ease-in infinite}
.bubbles i:nth-child(1){left:20%}.bubbles i:nth-child(2){left:35%;animation-delay:.3s}
.bubbles i:nth-child(3){left:52%;animation-delay:.6s}.bubbles i:nth-child(4){left:66%;animation-delay:.15s}
.bubbles i:nth-child(5){left:78%;animation-delay:.45s}.bubbles i:nth-child(6){left:44%;animation-delay:.9s}
@keyframes bub{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-230px) scale(1.4)}}

/* ---------------- 10 face ---------------- */
.eyes i{position:absolute;top:44%;width:16px;height:16px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff 0,#46ff6e 40%,transparent 70%);transition:opacity .2s}
.eyes i:first-child{left:40%}.eyes i:last-child{left:55%}
.face.stare .eyes i{opacity:1;animation:blink 2.2s steps(2) infinite}
.face.stare img{animation:shake .3s linear 3}
@keyframes shake{25%{transform:translate(3px,-2px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,3px)}}

/* ---------------- 11 screens ---------------- */
.screens{min-height:200px}
.screens .scr{position:absolute;inset:0;opacity:0;transition:opacity .4s}
.screens .scr.on{opacity:1}
.cipher{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:rgba(0,0,0,.78);
  font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--lab-green);word-break:break-word}
.cipher.solved{color:#fff;font-size:13px;letter-spacing:.08em}
.cipher a{color:var(--lab-ice)}
.row-btns{display:flex;gap:8px;padding:8px 12px;border-top:1px solid #121b2a;flex-wrap:wrap}

/* ---------------- 12 guide ---------------- */
.guide{min-height:auto;background:#e9ecef;color:#1a1d22;padding:14px 16px;font-size:14px}
.guide ol{margin:0;padding-left:20px;display:grid;gap:6px}
.redact{background:var(--bone);color:transparent;border-radius:2px;padding:0 5px;cursor:help;
  transition:.3s;user-select:none}
.guide .redact{background:#111}
.redact:hover,.redact:focus,.redact.open{background:transparent;color:var(--yellow);outline:none}
.guide .redact:hover,.guide .redact:focus,.guide .redact.open{color:#c21d1d}

/* ---------------- 13 exit ---------------- */
.exit{min-height:200px}
.exit-sign{position:absolute;left:10px;top:10px;padding:5px 9px;border-radius:3px;background:#0b7a3b;
  color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 0 14px rgba(70,255,110,.5)}

/* ---------------- UV mode (the breaker) ---------------- */
.uv-msg{position:absolute;z-index:6;opacity:0;pointer-events:none;transition:opacity .6s;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:#c9a6ff;
  text-shadow:0 0 10px #9b7bff,0 0 22px #9b7bff}
.file-hero .uv-msg{position:static}
.file-body.uv .uv-msg{opacity:1;pointer-events:auto}
.uv-link{text-decoration:none}
/* overlays, never a filter on main: a filter makes main the containing block
   for every position:fixed child (boot screen, toast, breach banner) */
/* UV wash. It only exists while UV mode is on: an always-present full-screen
   blended layer (even at opacity 0) makes iOS Safari paint animated elements
   elsewhere on the page as solid black tiles. */
.file-body.uv::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(120,60,255,.16),rgba(40,0,90,.26));
  animation:uvIn .6s ease both}
@keyframes uvIn{from{opacity:0}}
.file-body.uv .st{border-color:#5b3fa8;box-shadow:0 0 22px rgba(155,123,255,.18)}
.file-body.blackout::before{content:"";position:fixed;inset:0;z-index:390;pointer-events:none;background:#000;
  opacity:0;animation:blackout 1.1s steps(1) forwards}
@keyframes blackout{0%{opacity:1}12%{opacity:0}20%{opacity:1}34%{opacity:.4}40%{opacity:1}100%{opacity:0}}
@keyframes spinDisk{to{transform:rotate(360deg)}}

/* ---------------- breach ---------------- */
.file-body.breach main{box-shadow:inset 0 0 0 100vmax rgba(255,20,40,.08)}
.file-body.breach main::before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,40,40,.35),transparent 60%);
  animation:alarm 1.2s ease-in-out infinite}
@keyframes alarm{50%{opacity:.25}}
.breach-banner{position:fixed;left:50%;bottom:18px;translate:-50% 0;z-index:300;display:flex;gap:12px;
  align-items:center;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 32px);
  padding:10px 16px;border-radius:8px;background:#1a0306;border:1px solid #ff2d3d;
  box-shadow:0 0 30px rgba(255,45,61,.5);font-family:var(--mono);font-size:12px;color:#ffd6da}
.breach-banner b{color:#ff2d3d;letter-spacing:.2em;text-transform:uppercase;animation:blink .8s steps(2) infinite}
.breach-banner a{color:#fff}

/* ---------------- dossier ---------------- */
.dossier{max-width:900px;margin:0 auto;padding:clamp(20px,4vw,44px);border-radius:6px;
  background:linear-gradient(180deg,#0d1522,#0a101a);border:1px solid #1d2a3f;position:relative}
.dos-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.dos-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lab-pink);margin:0 0 8px}
.stamp{display:inline-block;border:3px solid var(--red);color:var(--red);font-family:var(--disp);font-size:16px;
  letter-spacing:.1em;padding:5px 12px;transform:rotate(-4deg);text-transform:uppercase}
.dos-fig{float:right;width:min(42%,340px);margin:4px 0 16px 22px}
.dos-fig.right{float:left;margin:4px 22px 16px 0}
.dos-fig img{width:100%;height:auto;border-radius:4px;border:1px solid #1d2a3f}
.dos-fig figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);margin-top:6px}
.dossier .prose::after{content:"";display:block;clear:both}
.q{border-left:2px solid var(--cyan);padding:12px 16px;background:var(--deep);border-radius:0 6px 6px 0;margin:0}
.q p{margin:0 0 6px;font-style:italic}
.q cite{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-style:normal}

/* ---------------- toast, dialog, owl eyes ---------------- */
.toast{position:fixed;right:18px;top:92px;z-index:320;max-width:min(360px,calc(100% - 36px));
  padding:10px 14px;border-radius:6px;background:#04140a;border:1px solid var(--lab-green);
  font-family:var(--mono);font-size:12px;color:#c8ffd4;opacity:0;transform:translateY(-8px);
  transition:.3s;pointer-events:none;box-shadow:0 0 22px rgba(70,255,110,.25)}
.toast.on{opacity:1;transform:none}
.toast b{color:var(--lab-green)}
.dos-dialog{border:1px solid #1d2a3f;border-radius:10px;background:#0a101a;color:var(--bone);
  padding:0;width:min(560px,calc(100% - 32px))}
.dos-dialog::backdrop{background:rgba(0,0,0,.72)}
.dd-top{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #1d2a3f;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lab-ice)}
.dd-body{padding:16px}
.spec{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;align-items:start}
.spec img{width:100%;height:auto}
.spec dl{margin:0;display:grid;gap:2px}
.spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.spec dd{margin:0}
.owl-eyes{position:fixed;left:50%;top:14px;translate:-50% 0;z-index:330;display:flex;gap:18px;pointer-events:none}
.owl-eyes i{position:relative;width:46px;height:46px;border-radius:50%;background:#ffd400;
  box-shadow:0 0 20px rgba(255,212,0,.7)}
.owl-eyes i::after{content:"";position:absolute;left:calc(50% + var(--ex,0px));top:calc(50% + var(--ey,0px));
  width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#000}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .bench{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "pods pods" "cctv cctv" "danger beacon" "term term" "dna dna"
      "chem chem" "xray xray" "gauge face" "screens guide" "exit exit"}
}
@media (max-width:600px){
  .bench{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"pods" "cctv" "danger" "beacon" "term" "dna" "xray" "gauge" "chem" "face" "screens" "guide" "exit"}
  .pods{min-height:300px}
  .danger,.beacon,.gauge,.face,.exit,.screens{min-height:220px}
  .dos-fig,.dos-fig.right{float:none;width:100%;margin:6px 0 16px}
  .spec{grid-template-columns:96px minmax(0,1fr)}
  .toast{top:auto;bottom:80px;right:16px}
}
@media (prefers-reduced-motion:reduce){
  .file-body.blackout::before,.file-body.breach main::before,.sweep,.chem.boiling .bubbles i,
  .face.stare img,.clear-badge i{animation:none}
}

/* display:grid/flex on .boot, .breach-banner, .owl-eyes and .tags would otherwise
   beat the hidden attribute and leave them on screen */
.file-body [hidden]{display:none!important}
/* .ghost was only ever styled for links; give button.ghost the same skin */
.file-body button.ghost{background:transparent;color:var(--bone);cursor:pointer;font:inherit;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:6px;padding:12px 18px}
.file-body button.ghost:hover{border-color:var(--lab-green);color:var(--lab-green)}
.file-body button.ghost.small{padding:8px 13px;font-size:11px}

/* ---------------- header video ---------------- */
.file-hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(86vh,820px);
  min-height:min(86svh,820px);display:flex;align-items:flex-end;padding-top:clamp(90px,14vh,160px)}
.fh-content{position:relative;z-index:2;width:100%}
.fh-media{position:absolute;inset:0;z-index:0;container-type:size;pointer-events:none;background:#04070d}
.fh-media picture,.fh-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh-poster{animation:fhDrift 26s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes fhDrift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-2%,-1.5%)}}
/* cover-fit a 16:9 player at any aspect: whichever of width/height is bigger wins */
.fh-frame,.fh-video{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);opacity:0;transition:opacity 1.2s ease}
.fh-frame iframe{width:100%;height:100%;border:0;display:block}
.fh-video{object-fit:cover}
.fh-media.live .fh-frame,.fh-media.live .fh-video{opacity:1}
.fh-scan{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
.fh-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(3,5,11,.72) 0%,rgba(3,5,11,.45) 45%,rgba(3,5,11,0) 75%),
  linear-gradient(180deg,rgba(3,5,11,.5) 0%,rgba(3,5,11,.2) 35%,rgba(3,5,11,.8) 70%,#03050b 100%),
  radial-gradient(ellipse 80% 60% at 20% 90%,rgba(255,63,200,.18),transparent 70%)}
.file-hero .lead{color:#dbe6ef;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.file-hero .kick,.file-hero .clear-badge,.file-hero .anom{text-shadow:0 1px 8px rgba(0,0,0,.95)}
.file-hero .clear-badge,.file-hero .anom{background:rgba(3,5,11,.55)}
@media (max-width:600px){
  .file-hero{min-height:78svh;padding-top:120px}
}
@media (prefers-reduced-motion:reduce){ .fh-poster{animation:none} }
.fh-sound{position:absolute;right:var(--gut);bottom:clamp(16px,4vh,34px);z-index:3;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#e8fff0;
  background:rgba(3,8,6,.6);border:1px solid rgba(70,255,110,.5);border-radius:99px;padding:9px 14px;
  backdrop-filter:blur(4px)}
.fh-sound:hover{border-color:var(--lab-green);color:var(--lab-green)}
.fh-sound .off,.fh-sound[aria-pressed="true"] .on{display:none}
.fh-sound[aria-pressed="true"] .off{display:inline}
@media (max-width:600px){.fh-sound{top:auto;bottom:12px}}

/* ---------------- 09 compound 4D: lava vessel ---------------- */
.chem-lab{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:460px;
  background:radial-gradient(ellipse at 30% 60%,#170b24,#05070d 70%)}
.vessel{position:relative;margin:26px auto;width:min(86%,300px);align-self:stretch;min-height:400px;
  border-radius:120px 120px 70px 70px / 90px 90px 50px 50px;overflow:hidden;
  background:linear-gradient(180deg,#0b0616,#12071f 60%,#1a0a22);
  box-shadow:0 0 0 3px #2a2f38,0 0 0 9px #11151c,0 30px 60px rgba(0,0,0,.6),inset 0 0 40px rgba(0,0,0,.7)}
/* no CSS/SVG filter here: iOS WebKit paints SVG-filtered canvases as a black box at the page origin */
.lava{position:absolute;inset:0;width:100%;height:100%}
.glass{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 78%,rgba(255,255,255,.08) 92%,rgba(255,255,255,0));
  box-shadow:inset 0 0 30px rgba(0,0,0,.55)}
.formula{position:absolute;left:0;right:0;bottom:22px;z-index:4;text-align:center;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;color:#e9f7ff;text-shadow:0 1px 6px #000}
.chem-ui{display:grid;align-content:center;gap:12px;padding:18px 18px 18px 6px}
.chem-lead{margin:0;font-size:14px;color:var(--dim)}
.csl{display:grid;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lab-ice)}
.csl span{display:flex;align-items:center;justify-content:space-between;gap:8px}
.csl .sw{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.7);box-shadow:0 0 12px currentColor}
.csl b{color:var(--lab-orange);font-weight:400}
.csl input{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
.csl input::-webkit-slider-runnable-track{height:10px;border-radius:6px;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(90deg,#f33,#ff0,#3f3,#3ff,#33f,#f3f,#f33)}
.csl input::-moz-range-track{height:10px;border-radius:6px;background:linear-gradient(90deg,#f33,#ff0,#3f3,#3ff,#33f,#f3f,#f33)}
.csl.heat input::-webkit-slider-runnable-track{background:linear-gradient(90deg,#1d3b8a,#ff8a1c,#ff2d3d)}
.csl.heat input::-moz-range-track{background:linear-gradient(90deg,#1d3b8a,#ff8a1c,#ff2d3d)}
.csl input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;
  background:#fff;border:3px solid #0a0f18;box-shadow:0 0 0 2px rgba(255,255,255,.6),0 2px 8px rgba(0,0,0,.6)}
.csl input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #0a0f18}
.csl input:focus-visible{outline:2px solid var(--lab-green);outline-offset:3px}
.chem-ui .reveal{border:1px solid rgba(70,255,110,.35);border-radius:6px}
@media (max-width:600px){
  .chem-lab{grid-template-columns:1fr}
  .vessel{min-height:430px;width:min(62%,240px);margin:30px auto 24px}
  .chem-ui{padding:4px 16px 18px}
}

/* ---------------- tap on the glass: page malfunction ---------------- */
.face.stare img{animation:shake .12s linear infinite;filter:brightness(1.3) contrast(1.4)}
.face.stare .eyes i{width:22px;height:22px;box-shadow:0 0 18px #46ff6e}
/* shake the page content; transform only lasts the five seconds of the malfunction */
.file-body.malfunction main{transform:translate(var(--sx,0),var(--sy,0))}
.malf{position:fixed;inset:0;z-index:450;pointer-events:none;overflow:hidden}
.malf-glitch{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;mix-blend-mode:screen}
.malf.blank::before{content:"";position:absolute;inset:0;background:#000;z-index:2}
.malf-crack{position:absolute;inset:0;width:100%;height:100%}
.malf-crack path{fill:none;stroke:rgba(230,250,255,.85);stroke-width:1.6;stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(143,231,255,.9));stroke-dasharray:3000;stroke-dashoffset:3000;
  animation:crack .45s cubic-bezier(.2,.8,.2,1) forwards}
.malf-crack path.ring{stroke-width:1.2;stroke:rgba(230,250,255,.6);animation-duration:.3s}
@keyframes crack{to{stroke-dashoffset:0}}
.malf-warn{position:absolute;left:50%;top:42%;translate:-50% -50%;z-index:3;text-align:center;
  padding:16px 26px;border:2px solid #ff2d3d;background:rgba(20,0,4,.82);box-shadow:0 0 40px rgba(255,45,61,.6);
  font-family:var(--mono);color:#ffd6da;animation:warn .5s steps(2) infinite}
.malf-warn b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(30px,6vw,64px);letter-spacing:.06em;color:#ff2d3d}
.malf-warn span{font-size:11px;letter-spacing:.3em;text-transform:uppercase}
@keyframes warn{50%{opacity:.35}}
.malf.out{animation:malfOut .6s ease forwards}
@keyframes malfOut{to{opacity:0}}
.malf.calm .malf-warn{animation:none}
@media (prefers-reduced-motion:reduce){.face.stare img{animation:none}}

/* ---------------- boot: the skip path ---------------- */
.skipseq{text-align:center;padding:10px 0 20px}
.boot.skipping .boot-text,.boot.skipping .boot-actions,.boot.skipping .boot-tag{display:none}
.boot.skipping{background:radial-gradient(circle at 50% 45%,#2a0006,#000 70%);animation:skFlash .5s steps(2) 3}
@keyframes skFlash{50%{background:#3a000a}}
.sk-alarm{font-family:var(--disp);font-size:clamp(28px,6vw,60px);letter-spacing:.04em;color:#ff2d3d;margin:0 0 22px;
  text-transform:uppercase;text-shadow:0 0 24px rgba(255,45,61,.7);animation:blink .6s steps(2) infinite}
.sk-eye{position:relative;width:clamp(120px,24vw,180px);aspect-ratio:1;margin:0 auto 20px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle,#ffd400 0 22%,#ff8a1c 23% 48%,#1a0f05 49% 100%);box-shadow:0 0 0 3px #ff2d3d,0 0 40px rgba(255,45,61,.5)}
.sk-eye i{position:absolute;left:50%;top:50%;width:16%;height:16%;translate:-50% -50%;border-radius:50%;background:#000;
  transition:width .25s,height .25s}
.boot.scanned .sk-eye{box-shadow:0 0 0 3px #46ff6e,0 0 40px rgba(70,255,110,.6)}
.boot.scanned .sk-eye i{width:6%;height:34%;border-radius:40%}
.sk-scan{position:absolute;left:0;right:0;height:14%;background:linear-gradient(transparent,rgba(70,255,110,.8),transparent);
  animation:skScan 1s ease-in-out infinite alternate}
@keyframes skScan{from{top:-14%}to{top:100%}}
.sk-log{font-family:var(--mono);font-size:13px;line-height:1.7;color:#ffd6da;min-height:6.8em;margin:0 auto 14px;
  max-width:420px;text-align:left;white-space:pre-wrap}
.boot.scanned .sk-log{color:#c8ffd4}
.sk-bar{max-width:420px;height:6px;margin:0 auto;border-radius:3px;background:#2a0a0e;overflow:hidden}
.sk-bar i{display:block;height:100%;width:0;background:#ff2d3d;transition:width .3s linear}
.boot.scanned .sk-bar i{background:#46ff6e}
@media (prefers-reduced-motion:reduce){.boot.skipping,.sk-alarm,.sk-scan{animation:none}}