/* Studio Stage ident — stage styles. The stage is authored at 1920×1080 and scaled to its box. */
.ssi-box{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.ssi-box.v{aspect-ratio:9/16}
.ssi{--bone:#eceae3;--paper:#f4f3ef;--ink:#111110;--yellow:#ffc400;--red:#d8482e;--red-d:#ff5234;
  /* theme tokens — dark stage by default, .t-light = bone stage (mirrors the site's light/dark toggle) */
  --bg:#000;--fg:var(--paper);--acc:var(--yellow);--line:rgba(244,243,239,.26);
  position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:var(--bg);
  font-family:"Archivo",sans-serif;-webkit-font-smoothing:antialiased;color:var(--fg);contain:strict}
.ssi.t-light{--bg:var(--bone);--fg:var(--ink);--acc:var(--red);--line:rgba(17,17,16,.2)}
.ssi *{box-sizing:border-box;margin:0;padding:0}
.ssi .cam{position:absolute;inset:0}
.ssi .sc{position:absolute;inset:0;overflow:hidden;display:none}
.ssi .sc.on{display:block}
.ssi .ab{position:absolute}
.ssi .full{position:absolute;inset:0;width:100%;height:100%}
.ssi video,.ssi img.m{display:block;width:100%;height:100%;object-fit:cover}
.ssi .mono{font-family:"Space Mono",monospace;text-transform:uppercase;letter-spacing:.04em}
.ssi .big{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.8;white-space:nowrap}
.ssi .out{-webkit-text-fill-color:transparent;-webkit-text-stroke:3px currentColor}
.ssi .tag{display:inline-block;font-family:"Space Mono",monospace;text-transform:uppercase;font-size:17px;line-height:1;padding:8px 11px;white-space:nowrap}
.ssi .tag.y{background:var(--yellow);color:#000}
.ssi .tag.p{background:var(--paper);color:#000}
.ssi .tag.k{background:#000;color:var(--yellow)}
.ssi .tag.r{background:var(--red);color:#000}
.ssi .panel{position:absolute;border:3px solid var(--fg);background:#111;transform-style:preserve-3d;will-change:transform,opacity}
.ssi .panel>.tag{position:absolute;left:-3px;top:-38px}
.ssi .grid{position:absolute;background-image:linear-gradient(var(--line) 2px,transparent 2px),linear-gradient(90deg,var(--line) 2px,transparent 2px);background-size:160px 160px}
.ssi .imm-t{mix-blend-mode:difference}
.ssi .gridk{position:absolute;inset:0;background-image:linear-gradient(rgba(17,17,16,.14) 2px,transparent 2px),linear-gradient(90deg,rgba(17,17,16,.14) 2px,transparent 2px);background-size:120px 120px}

/* type: masked letters, yellow highlight that sweeps on, wipe edge */
.ssi .lm{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em 0 .04em;margin:-.1em 0 -.04em}
.ssi .li{display:inline-block}
.ssi .hl{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 0/0% 100%;color:#000;padding:0 .055em}
.ssi .hl.on{background-size:100% 100%}
.ssi .ebar{position:absolute;top:-30px;bottom:-30px;width:12px;background:var(--yellow);box-shadow:0 0 0 3px #000;transform:skewX(-10deg);z-index:3}

/* overlay: the transport motif that runs through the whole ident */
.ssi .ov{position:absolute;inset:0;pointer-events:none;z-index:50;color:var(--paper)}
.ssi .ov[data-tone=light]{color:var(--ink)}
.ssi .ov[data-tone=yellow]{color:#000}
.ssi .ov .vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(0,0,0,.42))}
.ssi .ov:not([data-tone=dark]) .vig{display:none}
.ssi .ov .fr{position:absolute;inset:28px;border:2px solid currentColor;opacity:.22}
.ssi .ov .brand{position:absolute;left:60px;top:54px;font-weight:900;font-size:30px;letter-spacing:-.02em;text-transform:uppercase}
.ssi .ov .brand span{background:var(--yellow);color:#000;padding:0 6px}
.ssi .ov .lab{position:absolute;right:60px;top:60px;text-align:right;font-size:17px}
.ssi .ov .tc{position:absolute;left:60px;bottom:52px;font-size:20px;font-weight:700}
.ssi .ov .glyph{position:absolute;right:60px;bottom:40px;width:64px;height:64px;border:3px solid currentColor;display:flex;align-items:center;justify-content:center}
.ssi .ov .glyph svg{width:30px;height:30px;fill:currentColor}
.ssi .ov .glyph.hot{background:var(--red);border-color:var(--red)}
.ssi .ov .glyph.hot svg{fill:#000}
.ssi .ov .ph{position:absolute;left:0;bottom:0;height:6px;background:var(--yellow)}
.ssi .ov .grain{position:absolute;inset:-50%;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.6 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}