@bongos/core 1.19.92 → 1.19.94

package/public-landing/gate/space.css

@@ -1,809 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════════════
-   Cloud Bongos — "space" scene (task 1721)
-   The pannable, zoomable sky where every Cloud Bongos project floats as a
-   drifting circle. Sits ABOVE the gate's cloud-temple world: click a circle
-   to dive down into that project; press ESC to rise back up here.
-
-   Theme is the locked Cloud Bongos palette (brand/cloud-bongos/tokens.json):
-   sun #f97316, sky #38bdf8, coral #fb7185, gold #ffd98a, ink #2a1f17.
-   The search bar reuses the gate's live-glass #disp-bar filter (defined in
-   index.html) so it matches the terminal + search sprites exactly.
-   ═══════════════════════════════════════════════════════════════════════ */
-
-:root{
-  --cb-sun:#f97316; --cb-sun-lit:#fb923c; --cb-gold:#ffd98a; --cb-gold-soft:#f6c976;
-  --cb-sky:#38bdf8; --cb-coral:#fb7185; --cb-ink:#2a1f17; --cb-ink-soft:#6b5d52;
-  --cb-font-display:"Baloo 2",system-ui,sans-serif;
-  --cb-font-mono:"Fira Code",ui-monospace,monospace;
-}
-
-/* ---- view switching: entry gate / space circles / download / detail (task 1722) ----
-   entry + space share the space backdrop (#space); download is the temple-world
-   .stage; detail is #detail. .stage is hidden unless we're on the download page. */
-#space{ display:none; }
-.stage{ display:none; }
-body.view-entry #space, body.view-space #space, body.view-table #space{ display:block; }
-body.view-download .stage{ display:block; }
-/* table view (task 1731) reuses the deep-space backdrop + starfield, but the
-   pannable circle canvas is hidden and the surface is a plain reading pane. */
-body.view-table #space-canvas{ display:none; }
-body.view-table #space{ cursor:default; }
-
-/* ---- entry gate: the type-"bongos" terminal, set in space (task 1722) ---- */
-#entry{ display:none; z-index:6; transition:opacity .45s ease, transform .55s cubic-bezier(.4,0,.7,1); }
-body.view-entry #entry{ display:flex; }
-#entry.leaving{ opacity:0; transform:scale(1.14); pointer-events:none; }
-/* in the entry view the circles stay hidden behind the terminal (space.js also
-   sets the canvas opacity to 0); the top-left mark + help belong to the circles view */
-body.view-entry .space-mark, body.view-entry .space-help{ display:none; }
-/* the entry gate leans on the gate's own terminal/enter CSS (index.html <style>);
-   nudge the enter key a touch closer under the bar in this stacked layout */
-#entry .enter{ margin-top:2px; }
-
-/* ═══ deep space ═══ (task 1725: actually in space — no clouds up here) */
-#space{
-  position:fixed; inset:0; overflow:hidden; z-index:1;
-  background:
-    radial-gradient(120% 85% at 50% -12%, #2b2456 0%, rgba(43,36,86,0) 55%),
-    radial-gradient(70% 55% at 82% 112%, rgba(56,120,200,.16), transparent 62%),
-    radial-gradient(58% 48% at 12% 6%, rgba(120,70,160,.14), transparent 60%),
-    linear-gradient(180deg, #05060f 0%, #0a0c20 48%, #0d0f28 100%);
-  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
-}
-/* the whole canvas is a pannable surface — grabbing on press, everywhere,
-   including over the orbs (they still click-to-enter). */
-#space.panning, #space.grabbing{ cursor:grabbing; }
-#space.grabbing .circle{ cursor:grabbing; }
-
-/* starfield backdrop (generated in space.js). Fixed behind the canvas — a
-   distant sky, so it does not pan with the circles. */
-.stars{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; transition:opacity .3s ease; }
-.star{ position:absolute; border-radius:50%; background:#fff; box-shadow:0 0 3px rgba(255,255,255,.5); }
-@keyframes twinkle{ 0%,100%{opacity:.22} 50%{opacity:.95} }
-
-/* ═══ space-time sheet ═══
-   A blueprint grid that warps under the orbs' gravity (drawn in space.js). Sits
-   between the distant starfield (z0) and the orb canvas (z2), so the orbs rest
-   ON the sheet. Kept faint — a whisper zoomed out, legible zoomed in. It fades
-   in with the circle sky and, like #space-canvas, is absent in table view. */
-#space-grid{
-  position:absolute; inset:0; z-index:1; pointer-events:none;
-  opacity:0; transition:opacity .55s ease;
-}
-body.view-space #space-grid{ opacity:1; }
-body.view-table #space-grid{ display:none; }
-
-/* ═══ the pannable / zoomable canvas ═══ */
-#space-canvas{
-  position:absolute; inset:0; z-index:2; transform-origin:0 0; will-change:transform;
-}
-
-/* ═══ a project circle ═══
-   .circle carries the drift offset (transform). Inside, .disc is the visible
-   bubble and .label the name. Anchor lives in left/top (set by JS). */
-.circle{
-  position:absolute; will-change:transform; cursor:grab; transition:opacity .35s ease;
-}
-.circle .disc{
-  width:100%; height:100%; border-radius:50%; position:relative; overflow:hidden;
-  background:
-    radial-gradient(120% 120% at 50% 50%, var(--acc, #fb923c), color-mix(in srgb, var(--acc,#fb923c) 55%, #1b2b52) 100%);
-  box-shadow:
-    0 0 0 1.5px rgba(255,255,255,.35) inset,
-    0 10px 34px rgba(20,16,40,.42),
-    0 0 42px var(--glow, rgba(251,146,60,.5));
-  transition:transform .28s cubic-bezier(.2,.9,.3,1.2), box-shadow .28s ease, filter .28s ease;
-}
-/* the world image lives INSIDE the orb (added in makeCircle for real instances);
-   hidden until hover, then it fades in to fill the sphere. */
-.circle .disc-world{
-  position:absolute; inset:0; border-radius:50%; z-index:1; pointer-events:none;
-  background-position:center; background-size:cover; background-repeat:no-repeat;
-  opacity:0; transition:opacity .34s ease;
-}
-.circle:hover .disc-world{ opacity:1; }
-/* glassy shine as a ::after so it sits ON TOP of the world image — the orb keeps
-   reading as a sphere even when filled with its world. */
-.circle .disc::after{
-  content:''; position:absolute; inset:0; border-radius:50%; z-index:2; pointer-events:none;
-  background:radial-gradient(38% 34% at 34% 28%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
-}
-.circle .label{
-  position:absolute; top:100%; left:50%; transform:translateX(-50%);
-  margin-top:9px; text-align:center; pointer-events:none; width:max-content; max-width:190px;
-  font-family:var(--cb-font-display); font-weight:700; color:#fff;
-  text-shadow:0 2px 12px rgba(20,12,30,.7); line-height:1.05;
-}
-.circle .label .name{ display:block; font-size:15px; letter-spacing:.2px; }
-.circle .label .count{
-  display:inline-block; margin-top:3px; font-family:var(--cb-font-mono); font-weight:500;
-  font-size:10.5px; color:var(--cb-gold); text-shadow:0 1px 8px rgba(20,12,30,.8);
-}
-.circle:hover .disc{ transform:scale(1.06); box-shadow:0 0 0 1.5px rgba(255,255,255,.55) inset, 0 14px 40px rgba(20,16,40,.5), 0 0 60px var(--glow,rgba(251,146,60,.7)); }
-.circle.dim{ opacity:.16; }
-.circle.match .disc{ box-shadow:0 0 0 2px var(--cb-gold) inset, 0 14px 40px rgba(20,16,40,.5), 0 0 66px var(--cb-gold-soft); }
-
-/* ═══ search spotlight (task 1892) ═══
-   Opening the in-view search darkens the whole sky — the starfield + gravity
-   grid dip and every orb dims to a baseline — so the matching orbs (kept bright,
-   gold-ringed, lifted) read as spotlit. Non-matches (.dim) sink further. The
-   orb POSITION transform is set inline per-frame by space.js, so the match
-   pop scales the inner .disc, never the .circle. */
-body.searching #starfield{ opacity:.3; }
-body.searching #space-grid{ opacity:.25; }
-body.searching .circle{ opacity:.4; }
-body.searching .circle .disc{ filter:saturate(.55) brightness(.72); }
-body.searching .circle.dim{ opacity:.1; }
-body.searching .circle.match{ opacity:1; z-index:6; }
-body.searching .circle.match .disc{ filter:none; transform:scale(1.1);
-  box-shadow:0 0 0 2.5px var(--cb-gold) inset, 0 16px 48px rgba(20,16,40,.55), 0 0 92px var(--cb-gold-soft); }
-.circle.is-self .disc{ box-shadow:0 0 0 2px rgba(255,231,178,.85) inset, 0 12px 40px rgba(20,16,40,.5), 0 0 60px rgba(251,146,60,.75); }
-/* a provisional orb while the create panel is open (tasks 1909/1912): stationary,
-   outside the sim, greyed/dim like the search state until it's named (or removed
-   on cancel). */
-.circle.pending{ opacity:.5; }
-.circle.pending .disc{ filter:saturate(.35) brightness(.82);
-  box-shadow:0 0 0 1.5px rgba(255,255,255,.3) inset, 0 10px 30px rgba(20,16,40,.4); }
-.circle.pending .label .name{ font-style:italic; opacity:.85; }
-.circle .self-badge{
-  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
-  font-family:var(--cb-font-mono); font-size:9px; font-weight:500; letter-spacing:.6px;
-  color:var(--cb-ink); background:var(--cb-gold); padding:2px 8px; border-radius:999px;
-  box-shadow:0 2px 10px rgba(20,12,30,.4); white-space:nowrap; pointer-events:none;
-}
-
-/* ═══ hover info card ═══ */
-#hovercard{
-  position:fixed; z-index:40; max-width:270px; padding:13px 15px; border-radius:14px;
-  background:rgba(24,20,44,.82); -webkit-backdrop-filter:blur(9px) saturate(1.3); backdrop-filter:blur(9px) saturate(1.3);
-  border:1px solid rgba(255,255,255,.16); box-shadow:0 14px 44px rgba(10,8,25,.5);
-  color:#fff; font-family:var(--cb-font-display); pointer-events:none;
-  opacity:0; transition:opacity .16s ease;
-}
-#hovercard.show{ opacity:1; }
-#hovercard .hc-name{ font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; }
-#hovercard .hc-dot{ width:10px; height:10px; border-radius:50%; background:var(--acc,#fb923c); box-shadow:0 0 10px var(--acc,#fb923c); flex:none; }
-#hovercard .hc-tag{ margin-top:3px; font-size:12.5px; color:#e7dcc9; }
-#hovercard .hc-meta{ margin-top:9px; display:flex; align-items:center; gap:8px; font-family:var(--cb-font-mono); font-size:11px; color:var(--cb-gold); }
-#hovercard .hc-meta .chip{ color:#cdbfae; }
-#hovercard .hc-go{ margin-top:9px; font-family:var(--cb-font-mono); font-size:11px; color:#9fe1cb; }
-#hovercard .hc-sample{ color:#f0997b; }
-
-/* ═══ toolbar / help affordances ═══ */
-.space-mark{
-  position:fixed; top:20px; left:22px; z-index:30; white-space:nowrap;
-  font-family:var(--cb-font-display); font-weight:700; font-size:19px; color:var(--cb-gold);
-  text-shadow:0 2px 12px rgba(20,12,30,.6); pointer-events:none;
-}
-.space-mark b{ color:var(--cb-gold); font-weight:700; }
-/* the wordmark logo breathes a faint gold glow so it reads as alive (task 1894) */
-.space-mark{ animation:markGlow 3.4s ease-in-out infinite; }
-@keyframes markGlow{
-  0%,100%{ text-shadow:0 2px 12px rgba(20,12,30,.6), 0 0 14px rgba(246,201,118,.12); }
-  50%{ text-shadow:0 2px 12px rgba(20,12,30,.6), 0 0 24px rgba(246,201,118,.42); }
-}
-/* self-typing wordmark (task 1902): the lead word swaps "Cloud" for lowercase
-   platform names and "bongos" re-types after it, with a terminal caret. Only
-   the space-view logo animates; JS (mountLogoTerminal) drives the text. */
-/* two colours: the LLM/lead word is white, "bongos" keeps the brand gold (task 1905) */
-.mk-lead{ display:inline-block; transition:opacity .18s ease; color:#fff; }
-.mk-lead.swap{ opacity:0; }
-.mk-tail{ color:var(--cb-gold); font-weight:700; }
-/* each typed letter is its own popping span (the entry terminal's per-letter pop);
-   white-space:pre keeps the leading word-gap space from collapsing (task 1910).
-   transform-origin:left so the pop's scale-overshoot grows each new letter
-   RIGHTWARD into empty space, never symmetrically over its already-settled left
-   neighbour — that overlap was the only way a fast type-in could visually smear. */
-.mk-ch{ display:inline-block; white-space:pre; transform-origin:left center; animation:pop .22s cubic-bezier(.2,1.4,.4,1); }
-/* caret sits flush against the last typed/deleted letter — no gap (task 1907) */
-.mk-caret{ display:inline-block; width:9px; height:17px; margin-left:0; vertical-align:-3px;
-  background:var(--cb-gold); box-shadow:0 0 5px rgba(246,201,118,.55); opacity:0; }
-.mk-caret.on{ animation:blink 1.05s steps(1) infinite; }
-
-/* ─── idle "create a project" ghost orb (task 1896) ─────────────────────────
-   A faint dashed orb that follows the cursor over EMPTY sky only (never over an
-   orb, never while panning or with an overlay open) — a light nudge toward the
-   click-to-create gesture. space.js sets left/top + toggles .show; the .show
-   transform/animation and the position are kept on different properties so they
-   never fight. */
-#ghost-orb{
-  position:fixed; top:0; left:0; z-index:20; pointer-events:none;
-  width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%;
-  border:1.5px dashed rgba(255,217,138,.5);
-  background:radial-gradient(circle at 50% 42%, rgba(255,217,138,.12), rgba(255,217,138,0) 68%);
-  display:flex; align-items:center; justify-content:center;
-  opacity:0; transform:scale(.7); transition:opacity .28s ease, transform .28s ease;
-}
-#ghost-orb.show{ opacity:.9; transform:scale(1); animation:ghostPulse 2.2s ease-in-out infinite; }
-#ghost-orb .ghost-plus{ font-family:var(--cb-font-display); font-weight:700; font-size:30px; line-height:1;
-  color:var(--cb-gold); text-shadow:0 0 12px rgba(246,201,118,.6); }
-#ghost-orb .ghost-label{
-  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px; white-space:nowrap;
-  font-family:var(--cb-font-mono); font-size:11px; letter-spacing:.3px; color:rgba(255,246,235,.72);
-  text-shadow:0 1px 8px rgba(20,12,30,.8); }
-@keyframes ghostPulse{ 0%,100%{ border-color:rgba(255,217,138,.34); } 50%{ border-color:rgba(255,217,138,.72); } }
-body:not(.view-space) #ghost-orb{ display:none; }
-@media (prefers-reduced-motion: reduce){ #ghost-orb.show{ animation:none; } }
-
-/* ─── minimap (task 1897) ─── a live cluster overview + viewport rect, bottom-right */
-#minimap{
-  position:fixed; right:16px; bottom:16px; z-index:32; width:172px; height:120px;
-  border-radius:12px; overflow:hidden; cursor:pointer;
-  background:rgba(16,14,34,.52); border:1px solid rgba(255,255,255,.14);
-  -webkit-backdrop-filter:blur(7px) saturate(1.2); backdrop-filter:blur(7px) saturate(1.2);
-  box-shadow:0 8px 26px rgba(10,8,25,.42);
-  opacity:.72; transition:opacity .25s ease;
-}
-#minimap:hover{ opacity:1; }
-#minimap canvas{ display:block; width:100%; height:100%; }
-body:not(.view-space) #minimap{ display:none; }
-@media (max-width:640px){ #minimap{ display:none; } }
-
-/* ─── space whale (task 1898) ─── flies orb→project on update, back on a module
-   push. space.js sets the transform (position + flip) each frame; opacity fades
-   it in/out. The default art faces LEFT, so a rightward flight is scaleX(-1). */
-#whale{
-  position:fixed; top:0; left:0; z-index:18; pointer-events:none;
-  opacity:0; transition:opacity .6s ease; will-change:transform, width;
-  /* Size is normally set inline per-frame by space.js (worldW*zoom). These are
-     the safety net: a sane default before the first flight, and a hard cap so a
-     frame the JS hasn't sized yet (flight start, or rAF starved by heavy
-     scroll-zoom) can never balloon to the image's intrinsic ~1280px width. */
-  width:90px; max-width:240px;
-  filter:drop-shadow(0 3px 7px rgba(10,8,25,.5));
-}
-#whale.show{ opacity:.96; }
-/* width is set per-frame by space.js (scaled to the orbs); height follows aspect */
-#whale img{ display:block; width:100%; height:auto; }
-body:not(.view-space) #whale{ display:none; }
-/* the target orb pings a gold ring as the whale arrives */
-.circle.pinged .disc{ animation:orbPing .9s ease-out; }
-@keyframes orbPing{
-  0%{ box-shadow:0 0 0 0 rgba(255,217,138,.75), 0 10px 34px rgba(20,16,40,.42); }
-  100%{ box-shadow:0 0 0 30px rgba(255,217,138,0), 0 10px 34px rgba(20,16,40,.42); }
-}
-@media (prefers-reduced-motion: reduce){ #whale{ display:none; } }
-@media (prefers-reduced-motion: reduce){
-  .space-mark{ animation:none; }
-  .mk-caret.on{ animation:none; opacity:0; }
-  .mk-lead{ transition:none; }
-}
-
-.space-help{
-  position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:30;
-  display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:center;
-  font-family:var(--cb-font-mono); font-size:11.5px; color:#f3ead9;
-  background:rgba(24,20,44,.42); border:1px solid rgba(255,255,255,.14); border-radius:999px;
-  padding:8px 18px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
-  text-shadow:0 1px 6px rgba(20,12,30,.7); transition:opacity .3s ease; pointer-events:none;
-}
-.space-help kbd{
-  font-family:var(--cb-font-mono); font-size:10.5px; color:var(--cb-ink); background:var(--cb-gold);
-  border-radius:5px; padding:1px 7px; margin-right:5px; box-shadow:0 1px 4px rgba(20,12,30,.35);
-}
-.space-help .sep{ color:rgba(255,255,255,.28); }
-/* the /projects door (task 1002696) — same glass voice as the help strip */
-.space-projects{
-  position:fixed; top:20px; right:22px; z-index:30;
-  font-family:var(--cb-font-display); font-weight:700; font-size:13.5px; color:var(--cb-gold);
-  text-decoration:none; text-shadow:0 1px 8px rgba(20,12,30,.8);
-  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,217,138,.45); border-radius:999px;
-  padding:7px 15px; backdrop-filter:blur(4px);
-}
-.space-projects:hover{ border-color:var(--cb-gold); background:rgba(255,217,138,.1); }
-body:not(.view-space) .space-mark,
-body:not(.view-space) .space-help,
-body:not(.view-space) .space-projects{ display:none; }
-
-/* ═══ dive / rise transition ═══ */
-#space.diving #space-canvas{ transition:transform .72s cubic-bezier(.5,.03,.4,1), opacity .72s ease; }
-#space.diving{ pointer-events:none; }
-.dive-flash{
-  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0;
-  background:radial-gradient(40% 35% at var(--fx,50%) var(--fy,52%), rgba(255,240,205,.96), rgba(249,115,22,.4) 45%, transparent 74%);
-}
-.dive-flash.go{ animation:diveFlash .72s ease-out forwards; }
-@keyframes diveFlash{ 0%{opacity:0;transform:scale(.6)} 30%{opacity:.95} 100%{opacity:0;transform:scale(1.7)} }
-
-/* ═══ space-bar search overlay ═══ */
-#searchbar{
-  position:fixed; top:16%; left:50%; transform:translate(-50%,-14px); z-index:50; width:min(560px,90vw);
-  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.1);
-}
-#searchbar.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
-#searchbar .bar{
-  position:relative; height:64px; border-radius:16px; display:flex; align-items:center; gap:12px; padding:0 18px;
-  background:rgba(255,250,242,.16);
-  -webkit-backdrop-filter:blur(3px) saturate(1.25) url(#disp-bar); backdrop-filter:blur(3px) saturate(1.25) url(#disp-bar);
-  border:1px solid rgba(255,255,255,.35); box-shadow:0 18px 54px rgba(10,8,25,.5), 0 0 0 1px rgba(255,255,255,.1) inset;
-}
-#searchbar .mag{ width:20px; height:20px; flex:none; color:var(--cb-gold); }
-#searchbar input{
-  flex:1; background:transparent; border:0; outline:0; color:#fff;
-  font-family:var(--cb-font-mono); font-size:18px; letter-spacing:.3px;
-}
-#searchbar input::placeholder{ color:rgba(255,246,235,.6); }
-#searchbar .esc{ font-family:var(--cb-font-mono); font-size:10.5px; color:rgba(255,255,255,.7); flex:none; }
-#searchbar .esc kbd{ color:var(--cb-ink); background:var(--cb-gold); border-radius:5px; padding:1px 6px; }
-#searchbar .ctx{
-  margin-top:10px; display:flex; align-items:center; gap:8px; padding:0 6px;
-  font-family:var(--cb-font-mono); font-size:11.5px; color:#f3ead9; text-shadow:0 1px 8px rgba(20,12,30,.7);
-}
-#searchbar .ctx .dot{ width:7px; height:7px; border-radius:50%; background:#16a34a; box-shadow:0 0 9px #16a34a; animation:sbPulse 1.6s ease-in-out infinite; flex:none; }
-@keyframes sbPulse{ 0%,100%{opacity:.45} 50%{opacity:1} }
-#searchbar .ctx b{ color:var(--cb-gold); font-weight:500; }
-#searchbar .ai-soon{ color:#cdbfae; }
-
-/* ═══ create-a-project panel ═══
-   No dim/blur (task 1909): the panel floats near the bottom so the live preview
-   orb the click just dropped stays visible in the sky. The full-screen scrim is
-   still the click-outside-to-cancel catcher. */
-.overlay-scrim{
-  position:fixed; inset:0; z-index:70; display:none; align-items:flex-end; justify-content:center;
-  background:transparent; padding-bottom:9vh;
-}
-.overlay-scrim.show{ display:flex; }
-#createpanel{
-  width:min(420px,92vw); border-radius:18px; padding:24px 24px 22px;
-  background:linear-gradient(180deg, rgba(38,30,60,.96), rgba(24,20,44,.96));
-  border:1px solid rgba(255,255,255,.16); box-shadow:0 26px 70px rgba(6,4,20,.6);
-  color:#fff; font-family:var(--cb-font-display); transform:translateY(10px) scale(.98); opacity:0;
-  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.9,.3,1.1);
-}
-.overlay-scrim.show #createpanel{ transform:none; opacity:1; }
-#createpanel h3{ font-weight:700; font-size:20px; display:flex; align-items:center; gap:10px; }
-#createpanel p.sub{ margin-top:6px; font-size:13px; color:#d9cebb; line-height:1.5; }
-#createpanel label{ display:block; margin-top:16px; font-family:var(--cb-font-mono); font-size:11px; letter-spacing:.5px; color:var(--cb-gold); text-transform:uppercase; }
-#createpanel input[type=text]{
-  width:100%; margin-top:7px; height:44px; padding:0 14px; border-radius:11px;
-  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); outline:0; color:#fff;
-  font-family:var(--cb-font-display); font-size:15px;
-}
-#createpanel input[type=text]:focus{ border-color:var(--cb-gold); box-shadow:0 0 0 3px rgba(255,217,138,.22); }
-#createpanel .row{ margin-top:22px; display:flex; gap:10px; justify-content:flex-end; align-items:center; }
-#createpanel button{
-  font-family:var(--cb-font-display); font-weight:700; font-size:14px; border-radius:11px; padding:11px 20px; cursor:pointer; border:0;
-}
-#createpanel .btn-ghost{ background:transparent; color:#d9cebb; border:1px solid rgba(255,255,255,.22); }
-#createpanel .btn-ghost:hover{ background:rgba(255,255,255,.06); }
-#createpanel .btn-go{ background:linear-gradient(180deg,#fdba74,#f97316); color:#3a1c07; box-shadow:0 8px 22px rgba(249,115,22,.45); }
-#createpanel .btn-go:hover{ filter:brightness(1.05); }
-#createpanel .note{ margin-top:14px; font-family:var(--cb-font-mono); font-size:10.5px; color:#9c8f7d; line-height:1.5; }
-
-/* handoff toast (task 2087) — a quiet beat between "orb joins the sky" and the
-   /create build wizard taking over */
-#handoff-toast{
-  position:fixed; left:50%; bottom:34px; transform:translate(-50%, 14px); z-index:60;
-  padding:11px 20px; border-radius:999px; pointer-events:none; opacity:0;
-  background:linear-gradient(180deg, rgba(38,30,60,.96), rgba(24,20,44,.96));
-  border:1px solid rgba(255,255,255,.16); box-shadow:0 16px 44px rgba(6,4,20,.55);
-  color:#f5edd9; font-family:var(--cb-font-display); font-weight:700; font-size:14px;
-  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.9,.3,1.1);
-}
-#handoff-toast.show{ opacity:1; transform:translate(-50%, 0); }
-
-/* ═══ non-self project "detail — coming soon" scene ═══ */
-#detail{
-  position:fixed; inset:0; z-index:20; display:none; align-items:center; justify-content:center; padding:30px;
-  background:
-    radial-gradient(120% 90% at 50% 116%, rgba(255,221,138,.3), transparent 55%),
-    linear-gradient(180deg, #141f3d 0%, #2c3c6e 45%, #6a74a6 78%, #e7b48c 100%);
-}
-body.view-detail #detail{ display:flex; }
-body.view-detail #space, body.view-detail .stage{ display:none; }
-#detail .card{
-  max-width:520px; text-align:center; color:#fff; font-family:var(--cb-font-display);
-  opacity:0; transform:translateY(24px) scale(.97); transition:opacity .7s ease .1s, transform .8s cubic-bezier(.2,.8,.2,1) .1s;
-}
-body.view-detail #detail .card{ opacity:1; transform:none; }
-#detail .halo{ width:120px; height:120px; border-radius:50%; margin:0 auto 22px;
-  background:radial-gradient(38% 34% at 34% 28%, rgba(255,255,255,.9), transparent 60%), radial-gradient(120% 120% at 50% 50%, var(--acc,#38bdf8), color-mix(in srgb, var(--acc,#38bdf8) 55%, #141f3d) 100%);
-  box-shadow:0 0 0 2px rgba(255,255,255,.4) inset, 0 0 70px var(--glow,rgba(56,189,248,.6)); }
-#detail h2{ font-weight:700; font-size:34px; letter-spacing:.3px; text-shadow:0 3px 18px rgba(10,8,25,.6); }
-#detail .tag{ margin-top:8px; font-size:16px; color:#e7dcc9; }
-#detail .desc{ margin-top:16px; font-size:14.5px; line-height:1.6; color:#cdbfae; }
-#detail .meta{ margin-top:18px; font-family:var(--cb-font-mono); font-size:12px; color:var(--cb-gold); }
-#detail .soon{ margin-top:26px; display:inline-block; font-family:var(--cb-font-mono); font-size:12px; color:#3a1c07;
-  background:var(--cb-gold); padding:9px 18px; border-radius:999px; box-shadow:0 8px 22px rgba(20,12,30,.35); }
-#detail .actions{ margin-top:20px; display:flex; gap:12px; justify-content:center; align-items:center; }
-#detail a.visit{ font-family:var(--cb-font-display); font-weight:700; font-size:14px; text-decoration:none;
-  color:#3a1c07; background:linear-gradient(180deg,#fdba74,#f97316); padding:11px 22px; border-radius:11px; box-shadow:0 8px 22px rgba(249,115,22,.45); }
-#detail .esc-hint{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); font-family:var(--cb-font-mono); font-size:11px; color:#f3ead9; }
-#detail .esc-hint kbd{ color:var(--cb-ink); background:var(--cb-gold); border-radius:5px; padding:1px 7px; }
-
-/* ═══════════════════════════════════════════════════════════════════════
-   Dive cinematic (task 1729) — clicking the Cloud Bongos orb flies you from
-   the space constellation, down through the clouds, into the Cloud Bongos
-   world (the download page). space.js fills the star layers, adds #descent
-   .playing on the self-orb click, then hands off to view-download under the
-   flash and lifts the curtain (.done). Each layer runs its own timeline under
-   `#descent.playing` (no nested camera transform to fight) with matched
-   ease-in curves, so everything rushes the viewer together. `--descent` is the
-   master duration; the cloud puffs reuse the gate's proven crush/flash motion.
-   ═══════════════════════════════════════════════════════════════════════ */
-#descent{
-  --descent:3.4s;
-  position:fixed; inset:0; z-index:90; overflow:hidden; display:none; cursor:pointer;
-  background:
-    radial-gradient(120% 92% at 50% 122%, rgba(249,115,22,.20), transparent 56%),
-    radial-gradient(120% 85% at 50% -12%, #2b2456 0%, rgba(43,36,86,0) 55%),
-    linear-gradient(180deg, #05060f 0%, #0a0c20 46%, #0d0f28 100%);
-}
-#descent.playing{ display:block; }
-/* the reveal: once we're deep in the cloud, keep zooming — the cloud rushes
-   past the camera (scales up) and dissolves, revealing the world behind it.
-   A zoom-through crossfade, NOT a slide. */
-#descent.done{ pointer-events:none; opacity:0; transform:scale(1.42);
-  transition:opacity .55s ease-in, transform .8s cubic-bezier(.3,0,.5,1); }
-
-/* two star layers → parallax depth. Near flies faster (closer); both fade as
-   we enter the cloud bank. transform-origin biased low, toward the dive point. */
-.descent-stars{ position:absolute; inset:-22%; pointer-events:none; transform-origin:50% 56%; will-change:transform,opacity; }
-.descent-stars .star{ position:absolute; border-radius:50%; background:#fff; box-shadow:0 0 3px rgba(255,255,255,.5); }
-#descent.playing .descent-stars.far{  animation:descentStarsFar  var(--descent) cubic-bezier(.5,0,.85,.5) forwards; }
-#descent.playing .descent-stars.near{ animation:descentStarsNear var(--descent) cubic-bezier(.45,0,.9,.45) forwards; }
-@keyframes descentStarsFar{  0%{transform:scale(1);opacity:.85} 58%{opacity:.62} 100%{transform:scale(1.8);opacity:0} }
-@keyframes descentStarsNear{ 0%{transform:scale(1);opacity:1}   52%{opacity:.78} 100%{transform:scale(3.4);opacity:0} }
-
-/* the warm glow of the cloud bank, seen from space — grows + rises as we near it */
-.descent-glow{ position:absolute; left:50%; bottom:-12%; width:150%; height:72%; transform:translateX(-50%);
-  background:radial-gradient(60% 60% at 50% 100%, rgba(255,214,150,.52), rgba(249,115,22,.18) 42%, transparent 72%);
-  opacity:.3; pointer-events:none; will-change:transform,opacity; }
-#descent.playing .descent-glow{ animation:descentGlow var(--descent) ease-in forwards; }
-@keyframes descentGlow{ 0%{opacity:.26;transform:translateX(-50%) scale(.82) translateY(10%)} 70%{opacity:.72} 100%{opacity:.95;transform:translateX(-50%) scale(1.65) translateY(-12%)} }
-
-/* the Cloud Bongos sky-island — we fly straight INTO it: it stays centered and
-   swells until it fills the whole screen (going soft + warm as we phase into the
-   cloud). Much bigger now, so it dominates even on a wide monitor, then zooms
-   past + dissolves with the crossfade reveal. */
-.descent-island{ position:absolute; left:50%; top:52%; width:40%; aspect-ratio:1/1; transform:translate(-50%,-50%);
-  background:url("../world/assets/clouds/cloud-island-large.png") center/contain no-repeat; opacity:0;
-  pointer-events:none; will-change:transform,opacity,filter; }
-/* zoom + haze are SEPARATE animations so the zoom (transform) has only two
-   keyframes — a single continuous acceleration with no intermediate stops to
-   stall on (the "hangs twice" bug was intermediate transform keyframes at
-   48%/78%, where the easing restarted). ease-in ends at full speed, carrying
-   straight into the .done crossfade so the whole dive is one continuous motion. */
-#descent.playing .descent-island{
-  animation:descentIslandZoom var(--descent) cubic-bezier(.42,0,1,1) forwards,
-            descentIslandHaze var(--descent) ease-out forwards; }
-@keyframes descentIslandZoom{
-  from{ transform:translate(-50%,-50%) scale(.34); }
-  to{   transform:translate(-50%,-50%) scale(13); }
-}
-@keyframes descentIslandHaze{
-  0%{   opacity:0; filter:drop-shadow(0 20px 42px rgba(10,8,25,.5)) blur(0px) brightness(1); }
-  12%{  opacity:1; }
-  58%{  filter:drop-shadow(0 20px 42px rgba(10,8,25,.3)) blur(4px) brightness(1.16); }
-  100%{ opacity:1; filter:drop-shadow(0 20px 42px rgba(10,8,25,0)) blur(16px) brightness(1.5); }
-}
-
-/* the cloud deck we phase INTO — a full-bleed warm cloud that fills the screen
-   as we enter (hiding the world behind it), so the phase-in is a full screen of
-   cloud even on wide monitors. It dissolves with the zoom-through crossfade. */
-.descent-deck{ position:absolute; left:-8%; right:-8%; top:-10%; height:122%; opacity:0; pointer-events:none;
-  background:
-    radial-gradient(120% 66% at 50% 36%, #fff3d6, rgba(255,243,214,0) 62%),
-    linear-gradient(180deg, #f7dab4 0%, #f2cd9e 68%, #ecc493 100%);
-  will-change:opacity,transform; }
-#descent.playing .descent-deck{ animation:descentDeck var(--descent) ease-in forwards; }
-@keyframes descentDeck{ 0%{opacity:0} 46%{opacity:0} 74%{opacity:1} 100%{opacity:1} }
-
-/* the cloud bank we punch through — puffs sweep up past the camera (the gate's
-   crush motion): each --x/--w placed, --s start-scale, --d dur, --del stagger. */
-.descent-clouds{ position:absolute; inset:0; pointer-events:none; }
-.ic{ position:absolute; bottom:-30%; left:var(--x); width:var(--w); aspect-ratio:720/401;
-  background:url("../world/assets/clouds/cloud-puff.png") center/contain no-repeat; opacity:0;
-  filter:drop-shadow(0 0 34px rgba(249,115,22,.4)) saturate(1.05); will-change:transform,opacity; }
-#descent.playing .ic{ animation:descentCloud var(--d,1.6s) cubic-bezier(.4,.05,.3,1) var(--del,0.9s) forwards; }
-@keyframes descentCloud{ 0%{transform:translateY(0) scale(var(--s,1));opacity:0}
-  15%{opacity:.97} 82%{opacity:.9}
-  100%{transform:translateY(-152vh) scale(calc(var(--s,1)*1.3));opacity:0} }
-
-/* a soft warm bloom as we hit the cloud — ambience now (the reveal is the
-   cloud scroll, not a whiteout), so it stays gentle and fades before the scroll */
-.descent-flash{ position:absolute; inset:0; pointer-events:none; opacity:0;
-  background:radial-gradient(50% 44% at 50% 46%, rgba(255,244,214,.85), rgba(249,115,22,.32) 46%, transparent 76%); }
-#descent.playing .descent-flash{ animation:descentFlash 1.0s ease-out 1.45s forwards; }
-@keyframes descentFlash{ 0%{opacity:0;transform:scale(.7)} 45%{opacity:.5} 100%{opacity:0;transform:scale(1.5)} }
-
-/* ═══════════════════════════════════════════════════════════════════════
-   TABLE DIRECTORY + VIEW TOGGLE (task 1731)
-   A scannable, searchable, sortable alternative to the circle sky. Sits over
-   the same deep-space backdrop; the circle canvas is hidden while it's open.
-   ═══════════════════════════════════════════════════════════════════════ */
-
-.cc-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
-
-/* ─── segmented Sky ⇄ Table toggle (top-right, shown only while browsing) ─── */
-/* top-left ESC button (task 1913): shown on the download + detail pages */
-#esc-btn{
-  position:fixed; top:18px; left:20px; z-index:60; display:none; align-items:center; gap:7px;
-  font-family:var(--cb-font-mono); font-size:12px; font-weight:500; letter-spacing:.3px; color:#fff; cursor:pointer;
-  background:rgba(24,20,44,.5); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:7px 14px;
-  -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2);
-  box-shadow:0 8px 26px rgba(10,8,25,.4); transition:background .2s ease, transform .2s ease;
-}
-#esc-btn:hover{ background:rgba(40,34,64,.72); transform:translateY(-1px); }
-#esc-btn kbd{ color:var(--cb-ink); background:var(--cb-gold); border-radius:5px; padding:1px 7px; font-family:inherit; }
-body.view-download #esc-btn, body.view-detail #esc-btn{ display:inline-flex; }
-
-/* Moved to the bottom-left (task 2094): the top-right corner now holds the
-   GitHub identity chip (#cb-account), so the browse toggle steps out of its way. */
-#view-toggle{
-  position:fixed; bottom:18px; left:20px; z-index:35; display:none; gap:2px; padding:3px;
-  border-radius:999px; background:rgba(24,20,44,.5); border:1px solid rgba(255,255,255,.14);
-  -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2);
-  box-shadow:0 8px 26px rgba(10,8,25,.4);
-}
-body.view-space #view-toggle, body.view-table #view-toggle{ display:flex; }
-#view-toggle .vt-btn{
-  display:flex; align-items:center; gap:7px; border:0; cursor:pointer;
-  font-family:var(--cb-font-mono); font-size:12px; font-weight:500; letter-spacing:.3px;
-  color:#d9cebb; background:transparent; padding:7px 15px; border-radius:999px;
-  transition:background .18s ease, color .18s ease;
-}
-#view-toggle .vt-btn svg{ width:14px; height:14px; flex:none; }
-#view-toggle .vt-btn:hover{ color:#fff; }
-#view-toggle .vt-btn.active{
-  color:var(--cb-ink); background:linear-gradient(180deg,#fde3b4,var(--cb-gold));
-  box-shadow:0 3px 12px rgba(246,201,118,.4);
-}
-
-/* ─── top-right cluster: enter builders' hall + GitHub identity chip ──────────
-   A fixed top-right row shown on every post-entry view (orbs, table, download,
-   detail), so "the way in" (the hall) and "who you are" (the account) always sit
-   in the same corner. #view-toggle is bottom-left and #esc-btn is top-left, so
-   the top-right is clear on every view. */
-#cb-topright{
-  position:fixed; top:18px; right:20px; z-index:36; display:none;
-  align-items:center; gap:10px;
-}
-body.view-space #cb-topright, body.view-table #cb-topright,
-body.view-download #cb-topright, body.view-detail #cb-topright{ display:flex; }
-
-/* the hall door — a glass pill, deliberately distinct from the gold "Sign in"
-   chip so the action (enter the hall) and the identity (GitHub login) read as
-   two separate things sitting side by side. */
-.cb-hall{
-  display:inline-flex; align-items:center; gap:8px; cursor:pointer; text-decoration:none;
-  font-family:var(--cb-font-mono); font-size:12.5px; font-weight:500; letter-spacing:.3px;
-  color:#f3ead9; background:rgba(24,20,44,.5); border:1px solid rgba(255,255,255,.14);
-  border-radius:999px; padding:8px 15px;
-  -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2);
-  box-shadow:0 8px 26px rgba(10,8,25,.4);
-  transition:background .18s ease, transform .16s ease, border-color .18s ease;
-}
-.cb-hall:hover{ background:rgba(40,34,64,.72); border-color:rgba(255,217,138,.5); transform:translateY(-1px); }
-.cb-hall svg{ width:15px; height:15px; flex:none; color:var(--cb-gold); }
-
-/* GitHub identity chip — the org-page account (task 2094). Now a flex child of
-   #cb-topright (the fixed positioning moved to the wrapper). Signed out = a
-   "Sign in with GitHub" button; signed in = the avatar + login with a quiet
-   sign-out. Populated by space.js from /api/bongos/me. */
-#cb-account{
-  display:flex; align-items:center;
-  font-family:var(--cb-font-mono); font-size:12.5px; font-weight:500;
-}
-#cb-account .cb-signin{
-  display:inline-flex; align-items:center; gap:8px; cursor:pointer; text-decoration:none;
-  color:var(--cb-ink); background:linear-gradient(180deg,#fde3b4,var(--cb-gold));
-  border:0; border-radius:999px; padding:8px 16px;
-  font-family:var(--cb-font-display); font-weight:700; font-size:13px;
-  box-shadow:0 3px 12px rgba(246,201,118,.42); transition:transform .16s ease, box-shadow .16s ease;
-}
-#cb-account .cb-signin:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(246,201,118,.5); }
-#cb-account .cb-signin svg{ width:15px; height:15px; }
-#cb-account .cb-me{
-  display:inline-flex; align-items:center; gap:9px; padding:5px 12px 5px 6px; border-radius:999px;
-  background:rgba(24,20,44,.5); border:1px solid rgba(255,255,255,.14); color:#f3ead9;
-  -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2);
-  box-shadow:0 8px 26px rgba(10,8,25,.4);
-}
-#cb-account .cb-me img{ width:28px; height:28px; border-radius:50%; border:1.5px solid rgba(255,217,138,.6); display:block; }
-#cb-account .cb-me .cb-out{
-  color:#b7a88f; text-decoration:none; font-size:11px; margin-left:2px; padding-left:9px;
-  border-left:1px solid rgba(255,255,255,.16); transition:color .15s ease;
-}
-#cb-account .cb-me .cb-out:hover{ color:#fff; }
-/* Small screens: drop the login name + the hall label, keep the icon + avatar. */
-@media (max-width:520px){
-  #cb-account .cb-name{ display:none; }
-  .cb-hall__label{ display:none; }
-  .cb-hall{ padding:8px 11px; }
-}
-
-/* Signed-out: the create-a-project affordances rest grayed + nudge sign-in first
-   (task 2094). The ghost orb loses its gold glow + pulse; the table's create
-   button dims. space.js relabels the ghost + routes the click to the sign-in
-   prompt instead of the name field. */
-#ghost-orb.locked{
-  border-color:rgba(255,255,255,.3);
-  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), rgba(255,255,255,0) 68%);
-}
-#ghost-orb.locked .ghost-plus{ color:#b9ac97; text-shadow:none; }
-#ghost-orb.locked.show{ animation:none; }
-#table-view .tv-add.locked{ opacity:.5; }
-
-/* Signed-out create gate — the sign-in prompt shown when a signed-out visitor
-   tries to create a project. Shares the create panel's look + the overlay-scrim
-   entrance (task 2094). */
-#signinpanel{
-  width:min(420px,92vw); border-radius:18px; padding:24px 24px 22px;
-  background:linear-gradient(180deg, rgba(38,30,60,.96), rgba(24,20,44,.96));
-  border:1px solid rgba(255,255,255,.16); box-shadow:0 26px 70px rgba(6,4,20,.6);
-  color:#fff; font-family:var(--cb-font-display);
-  transform:translateY(10px) scale(.98); opacity:0;
-  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.9,.3,1.1);
-}
-.overlay-scrim.show #signinpanel{ transform:none; opacity:1; }
-#signinpanel h3{ font-weight:700; font-size:20px; }
-#signinpanel p.sub{ margin-top:6px; font-size:13px; color:#d9cebb; line-height:1.5; }
-#signinpanel .signin-go{
-  margin-top:20px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px;
-  text-decoration:none; cursor:pointer; border:0; border-radius:12px; padding:13px 20px;
-  font-family:var(--cb-font-display); font-weight:700; font-size:15px;
-  color:var(--cb-ink); background:linear-gradient(180deg,#fde3b4,var(--cb-gold));
-  box-shadow:0 8px 22px rgba(246,201,118,.45); transition:filter .16s ease, transform .16s ease;
-}
-#signinpanel .signin-go:hover{ filter:brightness(1.04); transform:translateY(-1px); }
-#signinpanel .signin-go svg{ width:18px; height:18px; }
-#signinpanel .signin-dismiss{
-  margin-top:12px; width:100%; background:transparent; border:0; cursor:pointer;
-  color:#9c8f7d; font-family:var(--cb-font-mono); font-size:12px; transition:color .15s ease;
-}
-#signinpanel .signin-dismiss:hover{ color:#d9cebb; }
-
-/* ─── the table pane ─── */
-#table-view{
-  display:none; position:fixed; inset:0; z-index:15;
-  flex-direction:column; align-items:center; padding:74px 24px 22px;
-}
-body.view-table #table-view{ display:flex; }
-
-#table-view .tv-head{
-  width:min(1040px,94vw); display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px;
-}
-#table-view .tv-mark{
-  display:flex; align-items:center; gap:10px; flex:none;
-  font-family:var(--cb-font-display); font-weight:700; font-size:20px; color:var(--cb-gold);
-  text-shadow:0 2px 12px rgba(20,12,30,.6);
-}
-#table-view .tv-mark b{ color:var(--cb-gold); }
-#table-view .tv-mark .tv-sub{ font-family:var(--cb-font-mono); font-weight:500; font-size:12px; color:#9c8f7d; margin-left:2px; }
-
-#table-view .tv-search{
-  flex:1; min-width:210px; display:flex; align-items:center; gap:10px; height:46px; padding:0 16px;
-  border-radius:13px; background:rgba(255,250,242,.1); border:1px solid rgba(255,255,255,.2);
-  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:border-color .18s ease, box-shadow .18s ease;
-}
-#table-view .tv-search:focus-within{ border-color:var(--cb-gold); box-shadow:0 0 0 3px rgba(255,217,138,.18); }
-#table-view .tv-search .mag{ width:18px; height:18px; color:var(--cb-gold); flex:none; }
-#table-view .tv-search input{
-  flex:1; min-width:0; background:transparent; border:0; outline:0; color:#fff;
-  font-family:var(--cb-font-mono); font-size:14.5px;
-}
-#table-view .tv-search input::placeholder{ color:rgba(255,246,235,.5); }
-#table-view .tv-count{ font-family:var(--cb-font-mono); font-size:11px; color:#9c8f7d; flex:none; white-space:nowrap; }
-
-#table-view .tv-add{
-  flex:none; display:flex; align-items:center; gap:7px; height:46px; padding:0 16px; border-radius:12px; cursor:pointer;
-  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#f3ead9;
-  font-family:var(--cb-font-display); font-weight:700; font-size:13px; transition:background .16s ease;
-}
-#table-view .tv-add:hover{ background:rgba(255,255,255,.12); }
-#table-view .tv-add .plus{ font-size:17px; line-height:1; color:var(--cb-gold); margin-top:-1px; }
-
-/* ─── scroll container: table scrolls inside its own pane, page never does ─── */
-#table-view .tv-scroll{
-  width:min(1040px,94vw); flex:1 1 auto; min-height:0; overflow:auto;
-  border-radius:16px; border:1px solid rgba(255,255,255,.1); background:rgba(18,15,38,.55);
-  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 20px 60px rgba(8,6,22,.5);
-}
-#table-view table{ width:100%; border-collapse:collapse; min-width:620px; }
-
-#table-view thead th{
-  position:sticky; top:0; z-index:2; text-align:left; padding:14px 18px;
-  font-family:var(--cb-font-mono); font-size:11px; font-weight:500; letter-spacing:.6px; text-transform:uppercase; color:#9c8f7d;
-  background:rgba(20,17,42,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
-  border-bottom:1px solid rgba(255,255,255,.1); white-space:nowrap;
-}
-#table-view thead th.num{ text-align:right; }
-#table-view th.sortable{ cursor:pointer; user-select:none; transition:color .15s ease; }
-#table-view th.sortable:hover{ color:#f3ead9; }
-#table-view th.sorted{ color:var(--cb-gold); }
-#table-view th .sort-ind{ display:inline-block; width:10px; margin-left:5px; font-size:9px; }
-
-#table-view tbody td{ padding:12px 18px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:middle; }
-#table-view tbody tr:last-child td{ border-bottom:0; }
-#table-view .tv-row{ cursor:pointer; transition:background .14s ease; }
-#table-view .tv-row:hover{ background:rgba(255,255,255,.05); }
-
-#table-view .tv-proj{ display:flex; align-items:center; gap:12px; }
-#table-view .tv-dot{ width:12px; height:12px; border-radius:50%; flex:none;
-  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--acc,#fb923c) 72%);
-  box-shadow:0 0 12px var(--acc,#fb923c); }
-#table-view .tv-proj-txt{ display:flex; flex-direction:column; min-width:0; }
-#table-view .tv-name{ font-family:var(--cb-font-display); font-weight:700; font-size:15px; color:#fff; display:flex; align-items:center; gap:8px; }
-#table-view .tv-self{ font-family:var(--cb-font-mono); font-size:9px; font-weight:500; letter-spacing:.4px;
-  color:var(--cb-ink); background:var(--cb-gold); padding:2px 7px; border-radius:999px; white-space:nowrap; }
-#table-view .tv-tag{ font-size:12.5px; color:#b9ab98; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:360px; }
-
-#table-view .tv-num{ text-align:right; font-family:var(--cb-font-mono); font-size:15px; font-weight:500; color:var(--cb-gold); }
-#table-view .tv-pill{ display:inline-block; font-family:var(--cb-font-mono); font-size:10.5px; font-weight:500; letter-spacing:.3px; padding:3px 10px; border-radius:999px; white-space:nowrap; }
-#table-view .tp-self{ color:#3a1c07; background:var(--cb-gold); }
-#table-view .tp-live{ color:#bfe9ff; background:rgba(56,189,248,.16); border:1px solid rgba(56,189,248,.4); }
-#table-view .tp-sample{ color:#d9cebb; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); }
-
-#table-view .tv-tags{ }
-#table-view .tv-tagwrap{ display:flex; flex-wrap:wrap; gap:5px; }
-#table-view .tv-chip{ font-family:var(--cb-font-mono); font-size:10px; color:#cdbfae; background:rgba(255,255,255,.06);
-  border:1px solid rgba(255,255,255,.12); padding:2px 8px; border-radius:6px; white-space:nowrap; }
-
-#table-view .tv-act{ text-align:right; white-space:nowrap; }
-#table-view .tv-go{ font-family:var(--cb-font-mono); font-size:12px; color:var(--cb-gold); background:transparent;
-  border:1px solid rgba(255,217,138,.4); border-radius:9px; padding:7px 13px; cursor:pointer; transition:background .15s ease, color .15s ease; }
-#table-view .tv-row:hover .tv-go{ background:var(--cb-gold); color:var(--cb-ink); }
-
-#table-view .tv-empty{ padding:34px 18px; text-align:center; font-family:var(--cb-font-mono); font-size:13px; color:#9c8f7d; }
-#table-view .tv-foot{ margin-top:13px; font-family:var(--cb-font-mono); font-size:11px; color:#8a7d6f; text-shadow:0 1px 6px rgba(20,12,30,.6); }
-#table-view .tv-foot kbd{ color:var(--cb-ink); background:var(--cb-gold); border-radius:5px; padding:1px 7px; }
-
-/* narrow screens: drop the tags + action columns so Project / Builders / Type
-   fit without a horizontal scroll (a row tap still opens the project); let the
-   table shrink to the container and tighten padding. */
-@media (max-width:760px){
-  #table-view{ padding:70px 12px 18px; }
-  #table-view .col-tags, #table-view .tv-tags,
-  #table-view .col-act, #table-view .tv-act{ display:none; }
-  #table-view table{ min-width:0; }
-  #table-view thead th, #table-view tbody td{ padding-left:13px; padding-right:13px; }
-  #table-view .tv-tag{ max-width:52vw; }
-  #table-view .tv-head{ gap:12px; }
-  #table-view .tv-mark .tv-sub{ display:none; }
-}
-/* very narrow phones: also drop the Type column so Project + the Builders stat
-   sit flush with no horizontal scroll. */
-@media (max-width:560px){
-  #table-view .col-type{ display:none; }
-}
-
-/* ── Bongo Buddha idle on the download page, above the search bar (task 1732,
-   ADR 0088) — the shipped idle sprite floating on a THIN painterly cloud + a
-   warm glow. The cloud is plate-clouds-near (the page's own wisp), not the
-   bubbly cloud-puff, so the buddha's cloud reads on-theme. Scoped inside #land,
-   which only renders in view-download; frames injected + cycled by space.js.
-   It carries no .el/.mark class, so the stage drag script never grabs it. */
-#buddha{
-  position:relative; width:250px; height:206px; margin-bottom:2px;
-  pointer-events:none; animation:buddhaFloat 5.4s ease-in-out infinite;
-}
-#buddha .buddha-glow{
-  position:absolute; left:50%; top:37%; width:245px; height:195px;
-  transform:translate(-50%,-50%); pointer-events:none;
-  background:radial-gradient(closest-side, rgba(255,206,112,.58), rgba(255,190,80,.16) 58%, transparent 75%);
-}
-#buddha .buddha-cloud{
-  position:absolute; left:50%; bottom:2px; width:330px; transform:translateX(-50%);
-  pointer-events:none; -webkit-user-drag:none; user-drag:none;
-  filter:drop-shadow(0 4px 12px rgba(90,70,120,.3));
-}
-#buddha .buddha-fig{
-  position:absolute; left:50%; top:0; width:205px; aspect-ratio:380/320;
-  transform:translateX(-50%);
-}
-#buddha .buddha-fig img{
-  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
-  -webkit-user-drag:none; user-drag:none;
-  filter:drop-shadow(0 8px 16px rgba(20,12,30,.42));
-}
-@keyframes buddhaFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
-
-/* reduced-motion: keep everything usable, just calmer */
-@media (prefers-reduced-motion:reduce){
-  .star{ animation:none !important; }
-  #descent, #descent.playing{ display:none !important; }
-  .descent-stars, .descent-glow, .descent-island, .descent-deck, .ic, .descent-flash{ animation:none !important; }
-  #buddha{ animation:none !important; }
-  #view-toggle .vt-btn, #table-view .tv-row, #table-view .tv-go, #table-view .tv-search{ transition:none; }
-}