@viberaven/cli 1.6.12 → 1.7.1

package/dist/stack/scene.css

@@ -1,484 +1,522 @@
-/* The 3D construction scene (scene.ts), shared by the local Studio and viberaven.dev.
-   The Studio serves it after stack.css as /stack/app.css; the site imports it inside a .sw-scene container that
-   sets the same variables (--ink, --line-2, --font, --mono, --ease...). Only .scene rules live here. */
-/* ---------- the construction scene: a small isometric world for the action in progress ----------
-   Planned parts are traced outlines; a part works while its step is active; it settles solid only when its
-   evidence arrives. Activity is calm (slow flows, a gentle hover); milestones get one short spring. */
-:root {
-  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
-  --sc-amber: #f2c15f;
-  --sc-green: #6fd08c;
-  --sc-red: #f4715f;
-}
-.scene-stage { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
-.scene-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
-.scene-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(242, 193, 95, 0.45); color: var(--sc-amber); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
-.scene-tag.is-demo { border-style: dashed; border-color: rgba(255, 255, 255, 0.35); color: var(--ink-2); }
-.scene-note { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.scene { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; }
-.scene-caption { justify-self: center; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(14, 14, 17, 0.94); font-size: 13.5px; color: var(--ink); animation: settle 0.4s var(--ease) both; }
-.scene-caption > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.scene-caption i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
-.scene-caption.is-work i { background: var(--sc-amber); animation: pulse-dot 1.4s ease-in-out infinite; }
-.scene-caption.is-wait { border-color: rgba(242, 193, 95, 0.5); }
-.scene-caption.is-wait i { background: var(--sc-amber); }
-.scene-caption.is-pass i { background: var(--sc-green); }
-.scene-caption.is-fail { border-color: rgba(244, 113, 95, 0.45); }
-.scene-caption.is-fail i { background: var(--sc-red); }
-.scene-when { font-size: 12px; color: var(--ink-3); }
-.scene-inspect { position: absolute; left: 0; bottom: 52px; z-index: 2; width: min(320px, 70%); display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 12, 15, 0.97); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9); animation: settle 0.3s var(--ease) both; }
-.scene-inspect header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.scene-inspect strong { font-size: 14px; font-weight: 600; }
-.scene-inspect p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
-/* Faces. */
-.scene polygon, .scene path, .scene ellipse, .scene rect { stroke-linejoin: round; }
-.scene .f-top, .scene .f-left, .scene .f-right { stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.8; transition: fill 0.45s var(--ease), stroke 0.45s var(--ease), fill-opacity 0.45s var(--ease); }
-.scene .box .f-top { fill: #2a2a31; }
-.scene .box .f-left { fill: #1d1d23; }
-.scene .box .f-right { fill: #141418; }
-.scene .ground .f-top { fill: url(#sc-floor); }
-.scene .ground .f-left { fill: #131316; }
-.scene .ground .f-right { fill: #0d0d10; }
-.scene .pad .ground .f-top { fill: #1d1d24; }
-.scene .grid-lines .grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
-.scene .rim { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; transition: stroke 0.8s var(--ease); }
-.scene .raven { fill: rgba(245, 245, 247, 0.9); }
-/* Labels painted on a slanted face: world-unit sizes, a sans face and no hinting, so they stay smooth at an angle. */
-.scene text { text-rendering: geometricPrecision; }
-.scene .ground-label { fill: rgba(245, 245, 247, 0.5); font-family: var(--font); font-size: 0.36px; font-weight: 700; letter-spacing: 0.16em; }
-.scene .shadow { fill: rgba(0, 0, 0, 0.5); filter: url(#sc-soft); }
-.scene .shadow.soft { fill: rgba(0, 0, 0, 0.42); }
-/* The app window. */
-.scene .frame .f-top { fill: #34343d; }
-.scene .frame .f-left { fill: #26262d; }
-.scene .frame .f-right { fill: #1b1b21; }
-.scene .win * { vector-effect: non-scaling-stroke; }
-.scene .win-face { fill: #0e0e12; }
-.scene .win-bar { fill: #1b1b21; }
-.scene .dot { fill: rgba(255, 255, 255, 0.22); }
-.scene .win-url { fill: rgba(255, 255, 255, 0.07); }
-.scene .win-outline { fill: none; stroke: none; }
-.scene .panel { fill: #202027; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
-.scene .panel.added { stroke: rgba(242, 193, 95, 0.75); fill: #26221a; }
-.scene .panel.modified { stroke: rgba(255, 255, 255, 0.32); }
-.scene .panel-line { fill: rgba(255, 255, 255, 0.2); }
-.scene .panel-name { fill: rgba(245, 245, 247, 0.78); font-family: var(--font); font-size: 0.34px; font-weight: 600; }
-.scene .panel-in { animation: panel-in 0.7s var(--spring) both; }
-@keyframes panel-in { from { opacity: 0; transform: translate(0, -0.9px); } }
-.scene .ghost-panel { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; stroke-dasharray: 0.02 0.015; }
-.scene .ghost-panel.sketch { stroke: rgba(242, 193, 95, 0.7); stroke-width: 1.4; stroke-dasharray: 0.22 0.78; animation: sketch 2.6s linear infinite; }
-.scene .ghost-panel.sketch:nth-child(2) { animation-delay: -0.9s; }
-.scene .ghost-panel.sketch:nth-child(3) { animation-delay: -1.7s; }
-@keyframes sketch { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
-.scene .key-sign circle { fill: rgba(242, 193, 95, 0.12); stroke: var(--sc-amber); stroke-width: 1.4; }
-.scene .key-sign path { fill: none; stroke: var(--sc-amber); stroke-width: 1.6; stroke-linecap: round; }
-/* The agent unit. */
-.scene .unit .f-top { fill: #2c2c34; }
-.scene .unit .f-left { fill: #202027; }
-.scene .unit .f-right { fill: #16161b; }
-.scene .unit-plate { fill: #121216; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
-.scene .unit-led { fill: rgba(255, 255, 255, 0.18); }
-.scene .p-active .unit-led { fill: var(--sc-amber); animation: led 1.6s ease-in-out infinite; }
-.scene .p-done .unit-led { fill: var(--sc-green); }
-.scene .p-active .hover { animation: hover 3.6s ease-in-out infinite; }
-@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
-@keyframes led { 50% { opacity: 0.35; } }
-/* Posts, lamps, ports, towers, crates. */
-.scene .post .f-top { fill: #2e2e36; }
-.scene .post .f-left { fill: #222229; }
-.scene .post .f-right { fill: #18181d; }
-.scene .lamp .f-top { fill: #3a3a42; }
-.scene .lamp .f-left { fill: #2b2b32; }
-.scene .lamp .f-right { fill: #222228; }
-.scene .p-active .lamp .f-top { fill: #f6d58a; }
-.scene .p-active .lamp .f-left { fill: #c99a3f; }
-.scene .p-active .lamp .f-right { fill: #a87e30; }
-.scene .p-active .lamp { animation: led 1.8s ease-in-out infinite; }
-.scene .p-done .lamp .f-top { fill: #9be3b1; }
-.scene .p-done .lamp .f-left { fill: #57b673; }
-.scene .p-done .lamp .f-right { fill: #3f8f57; }
-.scene .p-failed .lamp .f-top { fill: #f8a597; }
-.scene .p-failed .lamp .f-left { fill: #d35a49; }
-.scene .p-failed .lamp .f-right { fill: #a9463a; }
-.scene .port .f-top { fill: #2e2e36; }
-.scene .port-led { fill: rgba(255, 255, 255, 0.18); }
-.scene .p-done .port-led { fill: var(--sc-green); }
-.scene .p-failed .port-led { fill: var(--sc-red); }
-.scene .tower .f-top { fill: #303039; }
-.scene .tower .f-left { fill: #23232a; }
-.scene .tower .f-right { fill: #18181e; }
-.scene .vent { fill: rgba(255, 255, 255, 0.07); }
-.scene .tower-led { fill: rgba(255, 255, 255, 0.18); }
-.scene .p-active .tower-led { fill: var(--sc-amber); animation: led 1.2s ease-in-out infinite; }
-.scene .p-done .tower-led { fill: var(--sc-green); }
-.scene .p-failed .tower-led { fill: var(--sc-red); }
-.scene .crate .f-top { fill: #3a342a; }
-.scene .crate .f-left { fill: #2b261f; }
-.scene .crate .f-right { fill: #221e18; }
-.scene .crate-x { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
-/* Database layers, gateway, barrier. */
-.scene .cyl .f-left { fill: #1c1f1e; stroke: rgba(62, 207, 142, 0.18); }
-.scene .cyl .f-top { fill: #262b29; stroke: rgba(62, 207, 142, 0.38); }
-.scene .cyl { animation: layer-in 0.7s var(--spring) both; }
-.scene .cyl.ghost { animation: none; }
-.scene .cyl.ghost .f-left, .scene .cyl.ghost .f-top { fill: transparent; stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 4 5; }
-@keyframes layer-in { from { opacity: 0; transform: translateY(-16px); } }
-.scene .table { fill: rgba(62, 207, 142, 0.16); stroke: rgba(62, 207, 142, 0.7); stroke-width: 1; vector-effect: non-scaling-stroke; animation: panel-in 0.6s var(--spring) both; }
-.scene .pillar .f-top, .scene .lintel .f-top { fill: #33333b; }
-.scene .pillar .f-left, .scene .lintel .f-left { fill: #26262d; }
-.scene .pillar .f-right, .scene .lintel .f-right { fill: #1b1b20; }
-.scene .lintel-plate { fill: #f5f5f7; }
-.scene .bar .f-top { fill: #3b3222; }
-.scene .bar .f-left { fill: #2c261a; }
-.scene .bar .f-right { fill: #231e15; }
-.scene .bar-stripes { stroke: rgba(242, 193, 95, 0.8); stroke-width: 2; vector-effect: non-scaling-stroke; fill: none; }
-/* Connections. */
-.scene .pipe-base { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 4; stroke-linecap: round; }
-.scene .pipe { fill: none; stroke: rgba(245, 245, 247, 0.75); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
-.scene .pipe-flow { fill: none; stroke: transparent; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 10; }
-.scene .p-planned .pipe-base { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.4; stroke-dasharray: 3 5; }
-.scene .p-active .pipe-base { stroke: rgba(242, 193, 95, 0.14); }
-.scene .p-active .pipe-flow { stroke: var(--sc-amber); animation: flow 1.4s linear infinite; }
-.scene .p-done .pipe { animation: trace 0.9s var(--ease) forwards; }
-.scene .p-failed .pipe-base { stroke: rgba(244, 113, 95, 0.55); stroke-width: 2; stroke-dasharray: 4 4; }
-.scene .p-idle .pipe-base { stroke: rgba(255, 255, 255, 0.07); }
-@keyframes flow { to { stroke-dashoffset: -13; } }
-@keyframes trace { to { stroke-dashoffset: 0; } }
-/* Travellers. */
-.scene .token { fill: #f5f5f7; }
-.scene .token-halo { fill: rgba(245, 245, 247, 0.16); }
-.scene .spark .token { fill: #fbe2a6; }
-.scene .spark .token-halo { fill: rgba(242, 193, 95, 0.22); }
-.scene .record .token { fill: #7fe0b0; }
-.scene .record .token-halo { fill: rgba(62, 207, 142, 0.22); }
-.scene .blocked .token, .scene .leak .token { fill: #f8a597; }
-.scene .blocked .token-halo, .scene .leak .token-halo { fill: rgba(244, 113, 95, 0.22); }
-.scene .package .token { fill: #f5f5f7; }
-/* Labels pinned to the world. */
-.scene .tag rect { fill: rgba(12, 12, 15, 0.94); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
-.scene .tag text { fill: #d9d9df; font-family: var(--font); font-size: 9.5px; font-weight: 600; }
-.scene .p-done .tag-check rect, .scene .p-done .tag-port rect { stroke: rgba(111, 208, 140, 0.55); }
-.scene .p-done .tag-check text, .scene .p-done .tag-port text { fill: var(--sc-green); }
-.scene .p-failed .tag-check rect { stroke: rgba(244, 113, 95, 0.6); }
-.scene .p-failed .tag-check text { fill: var(--red-ink); }
-.scene .p-active .tag-check rect { stroke: rgba(242, 193, 95, 0.6); }
-/* Part states. */
-.scene .part { outline: none; cursor: pointer; }
-.scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 600; animation: trace 1.2s var(--ease) forwards; }
-.scene .part.p-planned .win-face, .scene .part.p-planned .win-bar, .scene .part.p-planned image, .scene .part.p-planned .raven { opacity: 0.25; }
-.scene .part.p-planned .shadow { opacity: 0.3; }
-.scene .part.p-idle { opacity: 0.55; }
-.scene .part.p-done { animation: settle-part 0.6s var(--spring) both; }
-@keyframes settle-part { from { transform: translateY(-6px); } }
-.scene .part.p-failed .f-top { fill: #3c1f1c; stroke: rgba(244, 113, 95, 0.75); }
-.scene .part.p-failed .f-left { fill: #2c1715; stroke: rgba(244, 113, 95, 0.5); }
-.scene .part.p-failed .f-right { fill: #211211; stroke: rgba(244, 113, 95, 0.4); }
-.scene .part.p-failed .win-face { fill: #1a0f0e; }
-.scene .part.p-waiting .f-top, .scene .part.p-waiting .f-left, .scene .part.p-waiting .f-right { stroke: rgba(242, 193, 95, 0.8); stroke-dasharray: 5 4; }
-.scene .part.p-waiting .win-face { fill: #17140c; }
-.scene .part.is-focus { filter: drop-shadow(0 0 10px rgba(242, 193, 95, 0.22)); }
-.scene .part.is-focus.p-active .frame .f-top { fill: #3b3a33; }
-.scene .part.is-selected .f-top, .scene .part.is-selected .f-left, .scene .part.is-selected .f-right { stroke: rgba(245, 245, 247, 0.85); stroke-width: 1.4; }
-.scene .part:focus-visible .f-top, .scene .part:focus-visible .f-left, .scene .part:focus-visible .f-right { stroke: var(--sc-amber); stroke-width: 2; }
-.scene .part:hover .f-top { stroke: rgba(255, 255, 255, 0.35); }
-/* Phases: a waiting scene holds still around the part that needs you; a failed one marks it. */
-.scene.is-wait .part:not(.p-waiting):not([data-part="platform"]) { opacity: 0.5; transition: opacity 0.5s var(--ease); }
-.scene.is-wait .pipe-flow, .scene.is-wait .hover, .scene.is-wait .sketch, .scene.is-wait .token-g { animation-play-state: paused; }
-.scene.is-fail .part:not(.p-failed):not([data-part="platform"]) { opacity: 0.7; }
-.scene.is-done [data-part="platform"] .rim { stroke: rgba(111, 208, 140, 0.5); }
-.scene.is-stopped .part { opacity: 0.6; }
-.scene .fx-payoff .ring { fill: none; stroke: rgba(111, 208, 140, 0.55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: payoff 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
-.scene .fx-payoff .ring.two { stroke: rgba(245, 245, 247, 0.35); animation-delay: 0.22s; }
-@keyframes payoff { from { opacity: 0.9; transform: scale(0.35); } to { opacity: 0; transform: scale(1.15); } }
-.scene.is-demo .tag rect { stroke-dasharray: 3 3; }
-@media (prefers-reduced-motion: reduce) {
-  .scene *, .scene .part, .scene-caption, .scene-inspect { animation: none !important; transition: none !important; }
-  .scene .p-done .pipe { stroke-dashoffset: 0; }
-  .scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { stroke-dashoffset: 0; }
-  .scene .p-active .pipe-flow { stroke-dasharray: none; }
-  .scene .fx-payoff { display: none; }
-}
-.scene .box .f-top { fill: #3c3c46; }
-.scene .box .f-left { fill: #2b2b33; }
-.scene .box .f-right { fill: #1f1f26; }
-.scene .edge { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 1; stroke-linecap: round; }
-.scene .ground .f-top { fill: #202027; }
-.scene .ground .f-left { fill: #18181d; }
-.scene .ground .f-right { fill: #111115; }
-.scene .ground .edge { stroke: rgba(255, 255, 255, 0.16); }
-.scene .grid-lines .grid { stroke: rgba(255, 255, 255, 0.06); }
-.scene .frame .f-top { fill: #4b4b56; }
-.scene .frame .f-left { fill: #35353e; }
-.scene .frame .f-right { fill: #27272e; }
-.scene .unit .f-top { fill: #44444e; }
-.scene .unit .f-left { fill: #31313a; }
-.scene .unit .f-right { fill: #24242b; }
-.scene .post .f-top { fill: #42424c; }
-.scene .post .f-left { fill: #30303a; }
-.scene .post .f-right { fill: #23232a; }
-.scene .lamp .f-top { fill: #55555f; }
-.scene .lamp .f-left { fill: #3e3e47; }
-.scene .lamp .f-right { fill: #2f2f37; }
-.scene .tower .f-top { fill: #45454f; }
-.scene .tower .f-left { fill: #32323b; }
-.scene .tower .f-right { fill: #25252c; }
-.scene .pillar .f-top, .scene .lintel .f-top { fill: #474752; }
-.scene .pillar .f-left, .scene .lintel .f-left { fill: #34343d; }
-.scene .pillar .f-right, .scene .lintel .f-right { fill: #26262e; }
-.scene .crate .f-top { fill: #4a4133; }
-.scene .crate .f-left { fill: #383126; }
-.scene .crate .f-right { fill: #2b261e; }
-.scene .port .f-top { fill: #42424c; }
-.scene .cyl .f-left { fill: #232826; }
-.scene .cyl .f-top { fill: #303733; }
-.scene .part.p-planned .edge { stroke: none; }
-.scene .part.p-failed .edge { stroke: rgba(244, 113, 95, 0.6); }
-.scene .part.p-done .edge { stroke: rgba(255, 255, 255, 0.34); }
-.scene-stage::before { content: ""; position: absolute; left: 10%; right: 10%; top: 22%; bottom: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.045), transparent); pointer-events: none; }
-/* ---------- units and brands: every object is a machined unit with its mark; providers wear their own colours ---------- */
-.scene .unit .f-top { fill: #41414b; }
-.scene .unit .f-left { fill: #2e2e36; }
-.scene .unit .f-right { fill: #222229; }
-.scene .pedestal .f-top { fill: #2a2a31; }
-.scene .pedestal .f-left { fill: #1e1e24; }
-.scene .pedestal .f-right { fill: #16161b; }
-.scene .unit-ring { fill: none; stroke: var(--brand); stroke-opacity: 0.55; stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: stroke 0.4s var(--ease), stroke-opacity 0.4s var(--ease); }
-.scene .unit-led { fill: var(--brand); fill-opacity: 0.35; }
-.scene .p-planned .unit-ring { stroke-opacity: 0.15; }
-.scene .p-active .unit-ring { stroke: var(--sc-amber); stroke-opacity: 0.95; }
-.scene .p-active .unit-led { fill: var(--sc-amber); fill-opacity: 1; animation: led 1.6s ease-in-out infinite; }
-.scene .p-done .unit-ring { stroke: var(--sc-green); stroke-opacity: 0.9; }
-.scene .p-done .unit-led { fill: var(--sc-green); fill-opacity: 1; }
-.scene .p-failed .unit-ring { stroke: var(--sc-red); stroke-opacity: 0.95; }
-.scene .p-failed .unit-led { fill: var(--sc-red); fill-opacity: 1; }
-.scene .p-waiting .unit-ring { stroke: var(--sc-amber); stroke-dasharray: 4 3; }
-.scene .p-waiting .unit-led { fill: var(--sc-amber); fill-opacity: 1; }
-.scene .p-done .unit-wrap .edge, .scene .p-active .unit-wrap .edge { stroke: rgba(255, 255, 255, 0.4); }
-/* Supabase: green seams between layers, the bolt on a dark badge. */
-.scene .brand-supabase .cyl .f-top { fill: #2c3530; stroke: rgba(62, 207, 142, 0.55); }
-.scene .brand-supabase .cyl .f-left { fill: #1f2522; stroke: rgba(62, 207, 142, 0.22); }
-.scene .seam { fill: none; stroke: var(--brand); stroke-opacity: 0.7; stroke-width: 1.4; stroke-linecap: round; filter: url(#sc-glow); }
-.scene .p-active .seam { animation: led 1.8s ease-in-out infinite; }
-.scene .brand-badge { fill: #0f1512; stroke: rgba(62, 207, 142, 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
-/* Google: coloured caps on the pillars, four lights by the G. */
-.scene .cap.g-blue .f-top { fill: #4285F4; }
-.scene .cap.g-blue .f-left { fill: #3367c7; }
-.scene .cap.g-blue .f-right { fill: #2a55a6; }
-.scene .cap.g-green .f-top { fill: #34A853; }
-.scene .cap.g-green .f-left { fill: #2b8a45; }
-.scene .cap.g-green .f-right { fill: #237038; }
-.scene .brand-google .lintel .f-top { fill: #4a4a55; }
-.scene .lintel-plate { fill: #f5f5f7; }
-.scene .gdot { opacity: 0.85; }
-.scene .p-active .gdot { animation: led 1.4s ease-in-out infinite; }
-.scene .p-planned .cap .f-top, .scene .p-planned .cap .f-left, .scene .p-planned .cap .f-right { fill-opacity: 0.08; }
-/* GitHub: a dark vault with a commit graph. */
-.scene .vault .f-top { fill: #2d333b; }
-.scene .vault .f-left { fill: #22272e; }
-.scene .vault .f-right { fill: #1c2128; }
-.scene .gitgraph path { fill: none; stroke: rgba(240, 246, 252, 0.7); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
-.scene .gitgraph .branch { stroke: #3fb950; }
-.scene .gitgraph circle { fill: #0d1117; stroke: rgba(240, 246, 252, 0.85); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
-.scene .gitgraph .branch-dot { stroke: #3fb950; }
-.scene .gitgraph .tip { fill: #f5f5f7; }
-.scene .p-active .gitgraph .tip { animation: led 1.4s ease-in-out infinite; }
-/* Vercel: a black pad and the white triangle. */
-.scene .brand-vercel .ground .f-top { fill: #0c0c0e; }
-.scene .brand-vercel .ground .f-left { fill: #08080a; }
-.scene .brand-vercel .ground .f-right { fill: #050506; }
-.scene .brand-vercel .ground .edge { stroke: rgba(245, 245, 247, 0.35); }
-.scene .pyramid .f-left { fill: #f5f5f7; stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.8; }
-.scene .pyramid .f-right { fill: #b4b4bc; stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.8; }
-.scene .pyramid .edge { fill: none; stroke: #ffffff; stroke-width: 1.2; }
-.scene .part.p-planned .pyramid .f-left, .scene .part.p-planned .pyramid .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.3); }
-.scene .part.p-failed .pyramid .f-left { fill: #f2b3a9; }
-/* npm's command unit and the framework plate on the dev server. */
-.scene .unit-wrap .shadow { opacity: 0.9; }
-@media (prefers-reduced-motion: reduce) {
-  .scene .seam, .scene .gdot, .scene .gitgraph .tip { animation: none !important; }
-}
-.scene .sign .f-top { fill: #4a4a55; }
-.scene .sign .f-left { fill: #3a3a44; }
-.scene .sign .f-right { fill: #2a2a32; }
-/* Mascots: a provider's mark walks, rolls or hops along the connection while that step works. */
-.scene .walker-shadow { fill: rgba(0, 0, 0, 0.45); }
-.scene .walker-body { transform-box: fill-box; transform-origin: 50% 100%; }
-.scene .walker.is-walk .walker-body { animation: waddle 0.42s ease-in-out infinite alternate; }
-.scene .walker.is-hop .walker-body { animation: hop 0.6s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
-.scene .walker.is-roll .walker-body { transform-origin: 50% 50%; animation: roll 0.9s linear infinite; }
-.scene .walker image { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
-@keyframes waddle { from { transform: translateY(0) rotate(-7deg); } to { transform: translateY(-3px) rotate(7deg); } }
-@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.08, 0.9); } 45% { transform: translateY(-9px) scale(0.95, 1.06); } 70% { transform: translateY(-2px) scale(1, 1); } }
-@keyframes roll { to { transform: rotate(360deg); } }
-.scene.is-wait .walker { display: none; }
-@media (prefers-reduced-motion: reduce) { .scene .walker { display: none; } }
-/* ---------- characters and hype ---------- */
-/* Claude Code's voxel critter. */
-.scene .cc .f-top { fill: #eda186; }
-.scene .cc .f-left { fill: #D97757; }
-.scene .cc .f-right { fill: #b05a3e; }
-.scene .cc .edge { stroke: rgba(255, 220, 200, 0.55); }
-.scene .cc-eye { fill: #1b0f0a; }
-.scene .critter .cc-torso, .scene .critter .cc-legs { transform-box: fill-box; transform-origin: 50% 100%; }
-.scene .p-active .critter .cc-torso, .scene .critter.is-busy .cc-torso { animation: chomp 0.1s ease-in-out infinite alternate; }
-.scene .p-active .critter .cc-legs.a, .scene .critter.is-busy .cc-legs.a { animation: step 0.1s ease-in-out infinite alternate; }
-.scene .p-active .critter .cc-legs.b, .scene .critter.is-busy .cc-legs.b { animation: step 0.1s ease-in-out infinite alternate-reverse; }
-.scene .p-done .critter { animation: happy 0.5s var(--spring) 2 alternate; transform-box: fill-box; transform-origin: 50% 100%; }
-.scene .p-planned .critter .f-top, .scene .p-planned .critter .f-left, .scene .p-planned .critter .f-right { fill-opacity: 0.12; stroke: rgba(217, 119, 87, 0.5); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
-@keyframes chomp { from { transform: scale(1, 1); } to { transform: scale(1.06, 0.9); } }
-@keyframes step { from { transform: translateY(0); } to { transform: translateY(-3px); } }
-@keyframes happy { to { transform: translateY(-8px) scale(1.04); } }
-.scene .tok rect { fill: #fbe2a6; stroke: #f2c15f; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(242, 193, 95, 0.8)); }
-/* Supabase lightning. */
-.scene .zap { opacity: 0; animation: strike 1.65s linear infinite; }
-.scene .zap-glow { fill: none; stroke: #3ECF8E; stroke-width: 10; stroke-opacity: 0.35; stroke-linejoin: round; filter: url(#sc-glow); }
-.scene .zap-core { fill: none; stroke: #d9ffe9; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
-.scene .zap-core.thin { stroke-width: 1.6; stroke: #8ff0c2; }
-.scene .zap-hit { fill: rgba(62, 207, 142, 0.45); filter: url(#sc-glow); }
-.scene .zap-spark { stroke: #b6ffd9; stroke-width: 2; stroke-linecap: round; }
-@keyframes strike { 0% { opacity: 0; } 3% { opacity: 1; } 7% { opacity: 0.25; } 11% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
-/* PostHog: hedgehog, events, bars. */
-.scene .ph-body .f-top { fill: #8b5e3c; }
-.scene .ph-body .f-left { fill: #6e4930; }
-.scene .ph-body .f-right { fill: #573925; }
-.scene .ph-head .f-top { fill: #c9926a; }
-.scene .ph-head .f-left { fill: #a97750; }
-.scene .ph-head .f-right { fill: #8d6141; }
-.scene .ph-nose .f-top, .scene .ph-nose .f-left, .scene .ph-nose .f-right { fill: #1d1f27; }
-.scene .ph-leg .f-top, .scene .ph-leg .f-left, .scene .ph-leg .f-right { fill: #4a3020; }
-.scene .ph-eye { fill: #111; }
-.scene .ph-spike.c0 .f-top { fill: #F54E00; }
-.scene .ph-spike.c0 .f-left { fill: #c43e00; }
-.scene .ph-spike.c0 .f-right { fill: #9a3100; }
-.scene .ph-spike.c1 .f-top { fill: #F9BD2B; }
-.scene .ph-spike.c1 .f-left { fill: #d39c17; }
-.scene .ph-spike.c1 .f-right { fill: #a87b10; }
-.scene .ph-spike.c2 .f-top { fill: #3b63ff; }
-.scene .ph-spike.c2 .f-left { fill: #1D4AFF; }
-.scene .ph-spike.c2 .f-right { fill: #1538c4; }
-.scene .ph-bar.c0 .f-top { fill: #F54E00; }
-.scene .ph-bar.c0 .f-left { fill: #c43e00; }
-.scene .ph-bar.c0 .f-right { fill: #9a3100; }
-.scene .ph-bar.c1 .f-top { fill: #F9BD2B; }
-.scene .ph-bar.c1 .f-left { fill: #d39c17; }
-.scene .ph-bar.c1 .f-right { fill: #a87b10; }
-.scene .ph-bar.c2 .f-top { fill: #3b63ff; }
-.scene .ph-bar.c2 .f-left { fill: #1D4AFF; }
-.scene .ph-bar.c2 .f-right { fill: #1538c4; }
-.scene .hedgehog .ph-legs { transform-box: fill-box; }
-.scene .p-active .hedgehog .ph-legs.a { animation: step 0.16s ease-in-out infinite alternate; }
-.scene .p-active .hedgehog .ph-legs.b { animation: step 0.16s ease-in-out infinite alternate-reverse; }
-.scene .p-planned .hedgehog, .scene .p-idle .hedgehog { opacity: 0.35; }
-.scene .bar-g { transform-box: fill-box; transform-origin: 50% 100%; animation: pump 0.7s ease-in-out infinite alternate; }
-@keyframes pump { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
-.scene .evt.c0 { fill: #F54E00; }
-.scene .evt.c1 { fill: #F9BD2B; }
-.scene .evt.c2 { fill: #3b63ff; }
-.scene .evt { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)); }
-/* GitHub commits, Vercel launch, Google orbit. */
-.scene .commit .token { fill: #3fb950; }
-.scene .commit .token-halo { fill: rgba(63, 185, 80, 0.25); }
-.scene .ring-launch { fill: none; stroke: #f5f5f7; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: launch 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; }
-@keyframes launch { from { opacity: 0.9; transform: translateY(0) scale(0.4); } to { opacity: 0; transform: translateY(-46px) scale(1.5); } }
-.scene .speed { stroke: rgba(245, 245, 247, 0.55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 8 14; animation: speed 0.45s linear infinite; }
-@keyframes speed { to { stroke-dashoffset: 22; } }
-.scene .orbit-spin { animation: orbit 1.1s linear infinite; transform-origin: 0 0; }
-.scene .orbit circle { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35)); }
-@keyframes orbit { to { transform: rotate(360deg); } }
-.scene.is-wait .hype, .scene.is-wait .critter * { animation-play-state: paused; }
-@media (prefers-reduced-motion: reduce) { .scene .hype, .scene .tok { display: none; } .scene .critter * { animation: none !important; } }
-/* ---------- premium kit: solid emblems, plinths, gateway doors, insight card, travelling payloads ---------- */
-.scene .emb-side { filter: brightness(0.34) saturate(0.85); }
-.scene .emb-face { filter: drop-shadow(0 0 0.02px rgba(0, 0, 0, 0)); }
-.scene .emb-sheen { fill: url(#sc-sheen); mix-blend-mode: screen; }
-.scene .emb-float { transform-box: fill-box; }
-.scene .p-active .emb-float { animation: hover 3.8s ease-in-out infinite; }
-.scene .p-done .emb-float { animation: settle-part 0.7s var(--spring) both; }
-.scene .part.p-planned .emblem, .scene .part.p-idle .emblem { opacity: 0.28; }
-.scene .part.p-planned .emb-sheen { display: none; }
-.scene .plinth .f-top { fill: #3a3a44; }
-.scene .plinth .f-left { fill: #2a2a31; }
-.scene .plinth .f-right { fill: #1f1f25; }
-.scene .emblem-unit .plinth .edge { stroke: var(--brand); stroke-opacity: 0.55; }
-.scene .door .f-top { fill: #52525e; }
-.scene .door .f-left { fill: #3c3c46; }
-.scene .door .f-right { fill: #2e2e36; }
-.scene .door.google .f-left { fill: #2f3f5e; }
-.scene .door.github .f-left { fill: #2d333b; }
-.scene .door .edge { stroke: rgba(255, 255, 255, 0.35); }
-.scene .cap.g-dark .f-top { fill: #2d333b; }
-.scene .cap.g-dark .f-left { fill: #22272e; }
-.scene .cap.g-dark .f-right { fill: #1c2128; }
-.scene .cap.g-light .f-top { fill: #f0f6fc; }
-.scene .cap.g-light .f-left { fill: #c9d1d9; }
-.scene .cap.g-light .f-right { fill: #a0a8b0; }
-.scene .brand-github .lintel .f-top { fill: #2d333b; }
-.scene .brand-github .lintel .f-left { fill: #22272e; }
-.scene .brand-github .lintel .f-right { fill: #1c2128; }
-.scene .insight .card .f-top { fill: #3a3a44; }
-.scene .insight .card .f-left { fill: #26262d; }
-.scene .insight .card .f-right { fill: #1b1b21; }
-.scene .insight .stand .f-top { fill: #2e2e36; }
-.scene .insight .stand .f-left { fill: #22222a; }
-.scene .insight .stand .f-right { fill: #18181d; }
-.scene .ins-bg { fill: #0f0f13; }
-.scene .ins-title { fill: rgba(255, 255, 255, 0.25); }
-.scene .ins-grid { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
-.scene .ins-line { fill: none; stroke: #F9BD2B; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
-.scene .ins-dot { fill: #F54E00; }
-.scene .pl { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); }
-@media (prefers-reduced-motion: reduce) { .scene .emb-float { animation: none !important; } .scene .emb-sheen { display: none; } }
-/* ---------- mascots: GitHub's Octocat, PostHog's hedgehog, Claude polishing ---------- */
-.scene .oc .f-top { fill: #3d444d; }
-.scene .oc .f-left { fill: #2b3137; }
-.scene .oc .f-right { fill: #1c2127; }
-.scene .oc .edge { stroke: rgba(240, 246, 252, 0.4); }
-.scene .oc-face { fill: #f6c8b3; }
-.scene .oc-eye { fill: #1c2127; }
-.scene .oc-shine { fill: #fff; }
-.scene .oc-mouth { fill: #a5524a; }
-.scene .octocat .oc-tent { transform-box: fill-box; transform-origin: 50% 0; animation: wiggle 0.24s ease-in-out infinite alternate; }
-.scene .octocat .oc-tent.t1 { animation-direction: alternate-reverse; }
-@keyframes wiggle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
-.scene .mx-body .f-top { fill: #e0b07a; }
-.scene .mx-body .f-left { fill: #c49360; }
-.scene .mx-body .f-right { fill: #a47746; }
-.scene .mx-face .f-top { fill: #f0cfa2; }
-.scene .mx-face .f-left { fill: #ddb684; }
-.scene .mx-face .f-right { fill: #bf9564; }
-.scene .mx-spike .f-top { fill: #4a3524; }
-.scene .mx-spike .f-left { fill: #35251a; }
-.scene .mx-spike .f-right { fill: #251912; }
-.scene .mx-leg .f-top, .scene .mx-leg .f-left, .scene .mx-leg .f-right { fill: #6b4a2e; }
-.scene .mx-nose .f-top, .scene .mx-nose .f-left, .scene .mx-nose .f-right { fill: #15161b; }
-.scene .mx-eye { fill: #15161b; }
-.scene .mx-cheek { fill: #f08a6b; opacity: 0.8; }
-.scene .mx-pole .f-top { fill: #c8c8d0; }
-.scene .mx-pole .f-left { fill: #9a9aa5; }
-.scene .mx-pole .f-right { fill: #74747e; }
-.scene .mx-flag { stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.6; }
-.scene .flag-text { fill: #fff; font: 800 0.26px/1 var(--font-sans, system-ui); letter-spacing: 0.02px; }
-.scene .mx-pole .edge, .scene .mx-body .edge, .scene .mx-face .edge, .scene .mx-spike .edge, .scene .mx-leg .edge, .scene .mx-nose .edge { stroke: rgba(255, 240, 220, 0.3); }
-.scene .sparkle { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)); }
-.scene .burst { fill: rgba(137, 87, 229, 0.35); stroke: #c9b3ff; stroke-width: 2; }
-.scene .say { fill: #8957e5; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
-.scene .say-text { fill: #fff; font: 800 11px/1 var(--font-sans, system-ui); letter-spacing: 0.02em; }
-@media (prefers-reduced-motion: reduce) { .scene .skit { display: none; } }
-.scene .mx-belly { fill: #f7e3c4; }
-.scene .mx-snout .f-top { fill: #f7e3c4; }
-.scene .mx-snout .f-left { fill: #e6cba6; }
-.scene .mx-snout .f-right { fill: #c9ab84; }
-.scene .mx-brow { fill: #4a2a16; }
-.scene .mx-hat .f-top { fill: #ffd25a; }
-.scene .mx-hat .f-left { fill: #F9BD2B; }
-.scene .mx-hat .f-right { fill: #c9921a; }
-.scene .mx-hat-ridge .f-top, .scene .mx-hat-ridge .f-left, .scene .mx-hat-ridge .f-right { fill: #e0a51f; }
-.scene .mx-hat .edge, .scene .mx-snout .edge { stroke: rgba(255, 245, 220, 0.45); }
-.scene .smudge { fill: rgba(214, 206, 192, 0.3); filter: blur(0.05px); }
-.scene .smudge .streak { fill: none; stroke: rgba(214, 206, 192, 0.35); stroke-width: 0.07; stroke-linecap: round; }
-.scene .bubble { fill: rgba(220, 240, 255, 0.18); stroke: rgba(235, 248, 255, 0.85); stroke-width: 1; }
-.scene .foam { fill: rgba(250, 252, 255, 0.85); }
-
-/* Shared with stack.css, copied so this file stands alone. */
-@keyframes pulse-dot { 50% { opacity: 0.3; } }
-@keyframes settle { from { transform: translateY(4px); } to { transform: none; } }
+/* The 3D construction scene (scene.ts), shared by the local Studio and viberaven.dev.
+   The Studio serves it after stack.css as /stack/app.css; the site imports it inside a .sw-scene container that
+   sets the same variables (--ink, --line-2, --font, --mono, --ease...). Only .scene rules live here. */
+/* ---------- the construction scene: a small isometric world for the action in progress ----------
+   Planned parts are traced outlines; a part works while its step is active; it settles solid only when its
+   evidence arrives. Activity is calm (slow flows, a gentle hover); milestones get one short spring. */
+:root {
+  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
+  --sc-amber: #f2c15f;
+  --sc-green: #6fd08c;
+  --sc-red: #f4715f;
+}
+.scene-stage { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
+.scene-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.scene-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(242, 193, 95, 0.45); color: var(--sc-amber); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
+.scene-tag.is-demo { border-style: dashed; border-color: rgba(255, 255, 255, 0.35); color: var(--ink-2); }
+.scene-note { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.scene { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; }
+.scene-caption { justify-self: center; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(14, 14, 17, 0.94); font-size: 13.5px; color: var(--ink); animation: settle 0.4s var(--ease) both; }
+.scene-caption > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.scene-caption i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
+.scene-caption.is-work i { background: var(--sc-amber); animation: pulse-dot 1.4s ease-in-out infinite; }
+.scene-caption.is-wait { border-color: rgba(242, 193, 95, 0.5); }
+.scene-caption.is-wait i { background: var(--sc-amber); }
+.scene-caption.is-pass i { background: var(--sc-green); }
+.scene-caption.is-fail { border-color: rgba(244, 113, 95, 0.45); }
+.scene-caption.is-fail i { background: var(--sc-red); }
+.scene-when { font-size: 12px; color: var(--ink-3); }
+.scene-inspect { position: absolute; left: 0; bottom: 52px; z-index: 2; width: min(320px, 70%); display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 12, 15, 0.97); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9); animation: settle 0.3s var(--ease) both; }
+.scene-inspect header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.scene-inspect strong { font-size: 14px; font-weight: 600; }
+.scene-inspect p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
+/* Faces. */
+.scene polygon, .scene path, .scene ellipse, .scene rect { stroke-linejoin: round; }
+.scene .f-top, .scene .f-left, .scene .f-right { stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.8; transition: fill 0.45s var(--ease), stroke 0.45s var(--ease), fill-opacity 0.45s var(--ease); }
+.scene .box .f-top { fill: #2a2a31; }
+.scene .box .f-left { fill: #1d1d23; }
+.scene .box .f-right { fill: #141418; }
+.scene .ground .f-top { fill: url(#sc-floor); }
+.scene .ground .f-left { fill: #131316; }
+.scene .ground .f-right { fill: #0d0d10; }
+.scene .pad .ground .f-top { fill: #1d1d24; }
+.scene .grid-lines .grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
+.scene .rim { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; transition: stroke 0.8s var(--ease); }
+.scene .raven { fill: rgba(245, 245, 247, 0.9); }
+/* Labels painted on a slanted face: world-unit sizes, a sans face and no hinting, so they stay smooth at an angle. */
+.scene text { text-rendering: geometricPrecision; }
+.scene .ground-label { fill: rgba(245, 245, 247, 0.5); font-family: var(--font); font-size: 0.36px; font-weight: 700; letter-spacing: 0.16em; }
+.scene .shadow { fill: rgba(0, 0, 0, 0.5); filter: url(#sc-soft); }
+.scene .shadow.soft { fill: rgba(0, 0, 0, 0.42); }
+/* The app window. */
+.scene .frame .f-top { fill: #34343d; }
+.scene .frame .f-left { fill: #26262d; }
+.scene .frame .f-right { fill: #1b1b21; }
+.scene .win * { vector-effect: non-scaling-stroke; }
+.scene .win-face { fill: #0e0e12; }
+.scene .win-bar { fill: #1b1b21; }
+.scene .dot { fill: rgba(255, 255, 255, 0.22); }
+.scene .win-url { fill: rgba(255, 255, 255, 0.07); }
+.scene .win-outline { fill: none; stroke: none; }
+.scene .panel { fill: #202027; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
+.scene .panel.added { stroke: rgba(242, 193, 95, 0.75); fill: #26221a; }
+.scene .panel.modified { stroke: rgba(255, 255, 255, 0.32); }
+.scene .panel-line { fill: rgba(255, 255, 255, 0.2); }
+.scene .panel-name { fill: rgba(245, 245, 247, 0.78); font-family: var(--font); font-size: 0.34px; font-weight: 600; }
+.scene .panel-in { animation: panel-in 0.7s var(--spring) both; }
+@keyframes panel-in { from { opacity: 0; transform: translate(0, -0.9px); } }
+.scene .ghost-panel { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; stroke-dasharray: 0.02 0.015; }
+.scene .ghost-panel.sketch { stroke: rgba(242, 193, 95, 0.7); stroke-width: 1.4; stroke-dasharray: 0.22 0.78; animation: sketch 2.6s linear infinite; }
+.scene .ghost-panel.sketch:nth-child(2) { animation-delay: -0.9s; }
+.scene .ghost-panel.sketch:nth-child(3) { animation-delay: -1.7s; }
+@keyframes sketch { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
+.scene .key-sign circle { fill: rgba(242, 193, 95, 0.12); stroke: var(--sc-amber); stroke-width: 1.4; }
+.scene .key-sign path { fill: none; stroke: var(--sc-amber); stroke-width: 1.6; stroke-linecap: round; }
+/* The agent unit. */
+.scene .unit .f-top { fill: #2c2c34; }
+.scene .unit .f-left { fill: #202027; }
+.scene .unit .f-right { fill: #16161b; }
+.scene .unit-plate { fill: #121216; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
+.scene .unit-led { fill: rgba(255, 255, 255, 0.18); }
+.scene .p-active .unit-led { fill: var(--sc-amber); animation: led 1.6s ease-in-out infinite; }
+.scene .p-done .unit-led { fill: var(--sc-green); }
+.scene .p-active .hover { animation: hover 3.6s ease-in-out infinite; }
+@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
+@keyframes led { 50% { opacity: 0.35; } }
+/* Posts, lamps, ports, towers, crates. */
+.scene .post .f-top { fill: #2e2e36; }
+.scene .post .f-left { fill: #222229; }
+.scene .post .f-right { fill: #18181d; }
+.scene .lamp .f-top { fill: #3a3a42; }
+.scene .lamp .f-left { fill: #2b2b32; }
+.scene .lamp .f-right { fill: #222228; }
+.scene .p-active .lamp .f-top { fill: #f6d58a; }
+.scene .p-active .lamp .f-left { fill: #c99a3f; }
+.scene .p-active .lamp .f-right { fill: #a87e30; }
+.scene .p-active .lamp { animation: led 1.8s ease-in-out infinite; }
+.scene .p-done .lamp .f-top { fill: #9be3b1; }
+.scene .p-done .lamp .f-left { fill: #57b673; }
+.scene .p-done .lamp .f-right { fill: #3f8f57; }
+.scene .p-failed .lamp .f-top { fill: #f8a597; }
+.scene .p-failed .lamp .f-left { fill: #d35a49; }
+.scene .p-failed .lamp .f-right { fill: #a9463a; }
+.scene .port .f-top { fill: #2e2e36; }
+.scene .port-led { fill: rgba(255, 255, 255, 0.18); }
+.scene .p-done .port-led { fill: var(--sc-green); }
+.scene .p-failed .port-led { fill: var(--sc-red); }
+.scene .tower .f-top { fill: #303039; }
+.scene .tower .f-left { fill: #23232a; }
+.scene .tower .f-right { fill: #18181e; }
+.scene .vent { fill: rgba(255, 255, 255, 0.07); }
+.scene .tower-led { fill: rgba(255, 255, 255, 0.18); }
+.scene .p-active .tower-led { fill: var(--sc-amber); animation: led 1.2s ease-in-out infinite; }
+.scene .p-done .tower-led { fill: var(--sc-green); }
+.scene .p-failed .tower-led { fill: var(--sc-red); }
+.scene .crate .f-top { fill: #3a342a; }
+.scene .crate .f-left { fill: #2b261f; }
+.scene .crate .f-right { fill: #221e18; }
+.scene .crate-x { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
+/* Database layers, gateway, barrier. */
+.scene .cyl .f-left { fill: #1c1f1e; stroke: rgba(62, 207, 142, 0.18); }
+.scene .cyl .f-top { fill: #262b29; stroke: rgba(62, 207, 142, 0.38); }
+.scene .cyl { animation: layer-in 0.7s var(--spring) both; }
+.scene .cyl.ghost { animation: none; }
+.scene .cyl.ghost .f-left, .scene .cyl.ghost .f-top { fill: transparent; stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 4 5; }
+@keyframes layer-in { from { opacity: 0; transform: translateY(-16px); } }
+.scene .table { fill: rgba(62, 207, 142, 0.16); stroke: rgba(62, 207, 142, 0.7); stroke-width: 1; vector-effect: non-scaling-stroke; animation: panel-in 0.6s var(--spring) both; }
+.scene .pillar .f-top, .scene .lintel .f-top { fill: #33333b; }
+.scene .pillar .f-left, .scene .lintel .f-left { fill: #26262d; }
+.scene .pillar .f-right, .scene .lintel .f-right { fill: #1b1b20; }
+.scene .lintel-plate { fill: #f5f5f7; }
+.scene .bar .f-top { fill: #3b3222; }
+.scene .bar .f-left { fill: #2c261a; }
+.scene .bar .f-right { fill: #231e15; }
+.scene .bar-stripes { stroke: rgba(242, 193, 95, 0.8); stroke-width: 2; vector-effect: non-scaling-stroke; fill: none; }
+/* Connections. */
+.scene .pipe-base { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 4; stroke-linecap: round; }
+.scene .pipe { fill: none; stroke: rgba(245, 245, 247, 0.75); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
+.scene .pipe-flow { fill: none; stroke: transparent; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 10; }
+.scene .p-planned .pipe-base { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.4; stroke-dasharray: 3 5; }
+.scene .p-active .pipe-base { stroke: rgba(242, 193, 95, 0.14); }
+.scene .p-active .pipe-flow { stroke: var(--sc-amber); animation: flow 1.4s linear infinite; }
+.scene .p-done .pipe { animation: trace 0.9s var(--ease) forwards; }
+.scene .p-failed .pipe-base { stroke: rgba(244, 113, 95, 0.55); stroke-width: 2; stroke-dasharray: 4 4; }
+.scene .p-idle .pipe-base { stroke: rgba(255, 255, 255, 0.07); }
+@keyframes flow { to { stroke-dashoffset: -13; } }
+@keyframes trace { to { stroke-dashoffset: 0; } }
+/* Travellers. */
+.scene .token { fill: #f5f5f7; }
+.scene .token-halo { fill: rgba(245, 245, 247, 0.16); }
+.scene .spark .token { fill: #fbe2a6; }
+.scene .spark .token-halo { fill: rgba(242, 193, 95, 0.22); }
+.scene .record .token { fill: #7fe0b0; }
+.scene .record .token-halo { fill: rgba(62, 207, 142, 0.22); }
+.scene .blocked .token, .scene .leak .token { fill: #f8a597; }
+.scene .blocked .token-halo, .scene .leak .token-halo { fill: rgba(244, 113, 95, 0.22); }
+.scene .package .token { fill: #f5f5f7; }
+/* Labels pinned to the world. */
+.scene .tag rect { fill: rgba(12, 12, 15, 0.94); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
+.scene .tag text { fill: #d9d9df; font-family: var(--font); font-size: 9.5px; font-weight: 600; }
+.scene .p-done .tag-check rect, .scene .p-done .tag-port rect { stroke: rgba(111, 208, 140, 0.55); }
+.scene .p-done .tag-check text, .scene .p-done .tag-port text { fill: var(--sc-green); }
+.scene .p-failed .tag-check rect { stroke: rgba(244, 113, 95, 0.6); }
+.scene .p-failed .tag-check text { fill: var(--red-ink); }
+.scene .p-active .tag-check rect { stroke: rgba(242, 193, 95, 0.6); }
+/* Part states. */
+.scene .part { outline: none; cursor: pointer; }
+.scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 600; animation: trace 1.2s var(--ease) forwards; }
+.scene .part.p-planned .win-face, .scene .part.p-planned .win-bar, .scene .part.p-planned image, .scene .part.p-planned .raven { opacity: 0.25; }
+.scene .part.p-planned .shadow { opacity: 0.3; }
+.scene .part.p-idle { opacity: 0.55; }
+.scene .part.p-done { animation: settle-part 0.6s var(--spring) both; }
+@keyframes settle-part { from { transform: translateY(-6px); } }
+.scene .part.p-failed .f-top { fill: #3c1f1c; stroke: rgba(244, 113, 95, 0.75); }
+.scene .part.p-failed .f-left { fill: #2c1715; stroke: rgba(244, 113, 95, 0.5); }
+.scene .part.p-failed .f-right { fill: #211211; stroke: rgba(244, 113, 95, 0.4); }
+.scene .part.p-failed .win-face { fill: #1a0f0e; }
+.scene .part.p-waiting .f-top, .scene .part.p-waiting .f-left, .scene .part.p-waiting .f-right { stroke: rgba(242, 193, 95, 0.8); stroke-dasharray: 5 4; }
+.scene .part.p-waiting .win-face { fill: #17140c; }
+.scene .part.is-focus { filter: drop-shadow(0 0 10px rgba(242, 193, 95, 0.22)); }
+.scene .part.is-focus.p-active .frame .f-top { fill: #3b3a33; }
+.scene .part.is-selected .f-top, .scene .part.is-selected .f-left, .scene .part.is-selected .f-right { stroke: rgba(245, 245, 247, 0.85); stroke-width: 1.4; }
+.scene .part:focus-visible .f-top, .scene .part:focus-visible .f-left, .scene .part:focus-visible .f-right { stroke: var(--sc-amber); stroke-width: 2; }
+.scene .part:hover .f-top { stroke: rgba(255, 255, 255, 0.35); }
+/* Phases: a waiting scene holds still around the part that needs you; a failed one marks it. */
+.scene.is-wait .part:not(.p-waiting):not([data-part="platform"]) { opacity: 0.5; transition: opacity 0.5s var(--ease); }
+.scene.is-wait .pipe-flow, .scene.is-wait .hover, .scene.is-wait .sketch, .scene.is-wait .token-g { animation-play-state: paused; }
+.scene.is-fail .part:not(.p-failed):not([data-part="platform"]) { opacity: 0.7; }
+.scene.is-done [data-part="platform"] .rim { stroke: rgba(111, 208, 140, 0.5); }
+.scene.is-stopped .part { opacity: 0.6; }
+.scene .fx-payoff .ring { fill: none; stroke: rgba(111, 208, 140, 0.55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: payoff 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
+.scene .fx-payoff .ring.two { stroke: rgba(245, 245, 247, 0.35); animation-delay: 0.22s; }
+@keyframes payoff { from { opacity: 0.9; transform: scale(0.35); } to { opacity: 0; transform: scale(1.15); } }
+.scene.is-demo .tag rect { stroke-dasharray: 3 3; }
+@media (prefers-reduced-motion: reduce) {
+  .scene *, .scene .part, .scene-caption, .scene-inspect { animation: none !important; transition: none !important; }
+  .scene .p-done .pipe { stroke-dashoffset: 0; }
+  .scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { stroke-dashoffset: 0; }
+  .scene .p-active .pipe-flow { stroke-dasharray: none; }
+  .scene .fx-payoff { display: none; }
+}
+.scene .box .f-top { fill: #3c3c46; }
+.scene .box .f-left { fill: #2b2b33; }
+.scene .box .f-right { fill: #1f1f26; }
+.scene .edge { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 1; stroke-linecap: round; }
+.scene .ground .f-top { fill: #202027; }
+.scene .ground .f-left { fill: #18181d; }
+.scene .ground .f-right { fill: #111115; }
+.scene .ground .edge { stroke: rgba(255, 255, 255, 0.16); }
+.scene .grid-lines .grid { stroke: rgba(255, 255, 255, 0.06); }
+.scene .frame .f-top { fill: #4b4b56; }
+.scene .frame .f-left { fill: #35353e; }
+.scene .frame .f-right { fill: #27272e; }
+.scene .unit .f-top { fill: #44444e; }
+.scene .unit .f-left { fill: #31313a; }
+.scene .unit .f-right { fill: #24242b; }
+.scene .post .f-top { fill: #42424c; }
+.scene .post .f-left { fill: #30303a; }
+.scene .post .f-right { fill: #23232a; }
+.scene .lamp .f-top { fill: #55555f; }
+.scene .lamp .f-left { fill: #3e3e47; }
+.scene .lamp .f-right { fill: #2f2f37; }
+.scene .tower .f-top { fill: #45454f; }
+.scene .tower .f-left { fill: #32323b; }
+.scene .tower .f-right { fill: #25252c; }
+.scene .pillar .f-top, .scene .lintel .f-top { fill: #474752; }
+.scene .pillar .f-left, .scene .lintel .f-left { fill: #34343d; }
+.scene .pillar .f-right, .scene .lintel .f-right { fill: #26262e; }
+.scene .crate .f-top { fill: #4a4133; }
+.scene .crate .f-left { fill: #383126; }
+.scene .crate .f-right { fill: #2b261e; }
+.scene .port .f-top { fill: #42424c; }
+.scene .cyl .f-left { fill: #232826; }
+.scene .cyl .f-top { fill: #303733; }
+.scene .part.p-planned .edge { stroke: none; }
+.scene .part.p-failed .edge { stroke: rgba(244, 113, 95, 0.6); }
+.scene .part.p-done .edge { stroke: rgba(255, 255, 255, 0.34); }
+.scene-stage::before { content: ""; position: absolute; left: 10%; right: 10%; top: 22%; bottom: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.045), transparent); pointer-events: none; }
+/* ---------- units and brands: every object is a machined unit with its mark; providers wear their own colours ---------- */
+.scene .unit .f-top { fill: #41414b; }
+.scene .unit .f-left { fill: #2e2e36; }
+.scene .unit .f-right { fill: #222229; }
+.scene .pedestal .f-top { fill: #2a2a31; }
+.scene .pedestal .f-left { fill: #1e1e24; }
+.scene .pedestal .f-right { fill: #16161b; }
+.scene .unit-ring { fill: none; stroke: var(--brand); stroke-opacity: 0.55; stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: stroke 0.4s var(--ease), stroke-opacity 0.4s var(--ease); }
+.scene .unit-led { fill: var(--brand); fill-opacity: 0.35; }
+.scene .p-planned .unit-ring { stroke-opacity: 0.15; }
+.scene .p-active .unit-ring { stroke: var(--sc-amber); stroke-opacity: 0.95; }
+.scene .p-active .unit-led { fill: var(--sc-amber); fill-opacity: 1; animation: led 1.6s ease-in-out infinite; }
+.scene .p-done .unit-ring { stroke: var(--sc-green); stroke-opacity: 0.9; }
+.scene .p-done .unit-led { fill: var(--sc-green); fill-opacity: 1; }
+.scene .p-failed .unit-ring { stroke: var(--sc-red); stroke-opacity: 0.95; }
+.scene .p-failed .unit-led { fill: var(--sc-red); fill-opacity: 1; }
+.scene .p-waiting .unit-ring { stroke: var(--sc-amber); stroke-dasharray: 4 3; }
+.scene .p-waiting .unit-led { fill: var(--sc-amber); fill-opacity: 1; }
+.scene .p-done .unit-wrap .edge, .scene .p-active .unit-wrap .edge { stroke: rgba(255, 255, 255, 0.4); }
+/* Supabase: green seams between layers, the bolt on a dark badge. */
+.scene .brand-supabase .cyl .f-top { fill: #2c3530; stroke: rgba(62, 207, 142, 0.55); }
+.scene .brand-supabase .cyl .f-left { fill: #1f2522; stroke: rgba(62, 207, 142, 0.22); }
+.scene .seam { fill: none; stroke: var(--brand); stroke-opacity: 0.7; stroke-width: 1.4; stroke-linecap: round; filter: url(#sc-glow); }
+.scene .p-active .seam { animation: led 1.8s ease-in-out infinite; }
+.scene .brand-badge { fill: #0f1512; stroke: rgba(62, 207, 142, 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
+/* Google: coloured caps on the pillars, four lights by the G. */
+.scene .cap.g-blue .f-top { fill: #4285F4; }
+.scene .cap.g-blue .f-left { fill: #3367c7; }
+.scene .cap.g-blue .f-right { fill: #2a55a6; }
+.scene .cap.g-green .f-top { fill: #34A853; }
+.scene .cap.g-green .f-left { fill: #2b8a45; }
+.scene .cap.g-green .f-right { fill: #237038; }
+.scene .brand-google .lintel .f-top { fill: #4a4a55; }
+.scene .lintel-plate { fill: #f5f5f7; }
+.scene .gdot { opacity: 0.85; }
+.scene .p-active .gdot { animation: led 1.4s ease-in-out infinite; }
+.scene .p-planned .cap .f-top, .scene .p-planned .cap .f-left, .scene .p-planned .cap .f-right { fill-opacity: 0.08; }
+/* GitHub: a dark vault with a commit graph. */
+.scene .vault .f-top { fill: #2d333b; }
+.scene .vault .f-left { fill: #22272e; }
+.scene .vault .f-right { fill: #1c2128; }
+.scene .gitgraph path { fill: none; stroke: rgba(240, 246, 252, 0.7); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
+.scene .gitgraph .branch { stroke: #3fb950; }
+.scene .gitgraph circle { fill: #0d1117; stroke: rgba(240, 246, 252, 0.85); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
+.scene .gitgraph .branch-dot { stroke: #3fb950; }
+.scene .gitgraph .tip { fill: #f5f5f7; }
+.scene .p-active .gitgraph .tip { animation: led 1.4s ease-in-out infinite; }
+/* Vercel: a black pad and the white triangle. */
+.scene .brand-vercel .ground .f-top { fill: #0c0c0e; }
+.scene .brand-vercel .ground .f-left { fill: #08080a; }
+.scene .brand-vercel .ground .f-right { fill: #050506; }
+.scene .brand-vercel .ground .edge { stroke: rgba(245, 245, 247, 0.35); }
+.scene .pyramid .f-left { fill: #f5f5f7; stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.8; }
+.scene .pyramid .f-right { fill: #b4b4bc; stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.8; }
+.scene .pyramid .edge { fill: none; stroke: #ffffff; stroke-width: 1.2; }
+.scene .part.p-planned .pyramid .f-left, .scene .part.p-planned .pyramid .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.3); }
+.scene .part.p-failed .pyramid .f-left { fill: #f2b3a9; }
+/* npm's command unit and the framework plate on the dev server. */
+.scene .unit-wrap .shadow { opacity: 0.9; }
+@media (prefers-reduced-motion: reduce) {
+  .scene .seam, .scene .gdot, .scene .gitgraph .tip { animation: none !important; }
+}
+.scene .sign .f-top { fill: #4a4a55; }
+.scene .sign .f-left { fill: #3a3a44; }
+.scene .sign .f-right { fill: #2a2a32; }
+/* Mascots: a provider's mark walks, rolls or hops along the connection while that step works. */
+.scene .walker-shadow { fill: rgba(0, 0, 0, 0.45); }
+.scene .walker-body { transform-box: fill-box; transform-origin: 50% 100%; }
+.scene .walker.is-walk .walker-body { animation: waddle 0.42s ease-in-out infinite alternate; }
+.scene .walker.is-hop .walker-body { animation: hop 0.6s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
+.scene .walker.is-roll .walker-body { transform-origin: 50% 50%; animation: roll 0.9s linear infinite; }
+.scene .walker image { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
+@keyframes waddle { from { transform: translateY(0) rotate(-7deg); } to { transform: translateY(-3px) rotate(7deg); } }
+@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.08, 0.9); } 45% { transform: translateY(-9px) scale(0.95, 1.06); } 70% { transform: translateY(-2px) scale(1, 1); } }
+@keyframes roll { to { transform: rotate(360deg); } }
+.scene.is-wait .walker { display: none; }
+@media (prefers-reduced-motion: reduce) { .scene .walker { display: none; } }
+/* ---------- characters and hype ---------- */
+/* Claude Code's voxel critter. */
+.scene .cc .f-top { fill: #eda186; }
+.scene .cc .f-left { fill: #D97757; }
+.scene .cc .f-right { fill: #b05a3e; }
+.scene .cc .edge { stroke: rgba(255, 220, 200, 0.55); }
+.scene .cc-eye { fill: #1b0f0a; }
+.scene .critter .cc-torso, .scene .critter .cc-legs { transform-box: fill-box; transform-origin: 50% 100%; }
+.scene .p-active .critter .cc-torso, .scene .critter.is-busy .cc-torso { animation: chomp 0.1s ease-in-out infinite alternate; }
+.scene .p-active .critter .cc-legs.a, .scene .critter.is-busy .cc-legs.a { animation: step 0.1s ease-in-out infinite alternate; }
+.scene .p-active .critter .cc-legs.b, .scene .critter.is-busy .cc-legs.b { animation: step 0.1s ease-in-out infinite alternate-reverse; }
+.scene .p-done .critter { animation: happy 0.5s var(--spring) 2 alternate; transform-box: fill-box; transform-origin: 50% 100%; }
+.scene .p-planned .critter .f-top, .scene .p-planned .critter .f-left, .scene .p-planned .critter .f-right { fill-opacity: 0.12; stroke: rgba(217, 119, 87, 0.5); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
+@keyframes chomp { from { transform: scale(1, 1); } to { transform: scale(1.06, 0.9); } }
+@keyframes step { from { transform: translateY(0); } to { transform: translateY(-3px); } }
+@keyframes happy { to { transform: translateY(-8px) scale(1.04); } }
+.scene .tok rect { fill: #fbe2a6; stroke: #f2c15f; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(242, 193, 95, 0.8)); }
+/* Supabase lightning. */
+.scene .zap { opacity: 0; animation: strike 1.65s linear infinite; }
+.scene .zap-glow { fill: none; stroke: #3ECF8E; stroke-width: 10; stroke-opacity: 0.35; stroke-linejoin: round; filter: url(#sc-glow); }
+.scene .zap-core { fill: none; stroke: #d9ffe9; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
+.scene .zap-core.thin { stroke-width: 1.6; stroke: #8ff0c2; }
+.scene .zap-hit { fill: rgba(62, 207, 142, 0.45); filter: url(#sc-glow); }
+.scene .zap-spark { stroke: #b6ffd9; stroke-width: 2; stroke-linecap: round; }
+@keyframes strike { 0% { opacity: 0; } 3% { opacity: 1; } 7% { opacity: 0.25; } 11% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
+/* PostHog: hedgehog, events, bars. */
+.scene .ph-body .f-top { fill: #8b5e3c; }
+.scene .ph-body .f-left { fill: #6e4930; }
+.scene .ph-body .f-right { fill: #573925; }
+.scene .ph-head .f-top { fill: #c9926a; }
+.scene .ph-head .f-left { fill: #a97750; }
+.scene .ph-head .f-right { fill: #8d6141; }
+.scene .ph-nose .f-top, .scene .ph-nose .f-left, .scene .ph-nose .f-right { fill: #1d1f27; }
+.scene .ph-leg .f-top, .scene .ph-leg .f-left, .scene .ph-leg .f-right { fill: #4a3020; }
+.scene .ph-eye { fill: #111; }
+.scene .ph-spike.c0 .f-top { fill: #F54E00; }
+.scene .ph-spike.c0 .f-left { fill: #c43e00; }
+.scene .ph-spike.c0 .f-right { fill: #9a3100; }
+.scene .ph-spike.c1 .f-top { fill: #F9BD2B; }
+.scene .ph-spike.c1 .f-left { fill: #d39c17; }
+.scene .ph-spike.c1 .f-right { fill: #a87b10; }
+.scene .ph-spike.c2 .f-top { fill: #3b63ff; }
+.scene .ph-spike.c2 .f-left { fill: #1D4AFF; }
+.scene .ph-spike.c2 .f-right { fill: #1538c4; }
+.scene .ph-bar.c0 .f-top { fill: #F54E00; }
+.scene .ph-bar.c0 .f-left { fill: #c43e00; }
+.scene .ph-bar.c0 .f-right { fill: #9a3100; }
+.scene .ph-bar.c1 .f-top { fill: #F9BD2B; }
+.scene .ph-bar.c1 .f-left { fill: #d39c17; }
+.scene .ph-bar.c1 .f-right { fill: #a87b10; }
+.scene .ph-bar.c2 .f-top { fill: #3b63ff; }
+.scene .ph-bar.c2 .f-left { fill: #1D4AFF; }
+.scene .ph-bar.c2 .f-right { fill: #1538c4; }
+.scene .hedgehog .ph-legs { transform-box: fill-box; }
+.scene .p-active .hedgehog .ph-legs.a { animation: step 0.16s ease-in-out infinite alternate; }
+.scene .p-active .hedgehog .ph-legs.b { animation: step 0.16s ease-in-out infinite alternate-reverse; }
+.scene .p-planned .hedgehog, .scene .p-idle .hedgehog { opacity: 0.35; }
+.scene .bar-g { transform-box: fill-box; transform-origin: 50% 100%; animation: pump 0.7s ease-in-out infinite alternate; }
+@keyframes pump { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
+.scene .evt.c0 { fill: #F54E00; }
+.scene .evt.c1 { fill: #F9BD2B; }
+.scene .evt.c2 { fill: #3b63ff; }
+.scene .evt { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)); }
+/* GitHub commits, Vercel launch, Google orbit. */
+.scene .commit .token { fill: #3fb950; }
+.scene .commit .token-halo { fill: rgba(63, 185, 80, 0.25); }
+.scene .ring-launch { fill: none; stroke: #f5f5f7; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: launch 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; }
+@keyframes launch { from { opacity: 0.9; transform: translateY(0) scale(0.4); } to { opacity: 0; transform: translateY(-46px) scale(1.5); } }
+.scene .speed { stroke: rgba(245, 245, 247, 0.55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 8 14; animation: speed 0.45s linear infinite; }
+@keyframes speed { to { stroke-dashoffset: 22; } }
+.scene .orbit-spin { animation: orbit 1.1s linear infinite; transform-origin: 0 0; }
+.scene .orbit circle { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35)); }
+@keyframes orbit { to { transform: rotate(360deg); } }
+.scene.is-wait .hype, .scene.is-wait .critter * { animation-play-state: paused; }
+@media (prefers-reduced-motion: reduce) { .scene .hype, .scene .tok { display: none; } .scene .critter * { animation: none !important; } }
+/* ---------- premium kit: solid emblems, plinths, gateway doors, insight card, travelling payloads ---------- */
+.scene .emb-side { filter: brightness(0.34) saturate(0.85); }
+.scene .emb-face { filter: drop-shadow(0 0 0.02px rgba(0, 0, 0, 0)); }
+.scene .emb-sheen { fill: url(#sc-sheen); mix-blend-mode: screen; }
+.scene .emb-float { transform-box: fill-box; }
+.scene .p-active .emb-float { animation: hover 3.8s ease-in-out infinite; }
+.scene .p-done .emb-float { animation: settle-part 0.7s var(--spring) both; }
+.scene .part.p-planned .emblem, .scene .part.p-idle .emblem { opacity: 0.28; }
+.scene .part.p-planned .emb-sheen { display: none; }
+.scene .plinth .f-top { fill: #3a3a44; }
+.scene .plinth .f-left { fill: #2a2a31; }
+.scene .plinth .f-right { fill: #1f1f25; }
+.scene .emblem-unit .plinth .edge { stroke: var(--brand); stroke-opacity: 0.55; }
+.scene .door .f-top { fill: #52525e; }
+.scene .door .f-left { fill: #3c3c46; }
+.scene .door .f-right { fill: #2e2e36; }
+.scene .door.google .f-left { fill: #2f3f5e; }
+.scene .door.github .f-left { fill: #2d333b; }
+.scene .door .edge { stroke: rgba(255, 255, 255, 0.35); }
+.scene .cap.g-dark .f-top { fill: #2d333b; }
+.scene .cap.g-dark .f-left { fill: #22272e; }
+.scene .cap.g-dark .f-right { fill: #1c2128; }
+.scene .cap.g-light .f-top { fill: #f0f6fc; }
+.scene .cap.g-light .f-left { fill: #c9d1d9; }
+.scene .cap.g-light .f-right { fill: #a0a8b0; }
+.scene .brand-github .lintel .f-top { fill: #2d333b; }
+.scene .brand-github .lintel .f-left { fill: #22272e; }
+.scene .brand-github .lintel .f-right { fill: #1c2128; }
+.scene .insight .card .f-top { fill: #3a3a44; }
+.scene .insight .card .f-left { fill: #26262d; }
+.scene .insight .card .f-right { fill: #1b1b21; }
+.scene .insight .stand .f-top { fill: #2e2e36; }
+.scene .insight .stand .f-left { fill: #22222a; }
+.scene .insight .stand .f-right { fill: #18181d; }
+.scene .ins-bg { fill: #0f0f13; }
+.scene .ins-title { fill: rgba(255, 255, 255, 0.25); }
+.scene .ins-grid { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
+.scene .ins-line { fill: none; stroke: #F9BD2B; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
+.scene .ins-dot { fill: #F54E00; }
+.scene .pl { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); }
+@media (prefers-reduced-motion: reduce) { .scene .emb-float { animation: none !important; } .scene .emb-sheen { display: none; } }
+/* ---------- mascots: GitHub's Octocat, PostHog's hedgehog, Claude polishing ---------- */
+.scene .oc .f-top { fill: #3d444d; }
+.scene .oc .f-left { fill: #2b3137; }
+.scene .oc .f-right { fill: #1c2127; }
+.scene .oc .edge { stroke: rgba(240, 246, 252, 0.4); }
+.scene .oc-face { fill: #f6c8b3; }
+.scene .oc-eye { fill: #1c2127; }
+.scene .oc-shine { fill: #fff; }
+.scene .oc-mouth { fill: #a5524a; }
+.scene .octocat .oc-tent { transform-box: fill-box; transform-origin: 50% 0; animation: wiggle 0.24s ease-in-out infinite alternate; }
+.scene .octocat .oc-tent.t1 { animation-direction: alternate-reverse; }
+@keyframes wiggle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
+.scene .mx-body .f-top { fill: #e0b07a; }
+.scene .mx-body .f-left { fill: #c49360; }
+.scene .mx-body .f-right { fill: #a47746; }
+.scene .mx-face .f-top { fill: #f0cfa2; }
+.scene .mx-face .f-left { fill: #ddb684; }
+.scene .mx-face .f-right { fill: #bf9564; }
+.scene .mx-spike .f-top { fill: #4a3524; }
+.scene .mx-spike .f-left { fill: #35251a; }
+.scene .mx-spike .f-right { fill: #251912; }
+.scene .mx-leg .f-top, .scene .mx-leg .f-left, .scene .mx-leg .f-right { fill: #6b4a2e; }
+.scene .mx-nose .f-top, .scene .mx-nose .f-left, .scene .mx-nose .f-right { fill: #15161b; }
+.scene .mx-eye { fill: #15161b; }
+.scene .mx-cheek { fill: #f08a6b; opacity: 0.8; }
+.scene .mx-pole .f-top { fill: #c8c8d0; }
+.scene .mx-pole .f-left { fill: #9a9aa5; }
+.scene .mx-pole .f-right { fill: #74747e; }
+.scene .mx-flag { stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.6; }
+.scene .flag-text { fill: #fff; font: 800 0.26px/1 var(--font-sans, system-ui); letter-spacing: 0.02px; }
+.scene .mx-pole .edge, .scene .mx-body .edge, .scene .mx-face .edge, .scene .mx-spike .edge, .scene .mx-leg .edge, .scene .mx-nose .edge { stroke: rgba(255, 240, 220, 0.3); }
+.scene .sparkle { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)); }
+.scene .burst { fill: rgba(137, 87, 229, 0.35); stroke: #c9b3ff; stroke-width: 2; }
+.scene .say { fill: #8957e5; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
+.scene .say-text { fill: #fff; font: 800 11px/1 var(--font-sans, system-ui); letter-spacing: 0.02em; }
+@media (prefers-reduced-motion: reduce) { .scene .skit { display: none; } }
+.scene .mx-belly { fill: #f7e3c4; }
+.scene .mx-snout .f-top { fill: #f7e3c4; }
+.scene .mx-snout .f-left { fill: #e6cba6; }
+.scene .mx-snout .f-right { fill: #c9ab84; }
+.scene .mx-brow { fill: #4a2a16; }
+.scene .mx-hat .f-top { fill: #ffd25a; }
+.scene .mx-hat .f-left { fill: #F9BD2B; }
+.scene .mx-hat .f-right { fill: #c9921a; }
+.scene .mx-hat-ridge .f-top, .scene .mx-hat-ridge .f-left, .scene .mx-hat-ridge .f-right { fill: #e0a51f; }
+.scene .mx-hat .edge, .scene .mx-snout .edge { stroke: rgba(255, 245, 220, 0.45); }
+.scene .smudge { fill: rgba(214, 206, 192, 0.3); filter: blur(0.05px); }
+.scene .smudge .streak { fill: none; stroke: rgba(214, 206, 192, 0.35); stroke-width: 0.07; stroke-linecap: round; }
+.scene .bubble { fill: rgba(220, 240, 255, 0.18); stroke: rgba(235, 248, 255, 0.85); stroke-width: 1; }
+.scene .foam { fill: rgba(250, 252, 255, 0.85); }
+
+/* Shared with stack.css, copied so this file stands alone. */
+@keyframes pulse-dot { 50% { opacity: 0.3; } }
+@keyframes settle { from { transform: translateY(4px); } to { transform: none; } }
+
+/* Codex's voxel bot: blue, with a terminal for a face. It types while it works; the cursor blinks. */
+.scene .cx .f-top { fill: #6f9bff; }
+.scene .cx .f-left { fill: #2f6bf0; }
+.scene .cx .f-right { fill: #1d4cc4; }
+.scene .cx-cap .f-top { fill: #a9c4ff; }
+.scene .cx-cap .f-left { fill: #6f9bff; }
+.scene .cx-cap .f-right { fill: #4f80ec; }
+.scene .cx .edge { stroke: rgba(255, 255, 255, 0.45); }
+.scene .cx-screen { fill: #0b1020; stroke: rgba(160, 196, 255, 0.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
+.scene .cx-prompt { fill: none; stroke: #b9d0ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
+.scene .cx-cursor { fill: #b9d0ff; animation: cx-blink 1.1s steps(1) infinite; }
+.scene .codex-bot .cx-torso, .scene .codex-bot .cx-arm { transform-box: fill-box; transform-origin: 50% 100%; }
+.scene .p-active .codex-bot .cx-torso { animation: cx-bob 0.36s ease-in-out infinite alternate; }
+.scene .p-active .codex-bot .cx-arm.a { animation: cx-tap 0.16s ease-in-out infinite alternate; }
+.scene .p-active .codex-bot .cx-arm.b { animation: cx-tap 0.16s ease-in-out infinite alternate-reverse; }
+.scene .p-active .codex-bot .cx-cursor { animation-duration: 0.5s; }
+.scene .p-done .codex-bot { animation: happy 0.5s var(--spring) 2 alternate; transform-box: fill-box; transform-origin: 50% 100%; }
+.scene .p-planned .codex-bot .f-top, .scene .p-planned .codex-bot .f-left, .scene .p-planned .codex-bot .f-right { fill-opacity: 0.12; stroke: rgba(47, 107, 240, 0.55); }
+.scene .p-planned .codex-bot .cx-screen, .scene .p-planned .codex-bot .cx-prompt, .scene .p-planned .codex-bot .cx-cursor { opacity: 0.35; }
+@keyframes cx-blink { 50% { opacity: 0; } }
+@keyframes cx-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
+@keyframes cx-tap { from { transform: translateY(0); } to { transform: translateY(-3px); } }
+.scene.is-wait .codex-bot * { animation-play-state: paused; }
+@media (prefers-reduced-motion: reduce) { .scene .codex-bot, .scene .codex-bot * { animation: none !important; } }
+
+/* What Codex and Gemini fire along the beam while they edit (Claude Code has its spark and tokens). */
+.scene .cx-shot rect { fill: #b9d0ff; stroke: #2f6bf0; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(76, 141, 255, 0.9)); }
+.scene .cx-shot:nth-child(2) rect { fill: #e6eeff; }
+.scene .gm-shot path { filter: drop-shadow(0 0 5px rgba(155, 114, 203, 0.9)); }
+.scene .gm-shot.s0 path { fill: #4285F4; }
+.scene .gm-shot.s1 path { fill: #9b72cb; }
+.scene .gm-shot.s2 path { fill: #d96570; }
+.scene .gm-spin { animation: gm-spin 0.9s linear infinite; }
+@keyframes gm-spin { to { transform: rotate(180deg); } }
+/* A provider's own pad beside the board: a little lower-key than the board itself. */
+.scene .provider-pad .ground .f-top { fill: #1b1b21; }
+@media (prefers-reduced-motion: reduce) { .scene .cx-shots, .scene .gm-shots { display: none; } }