/* Site shell, 2026-10-22 redesign after claudia.gallery: one near-black canvas, one clay accent, mono caps labels,
   split-flap titles, numbered sections with condensed display heads, hairline grids. Loaded after styles.css and
   module-c.css; the live/studio components keep their IDs and states, only their frame changes here. */
:root {
  --bg: #070c13; --bg2: #0d141e; --bg3: #131c28; --bg4: #1a2532;
  --hair: rgba(236,233,226,.12); --hair2: rgba(236,233,226,.26);
  --ink1: #ece9e2; --ink2: #a6b1be; --ink3: #6b7888;
  --pad: clamp(16px,4vw,52px); --max: 1720px; --hh: 56px;
  color-scheme: dark;
}
html { background: var(--bg); scroll-padding-top: calc(var(--hh) + 24px); -webkit-font-smoothing: antialiased; }
body.site { background: var(--bg); color: var(--ink1); font: 400 16px/1.58 var(--font-sans); overflow-x: hidden; }
body.site ::selection { background: var(--accent); color: var(--bg); }
.site a { color: inherit; text-decoration-color: var(--hair2); text-underline-offset: .18em; }
.site a:hover { text-decoration-color: var(--accent); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #000; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* label system */
.lab { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink3); }
.lab b { color: var(--ink2); font-weight: 500; }
.dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); vertical-align: 1px; margin-right: 8px; }

/* header: transparent over the hero, solid once scrolled */
.site-h { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--hh); display: flex; align-items: center; gap: 24px; padding: 0 var(--pad);
  background: linear-gradient(rgba(7,12,19,.78), rgba(7,12,19,0)); border-bottom: 1px solid transparent; transition: background .35s, border-color .35s; }
.site-h.solid, .site-h.always { background: rgba(7,12,19,.86); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); border-bottom-color: var(--hair); }
.site-h .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font: 700 14px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--ink1); }
.site-h .brand .streak { width: 3px; height: 16px; background: var(--accent); display: block; }
.site-h .brand small { font: 500 10px var(--font-mono); letter-spacing: .14em; color: var(--ink3); text-transform: none; }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px,1.8vw,28px); font: 500 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.nav a { text-decoration: none; color: var(--ink2); padding: 8px 0; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--ink1); }
.nav a[aria-current]::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--accent); margin-right: 7px; vertical-align: 1px; }
.site-h .topbar-right { gap: 14px; }
.site-h .connection-pill { height: 30px; }
.menu-b { display: none; margin-left: auto; font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; padding: 10px 0; color: var(--ink1); background: none; border: 0; }
.site-h .topbar-right { margin-left: 0; }
@media (max-width: 1240px) {
  .menu-b { display: block; }
  .nav { position: fixed; inset: var(--hh) 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: rgba(7,12,19,.97); border-bottom: 1px solid var(--hair);
    padding: 8px var(--pad) 18px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .2s; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 12px; }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .site-h .topbar-date { display: none; }
}
@media (max-width: 540px) { .site-h { gap: 12px; } .site-h .brand small { display: none; } .site-h .connection-pill { font-size: 9px; padding: 5px 7px; } }

/* split-flap */
.flaps { display: flex; flex-wrap: wrap; gap: var(--fg,6px); --fw: clamp(34px,6.2vw,100px); --fs: calc(var(--fw)*.86); margin: 0; }
.flap { position: relative; width: var(--fw); height: calc(var(--fw)*1.36); display: grid; place-items: center; background: linear-gradient(#141d29 0 50%, #0f1620 50% 100%);
  border-radius: calc(var(--fw)*.05); font: 700 var(--fs)/1 var(--font-sans); color: var(--ink1); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.7); overflow: hidden; text-transform: uppercase; }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: rgba(0,0,0,.85); }
.flap::before { content: ""; position: absolute; left: 3px; right: 3px; top: calc(50% - 2px); height: 4px;
  background: radial-gradient(circle at 0 50%, #28323f 1.5px, transparent 2px), radial-gradient(circle at 100% 50%, #28323f 1.5px, transparent 2px); }
.flap.sp { background: transparent; box-shadow: none; }
.flap.sp::after, .flap.sp::before { display: none; }
.flap.hot { color: var(--accent); }
.flap.tick { animation: flick .07s steps(1); }
@keyframes flick { 50% { color: var(--ink2); } }
.flaps.sm { --fw: clamp(20px,2.3vw,34px); --fg: 3px; }
.flaps.xs { --fw: clamp(15px,1.6vw,22px); --fg: 2px; }
.flaps + .flaps { margin-top: var(--fg,6px); }

/* hero: stills with machine-vision boxes */
.hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: #000; }
.hero.short { height: min(86svh, 900px); }
.hero .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.hero .slide.on { opacity: 1; }
.hero .slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); transition: transform 10s cubic-bezier(.2,.6,.3,1); }
.hero .slide.on img { transform: scale(1); }
.hero .shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,12,19,.5) 0, rgba(7,12,19,0) 22%, rgba(7,12,19,0) 46%, rgba(7,12,19,.86) 86%, var(--bg) 100%); }
.cvbox { position: absolute; border: 1px solid rgba(255,255,255,.82); pointer-events: none; opacity: 0; transition: opacity .6s .9s; }
.slide.on .cvbox { opacity: 1; }
.cvbox span { position: absolute; left: -1px; bottom: 100%; margin-bottom: 4px; white-space: nowrap; font: 500 10px/1 var(--font-mono); letter-spacing: .06em; background: rgba(7,12,19,.66); color: #fff; padding: 3px 5px; }
.cvbox span b { color: var(--accent2); font-weight: 500; }
.cvbox::before, .cvbox::after { content: ""; position: absolute; width: 9px; height: 9px; border: 2px solid var(--accent); }
.cvbox::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; }
.cvbox::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
.hero-copy { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: clamp(28px,7vh,80px); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 28px; }
.hero-copy h1 { margin: 0; font: inherit; }
.hero-copy .lede { max-width: 34em; margin: 22px 0; font-size: clamp(16px,1.35vw,19px); color: var(--ink1); text-wrap: pretty; }
.hero-copy .lede em, .big-p em { font-style: normal; color: var(--accent2); }
.readout { text-align: right; display: grid; gap: 5px; justify-items: end; }
.readout .lab { color: var(--ink2); }
.readout .pips { display: flex; gap: 6px; margin-top: 8px; }
.readout .pips button { width: 26px; height: 3px; padding: 0; border: 0; background: rgba(236,233,226,.25); }
.readout .pips button.on { background: var(--accent); }
@media (max-width: 760px) { .hero-copy { grid-template-columns: 1fr; } .readout { justify-items: start; text-align: left; } .hero .cvbox span { font-size: 9px; } }
/* candidate b: the reel plays over its poster; the poster stays until the first frame is decoded */
.hero .slide.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero .slide.reel.playing video { opacity: 1; }
.hero .slide.reel img, .hero .slide.reel.on img { transform: none; transition: none; }
.readout .reel-toggle { margin-top: 10px; padding: 6px 10px; font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink2); background: rgba(7,12,19,.45); border: 1px solid var(--hair2); border-radius: 0; cursor: pointer; }
.readout .reel-toggle:hover, .readout .reel-toggle:focus-visible { color: var(--ink1); border-color: var(--ink1); }

/* buttons */
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border: 1px solid var(--hair2); text-decoration: none; font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; background: rgba(7,12,19,.35); color: var(--ink1); transition: .2s; white-space: nowrap; border-radius: 0; cursor: pointer; }
.btn:hover { border-color: var(--ink1); background: rgba(236,233,226,.06); }
.btn.solid { background: var(--ink1); color: var(--bg); border-color: var(--ink1); }
.btn.solid:hover { background: #fff; }
.btn.clay { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.clay:hover { background: var(--accent2); border-color: var(--accent2); }
.copy { font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; padding: 7px 10px; border: 1px solid var(--hair2); color: var(--ink2); background: none; transition: .15s; white-space: nowrap; cursor: pointer; }
.copy:hover { color: var(--ink1); border-color: var(--ink1); }
.copy.ok { color: var(--bg); background: var(--accent); border-color: var(--accent); }

/* strip under the hero */
.cm { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.cm-row { display: grid; grid-template-columns: 210px minmax(0,1fr) auto; gap: 10px 28px; align-items: baseline; padding: 20px 0; font-size: 13.5px; line-height: 1.55; color: var(--ink3); }
.cm-row + .cm-row { border-top: 1px solid var(--hair); }
.cm-row p { margin: 0; }
.cm-row b { color: var(--accent); font-weight: 700; }
.cm-k { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
.cm-k::before { content: ""; display: inline-block; width: 3px; height: 12px; background: var(--accent); margin-right: 10px; vertical-align: -1px; }
@media (max-width: 860px) { .cm-row { grid-template-columns: minmax(0,1fr); gap: 8px; } }

/* sections */
.sec { max-width: var(--max); margin: 0 auto; padding: clamp(72px,11vh,140px) var(--pad) 0; }
.sec-h { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 18px; border-top: 1px solid var(--hair); padding-top: 14px; margin-bottom: clamp(28px,4vw,52px); }
.sec-h .idx { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; color: var(--accent); align-self: start; padding-top: 6px; }
.sec-h h2 { margin: 0; font: 900 clamp(40px,6.6vw,104px)/.86 var(--font-display); text-transform: uppercase; letter-spacing: -.004em; color: var(--ink1); }
.sec-h .aside { align-self: start; padding-top: 4px; max-width: 30em; text-align: right; margin: 0; }
@media (max-width: 760px) { .sec-h { grid-template-columns: auto 1fr; } .sec-h .aside { grid-column: 1/-1; text-align: left; } .sec-h h2 { font-size: 44px; } }
.big-p { font-size: clamp(19px,1.9vw,27px); line-height: 1.38; max-width: 33em; text-wrap: pretty; margin: 0; }
.more { display: inline-flex; gap: 10px; margin-top: 22px; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink1);
  border-bottom: 1px solid var(--accent); padding-bottom: 5px; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.more:hover { color: var(--accent2); }
.split { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(24px,4vw,72px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* spec / kv lists */
.spec { margin: 30px 0 0; border-top: 1px solid var(--hair); }
.spec > div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.spec dt { font: 500 10.5px/1.6 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink3); }
.spec dt i { font-style: normal; color: var(--accent); margin-right: 9px; }
.spec dd { margin: 0; color: var(--ink1); font-size: 15.5px; }
@media (max-width: 560px) { .spec > div { grid-template-columns: 1fr; gap: 4px; } }
.kv { display: grid; border-top: 1px solid var(--hair); }
.kv > a, .kv > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); text-decoration: none; font-size: 15px; }
.kv .lab { padding-top: 3px; }
.kv > a:hover span:last-child { color: var(--accent2); }

/* guide / tier cards */
.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.guide { background: var(--bg); padding: 26px 26px 28px; min-height: 230px; display: flex; flex-direction: column; text-decoration: none; transition: background .2s;
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); color: var(--ink1); }
a.guide:hover, button.guide:hover { background: var(--bg2); }
button.guide { font: inherit; text-align: left; cursor: pointer; border-top: 0; border-left: 0; }
.guide .n { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; color: var(--accent); }
.guide h3 { font: 900 clamp(34px,3.2vw,46px)/.9 var(--font-display); text-transform: uppercase; margin: 44px 0 12px; }
.guide p { color: var(--ink2); font-size: 14.5px; margin: 0; line-height: 1.5; }
.guide .go { margin-top: auto; padding-top: 18px; font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.guide:hover .go { color: var(--accent2); }
.guide .dash { display: flex; gap: 4px; margin-top: 14px; }
.guide .dash i { width: 14px; height: 3px; background: rgba(236,233,226,.2); }
.guide .dash i.on { background: var(--clay); }
.guides.tiers { grid-template-columns: repeat(auto-fit, minmax(168px,1fr)); }
.tiers .guide { min-height: 200px; padding: 22px 20px 24px; }
.tiers .guide h3 { margin-top: 34px; font-size: clamp(30px,2.5vw,38px); }

/* figures with detection-frame corners */
.frame { position: relative; }
.frame::before, .frame::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--ink1); opacity: .7; pointer-events: none; z-index: 4; }
.frame::before { left: -6px; top: -6px; border-right: 0; border-bottom: 0; }
.frame::after { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
.fig img { width: 100%; height: auto; display: block; background: var(--bg3); aspect-ratio: 16/9; object-fit: cover; }
.fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink3); }
.fig figcaption .lab { display: block; margin-bottom: 3px; }

/* the listing board: split-flap rows */
.board { border-top: 1px solid var(--hair); }
.board-row { display: grid; grid-template-columns: auto 44px minmax(0,1.1fr) minmax(0,1.4fr) auto auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.board-row .logo { width: 40px; height: 40px; display: grid; place-items: center; background: var(--bg3); color: var(--ink3); overflow: hidden; font-size: 16px; }
.board-row .logo img { width: 100%; height: 100%; object-fit: cover; }
.board-row .sym { font: 900 clamp(26px,2.4vw,38px)/.9 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.board-row .sym small { display: block; margin-top: 6px; }
.board-row .ca { display: flex; gap: 10px; align-items: center; min-width: 0; }
.board-row .ca code { font: 400 12px var(--font-mono); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.board-row .votes { font: 600 15px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.board-row .votes small { display: block; font: 500 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-top: 4px; }
.board-row:first-child .sym { color: var(--accent2); }
.board-empty { padding: 28px 0; color: var(--ink3); border-bottom: 1px solid var(--hair); margin: 0; }
@media (max-width: 860px) {
  .board-row { grid-template-columns: auto 36px minmax(0,1fr) auto; gap: 12px; }
  .board-row .ca { grid-column: 3/-1; }
  .board-row .vote { display: none; }
  .board-row .logo { width: 34px; height: 34px; }
}

/* room hero (inner pages) */
.room-h { position: relative; min-height: 78svh; display: flex; align-items: flex-end; overflow: hidden; background: #000; padding-top: calc(var(--hh) + 24px); }
.room-h > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-h .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,12,19,.55) 0, rgba(7,12,19,.05) 30%, rgba(7,12,19,.25) 55%, rgba(7,12,19,.94) 92%, var(--bg) 100%); }
.room-h .in { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(36px,7vh,72px); }
.room-h h1 { margin: 0; font: 900 clamp(56px,8vw,128px)/.82 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; }
.room-h h1 small { display: block; font: 500 clamp(11px,1vw,13px)/1 var(--font-mono); letter-spacing: .2em; color: var(--accent); margin-top: 14px; }
.room-h .lede { max-width: 40em; margin: 22px 0 24px; font-size: clamp(16px,1.3vw,19px); color: var(--ink1); text-wrap: pretty; }
.room-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 26px 0 0; }
.room-facts div { display: grid; gap: 4px; }
.room-facts dt { font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.room-facts dd { margin: 0; font: 500 12.5px/1.3 var(--font-mono); color: var(--ink2); }

/* doc pages */
.doc-h { max-width: var(--max); margin: 0 auto; padding: calc(var(--hh) + clamp(48px,9vh,110px)) var(--pad) 0; }
.doc-h h1 { margin: 0; font: 900 clamp(48px,8vw,124px)/.86 var(--font-display); text-transform: uppercase; letter-spacing: -.006em; max-width: 12ch; }
.doc-h .dek { font-size: clamp(17px,1.6vw,22px); line-height: 1.45; color: var(--ink2); max-width: 36em; margin: 26px 0 0; }
.doc-h .crumbs { margin-bottom: 22px; }
.doc-h .crumbs a { text-decoration: none; color: var(--ink3); }
.doc-body { max-width: var(--max); margin: 0 auto; padding: clamp(40px,6vw,72px) var(--pad) 0; display: grid; grid-template-columns: 220px minmax(0,760px); gap: clamp(28px,5vw,96px); }
.toc { position: sticky; top: calc(var(--hh) + 28px); align-self: start; font-size: 13px; border-top: 1px solid var(--hair); padding-top: 12px; }
.toc .lab { display: block; margin-bottom: 10px; }
.toc a { display: block; text-decoration: none; color: var(--ink3); padding: 4px 0; line-height: 1.35; }
.toc a:hover, .toc a.on { color: var(--ink1); }
.toc a.on::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--accent); margin-right: 7px; vertical-align: 1px; }
@media (max-width: 980px) { .doc-body { grid-template-columns: 1fr; } .toc { display: none; } }
.prose { font-size: 17px; line-height: 1.66; color: #d9d6cf; min-width: 0; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font: 700 clamp(25px,2.4vw,32px)/1.15 var(--font-sans); color: var(--ink1); margin: 2.3em 0 .7em; padding-top: 16px; border-top: 1px solid var(--hair); }
.prose p, .prose ul, .prose ol { margin: 0 0 1.05em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--ink3); }
.prose strong { color: var(--ink1); }
.prose a { color: var(--ink1); text-decoration-color: var(--accent); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--accent); color: var(--ink1); font-size: 18px; }
.prose code { font: 400 .86em var(--font-mono); background: var(--bg3); padding: .12em .36em; border-radius: 2px; color: #e7e3da; }
.never { padding: 0; margin: 1.2em 0; list-style: none; border-top: 1px solid var(--hair); }
.never li { padding: 12px 0 12px 26px; margin: 0; border-bottom: 1px solid var(--hair); position: relative; color: var(--ink2); }
.never li::before { content: "×"; position: absolute; left: 0; top: 10px; color: var(--accent); font: 500 15px var(--font-mono); }

/* footer */
.site-f { margin-top: clamp(96px,14vh,180px); border-top: 1px solid var(--hair); }
.safe { margin: 0; padding: clamp(80px,14vh,160px) var(--pad); text-align: center; font: 700 clamp(17px,2.2vw,30px)/1.3 var(--font-sans); color: var(--accent); }
.f-cols { max-width: var(--max); margin: 0 auto; padding: 28px var(--pad) 40px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; font-size: 13.5px; color: var(--ink3); }
.f-cols h4 { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin: 0 0 10px; }
.f-cols a { display: block; text-decoration: none; color: var(--ink3); padding: 3px 0; }
.f-cols a:hover { color: var(--ink1); }
.f-cols p { margin: 0 0 8px; max-width: 30em; }
@media (max-width: 860px) { .f-cols { grid-template-columns: 1fr 1fr; } }

/* the live/studio workspace inside the shell */
.site .app-shell { max-width: none; padding: 0; }
.site .workspace { grid-template-columns: minmax(0,1fr) 400px; gap: 0; border: 1px solid var(--hair); }
.site .stage-panel, .site .chat-panel { background: var(--bg); border: 0; border-radius: 0; }
.site .chat-panel { border-left: 1px solid var(--hair); }
.site .video-stage { margin: 0 20px; border: 0; background: #000; }
.site .video-stage::before, .site .video-stage::after { content: ""; position: absolute; z-index: 4; width: 14px; height: 14px; border: 1px solid var(--ink1); opacity: .7; pointer-events: none; }
.site .video-stage::before { left: 8px; top: 8px; border-right: 0; border-bottom: 0; }
.site .video-stage::after { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }
.site .stage-overlay { background: radial-gradient(ellipse at 50% 35%, #12203a, transparent 70%), #060a10f0; }
.site .stage-overlay::before { inset: 26% 33%; border-color: rgba(255,255,255,.5); }
.site .stage-overlay h2 { font-size: clamp(30px,3.4vw,56px); line-height: .9; }
.site .telemetry-grid { border-top: 1px solid var(--hair); }
.site .diagnostics { margin-top: 0; border: 1px solid var(--hair); border-top: 0; background: var(--bg); border-radius: 0; }
.site .mc-entry { border-radius: 0; }
/* candidate b: the paid entry is a strip under the video controls instead of a box over the chat. The heading (title,
   #mc-open, and #mc-ranking-open appended by module-c-rankings.js) is flattened so the buttons sit on the right. */
.site .mc-entry.strip { margin: 0 20px 18px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 4px 10px; border: 1px solid var(--hair); border-left: 3px solid var(--clay); background: var(--bg2); }
.site .mc-entry.strip .mc-entry-heading { display: contents; }
.site .mc-entry.strip .mc-entry-title { grid-column: 1; grid-row: 1; margin: 0; color: var(--ink1); }
.site .mc-entry.strip > p { grid-column: 1; margin: 0; }
.site .mc-entry.strip button { grid-row: 1 / span 3; padding: 11px 14px; }
@media (max-width: 760px) {
  .site .mc-entry.strip { grid-template-columns: 1fr 1fr; margin: 0 12px 14px; }
  .site .mc-entry.strip .mc-entry-title, .site .mc-entry.strip > p { grid-column: 1 / -1; }
  .site .mc-entry.strip button { grid-row: 4; }
}
.site .page-heading, .site .topbar, .site .page-footer { display: none; }
@media (max-width: 1100px) { .site .workspace { grid-template-columns: minmax(0,1fr) 330px; } }
@media (max-width: 850px) { .site .workspace { grid-template-columns: 1fr; } .site .chat-panel { border-left: 0; border-top: 1px solid var(--hair); } }
@media (max-width: 540px) { .site .video-stage { margin: 0 8px; } .site .workspace { border-left: 0; border-right: 0; margin: 0 calc(var(--pad) * -1); } }

@media (prefers-reduced-motion: reduce) { .hero .slide img, .hero .slide.on img { transform: none; transition: none; } }