/* ── Tokens ───────────────────────────────────────────────────────────
   The palette is the research site's, so the family resemblance holds.
   Each subdomain owns one accent: research is gold (as "research." is on
   its own homepage), studios violet, music teal. */
:root{
  --bg:#06080b;
  --text:#e6eef0;
  --muted:#9fb2b9;
  --faint:#5d6e75;
  --line:rgba(255,255,255,.08);
  --gold:#e8b23c;
  --violet:#c183e7;
  --teal:#4fd1c4;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  display:flex;flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── Backdrop ─────────────────────────────────────────────────────────
   Three soft lights, one per accent, and a dot grid that fades out toward
   the edges. All static, so it costs nothing after the first paint. */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none}
.backdrop::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 45% at 50% -8%,rgba(129,84,214,.30),transparent 70%),
    radial-gradient(40% 35% at 8% 92%,rgba(79,209,196,.10),transparent 70%),
    radial-gradient(38% 32% at 94% 70%,rgba(232,178,60,.08),transparent 70%);
}
.backdrop::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 35%,#000 20%,transparent 75%);
          mask-image:radial-gradient(70% 60% at 50% 35%,#000 20%,transparent 75%);
}

main,footer{position:relative;z-index:1}
main{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:0 16px}

/* ── Intro ────────────────────────────────────────────────────────── */
.intro{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(44px,8vh,96px) 0 clamp(36px,6vh,64px);
}
.cube{
  width:76px;height:76px;
  filter:drop-shadow(0 0 22px rgba(161,108,255,.45));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-6px)}}

/* The cube is the door to your account. Signed in, it opens your account;
   signed out, the same address opens on Sign in. A label rises above it on
   hover or focus, and a small dot at its corner says you are signed in. */
.cubelink{
  position:relative;display:inline-flex;border-radius:22px;
  text-decoration:none;outline:none;
  -webkit-tap-highlight-color:transparent;
}
.cubelink .cube{transition:filter .4s var(--ease)}
.cubelink:hover .cube,.cubelink:focus-visible .cube{
  filter:drop-shadow(0 0 30px rgba(161,108,255,.75));
}
.cubelink:focus-visible{box-shadow:0 0 0 2px rgba(193,131,231,.8)}
.cubelabel{
  position:absolute;left:50%;bottom:calc(100% + 10px);
  transform:translate(-50%,6px);opacity:0;pointer-events:none;
  white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--text);
  padding:6px 13px;border-radius:999px;
  background:rgba(13,16,21,.9);border:1px solid rgba(255,255,255,.12);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.cubelink:hover .cubelabel,.cubelink:focus-visible .cubelabel{opacity:1;transform:translate(-50%,0)}
.cubedot{
  position:absolute;right:4px;bottom:6px;width:11px;height:11px;border-radius:50%;
  background:var(--teal);border:2px solid var(--bg);
  box-shadow:0 0 10px rgba(79,209,196,.7);
}
.cubedot[hidden]{display:none}
/* Your own status, as you set it on your account. Invisible shows here
   because this is you looking at yourself; nobody else sees this dot. */
.cubedot[data-s="busy"]{background:#e8b23c;box-shadow:0 0 10px rgba(232,178,60,.7)}
.cubedot[data-s="hidden"]{background:#7d8f97;box-shadow:none}
.cubedot[data-s="offline"]{background:#e06a6a;box-shadow:0 0 10px rgba(224,106,106,.6)}
.wordmark{margin:22px 0 0;line-height:0}
.wordmark img{width:min(380px,78vw);height:auto}
.eyebrow{
  margin-top:34px;
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--faint);
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before,.eyebrow::after{content:"";width:38px;height:1px;background:var(--line)}

/* ── Gallery ──────────────────────────────────────────────────────── */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px);
  padding-bottom:clamp(64px,10vh,110px);
}

.site{
  --accent:var(--gold);
  --accent-rgb:232,178,60;
  display:flex;flex-direction:column;
  color:inherit;text-decoration:none;
  opacity:0;transform:translateY(18px);
  animation:rise .9s var(--ease) forwards;
}
.site:nth-child(2){animation-delay:.12s}
.site:nth-child(3){animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}
.site.studios{--accent:var(--violet);--accent-rgb:193,131,231}
.site.music  {--accent:var(--teal);  --accent-rgb:79,209,196}

.index{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--faint);
  margin:0 0 12px 4px;
}
.index b{color:var(--accent);font-weight:400}

/* The window: a minimal browser frame around a pane of glass. */
.frame{
  position:relative;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.09);
  padding:0 7px 7px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease);
}
.bar{
  display:flex;align-items:center;gap:10px;
  height:38px;padding:0 6px;
}
.dots{display:flex;gap:6px;flex:none}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.url{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:22px;border-radius:7px;
  background:rgba(0,0,0,.35);
  font-family:var(--mono);font-size:11px;color:var(--muted);
  white-space:nowrap;overflow:hidden;
}
.url svg{flex:none;width:10px;height:10px;opacity:.7}
.url span{overflow:hidden;text-overflow:ellipsis}
.url em{font-style:normal;color:var(--accent)}
.dots-end{width:39px;flex:none}

.pane{
  position:relative;
  aspect-ratio:3/4;
  border-radius:10px;
  overflow:hidden;
  background:#0a0f13;
  isolation:isolate;
}

/* What is behind the glass. A live site shows its real homepage, which
   pans down to the footer while the pointer rests on the window. */
.view{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 0%;
  filter:saturate(.8) brightness(.78);
  transform:scale(1.02);
  transition:object-position 1.4s var(--ease),filter .8s var(--ease),transform .8s var(--ease);
}

/* The glass itself: a faint tint, a diagonal reflection, a lit top edge,
   a glare that follows the pointer, and a sheen that sweeps across on
   hover. Every layer is a gradient, so it scales to any window size. */
.glass{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(420px circle at var(--mx,30%) var(--my,10%),rgba(255,255,255,.10),transparent 45%),
    linear-gradient(125deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 28%,transparent 46%,transparent 70%,rgba(255,255,255,.04) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -60px 80px -40px rgba(0,0,0,.55);
}
.glass::after{
  content:"";position:absolute;top:-20%;bottom:-20%;width:38%;
  left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13) 45%,rgba(255,255,255,.04) 55%,transparent);
  transform:skewX(-14deg);
  transition:left 0s;
}

/* Text under each window. */
.meta{padding:20px 6px 0}
.title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.title h2{margin:0;font-size:22px;font-weight:650;letter-spacing:-.01em}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px 4px 9px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
  background:rgba(var(--accent-rgb),.08);
  border:1px solid rgba(var(--accent-rgb),.25);
  white-space:nowrap;
}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.live .chip i{animation:beat 2.4s ease-in-out infinite}
@keyframes beat{50%{opacity:.35;box-shadow:none}}
.meta p{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.6}
.enter{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--text);
}
.enter svg{width:14px;height:14px;color:var(--accent);transition:transform .5s var(--ease)}

/* ── Live window interaction ──────────────────────────────────────── */
@media (hover:hover){
  .framelink:hover .frame,.framelink:focus-visible .frame,.site:has(.enter:hover) .frame{
    transform:translateY(-6px);
    border-color:rgba(var(--accent-rgb),.45);
    box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4),0 0 60px -10px rgba(var(--accent-rgb),.28);
  }
  .framelink:hover .view,.framelink:focus-visible .view,.site:has(.enter:hover) .view{
    object-position:50% 100%;
    filter:none;transform:none;
    transition:object-position 9s cubic-bezier(.45,0,.4,1),filter .8s var(--ease),transform .8s var(--ease);
  }
  .framelink:hover .glass::after,.framelink:focus-visible .glass::after,.site:has(.enter:hover) .glass::after{left:130%;transition:left 1.3s var(--ease)}
  .enter:hover svg,.site:has(.framelink:hover) .enter svg{transform:translateX(4px)}
}
/* On a touch screen there is no hover, so the live view pans by itself. */
@media (hover:none){
  .live .view{filter:saturate(.9) brightness(.9);animation:pan 18s ease-in-out 1.2s infinite alternate}
  @keyframes pan{to{object-position:50% 100%}}
}
.framelink{display:block;color:inherit;text-decoration:none;border-radius:16px;outline:none;-webkit-tap-highlight-color:transparent}
.framelink:focus-visible .frame{outline:2px solid var(--accent);outline-offset:4px}
/* A tap gives its own small answer instead of the browser's grey block. */
.framelink:active .frame{transform:scale(.985);transition-duration:.15s}
a.enter{text-decoration:none;border-radius:6px;-webkit-tap-highlight-color:transparent;padding:4px 0}
a.enter:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
a.enter:active{opacity:.7}

/* ── Coming-soon windows ──────────────────────────────────────────────
   Nothing to show yet, so each pane holds a small moving picture of what
   is coming, under frosted glass. Not a link. */
.soon{cursor:default}
.scene{position:absolute;inset:0;overflow:hidden}
.frost{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(8,12,16,.28);
  -webkit-backdrop-filter:blur(9px) saturate(1.2);
          backdrop-filter:blur(9px) saturate(1.2);
}
.frost .soon-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--text);
  padding:9px 16px;border-radius:999px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);
}
.frost .soon-name{font-size:13px;color:var(--muted);font-family:var(--mono)}

/* Studios: drifting light through a letterboxed frame. */
.studios .scene{background:#0d0916}
.orb{position:absolute;border-radius:50%;filter:blur(30px);opacity:.8}
.orb.a{width:62%;height:42%;left:-6%;top:18%;background:#7b3fd6;animation:drift-a 14s ease-in-out infinite alternate}
.orb.b{width:55%;height:40%;right:-10%;top:40%;background:#c14fb8;animation:drift-b 17s ease-in-out infinite alternate}
.orb.c{width:40%;height:30%;left:30%;bottom:8%;background:#3a4fd6;animation:drift-a 19s ease-in-out infinite alternate-reverse}
@keyframes drift-a{to{transform:translate(28%,14%) scale(1.15)}}
@keyframes drift-b{to{transform:translate(-30%,-18%) scale(.9)}}
.letterbox::before,.letterbox::after{
  content:"";position:absolute;left:0;right:0;height:13%;background:#000;z-index:1;
}
.letterbox::before{top:0}
.letterbox::after{bottom:0}

/* Music: an equaliser, each bar on its own period so it never repeats
   visibly. The bars are drawn by the script below. */
.music .scene{
  background:radial-gradient(80% 60% at 50% 60%,rgba(79,209,196,.18),transparent 70%),#071012;
  display:flex;align-items:center;justify-content:center;gap:4%;
  padding:0 10%;
}
.eq{flex:1;height:58%;display:flex;align-items:center;gap:3px}
.eq i{
  flex:1;height:100%;border-radius:3px;
  background:linear-gradient(180deg,#9ff3ea,#4fd1c4 40%,#1d6f69);
  transform:scaleY(.15);
  animation:eq var(--d,1.2s) ease-in-out var(--o,0s) infinite alternate;
  opacity:.9;
}
@keyframes eq{to{transform:scaleY(var(--h,.8))}}

/* ── The Studios window ─────────────────────────────────────────────────
   A small Studios homepage behind the glass: its star field moving, its
   mark, and its line in its own serif (fonts copied from Studios, served
   from here, so no request leaves the hub). */
@font-face{font-family:"Instrument Serif";src:url("/fonts/instrument-serif-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/fonts/instrument-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PM Mark";src:url("/fonts/redhat-display-black-mark.woff2") format("woff2");font-weight:900;font-display:block}
@font-face{font-family:"PM Caps";src:url("/fonts/montserrat-semibold-mark.woff2") format("woff2");font-weight:600;font-display:block}
@font-face{font-family:"PM Word";src:url("/fonts/poppins-extrabold-mark.woff2") format("woff2");font-weight:800;font-display:swap}
.stscene{
  position:absolute;inset:0;overflow:hidden;container-type:size;
  background:radial-gradient(120% 70% at 50% 120%,rgba(46,40,140,.55),transparent 60%),linear-gradient(180deg,#040406 0%,#07070d 45%,#0c0d24 100%);
}
.stscene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stscene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 46% at 50% 50%,rgba(4,4,7,.88) 0%,rgba(4,4,7,.6) 55%,transparent 100%)}
/* The words stand in the middle of the window, in a pool of dark the
   field gathers around. A tall window stacks them; a wide one (a phone's,
   which is 4:3) sets the mark and the line side by side, a size larger,
   so neither has to shrink to fit the other. */
.stwords{
  position:absolute;z-index:2;left:6%;right:6%;top:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:min(7cqw,5cqh);
}

/* The Studios mark, measured from its master artwork (see Studios' own
   stylesheet): probability / .media / STUDIOS, centred in a stack. */
.stmark{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-size:min(9.7cqw,8.1cqh);font-family:"PM Mark",system-ui,sans-serif;font-weight:900}
.stmark .w1,.stmark .w2{display:block;line-height:.855;font-weight:900}
.stmark .w1{color:#fff;letter-spacing:-.04em;margin-right:.053em}
.stmark .w2{color:#8737fd;letter-spacing:-.016em;margin-right:.105em;margin-top:-.023em}
.stmark .box{margin-top:.36em;padding:.43em .09em .43em .8em;border:max(1px,.08em) solid #fff;font-family:"PM Caps",system-ui,sans-serif;font-weight:600;font-size:.4em;letter-spacing:.627em;line-height:1;color:#fff}
.stline{margin:0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;line-height:.95;letter-spacing:-.015em;color:#eeedf2;font-size:min(15.1cqw,11.9cqh)}
.stline em{font-style:italic;color:transparent;background:linear-gradient(100deg,#d7b6ff,#9b6bff 45%,#6c7bff);-webkit-background-clip:text;background-clip:text}
@container (orientation: landscape){
  .stwords{flex-direction:row;gap:min(7cqw,9cqh);text-align:left}
  .stmark{font-size:min(10.7cqw,8.9cqh)}
  .stline{font-size:min(16.6cqw,13.1cqh)}
}
.site.studios.live .chip i{background:#9b6bff;box-shadow:0 0 10px #9b6bff}

/* ── Footer ───────────────────────────────────────────────────────── */
/* Centred, like the intro it closes. No full-width rule: a hairline that
   fades out at both ends and glows violet in the middle, so the footer
   sits on the same backdrop as the page instead of in a band of its own.
   The motto's three dots carry the three subdomain accents. */
footer{padding:0 16px 44px}
.foot{
  max-width:1240px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;
}
.foot::before{
  content:"";align-self:stretch;height:1px;margin-bottom:30px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 22%,rgba(193,131,231,.38) 50%,rgba(255,255,255,.08) 78%,transparent);
}
.foot-cube{width:30px;height:30px;opacity:.9;filter:drop-shadow(0 0 12px rgba(161,108,255,.4))}
.motto{
  margin:2px 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);
}
.motto i{font-style:normal;margin:0 .25em}
.motto i:nth-of-type(1){color:var(--gold)}
.motto i:nth-of-type(2){color:var(--violet)}
.motto i:nth-of-type(3){color:var(--teal)}
.legal{font-size:13px}
.legal a{color:var(--muted);text-decoration:none;transition:color .2s}
.legal a:hover{color:var(--text)}
.legal .sep{margin:0 10px;color:var(--faint)}
.rights{margin:0;font-size:12px;color:var(--faint)}

/* ── Smaller screens ──────────────────────────────────────────────── */
@media (max-width:900px){
  .gallery{grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto;gap:56px}
  .pane{aspect-ratio:4/3}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .site{opacity:1;transform:none}
  .eq i{transform:scaleY(var(--h,.6))}
}
/* ── Research window: the motion piece ────────────────────────────────
   A 22 second loop told in four scenes, all drawn from the research
   homepage itself:
     A  the tesseract draws itself edge by edge inside its glass box
     B  the hero: "Patterns propagate through substrates."
     C  the spine: Engine, Library and Forum, lit by a pulse running the line
     D  the wordmark, then back to A
   Behind every scene the substrate lattice keeps propagating and the violet
   line keeps flowing, exactly as they do on the site.

   Everything is prefixed rm- so nothing here can collide with the hub's own
   .eyebrow, .title, .meta or .view. Sizes are container units, so the piece
   lays itself out the same in the 3:4 desktop window and the 4:3 phone one. */
.rm{
  position:absolute;inset:0;overflow:hidden;
  z-index:0;                     /* its own stack, so the hub's glass stays on top */
  container-type:size;
  background:radial-gradient(circle at 75% 15%,#202044 0,#090f13 42%);
  color:#d9e5e8;
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.rm canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.rm-back{z-index:0}
.rm-stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.rm-front{z-index:2}

/* At rest the window is a touch dim, like the screenshot it replaces; the
   pointer on the window brings it to full strength. */
.rm::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:rgba(6,8,11,.24);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){
  .framelink:hover .rm::after,.framelink:focus-visible .rm::after,.site:has(.enter:hover) .rm::after,.rm:hover::after{opacity:0}
}
@media (hover:none){ .rm::after{opacity:.35} }

.rm-scene{position:absolute;inset:0}

/* Timed elements. The script writes two numbers per element: --e, how far it
   has entered, and --x, how far it has left. Each kind of element decides
   for itself what entering looks like. */
[data-in]{--e:0;--x:0;opacity:calc(var(--e) * (1 - var(--x)))}
.rm-rise{transform:translateY(calc((1 - var(--e)) * .55em - var(--x) * .3em))}
.rm-soft{
  transform:translateY(calc((1 - var(--e)) * .28em - var(--x) * .2em));
  filter:blur(calc((1 - var(--e)) * 5px + var(--x) * 3px));
}

/* ── A: the figure ─────────────────────────────────────────────────── */
.rm-boxwrap{
  position:absolute;left:50%;top:47%;
  width:64cqmin;height:66cqmin;
  transform:translate(-50%,-50%);
}
.rm-box{
  position:absolute;inset:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:1.6cqmin;
  background:linear-gradient(180deg,rgba(17,27,32,.42),rgba(20,16,36,.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transform:scale(calc(.94 + .06 * var(--e) + .02 * var(--x)));
}
.rm-cap{
  position:absolute;left:0;right:0;bottom:4.2cqmin;
  text-align:center;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:2.35cqmin;letter-spacing:.2em;text-transform:uppercase;
  color:#a8bcc4;
}

/* ── B: the hero ───────────────────────────────────────────────────── */
.rm-b{
  display:flex;flex-direction:column;justify-content:center;
  padding:0 20cqw 0 8cqw;
}
.rm-eb{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:min(2.45cqw,2.9cqh);letter-spacing:.18em;text-transform:uppercase;
  color:#a98ce8;white-space:nowrap;
  margin-bottom:.9em;
}
.rm-h{
  --c:#d9e5e8;
  display:block;width:max-content;
  font-weight:700;
  font-size:min(11cqw,11.6cqh);
  line-height:.98;
  letter-spacing:-.005em;
  color:var(--c);
}
.rm-h.rm-teal{--c:#4fd1c4}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .rm-h{
    background-image:
      linear-gradient(101deg,transparent 41%,rgba(255,255,255,.46) 50%,transparent 59%),
      linear-gradient(var(--c),var(--c));
    background-size:300% 100%,100% 100%;
    background-repeat:no-repeat;
    background-position:100% 0,0 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:rm-shine 5.5s linear infinite;
  }
  .rm-h:nth-of-type(2){animation-delay:-.35s}
  .rm-h:nth-of-type(3){animation-delay:-.7s}
  .rm-h:nth-of-type(4){animation-delay:-1.05s}
}
/* Left to right, then a long rest off the right-hand edge. */
@keyframes rm-shine{
  0%  {background-position:100% 0,0 0}
  45%,100%{background-position:-60% 0,0 0}
}
.rm-p{
  margin:1.1em 0 0;
  max-width:62cqw;
  font-size:min(3.1cqw,3.6cqh);line-height:1.6;
  color:#a8bcc4;
}
.rm-p b{font-weight:600;color:#a8bcc4;transition:color .7s ease,text-shadow .7s ease}
.rm-p .rm-sub.rm-on{color:#e8b23c}
.rm-p .rm-name.rm-on{color:#d9e5e8;text-shadow:0 0 12px rgba(217,229,232,.35)}
.rm-p .rm-tld.rm-on{color:#c183e7}
.rm-p .rm-capl.rm-on{color:#4fd1c4}
.rm-p .rm-nw{white-space:nowrap}
.rm-gates{display:flex;gap:.7em;margin-top:1.35em;font-size:min(2.75cqw,3.2cqh)}
.rm-gate{
  display:inline-flex;align-items:center;
  padding:.62em 1.1em;border-radius:.6em;
  font-family:ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
  font-weight:600;white-space:nowrap;
  border:1px solid transparent;
  background:
    linear-gradient(#0b1317,#0b1317) padding-box,
    linear-gradient(100deg,#46BFB4,#6FA8E8,#A96BFF) border-box;
  color:#7fe0d5;
}
.rm-gate.rm-gold{
  background:
    linear-gradient(#0b1317,#0b1317) padding-box,
    linear-gradient(100deg,#E8B84B,#D89A4E,#A96BFF) border-box;
  color:#efc768;
}

/* ── C: the spine ──────────────────────────────────────────────────── */
.rm-c{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3.4cqmin;
}
.rm-card{
  --ac:79,209,196;--f:0;
  position:relative;
  width:min(80cqw,96cqh);
  padding:2.9cqmin 4.2cqmin 3.1cqmin;
  border-radius:1.8cqmin;
  background:rgba(12,20,26,.80);
  border:1px solid #22343c;
  box-shadow:0 0 calc(var(--f) * 7cqmin) rgba(var(--ac),calc(var(--f) * .45));
  transition:border-color .5s ease;
}
.rm-card.rm-on{border-color:rgba(var(--ac),.55)}
.rm-card-eb{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:2.2cqmin;letter-spacing:.18em;text-transform:uppercase;
  color:#a98ce8;
}
.rm-card-t{
  margin-top:.55em;
  font-size:4.6cqmin;font-weight:700;letter-spacing:-.005em;
  color:#e6eef0;transition:color .5s ease;
}
.rm-card.rm-on .rm-card-t{color:rgb(var(--ac))}
.rm-card-m{
  margin-top:.75em;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:2.3cqmin;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(var(--ac),.8);
}
.rm-card-m sub{font-size:.75em;vertical-align:-.2em}
.rm-card-n{
  position:absolute;right:4.2cqmin;top:2.9cqmin;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:2.2cqmin;letter-spacing:.14em;color:#5d6e75;
}

/* ── D: the wordmark ───────────────────────────────────────────────── */
.rm-d{
  display:flex;flex-direction:column;align-items:center;
  padding-top:57cqh;text-align:center;
  /* The wordmark sits on the line, so it carries a dark halo to read over it. */
  text-shadow:0 0 6px #090f13,0 0 16px #090f13,0 0 28px #090f13;
}
/* Typeset in the Research bar's own face (Poppins ExtraBold), so the
   window and the site behind it carry the same wordmark. */
.rm-word{
  font-family:"PM Word",Arial,sans-serif;font-weight:800;font-size:min(6cqw,7.4cqh);letter-spacing:-.01em;white-space:nowrap;
}
.rm-word .w1{color:#e8b23c}
.rm-word .w2{color:#e6eef0}
.rm-word .w3{color:#c183e7}
.rm-lab{margin-top:.8em;font-size:min(3.3cqw,3.9cqh);color:#a8bcc4}
.rm-motto{
  margin-top:1.6em;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:min(2.3cqw,2.8cqh);letter-spacing:.28em;text-transform:uppercase;
  color:#5d6e75;
}

/* Someone who asked for less motion gets one still frame: the hero, fully
   lit. The script draws it once and never starts the loop. */
@media (prefers-reduced-motion:reduce){
  .rm-h{animation:none}
}