/* stylelint-disable */

/* MakerSpace core: base-level tiles, zoom flight overlay, and the four app screens.
   Each direction page themes it through --rx-* tokens. */

.rx-embed, .rx-embed body { scrollbar-width: none; }
.rx-embed ::-webkit-scrollbar { display: none; }
.rx-embed .rx-standalone { display: none !important; }

/* ---------- Hub ---------- */
.rx-cam { pointer-events: none; position: relative; transform-style: preserve-3d; will-change: transform, filter; }
.rx-tiles { align-items: flex-start;
  display: flex;
  gap: var(--rx-gap, 28px); justify-content: center; perspective: 1400px; pointer-events: none; transform-style: preserve-3d;
}
.rx-tile {
  appearance: none; background: none; border: 0; color: inherit; cursor: pointer;
  display: flex; flex-direction: column;
  font: inherit; gap: 12px; margin: 0;
  opacity: calc(1 - var(--scatter, 0)); padding: 0; pointer-events: auto; text-align: left;
  transform: var(--place, translate3d(0,0,0)) translate3d(0, var(--fy, 0px), calc(var(--scatter, 0) * -700px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  width: var(--rx-tile-w, clamp(180px, 19vw, 300px));
}
.rx-tile-frame { aspect-ratio: 16 / 10; background: #000;
  border-radius: var(--rx-tile-r, 10px);
  box-shadow: var(--rx-tile-shadow, 0 30px 60px -20px rgba(0,0,0,.5)); display: block; max-width: 100%;
  outline: 1px solid var(--rx-tile-line, rgba(255,255,255,.18)); outline-offset: -1px; overflow: hidden;
  position: relative;
  transition: box-shadow .35s, outline-color .35s, transform .45s cubic-bezier(.2,.8,.2,1);
}
.rx-tile-screen { inset: 0; position: absolute; }
.rx-tile-glare {
  background: linear-gradient(115deg, rgba(255,255,255,.2), rgba(255,255,255,0) 42%); inset: 0; mix-blend-mode: screen; pointer-events: none;
  position: absolute;
}
.rx-tile:hover .rx-tile-frame { box-shadow: var(--rx-tile-shadow-hot, 0 40px 90px -20px rgba(228,0,43,.5)); outline-color: var(--rx-brand, #E4002B); transform: translateZ(40px) scale(1.03); }
.rx-tile:focus-visible { outline: none; }
.rx-tile:focus-visible .rx-tile-frame { outline: 2px solid var(--rx-brand, #E4002B); outline-offset: 4px; }
.rx-tile-meta { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.rx-tile-kicker { color: var(--rx-dim, #888); font: 500 11px/1.2 var(--rx-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; width: 100%; }
.rx-tile-name { color: var(--rx-fg, #fff); font: var(--rx-tile-font, 600 18px/1.2 system-ui, sans-serif); }
.rx-tile-cta { color: var(--rx-brand, #E4002B); font: 500 11px/1 var(--rx-mono, monospace); letter-spacing: .14em; margin-left: auto; opacity: 0; text-transform: uppercase; transform: translateX(-6px); transition: .3s; }
.rx-tile:hover .rx-tile-cta, .rx-tile:focus-visible .rx-tile-cta { opacity: 1; transform: none; }
.rx-tile.is-source .rx-tile-frame { visibility: hidden; }

@media (max-width: 720px), (max-height: 599px) {
  .rx-tiles { display: grid; gap: 22px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-tile { min-width: 0; opacity: 1; transform: translate3d(0, var(--fy, 0px), 0); width: auto; }
}

/* ---------- App screens (design size 960x600, scaled by --s) ---------- */
.rx-screen {
  font-family: "Geist", "Hanken Grotesk", system-ui, sans-serif; font-size: 13px;
  -webkit-font-smoothing: antialiased; height: 600px; left: 0; line-height: 1.4; overflow: hidden;
  position: absolute; text-align: left; top: 0; transform: scale(var(--s, 1));
  transform-origin: 0 0; width: 960px;
}
.rx-screen *, .rx-screen *::before, .rx-screen *::after { box-sizing: border-box; }
.rx-screen h1, .rx-screen h6, .rx-screen p, .rx-screen ol, .rx-screen figure { margin: 0; }
@keyframes rxpulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes rxin { from { opacity: 0; transform: translateY(-14px) } to { opacity: 1; transform: none } }

/* OmniEcho */
.scr-oe { background: #0A0E15; color: #D3DBE7; display: grid; grid-template-rows: 50px 1fr; }
.oe-top { align-items: center; border-bottom: 1px solid #1A2230; display: flex; gap: 14px; padding: 0 18px; }
.oe-logo { align-items: center; color: #F1F4F9; display: flex; font-size: 16px; font-weight: 650; gap: 9px; letter-spacing: .01em; }
.oe-logo i { border: 2px solid #FF3B55; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,59,85,.16), 0 0 0 8px rgba(255,59,85,.07); height: 14px; width: 14px; }
.oe-search { align-items: center; background: #111725; border: 1px solid #1A2230; border-radius: 7px; color: #56637A; display: flex; flex: 1; font-size: 12px; height: 30px; padding: 0 12px; }
.oe-live { align-items: center; color: #FF5A6E; display: flex; font: 600 11px/1 "JetBrains Mono", monospace; gap: 7px; letter-spacing: .1em; }
.oe-live b { animation: rxpulse 1.4s infinite; background: #FF5A6E; border-radius: 50%; height: 7px; width: 7px; }
.oe-sample { border: 1px solid #28324A; border-radius: 4px; color: #7F8BA0; font: 500 10px/1 "JetBrains Mono", monospace; letter-spacing: .1em; padding: 5px 7px; }
.oe-body { display: grid; grid-template-columns: 168px 1fr 248px; min-height: 0; }
.oe-rail { border-right: 1px solid #1A2230; color: #8793A8; display: flex; flex-direction: column; font-size: 12.5px; gap: 3px; padding: 16px 12px; }
.oe-rail h6 { color: #4F5B71; font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .14em; padding: 0 8px 8px; }
.oe-rail span { border-radius: 6px; padding: 7px 8px; }
.oe-rail span.on { background: #141C2B; color: #EEF2F8; }
.oe-rail span.lens { color: #FF8796; }
.oe-feed { display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 14px; }
.oe-card { animation: rxin .7s cubic-bezier(.2,.8,.2,1); background: #0F1520; border: 1px solid #1A2230; border-radius: 9px; display: grid; gap: 8px; padding: 12px 14px; }
.oe-card:first-child { background: #141320; border-color: #3A2330; }
.oe-meta { color: #5F6B80; display: flex; font: 500 10.5px/1 "JetBrains Mono", monospace; gap: 10px; letter-spacing: .06em; text-transform: uppercase; }
.oe-head { color: #EEF2F8; font-size: 15px; font-weight: 600; line-height: 1.3; }
.oe-lenses { display: flex; gap: 6px; }
.oe-lenses em { border: 1px solid #28324A; border-radius: 999px; color: #97A3B8; font: normal 500 10.5px/1 "JetBrains Mono", monospace; padding: 4px 8px; }
.oe-lenses em.hot { border-color: #FF3B55; color: #FF8796; }
.oe-lens { border-left: 1px solid #1A2230; color: #A7B2C4; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.oe-lens h6 { color: #FF8796; font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .14em; }
.oe-lens-head { color: #EEF2F8; font-size: 14px; font-weight: 600; line-height: 1.35; min-height: 56px; }
.oe-lens ol { display: grid; font-size: 12.5px; gap: 9px; line-height: 1.4; padding-left: 18px; }
.oe-lens ol li::marker { color: #FF5A6E; font-family: "JetBrains Mono", monospace; }

/* Rec-Man */
.scr-rm { background: #0A0614; }
.scr-rm canvas { display: block; height: 600px; inset: 0; position: absolute; width: 960px; }

/* MCP server */
.scr-mcp { background: #0D0E11; color: #D7DBE2; display: grid; grid-template-columns: 330px 1fr; }
.mcp-chat { background: #121419; border-right: 1px solid #22252C; display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.mcp-chat h6, .mcp-term h6 { color: #6B7280; display: flex; font: 600 10px/1 "JetBrains Mono", monospace; justify-content: space-between; letter-spacing: .14em; text-transform: uppercase; }
.mcp-msg { border-radius: 12px; font-size: 13.5px; line-height: 1.5; max-width: 94%; padding: 11px 13px; }
.mcp-msg.user { align-self: flex-end; background: #262A33; color: #F2F4F7; }
.mcp-msg.agent { border: 1px solid #2B2F38; color: #C9CED7; opacity: 0; transition: opacity .6s; }
.mcp-msg.agent.on { opacity: 1; }
.mcp-who { color: #6B7280; font: 500 10px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.mcp-term { display: flex; flex-direction: column; font: 12.5px/1.75 "JetBrains Mono", ui-monospace, monospace; gap: 2px; overflow: hidden; padding: 18px 22px; }
.mcp-term h6 { margin-bottom: 10px; }
.mcp-term .ln { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; white-space: pre-wrap; }
.mcp-term .ln.on { opacity: 1; transform: none; }
.ln .k { color: #8AB4FF } .ln .s { color: #A6E3A1 } .ln .r { color: #FF6B7C } .ln .d { color: #6B7280 } .ln .w { color: #F2F4F7 }
.mcp-cursor { animation: rxpulse 1s steps(1) infinite; background: #D7DBE2; display: inline-block; height: 15px; vertical-align: -2px; width: 8px; }

/* MakerSpace research */
.scr-rx { background: #EDF0F3; color: #14171B; display: grid; grid-template-rows: 46px 1fr; }
.rxr-mast { align-items: center; border-bottom: 1px solid #CDD3DA; color: #4A525C; display: flex; font-size: 12.5px; gap: 22px; padding: 0 26px; }
.rxr-brand { color: #14171B; font: 600 18px/1 "Newsreader", Georgia, serif; letter-spacing: -.01em; }
.rxr-brand b { color: #6A2BE0; }
.rxr-mast .on { color: #14171B; font-weight: 600; }
.rxr-mast .sub { color: #6B737D; font: 500 10px/1 "JetBrains Mono", monospace; letter-spacing: .14em; margin-left: auto; text-transform: uppercase; }
.rxr-art { display: grid; gap: 30px; grid-template-columns: 380px 1fr; min-height: 0; padding: 30px 30px 24px 34px; }
.rxr-text { display: flex; flex-direction: column; gap: 14px; }
.rxr-eyebrow { color: #6A2BE0; font: 500 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
.rxr-text h1 { font: 600 50px/1.0 "Newsreader", Georgia, serif; letter-spacing: -.02em; }
.rxr-deck { color: #2E343B; font: 400 18px/1.4 "Newsreader", Georgia, serif; }
.rxr-by { color: #6B737D; font: 500 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.rxr-p { color: #333A42; font-size: 13.5px; line-height: 1.6; }
.rxr-fig { align-items: center; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.rxr-fig svg { height: 360px; overflow: visible; width: 360px; }
.rxr-cap { align-content: start; display: grid; gap: 6px; min-height: 72px; text-align: center; width: 340px; }
.rxr-cap b { font: 600 22px/1.1 "Newsreader", Georgia, serif; }
.rxr-cap span { color: #3C434B; font-size: 12.5px; line-height: 1.45; }
.rxr-seg { transition: stroke .5s, stroke-width .5s; }
.rxr-lbl { fill: #5A626C; font: 500 10.5px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; transition: fill .4s; }
.rxr-lbl.on { fill: #6A2BE0; }
.rxr-hand { transition: transform 1s cubic-bezier(.6,0,.2,1); }

/* ---------- Flight overlay ---------- */
.rx-ov { inset: 0; position: fixed; z-index: 1000; }
.rx-ov-shade { background: #05070A; inset: 0; opacity: calc(var(--k, 0) * .55); position: absolute; }
.rx-streaks { height: 100%; inset: 0; pointer-events: none; position: absolute; width: 100%; z-index: 2; }
.rx-ov-box { box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 60px 160px -40px rgba(0,0,0,.85); overflow: hidden; position: absolute; z-index: 1; }
.rx-ov-fit { height: 600px; left: 0; position: absolute; top: 0; transform-origin: 0 0; width: 960px; }
.rx-ov-fit .rx-screen { transform: none; }
.rx-ov-ui { color: #F3F5F8; font-family: "Geist", "Hanken Grotesk", system-ui, sans-serif; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .45s; z-index: 3; }
.rx-ov.is-open .rx-ov-ui { opacity: 1; }
.rx-ov-bar { align-items: center;
  background: #07090C; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; left: 0;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 18px; pointer-events: auto;
  position: absolute; right: 0; top: 0;
}
.rx-ov-crumb { color: rgba(243,245,248,.72); font: 500 12px/1.3 var(--rx-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; }
.rx-ov-crumb b { color: #fff; font-weight: 600; }
.rx-ov-crumb i { font-style: normal; margin: 0 6px; opacity: .4; }
.rx-ov button { cursor: pointer; font: inherit; }
.rx-ov-close { align-items: center; backdrop-filter: blur(8px);
  background: rgba(10,12,16,.62); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff;
  display: inline-flex; font-size: 14px; gap: 10px;
  min-height: 44px; padding: 0 16px;
}
.rx-ov-close kbd { border: 1px solid rgba(255,255,255,.3); border-radius: 4px; font: 11px var(--rx-mono, monospace); opacity: .6; padding: 1px 5px; }
.rx-ov-info { align-items: center;
  background: #07090C; border-top: 1px solid rgba(255,255,255,.1); bottom: 0;
  display: grid; gap: 10px 32px; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto; left: 0;
  padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0px)); pointer-events: auto;
  position: absolute; right: 0;
  transform: translateY(18px); transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.rx-ov.is-open .rx-ov-info { transform: none; }
.rx-ov-id { display: grid; gap: 6px; min-width: 0; }
.rx-ov-kicker { color: var(--rx-accent-text, #FF6B7C); font: 500 11px/1.2 var(--rx-mono, monospace); letter-spacing: .16em; text-transform: uppercase; }
.rx-ov-info h2 { font: var(--rx-ov-title, 600 28px/1.1 system-ui, sans-serif); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.rx-ov-info p { color: rgba(243,245,248,.84); font-size: 15px; line-height: 1.55; margin: 0; max-width: 70ch; }
.rx-ov-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; }
.rx-ov-launch { background: var(--rx-brand, #E4002B); border: 0; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 20px; }
.rx-ov-status { align-items: center; color: rgba(243,245,248,.66); display: inline-flex; font: 500 11px/1 var(--rx-mono, monospace); gap: 8px; letter-spacing: .14em; text-transform: uppercase; }
.rx-ov-status::before { background: #3DDC84; border-radius: 50%; box-shadow: 0 0 8px #3DDC84; content: ""; height: 7px; width: 7px; }
.rx-ov-info .rx-ov-note { color: rgba(243,245,248,.62); font-size: 13px; grid-column: 1 / -1; }
.rx-ov-close:focus-visible, .rx-ov-launch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 900px) { .rx-ov-info { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px), (max-height: 599px) {
  .rx-ov-info { gap: 8px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .rx-ov-info h2 { font-size: 22px; }
  .rx-ov-info p { font-size: 14px; }
  .rx-ov-crumb { display: none; }
}

/* Shared standalone controls */
.rx-play { align-items: center; border-radius: 999px; cursor: pointer; display: inline-flex; font: 500 12px/1 var(--rx-mono, monospace); gap: 10px;
  letter-spacing: .12em;
  min-height: 44px; padding: 0 16px; text-transform: uppercase;
}
.rx-play::before { border-bottom: 5px solid transparent; border-left: 8px solid currentColor; border-top: 5px solid transparent; content: ""; height: 0; width: 0; }
.rx-play[aria-pressed="true"]::before { border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; height: 10px; width: 8px; }

@media (prefers-reduced-motion: reduce) {
  .rx-tile-frame, .rx-tile-cta, .rx-ov-ui, .rx-ov-info { transition: none; }
  .oe-card { animation: none; }
}