@charset "UTF-8";
/* Prism website — the landing page. Shared chrome is in assets/site.css; tokens in assets/rf/prism.css. */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center;gap:24px;padding-top:84px;padding-bottom:72px}
.hero-copy{position:relative;z-index:1}
main{overflow-x:clip}   /* the hero art bleeds to the viewport edge; nothing scrolls sideways */
/* Perf: sections past the first screen skip style, layout and paint until they near the viewport (sizes are remembered
   once rendered), so loading and a Day/Night switch restyle about a third fewer elements. */
main>section:not(.hero),.site-footer{content-visibility:auto;contain-intrinsic-size:auto 640px}
/* fluid display tier (tokens › type › hero): ~88px at 1440, 112px at 1920 */
.hero h1{margin:22px 0 22px;font-size:var(--rf-fs-hero,clamp(46px,5vw + 16px,112px));line-height:var(--rf-lh-hero,1.02);letter-spacing:var(--rf-ls-hero,var(--rf-ls-display));font-weight:700}
.hero-description{max-width:460px;font-size:var(--rf-fs-lead);line-height:var(--rf-lh-lead);letter-spacing:var(--rf-ls-lead);color:var(--muted)}
.hero-description em{font-style:normal;color:var(--ink)}
.hero-sub{max-width:460px;margin-top:12px;font-size:14px;line-height:1.55;color:var(--muted)}
.hero-sub b{font-weight:600;color:var(--ink)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* Live text effects in the hero (the same recipes as text-neon-sign and text-datamosh-glitch).
   The stage is lit ink in Night and Day alike: neon needs the dark to glow. */
.hero-fx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:470px;margin-top:22px}
.fx-tile{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);box-shadow:var(--elev-1);overflow:hidden;transition:border-color var(--rf-dur-fast),transform var(--rf-dur-base) var(--rf-ease-out-expo)}
.fx-tile:hover{border-color:var(--rf-line-strong);transform:translateY(-1px)}
.fx-stage{position:relative;display:flex;align-items:center;justify-content:center;height:64px;background:radial-gradient(80% 90% at 50% 40%,#171a2a,#08090e);contain:paint}
.fx-cap{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;border-top:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.fx-tile.is-more .fx-cap{color:var(--accent)}
.fx-neon{position:relative;z-index:0;font:700 23px/1 var(--font);letter-spacing:.04em;color:#fff;--c:236,131,152;animation:fx-neon 4.5s linear infinite}
/* Perf: the glow is a static text-shadow on its own layer beneath the letters; the flicker animates opacity only, on the compositor (an animated text-shadow repainted the page every frame). */
.fx-neon::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;color:transparent;text-shadow:0 0 4px #fff,0 0 11px rgba(var(--c),.9),0 0 22px rgba(var(--c),.7),0 0 42px rgba(var(--c),.5);animation:fx-neon-glow 4.5s linear infinite;pointer-events:none}
@keyframes fx-neon{0%,19%,21%,55%,57%,100%{opacity:1}20%,56%{opacity:.45}}
@keyframes fx-neon-glow{0%,19%,21%,55%,57%,100%{opacity:1}20%,56%{opacity:0}}
.fx-glitch{position:relative;font:700 21px/1 var(--font);letter-spacing:-.01em;color:#c9b6ff}
.fx-glitch::before,.fx-glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none}
.fx-glitch::before{left:2px;color:#33ddff;text-shadow:-1px 0 #33ddff;animation:fx-glitch-a 2.4s steps(2) infinite}
.fx-glitch::after{left:-2px;color:#ff4fb0;text-shadow:1px 0 #ff4fb0;animation:fx-glitch-b 2.8s steps(2) infinite}
@keyframes fx-glitch-a{0%,100%{clip-path:inset(0 0 85%);transform:translate(0)}20%{clip-path:inset(20% 0 55%);transform:translate(-3px)}40%{clip-path:inset(60% 0 10%);transform:translate(3px)}60%{clip-path:inset(10% 0 70%);transform:translate(-2px)}80%{clip-path:inset(45% 0 35%);transform:translate(2px)}}
@keyframes fx-glitch-b{0%,100%{clip-path:inset(70% 0 5%);transform:translate(0)}25%{clip-path:inset(15% 0 60%);transform:translate(3px)}50%{clip-path:inset(55% 0 20%);transform:translate(-3px)}75%{clip-path:inset(30% 0 50%);transform:translate(2px)}}
.fx-more{display:flex;flex-direction:column;align-items:center;gap:3px;font:400 10.5px/1 var(--rf-mono);letter-spacing:.12em;text-transform:uppercase;color:#a9aec4}
.fx-more b{font:700 22px/1 var(--font);letter-spacing:-.03em;background:linear-gradient(90deg,#c1a8f8,#8fb0ff,#7fd6e6,#a0decf);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Perf: pausing is a class on the animated regions (app.js setMotion), not a root-attribute rule ending in * — that invalidated every element on the page. */
.hero-fx.is-paused *,.hero-fx.is-paused *::before,.hero-fx.is-paused *::after{animation-play-state:paused!important}
/* Day: pearl glass, not black slabs. The stage is a lit pearl pane with an iridescent top edge; the neon tube is a
   deep rose with a coloured halo (daylight neon); the glitch keeps its split in print-strength cyan/magenta. */
:root[data-rf-mode="day"] .fx-tile{background:var(--panel);border-color:var(--rf-line-soft,var(--line))}
:root[data-rf-mode="day"] .fx-stage{background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.98),rgba(255,255,255,0) 60%),linear-gradient(160deg,#f7f5fc,#eeeaf7 55%,#e8f1f3);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(115,83,187,.10)}
:root[data-rf-mode="day"] .fx-stage::after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(214,52,104,.35),rgba(36,104,222,.35),transparent);opacity:.8}
:root[data-rf-mode="day"] .fx-neon{color:#b62a55;--c:222,95,125}
:root[data-rf-mode="day"] .fx-neon::before{text-shadow:0 0 1px rgba(182,42,85,.55),0 0 9px rgba(var(--c),.55),0 0 20px rgba(var(--c),.35)}
:root[data-rf-mode="day"] .fx-glitch{color:#4b2f99}
:root[data-rf-mode="day"] .fx-glitch::before{color:#0079a8;text-shadow:-1px 0 #0079a8}
:root[data-rf-mode="day"] .fx-glitch::after{color:#c21b78;text-shadow:1px 0 #c21b78}
:root[data-rf-mode="day"] .fx-more{color:#5f6379}
:root[data-rf-mode="day"] .fx-more b{background:linear-gradient(90deg,#7353bb,#4f63c4,#0f7d8c,#2f8f6a);-webkit-background-clip:text;background-clip:text}
.hero-note{margin-top:18px;font:400 11px/1.4 var(--rf-mono);letter-spacing:.02em;color:var(--dim)}
.hero-new{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:var(--rf-r-pill);background:var(--panel);font-size:12px;color:var(--muted);box-shadow:var(--elev-1);transition:border-color var(--rf-dur-fast),color var(--rf-dur-fast)}
.hero-new:hover{border-color:rgba(var(--rf-surf-deck-rgb),.6);color:var(--ink)}
.hero-new-tag{padding:4px 8px;border-radius:var(--rf-r-pill);background:var(--rf-surf-deck-v);color:#1c1206;font:600 9px/1 var(--rf-mono);letter-spacing:.12em}
:root[data-rf-mode="day"] .hero-new-tag{background:var(--rf-surf-deck);color:#fff}
.hero-new .ic{color:var(--rf-surf-deck)}

/* Banners from the site kit (jeremyfhall.com/kit): an in-flow banner lands in [data-jfhkit-slot] above the hero,
   before first paint, and the slot is empty (no height) otherwise. The kit's script tag sits between the slot and the
   hero. The host gets the page's column and the old strip's spacing; the look comes from the banner's style. */
[data-jfhkit-slot]>.jk-p-inline{max-width:var(--site-max);padding:20px var(--site-pad) 0}
[data-jfhkit-slot]:not(:empty)+script+.hero{padding-top:52px}
@media(min-width:1500px){[data-jfhkit-slot]:not(:empty)+script+.hero{padding-top:64px}}
@media(max-width:860px){[data-jfhkit-slot]:not(:empty)+script+.hero{padding-top:36px}}
@media(max-width:600px){[data-jfhkit-slot]>.jk-p-inline{padding-top:16px}[data-jfhkit-slot]:not(:empty)+script+.hero{padding-top:22px}}

/* The art: FIG. 001. A beam of white light, the glass pyramid (design/brand), the spectrum.
   Night is volumetric light on ink; Day is a printed optics diagram on pearl paper. */
.hero-art{--hero-delay:0ms;position:relative;margin:0;width:100%;aspect-ratio:580/420;container-type:inline-size;isolation:isolate}
/* full First Light: the intro prism morphs into this one (PrismFirstLight hero mode) and hands it over already lit,
   so the art skips its own entrance (a negative delay = already played) */
:root[data-fl="full"] .hero-art{--hero-delay:-4s}
:root[data-fl="echo"] .hero-art{--hero-delay:180ms}
.art-grid{position:absolute;inset:4% -2%;z-index:-2;background-image:linear-gradient(var(--rf-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--rf-grid-line) 1px,transparent 1px);background-size:var(--rf-grid-cell) var(--rf-grid-cell);background-position:center;-webkit-mask-image:radial-gradient(ellipse 52% 56% at 48% 47%,#000 12%,transparent 74%);mask-image:radial-gradient(ellipse 52% 56% at 48% 47%,#000 12%,transparent 74%)}
.art-halo{position:absolute;z-index:-1;left:22%;top:8%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--rf-halo),transparent);filter:blur(30px)}
:root[data-rf-mode="day"] .art-halo{left:14%;top:2%;width:64%;background:var(--rf-iris);filter:blur(42px);opacity:.85;border-radius:50%}
.art-light{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* the glass pyramid sits where the beam lands (box 164,58 · 232 in the 580×420 art) */
.hero-pyramid.prism-mark{position:absolute;left:28.276%;top:13.81%;--pm:40cqw;--pm-turn:24s}
/* spectrum stops — Night vivid (glow on ink), Day vivid (ink on paper) */
.hero-art{--s0:var(--rf-s-violet-v);--s1:var(--rf-s-periwinkle-v);--s2:var(--rf-s-azure-v);--s3:var(--rf-s-cyan-v);--s4:var(--rf-s-jade-v);--s5:var(--rf-s-citrine-v);--s6:var(--rf-s-rose-v)}
.art-light .s0{stop-color:var(--s0)}.art-light .s1{stop-color:var(--s1)}.art-light .s2{stop-color:var(--s2)}.art-light .s3{stop-color:var(--s3)}.art-light .s4{stop-color:var(--s4)}.art-light .s5{stop-color:var(--s5)}.art-light .s6{stop-color:var(--s6)}
/* physically true dispersion: violet (s0) bends most → the bottom ray; rose (s6) bends least → the top */
.art-wedges .w0{fill:var(--s6)}.art-wedges .w1{fill:var(--s5)}.art-wedges .w2{fill:var(--s4)}.art-wedges .w3{fill:var(--s3)}.art-wedges .w4{fill:var(--s2)}.art-wedges .w5{fill:var(--s1)}.art-wedges .w6{fill:var(--s0)}
.art-cores .c0{stroke:var(--s6)}.art-cores .c1{stroke:var(--s5)}.art-cores .c2{stroke:var(--s4)}.art-cores .c3{stroke:var(--s3)}.art-cores .c4{stroke:var(--s2)}.art-cores .c5{stroke:var(--s1)}.art-cores .c6{stroke:var(--s0)}
.art-wedges path{opacity:.3;filter:url(#art-soft)}
.art-cores path{fill:none;stroke-width:1;opacity:.95}
.art-haze{opacity:.28}.art-haze-inner{opacity:.2}
.art-light .sb0{stop-color:#fff;stop-opacity:0}.art-light .sb1{stop-color:#eef0ff;stop-opacity:.55}.art-light .sb2{stop-color:#fff;stop-opacity:1}
.art-light .fl0{stop-color:#fff;stop-opacity:.95}.art-light .fl1{stop-color:#dce4ff;stop-opacity:.55}.art-light .fl2{stop-color:#a9b8f0;stop-opacity:0}
.art-beam-bloom{opacity:.7}
.art-inner{fill:none;stroke:#fff;stroke-opacity:.55;stroke-width:1.2}
.art-day-only{display:none}
/* Day: the beam is ink-light, rays are printed in multiply, plus the diagram's construction */
:root[data-rf-mode="day"] .art-light .sb1{stop-color:var(--accent);stop-opacity:.75}
:root[data-rf-mode="day"] .art-light .sb2{stop-color:var(--rf-accent-hi);stop-opacity:1}
:root[data-rf-mode="day"] .art-light .fl0{stop-color:#fff;stop-opacity:1}
:root[data-rf-mode="day"] .art-light .fl1{stop-color:#e3dbff;stop-opacity:.75}
:root[data-rf-mode="day"] .art-light .fl2{stop-color:#cbbdf5;stop-opacity:0}
:root[data-rf-mode="day"] .art-beam-bloom{opacity:.28}
:root[data-rf-mode="day"] .art-inner{stroke:var(--accent);stroke-opacity:.55}
:root[data-rf-mode="day"] .art-rays{mix-blend-mode:multiply}
:root[data-rf-mode="day"] .art-wedges path{opacity:.32}
:root[data-rf-mode="day"] .art-cores path{opacity:.9}
:root[data-rf-mode="day"] .art-haze{opacity:.22}
:root[data-rf-mode="day"] .art-haze-inner{opacity:.14}
:root[data-rf-mode="day"] .art-day-only{display:inline}
.art-floor{fill:none;stroke:var(--rf-line-strong);stroke-width:1}
.art-floor-ticks{fill:none;stroke:var(--rf-line-strong);stroke-width:5;stroke-dasharray:1 16.5}
.art-shadow{fill:rgba(64,40,150,.16)}
.art-caustic{opacity:.55}
.art-undeviated{fill:none;stroke:var(--rf-faint);stroke-width:1;stroke-dasharray:3 4}
.art-arc{fill:none;stroke:var(--muted);stroke-width:1}
.art-screen rect{opacity:.9}
.art-scale{fill:none;stroke:var(--dim);stroke-width:1}
.art-screen text{font:500 8px var(--rf-mono);fill:var(--dim);letter-spacing:.06em}
.art-screen .art-delta{font:italic 400 11px var(--font);fill:var(--muted)}
.art-label,.art-coordinate{position:absolute;margin:0;font:600 9px/1 var(--rf-mono);letter-spacing:.15em;color:var(--dim);white-space:nowrap}
.art-label-in{left:2%;top:49.5%}
.art-label-out{right:0;top:79%;color:var(--accent)}
.art-coordinate{left:0;right:0;bottom:1%;text-align:center;font-size:8.5px;font-weight:400}
.lam{text-transform:none}
/* arrival — picks up as First Light hands over (data-fl full/echo); settled ~1.1s after it */
.art-beam{transform-box:view-box;transform-origin:0 192px;animation:art-beam-in .7s var(--rf-ease-out) var(--hero-delay) both}
.hero-pyramid{animation:art-materialize .6s var(--rf-ease-out) var(--hero-delay) both}
.art-rays{transform-box:view-box;transform-origin:326px 192px;animation:art-fan .9s var(--rf-ease-out-expo) calc(var(--hero-delay) + .25s) both}
.art-haze{animation:art-breathe 7s ease-in-out calc(var(--hero-delay) + 1.2s) infinite}
.art-flare{transform-box:fill-box;transform-origin:center;animation:art-flare 6s ease-in-out calc(var(--hero-delay) + 1.2s) infinite}
.art-label-in{animation:art-label .5s var(--rf-ease-out) calc(var(--hero-delay) + .2s) both}
.art-label-out{animation:art-label .5s var(--rf-ease-out) calc(var(--hero-delay) + .7s) both}
.art-coordinate{animation:art-label .5s var(--rf-ease-out) calc(var(--hero-delay) + .8s) both}
.art-day-only{animation:art-label .6s var(--rf-ease-out) calc(var(--hero-delay) + .6s) both}
@keyframes art-beam-in{from{opacity:0;transform:scaleX(.04)}to{opacity:1;transform:none}}
@keyframes art-materialize{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes art-fan{from{opacity:0;transform:rotate(-6deg) scale(.08,.15)}to{opacity:1;transform:none}}
@keyframes art-breathe{0%,100%{opacity:.22}50%{opacity:.36}}
@keyframes art-flare{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes art-label{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
:root[data-rf-mode="day"] .art-haze{animation-name:art-breathe-day}
@keyframes art-breathe-day{0%,100%{opacity:.18}50%{opacity:.27}}
/* motion off / off-screen: hold still (compositor work stops) */
.hero-art.is-paused *,.hero-art.is-offscreen *,.brand .prism-mark.is-paused *{animation-play-state:paused!important}

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stats>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 0 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.stats>div+div::before{content:"";position:absolute;left:0;top:28px;width:1px;height:48px;background:linear-gradient(180deg,transparent,var(--line),transparent)}
.stats>div::after{content:"";position:absolute;left:50%;top:-1px;width:44px;height:1px;margin-left:-22px;background:linear-gradient(90deg,rgba(var(--rf-hue-rgb),0),rgba(var(--rf-hue-rgb),.9),rgba(var(--rf-hue-rgb),0));opacity:.8}
.stat-label{font:600 9px/1 var(--rf-mono);letter-spacing:.15em;color:var(--rf-hue);margin-bottom:6px}
.stat-label .lam{color:var(--dim);font-weight:400;margin-left:4px}
.stats strong{font-size:32px;line-height:1.15;letter-spacing:-.04em;font-weight:700;font-variant-numeric:tabular-nums}
.stats>div>span:last-child{font-size:12px;color:var(--muted)}

/* ── Showcase (facet tiles, as the app draws them) ───────────────────────── */
.showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.facet{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--elev-1);transition:border-color var(--rf-dur-base) var(--rf-ease-out-expo),box-shadow var(--rf-dur-base) var(--rf-ease-out-expo)}
.facet::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;z-index:1;background:linear-gradient(90deg,rgba(var(--rf-hue-rgb),0),rgba(var(--rf-hue-rgb),.95) 50%,rgba(var(--rf-hue-rgb),0));opacity:0;transition:opacity var(--rf-dur-base) var(--rf-ease-out-expo);pointer-events:none}
.facet:hover,.facet:focus-within{border-color:var(--rf-line-strong);box-shadow:var(--elev-2)}
.facet:hover::before,.facet:focus-within::before{opacity:1}
:root[data-rf-mode="day"] .facet:hover{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--rf-iris-edge) border-box}
.facet-stage{position:relative;height:262px;border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;background:var(--bg);overflow:hidden;contain:paint}
.facet-stage iframe{position:absolute;left:0;right:0;top:34px;bottom:0;width:100%;height:calc(100% - 34px);background:var(--bg);color-scheme:inherit}
.facet-coord{position:absolute;left:13px;top:12px;z-index:1;font:400 9.5px/1 var(--rf-mono);letter-spacing:.12em;color:var(--dim);pointer-events:none}
.facet-stage .live-dot{position:absolute;right:12px;top:12px;z-index:1;pointer-events:none}
.facet-meta{display:grid;gap:8px;padding:14px 16px;border-top:1px solid var(--line)}
.facet-meta h3{font-size:13px;font-weight:600;letter-spacing:-.005em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.facet-ref{justify-self:start;padding:3px 6px;border:1px solid var(--line);border-radius:var(--rf-r-xs);background:var(--rf-code-bg);color:var(--rf-hue);font:400 11px/1.2 var(--rf-mono)}
.facet-desc{font-size:12px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.1em}
.facet-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.facet-lambda{display:inline-flex;align-items:center;gap:6px;font:400 11px/1 var(--rf-mono);color:var(--dim)}
.facet-lambda .rf-sep{color:var(--dim)}
.facet-lambda .rf-index{opacity:1}
.section-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:20px;color:var(--dim);font-size:12px}
.section-foot .text-link{font-size:12px}

/* ── Galleries: a spectrum, top to bottom ────────────────────────────────── */
.spectral-ruler{display:flex;align-items:center;gap:14px;margin:-6px 0 6px}
.ruler-label{font:400 10px/1 var(--rf-mono);color:var(--dim)}
.ruler-line{position:relative;flex:1;height:22px}
.ruler-line::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--rf-g-charts-v),var(--rf-g-fx-v),var(--rf-g-lab-v),var(--rf-g-ai-v),var(--rf-g-objects-v),var(--rf-g-input-v),var(--rf-g-text-v),var(--rf-g-shapes-v),var(--rf-g-maps-v),var(--rf-g-notify-v),var(--rf-g-arch-v),var(--rf-g-callouts-v),var(--rf-g-obsidian-v),var(--rf-g-menus-v),var(--rf-g-spectrums-v));opacity:.85}
.ruler-line i{position:absolute;top:3px;width:1px;height:5px;background:var(--rf-line-strong);transition:height var(--rf-dur-base) var(--rf-ease-out-expo),background var(--rf-dur-fast)}
.ruler-line i.is-on{top:0;height:22px;width:2px;margin-left:-.5px;border-radius:1px;background:var(--rf-beam-core);box-shadow:0 0 10px 1px rgba(var(--rf-hue-rgb),.9)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.gallery-link{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:18px 4px 18px 14px;border-bottom:1px solid var(--line);transition:background var(--rf-dur-fast)}
.gallery-link .rf-index{position:absolute;left:0;top:50%;margin-top:-7px}
.gallery-link:hover{background:linear-gradient(90deg,rgba(var(--rf-hue-rgb),.12),rgba(var(--rf-hue-rgb),0) 70%)}
.gallery-link:hover .rf-index,.gallery-link:focus-visible .rf-index{height:20px;margin-top:-10px;opacity:1;background:var(--rf-beam-v);box-shadow:0 0 10px 1px rgba(var(--rf-hue-rgb),.85)}
:root[data-rf-mode="day"] .gallery-link:hover .rf-index,:root[data-rf-mode="day"] .gallery-link:focus-visible .rf-index{background:var(--rf-hue-v);box-shadow:0 0 8px rgba(var(--rf-hue-rgb),.45)}
.gallery-link.is-full:hover .rf-index{background:var(--rf-spectrum-v)}
.gallery-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--elev-1)}
.gallery-link:hover .gallery-icon{border-color:rgba(var(--rf-hue-rgb),.5)}
.gallery-text{flex:1;min-width:0}
.gallery-link strong{display:block;font-size:13px;font-weight:600;letter-spacing:-.005em;transition:color var(--rf-dur-fast)}
.gallery-link:hover strong{color:var(--rf-hue)}
.gallery-link small{display:block;margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--dim)}
.gallery-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.gallery-meta .lambda{font-size:10px;color:var(--rf-hue)}
.gallery-count{font:400 11px/1 var(--rf-mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.empty-state{border:1px solid var(--line);border-radius:var(--r-md);color:var(--muted);padding:24px;text-align:center;font-size:13px}

/* ── Three surfaces ──────────────────────────────────────────────────────── */
.surfaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.surface-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(var(--rf-hue-rgb),.07),transparent 46%),var(--card);box-shadow:var(--elev-1);overflow:hidden;transition:border-color var(--rf-dur-base),box-shadow var(--rf-dur-base)}
.surface-card::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,rgba(var(--rf-hue-rgb),0),rgba(var(--rf-hue-rgb),.9),rgba(var(--rf-hue-rgb),0));opacity:.7}
.surface-card:hover{border-color:rgba(var(--rf-hue-rgb),.45);box-shadow:var(--elev-2)}
:root[data-rf-mode="day"] .surface-card{background:linear-gradient(160deg,rgba(var(--rf-hue-rgb),.08),transparent 50%),var(--card)}
.sc-head{display:flex;align-items:center;gap:10px;padding:16px 18px 0}
.sc-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r-md);border:1px solid rgba(var(--rf-hue-rgb),.35);background:rgba(var(--rf-hue-rgb),.08)}
.sc-head .eyebrow{flex:1}
.sc-head .live-dot{margin-left:auto}
.sc-badge{padding:3px 7px;border-radius:var(--rf-r-pill);border:1px solid rgba(var(--rf-hue-rgb),.5);font:600 8.5px/1 var(--rf-mono);letter-spacing:.14em;color:var(--rf-hue)}
.sc-stage{position:relative;margin:14px 18px 0;height:272px;border:1px solid var(--rf-line-soft);border-radius:var(--r-lg);background:var(--rf-bg-deep);overflow:hidden;contain:paint}
:root[data-rf-mode="day"] .sc-stage{background:var(--panel2)}
.sc-body{display:flex;flex-direction:column;gap:10px;padding:18px 18px 20px;flex:1}
.sc-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.sc-count strong{font-size:30px;line-height:1;letter-spacing:-.045em;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.sc-count>span{font:400 11px/1.3 var(--rf-mono);color:var(--dim)}
.surface-card h3{font-size:var(--rf-fs-h4);letter-spacing:var(--rf-ls-h4);font-weight:600;margin-top:4px}
.surface-card .sc-body>p:not(.sc-count){font-size:13px;line-height:1.65;color:var(--muted)}
.sc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;padding-top:8px}
.sc-actions .button.primary{background:var(--rf-hue-v);border-color:var(--rf-hue-v);color:#0b0c12;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 24px -10px rgba(var(--rf-hue-rgb),.8)}
.sc-actions .button.primary:hover{background:var(--rf-hue);border-color:var(--rf-hue)}
:root[data-rf-mode="day"] .sc-actions .button.primary{background:var(--rf-hue);border-color:var(--rf-hue);color:#fff}
.sc-actions .text-link{color:var(--rf-hue);font-size:12px}
.sc-note{font:400 10.5px/1.3 var(--rf-mono);color:var(--dim)}
.sc-cmd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 12px;border:1px solid var(--rf-line-soft);border-radius:var(--r-md);background:var(--rf-code-bg);min-width:0}
.sc-cmd code{font-size:11.5px;color:var(--rf-code-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.term-prompt{color:var(--rf-surf-terminal)}
/* web: a miniature of the app — spectral rail + a live tile */
.mini-app{position:absolute;inset:0;display:flex;flex-direction:column}
.mini-bar{display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-bottom:1px solid var(--rf-line-soft);font:400 9.5px/1 var(--rf-mono);color:var(--dim);background:var(--panel)}
.mini-bar i{width:9px;height:9px;border:1.2px solid var(--accent);border-bottom-width:1.2px;clip-path:polygon(50% 0,100% 100%,0 100%);background:rgba(var(--accent-rgb),.15)}
.mini-body{flex:1;display:flex;min-height:0}
.mini-rail{display:flex;flex-direction:column;justify-content:center;gap:5px;width:58px;padding:10px 8px;border-right:1px solid var(--rf-line-soft)}
.mini-rail span{display:flex;align-items:center;gap:6px;height:6px}
.mini-rail span i{width:2px;height:6px;border-radius:1px;background:var(--rf-hue-v);opacity:.85}
.mini-rail span b{flex:1;height:3px;border-radius:2px;background:var(--rf-line-strong);opacity:.7}
.mini-rail span.is-on b{background:rgba(var(--rf-hue-rgb),.6)}
.mini-rail span.is-on i{height:9px;background:var(--rf-beam-core);box-shadow:0 0 6px rgba(var(--rf-hue-rgb),.9)}
.mini-main{flex:1;display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:10px;min-width:0}
.mini-tile{border:1px solid var(--rf-line-soft);border-radius:8px;background:var(--card);overflow:hidden;position:relative}
.mini-tile.is-live{grid-row:span 2}
.mini-tile iframe{position:absolute;left:0;top:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none}
.mini-tile:not(.is-live)::before{content:"";position:absolute;left:12px;right:30%;top:14px;height:4px;border-radius:2px;background:var(--rf-line-strong)}
.mini-tile:nth-child(2)::after{content:"";position:absolute;left:12px;right:12px;bottom:12px;top:30px;--c:rgba(var(--rf-g-maps-rgb),.6);background:linear-gradient(var(--c),var(--c)) 0 100%/14% 45% no-repeat,linear-gradient(var(--c),var(--c)) 28.6% 100%/14% 75% no-repeat,linear-gradient(var(--c),var(--c)) 57.2% 100%/14% 55% no-repeat,linear-gradient(var(--c),var(--c)) 85.8% 100%/14% 90% no-repeat}
.mini-tile:nth-child(3)::after{content:"";position:absolute;left:50%;top:58%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid rgba(var(--rf-g-text-rgb),.75);border-right-color:transparent;animation:mini-spin 2.4s linear infinite}
@keyframes mini-spin{to{transform:rotate(360deg)}}
/* terminal: the real prism-term engine (or a braille stand-in) */
.sc-term{background:#0a0c12}
:root[data-rf-mode="day"] .sc-term{background:#f8f7fb}
.term-mini{position:absolute;inset:0;display:flex;flex-direction:column}
.term-mini-cmd{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.06);font:400 10.5px/1 var(--rf-mono);color:#a2a4b4;white-space:nowrap;overflow:hidden}
:root[data-rf-mode="day"] .term-mini-cmd{border-bottom-color:rgba(32,24,72,.08);color:#55556a}
.term-mini-cmd b{font-weight:600;color:#e6e6ef}
:root[data-rf-mode="day"] .term-mini-cmd b{color:#23222f}
.caret{display:inline-block;width:6px;height:11px;background:var(--rf-surf-terminal-v);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.term-mini-screen{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;min-height:0}
.term-mini-screen canvas{display:block;image-rendering:pixelated}
.term-demo{display:flex;align-items:center;gap:9px;font:12px var(--rf-mono);color:#a2a4b4;white-space:nowrap}
.term-spin{color:var(--rf-surf-terminal-v);width:1ch;display:inline-block}
.term-demo-facet{color:#e6e6ef}
.term-meter{color:#b8a2f2;letter-spacing:0;white-space:pre}
.term-pct{min-width:4ch;text-align:right}
/* deck: a virtual Stream Deck + */
.sc-deck{display:flex;justify-content:center;align-items:center;container-type:size;background:radial-gradient(120% 90% at 50% 0%,rgba(var(--rf-hue-rgb),.12),transparent 60%),var(--rf-bg-deep)}
:root[data-rf-mode="day"] .sc-deck{background:radial-gradient(120% 90% at 50% 0%,rgba(var(--rf-hue-rgb),.14),transparent 60%),var(--panel2)}
/* the whole device fits the stage (aspect 1036:1010, design/devices); a static poster fills it until the engine mounts */
.deck-mount{flex:none;width:min(calc(100cqw - 32px),calc((100cqh - 30px) * 1.0257));transform:perspective(1300px) rotateX(8deg);transform-origin:50% 50%}
.deck-poster{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
:root[data-rf-mode="day"] .deck-poster{filter:drop-shadow(0 16px 20px rgba(48,32,120,.28))}
.sc-deck-note{position:absolute;left:0;right:0;bottom:10px;margin:0;text-align:center;font:400 10.5px/1.4 var(--rf-mono);color:var(--muted)}
.sc-deck-note a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* ── Principles ──────────────────────────────────────────────────────────── */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:var(--rf-sp-22)}
.principles>div{padding-top:22px;border-top:1px solid var(--line);position:relative}
.principles>div::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:1px;background:var(--rf-beam);box-shadow:var(--rf-beam-glow)}
.principle-number{font:600 9.5px/1 var(--rf-mono);letter-spacing:.15em;color:var(--accent)}
.principle-number .rf-sep{color:var(--dim);font-weight:400}
.principles h3{margin:12px 0 8px;font-size:var(--rf-fs-h4);letter-spacing:var(--rf-ls-h4);font-weight:600}
.principles p{max-width:300px;font-size:13px;line-height:1.75;color:var(--muted)}

/* ── Agents ──────────────────────────────────────────────────────────────── */
.agent-panel{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:48px;border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(130deg,rgba(var(--accent-rgb),.07),transparent 60%),var(--card);box-shadow:var(--elev-1);overflow:hidden}
.agent-panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--rf-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--rf-grid-line) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(ellipse 50% 70% at 0% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse 50% 70% at 0% 0%,#000,transparent 70%);pointer-events:none}
.agent-copy{position:relative}
.agent-copy h2{margin:18px 0;font-size:var(--rf-fs-section,clamp(40px,1.25vw + 24px,48px));line-height:var(--rf-lh-section,1.08);letter-spacing:var(--rf-ls-section,-.045em);font-weight:700}
.agent-copy>p:not(.eyebrow):not(.agent-requirement){max-width:390px;font-size:14px;line-height:1.7;color:var(--muted)}
.agent-copy code{font-size:.9em;color:var(--rf-syn-tag);white-space:nowrap}
.agent-capabilities{display:grid;gap:12px;margin:24px 0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.agent-capabilities li{display:flex;align-items:center;gap:11px}
.agent-capabilities .ic{color:var(--accent)}
.agent-requirement{margin-top:16px;font:400 10.5px/1.5 var(--rf-mono);color:var(--dim)}
.agent-terminal{align-self:center;position:relative}
.terminal-content{padding:24px}
.terminal-prompt{margin:10px 0 24px;font-size:18px;line-height:1.55;letter-spacing:-.02em}
.terminal-step{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--rf-line-soft)}
.terminal-step>span:first-child{font:400 10px var(--rf-mono);color:var(--dim)}
.terminal-step div{flex:1}
.terminal-step code{font-size:12px;color:var(--rf-syn-keyword)}
.terminal-step small{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
.step-status{padding:4px 7px;border-radius:4px;background:rgba(var(--pos-rgb),.12);font:600 8.5px/1 var(--rf-mono);letter-spacing:.1em;color:var(--pos)}
.terminal-result{display:flex;align-items:center;gap:8px;padding-top:18px;border-top:1px solid var(--rf-line-soft);font:400 11px var(--rf-mono);color:var(--pos)}

/* ── Get started ─────────────────────────────────────────────────────────── */
.start-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.start-layout>*{min-width:0} /* 1.4.10: the tab row scrolls inside its column instead of widening the page at 320px */
.tab-list{display:flex;gap:26px;max-width:460px;margin-bottom:26px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tab-list::-webkit-scrollbar{display:none}
.tab-list button{flex:none;white-space:nowrap}
.tab-list button{position:relative;padding:0 2px 12px;font-size:13px;color:var(--muted);transition:color var(--rf-dur-fast)}
.tab-list button:hover{color:var(--ink)}
.tab-list button[aria-selected="true"]{color:var(--ink);font-weight:600}
.tab-list button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:1px;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.7);animation:tab-in var(--rf-dur-base) var(--rf-ease-out-expo) both}
@keyframes tab-in{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}
.start-copy h3{margin-bottom:10px;font-size:20px;letter-spacing:-.025em;font-weight:600}
.start-copy [role=tabpanel]>p:not(.download-note){max-width:440px;font-size:14px;line-height:1.8;color:var(--muted)}
.start-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.download-note{margin-top:16px;font:400 10.5px/1.7 var(--rf-mono);color:var(--dim)}
.start-copy .text-link{margin-top:18px}
.code-box pre{margin:0;min-height:196px;padding:22px;font:12px/2 var(--rf-mono);color:var(--rf-code-ink);white-space:pre-wrap;overflow-wrap:anywhere}
.code-footer{display:flex;align-items:center;gap:8px;padding:14px 18px;border-top:1px solid var(--rf-line-soft);font:400 10.5px var(--rf-mono);color:var(--muted)}

/* ── Closing ─────────────────────────────────────────────────────────────── */
.closing{position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:var(--rf-sp-22);padding-top:34px;padding-bottom:34px}
.closing::before,.closing::after{content:"";position:absolute;left:var(--site-pad);right:var(--site-pad);height:1px;background:var(--line)}
.closing::before{top:0}.closing::after{bottom:0}
.closing-mark{color:var(--accent)}
.closing-mark .ic{--icon-fill:rgba(var(--accent-rgb),.15)}
.closing p{flex:1;font-size:24px;letter-spacing:-.035em;font-weight:600}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(min-width:1500px){.hero{padding-top:100px;padding-bottom:88px}}
/* Large screens: the prism art takes ~46% of the viewport and bleeds off the right edge (the rays leave the
   screen); the copy keeps the container. --hero-bleed = container content edge → viewport edge. */
@media(min-width:1051px){
  .hero{--hero-bleed:max(var(--site-pad),calc((100vw - var(--site-max)) / 2 + var(--site-pad)));grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:24px}
  /* the two display lines never break: at 1920 "Every possibility." runs into the art's empty left margin, above it */
  .hero h1{white-space:nowrap}
  .hero-art{width:46vw;max-width:none;justify-self:end;margin-right:calc(var(--hero-bleed) * -1)}
  .hero-description,.hero-sub{max-width:500px}
  .art-label-out{right:calc(var(--hero-bleed) * .35 + 3%)}
}
@media(max-width:1100px){.surfaces{grid-template-columns:1fr 1fr}.surface-card[data-rf-surface="deck"]{grid-column:1/-1}.surface-card[data-rf-surface="deck"] .sc-stage{height:290px}}
@media(max-width:1050px){.hero{gap:0}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.agent-panel{gap:32px;padding:36px}.start-layout{gap:36px}}
@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:12px;padding-top:56px;padding-bottom:44px}
  .hero-art{max-width:560px;margin:0 auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats>div:nth-child(n+3){border-top:0}
  .stats>div:nth-child(3)::before{display:none}
  .showcase{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .surfaces{grid-template-columns:1fr}
  .surface-card[data-rf-surface="deck"] .sc-stage{height:260px}
  .principles{gap:26px}
  .agent-panel{grid-template-columns:1fr;padding:30px}
  .start-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .section-foot{flex-direction:column;align-items:flex-start;gap:8px}
  /* mono labels never drop below 10px on small screens */
  .hero-new-tag,.art-label,.art-coordinate,.stat-label,.facet-coord,.sc-badge,.mini-bar,.principle-number,.step-status{font-size:10px}
}
@media(max-width:600px){
  /* phone: say what Prism is, then show it — the prism and the live text effects sit above the
     fold, ahead of the buttons (the copy column flattens so the art can slot in after the words) */
  .hero{gap:0;padding-top:22px;padding-bottom:36px}
  .hero-copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2;margin:14px 0 12px;font-size:42px;letter-spacing:-.05em}
  .hero-description{order:3;font-size:15px}
  .hero-sub{order:4;margin-top:8px;font-size:13px}
  .hero-art{order:5;width:100%;max-width:310px;margin:8px auto 0}
  .hero-fx{order:6;margin-top:4px;gap:8px;max-width:none}
  .hero-actions{order:7;margin-top:18px}
  .hero-note{order:8}
  .hero-new{order:9;justify-self:start}
  .fx-stage{height:58px}
  .fx-neon{font-size:21px}.fx-glitch{font-size:19px}.fx-more b{font-size:20px}
  .fx-cap{padding:6px 8px}
  .art-label,.art-coordinate{font-size:10px;letter-spacing:.08em}
  .showcase{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr;gap:22px;margin-top:64px}
  .agent-panel{padding:24px 20px}
  .agent-copy h2{font-size:31px}
  .terminal-content{padding:20px 18px}
  .closing{flex-wrap:wrap}
  .closing p{font-size:19px;flex:1 0 70%}
  .stats strong{font-size:27px}
}
@media(max-width:480px){.hero .eyebrow .rf-sep,.hero .eyebrow .meta{display:none}}
@media(max-width:400px){.hero-actions .button{flex:1 1 auto;justify-content:center}.hero-new{font-size:11px}.tab-list{gap:18px}}

@media(prefers-reduced-motion:reduce){
  .hero-art *{animation:none!important}
  .mini-tile:nth-child(3)::after,.caret{animation:none!important}
}