/* Pixel Exhibit — exhibits framed in a living LED field.
   Rooms stack vertically, exhibits run horizontally (fullPage-style). The
   pixelexhibit frame (header, footer, bezel) stays put so navigation is never
   lost; the exhibit fills the frame live. Same LED/glitch language as the
   Sites parking pages. Zero dependencies. */
:root{
  --px-bg:#0c0c0c;--px-ink:#e8eaf0;--px-muted:#7b8096;--px-line:#2a2d3e;
  --px-a:#00c9a7;--px-b:#50e6ff;--px-hot:#ff3d81;
  --px-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;
  --px-mono:"SF Mono","Cascadia Code",ui-monospace,Menlo,monospace;
  --px-top:52px;--px-bot:64px;--px-side:14px;
  --px-dur:900ms;--px-ease:cubic-bezier(.7,0,.2,1)
}
html.museum-on,html.museum-on body{height:100%;overflow:hidden;background:var(--px-bg)}
html.museum-on header.site,html.museum-on section.wrap,html.museum-on body>footer:not(.px-bar){display:none}
#museum{position:fixed;inset:0;display:none;overflow:hidden;background:var(--px-bg);font-family:var(--px-sans)}
html.museum-on #museum{display:block}
#px-sky{position:absolute;inset:0;width:100%;height:100%;display:block}
#px-track{position:absolute;left:0;top:0;transition:transform var(--px-dur) var(--px-ease);will-change:transform}
.px-section{position:absolute;left:0;height:100vh;height:100dvh}
.px-slide{position:absolute;top:0;width:100vw;height:100vh;height:100dvh;display:grid;place-items:center;transition:opacity .45s ease}
.px-slide:not(.is-here){opacity:0}

/* The bezel: the exhibit fills it; the LED field shows around it. */
.px-exhibit .stage{position:absolute;top:var(--px-top);bottom:var(--px-bot);left:var(--px-side);right:var(--px-side);
  background:#07080b;border:1px solid rgba(0,201,167,.28);box-shadow:0 0 0 1px #000,0 0 40px rgba(0,201,167,.08);
  transition:top .35s ease,bottom .35s ease,left .35s ease,right .35s ease,border-color .3s}
.px-exhibit .stage::before,.px-exhibit .stage::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;z-index:2;
  border:2px solid var(--accent,var(--px-a))}
.px-exhibit .stage::before{left:-3px;top:-3px;border-right:0;border-bottom:0}
.px-exhibit .stage::after{right:-3px;bottom:-3px;border-left:0;border-top:0}
.px-slide iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#07080b;display:block}
.px-slide .poster{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;text-align:center}
.px-slide .poster span{font:700 clamp(26px,5vw,60px)/1 var(--px-sans);letter-spacing:-.02em;color:var(--px-ink)}
.px-slide .poster i{display:block;margin-top:14px;font:600 11px/1 var(--px-mono);letter-spacing:.3em;color:var(--accent,var(--px-a));
  text-transform:uppercase;font-style:normal;animation:px-blink 1s steps(2) infinite}
@keyframes px-blink{50%{opacity:.25}}

/* Landing + room cards: clean type over the field */
.px-intro,.px-card{text-align:center;color:var(--px-ink);padding:0 20px}
.px-intro h1{margin:0;font:800 clamp(44px,10vw,128px)/.9 var(--px-sans);letter-spacing:-.045em}
.px-intro h1 b{color:var(--px-a);font-weight:800}
.px-intro p{margin:20px auto 0;max-width:44ch;color:var(--px-muted);font:clamp(15px,1.6vw,18px)/1.5 var(--px-sans)}
.px-intro nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.px-intro nav a,.px-card a.go{display:inline-block;color:var(--px-ink);text-decoration:none;border:1px solid var(--px-line);padding:13px 18px;
  font:600 12px/1 var(--px-mono);letter-spacing:.18em;text-transform:uppercase;background:rgba(12,12,12,.72)}
.px-intro nav a:hover,.px-intro nav a:focus-visible,.px-card a.go:hover,.px-card a.go:focus-visible{border-color:var(--px-a);color:var(--px-a);outline:none}
.px-intro nav a small{color:var(--px-muted);margin-left:8px;letter-spacing:.05em}
.px-intro .hint{margin-top:24px;color:var(--px-muted);font:11px/1.6 var(--px-mono);letter-spacing:.2em;text-transform:uppercase}
.px-card .eyebrow{color:var(--px-a);font:600 11px/1 var(--px-mono);letter-spacing:.32em;text-transform:uppercase}
.px-card h2{margin:14px 0 0;font:800 clamp(38px,8vw,100px)/.95 var(--px-sans);letter-spacing:-.04em}
.px-card p{margin:16px auto 22px;max-width:44ch;color:var(--px-muted);font:16px/1.5 var(--px-sans)}

/* Not built yet */
.px-soon{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--px-ink);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px)}
.px-soon b{display:block;font:800 clamp(26px,5vw,56px)/1 var(--px-sans);letter-spacing:-.03em}
.px-soon span{display:block;margin-top:12px;color:var(--px-hot);font:600 11px/1 var(--px-mono);letter-spacing:.3em;text-transform:uppercase}

/* Frame bars — always there, so you never lose your way */
.px-bar{position:fixed;left:0;right:0;z-index:7;display:flex;align-items:center;gap:10px;padding:0 var(--px-side);
  color:var(--px-ink);font-family:var(--px-sans);pointer-events:none;transition:opacity .3s;border:0;margin:0}
.px-bar>*{pointer-events:auto}
.px-head{top:0;height:var(--px-top)}
.px-foot{bottom:0;height:var(--px-bot);padding-bottom:env(safe-area-inset-bottom)}
.px-mark{color:var(--px-ink);text-decoration:none;font:800 17px/1 var(--px-sans);letter-spacing:-.03em;white-space:nowrap}
.px-mark b{color:var(--px-a);font-weight:800}
.px-rooms{display:flex;gap:4px;margin:0 auto;overflow-x:auto;scrollbar-width:none}
.px-rooms a{color:var(--px-muted);text-decoration:none;padding:8px 10px;font:600 11px/1 var(--px-mono);letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;border-bottom:2px solid transparent}
.px-rooms a.on{color:var(--px-ink);border-bottom-color:var(--px-a)}
.px-rooms a:hover{color:var(--px-ink)}
.px-act{display:flex;gap:6px}
.px-btn{appearance:none;border:1px solid var(--px-line);background:rgba(12,12,12,.78);color:var(--px-ink);cursor:pointer;
  min-width:40px;height:36px;padding:0 11px;display:inline-grid;place-items:center;text-decoration:none;
  font:600 11px/1 var(--px-mono);letter-spacing:.12em;text-transform:uppercase}
.px-btn:hover,.px-btn:focus-visible{border-color:var(--px-a);color:var(--px-a);outline:none}
.px-btn[disabled]{opacity:.3;pointer-events:none}
.px-foot .px-prev,.px-foot .px-next{width:52px;height:44px;font-size:18px;letter-spacing:0}
.px-now{flex:1;min-width:0;appearance:none;border:0;background:none;color:inherit;cursor:pointer;text-align:center;padding:4px 8px;font:inherit}
.px-now .l1{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-now .t{font:700 15px/1.2 var(--px-sans);letter-spacing:-.01em}
.px-now .s{display:block;margin-top:3px;color:var(--px-muted);font:12px/1.3 var(--px-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-now .n{color:var(--px-a);font:600 11px/1 var(--px-mono);letter-spacing:.14em;margin-right:8px}
.px-now:hover .t,.px-now:focus-visible .t{color:var(--px-a)}
.px-now:focus-visible{outline:1px solid var(--px-a)}

/* Index sheet — every piece, one tap away (the mobile way around) */
.px-sheet{position:fixed;inset:0;z-index:9;display:grid;align-items:end;background:rgba(0,0,0,.55)}
.px-sheet[hidden]{display:none}
.px-sheet .box{max-height:78vh;overflow:auto;background:#0e0f13;border-top:2px solid var(--px-a);padding:14px var(--px-side) calc(18px + env(safe-area-inset-bottom))}
@media (min-width:721px){.px-sheet{align-items:center;justify-items:center}.px-sheet .box{width:min(560px,92vw);border:1px solid var(--px-line);border-top:2px solid var(--px-a)}}
.px-sheet .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.px-sheet .hd b{font:600 11px/1 var(--px-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--px-muted)}
.px-sheet h3{margin:16px 0 6px;font:600 11px/1 var(--px-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--px-a)}
.px-sheet a{display:flex;gap:12px;align-items:baseline;padding:11px 8px;color:var(--px-ink);text-decoration:none;border-bottom:1px solid #181a22}
.px-sheet a:hover,.px-sheet a:focus-visible,.px-sheet a.on{background:#151821;outline:none}
.px-sheet a.on{box-shadow:inset 2px 0 0 var(--px-a)}
.px-sheet a span{font:600 15px/1.2 var(--px-sans)}
.px-sheet a em{font:12px/1.3 var(--px-sans);color:var(--px-muted);font-style:normal;margin-left:auto;text-align:right}
.px-sheet a i{font:600 11px/1 var(--px-mono);color:var(--px-muted);font-style:normal;width:22px;flex:none}

/* Immersive: the exhibit takes the whole screen; a small pill keeps the way back */
html.px-immersive .px-bar{opacity:0;pointer-events:none}
html.px-immersive .px-bar *{pointer-events:none}
html.px-immersive .px-exhibit .stage{top:0;bottom:0;left:0;right:0;border-color:transparent}
.px-pill{position:fixed;z-index:8;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:none;gap:4px;padding:4px;
  background:rgba(12,12,12,.7);border:1px solid var(--px-line);transition:opacity .4s}
html.px-immersive .px-pill{display:flex}
html.px-immersive.px-idle .px-pill{opacity:.3}

html:not(.museum-on) .px-bar,html:not(.museum-on) .px-sheet,html:not(.museum-on) .px-pill{display:none}

@media (max-width:720px){
  :root{--px-top:48px;--px-bot:68px;--px-side:8px}
  .px-mark{font-size:15px}
  .px-rooms a{padding:8px 7px;letter-spacing:.1em}
  .px-now .s{display:none}
  .px-now .n{display:block;margin:0 0 5px}
  .px-now .l1{white-space:normal}
  .px-now .t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (prefers-reduced-motion:reduce){#px-track,.px-slide,.px-exhibit .stage{transition:none}.px-slide .poster i{animation:none}}

/* Info: what this is, the list, the way home */
.px-info h2{text-transform:none;margin:10px 0 12px;font:800 32px/1 var(--px-sans);letter-spacing:-.04em;color:var(--px-ink)}
.px-info h2 b{color:var(--px-a);font-weight:800}
.px-info p{margin:0 0 12px;color:var(--px-muted);font:15px/1.55 var(--px-sans)}
.px-info p strong,.px-info p em{color:var(--px-ink);font-weight:600}
.px-join{margin:18px 0 6px;padding:14px;border:1px solid var(--px-line);background:#0b0c10}
.px-join label{display:block;margin-bottom:10px;font:600 11px/1 var(--px-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--px-a)}
.px-join .row{display:flex;gap:8px}
.px-join input{flex:1;min-width:0;height:40px;padding:0 12px;background:transparent;border:1px solid var(--px-line);color:var(--px-ink);font:15px/1 var(--px-sans)}
.px-join input:focus{border-color:var(--px-a);outline:none}
.px-join .px-btn{height:40px;background:var(--px-a);border-color:var(--px-a);color:#04130f}
.px-join .px-btn:hover{background:#19e0bd;color:#04130f}
.px-join .msg{margin:10px 0 0;font:13px/1.4 var(--px-sans)}
.px-join .msg[data-tone=ok]{color:var(--px-a)}.px-join .msg[data-tone=err]{color:var(--px-hot)}
.px-join .msg a{color:inherit}
.px-out{display:inline-block;margin-top:12px;color:var(--px-ink);text-decoration:none;font:600 12px/1 var(--px-mono);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--px-a);padding-bottom:4px}
.px-out:hover{color:var(--px-a)}

/* Info: roomier rhythm */
.px-info .box{padding:26px 32px 30px;width:min(580px,92vw)}
.px-info .hd{margin-bottom:22px}
.px-info h2{margin:0 0 20px}
.px-info p{margin:0 0 16px;line-height:1.65}
.px-info p:first-of-type{color:var(--px-ink);font-size:17px}
.px-join{margin:26px 0 24px;padding:18px 18px 20px}
.px-join label{margin-bottom:14px}
.px-join .row{gap:10px}
/* the index sheet's row-link style must not reach the Info link */
.px-sheet a.px-out{display:inline-block;padding:0 0 5px;margin:0;background:none;border-bottom:1px solid var(--px-a);box-shadow:none}
.px-sheet a.px-out:hover{background:none;color:var(--px-a)}
@media (max-width:720px){.px-info .box{padding:20px 20px 24px}.px-join .row{flex-direction:column}.px-join .px-btn{width:100%}}