/* Design Lab · hero logos, the ring, and the hello-there finale */

/* ---------- Top: back to the Outer Rim ---------- */
.toplinks .back-rim { display: inline-flex; align-items: center; gap: 8px; }
.toplinks .back-rim i { width: 7px; height: 7px; border-radius: 50%; background: #ff8a4c; box-shadow: 0 0 8px #ff8a4c; }
.top .wrap { justify-content: flex-start; }

/* ---------- Hero: one screen, the wordmark with company logos floating around it ---------- */
.deck.lab-hero { height: 100vh; min-height: 620px; }
.lab-hero .deck-stage { position: relative; height: 100%; }
.hero-sub { margin-top: 44px; max-width: 46ch; text-align: center; font: 400 17px/1.55 var(--sans); color: var(--muted); }
.hero-sub b { color: var(--ink); font-weight: 600; }
.float-logos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fl { position: absolute; left: var(--x); top: var(--y); width: var(--s, 64px); height: var(--s, 64px); margin: calc(var(--s, 64px) / -2) 0 0 calc(var(--s, 64px) / -2);
  display: grid; place-items: center; padding: 0; border: 1.5px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 4px 4px 0 var(--ink);
  pointer-events: auto; cursor: pointer; transform: translate(var(--px, 0px), var(--py, 0px)) rotate(var(--r, 0deg)); transition: box-shadow .2s, transform .5s cubic-bezier(.16,1,.3,1); }
.fl img { width: 58%; height: 58%; object-fit: contain; animation: fl-bob var(--d, 6s) ease-in-out infinite alternate; }
.fl.round { border-radius: 50%; }
.fl:hover { box-shadow: 6px 6px 0 var(--b, var(--ink)); }
.fl::after { content: attr(data-co); position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 7px; border-radius: 6px;
  background: var(--ink); color: #fff; font: 400 10.5px var(--mono); opacity: 0; transition: opacity .2s; pointer-events: none; }
.fl:hover::after, .fl:focus-visible::after { opacity: 1; }
.fl-wrap { position: absolute; inset: 0; animation: fl-float var(--d, 7s) ease-in-out infinite alternate; }
@keyframes fl-float { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes fl-bob { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.fl-arrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.fl-arrows path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 5 6; stroke-linecap: round; }
.fl-arrows .hd { stroke-dasharray: none; }
.fl-note { position: absolute; z-index: 2; font: 600 24px/1 var(--hand); color: var(--sel); white-space: nowrap; transform: rotate(-4deg); pointer-events: none; }
@media (max-width: 760px) {
  .fl { --s: 46px !important; border-radius: 13px; box-shadow: 3px 3px 0 var(--ink); }
  .fl.hide-sm, .fl-arrows, .fl-note { display: none; }
  .hero-sub { font-size: 15px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .fl img, .fl-wrap { animation: none; } }

/* ---------- The ring ---------- */
.ring-sec { position: relative; background: #050507; color: #f4f4f5; }
.ring-sec::before { content: ""; position: absolute; left: 0; right: 0; top: -160px; height: 160px; background: linear-gradient(transparent, #050507); pointer-events: none; }
.ring-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ring-stick { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 42%, #14141a 0%, #050507 60%); }
.ring-head { position: absolute; z-index: 5; left: 0; right: 0; top: 0; display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; width: min(1240px, 100% - 48px); margin: 0 auto; padding-top: 34px; }
.ring-k { width: 100%; font: 400 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #8a8a93; }
.ring-h { font: 600 clamp(26px, 3vw, 40px)/1.05 var(--sans); letter-spacing: -.03em; margin-right: auto; }
.ring-filter { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.04);
  color: #f4f4f5; font: 500 13px var(--sans); cursor: pointer; backdrop-filter: blur(8px); transition: background .2s, border-color .2s; }
.ring-filter:hover, .ring-filter[aria-expanded="true"] { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.ring-filter i { width: 14px; height: 10px; background: linear-gradient(currentColor 0 0) top / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) center / 66% 1.5px no-repeat, linear-gradient(currentColor 0 0) bottom / 33% 1.5px no-repeat; }
.rf-cur { padding: 2px 8px; border-radius: 999px; background: #f4f4f5; color: #050507; font: 500 11px var(--mono); }
.ring-doms { position: absolute; right: 0; top: calc(100% + 10px); display: flex; flex-wrap: wrap; gap: 6px; max-width: 560px; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  background: rgba(14,14,18,.92); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px #000; }
.ring-doms[hidden] { display: none; }
.ring-doms button { padding: 7px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: none; color: #d4d4d8; font: 500 13px var(--sans); cursor: pointer; }
.ring-doms button small { color: #71717a; font: 400 11px var(--mono); margin-left: 3px; }
.ring-doms button:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.ring-doms button.on { background: #f4f4f5; color: #050507; border-color: #f4f4f5; } .ring-doms button.on small { color: #52525b; }

.ring-view { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 50% 46%; cursor: grab; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ring-view:active { cursor: grabbing; }
.ring { position: absolute; left: 50%; top: 48%; width: 0; height: 0; transform-style: preserve-3d; }
.rc { --b: #888; position: absolute; left: 0; top: 0; width: 240px; height: 330px; padding: 0; border: 0; background: none; color: #f4f4f5; text-align: left; cursor: pointer; backface-visibility: hidden; will-change: transform; }
.rc-in { position: absolute; inset: 0; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.12); border-top: 2px solid var(--b); border-radius: 14px; background: linear-gradient(180deg, rgba(30,32,38,.96), rgba(12,13,16,.98)); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 50px -4px color-mix(in srgb, var(--b) 70%, transparent), 0 0 140px -20px color-mix(in srgb, var(--b) 85%, transparent);
  -webkit-box-reflect: below 18px linear-gradient(transparent 58%, rgba(255,255,255,.22));
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .4s, filter .4s; filter: brightness(.7) saturate(.85); }
.rc.on .rc-in, .rc:hover .rc-in, .rc:focus-visible .rc-in { filter: none; border-color: color-mix(in srgb, var(--b) 60%, #fff); }
.rc.on .rc-in { box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 60px -4px color-mix(in srgb, var(--b) 75%, transparent), 0 0 160px -20px color-mix(in srgb, var(--b) 90%, transparent); }
/* hover: the Outer Rim folder lift (rise, brand edge, art pushes in, a ↗ badge slides in) */
.rc:hover .rc-in, .rc:focus-visible .rc-in { transform: translateY(-10px); box-shadow: 0 40px 60px -30px #000, 0 0 0 1px color-mix(in srgb, var(--b) 45%, transparent), 0 0 70px -2px color-mix(in srgb, var(--b) 80%, transparent); }
.rc:focus-visible { outline: none; } .rc:focus-visible .rc-in { outline: 2px solid var(--b); outline-offset: 4px; }
.rc-go { position: absolute; z-index: 3; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f4f4f5; color: #050507; font-size: 15px;
  transform: translate(-6px, 6px) scale(.6); opacity: 0; transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .25s; }
.rc:hover .rc-go, .rc:focus-visible .rc-go { transform: none; opacity: 1; }
.rc-logo { transition: transform .8s cubic-bezier(.16,1,.3,1); } .rc:hover .rc-logo { transform: scale(1.06) translateY(-4px); }
.rc-art { position: relative; flex: 1; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(90% 80% at 50% 40%, color-mix(in srgb, var(--b) 85%, #fff 15%), color-mix(in srgb, var(--b) 70%, #000) 70%, #050507); }
.rc-art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 4px); mix-blend-mode: multiply; }
.rc-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%); transform: translateX(-100%); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.rc.on .rc-art::after { transform: translateX(100%); }
.rc-logo { position: relative; z-index: 1; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 24px; background: #fff; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6); }
.rc-logo img { width: 62%; height: 62%; object-fit: contain; }
.rc-ini { font: 700 30px var(--sans); color: #18181b; }
.rc-no { position: absolute; z-index: 1; left: 12px; top: 10px; font: 400 11px var(--mono); letter-spacing: .1em; color: rgba(255,255,255,.75); }
.rc-meta { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 0; min-width: 0; }
.rc-meta b { font: 600 15px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-meta span { font: 400 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8a8a93; white-space: nowrap; }
.rc-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 6px 14px 14px; min-height: 58px; font: 400 13.5px/1.4 var(--sans); color: #c4c4cc; }

body.lab-dark .ruler-x, body.lab-dark .ruler-y, body.lab-dark .coords { opacity: 0; transition: opacity .3s; }

/* the glossy floor the ring stands on */
.ring-floor { position: absolute; left: -20%; right: -20%; top: calc(48% + 186px); height: 70%; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.05), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 90px);
  transform: perspective(600px) rotateX(62deg); transform-origin: top; -webkit-mask: linear-gradient(#000, transparent 75%); mask: linear-gradient(#000, transparent 75%); }
.ring-floor::before { content: ""; position: absolute; left: 30%; right: 30%; top: 0; height: 2px; background: radial-gradient(closest-side, rgba(255,255,255,.4), transparent); }

.ring-foot { position: absolute; z-index: 5; left: 0; right: 0; bottom: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: end; gap: 28px; width: min(1240px, 100% - 48px); margin: 0 auto; }
.ring-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.ring-now b { font: 600 34px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ring-now span { font: 400 12px var(--mono); color: #71717a; } .ring-now i { font-style: normal; }
.ring-now p { width: 100%; margin-top: 6px; font: 400 13px var(--sans); color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ring-scrub { position: relative; height: 34px; cursor: ew-resize; touch-action: none; outline: none; }
.ring-scrub:focus-visible { outline: 1px solid rgba(255,255,255,.5); outline-offset: 4px; }
.rs-ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-end; }
.rs-ticks i { width: 1px; height: 10px; background: rgba(255,255,255,.22); }
.rs-ticks i.major { height: 18px; background: rgba(255,255,255,.5); }
.rs-head { position: absolute; bottom: -4px; width: 2px; height: 34px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px #fff; }
.rs-head::before { content: ""; position: absolute; left: 50%; top: -6px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; }
.ring-hint { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #71717a; white-space: nowrap; }
.ring-indep { margin: 0; padding: 26px 24px 0; background: #030305; color: #71717a; text-align: center; font-size: 12.5px; }

@media (max-width: 720px) {
  .ring-view { perspective: 700px; }
  .rc { width: 200px; height: 284px; } .rc-logo { width: 76px; height: 76px; border-radius: 20px; }
  .ring-floor { top: calc(48% + 162px); }
  .ring-head { padding-top: 26px; } .ring-doms { left: 0; right: auto; }
  .ring-foot { grid-template-columns: 1fr; gap: 12px; bottom: 18px; } .ring-hint { display: none; }
}

/* ---------- Finale: hello there, and back to the Outer Rim ---------- */
.space { --glow: #ff8a4c; --display: var(--sans); position: relative; background: linear-gradient(transparent, #030305 320px); color: #f4f4f5; overflow: hidden; isolation: isolate; }
.space-stage { position: absolute; inset: 0; z-index: 0; -webkit-mask: linear-gradient(transparent, #000 200px); mask: linear-gradient(transparent, #000 200px); }
.space-stage canvas { display: block; width: 100%; height: 100%; }
.space-stage::before { content: ""; position: absolute; inset: 0; opacity: .7;
  background: radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 72% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 42% 62%, #fff, transparent), radial-gradient(1px 1px at 86% 72%, #fff, transparent), radial-gradient(1px 1px at 22% 82%, #fff, transparent); }
.space-stage.live::before { display: none; }
.space.falling > :not(.space-stage) { opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.space > :not(.space-stage) { position: relative; z-index: 1; }
.space .wrap { width: min(1240px, 100% - 48px); margin: 0 auto; }
.sp-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding-top: 110px; }
.sp-kick { display: flex; align-items: center; gap: 12px; color: #a1a1aa; font: 400 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.sp-kick::before { content: ""; width: 24px; height: 1px; background: var(--glow); }
.sp-top h2 { margin-top: 22px; min-height: 2.1em; max-width: 13ch; font: 600 clamp(44px, 6.2vw, 92px)/.98 var(--sans); letter-spacing: -.04em; }
.sp-top h2 .caret { display: inline-block; width: .08em; height: .82em; margin-left: .06em; vertical-align: -.06em; background: var(--glow); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.sp-top p { margin-top: 22px; max-width: 46ch; color: #a1a1aa; font-size: 16px; } .sp-top p a { color: #f4f4f5; border-bottom: 1px solid #52525b; text-decoration: none; } .sp-top p a:hover { border-color: #f4f4f5; }
.obi { width: min(38%, 420px); height: auto; aspect-ratio: 760 / 487; object-fit: cover; flex: none; align-self: flex-end; -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); pointer-events: none; }
.bits-box { position: relative; display: block; pointer-events: auto !important; } .bits-cv { position: absolute; inset: 0; pointer-events: none; } .bits-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-mid { display: grid; place-items: center; min-height: clamp(620px, 96vh, 980px); padding: 40px 0 90px; }
.bh-anchor { position: relative; width: 260px; height: 260px; }
.bh-link { position: absolute; inset: 0; border-radius: 50%; }
.bh-link:focus-visible { outline: 2px solid var(--glow); outline-offset: 10px; }
.bh-hint { position: absolute; left: 50%; top: calc(100% + 34px); transform: translateX(-50%); white-space: nowrap; font: 400 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #a1a1aa; }
.bh-hint b { color: #ffb48a; font-weight: 400; }
.bh-css { position: absolute; inset: 22%; border-radius: 50%; background: #000; box-shadow: 0 0 0 3px #ffd3b0, 0 0 14px 4px var(--glow), 0 0 50px 10px rgba(255,138,76,.35); }
.space-stage.live ~ .sp-mid .bh-css { display: none; }
#ball-tip { position: absolute; left: 0; top: 0; z-index: 5; display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.95); color: #18181b; pointer-events: none; box-shadow: 0 12px 30px -12px #000; }
#ball-tip[hidden] { display: none; }
#ball-tip b { font: 600 14px var(--sans); } #ball-tip span { font: 400 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #71717a; }
#bh-cursor { position: fixed; left: 0; top: 0; z-index: 80; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--glow, #ff8a4c) calc(var(--hold, 0) * 360deg), rgba(255,255,255,.18) 0); -webkit-mask: radial-gradient(circle, transparent 6px, #000 7px); mask: radial-gradient(circle, transparent 6px, #000 7px); }
#bh-cursor::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
#bh-cursor[hidden] { display: none; }
.lab-foot { display: flex; justify-content: space-between; gap: 20px; padding: 26px 0 34px; border-top: 1px solid rgba(255,255,255,.08); font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #71717a; }
.lab-foot a { color: #d4d4d8; text-decoration: none; } .lab-foot a:hover { color: #fff; }
@media (max-width: 760px) {
  .sp-top { flex-direction: column; align-items: flex-start; padding-top: 70px; }
  .obi { width: 72%; align-self: flex-end; margin-top: 10px; }
  .bh-anchor { width: 190px; height: 190px; }
}

/* ---------- Fun / Space switch ---------- */
.mode-bar { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; padding: 10px 24px 34px; font: 400 13px var(--mono); color: var(--muted); }
.mode-sw { display: flex; gap: 4px; padding: 4px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.mode-sw button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 600 14px var(--sans); cursor: pointer; }
.mode-sw button small { font: 400 11px var(--mono); color: var(--faint); }
.mode-sw button i { font-style: normal; }
.mode-sw button[aria-selected="true"] { background: var(--ink); color: #fff; } .mode-sw button[aria-selected="true"] small { color: #c9c2ba; }
.mode-sw button[data-mode="space"][aria-selected="true"] { background: #050507; box-shadow: 0 0 18px -2px #7c5cff; }
body.mode-fun #ring-root { display: none; }
body.mode-space .all-sec { display: none; }
body.mode-space .mode-bar { color: var(--muted); }
body.mode-space .space { background: #030305; }

/* ---------- Space theme: the whole page goes to space, not just the challenges ---------- */
body.mode-space.on-home { background: #050507; }   /* other tabs (notes, system design) stay light and readable */
body.mode-space #challenges { background-color: #050507;
  background-image: radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7), transparent 1.5px), radial-gradient(1px 1px at 68% 9%, rgba(255,255,255,.5), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 38% 62%, rgba(255,255,255,.55), transparent 2px), radial-gradient(1px 1px at 86% 44%, rgba(190,210,255,.6), transparent 1.5px),
    radial-gradient(1px 1px at 24% 84%, rgba(255,255,255,.45), transparent 1.5px), radial-gradient(60% 45% at 50% 40%, rgba(124,92,255,.14), transparent 70%);
  background-size: 420px 420px, 380px 380px, 520px 520px, 460px 460px, 360px 360px, 100% 100vh; background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat; }
body.mode-space .ruler-x, body.mode-space .ruler-y, body.mode-space .coords { display: none !important; }
body.mode-space.on-home #challenges, body.mode-space.on-home .top .wrap { padding-left: 0; }
body.mode-space.on-home .toplinks a { color: #e4e4e7; }
body.mode-space.on-home .home-link { filter: invert(1) hue-rotate(180deg); }
body.mode-space .wordmark { color: #f4f4f5; text-shadow: 0 0 24px rgba(160,140,255,.45); }
body.mode-space .wm-frame { outline-color: rgba(160,140,255,.7); }
body.mode-space .wm-frame .frame-tag, body.mode-space .wm-frame .dims { background: #7c5cff; }
body.mode-space .hdl { background: #050507; border-color: #a78bfa; }
body.mode-space .hero-sub { color: #a1a1aa; } body.mode-space .hero-sub b { color: #f4f4f5; }
body.mode-space .fl { background: rgba(20,20,28,.75); border-color: rgba(255,255,255,.14); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 26px -4px color-mix(in srgb, var(--b) 70%, transparent); }
body.mode-space .fl img { background: #fff; border-radius: 8px; padding: 3px; }
body.mode-space .fl:hover { box-shadow: 0 0 40px -2px color-mix(in srgb, var(--b) 90%, transparent); }
body.mode-space .fl::after { background: #f4f4f5; color: #050507; }
body.mode-space .fl-arrows path { stroke: rgba(196,181,253,.7); }
body.mode-space .fl-note { color: #c4b5fd; }
body.mode-space .mode-bar { color: #a1a1aa; }
body.mode-space .mode-sw { background: rgba(20,20,28,.8); border-color: rgba(255,255,255,.2); box-shadow: 0 0 24px -8px #7c5cff; }
body.mode-space .mode-sw button { color: #e4e4e7; } body.mode-space .mode-sw button small { color: #71717a; }
body.mode-space .ring-sec::before { display: none; }
.mode-top { display: inline-flex; gap: 2px; padding: 3px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; }
.mode-top button { padding: 4px 10px; border: 0; border-radius: 999px; background: none; font: 500 12.5px var(--sans); color: var(--ink); cursor: pointer; }
.mode-top button[aria-selected="true"] { background: var(--ink); color: #fff; }
body.mode-space.on-home .mode-top { background: rgba(20,20,28,.8); border-color: rgba(255,255,255,.25); }
body.mode-space.on-home .mode-top button { color: #e4e4e7; } body.mode-space.on-home .mode-top button[aria-selected="true"] { background: #f4f4f5; color: #050507; }
#challenges, .top a, .wordmark, .fl { transition: background-color .5s, color .5s, box-shadow .5s, border-color .5s; }

/* ---------- The ring is the hero now: a simple space-lab room around it ---------- */
body.lab-room { background: #04060c; }
.lab-room .ring-sec { background: #04060c; }
.lab-room .ring-sec::before { display: none; }
.lab-room .ring-stick { background:
    linear-gradient(180deg, rgba(4,6,12,.0) 0 62%, #04060c 92%),
    repeating-linear-gradient(90deg, rgba(120,160,220,.05) 0 1px, transparent 1px 160px),
    linear-gradient(180deg, #0a1322 0%, #070b15 30%, #04060c 70%); }
/* the window: an angled viewport onto deep space, a planet's edge glowing in the corner */
.lab-room .ring-stick::before { content: ""; position: absolute; left: 50%; top: 15%; width: min(1180px, 92vw); height: 44%; transform: translateX(-50%);
  clip-path: polygon(4% 0, 38% 0, 42% 7%, 58% 7%, 62% 0, 96% 0, 100% 12%, 100% 88%, 96% 100%, 4% 100%, 0 88%, 0 12%);
  background:
    radial-gradient(1.2px 1.2px at 12% 30%, #fff, transparent), radial-gradient(1px 1px at 22% 70%, #cfe3ff, transparent), radial-gradient(1.4px 1.4px at 35% 18%, #fff, transparent),
    radial-gradient(1px 1px at 46% 55%, #fff, transparent), radial-gradient(1.2px 1.2px at 57% 28%, #bcd6ff, transparent), radial-gradient(1px 1px at 66% 80%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 74% 40%, #fff, transparent), radial-gradient(1px 1px at 84% 16%, #dfeaff, transparent), radial-gradient(1px 1px at 92% 62%, #fff, transparent),
    radial-gradient(1px 1px at 6% 82%, #fff, transparent), radial-gradient(1px 1px at 29% 44%, #9fc2ff, transparent), radial-gradient(1px 1px at 51% 88%, #fff, transparent),
    radial-gradient(circle at 92% 140%, rgba(120,200,255,.9) 0 33%, rgba(60,140,255,.35) 36%, transparent 48%),
    radial-gradient(70% 90% at 40% 50%, #0c1a3a, #050a18 70%);
  box-shadow: inset 0 0 0 2px rgba(110,200,255,.35); opacity: .9; }
/* the window frame's glow and two HUD chevrons */
.lab-room .ring-stick::after { content: ""; position: absolute; left: 50%; top: calc(15% + 22% - 20px); transform: translateX(-50%); width: min(1120px, 86vw); height: 40px; pointer-events: none; opacity: .6; filter: drop-shadow(0 0 8px rgba(80,230,255,.7));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M4 4l14 16-14 16M24 4l14 16-14 16' fill='none' stroke='%2350e6ff' stroke-width='5'/%3E%3C/svg%3E") left center / 60px 40px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M56 4L42 20l14 16M36 4L22 20l14 16' fill='none' stroke='%2350e6ff' stroke-width='5'/%3E%3C/svg%3E") right center / 60px 40px no-repeat; }
.lab-room .ring-head, .lab-room .ring-foot { z-index: 6; }
.ring-h small { display: block; margin-top: 10px; max-width: 46ch; font: 400 15px/1.5 var(--sans); letter-spacing: 0; color: #9aa6bd; }
.lab-room .ring-k { color: #6fd6ff; }
.rc-peek { position: absolute; inset: 0; z-index: 5; padding: 14px; background: rgba(4,8,16,.9); font: 400 11px/1.8 var(--mono); letter-spacing: .06em; color: var(--b); white-space: pre-wrap; text-align: left; }
.lab-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 28px max(24px, calc(50% - 620px)) 40px; background: #04060c; color: #6b7385; font-size: 12.5px; }
.lab-end a { color: #dfe7f5; font: 500 14px var(--sans); text-decoration: none; padding: 9px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; }
.lab-end a:hover { background: rgba(255,255,255,.08); }
@media (max-width: 720px) { .lab-room .ring-stick::after { display: none; } .lab-room .ring-stick::before { top: 22%; height: 34%; } }
.lab-room .ring-fx { opacity: .35; mix-blend-mode: screen; }
.lab-room .ring-stick::before, .lab-room .ring-stick::after { z-index: 1; }
.lab-room .ring-view { z-index: 2; }
.lab-room .top { position: absolute; z-index: 20; background: none; border: 0; }
.lab-room .top a, .lab-room .toplinks a { color: #dfe7f5; }
.lab-room .home-link { filter: invert(1); }
.lab-room .ring-head { padding-top: 84px; }