/* Space5 Next, the Workroom HUD. House grammar: navy glass, champagne gold as the one accent, the five
   innovators only as zone colours, Jost for display, IBM Plex for reading and kickers. */
:root {
  --navy: 11, 18, 48; --gold: 227, 200, 120; --ink: #f4f1ea; --mute: rgba(244, 241, 234, .66);
  --glass: rgba(var(--navy), .58); --rim: rgba(255, 255, 255, .12);
  --display: Jost, ui-sans-serif, system-ui, sans-serif; --text: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --safe-t: max(14px, env(safe-area-inset-top)); --safe-b: max(14px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1230; color: var(--ink); font: 15px/1.5 var(--text); -webkit-font-smoothing: antialiased; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; opacity: 0; transition: opacity .8s ease; }
body.ready #stage { opacity: 1; }
button { font: inherit; color: inherit; }

.glass { background: var(--glass); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--rim); }
.k, .kick { font: 500 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }

/* Brand, top left */
.brand { position: fixed; top: var(--safe-t); left: 16px; display: flex; align-items: center; gap: 11px; padding: 8px 16px 8px 9px; border-radius: 16px;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--rim); }
.brand svg { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(var(--gold), .45)); }
.brand div { display: flex; flex-direction: column; }
.brand .k { color: rgb(var(--gold)); font-size: 9.5px; }
.brand .t { font: 600 17px/1.15 var(--display); letter-spacing: -.01em; }

/* Pills, top centre */
.pill { position: fixed; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--rim); white-space: nowrap; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c, var(--gold))); box-shadow: 0 0 10px rgb(var(--c, var(--gold))); }
.zone { top: var(--safe-t); font: 500 14px/1.2 var(--display); }
.reach { top: calc(var(--safe-t) + 46px); font-size: 13px; border-color: rgba(var(--gold), .45); box-shadow: 0 0 24px rgba(var(--gold), .18); }
.reach b { font-weight: 500; color: rgb(var(--gold)); }
.reach i { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-style: normal; padding-left: 9px; border-left: 1px solid var(--rim); }
.reach .dot { --c: var(--gold); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.5); opacity: .6; } }

/* Round gold controls, top right */
.ctrls { position: fixed; top: var(--safe-t); right: 16px; display: flex; gap: 8px; }
.ctrls button { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(var(--gold), .35); transition: background .2s, transform .2s, box-shadow .2s; }
.ctrls button:hover { background: rgba(var(--gold), .2); box-shadow: 0 0 18px rgba(var(--gold), .3); }
.ctrls button:active { transform: scale(.94); }
.ctrls button:disabled { opacity: .35; cursor: default; }
.ctrls #viewBtn { border-color: rgba(var(--gold), .75); box-shadow: 0 0 14px rgba(var(--gold), .18); }
.ctrls button[aria-pressed="true"] { background: rgb(var(--gold)); }
.ctrls button[aria-pressed="true"] svg { stroke: #0b1230; }
.ctrls svg { width: 19px; height: 19px; fill: none; stroke: rgb(var(--gold)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button:focus-visible { outline: 2px solid rgb(var(--gold)); outline-offset: 3px; }

.hint { position: fixed; bottom: var(--safe-b); left: 50%; transform: translateX(-50%); margin: 0; padding: 7px 15px; border-radius: 999px; font: 500 11px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--mute); background: rgba(var(--navy), .42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; }
.hint .touch { display: none; }
@media (hover: none) { .hint .desk { display: none; } .hint .touch { display: inline; } }

/* Name tags over heads */
#labels, #signs, #zonelabels { position: fixed; inset: 0; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; padding: 3px 9px; border-radius: 999px; font: 500 12px/1.3 var(--text); white-space: nowrap;
  background: rgba(var(--navy), .62); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); will-change: transform; }
.tag.reach { border-color: rgba(var(--gold), .8); box-shadow: 0 0 14px rgba(var(--gold), .35); }
.tag.me { background: rgb(var(--gold)); color: #0b1230; border-color: transparent; font-weight: 600; }
.tag .ai { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font: 500 9.5px/1.4 var(--mono); letter-spacing: .08em; background: rgba(var(--gold), .2); color: rgb(var(--gold)); }

/* Signposts by the lift and stair */
.sign { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; max-width: 220px;
  padding: 8px 12px 9px; border-radius: 12px; background: rgba(var(--navy), .72); border: 1px solid rgba(var(--gold), .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .2s, border-color .2s; }
.sign .k { color: rgb(var(--gold)); font-size: 10px; }
.sign .s { font: 400 12px/1.35 var(--text); color: var(--mute); }
.sign:hover { border-color: rgb(var(--gold)); box-shadow: 0 0 22px rgba(var(--gold), .35); }

/* Map mode: zone names on the floor */
.zl { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .4s; font: 600 13px/1.1 var(--display); padding: 4px 10px; border-radius: 8px; white-space: nowrap;
  background: rgba(var(--navy), .7); border-top: 2px solid rgb(var(--c)); box-shadow: 0 -4px 14px -6px rgb(var(--c)); }
body.map .zl { opacity: 1; }
body.map .tag:not(.me), body.map #zoneCard { display: none; }

/* Zone card, bottom left: a 2 px glowing top edge in the zone's colour and a huge numeral */
#zoneCard { position: fixed; left: 16px; bottom: calc(var(--safe-b) + 40px); width: 290px; padding: 16px 18px 18px; border-radius: 18px; overflow: hidden; pointer-events: none;
  background: linear-gradient(140deg, rgba(var(--c, var(--gold)), .2), rgba(var(--navy), .78) 55%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--rim);
  visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .45s, visibility 0s .45s; }
#zoneCard::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: rgb(var(--c, var(--gold))); box-shadow: 0 0 14px rgb(var(--c, var(--gold))); }
#zoneCard.show { visibility: visible; opacity: 1; transform: none; transition: opacity .45s, transform .45s; }
#zoneCard .kick { color: rgb(var(--c, var(--gold))); font-size: 10px; position: relative; }
#zoneCard .ttl { font: 500 26px/1.1 var(--display); margin-top: 6px; position: relative; max-width: 72%; }
#zoneCard .num { position: absolute; right: -6px; bottom: -30px; font: 600 120px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgba(var(--c, var(--gold)), .45); }
#zoneCard.show > * { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
#zoneCard.show .ttl { animation-delay: .12s; }

#toast { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 44px); transform: translateX(-50%); padding: 9px 16px; border-radius: 12px; background: rgba(var(--navy), .85);
  border: 1px solid rgba(var(--gold), .45); font-size: 13px; opacity: 0; visibility: hidden; pointer-events: none; }
#toast.show { animation: toast 2.8s ease both; }
@keyframes toast { 0% { opacity: 0; visibility: visible; transform: translate(-50%, 8px); } 10%, 82% { opacity: 1; visibility: visible; transform: translate(-50%, 0); } 100% { opacity: 0; visibility: hidden; } }

#perf { position: fixed; left: 16px; top: calc(var(--safe-t) + 62px); padding: 9px 12px; border-radius: 10px; font: 500 11px/1.55 var(--mono); background: rgba(0, 0, 0, .6); color: #d8f0d8; max-width: 380px; }
#perf b { color: rgb(var(--gold)); } #perf span { color: #9aa; }
#walkResult { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); padding: 16px 20px; border-radius: 14px; background: rgba(var(--navy), .92); border: 1px solid rgb(var(--gold)); font: 500 13px/1.5 var(--mono); }
#walkResult a { color: rgb(var(--gold)); margin-left: 8px; }

/* Campus card: everything else blurs back, the card comes forward */
dialog#campus { border: 0; padding: 0; background: transparent; color: inherit; max-width: min(640px, calc(100vw - 28px)); }
dialog#campus::backdrop { background: rgba(4, 7, 20, .55); backdrop-filter: blur(6px) brightness(.7); -webkit-backdrop-filter: blur(6px) brightness(.7); }
#campus .card, #fail .card { position: relative; padding: 26px 28px 24px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(150deg, rgba(var(--gold), .14), rgba(var(--navy), .94) 45%); border: 1px solid var(--rim); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
#campus .card::before, #fail .card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: rgb(var(--gold)); box-shadow: 0 0 18px rgba(var(--gold), .9); }
#campus[open] .card > * { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
#campus[open] .card > :nth-child(3) { animation-delay: .1s; } #campus[open] .card > :nth-child(4) { animation-delay: .2s; } #campus[open] .card > :nth-child(5) { animation-delay: .3s; }
#campus .kick, #fail .kick { color: rgb(var(--gold)); }
#campus h2, #fail h2 { margin: 8px 0 14px; font: 500 30px/1.1 var(--display); letter-spacing: -.015em; }
#campus h2 em { color: rgb(var(--gold)); text-shadow: 0 0 24px rgba(var(--gold), .45); }
#campus .map { width: 100%; height: auto; display: block; margin: 0 0 14px; }
#campus .map .here { font: 600 13px var(--display); fill: #e3c878; }
#campus .map .lbl { font: 500 10px var(--mono); letter-spacing: .12em; fill: rgba(244, 241, 234, .7); text-transform: uppercase; }
#campus .soon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#campus .soon li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--rim); font-size: 14px; }
#campus .soon b { font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
#campus .soon b.now { color: #0b1230; background: rgb(var(--gold)); padding: 4px 7px; border-radius: 6px; }
#campus .x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(var(--gold), .4); background: transparent; color: rgb(var(--gold)); font-size: 20px; line-height: 1; cursor: pointer; }
#fail { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; }
#fail .card { max-width: 520px; } #fail p { color: var(--mute); margin: 0; }

@media (max-width: 640px) {
  .brand { padding: 6px 12px 6px 7px; } .brand svg { width: 26px; height: 26px; } .brand .t { font-size: 15px; }
  .zone { top: calc(var(--safe-t) + 58px); }
  .reach { top: calc(var(--safe-t) + 100px); max-width: calc(100vw - 24px); }
  .reach i { display: none; }
  .ctrls button { width: 38px; height: 38px; }
  #zoneCard { width: auto; right: 16px; }
  #campus .soon { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Campus zoom: the Workroom's zone names and the unbuilt places, each with a Coming tag */
body.campus .zl { opacity: 1; }
body.campus .tag:not(.me), body.campus #zoneCard, body.campus #signs { display: none; }
.zl.plot { --c: var(--gold); opacity: 0; display: flex; align-items: center; gap: 8px; }
.zl.plot b { font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
body.campus .zl.plot { opacity: 1; }

/* ---------------------------------------------------------------------------------- live (AV-1) */
#self, #portraits, .tap { display: none; }
body.live #self { display: flex; }
body.live #portraits { display: block; }
#avhold { position: fixed; left: -10000px; top: 0; width: 160px; height: 120px; overflow: hidden; }
#portraits { position: fixed; inset: 0; pointer-events: none; }
.portrait { position: absolute; left: 0; top: 0; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; will-change: transform;
  border: 2px solid rgba(var(--gold), .55); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); background: rgba(var(--navy), .8); transition: border-color .2s, box-shadow .2s; }
.portrait video { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait.speaking { border-color: rgb(var(--gold)); box-shadow: 0 0 0 3px rgba(var(--gold), .35), 0 0 26px rgba(var(--gold), .55); }
.portrait[data-state="stalled"] video, .portrait[data-state="warming"] video { filter: blur(3px) saturate(.6); opacity: .7; }
.portrait[data-state="stalled"]::after { content: "paused"; position: absolute; inset: auto 0 6px; text-align: center; font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; }

#self { position: fixed; right: 16px; bottom: calc(var(--safe-b) + 40px); align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 22px; max-width: min(420px, calc(100vw - 32px));
  background: linear-gradient(140deg, rgba(var(--gold), .16), rgba(var(--navy), .82) 55%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--rim); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
#self::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: 22px 22px 0 0; background: rgb(var(--gold)); box-shadow: 0 0 14px rgba(var(--gold), .8); opacity: .0; transition: opacity .3s; }
#self[data-state="live"]::before { opacity: 1; }
#self .orb { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(140deg, #e3c878, #8a6a2c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
#self[data-state="live"] .orb { box-shadow: 0 0 0 2px rgb(var(--gold)), 0 0 22px rgba(var(--gold), .55); }
#self .orb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
#self .orb span { font: 600 24px/1 var(--display); color: #0b1230; }
#self .meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
#self .nm { background: none; border: 0; padding: 0; cursor: pointer; font: 500 16px/1.1 var(--display); color: var(--ink); }
#self .nm:hover { color: rgb(var(--gold)); }
#self .msg { font-size: 12px; color: var(--mute); line-height: 1.35; }
#self .go { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 0; cursor: pointer; background: rgb(var(--gold)); color: #0b1230;
  font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 22px rgba(var(--gold), .4); }
#self .go::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c9302c; box-shadow: 0 0 8px #ff5a4f; }
#self .go.small::before { display: none; }
#self .go:hover { filter: brightness(1.06); }
#self .ctl { display: flex; gap: 6px; }
#self .ctl button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, .06); border: 1px solid rgba(var(--gold), .35); }
#self .ctl svg { width: 16px; height: 16px; fill: none; stroke: rgb(var(--gold)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#self .ctl button[aria-pressed="true"] { background: rgb(var(--gold)); } #self .ctl button[aria-pressed="true"] svg { stroke: #0b1230; }
#self .ctl #micBtn[aria-pressed="false"], #self .ctl #camBtn[aria-pressed="false"] { border-color: rgba(255, 92, 34, .7); }
#self .ctl #micBtn[aria-pressed="false"] svg, #self .ctl #camBtn[aria-pressed="false"] svg { stroke: rgb(255, 120, 80); }
#self .ctl .end:hover { background: rgba(255, 92, 34, .25); }
#self[data-state="needs-you"] .msg, #self[data-state="denied"] .msg { color: rgb(255, 160, 120); }
#self[data-state="reconnecting"] .orb, #self[data-state="connecting"] .orb, #self[data-state="waking"] .orb { animation: breathe 1.6s ease-in-out infinite; }
body.live .tap:not([hidden]) { display: flex; top: auto; bottom: calc(var(--safe-b) + 128px); cursor: pointer; pointer-events: auto; border-color: rgb(var(--gold)); }
body.live #zoneCard { bottom: calc(var(--safe-b) + 40px); }
@media (max-width: 640px) { #self { right: 12px; left: 12px; bottom: calc(var(--safe-b) + 36px); } body.live #zoneCard { display: none; } }

.tag.act { pointer-events: auto; cursor: pointer; }
.tag.act:hover { border-color: rgba(var(--gold), .8); }
#pmenu { position: fixed; z-index: 40; min-width: 180px; padding: 6px; border-radius: 14px; display: flex; flex-direction: column; gap: 2px;
  background: rgba(var(--navy), .94); border: 1px solid rgba(var(--gold), .4); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); backdrop-filter: blur(12px); }
#pmenu[hidden] { display: none; }
#pmenu .who { padding: 6px 10px 8px; font: 500 14px/1.2 var(--display); color: rgb(var(--gold)); border-bottom: 1px solid var(--rim); margin-bottom: 4px; }
#pmenu button { text-align: left; padding: 8px 10px; border-radius: 9px; border: 0; background: transparent; cursor: pointer; font: 400 13.5px/1.2 var(--text); color: var(--ink); }
#pmenu button:hover { background: rgba(255, 255, 255, .08); }
#pmenu .warn { color: rgb(255, 180, 120); } #pmenu .danger { color: rgb(255, 120, 100); }

/* Optional sign-in */
#gwrap { display: grid; place-items: center; }
#gwrap:empty { display: none; }
#self .lnk { background: none; border: 0; padding: 0; cursor: pointer; font: 400 11.5px/1.3 var(--text); color: rgba(var(--gold), .9); text-decoration: underline; text-underline-offset: 3px; }
#self .lnk[hidden] { display: none; }
dialog#signin { border: 0; padding: 0; background: transparent; color: inherit; width: min(440px, calc(100vw - 28px)); }
dialog#signin::backdrop { background: rgba(4, 7, 20, .55); backdrop-filter: blur(6px) brightness(.7); -webkit-backdrop-filter: blur(6px) brightness(.7); }
#signin .card { position: relative; padding: 26px 26px 22px; border-radius: 22px; overflow: hidden; background: linear-gradient(150deg, rgba(var(--gold), .14), rgba(var(--navy), .95) 45%); border: 1px solid var(--rim); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
#signin .card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: rgb(var(--gold)); box-shadow: 0 0 18px rgba(var(--gold), .9); }
#signin .kick { color: rgb(var(--gold)); }
#signin h2 { margin: 8px 0 8px; font: 500 28px/1.1 var(--display); letter-spacing: -.015em; }
#signin h2 em { color: rgb(var(--gold)); text-shadow: 0 0 24px rgba(var(--gold), .45); }
#signin .sub { margin: 0 0 18px; color: var(--mute); font-size: 14px; }
#signin .x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(var(--gold), .4); background: transparent; color: rgb(var(--gold)); font-size: 20px; line-height: 1; cursor: pointer; }

/* The Reckoning laptop: a real page laid over your MacBook screen */
#laptop { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 6; }
#laptop[hidden] { display: none; }
#boardtv { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 5; }
#boardtv[hidden] { display: none; }
#boardtv .bt-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; display: flex; flex-direction: column; background: #000; box-shadow: 0 0 0 6px #0b0d14, 0 0 60px rgba(var(--ch, 227, 200, 120), .35); }
.bt-tube { flex: 1; min-height: 0; } .bt-tube iframe { width: 100%; height: 100%; border: 0; display: block; }
.bt-strip { display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 14px; background: linear-gradient(90deg, rgba(var(--ch, 227, 200, 120), .28), #070b1c 55%); color: #f4f1ea; font: 500 20px/1 var(--text); white-space: nowrap; }
.bt-now { flex: 1; overflow: hidden; text-overflow: ellipsis; } .bt-now b { color: rgb(var(--c, 227, 200, 120)); margin-right: 8px; font-weight: 600; }
.bt-ch { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: #f4f1ea; font: 600 24px/1 var(--text); cursor: pointer; }
.bt-ch:hover { border-color: rgb(var(--gold)); }
#laptop .lt-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; display: flex; flex-direction: column;
  background: #0b1230; color: #f4f1ea; font: 15px/1.45 var(--text); box-shadow: 0 0 0 2px #0a0d16; --ch: 227,200,120; }
#laptop.expanded { position: fixed; inset: 0; width: auto; height: auto; display: grid; place-items: center; background: rgba(4, 7, 20, .6); backdrop-filter: blur(6px); z-index: 30; }
#laptop.expanded .lt-screen { position: relative; transform: none !important; width: min(1200px, 94vw) !important; height: min(766px, 88vh) !important; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--gold), .4); }
.lt-bar { flex: none; display: flex; align-items: center; gap: 18px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.1); background: linear-gradient(90deg, rgba(var(--gold), .14), transparent 60%); }
.lt-brand { font: 600 15px/1 var(--mono); letter-spacing: .18em; } .lt-brand b { color: rgb(var(--gold)); text-shadow: 0 0 18px rgba(var(--gold), .45); }
.lt-tabs { display: flex; gap: 6px; }
.lt-tabs button { padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #f4f1ea; cursor: pointer; font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.lt-tabs button[aria-selected="true"] { background: rgb(var(--gold)); color: #0b1230; border-color: transparent; }
.lt-clock { margin-left: auto; font: 500 13px/1 var(--mono); color: rgba(244,241,234,.6); }
.lt-x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(var(--gold), .45); background: transparent; color: rgb(var(--gold)); cursor: pointer; font-size: 16px; }
.lt-news { flex: 1; overflow: auto; padding: 16px 20px 20px; }
.lt-load { padding: 40px; text-align: center; color: rgba(244,241,234,.6); }
.lt-ed { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--gold)); margin-bottom: 10px; }
.lt-story { display: block; color: inherit; text-decoration: none; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.lt-story:hover .t { color: rgb(var(--gold)); }
.lt-story .t { display: block; font: 500 15px/1.3 var(--display); }
.lt-story .m { display: block; margin-top: 3px; font: 400 11.5px/1.3 var(--mono); color: rgba(244,241,234,.55); }
.lt-story.big { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; padding: 4px 0 16px; }
.lt-story.big img { width: 220px; height: 124px; object-fit: cover; border-radius: 10px; }
.lt-story.big .t { font-size: 22px; line-height: 1.15; }
.lt-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.lt-col h4 { margin: 0 0 4px; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--gold)); }
.lt-more { display: inline-block; margin-top: 16px; color: rgb(var(--gold)); font: 500 13px/1 var(--mono); text-decoration: none; }
.lt-tv { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lt-tv[hidden], .lt-news[hidden] { display: none; }
.lt-plate { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 2px solid rgb(var(--ch)); }
.lt-chname { flex: 1; text-align: center; } .lt-chname b { display: block; font: 600 20px/1.1 var(--display); color: rgb(var(--ch)); } .lt-chname span { font: 400 11.5px/1.3 var(--mono); color: rgba(244,241,234,.6); }
.lt-ch { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(var(--ch), .6); background: rgba(var(--ch), .12); color: #f4f1ea; font-size: 26px; line-height: 1; cursor: pointer; }
.lt-ch:hover { background: rgba(var(--ch), .3); }
.lt-tube { flex: 1; min-height: 0; background: #000; } .lt-tube iframe { width: 100%; height: 100%; border: 0; display: block; }
.lt-now { flex: none; padding: 8px 16px; font-size: 13px; color: rgba(244,241,234,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-now .on { font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #0b1230; background: rgb(var(--ch)); padding: 3px 6px; border-radius: 4px; }

/* Chat */
#bubbles { position: fixed; inset: 0; pointer-events: none; }
.bubble { position: absolute; left: 0; top: 0; max-width: 240px; padding: 7px 12px; border-radius: 14px 14px 14px 4px; will-change: transform;
  background: rgba(244, 241, 234, .96); color: #0b1230; font: 500 13.5px/1.35 var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); overflow-wrap: anywhere; }
.bubble.pop { animation: bubblePop .28s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes bubblePop { from { opacity: 0; transform: translate(var(--x, 0), 6px) scale(.9); } }
#chatlog { position: fixed; left: 16px; bottom: calc(var(--safe-b) + 150px); width: min(320px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
body:not(.live) #chatlog, body:not(.live) #chatBtn { display: none; }
.cl-row { align-self: flex-start; max-width: 100%; padding: 6px 11px; border-radius: 12px; background: rgba(var(--navy), .72); border: 1px solid var(--rim); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 400 13px/1.35 var(--text); color: var(--ink); transition: opacity 1.2s; animation: rise .35s ease both; overflow-wrap: anywhere; }
.cl-row b { color: rgb(var(--gold)); font-weight: 600; margin-right: 6px; }
.cl-row.mine { border-color: rgba(var(--gold), .45); }
.cl-row.old { opacity: .35; }
.cl-row.reply { pointer-events: auto; cursor: pointer; }
.cl-row.reply:hover { border-color: rgba(var(--gold), .6); }
.cl-row .cl-to { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; font: 600 9.5px/1.5 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; background: rgba(var(--gold), .18); color: rgb(var(--gold)); }
.cl-row.agent { border-color: rgba(var(--gold), .35); background: rgba(var(--navy), .85); }
.bubble.agent { background: rgba(var(--gold), .96); }
#chat { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 44px); transform: translateX(-50%); display: flex; gap: 8px; width: min(560px, calc(100vw - 32px)); padding: 8px; border-radius: 999px; z-index: 25;
  background: rgba(var(--navy), .9); border: 1px solid rgba(var(--gold), .55); box-shadow: 0 0 28px rgba(var(--gold), .2), 0 18px 40px rgba(0, 0, 0, .4); backdrop-filter: blur(14px); }
#chat[hidden] { display: none; }
#chat input { flex: 1; min-width: 0; padding: 9px 14px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 15px/1.2 var(--text); }
#chat input::placeholder { color: var(--mute); }
#chat button { padding: 0 18px; border-radius: 999px; border: 0; background: rgb(var(--gold)); color: #0b1230; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 640px) { #chatlog { bottom: calc(var(--safe-b) + 200px); } #chat { bottom: calc(var(--safe-b) + 150px); } }

/* The view button blinks gold when the view switches for you */
.ctrls #viewBtn.blink { animation: viewBlink .8s ease-in-out 3; }
@keyframes viewBlink { 50% { background: rgb(var(--gold)); box-shadow: 0 0 0 4px rgba(var(--gold), .35), 0 0 26px rgba(var(--gold), .8); } }
.ctrls #viewBtn.blink svg { animation: viewBlinkIcon .8s ease-in-out 3; }
@keyframes viewBlinkIcon { 50% { stroke: #0b1230; } }

/* ---------------------------------------------------------------------------------- Cortex crews (24 Oct 2026) */
/* One card over each project's crew: its tabs' emoji, the project, how many tabs and how many are working. */
#crews { position: fixed; inset: 0; pointer-events: none; }
.crewcard { pointer-events: auto; cursor: default; position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 240px; padding: 6px 12px 7px; border-radius: 12px; white-space: nowrap;
  background: rgba(var(--navy), .74); border: 1px solid rgba(var(--gold), .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); will-change: transform; }
.crewcard::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); background: rgba(var(--navy), .74); border: solid rgba(var(--gold), .35); border-width: 0 1px 1px 0; }
.crewcard .ce { font-size: 15px; line-height: 1.2; letter-spacing: 2px; }
.crewcard .cn { font: 600 13px/1.2 var(--display); max-width: 216px; overflow: hidden; text-overflow: ellipsis; }
.crewcard .cn i { font-style: normal; font-weight: 500; color: var(--mute); }
.crewcard .cs { font: 500 9.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.crewcard .cs b { color: rgb(var(--gold)); font-weight: 500; }
.crewcard.run { border-color: rgba(var(--gold), .8); box-shadow: 0 0 18px rgba(var(--gold), .3); animation: crewpulse 2.4s ease-in-out infinite; }
@keyframes crewpulse { 50% { box-shadow: 0 0 26px rgba(var(--gold), .5); } }
.tag.crew { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
body.map .crewcard { opacity: .95; }
.bubble.crewsay { max-width: 260px; }