:root{
  --bg:#030303;
  --panel:rgba(10,10,10,.72);
  --line:rgba(255,255,255,.11);
  --line-bright:rgba(255,255,255,.24);
  --text:#f3f3ef;
  --muted:#aaa9a3;
  --glow:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; overflow-x:hidden; color:var(--text);
  background:
    radial-gradient(circle at 50% 35%,rgba(255,255,255,.055),transparent 34%),
    linear-gradient(180deg,#090909 0%,var(--bg) 52%,#000 100%);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
a{color:inherit}
.site-shell{
  position:relative; min-height:100vh; isolation:isolate;
  padding:32px 32px 22px;
}
.maze{
  position:fixed; inset:-12%; z-index:-3; opacity:.82;
  background-image:
    linear-gradient(var(--line) 2px,transparent 2px),
    linear-gradient(90deg,var(--line) 2px,transparent 2px);
  background-size:72px 72px;
  transform:perspective(1100px) rotateX(62deg) rotateZ(45deg) scale(1.4);
  animation:mazeDrift 24s linear infinite;
  mask-image:radial-gradient(circle at center,black 8%,rgba(0,0,0,.95) 40%,transparent 82%);
  -webkit-mask-image:radial-gradient(circle at center,black 8%,rgba(0,0,0,.95) 40%,transparent 82%);
}
.maze::before,.maze::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 68px,rgba(255,255,255,.14) 68px 72px,transparent 72px 140px),
    repeating-linear-gradient(90deg,transparent 0 104px,rgba(255,255,255,.09) 104px 108px,transparent 108px 212px);
  mix-blend-mode:screen;
}
.maze::after{inset:9%;opacity:.55;transform:rotate(90deg) scale(.88)}
.ring{
  position:fixed; left:50%; top:50%; translate:-50% -50%;
  width:min(82vw,920px); aspect-ratio:1; border:1px solid rgba(255,255,255,.09);
  border-radius:50%; z-index:-2;
  box-shadow:0 0 90px rgba(255,255,255,.025),inset 0 0 90px rgba(255,255,255,.025);
  animation:slowSpin 40s linear infinite;
}
.ring::before,.ring::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%}
.ring::before{inset:10%}.ring::after{inset:22%}
.veil{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.72),transparent 22%,transparent 78%,rgba(0,0,0,.72)),
    linear-gradient(180deg,rgba(0,0,0,.36),transparent 28%,transparent 72%,rgba(0,0,0,.72));
}
main{width:min(100%,980px);margin:0 auto;text-align:center}
.portal{
  position:relative; margin-top:clamp(20px,5vh,56px);
  padding:clamp(46px,7vw,92px) clamp(24px,6vw,80px);
  background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 38%),var(--panel);
  border:1px solid var(--line-bright);
  box-shadow:0 28px 90px rgba(0,0,0,.58),inset 0 0 46px rgba(255,255,255,.025),0 0 70px var(--glow);
  backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
  clip-path:polygon(28px 0,calc(100% - 28px) 0,100% 28px,100% calc(100% - 28px),calc(100% - 28px) 100%,28px 100%,0 calc(100% - 28px),0 28px);
}
.portal::before,.portal::after{content:"";position:absolute;pointer-events:none}
.portal::before{inset:15px;border:1px solid rgba(255,255,255,.08);clip-path:inherit}
.portal::after{left:50%;bottom:25px;width:1px;height:58px;background:linear-gradient(transparent,rgba(255,255,255,.6),transparent);box-shadow:0 0 16px rgba(255,255,255,.25)}
.eyebrow,.projects-label{margin:0 0 18px;color:var(--muted);font-size:.72rem;letter-spacing:.5em;text-transform:uppercase}
h1{margin:0;font-size:clamp(3rem,11vw,8.5rem);font-weight:700;line-height:.9;letter-spacing:-.06em;text-transform:uppercase;text-shadow:0 0 18px rgba(255,255,255,.11),0 12px 55px rgba(0,0,0,.92)}
.brand{margin:25px 0 0;color:rgba(255,255,255,.72);font-size:clamp(.78rem,1.7vw,1.02rem);letter-spacing:.48em;text-transform:uppercase}
.divider{width:min(220px,52vw);height:1px;margin:34px auto;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);box-shadow:0 0 18px rgba(255,255,255,.18)}
.statement{max-width:780px;margin:0 auto;color:#d7d7d1;font-size:clamp(1.05rem,2.15vw,1.5rem);line-height:1.65;letter-spacing:.08em;text-transform:uppercase}
.statement span{color:#fff;white-space:nowrap}
.projects{
  width:min(100%,980px);margin:26px auto 26px;padding:clamp(24px,4vw,38px);
  background:rgba(7,7,7,.64);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 70px rgba(0,0,0,.42),inset 0 0 34px rgba(255,255,255,.018);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.project-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.project-list li:last-child:nth-child(odd){grid-column:1/-1}
.project-link{
  position:relative;display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:17px 18px;overflow:hidden;
  color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.018);
  text-decoration:none;font-size:clamp(.78rem,1.4vw,.93rem);letter-spacing:.12em;text-transform:uppercase;
  transition:color .28s,border-color .28s,background .28s,transform .28s,box-shadow .28s
}
.project-link::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.07) 48%,transparent 62%);transform:translateX(-120%);transition:transform .55s}
.project-link::after{content:"↗";position:relative;z-index:1;color:rgba(255,255,255,.42);font-size:1rem;transition:transform .28s,color .28s}
.project-link span{position:relative;z-index:1}
.project-link:hover,.project-link:focus-visible{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.042);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.32);outline:none}
.project-link:hover::before,.project-link:focus-visible::before{transform:translateX(120%)}
.project-link:hover::after,.project-link:focus-visible::after{color:#fff;transform:translate(2px,-2px)}
.site-footer{
  width:min(100%,980px);margin:0 auto;padding:18px 8px 6px;
  display:flex;gap:12px 22px;align-items:center;justify-content:center;flex-wrap:wrap;
  color:rgba(255,255,255,.42);font-size:.64rem;letter-spacing:.16em;text-align:center;text-transform:uppercase
}
.site-footer a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px}
.site-footer a:hover,.site-footer a:focus-visible{color:#fff;border-color:#fff;outline:none}
.legal-wrap{
  width:min(100%,900px);margin:clamp(24px,5vh,60px) auto 24px;padding:clamp(28px,5vw,58px);
  background:rgba(7,7,7,.74);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 28px 90px rgba(0,0,0,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  text-align:left
}
.legal-wrap h1{font-size:clamp(2rem,7vw,4.8rem);letter-spacing:-.04em;text-align:center}
.legal-wrap .brand{text-align:center}
.legal-wrap h2{margin:34px 0 10px;font-size:1rem;letter-spacing:.16em;text-transform:uppercase}
.legal-wrap p,.legal-wrap li{color:#d0d0cb;line-height:1.7;font-size:.98rem}
.legal-wrap ul{padding-left:20px}
.back-link{display:inline-block;margin-top:28px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:3px;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
@keyframes mazeDrift{
  from{transform:perspective(1100px) rotateX(62deg) rotateZ(45deg) scale(1.4) translate3d(0,0,0)}
  to{transform:perspective(1100px) rotateX(62deg) rotateZ(45deg) scale(1.4) translate3d(72px,72px,0)}
}
@keyframes slowSpin{to{transform:rotate(360deg)}}
@media(max-width:640px){
  .site-shell{padding:18px 18px 16px}
  .portal{padding:54px 20px 72px}
  .brand{letter-spacing:.28em}
  .statement{letter-spacing:.045em}
  .projects{margin-top:18px;padding:18px}
  .project-list{grid-template-columns:1fr}
  .project-list li:last-child:nth-child(odd){grid-column:auto}
  .site-footer{font-size:.58rem;letter-spacing:.11em}
}
@media(prefers-reduced-motion:reduce){.maze,.ring{animation:none}}
/* Streaming workspace */
:root{color-scheme:dark}
[hidden]{display:none!important}
.stream-header{max-width:1120px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:10px 0 20px}
.wordmark{text-decoration:none;font-size:16px;letter-spacing:.2em;text-transform:uppercase}
.stream-main{width:min(100%,1120px)}
#notice{position:relative;max-width:620px;margin:16px auto;color:var(--text);font-size:16px;line-height:1.5;padding:14px 18px;background:rgba(20,20,20,.92);border:1px solid var(--line-bright);text-align:left}
#notice:empty{display:none}
.login-portal{width:min(100%,620px);margin:clamp(24px,6vh,64px) auto 40px;padding:clamp(44px,6vw,68px) clamp(24px,6vw,64px) 72px}
.login-portal h1{font-size:clamp(2.8rem,8vw,5.4rem);line-height:1;letter-spacing:-.05em}
.login-portal .eyebrow{font-size:14px;letter-spacing:.28em;margin-bottom:24px}
.login-portal .brand{font-size:14px;letter-spacing:.34em}
.login-portal .divider{margin:28px auto}
.login-form{text-align:left;position:relative;z-index:1}
label{display:block;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#d7d7d1}
input,button{font:inherit}
input{display:block;width:100%;color:var(--text);background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.2);padding:15px 16px;margin:10px 0 22px;min-height:50px;font-size:16px;border-radius:0}
input:focus-visible,button:focus-visible{outline:1px solid rgba(255,255,255,.8);outline-offset:4px}
input:focus{border-color:rgba(255,255,255,.55)}
button{min-height:46px;padding:12px 17px;color:var(--text);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.24);cursor:pointer;font-size:14px;letter-spacing:.075em;transition:background .25s,border-color .25s,box-shadow .25s;border-radius:0}
button:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.55);box-shadow:0 0 20px rgba(255,255,255,.035)}
button:disabled{opacity:.5;cursor:wait}
.login-form>button{width:100%;background:#eee;color:#090909;text-transform:uppercase;letter-spacing:.18em;font-weight:600;margin-top:4px}
.login-form>button:hover{background:#fff;box-shadow:0 0 28px rgba(255,255,255,.13)}
#login-hint{font-size:14px;color:var(--muted);letter-spacing:.02em;margin:20px 0 0;line-height:1.6}
.stream-footer{font-size:12px;letter-spacing:.08em;padding-top:24px}
.workspace{text-align:left}
.heading,.card-head,.actions{display:flex;justify-content:space-between;align-items:center;gap:16px}
.heading{margin:30px 0 28px;flex-wrap:wrap}
.heading h1{font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.045em;line-height:1}
.heading p{font-size:14px;color:var(--muted);line-height:1.5;margin:12px 0 0}
.server{padding:18px 22px;border:1px solid var(--line-bright);background:rgba(7,7,7,.72);display:flex;gap:16px 24px;flex-wrap:wrap;margin:0 0 22px;backdrop-filter:blur(12px)}
.server span{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
code{font-size:14px;overflow-wrap:anywhere}
.card{position:relative;padding:26px;background:linear-gradient(135deg,rgba(255,255,255,.025),transparent 38%),var(--panel);border:1px solid var(--line-bright);margin:18px 0;backdrop-filter:blur(15px);box-shadow:0 18px 60px rgba(0,0,0,.35)}
.card h2{font-size:22px;letter-spacing:-.025em;margin:0;font-weight:500}
.card-head{flex-wrap:wrap}
.badge{font-size:14px;letter-spacing:.035em;color:var(--muted)}
.live{color:#fff;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px}
.card-controls{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.destination{border-top:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
.destination strong{font-size:16px;font-weight:500}
.destination small{display:block;font-size:14px;color:var(--muted);margin-top:8px;line-height:1.5}
.destination .actions{justify-content:flex-end;flex-wrap:wrap}
.empty,.note{font-size:14px;color:var(--muted);line-height:1.7}
.note{max-width:850px;margin-top:24px}
dialog{width:min(540px,calc(100% - 32px));background:#0c0c0c;color:var(--text);border:1px solid var(--line-bright);padding:32px;box-shadow:0 20px 90px #000;text-align:left}
dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(6px)}
dialog h2{font-size:24px;letter-spacing:-.025em;font-weight:500;margin:0 0 18px}
dialog p{font-size:16px;line-height:1.6;color:var(--muted)}
.actions{justify-content:flex-end;flex-wrap:wrap}
@media(max-width:640px){.stream-header{padding:6px 0 16px}.wordmark{font-size:14px;letter-spacing:.12em}.login-portal{padding:44px 24px 66px;margin-top:24px}.login-portal .brand{letter-spacing:.24em}.destination{flex-direction:column;align-items:flex-start}.card{padding:20px}.card-controls button{flex:1 1 auto}.stream-footer{font-size:12px}.stream-header button{padding:10px 12px}.stream-main{padding:0}}

.form-error:empty{display:none}
dialog .form-error{color:#ffb5b5;border:1px solid rgba(255,181,181,.35);padding:12px 14px;background:rgba(90,20,20,.15)}

.emergency-bar{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:24px 0;padding:22px;border:1px solid rgba(230,90,90,.4);background:rgba(80,15,15,.12)}
.emergency-bar strong{font-weight:500}.emergency-bar p{font-size:14px;line-height:1.6;color:var(--muted);margin:8px 0 0}.danger{border-color:rgba(245,110,110,.65);color:#ffb6b6}.badge.stopped{color:#ffb6b6;border-color:rgba(230,90,90,.5)}.input-status{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 18px;color:var(--muted);font-size:14px}.crew-workspace{max-width:680px;margin:0 auto}.crew-workspace .card{margin-top:24px}