/* /Components/AgenticCommerce/ProcurementLab.razor.rz.scp.css */
/* Procurement Lab — the agentic-commerce console lives in the "dark roast wing",
   the same on-chain ground as /staking and /yield. app.css declares the shared
   --stake-* palette on ".yield-page, .procurement-lab" (this selector is one of
   the two) as direct literals — this file references var(--stake-x) directly
   throughout rather than aliasing through its own --pl-* layer, because nested
   custom-property indirection (--pl-x: var(--stake-x), then var(--pl-x)
   elsewhere) was found not to resolve reliably. --pl-amber-dim/--pl-clay-dim
   are the one exception: their own literal alpha (0.14) is intentionally a
   touch stronger than --stake-amber-dim/--stake-clay-dim's 0.12, so they stay
   as local direct-literal tokens (safe — no indirection involved). Semantic
   accents are mapped onto the escrow lifecycle. */
.procurement-lab[b-pw1bhfm6vq] {
    --pl-amber-dim: rgba(229, 192, 120, 0.14);
    --pl-clay-dim: rgba(229, 152, 128, 0.14);

    /* Lift the shared brand-green token so text/spinner states relying on
       --crypto-positive stay legible against the roast ground. Pinned
       unconditionally alongside app.css's .yield-page/.procurement-lab dark
       tokens — no [data-theme]/prefers-color-scheme gate — while the toggle
       is deactivated (NavMenu.razor's ThemeToggleEnabled). */
    --crypto-positive: #8fb99b;

    color: var(--stake-ink);
    /* Transparent ground: the shared GlobalScene background scenario supplies
       the sky, and any opaque background here would cover it. */
    font-family: var(--font-sans);
    min-height: 100dvh;
    /* Header clearance now lives here instead of on the outer .yield-page-main
       padding-top (removed in StakingLayout.razor.css for this route), so the
       fixed transparent header floats over the shared background scenario
       instead of a gap that exposed .page/main's flat swatch. */
    isolation: isolate;
    padding: calc(4.75rem + clamp(2.5rem, 5vw, 4.5rem)) 0 6rem;
    position: relative;
}

/* ── Procurement cabin ─────────────────────────────────────────────────────
   The generated pixel frame deliberately has transparent glass. GlobalScene
   remains the actual view outside, so its session palette, drifting planets,
   and route-preserved animation are shared with the hero instead of being
   flattened into another wallpaper.

   The window clips sit below the frame image. This lets a visitor pass behind
   the hull without a mask or JS timer; long staggered CSS loops make the
   cameos rare enough to remain easter eggs. */
.pl-cabin[b-pw1bhfm6vq] {
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

.pl-cabin[b-pw1bhfm6vq]::before {
    background: url("images/pl-spaceship-frame.webp") center / cover no-repeat;
    content: "";
    image-rendering: pixelated;
    inset: 0;
    opacity: 0.96;
    position: absolute;
    z-index: 1;
}

.pl-cabin__window[b-pw1bhfm6vq] {
    overflow: hidden;
    position: absolute;
    z-index: 0;
}

.pl-cabin__window--port[b-pw1bhfm6vq] {
    clip-path: polygon(20% 0, 84% 0, 100% 14%, 100% 86%, 82% 100%, 20% 100%, 0 86%, 0 14%);
    height: 43%;
    left: 7.5%;
    top: 16%;
    width: 12%;
}

.pl-cabin__window--starboard[b-pw1bhfm6vq] {
    clip-path: polygon(16% 0, 80% 0, 100% 14%, 100% 86%, 82% 100%, 18% 100%, 0 86%, 0 14%);
    height: 43%;
    right: 7.5%;
    top: 16%;
    width: 12%;
}

.pl-cabin__visitor[b-pw1bhfm6vq] {
    aspect-ratio: 1;
    opacity: 0;
    position: absolute;
    width: clamp(2.5rem, 4.5vw, 4rem);
}

.pl-cabin__visitor[b-pw1bhfm6vq]::before {
    animation: pl-cabin-visitor-frames-b-pw1bhfm6vq 1s steps(5, end) infinite;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 500% 100%;
    content: "";
    image-rendering: pixelated;
    inset: 0;
    position: absolute;
}

.pl-cabin__visitor--port[b-pw1bhfm6vq] {
    animation: pl-cabin-port-pass-b-pw1bhfm6vq 53s steps(18, end) -17s infinite;
}

.pl-cabin__visitor--port[b-pw1bhfm6vq]::before {
    background-image: url("images/pl-robot-coincrew.png");
}

.pl-cabin__visitor--starboard[b-pw1bhfm6vq] {
    animation: pl-cabin-starboard-pass-b-pw1bhfm6vq 67s steps(20, end) -41s infinite;
}

.pl-cabin__visitor--starboard[b-pw1bhfm6vq]::before {
    background-image: url("images/pl-robot-coincrew-flip.png");
}

@keyframes pl-cabin-visitor-frames-b-pw1bhfm6vq {
    to { background-position: 125% 0; }
}

@keyframes pl-cabin-port-pass-b-pw1bhfm6vq {
    0%, 68% {
        opacity: 0;
        transform: translate3d(120%, 118%, 0) rotate(8deg);
    }
    71% {
        opacity: 0.82;
    }
    83% {
        opacity: 0.82;
        transform: translate3d(-15%, -8%, 0) rotate(-6deg);
    }
    87%, 100% {
        opacity: 0;
        transform: translate3d(-55%, -48%, 0) rotate(-10deg);
    }
}

@keyframes pl-cabin-starboard-pass-b-pw1bhfm6vq {
    0%, 74% {
        opacity: 0;
        transform: translate3d(-75%, 16%, 0) rotate(-4deg);
    }
    77% {
        opacity: 0.78;
    }
    87% {
        opacity: 0.78;
        transform: translate3d(76%, 64%, 0) rotate(7deg);
    }
    91%, 100% {
        opacity: 0;
        transform: translate3d(130%, 94%, 0) rotate(10deg);
    }
}

.procurement-lab__inner[b-pw1bhfm6vq] {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 78rem;
    padding: 0 clamp(1.25rem, 4vw, 3.5rem);
    position: relative;
    width: 100%;
    z-index: 2;
}

/* The signed-out hero is short; min-height: 100dvh above used to leave a
   screenful of empty sky under the CTA. Centre it in the viewport instead. */
.procurement-lab--intro .procurement-lab__inner[b-pw1bhfm6vq] {
    align-items: center;
    display: flex;
    min-height: calc(100dvh - 4.75rem - clamp(2.5rem, 5vw, 4.5rem) - 6rem);
}

.procurement-lab--intro .pl-hero[b-pw1bhfm6vq] {
    width: 100%;
}

.procurement-lab--intro .pl-hero__copy[b-pw1bhfm6vq],
.procurement-lab--intro .pl-hero__action[b-pw1bhfm6vq] {
    /* Keep the stacked copy and its action visibly above the captain while the
       fixed bridge remains aligned with the cabin floor. */
    translate: 0 -2rem;
}

/* ── Connected console ──────────────────────────────────────────────────────
   The console is a reading surface over the shared pixel sky, the same problem
   /staking's dashboard has: labels, addresses and hashes were sitting on
   drifting stars, planets and chain badges between the panels. One fixed
   frosted plate blurs the scene for as long as the console is mounted.

   No ancestor of this pseudo-element may take isolation/filter/opacity — any
   of those becomes the backdrop root and the blur silently does nothing. Note
   .pl-hero DOES set isolation: isolate, which is exactly why the plate hangs
   off .procurement-lab--console and not off anything inside the hero. */
.procurement-lab--console[b-pw1bhfm6vq] {
    padding-top: calc(4.75rem + clamp(1.25rem, 2.5vw, 2rem));
}

.procurement-lab--console[b-pw1bhfm6vq]::before {
    backdrop-filter: blur(22px) saturate(118%);
    -webkit-backdrop-filter: blur(22px) saturate(118%);
    background:
        radial-gradient(ellipse 85% 60% at 50% 0%, rgba(16, 13, 11, 0.5), transparent 78%),
        rgba(16, 13, 11, 0.62);
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 1;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .procurement-lab--console[b-pw1bhfm6vq]::before {
        background: rgba(16, 13, 11, 0.93);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .procurement-lab--console[b-pw1bhfm6vq]::before {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--stake-bg-deep);
    }
}

.pl-commandbar[b-pw1bhfm6vq] {
    align-items: center;
    border-bottom: 1px solid var(--stake-line);
    column-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    min-height: 2.6rem;
    padding-bottom: 0.75rem;
    row-gap: 0.5rem;
}

.pl-commandbar__nav[b-pw1bhfm6vq] {
    align-items: center;
    display: flex;
    gap: 1.2rem;
}

.pl-commandbar__nav a[b-pw1bhfm6vq] {
    align-items: center;
    color: var(--stake-muted);
    display: flex;
    font: 700 0.62rem/1 var(--crypto-mono);
    gap: 0.35rem;
    letter-spacing: 0.1em;
    padding: 0.5rem 0;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .pl-commandbar__nav a:hover[b-pw1bhfm6vq] {
        color: var(--stake-ink);
    }
}

/* Copy left, station right. The station keeps its own aspect ratio and simply
   gets a smaller box — the actors and their activity labels stay readable
   because nothing about the scene's internal proportions changes. */
.pl-console[b-pw1bhfm6vq] {
    align-items: center;
    display: grid;
    gap: clamp(1rem, 3vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.pl-console__copy[b-pw1bhfm6vq] {
    min-width: 0;
}

.procurement-lab--console h1[b-pw1bhfm6vq] {
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    margin: 0.45rem 0 0.6rem;
}

.pl-console__lede[b-pw1bhfm6vq] {
    color: var(--stake-muted);
    font-family: var(--crypto-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
    max-width: 30rem;
}

.pl-console__station[b-pw1bhfm6vq] {
    min-width: 0;
}

/* Cropped shorter than the hero's 16/7.5. Everything in the scene is anchored
   to the deck (bottom: 7%), so a shorter box only trims the empty sky above
   the actors — which the hero absorbs with a negative margin and a stacked
   console layout would otherwise show as a void. */
.pl-console__station .pl-scene[b-pw1bhfm6vq] {
    aspect-ratio: 16 / 5.4;
    margin-inline: auto 0;
    max-width: 26rem;
    min-height: 0;
}

/* ── Hero: editorial copy + robot station ── */
.procurement-lab h1[b-pw1bhfm6vq] {
    margin: 0.6rem 0 0.75rem;
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.02;
    font-size: clamp(2.6rem, 5.5vw, 4.6rem);
    /* Keep headline color inside the shared roast palette. */
    background: linear-gradient(135deg, var(--stake-ink) 0%, var(--stake-copper) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pl-hero[b-pw1bhfm6vq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    isolation: isolate;
    justify-items: center;
    gap: 0;
    margin-bottom: 2.5rem;
    text-align: center;
}

.pl-hero__copy[b-pw1bhfm6vq] {
    max-width: 44rem;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.pl-hero h1[b-pw1bhfm6vq] {
    background: none;
    color: #FFFDF9;
    font-family: 'Press Start 2P', var(--crypto-mono);
    font-size: clamp(1.4rem, 3vw, 2.45rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.3;
    margin-top: 0;
    -webkit-text-fill-color: #FFFDF9;
}

.pl-hero__protocols[b-pw1bhfm6vq] {
    color: #FFFDF9;
    font-family: 'Press Start 2P', var(--crypto-mono);
    font-size: 0.58rem;
    line-height: 2;
    margin: 0 0 0.7rem;
    letter-spacing: 0.06em;
}


.pl-proto__word[b-pw1bhfm6vq] {
    display: inline-block;
    white-space: nowrap;
}

.pl-proto__word + .pl-proto__word[b-pw1bhfm6vq] {
    margin-left: 0.55em;
}

.pl-proto__char[b-pw1bhfm6vq] {
    animation: pl-proto-bob-b-pw1bhfm6vq 2.6s steps(4, end) infinite;
    animation-delay: calc(var(--i) * 100ms);
    display: inline-block;
    will-change: transform;
}

@keyframes pl-proto-bob-b-pw1bhfm6vq {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -0.22em, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pl-proto__char[b-pw1bhfm6vq] {
        animation: none;
    }
}

.pl-hero__lede[b-pw1bhfm6vq] {
    color: rgba(255, 253, 249, 0.86);
    font-family: var(--crypto-mono);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 34rem;
    font-size: 0.95rem;
}

@keyframes pl-hero-title-in-b-pw1bhfm6vq {
    from {
        opacity: 0;
        transform: translate3d(0, 0.7em, 0) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes pl-hero-copy-in-b-pw1bhfm6vq {
    from {
        opacity: 0;
        transform: translate3d(0, 0.8rem, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.pl-hero__telemetry[b-pw1bhfm6vq] {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--stake-line);
    border: 1px solid var(--stake-line);
    border-radius: 10px;
    overflow: hidden;
    margin: clamp(1.5rem, 3vh, 2rem) auto 0;
    max-width: 36rem;
    position: relative;
    text-align: left;
    z-index: 2;
}

.pl-hero__telemetry > div[b-pw1bhfm6vq] {
    background: var(--stake-surface);
    display: grid;
    flex: 1;
    gap: 0.3rem;
    min-width: 8.5rem;
    padding: 0.7rem 1rem;
}

.pl-hero__telemetry dt[b-pw1bhfm6vq] {
    color: var(--stake-faint);
    font-family: var(--crypto-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pl-hero__telemetry dd[b-pw1bhfm6vq] {
    align-items: center;
    color: var(--stake-ink);
    display: flex;
    font-family: var(--crypto-mono);
    font-size: 0.78rem;
    gap: 0.45rem;
    margin: 0;
}

.pl-hero__action[b-pw1bhfm6vq] {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: clamp(0.9rem, 2vh, 1.25rem);
    position: relative;
    z-index: 2;
}

/* The hero's lower deck is the bridge artwork, so this line is always read
   against pixel robots — it needs its own shadow to stay legible. */
.pl-hero__action-note[b-pw1bhfm6vq] {
    color: var(--stake-faint);
    font-family: var(--crypto-mono);
    font-size: 0.7rem;
    line-height: 1.6;
    margin: 0;
    max-width: 30rem;
    text-shadow: 0 1px 4px rgba(5, 3, 2, 0.95), 0 0 12px rgba(5, 3, 2, 0.8);
}

.pl-hero__connect-error[b-pw1bhfm6vq] {
    color: var(--stake-clay);
    font-size: 0.85rem;
    margin: 0;
    max-width: 30rem;
}

/* Clipped pixel CTA — same treatment as the staking introduction button. */
.pl-cta[b-pw1bhfm6vq] {
    background: var(--stake-ink);
    border: 0;
    border-radius: 0;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, 100% 3px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) 100%, 6px 100%, 6px calc(100% - 3px), 0 calc(100% - 3px), 0 6px, 3px 6px, 3px 3px, 6px 3px);
    color: var(--stake-bg-deep);
    cursor: pointer;
    filter: drop-shadow(5px 5px 0 var(--stake-copper));
    font-family: var(--crypto-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    min-height: 3.15rem;
    padding-inline: 2.25rem;
    text-transform: uppercase;
    transition: background-color 160ms ease, color 160ms ease, filter 160ms ease, transform 160ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .pl-cta:hover:not(:disabled)[b-pw1bhfm6vq] {
        background: var(--stake-amber);
        filter: drop-shadow(7px 7px 0 var(--stake-copper));
        transform: translate(-2px, -2px);
    }
}

.pl-cta--sm[b-pw1bhfm6vq] {
    font-size: 0.64rem;
    min-height: 2.6rem;
    padding-inline: 1.35rem;
}

.pl-cta:focus-visible[b-pw1bhfm6vq] {
    outline: 2px dashed var(--stake-green);
    outline-offset: 4px;
}

.pl-cta:active:not(:disabled)[b-pw1bhfm6vq] {
    filter: drop-shadow(2px 2px 0 var(--stake-copper));
    transform: scale(0.97);
}

/* ── Roast-native buttons ── */
.pl-btn[b-pw1bhfm6vq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.6rem 1.15rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 200ms ease, background 200ms ease;
}

.pl-btn:hover[b-pw1bhfm6vq] {
    transform: translateY(-1px);
}

.pl-btn:focus-visible[b-pw1bhfm6vq] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(143, 185, 155, 0.35);
}

.pl-btn--sm[b-pw1bhfm6vq] {
    padding: 0.45rem 0.9rem;
    font-size: 0.76rem;
}

.pl-btn--fund[b-pw1bhfm6vq] {
    background: var(--pl-amber-dim, rgba(229, 192, 120, 0.14));
    border-color: rgba(229, 192, 120, 0.4);
    color: var(--stake-amber);
}

.pl-btn--fund:hover[b-pw1bhfm6vq] {
    background: rgba(229, 192, 120, 0.2);
}

.pl-btn--submit[b-pw1bhfm6vq],
.pl-btn--complete[b-pw1bhfm6vq] {
    background: var(--stake-green-dim);
    border-color: rgba(143, 185, 155, 0.4);
    color: var(--stake-green);
}

.pl-btn--submit:hover[b-pw1bhfm6vq],
.pl-btn--complete:hover[b-pw1bhfm6vq] {
    background: rgba(143, 185, 155, 0.22);
}

.pl-btn--reject[b-pw1bhfm6vq] {
    background: var(--pl-clay-dim, rgba(229, 152, 128, 0.14));
    border-color: rgba(229, 152, 128, 0.38);
    color: var(--stake-clay);
}

.pl-btn--reject:hover[b-pw1bhfm6vq] {
    background: rgba(229, 152, 128, 0.2);
}

.pl-btn--ghost[b-pw1bhfm6vq] {
    background: transparent;
    border-color: var(--stake-line);
    color: var(--stake-muted);
}

.pl-btn--ghost:hover[b-pw1bhfm6vq] {
    border-color: var(--stake-copper);
    color: var(--stake-ink);
}

.pl-btn:disabled[b-pw1bhfm6vq],
.pl-cta:disabled[b-pw1bhfm6vq] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* ── Pixel actors ───────────────────────────────────────────────────────────
   The four roles of the escrow lifecycle, drawn rather than named: buyer,
   vault, courier, inspector. Each robot sheet is 4 frames of 64px laid out
   horizontally (256×64), so a 400% background steps through them; the vault is
   a single cel and simply sits still. These are the only glyphs on the page
   that survive translation — a first-time reader recognises "the one with the
   box" before reading a word of it. */
.pl-sprite[b-pw1bhfm6vq] {
    animation: pl-sprite-frames-b-pw1bhfm6vq 900ms steps(4, end) infinite;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 400% 100%;
    display: block;
    flex: none;
    height: 2.75rem;
    image-rendering: pixelated;
    width: 2.75rem;
}

@keyframes pl-sprite-frames-b-pw1bhfm6vq {
    to { background-position: 133.334% 0; }
}

.pl-sprite--sm[b-pw1bhfm6vq] {
    height: 2rem;
    width: 2rem;
}

.pl-sprite--xs[b-pw1bhfm6vq] {
    height: 1.15rem;
    width: 1.15rem;
}

.pl-sprite--buyer[b-pw1bhfm6vq] { background-image: url("images/pl-robot-buyer.png"); }
.pl-sprite--courier[b-pw1bhfm6vq] { background-image: url("images/pl-robot-courier.png"); }
.pl-sprite--inspector[b-pw1bhfm6vq] { background-image: url("images/pl-robot-inspector.png"); }
.pl-sprite--scout[b-pw1bhfm6vq] { background-image: url("images/pl-robot-scout.png"); }

/* Single-cel props: no sheet to step through. */
.pl-sprite--vault[b-pw1bhfm6vq],
.pl-sprite--key[b-pw1bhfm6vq],
.pl-sprite--coin[b-pw1bhfm6vq] {
    animation: none;
    background-position: center;
    background-size: contain;
}

.pl-sprite--vault[b-pw1bhfm6vq] { background-image: url("images/pl-vault.png"); }
.pl-sprite--key[b-pw1bhfm6vq] { background-image: url("images/pl-key.png"); }
.pl-sprite--coin[b-pw1bhfm6vq] { background-image: url("images/coffee-coin-pixel.png"); }

@media (prefers-reduced-motion: reduce) {
    .pl-sprite[b-pw1bhfm6vq] {
        animation: none;
    }
}

/* ── Next step ──────────────────────────────────────────────────────────────
   The console's answer to "what do I do now?" — one action, named in plain
   words, with its consequence stated before the wallet opens. Framed like the
   .pl-cta (clipped pixel corners, hard copper shadow) so it reads as the one
   thing on the page you are meant to press. */
.pl-next[b-pw1bhfm6vq] {
    align-items: center;
    background: linear-gradient(150deg, rgba(212, 165, 116, 0.13), rgba(16, 13, 11, 0.55) 62%), var(--stake-surface);
    clip-path: polygon(10px 0, calc(100% - 10px) 0, calc(100% - 10px) 5px, 100% 5px, 100% calc(100% - 10px), calc(100% - 5px) calc(100% - 10px), calc(100% - 5px) 100%, 10px 100%, 10px calc(100% - 5px), 0 calc(100% - 5px), 0 10px, 5px 10px, 5px 5px, 10px 5px);
    column-gap: clamp(1.1rem, 2.5vw, 2rem);
    display: grid;
    /* Direct literal, not var(--stake-copper-dim): its 0.14 alpha disappears
       against the frosted console plate, and the hard offset block is what
       makes the card read as pressable pixel furniture. */
    filter: drop-shadow(6px 6px 0 rgba(200, 155, 106, 0.42));
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 1.25rem;
    padding: clamp(1.35rem, 3vw, 1.9rem) clamp(1.4rem, 3vw, 2.1rem);
}

.pl-next__actor[b-pw1bhfm6vq] {
    display: grid;
    gap: 0.55rem;
    justify-items: center;
}

.pl-next .pl-sprite[b-pw1bhfm6vq] {
    height: 4rem;
    width: 4rem;
}

.pl-next__step[b-pw1bhfm6vq] {
    color: var(--stake-amber);
    font: 400 0.5rem/1 'Press Start 2P', var(--crypto-mono);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.pl-next__copy[b-pw1bhfm6vq] {
    min-width: 0;
}

/* No kicker above it: the sentence IS the label. */
.pl-next h2[b-pw1bhfm6vq] {
    color: var(--stake-ink);
    font: 400 clamp(0.82rem, 1.6vw, 1.02rem)/1.5 'Press Start 2P', var(--crypto-mono);
    margin: 0 0 0.7rem;
}

.pl-next__body[b-pw1bhfm6vq] {
    color: var(--stake-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
    max-width: 46rem;
}

.pl-next__actions[b-pw1bhfm6vq] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.15rem;
}

.pl-next__note[b-pw1bhfm6vq] {
    color: var(--stake-faint);
    font-family: var(--crypto-mono);
    font-size: 0.7rem;
    line-height: 1.55;
    margin: 0.75rem 0 0;
}

/* The live line for a transaction in flight. Before this, a click opened
   MetaMask and the page said nothing for three seconds. */
.pl-next__activity[b-pw1bhfm6vq] {
    align-items: center;
    color: var(--stake-amber);
    display: flex;
    font-family: var(--crypto-mono);
    font-size: 0.76rem;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
}

.pl-next__activity[b-pw1bhfm6vq]::before {
    animation: pl-activity-blink-b-pw1bhfm6vq 1s steps(2, end) infinite;
    background: var(--stake-amber);
    content: "";
    flex: none;
    height: 0.4rem;
    width: 0.4rem;
}

@keyframes pl-activity-blink-b-pw1bhfm6vq {
    to { opacity: 0.15; }
}

/* ── Lifecycle track ────────────────────────────────────────────────────────
   The same four steps the whole page is built on, kept permanently on screen:
   a map when signed out, a live board when connected (each card counts the
   missions parked on it). */
.pl-flow[b-pw1bhfm6vq] {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.pl-flow__step[b-pw1bhfm6vq] {
    align-content: start;
    background: var(--stake-surface);
    border: 1px solid var(--stake-line);
    border-radius: 14px;
    display: grid;
    gap: 0.55rem;
    padding: 1.1rem 1.2rem 1.2rem;
    position: relative;
}

/* Pixel chevron between the cards: six blocks, no anti-aliased edges. */
.pl-flow__step:not(:last-child)[b-pw1bhfm6vq]::after {
    background: var(--stake-copper);
    box-shadow:
        0 -6px var(--stake-copper), 0 6px var(--stake-copper),
        3px -3px var(--stake-copper), 3px 3px var(--stake-copper),
        6px 0 var(--stake-copper);
    content: "";
    height: 3px;
    opacity: 0.55;
    position: absolute;
    right: -0.72rem;
    top: 2.2rem;
    width: 3px;
}

.pl-flow__head[b-pw1bhfm6vq] {
    align-items: center;
    display: flex;
    gap: 0.6rem;
}

.pl-flow__num[b-pw1bhfm6vq] {
    background: var(--stake-copper-dim);
    color: var(--stake-copper);
    font: 400 0.58rem/1 'Press Start 2P', var(--crypto-mono);
    padding: 0.4rem 0.42rem 0.32rem;
}

.pl-flow__title[b-pw1bhfm6vq] {
    color: var(--stake-ink);
    font: 400 0.66rem/1.55 'Press Start 2P', var(--crypto-mono);
    margin: 0;
}

.pl-flow__blurb[b-pw1bhfm6vq] {
    color: var(--stake-muted);
    font-size: 0.8rem;
    line-height: 1.55;
    margin: 0;
}

/* In the hero the track teaches; it must not outweigh the headline above it. */
.pl-hero .pl-flow[b-pw1bhfm6vq] {
    margin: clamp(1rem, 2.5vh, 1.6rem) 0 0;
    max-width: 64rem;
    position: relative;
    text-align: left;
    width: 100%;
    z-index: 2;
}

/* Visual order in the hero is copy → CTA → track, while the DOM keeps
   teach-before-act. The bridge crew is fixed to the lower third of the
   viewport, so whatever lands last is read against pixel robots: the four
   opaque cards survive that, the connect button and its one-line disclaimer
   did not. (No focus-order cost — the track holds nothing focusable.) */
.procurement-lab--intro .pl-hero__copy[b-pw1bhfm6vq] { order: 1; }
.procurement-lab--intro .pl-hero__action[b-pw1bhfm6vq] { order: 2; }
.procurement-lab--intro .pl-flow[b-pw1bhfm6vq] { order: 3; }
.procurement-lab--intro .pl-hero__scene[b-pw1bhfm6vq] { order: 4; }

/* ── Galactic robot station ──
   The scene is decorative (role="img" in markup); every animation below is a
   small stepped loop, and the whole block collapses to a still composition
   under prefers-reduced-motion. */
.pl-hero__scene[b-pw1bhfm6vq] {
    /* Pull the bridge canvas behind the copy so the seated crew reaches the
       ship floor without pushing the CTA below the fold. */
    margin-top: calc(clamp(7rem, 12vw, 11rem) * -1);
    min-width: 0;
    position: relative;
    width: 100%;
    z-index: 0;
}

.pl-scene[b-pw1bhfm6vq] {
    aspect-ratio: 16 / 6.6;
    margin-inline: auto;
    max-width: 68rem;
    min-height: 20rem;
    position: relative;
    width: 100%;
}

.pl-scene img[b-pw1bhfm6vq] {
    image-rendering: pixelated;
}

/* Bridge crew: a frontal captain at the helm with four seated operators. The
   transparent group sits directly on the cabin artwork's perspective floor. */
.pl-scene__bridge[b-pw1bhfm6vq] {
    --captain-body-width: 14.5%;
    bottom: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    width: 76%;
    z-index: 2;
}

/* The cabin frame is viewport-fixed, so the signed-out crew must use the same
   coordinate space to stay planted on its floor while the page scrolls. The
   connected console keeps the in-flow bridge positioning above. */
.procurement-lab--intro .pl-hero__scene .pl-scene__bridge[b-pw1bhfm6vq] {
    bottom: 13dvh;
    position: fixed;
    width: min(64.6vw, 51.75rem);
}

.pl-scene__bridge img[b-pw1bhfm6vq] {
    display: block;
    filter: drop-shadow(0 8px 5px rgba(5, 3, 2, 0.48));
    position: relative;
    width: 100%;
    z-index: 1;
}

.pl-scene__bridge-glow[b-pw1bhfm6vq] {
    animation: pl-bridge-console-pulse-b-pw1bhfm6vq 2.4s steps(2, end) infinite;
    aspect-ratio: 1;
    background: rgba(65, 224, 230, 0.68);
    box-shadow: 0 0 10px 4px rgba(65, 224, 230, 0.35);
    bottom: 15%;
    position: absolute;
    width: 2.4%;
    z-index: 2;
}

.pl-scene__bridge-glow--port[b-pw1bhfm6vq] {
    left: 18.5%;
}

.pl-scene__bridge-glow--helm[b-pw1bhfm6vq] {
    animation-delay: 0.8s;
    background: rgba(242, 178, 62, 0.72);
    box-shadow: 0 0 12px 4px rgba(242, 178, 62, 0.38);
    bottom: 17%;
    left: 48.8%;
}

.pl-scene__bridge-glow--starboard[b-pw1bhfm6vq] {
    animation-delay: 1.6s;
    right: 18.5%;
}

.pl-scene__captain-body[b-pw1bhfm6vq] {
    --captain-arms-offset-x: 0%;
    --captain-arms-scale-x: 1.2;
    --captain-pose: 50%;
    animation: pl-captain-body-signal-b-pw1bhfm6vq 14s steps(1, end) infinite;
    aspect-ratio: 1;
    left: 50%;
    position: absolute;
    top: 55.5%;
    transform: translate(-50%, -50%);
    width: var(--captain-body-width);
    z-index: 3;
}

.pl-scene__captain-arms[b-pw1bhfm6vq] {
    background-image: url("images/pl-captain-steering-poses.webp");
    background-position: var(--captain-pose) 0;
    background-repeat: no-repeat;
    background-size: 300% 100%;
    filter: drop-shadow(0 2px 2px rgba(5, 3, 2, 0.55));
    image-rendering: pixelated;
    inset: 0;
    position: absolute;
    /* The neutral sprite's left shoulder is 191.5px into its 724px frame.
       Keep that good attachment fixed while each pose corrects its shoulder span. */
    transform: translate3d(var(--captain-arms-offset-x), 0, 0) scaleX(var(--captain-arms-scale-x));
    transform-origin: 26.45% 50%;
}

.pl-console__station .pl-scene__bridge[b-pw1bhfm6vq] {
    width: 96%;
}

@keyframes pl-bridge-console-pulse-b-pw1bhfm6vq {
    0%, 100% { opacity: 0.22; }
    50% { opacity: 0.72; }
}

@keyframes pl-captain-body-signal-b-pw1bhfm6vq {
    0%, 15%, 42%, 58%, 85%, 100% {
        --captain-arms-offset-x: 0%;
        --captain-arms-scale-x: 1.2;
        --captain-pose: 50%;
    }

    22%, 34% {
        --captain-arms-offset-x: -3.3%;
        --captain-arms-scale-x: 1.1643;
        --captain-pose: 0%;
    }

    65%, 77% {
        --captain-arms-offset-x: 8.29%;
        --captain-arms-scale-x: 1.1879;
        --captain-pose: 100%;
    }
}

/* ── Dashboard shell ────────────────────────────────────────────────────────
   The connected half of the page is a board, so its furniture is pixel
   furniture: square corners, a hard offset shadow instead of a soft one, and
   pixel-font headings small enough to act as labels rather than chapters. The
   old console used 14px-radius cards, 1.7rem Playfair headings and a prose
   paragraph under each — a reading surface pretending to be a dashboard. */
.pl-panel[b-pw1bhfm6vq] {
    background: var(--stake-surface);
    border: 1px solid var(--stake-line);
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
    margin-bottom: 0.9rem;
    padding: 1rem 1.1rem 1.15rem;
}

.pl-panel__bar[b-pw1bhfm6vq] {
    align-items: center;
    border-bottom: 1px solid var(--stake-line);
    display: flex;
    gap: 0.9rem;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
}

.pl-panel h2[b-pw1bhfm6vq] {
    color: var(--stake-ink);
    font: 400 0.66rem/1 'Press Start 2P', var(--crypto-mono);
    margin: 0;
}

.pl-panel__tools[b-pw1bhfm6vq] {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.pl-panel__count[b-pw1bhfm6vq] {
    color: var(--stake-green);
    font: 400 0.72rem/1 'Press Start 2P', var(--crypto-mono);
}

/* Every empty state on the board is one line with its actor in front of it. */
.pl-panel__empty[b-pw1bhfm6vq] {
    align-items: center;
    color: var(--stake-muted);
    display: flex;
    font-size: 0.82rem;
    gap: 0.7rem;
    margin: 0;
    padding: 0.35rem 0 0.2rem;
}

.pl-panel__empty a[b-pw1bhfm6vq] {
    color: var(--stake-copper);
}

.pl-panel__note[b-pw1bhfm6vq] {
    color: var(--stake-muted);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0.7rem 0 0;
}

.pl-dash-row[b-pw1bhfm6vq] {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pl-dash-row .pl-panel[b-pw1bhfm6vq] {
    margin-bottom: 0;
}

/* ── Step rail ──────────────────────────────────────────────────────────────
   The same four steps as the hero track, reduced to sprite + name + count.
   It replaced the KPI row, which restated three numbers already visible in
   the panel headers below it. */
.pl-rail[b-pw1bhfm6vq] {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
}

.pl-rail__step[b-pw1bhfm6vq] {
    align-items: center;
    background: var(--stake-surface);
    border: 1px solid var(--stake-line);
    display: flex;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
}

.pl-rail__label[b-pw1bhfm6vq] {
    color: var(--stake-muted);
    flex: 1;
    font-family: var(--crypto-mono);
    font-size: 0.7rem;
    min-width: 0;
}

.pl-rail__count[b-pw1bhfm6vq] {
    color: var(--stake-faint);
    font: 400 0.72rem/1 'Press Start 2P', var(--crypto-mono);
}

.pl-rail__step.is-occupied[b-pw1bhfm6vq] {
    border-color: rgba(229, 192, 120, 0.4);
}

.pl-rail__step.is-occupied .pl-rail__label[b-pw1bhfm6vq] {
    color: var(--stake-ink);
}

.pl-rail__step.is-occupied .pl-rail__count[b-pw1bhfm6vq] {
    color: var(--stake-amber);
}

/* ── Robot roster ── */
.robot-grid[b-pw1bhfm6vq] {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.robot-chip[b-pw1bhfm6vq] {
    align-items: center;
    border: 1px solid var(--stake-line);
    display: flex;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
}

.robot-chip strong[b-pw1bhfm6vq] {
    color: var(--stake-ink);
    font-family: var(--crypto-mono);
    font-size: 0.72rem;
}

.robot-chip .pl-copy[b-pw1bhfm6vq] {
    color: var(--stake-copper);
    font-family: var(--crypto-mono);
    font-size: 0.68rem;
}

.robot-chip.is-active[b-pw1bhfm6vq] {
    border-color: rgba(143, 185, 155, 0.42);
}

/* ── Copy-to-clipboard affordance ── */
.pl-copy[b-pw1bhfm6vq] {
    position: relative;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    transition: color 160ms ease;
}

.pl-copy[b-pw1bhfm6vq]::after {
    content: "⧉";
    margin-left: 0.32rem;
    font-size: 0.85em;
    opacity: 0;
    transition: opacity 160ms ease;
}

.pl-copy:hover[b-pw1bhfm6vq] {
    color: var(--stake-ink);
}

.pl-copy:hover[b-pw1bhfm6vq]::after {
    opacity: 0.5;
}

.pl-copy:focus-visible[b-pw1bhfm6vq] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(143, 185, 155, 0.4);
    border-radius: 4px;
}

.pl-copy.is-copied[b-pw1bhfm6vq]::after {
    content: "✓";
    opacity: 1;
    color: var(--stake-green);
}

.pl-copy__flag[b-pw1bhfm6vq] {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.4rem);
    background: var(--stake-green);
    color: #12100e;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.pl-copy.is-copied .pl-copy__flag[b-pw1bhfm6vq] {
    opacity: 1;
}

/* ── State pills ── */
.state-pill[b-pw1bhfm6vq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.28rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.state-pill__dot[b-pw1bhfm6vq] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

.state-pill--active[b-pw1bhfm6vq],
.state-pill--complete[b-pw1bhfm6vq] { color: #b7e6c5; background: var(--stake-green-dim); }
.state-pill--submitted[b-pw1bhfm6vq] { color: var(--stake-green); background: var(--stake-green-dim); }
.state-pill--funded[b-pw1bhfm6vq] { color: var(--stake-amber); background: var(--pl-amber-dim, rgba(229, 192, 120, 0.14)); }
.state-pill--attention[b-pw1bhfm6vq] { color: var(--stake-clay); background: var(--pl-clay-dim, rgba(229, 152, 128, 0.14)); }
.state-pill--open[b-pw1bhfm6vq] { color: var(--stake-copper); background: var(--stake-copper-dim); }
.state-pill--idle[b-pw1bhfm6vq] { color: var(--stake-faint); background: rgba(244, 239, 230, 0.06); }

/* ── Mission rows ───────────────────────────────────────────────────────────
   One mission is one row: the actor whose turn it is, its number, its state,
   what is in escrow, a four-block progress bar, and the single button that
   moves it. Addresses, chain, timestamp and the description hash — six lines
   of text that were open on every card — now live inside <details>. */
.mission-list[b-pw1bhfm6vq] {
    display: grid;
    gap: 0.5rem;
}

.mission[b-pw1bhfm6vq] {
    align-items: center;
    background: var(--stake-surface-2);
    border: 1px solid var(--stake-line);
    column-gap: 0.9rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.7rem 0.85rem;
    row-gap: 0.35rem;
}

/* Explicit placement, all four children: with only grid-row set, sparse
   auto-placement dropped the action button into the text column. */
.mission > .pl-sprite[b-pw1bhfm6vq] {
    grid-column: 1;
    grid-row: 1 / 3;
}

.mission--mine[b-pw1bhfm6vq] {
    border-color: rgba(229, 192, 120, 0.45);
}

.mission__top[b-pw1bhfm6vq] {
    grid-column: 2;
    grid-row: 1;
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.mission__num[b-pw1bhfm6vq] {
    color: var(--stake-ink);
    font: 400 0.62rem/1 'Press Start 2P', var(--crypto-mono);
}

.mission__state[b-pw1bhfm6vq] {
    font-family: var(--crypto-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    padding: 0.18rem 0.4rem;
    text-transform: uppercase;
}

.mission__amount[b-pw1bhfm6vq] {
    align-items: center;
    color: var(--stake-amber);
    display: flex;
    font-family: var(--crypto-mono);
    font-size: 0.72rem;
    gap: 0.3rem;
    margin-left: auto;
}

.mission__amount img[b-pw1bhfm6vq] {
    image-rendering: pixelated;
}

.mission__bottom[b-pw1bhfm6vq] {
    grid-column: 2;
    grid-row: 2;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Four blocks, no numerals: done / here / not yet. */
.mission__bar[b-pw1bhfm6vq] {
    display: flex;
    gap: 2px;
}

.mission__seg[b-pw1bhfm6vq] {
    background: var(--stake-line);
    display: block;
    height: 7px;
    width: 1.5rem;
}

.mission__seg.is-complete[b-pw1bhfm6vq] {
    background: var(--stake-green);
}

.mission__seg.is-current[b-pw1bhfm6vq] {
    background: var(--stake-amber);
}

.mission__turn[b-pw1bhfm6vq] {
    color: var(--stake-faint);
    font-family: var(--crypto-mono);
    font-size: 0.68rem;
}

.mission__turn.is-yours[b-pw1bhfm6vq] {
    color: var(--stake-amber);
}

.mission__more[b-pw1bhfm6vq] {
    margin-left: auto;
}

.mission__more summary[b-pw1bhfm6vq] {
    color: var(--stake-faint);
    cursor: pointer;
    font-family: var(--crypto-mono);
    font-size: 0.66rem;
    list-style: none;
}

.mission__more summary[b-pw1bhfm6vq]::-webkit-details-marker {
    display: none;
}

.mission__more summary[b-pw1bhfm6vq]::after {
    content: " ▸";
}

.mission__more[open] summary[b-pw1bhfm6vq]::after {
    content: " ▾";
}

.mission__more summary:hover[b-pw1bhfm6vq] {
    color: var(--stake-ink);
}

.mission__roles[b-pw1bhfm6vq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    margin: 0.7rem 0 0.2rem;
}

.mission__roles dt[b-pw1bhfm6vq] {
    align-items: center;
    color: var(--stake-faint);
    display: flex;
    font-family: var(--crypto-mono);
    font-size: 0.6rem;
    gap: 0.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mission__roles dd[b-pw1bhfm6vq] {
    align-items: center;
    color: var(--stake-copper);
    display: flex;
    font-family: var(--crypto-mono);
    font-size: 0.72rem;
    gap: 0.35rem;
    margin: 0.25rem 0 0;
}

.mission__roles code[b-pw1bhfm6vq] {
    font-size: 0.68rem;
}

.mission__you[b-pw1bhfm6vq] {
    background: var(--stake-copper-dim);
    color: var(--stake-copper);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    padding: 0.1rem 0.3rem;
    text-transform: uppercase;
}

.mission__act[b-pw1bhfm6vq] {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    grid-column: 3;
    grid-row: 1 / 3;
}

/* ── Page-level empty / loading states ── */
.projection-empty[b-pw1bhfm6vq] {
    background: var(--stake-surface);
    border: 1px solid var(--stake-line);
    padding: 1.6rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 10rem;
    color: var(--stake-muted);
}

.projection-empty p[b-pw1bhfm6vq] {
    margin: 0.5rem 0 0;
    max-width: 42rem;
    line-height: 1.55;
}

.projection-empty--loading[b-pw1bhfm6vq] {
    justify-content: center;
    text-align: center;
}

.projection-empty__pulse[b-pw1bhfm6vq] {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--stake-green);
    border-top-color: transparent;
    border-radius: 50%;
    animation: procurement-spin-b-pw1bhfm6vq 0.8s linear infinite;
}

@keyframes procurement-spin-b-pw1bhfm6vq {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pl-btn[b-pw1bhfm6vq],
    .pl-cta[b-pw1bhfm6vq] { transition: none; }
    .pl-btn:hover[b-pw1bhfm6vq] { transform: none; }
    .projection-empty__pulse[b-pw1bhfm6vq] { animation-duration: 1.6s; }

    .pl-scene__bridge-glow[b-pw1bhfm6vq] {
        animation: none;
    }

    .pl-scene__captain-body[b-pw1bhfm6vq] {
        --captain-arms-offset-x: 0%;
        --captain-arms-scale-x: 1.2;
        --captain-pose: 50%;
        animation: none;
    }

    .pl-cabin__visitor[b-pw1bhfm6vq] {
        display: none;
    }
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .procurement-lab[b-pw1bhfm6vq] {
        overflow-x: clip;
    }

    .pl-dash-row[b-pw1bhfm6vq] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pl-rail[b-pw1bhfm6vq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl-console[b-pw1bhfm6vq] {
        grid-template-columns: 1fr;
    }

    .pl-console__station .pl-scene[b-pw1bhfm6vq] {
        margin-inline: 0;
        max-width: 34rem;
    }

    .pl-hero h1[b-pw1bhfm6vq] {
        animation: pl-hero-title-in-b-pw1bhfm6vq 520ms cubic-bezier(0.22, 0.78, 0.24, 1) 150ms both;
        font-size: clamp(1.25rem, 4.5vw, 2.15rem);
    }

    /* Two rows of two. The chevrons only make sense along a single row. */
    .pl-flow[b-pw1bhfm6vq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl-flow__step:not(:last-child)[b-pw1bhfm6vq]::after {
        display: none;
    }

    .pl-next[b-pw1bhfm6vq] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1rem;
    }

    .pl-next__actor[b-pw1bhfm6vq] {
        grid-auto-flow: column;
        justify-content: start;
        justify-items: start;
    }

    .procurement-lab--intro .pl-hero__copy[b-pw1bhfm6vq],
    .procurement-lab--intro .pl-hero__action[b-pw1bhfm6vq] {
        /* The bridge occupies the lower deck on compact screens. Ease the
           content toward the visual center without crowding the larger crew. */
        translate: 0 -0.5rem;
    }

    .procurement-lab--intro .pl-hero__protocols[b-pw1bhfm6vq] {
        animation: pl-hero-copy-in-b-pw1bhfm6vq 420ms cubic-bezier(0.22, 0.78, 0.24, 1) 40ms both;
    }

    .procurement-lab--intro .pl-hero__lede[b-pw1bhfm6vq] {
        animation: pl-hero-copy-in-b-pw1bhfm6vq 420ms cubic-bezier(0.22, 0.78, 0.24, 1) 480ms both;
    }

    .procurement-lab--intro .pl-hero__action[b-pw1bhfm6vq] {
        animation: pl-hero-copy-in-b-pw1bhfm6vq 420ms cubic-bezier(0.22, 0.78, 0.24, 1) 650ms both;
    }

    .pl-hero__scene[b-pw1bhfm6vq] {
        margin-top: -3rem;
    }

    .pl-hero__scene .pl-scene__bridge[b-pw1bhfm6vq] {
        width: 86%;
    }

    .procurement-lab--intro .pl-hero__scene .pl-scene__bridge[b-pw1bhfm6vq] {
        width: min(80vw, 40rem);
    }
}

@media (max-width: 640px) {
    .procurement-lab[b-pw1bhfm6vq] {
        padding-top: calc(4.75rem + clamp(1.75rem, 6vw, 2.5rem));
    }

    .procurement-lab__inner[b-pw1bhfm6vq] {
        padding-inline: clamp(1rem, 5vw, 1.5rem);
    }

    .pl-flow[b-pw1bhfm6vq] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The row collapses to sprite + text, with the action underneath: at this
       width a three-column row squeezes the progress bar out of existence. */
    .mission[b-pw1bhfm6vq] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .mission__act[b-pw1bhfm6vq] {
        grid-column: 2;
        grid-row: 3;
    }

    .pl-hero .pl-flow[b-pw1bhfm6vq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl-hero h1[b-pw1bhfm6vq] {
        font-size: clamp(1.1rem, 6vw, 1.7rem);
        line-height: 1.4;
    }

    .pl-hero__protocols[b-pw1bhfm6vq] {
        font-size: clamp(0.37rem, 1.85vw, 0.58rem);
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .pl-hero__protocols .pl-proto__word + .pl-proto__word[b-pw1bhfm6vq] {
        margin-left: 0.3em;
    }

    /* On a phone the hero has to fit above the crew: the track keeps its four
       named steps and drops the explanatory sentence, which the console below
       still carries in full. */
    .pl-hero .pl-flow[b-pw1bhfm6vq] {
        gap: 0.4rem;
    }

    .pl-hero .pl-flow__step[b-pw1bhfm6vq] {
        padding: 0.7rem 0.75rem 0.8rem;
    }

    .pl-hero .pl-flow__blurb[b-pw1bhfm6vq] {
        display: none;
    }

    .pl-hero .pl-sprite[b-pw1bhfm6vq] {
        height: 1.9rem;
        width: 1.9rem;
    }

    .pl-hero .pl-flow__title[b-pw1bhfm6vq] {
        font-size: 0.52rem;
    }

    .pl-hero__lede[b-pw1bhfm6vq] {
        font-size: clamp(0.76rem, 3.4vw, 0.9rem);
        line-height: 1.55;
    }

    /* The bridge now scales to the available viewport instead of preserving a
       desktop minimum width that pushed its centre and starboard crew offscreen. */
    .pl-hero__scene[b-pw1bhfm6vq] {
        margin-top: -1.75rem;
        overflow: visible;
    }

    .pl-hero__scene .pl-scene[b-pw1bhfm6vq] {
        aspect-ratio: auto;
        min-height: clamp(13rem, 56vw, 16rem);
        min-width: 0;
    }

    /* The console panels below already carry the state on phones. Dropping the
       compact bridge beats rendering its five seats too small to read. */
    .pl-console__station[b-pw1bhfm6vq] {
        display: none;
    }

    /* A portrait viewport crops to the large forward window. The side-window
       visitors would be hidden by that crop anyway, so avoid running their
       long animations on small devices. */
    .pl-cabin__window[b-pw1bhfm6vq] {
        display: none;
    }

    .procurement-lab--intro .pl-hero__scene .pl-scene__bridge[b-pw1bhfm6vq] {
        /* Keep the desktop floor clearance; only the crew's width changes for
           the narrower portrait composition. This is exactly 130% of the
           previous mobile bridge width. */
        width: min(calc(148.2vw - 3.64rem), 55.25rem);
    }

    .pl-hero__action[b-pw1bhfm6vq] {
        margin-top: 0.6rem;
    }

    .pl-cta[b-pw1bhfm6vq] {
        min-height: 3rem;
        padding-inline: 1.6rem;
    }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
    .procurement-lab--intro .pl-hero__protocols[b-pw1bhfm6vq],
    .procurement-lab--intro .pl-hero h1[b-pw1bhfm6vq],
    .procurement-lab--intro .pl-hero__lede[b-pw1bhfm6vq],
    .procurement-lab--intro .pl-hero__action[b-pw1bhfm6vq] {
        animation: none;
    }
}

/* ── Two-column hero grid (signed-out only) ── */
.pl-hero__grid[b-pw1bhfm6vq] {
    align-items: stretch;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    min-height: calc(100dvh - 4.75rem - clamp(2.5rem, 5vw, 4.5rem) - 6rem);
    text-align: left;
    width: 100%;
    z-index: 2;
}

.pl-hero__col--copy[b-pw1bhfm6vq] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.9rem, 2vh, 1.25rem);
    justify-content: center;
}

.pl-hero__col--stepper[b-pw1bhfm6vq] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.pl-hero__grid[b-pw1bhfm6vq] {
    align-items: center;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    text-align: left;
    width: 100%;
    z-index: 2;
}

.pl-hero__col--copy[b-pw1bhfm6vq] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.9rem, 2vh, 1.25rem);
}

.pl-hero__col--stepper[b-pw1bhfm6vq] {
    min-width: 0;
}

@media (max-width: 860px) {
    .pl-hero__grid[b-pw1bhfm6vq] {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }
    .pl-hero__col--copy[b-pw1bhfm6vq] {
        align-items: center;
    }
}

/* ── Stepper carousel ── */
.pl-stepper[b-pw1bhfm6vq] {
    background: rgba(16, 13, 11, 0.55);
    backdrop-filter: blur(10px) saturate(110%);
    -webkit-backdrop-filter: blur(10px) saturate(110%);
    border: 1px solid rgba(255, 253, 249, 0.1);
    border-radius: 14px;
    display: grid;
    gap: 1rem;
    padding: 1.4rem 1.6rem 1.2rem;
    position: relative;
}
.pl-stepper[b-pw1bhfm6vq] {
    background: rgba(16, 13, 11, 0.45);
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    border: 1px solid rgba(255, 253, 249, 0.08);
    border-radius: 14px;
    display: grid;
    gap: 1rem;
    padding: 1.4rem 1.6rem 1.2rem;
    position: relative;
}
.pl-stepper[b-pw1bhfm6vq] {
    background: var(--stake-surface);
    border: 1px solid var(--stake-line);
    border-radius: 14px;
    display: grid;
    gap: 1rem;
    padding: 1.4rem 1.6rem 1.2rem;
    position: relative;
}

.pl-stepper__card[b-pw1bhfm6vq] {
    animation: pl-stepper-fade-in-b-pw1bhfm6vq 500ms cubic-bezier(0.23, 1, 0.32, 1);
    display: grid;
    gap: 0.6rem;
}

@keyframes pl-stepper-fade-in-b-pw1bhfm6vq {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.pl-stepper__head[b-pw1bhfm6vq] {
    align-items: center;
    display: flex;
    gap: 0.6rem;
}

.pl-stepper__num[b-pw1bhfm6vq] {
    background: var(--stake-copper-dim);
    color: var(--stake-copper);
    font: 400 0.58rem/1 'Press Start 2P', var(--crypto-mono);
    padding: 0.4rem 0.42rem 0.32rem;
}

.pl-stepper__title[b-pw1bhfm6vq] {
    color: var(--stake-ink);
    font: 400 0.72rem/1.5 'Press Start 2P', var(--crypto-mono);
    margin: 0;
}

.pl-stepper__blurb[b-pw1bhfm6vq] {
    color: var(--stake-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

/* Pixel-arrow controls */
.pl-stepper__controls[b-pw1bhfm6vq] {
    align-items: center;
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    margin-top: 0.4rem;
}

.pl-stepper__arrow[b-pw1bhfm6vq] {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    height: 2.2rem;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 2.2rem;
}

.pl-stepper__arrow span[b-pw1bhfm6vq] {
    display: block;
    height: 3px;
    position: relative;
    width: 3px;
}

/* Pixel left arrow (←): box-shadow forming a left-pointing triangle */
.pl-stepper__arrow--left span[b-pw1bhfm6vq] {
    background: var(--stake-copper);
    box-shadow:
        3px -3px var(--stake-copper), 3px 3px var(--stake-copper),
        6px -6px var(--stake-copper), 6px 0 var(--stake-copper), 6px 6px var(--stake-copper);
}

/* Pixel right arrow (→): box-shadow forming a right-pointing triangle */
.pl-stepper__arrow--right span[b-pw1bhfm6vq] {
    background: var(--stake-copper);
    box-shadow:
        -3px -3px var(--stake-copper), -3px 3px var(--stake-copper),
        -6px -6px var(--stake-copper), -6px 0 var(--stake-copper), -6px 6px var(--stake-copper);
}

.pl-stepper__arrow:hover span[b-pw1bhfm6vq] {
    background: var(--stake-amber);
    box-shadow: none;
}

.pl-stepper__arrow--left:hover span[b-pw1bhfm6vq] {
    box-shadow:
        3px -3px var(--stake-amber), 3px 3px var(--stake-amber),
        6px -6px var(--stake-amber), 6px 0 var(--stake-amber), 6px 6px var(--stake-amber);
}

.pl-stepper__arrow--right:hover span[b-pw1bhfm6vq] {
    box-shadow:
        -3px -3px var(--stake-amber), -3px 3px var(--stake-amber),
        -6px -6px var(--stake-amber), -6px 0 var(--stake-amber), -6px 6px var(--stake-amber);
}

.pl-stepper__arrow:focus-visible[b-pw1bhfm6vq] {
    outline: 2px dashed var(--stake-green);
    outline-offset: 2px;
}

/* Step dots */
.pl-stepper__dots[b-pw1bhfm6vq] {
    display: flex;
    gap: 0.5rem;
}

.pl-stepper__dot[b-pw1bhfm6vq] {
    background: var(--stake-line);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    height: 6px;
    padding: 0;
    transition: background 200ms ease, transform 200ms ease;
    width: 6px;
}

.pl-stepper__dot.is-active[b-pw1bhfm6vq] {
    background: var(--stake-amber);
    transform: scale(1.3);
}

.pl-stepper__dot:hover[b-pw1bhfm6vq] {
    background: var(--stake-copper);
}

.pl-stepper__dot:focus-visible[b-pw1bhfm6vq] {
    outline: 2px dashed var(--stake-green);
    outline-offset: 2px;
}
/* /Components/Home/PixelHome.razor.rz.scp.css */
/* Pixel-galaxy homepage. Lives in the "dark roast wing": the --stake-* tokens
   come from app.css's ".yield-page, .procurement-lab" block (StakingLayout
   wraps this page in .yield-page). Tokens are referenced as var(--stake-x)
   directly throughout — nested custom-property aliasing does not resolve
   reliably in this project.

   The pixel-space scene itself (stars, planets, Andromeda, chain badges,
   mugs, coins, the robot crew, the sky palette variants) lives in
   Components/Layout/GlobalScene.razor.css — this file only styles the copy,
   the switcher chrome and the feature panels that float over that shared
   background. */

.ph-page[b-ljrijbno3o] {
    color: var(--stake-ink);
    font-family: var(--font-sans);
    min-height: 100dvh;
}

.ph-page img[b-ljrijbno3o] {
    image-rendering: pixelated;
}

/* The homepage's pixel-space background has the same two-screen footprint.
   Keeping the chapters explicit makes the scene leave with ProductDiscovery
   instead of following the feature panels and footer. */
.ph-extended-hero[b-ljrijbno3o] {
    min-height: 200dvh;
    position: relative;
}

/* ── Hero: editorial copy floating over the shared full-bleed pixel space.
   The layout no longer reserves navbar space above it, so the GlobalScene
   background runs beneath the transparent fixed header, same as /staking and
   the lab — the padding-top below is what keeps the copy clear of the bar.
   The background stays transparent: painting a ground here would cover the
   shared scene. ── */
.ph-hero[b-ljrijbno3o] {
    align-content: center;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    isolation: isolate;
    justify-items: center;
    min-height: 100dvh;
    padding: calc(4.75rem + clamp(1rem, 3vh, 2.5rem)) clamp(1.25rem, 4vw, 3.5rem) clamp(3rem, 8vh, 6rem);
    position: relative;
    text-align: center;
}

.ph-copy-toggle[b-ljrijbno3o] {
    background: var(--stake-bg-deep);
    border: 1px solid var(--stake-line-strong);
    color: var(--stake-muted);
    cursor: pointer;
    font-family: var(--crypto-mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 0.45rem 0.65rem;
    position: absolute;
    right: clamp(1.25rem, 4vw, 3.5rem);
    text-transform: uppercase;
    top: calc(4.75rem + clamp(1rem, 3vh, 2.5rem));
    transition: border-color 160ms ease, color 160ms ease;
    z-index: 3;
}

.ph-copy-toggle:hover[b-ljrijbno3o],
.ph-copy-toggle:focus-visible[b-ljrijbno3o] {
    border-color: var(--stake-amber);
    color: var(--stake-ink);
}

.ph-copy-toggle:focus-visible[b-ljrijbno3o] {
    outline: 2px dashed var(--stake-green);
    outline-offset: 3px;
}

/* ── Crew brain switcher ──────────────────────────────────────────────────
   Mirrors .ph-copy-toggle's chrome on the opposite corner. Only rendered when
   the crew runtime is actually driving the scene. */
.ph-brain[b-ljrijbno3o] {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    left: clamp(1.25rem, 4vw, 3.5rem);
    position: absolute;
    top: calc(4.75rem + clamp(1rem, 3vh, 2.5rem));
    z-index: 3;
}

.ph-brain__label[b-ljrijbno3o],
.ph-brain__stat[b-ljrijbno3o] {
    color: var(--stake-muted);
    font-family: var(--crypto-mono);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    /* The sky drifts underneath — a planet passing behind this text would
       otherwise swallow it. A hard 1px shadow in the page's own base keeps it
       legible without a panel. */
    text-shadow: 1px 1px 0 var(--stake-bg-deep), -1px -1px 0 var(--stake-bg-deep);
    text-transform: uppercase;
}

.ph-brain__label[b-ljrijbno3o] {
    font-weight: 800;
}

.ph-brain__stat[b-ljrijbno3o] {
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    opacity: 0.75;
    text-transform: none;
}

.ph-brain__options[b-ljrijbno3o] {
    display: flex;
}

.ph-brain__option[b-ljrijbno3o] {
    background: var(--stake-bg-deep);
    border: 1px solid var(--stake-line-strong);
    color: var(--stake-muted);
    cursor: pointer;
    font-family: var(--crypto-mono);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.4rem 0.55rem;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

/* Collapse the shared borders into one hairline between segments. */
.ph-brain__option + .ph-brain__option[b-ljrijbno3o] {
    border-left-width: 0;
}

.ph-brain__option:hover[b-ljrijbno3o],
.ph-brain__option:focus-visible[b-ljrijbno3o] {
    border-color: var(--stake-amber);
    color: var(--stake-ink);
}

.ph-brain__option:focus-visible[b-ljrijbno3o] {
    outline: 2px dashed var(--stake-green);
    outline-offset: 3px;
}

.ph-brain__option.is-active[b-ljrijbno3o] {
    background: var(--stake-amber);
    border-color: var(--stake-amber);
    color: var(--stake-bg-deep);
}

.ph-hero--intro-hidden .ph-hero__copy[b-ljrijbno3o] {
    display: none;
}

.ph-hero__copy[b-ljrijbno3o] {
    max-width: 44rem;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.ph-eyebrow[b-ljrijbno3o] {
    color: var(--stake-green);
    font-family: var(--crypto-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}

/* 8-bit 3D title: Press Start 2P glyphs dressed like the retro pixel
   alphabet — white faces with a 2px black keyline, then a stacked hard-edge
   (no blur) text-shadow stepping down-right as the blocky extrusion,
   darkening toward the back. Letters bob in a staggered stepped ripple. */
.ph-title3d[b-ljrijbno3o] {
    font-family: 'Press Start 2P', var(--crypto-mono);
    font-size: clamp(1.65rem, 4.4vw, 3rem);
    letter-spacing: 0.14em;
    line-height: 1;
    margin: 0 0 1.5rem;
    padding-right: 0.45em; /* keeps the last letter's extrusion on-canvas */
}

.ph-title3d__line[b-ljrijbno3o] {
    display: block;
}

.ph-hero--intro-pending .ph-title3d__line[b-ljrijbno3o],
.ph-hero--intro-pending .ph-lede[b-ljrijbno3o],
.ph-hero--intro-pending .ph-cta-row[b-ljrijbno3o] {
    opacity: 0;
}

.ph-hero--intro-pending .ph-title3d__line[b-ljrijbno3o] {
    transform: translate3d(0, 0.7em, 0) scale(0.94);
}

.ph-hero--intro-pending.is-intro-ready .ph-title3d__line[b-ljrijbno3o] {
    animation: ph-hero-title-in-b-ljrijbno3o 520ms cubic-bezier(0.22, 0.78, 0.24, 1) both;
}

.ph-hero--intro-pending.is-intro-ready .ph-title3d__line:nth-child(1)[b-ljrijbno3o] {
    animation-delay: 40ms;
}

.ph-hero--intro-pending.is-intro-ready .ph-title3d__line:nth-child(2)[b-ljrijbno3o] {
    animation-delay: 170ms;
}

.ph-hero--intro-pending.is-intro-ready .ph-title3d__line:nth-child(3)[b-ljrijbno3o] {
    animation-delay: 300ms;
}

.ph-hero--intro-pending.is-intro-ready .ph-lede[b-ljrijbno3o] {
    animation: ph-hero-copy-in-b-ljrijbno3o 420ms cubic-bezier(0.22, 0.78, 0.24, 1) 820ms both;
}

.ph-hero--intro-pending.is-intro-ready .ph-cta-row[b-ljrijbno3o] {
    animation: ph-hero-copy-in-b-ljrijbno3o 420ms cubic-bezier(0.22, 0.78, 0.24, 1) 1s both;
}

@keyframes ph-hero-title-in-b-ljrijbno3o {
    from {
        opacity: 0;
        transform: translate3d(0, 0.7em, 0) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes ph-hero-copy-in-b-ljrijbno3o {
    from {
        opacity: 0;
        transform: translate3d(0, 0.8rem, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.ph-title3d__line + .ph-title3d__line[b-ljrijbno3o] {
    margin-top: 0.75em;
}

.ph-title3d__word[b-ljrijbno3o] {
    display: inline-block;
    white-space: nowrap;
}

.ph-title3d__word + .ph-title3d__word[b-ljrijbno3o] {
    margin-left: 1.1em;
}

.ph-title3d__letter[b-ljrijbno3o] {
    animation: ph-title3d-bob-b-ljrijbno3o 2.6s steps(4, end) infinite;
    animation-delay: calc(var(--i) * 120ms);
    color: #FFFDF9;
    display: inline-block;
    text-shadow:
        -2px -2px 0 #0B0806,
        0 -2px 0 #0B0806,
        2px -2px 0 #0B0806,
        -2px 0 0 #0B0806,
        -2px 2px 0 #0B0806,
        2px 2px 0 #2A1C11,
        4px 4px 0 #2A1C11,
        6px 6px 0 #241810,
        8px 8px 0 #1A110A,
        10px 10px 0 #0B0806;
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .ph-title3d__letter:hover[b-ljrijbno3o] {
        animation: none;
        transform: translate(-2px, -4px);
    }
}

@keyframes ph-title3d-bob-b-ljrijbno3o {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -0.22em, 0); }
}

.ph-lede[b-ljrijbno3o] {
    color: rgba(244, 239, 230, 0.85);
    font-family: var(--crypto-mono);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 34rem;
}

.ph-cta-row[b-ljrijbno3o] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: clamp(1.25rem, 3vh, 1.75rem);
    position: relative;
    z-index: 2;
}

/* Clipped pixel CTA — kimi_ui §2.1 recipe. */
.ph-cta[b-ljrijbno3o] {
    align-items: center;
    background: var(--stake-ink);
    border: 0;
    border-radius: 0;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, 100% 3px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) 100%, 6px 100%, 6px calc(100% - 3px), 0 calc(100% - 3px), 0 6px, 3px 6px, 3px 3px, 6px 3px);
    color: var(--stake-bg-deep);
    cursor: pointer;
    display: inline-flex;
    filter: drop-shadow(5px 5px 0 var(--stake-copper));
    font-family: var(--crypto-mono);
    font-size: 0.72rem;
    font-weight: 800;
    justify-content: center;
    letter-spacing: 0.12em;
    min-height: 3.15rem;
    padding-inline: 2.25rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 160ms ease, color 160ms ease, filter 160ms ease, transform 160ms ease-out;
}

.ph-cta--ghost[b-ljrijbno3o] {
    background: var(--stake-amber);
    color: var(--stake-bg-deep);
    filter: drop-shadow(7px 7px 0 var(--stake-copper));
}

.ph-cta:hover[b-ljrijbno3o] {
    background: var(--stake-amber);
    color: var(--stake-bg-deep);
    filter: drop-shadow(7px 7px 0 var(--stake-copper));
    transform: translate(-2px, -2px);
}

.ph-cta:focus-visible[b-ljrijbno3o] {
    outline: 2px dashed var(--stake-green);
    outline-offset: 4px;
}

.ph-cta:active[b-ljrijbno3o] {
    filter: drop-shadow(2px 2px 0 var(--stake-copper));
    transform: scale(0.97);
}

/* Courier: brisk 4-step gait — dips on each footfall, lifts between steps.
   Only the feature-panel glyph still uses this role sprite now. */
@keyframes ph-courier-walk-b-ljrijbno3o {
    0%, 24%   { background-position: 0 0;       transform: translate3d(0, 0, 0); }
    25%, 49%  { background-position: 33.333% 0; transform: translate3d(1px, -1px, 0); }
    50%, 74%  { background-position: 66.667% 0; transform: translate3d(0, 0, 0); }
    75%, 100% { background-position: 100% 0;    transform: translate3d(1px, -1px, 0); }
}

/* ── Feature panels ── */
.ph-panels[b-ljrijbno3o] {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 64rem;
    margin-top: clamp(-6rem, -8vh, -3rem);
    padding: clamp(1rem, 2vh, 1.5rem) clamp(1.25rem, 4vw, 3.5rem) 3.5rem;
    position: relative;
    z-index: 1;
}

.ph-panel[b-ljrijbno3o] {
    background: var(--stake-surface);
    border: 2px solid var(--stake-line-strong);
    padding: 1.75rem 1.75rem 2rem;
    position: relative;
}

.ph-panel + .ph-panel[b-ljrijbno3o] {
    border-left-width: 0;
}

/* Hard pixel corner detail: stepped blocks in the top-left and bottom-right. */
.ph-panel[b-ljrijbno3o]::before,
.ph-panel[b-ljrijbno3o]::after {
    content: "";
    height: 4px;
    position: absolute;
    width: 4px;
}

.ph-panel[b-ljrijbno3o]::before {
    box-shadow: 4px 0 0 var(--stake-copper), 0 4px 0 var(--stake-copper), 8px 8px 0 0 var(--stake-copper);
    left: 8px;
    top: 8px;
}

.ph-panel[b-ljrijbno3o]::after {
    bottom: 8px;
    box-shadow: -4px 0 0 var(--stake-line-strong), 0 -4px 0 var(--stake-line-strong);
    right: 8px;
}

.ph-panel__glyph[b-ljrijbno3o] {
    display: grid;
    height: 4.5rem;
    place-items: center;
}

.ph-panel__coin[b-ljrijbno3o] {
    animation: ph-panel-coin-spin-b-ljrijbno3o 3.2s linear infinite;
    height: 4rem;
    image-rendering: pixelated;
    width: 4rem;
}

@keyframes ph-panel-coin-spin-b-ljrijbno3o {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

.ph-panel__robot[b-ljrijbno3o] {
    animation: ph-courier-walk-b-ljrijbno3o 1.05s steps(1, end) infinite;
    aspect-ratio: 1;
    background-image: url("images/pl-robot-courier.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 400% 100%;
    display: block;
    height: 4.5rem;
    image-rendering: pixelated;
}

.ph-panel__label[b-ljrijbno3o] {
    color: var(--stake-ink);
    font-family: var(--crypto-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0.9rem 0 0.4rem;
    text-transform: uppercase;
}

.ph-panel__title[b-ljrijbno3o] {
    color: var(--stake-ink);
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 500;
    margin: 0 0 0.6rem;
}

.ph-panel__copy[b-ljrijbno3o] {
    color: var(--stake-muted);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0 0 1.1rem;
}

.ph-panel__link[b-ljrijbno3o] {
    color: var(--stake-amber);
    font-family: var(--crypto-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.ph-panel__link:hover[b-ljrijbno3o] {
    color: var(--stake-ink);
}

.ph-panel__link:focus-visible[b-ljrijbno3o] {
    outline: 2px dashed var(--stake-green);
    outline-offset: 4px;
}

/* ── Footer strip ── */
.ph-footer[b-ljrijbno3o] {
    padding: 0 clamp(1.25rem, 4vw, 3.5rem) 2.5rem;
    position: relative;
    text-align: center;
    z-index: 1;
}

.ph-footer p[b-ljrijbno3o] {
    color: var(--stake-faint);
    font-family: var(--crypto-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0;
    text-transform: uppercase;
}

/* ── Mobile: one-column CTAs and tighter corner chrome. Scene-element
   reflows (dropped floaters, repositioned coins and Andromeda) live with the
   scene itself in GlobalScene.razor.css. ── */
@media (max-width: 700px) {
    .ph-copy-toggle[b-ljrijbno3o] {
        top: calc(4.75rem + 1rem);
    }

    /* One column: the switcher shares the row with the intro toggle, so it
       loses its prose stat line and tightens up to fit beside it. */
    .ph-brain[b-ljrijbno3o] {
        top: calc(4.75rem + 1rem);
    }

    .ph-brain__stat[b-ljrijbno3o] {
        display: none;
    }

    .ph-brain__option[b-ljrijbno3o] {
        font-size: 0.52rem;
        letter-spacing: 0.06em;
        padding: 0.35rem 0.4rem;
    }

    .ph-cta-row[b-ljrijbno3o] {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.6rem;
    }

    .ph-cta[b-ljrijbno3o] {
        flex: 1 1 0;
        min-width: 0;
        font-size: 0.62rem;
        padding-inline: 1rem;
        min-height: 2.75rem;
    }

    .ph-panels[b-ljrijbno3o] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ph-panel + .ph-panel[b-ljrijbno3o] {
        border-left-width: 2px;
        border-top-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ph-panel__coin[b-ljrijbno3o],
    .ph-panel__robot[b-ljrijbno3o],
    .ph-title3d__letter[b-ljrijbno3o] {
        animation: none;
    }

    .ph-hero--intro-pending .ph-title3d__line[b-ljrijbno3o],
    .ph-hero--intro-pending .ph-lede[b-ljrijbno3o],
    .ph-hero--intro-pending .ph-cta-row[b-ljrijbno3o] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
/* /Components/Home/ProductDiscovery.razor.rz.scp.css */
.pd-section[b-9t0jf21onc] {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    margin: 0 auto;
    max-width: 64rem;
    min-height: 100dvh;
    padding: clamp(1.5rem, 5vh, 4rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vh, 2rem);
    position: relative;
    z-index: 2;
}

.pd-shell[b-9t0jf21onc] {
    background-color: var(--stake-surface);
    border: 2px solid var(--stake-line-strong);
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    overflow: hidden;
    position: relative;
}

.pd-shell[b-9t0jf21onc]::before,
.pd-shell[b-9t0jf21onc]::after {
    content: "";
    height: 4px;
    position: absolute;
    width: 4px;
    z-index: 5;
}

.pd-shell[b-9t0jf21onc]::before {
    box-shadow: 4px 0 0 var(--stake-copper), 0 4px 0 var(--stake-copper), 8px 8px 0 0 var(--stake-copper);
    left: 8px;
    top: 8px;
}

.pd-shell[b-9t0jf21onc]::after {
    bottom: 8px;
    box-shadow: -4px 0 0 var(--stake-line-strong), 0 -4px 0 var(--stake-line-strong);
    right: 8px;
}

.pd-kicker[b-9t0jf21onc] {
    color: var(--stake-ink);
    font-family: var(--crypto-mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin: 0;
    text-transform: uppercase;
}

.pd-robot-column[b-9t0jf21onc] {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    min-width: 0;
    overflow: hidden;
    padding: 1.5rem 1.25rem;
    position: relative;
}

.pd-thoughts[b-9t0jf21onc] {
    height: 5.75rem;
    position: relative;
    width: min(100%, 15rem);
    z-index: 2;
}

.pd-thought[b-9t0jf21onc] {
    animation: pd-thought-cycle-b-9t0jf21onc 10.5s infinite both;
    background: #f4efe6;
    box-shadow:
        3px 0 0 #100d0b,
        -3px 0 0 #100d0b,
        0 3px 0 #100d0b,
        0 -3px 0 #100d0b;
    color: #281a13;
    font-family: var(--crypto-mono);
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.5rem;
    position: absolute;
    white-space: nowrap;
    will-change: opacity, transform;
    opacity: 0;
    transform: translateY(4px);
    visibility: hidden;
}

.pd-thought[b-9t0jf21onc]::after {
    background: #f4efe6;
    bottom: -9px;
    box-shadow: 3px 3px 0 #100d0b;
    content: "";
    height: 5px;
    position: absolute;
    width: 5px;
}

.pd-thought--one[b-9t0jf21onc] {
    animation-delay: 0s;
    left: 2%;
    top: 0;
}

.pd-thought--one[b-9t0jf21onc]::after {
    right: 10px;
}

.pd-thought--two[b-9t0jf21onc] {
    animation-delay: -3.5s;
    right: 0%;
    top: 1.9rem;
}

.pd-thought--two[b-9t0jf21onc]::after {
    left: 14px;
}

.pd-thought--three[b-9t0jf21onc] {
    animation-delay: -7s;
    left: 14%;
    top: 3.8rem;
}

/* Each bubble owns a 3.5s slot: 2.5s on-screen, followed by a 1s pause. */
@keyframes pd-thought-cycle-b-9t0jf21onc {
    0% {
        opacity: 0;
        transform: translateY(4px);
        visibility: hidden;
    }

    1.7%,
    22.1% {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

    23.8% {
        opacity: 0;
        transform: translateY(-3px);
        visibility: visible;
    }

    25.5% {
        opacity: 0;
        transform: translateY(-3px);
        visibility: hidden;
    }

    100% {
        opacity: 0;
        transform: translateY(-3px);
        visibility: hidden;
    }
}

.pd-thought--three[b-9t0jf21onc]::after {
    right: 16px;
}

.pd-scene[b-9t0jf21onc] {
    margin: 0 auto;
    position: relative;
    width: min(65%, 10rem);
    z-index: 1;
}

.pd-scene img[b-9t0jf21onc] {
    display: block;
    image-rendering: pixelated;
    width: 100%;
}

.pd-scene-caption[b-9t0jf21onc] {
    display: none;
}

.pd-scene-caption span[b-9t0jf21onc] {
    animation: pd-working-b-9t0jf21onc 1.2s steps(3, end) infinite;
    color: #e4b665;
    letter-spacing: 0.2em;
}

@keyframes pd-working-b-9t0jf21onc {
    0% { clip-path: inset(0 70% 0 0); }
    50% { clip-path: inset(0 35% 0 0); }
    100% { clip-path: inset(0); }
}

.pd-content-column[b-9t0jf21onc] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 1.75rem 2rem;
}

.pd-heading h2[b-9t0jf21onc] {
    color: #f4efe6;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0;
    max-width: 32rem;
}

.pd-copy[b-9t0jf21onc] {
    color: #bda99b;
    display: -webkit-box;
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 0.7rem 0 0.9rem;
    max-width: 44rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pd-catalog[b-9t0jf21onc] {
    background: #eee9df;
    border: 2px solid #100d0b;
    box-shadow: 3px 3px 0 #100d0b;
    margin-top: 0.4rem;
    overflow: hidden;
}

.pd-catalog__chrome[b-9t0jf21onc] {
    align-items: center;
    background: #ded6c9;
    border-bottom: 2px solid #100d0b;
    color: #62564d;
    display: grid;
    font-family: var(--crypto-mono);
    font-size: 0.5rem;
    grid-template-columns: 1fr auto 1fr;
    letter-spacing: 0.08em;
    min-height: 1.5rem;
    padding: 0 0.65rem;
}

.pd-catalog__lights[b-9t0jf21onc] {
    display: flex;
    gap: 4px;
}

.pd-catalog__lights i[b-9t0jf21onc] {
    background: #c55a42;
    height: 6px;
    width: 6px;
}

.pd-catalog__lights i:nth-child(2)[b-9t0jf21onc] {
    background: #e4b665;
}

.pd-catalog__lights i:nth-child(3)[b-9t0jf21onc] {
    background: #7ca58a;
}

.pd-catalog__signal[b-9t0jf21onc] {
    color: #7ca58a;
    justify-self: end;
}

.pd-catalog__toolbar[b-9t0jf21onc] {
    display: none;
}

.pd-catalog__tabs[b-9t0jf21onc] {
    display: flex;
    gap: 0.8rem;
}

.pd-catalog__tabs span[b-9t0jf21onc] {
    padding-bottom: 3px;
}

.pd-catalog__tabs .is-active[b-9t0jf21onc] {
    border-bottom: 2px solid #b8532e;
    color: #1d1916;
    font-weight: 900;
}

.pd-catalog__filter[b-9t0jf21onc] {
    color: #1d1916;
    font-weight: 900;
}

.pd-products[b-9t0jf21onc] {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0.4rem;
}

.pd-product[b-9t0jf21onc] {
    background: #fbfaf7;
    box-shadow: 2px 2px 0 rgba(77, 59, 45, 0.18);
    color: #1d1916;
    min-width: 0;
    padding: 0.3rem;
}

.pd-product__image[b-9t0jf21onc] {
    aspect-ratio: 16 / 6;
    background: #e5ded3;
    overflow: hidden;
    position: relative;
}

.pd-product__image img[b-9t0jf21onc] {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.pd-product__image span[b-9t0jf21onc] {
    align-items: center;
    background: #fbfaf7;
    display: flex;
    font-family: Arial, sans-serif;
    font-size: 0.7rem;
    height: 1rem;
    justify-content: center;
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    width: 1rem;
}

.pd-product p[b-9t0jf21onc] {
    display: none;
}

.pd-product h3[b-9t0jf21onc] {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0.3rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-product__meta[b-9t0jf21onc] {
    display: none;
}

.pd-product__meta b[b-9t0jf21onc] {
    font-size: 0.68rem;
}

.pd-product__meta span[b-9t0jf21onc] {
    color: #d97827;
    font-family: Arial, sans-serif;
    font-size: 0.45rem;
    letter-spacing: -1px;
    white-space: nowrap;
}

.pd-product__meta i[b-9t0jf21onc] {
    color: #d8d0c5;
    font-style: normal;
}

.pd-link[b-9t0jf21onc] {
    color: #e4b665;
    display: inline-flex;
    font-family: var(--crypto-mono);
    font-size: 0.66rem;
    font-weight: 900;
    gap: 0.75rem;
    letter-spacing: 0.12em;
    margin-top: 0.6rem;
    text-decoration: none;
}

.pd-link span[b-9t0jf21onc] {
    transition: transform 160ms steps(2, end);
}

.pd-link:hover[b-9t0jf21onc] {
    color: #f4efe6;
}

.pd-link:hover span[b-9t0jf21onc] {
    transform: translateX(4px);
}

.pd-link:focus-visible[b-9t0jf21onc] {
    outline: 2px dashed #9bc6a8;
    outline-offset: 5px;
}

@media (max-width: 980px) {
    .pd-shell[b-9t0jf21onc] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-robot-column[b-9t0jf21onc] {
        border-bottom: 0;
        border-right: 0;
    }
}

@media (max-width: 620px) {
    .pd-section[b-9t0jf21onc] {
        padding-inline: 1rem;
    }

    .pd-robot-column[b-9t0jf21onc] {
        padding-inline: 0.75rem;
    }

    .pd-content-column[b-9t0jf21onc] {
        padding: 1.75rem 1rem 2rem;
    }

    .pd-catalog__address[b-9t0jf21onc],
    .pd-catalog__tabs span:nth-child(n + 3)[b-9t0jf21onc] {
        display: none;
    }

    .pd-catalog__chrome[b-9t0jf21onc] {
        grid-template-columns: 1fr 1fr;
    }

    .pd-catalog__signal[b-9t0jf21onc] {
        grid-column: 2;
    }

    .pd-products[b-9t0jf21onc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-product--third[b-9t0jf21onc] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-scene-caption span[b-9t0jf21onc] {
        animation: none;
    }

    .pd-thought[b-9t0jf21onc] {
        animation: none;
    }

    .pd-thought--one[b-9t0jf21onc] {
        opacity: 1;
        transform: none;
        visibility: visible;
    }
}
/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-layout[b-hm2rsgjwvv] {
    /* #f4f1eb is close to but not exactly var(--surface-deep) (#f2eee5) — kept
       literal rather than forced to match, to avoid a (tiny) visual shift. */
    background: #f4f1eb;
    color: var(--charcoal);
    display: grid;
    min-height: 100vh;
}

.admin-sidebar[b-hm2rsgjwvv] {
    background: var(--charcoal);
    color: var(--surface);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.admin-brand[b-hm2rsgjwvv] {
    color: var(--surface);
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    text-decoration: none;
}

.admin-sidebar__menu[b-hm2rsgjwvv] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

[b-hm2rsgjwvv] .admin-menu-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(251, 249, 244, 0.14);
    color: rgba(251, 249, 244, 0.72);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    box-sizing: border-box;
    padding: 0.25rem 1rem;
    min-height: 2.25rem;
}

[b-hm2rsgjwvv] .admin-menu-item:first-child {
    border-top: 1px solid rgba(251, 249, 244, 0.14);
}

[b-hm2rsgjwvv] .admin-menu-item:hover,
[b-hm2rsgjwvv] .admin-menu-item.active {
    background: rgba(251, 249, 244, 0.1);
    color: var(--surface);
}

[b-hm2rsgjwvv] .admin-logout-form {
    display: flex;
    padding: 0;
    margin-top: auto;
}

[b-hm2rsgjwvv] .admin-logout-form button {
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    display: flex;
    align-items: center;
}

.admin-main[b-hm2rsgjwvv] {
    padding: clamp(1.5rem, 4vw, 4rem);
}

.admin-main--unauthorized[b-hm2rsgjwvv] {
    display: grid;
    gap: 1rem;
    margin: 0 auto;
    max-width: 44rem;
    min-height: 70vh;
    place-content: center;
}

@media (min-width: 800px) {
    .admin-layout[b-hm2rsgjwvv] {
        grid-template-columns: 280px 1fr;
    }

    .admin-sidebar[b-hm2rsgjwvv] {
        height: 100vh;
        position: sticky;
        top: 0;
        box-sizing: border-box;
    }
}
/* /Components/Layout/GlobalScene.razor.rz.scp.css */
/* Global pixel-space background scenario. Lives in the "dark roast wing": the
   --stake-* tokens come from app.css's ".yield-page, .procurement-lab" block
   (StakingLayout wraps this component in .yield-page). Tokens are referenced
   as var(--stake-x) directly throughout — nested custom-property aliasing does
   not resolve reliably in this project. All motion is stepped and collapses to
   a still composition under prefers-reduced-motion. Scene technique follows
   docs/kimi_ui.md §2–§5.

   LAYERING: .gs-scene stacks BELOW the page content (main) — it is the sky
   itself. .gs-crew sits between the sky and the content: above the stars,
   badges, mugs and coins so the robots read as roaming the scene, but below
   main so headings, copy and buttons never get walked over. The robots stay
   draggable anyway — main's pointer-events only claim the pixels its own
   elements actually occupy, and the crew roams the empty space around them.
   Both are data-permanent, so enhanced navigation keeps these exact nodes
   and no keyframe restarts on a route switch. app.css changes their geometry
   on the home route: a 200dvh scrolling sky and a 100dvh clipped crew field.

   VISIBILITY: which .gs-layer shows is selected by the data-scene-route
   attribute on <html> (rendered by App.razor); the selectors live in app.css
   because scoped CSS cannot match the <html> element. This stylesheet owns
   the hidden defaults and both halfs' transitions so fading out (design
   leaving) and fading in (design arriving) cross over the preserved base. */

.gs-scene[b-2iw73ofvn0],
.gs-crew[b-2iw73ofvn0] {
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* Below everything else; the layout's own flat --stake-bg-deep ground paints
   underneath. */
.gs-scene[b-2iw73ofvn0] {
    z-index: 0;
}

/* Above the sky, below the page content (main is z-index: 2 in
   StakingLayout.razor.css) and the fixed header (z-index: 1000) — text,
   buttons and labels always paint over the robots, never the other way
   around. */
.gs-crew[b-2iw73ofvn0] {
    z-index: 1;
}

/* Scenario 0 (defaults): the scene always sits on the staking wing's
   --stake-bg-deep; scenarios only swap which --stake-* accents glow (glows
   are literals of the stake palette to avoid nested var aliasing) and where
   the home layer's coins lie / the crew roams. */
.gs-scene[b-2iw73ofvn0] {
    --hero-glow-a: rgba(200, 155, 106, 0.11);
    --hero-glow-b: rgba(143, 185, 155, 0.08);
    --scout-roam-x: 10vw;
    --scout-roam-y: -26vh;
    --buyer-roam-x: 6vw;
    --buyer-roam-y: 18vh;
    --courier-roam-x: -6vw;
    --courier-roam-y: -6vh;
    --inspector-roam-x: -8vw;
    --inspector-roam-y: 26vh;
    --ambient-a-x: 10%;
    --ambient-a-y: 18%;
    --ambient-b-x: 90%;
    --ambient-b-y: 62%;
    --ambient-c-x: 30%;
    --ambient-c-y: 90%;

    background:
        radial-gradient(ellipse 62% 52% at 18% 14%, var(--hero-glow-a), transparent 70%),
        radial-gradient(ellipse 55% 48% at 82% 72%, var(--hero-glow-b), transparent 70%);
}

/* ── Scenarios 1–4: same staking base color, different accent glows and a
   different coin layout each, so every fresh load lands on a different sky. */
.gs-scene--bg-1[b-2iw73ofvn0] {
    --hero-glow-a: rgba(143, 185, 155, 0.12);
    --hero-glow-b: rgba(200, 155, 106, 0.07);
    --scout-roam-x: 8vw;
    --scout-roam-y: 24vh;
    --buyer-roam-x: 4vw;
    --buyer-roam-y: -22vh;
    --courier-roam-x: -9vw;
    --courier-roam-y: 6vh;
    --inspector-roam-x: -5vw;
    --inspector-roam-y: -16vh;
    --ambient-a-x: 92%;
    --ambient-a-y: 14%;
    --ambient-b-x: 8%;
    --ambient-b-y: 54%;
    --ambient-c-x: 74%;
    --ambient-c-y: 88%;
}

.gs-scene--bg-2[b-2iw73ofvn0] {
    --hero-glow-a: rgba(229, 192, 120, 0.11);
    --hero-glow-b: rgba(229, 152, 128, 0.07);
    --scout-roam-x: 12vw;
    --scout-roam-y: -20vh;
    --buyer-roam-x: 8vw;
    --buyer-roam-y: 16vh;
    --courier-roam-x: -4vw;
    --courier-roam-y: 10vh;
    --inspector-roam-x: -10vw;
    --inspector-roam-y: -24vh;
    --ambient-a-x: 16%;
    --ambient-a-y: 80%;
    --ambient-b-x: 88%;
    --ambient-b-y: 20%;
    --ambient-c-x: 34%;
    --ambient-c-y: 8%;
}

.gs-scene--bg-3[b-2iw73ofvn0] {
    --hero-glow-a: rgba(229, 152, 128, 0.10);
    --hero-glow-b: rgba(200, 155, 106, 0.09);
    --scout-roam-x: 6vw;
    --scout-roam-y: 28vh;
    --buyer-roam-x: 10vw;
    --buyer-roam-y: 14vh;
    --courier-roam-x: -11vw;
    --courier-roam-y: -4vh;
    --inspector-roam-x: -6vw;
    --inspector-roam-y: 20vh;
    --ambient-a-x: 94%;
    --ambient-a-y: 36%;
    --ambient-b-x: 6%;
    --ambient-b-y: 88%;
    --ambient-c-x: 70%;
    --ambient-c-y: 10%;
}

.gs-scene--bg-4[b-2iw73ofvn0] {
    --hero-glow-a: rgba(200, 155, 106, 0.08);
    --hero-glow-b: rgba(229, 192, 120, 0.09);
    --scout-roam-x: 14vw;
    --scout-roam-y: -24vh;
    --buyer-roam-x: 5vw;
    --buyer-roam-y: 20vh;
    --courier-roam-x: -8vw;
    --courier-roam-y: -8vh;
    --inspector-roam-x: -12vw;
    --inspector-roam-y: 22vh;
    --ambient-a-x: 20%;
    --ambient-a-y: 26%;
    --ambient-b-x: 86%;
    --ambient-b-y: 84%;
    --ambient-c-x: 96%;
    --ambient-c-y: 12%;
}

.gs-scene img[b-2iw73ofvn0] {
    image-rendering: pixelated;
}

/* ── Route layers: hidden by default, faded in by app.css's
   data-scene-route selectors. The outgoing layer fades over the preserved
   base while the incoming one fades in one beat later; visibility is
   toggled on the same transition so hidden layers never catch pointer input
   (relevant for the robots' pointer-events: auto in .gs-crew). ── */
.gs-layer[b-2iw73ofvn0] {
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 0.55s ease, visibility 0s linear 0.55s;
    visibility: hidden;
}

/* Smooth, roomy bob for the inert props — chain badges and coffee bags. The
   crew no longer uses this: robots are simulated bodies and drift on the
   integrated `ph-unit-drift-*` orbits instead (see the block above
   .ph-scene__unit). Scenery has no engine to justify the difference, and the
   sine keeps it quietly in the background where it belongs. */
@keyframes ph-unit-float-b-2iw73ofvn0 {
    from { transform: translate3d(0, -9px, 0); }
    to { transform: translate3d(0, 13px, 0); }
}

/* Andromeda: the deepest thing in the scene. z-index 0 puts it behind the
   stars, chains, coins and crew (all z-index 1), and the low opacity plus the
   very slow drift keep it reading as distance rather than as another prop.
   Sprite is generated by tools/generate_andromeda.py. */
.ph-sky__andromeda[b-2iw73ofvn0] {
    animation: ph-drift-b-2iw73ofvn0 74s steps(8, end) -20s infinite alternate;
    height: auto;
    opacity: 0.45;
    position: absolute;
    right: 3%;
    top: 60%;
    width: clamp(10rem, 18vw, 16rem);
    z-index: 0;
}

/* Planets drifting slowly in stepped hops. */
.ph-sky__planet[b-2iw73ofvn0] {
    animation: ph-drift-b-2iw73ofvn0 32s steps(6, end) infinite alternate;
    left: 2.5%;
    opacity: 0.8;
    position: absolute;
    top: 16%;
    width: 4.5rem;
}

.ph-sky__planet--ringed[b-2iw73ofvn0] {
    animation-duration: 38s;
    animation-delay: -12s;
    left: auto;
    opacity: 0.75;
    right: 2.5%;
    top: 10%;
    transform: rotate(-8deg);
    width: 6rem;
}

@keyframes ph-drift-b-2iw73ofvn0 {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(18px, 10px, 0); }
}

/* Robots floating dispersed through the space. A roam wrapper holds each
   robot's home spot, then on a long loop drifts it over to its coin, dwells
   there while the coin pops away (autocollect), and floats home. The unit
   inside keeps the quick bob. Each robot has its own keyframes reading its
   own scenario vector straight off .gs-scene (--<role>-roam-*) — no nested
   var aliasing — so a scenario change moves both the destination and, via the
   same variables, the loot coin pinned to it. */
.ph-scene__roam[b-2iw73ofvn0] {
    animation-duration: var(--roam-duration, 48s);
    animation-timing-function: ease-in-out;
    animation-delay: var(--roam-delay, 0s);
    animation-iteration-count: infinite;
    cursor: grab;
    pointer-events: auto;
    position: absolute;
    touch-action: none;
    z-index: 1;
}

/* The permanent scene paints before the page's interactive runtime is ready.
   Keep the crew concealed until the runtime has written its real simulated
   positions, otherwise the fallback anchors flash first and the robots appear
   to jump to a second starting formation a moment later. The unit is the
   reveal surface because the runtime owns the wrapper's transform. */
.gs-crew--intro-pending .ph-scene__unit[b-2iw73ofvn0],
.gs-crew--intro-active .ph-scene__roam:not(.is-intro-visible) .ph-scene__unit[b-2iw73ofvn0] {
    opacity: 0;
    scale: 0.55;
}

.gs-crew--intro-active .ph-scene__unit[b-2iw73ofvn0] {
    transition:
        opacity 180ms steps(3, end) var(--robot-intro-delay, 100ms),
        scale 440ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--robot-intro-delay, 100ms);
}

.gs-crew--intro-active .ph-scene__roam.is-intro-visible .ph-scene__unit[b-2iw73ofvn0] {
    opacity: 1;
    scale: 1;
}

.ph-scene__roam--scout[b-2iw73ofvn0] {
    --robot-intro-delay: 100ms;
}

.ph-scene__roam--buyer[b-2iw73ofvn0] {
    --robot-intro-delay: 250ms;
}

.ph-scene__roam--courier[b-2iw73ofvn0] {
    --robot-intro-delay: 400ms;
}

.ph-scene__roam--inspector[b-2iw73ofvn0] {
    --robot-intro-delay: 550ms;
}

/* While held, the crew runtime owns the robot's simulated position and takes
   no policy action for it; on drop the policy resumes from wherever it was
   left. (In the no-JS fallback below this class is simply never applied.) */
.ph-scene__roam--held[b-2iw73ofvn0] {
    cursor: grabbing;
    z-index: 4;
}

/* Bumped to (0,2,0) so `animation: none` wins over the per-role
   `animation-name` rules below, which sit later in the file. */
.ph-scene__roam.ph-scene__roam--held[b-2iw73ofvn0],
.ph-scene__roam.ph-scene__roam--held .ph-scene__unit[b-2iw73ofvn0],
.ph-scene__roam.ph-scene__roam--held .ph-scene__actor[b-2iw73ofvn0],
.ph-scene__roam.ph-scene__roam--held .ph-scene__jetflame[b-2iw73ofvn0],
.ph-scene__roam.ph-scene__roam--held .ph-scene__grab[b-2iw73ofvn0],
.ph-scene__roam.ph-scene__roam--held .ph-scene__sip[b-2iw73ofvn0],
.ph-scene__roam.ph-scene__roam--held .ph-scene__plus[b-2iw73ofvn0] {
    animation: none;
}

@keyframes ph-roam-scout-b-2iw73ofvn0 {
    0%, 38% { transform: translate3d(0, 0, 0); }
    54%, 80% { transform: translate3d(var(--scout-roam-x), var(--scout-roam-y), 0); }
    96%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes ph-roam-buyer-b-2iw73ofvn0 {
    0%, 38% { transform: translate3d(0, 0, 0); }
    54%, 80% { transform: translate3d(var(--buyer-roam-x), var(--buyer-roam-y), 0); }
    96%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes ph-roam-courier-b-2iw73ofvn0 {
    0%, 38% { transform: translate3d(0, 0, 0); }
    54%, 80% { transform: translate3d(var(--courier-roam-x), var(--courier-roam-y), 0); }
    96%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes ph-roam-inspector-b-2iw73ofvn0 {
    0%, 38% { transform: translate3d(0, 0, 0); }
    54%, 80% { transform: translate3d(var(--inspector-roam-x), var(--inspector-roam-y), 0); }
    96%, 100% { transform: translate3d(0, 0, 0); }
}

/* ── Idle drift: free-body motion in vacuum, not a bob. ───────────────────────
   The crew used to share `ph-unit-float` with the coins and bags — a Y-only
   sine on `alternate`. Three things in that read as weight: the motion had a
   "down", it slowed to a stop at both ends (something was pulling it back),
   and `alternate` ran the return leg with time flowing backwards. None of
   those survive in a vacuum, which is the environment the robots are in.

   These orbits are integrated from the scene's own dynamics rather than
   drawn by hand — v' = -0.7v + a(t) with DRAG lifted from pixelCrewSim.js's
   PARAMS, and a(t) a piecewise-constant thrust held for the lit window of the
   2.3s jetflame duty cycle below. No spring term, no gravity term, so every
   direction change is paid for by a burn. The burn vectors sum to zero, which
   is what makes the orbit close on itself.

   Generated by tools/generate_crew_drift.py — regenerate rather than hand-edit
   if PARAMS.drag or the jetflame duty cycle changes, or the path stops
   matching the physics it claims to come from.

   Two properties here are load-bearing. `linear` is mandatory: any easing
   reintegrates an acceleration the drag model already accounted for, and the
   momentum is in the sampled spacing. And the direction stays `normal` —
   `alternate` is the time-reversal that gave the old bob away. ── */
@keyframes ph-unit-drift-scout-b-2iw73ofvn0 {
    0% { translate: -8.92px -6.15px; rotate: 0.45deg; }
    5% { translate: -7.43px -7.75px; rotate: 2.23deg; }
    10% { translate: -4.32px -8.51px; rotate: 3.17deg; }
    15% { translate: -0.34px -8.76px; rotate: 2.71deg; }
    20% { translate: 2.65px -8.88px; rotate: 1.43deg; }
    25% { translate: 4.97px -7.96px; rotate: 1.31deg; }
    30% { translate: 7.10px -5.51px; rotate: 1.25deg; }
    35% { translate: 9.06px -2.21px; rotate: 0.95deg; }
    40% { translate: 10.46px 0.29px; rotate: 0.50deg; }
    45% { translate: 10.49px 2.52px; rotate: -1.34deg; }
    50% { translate: 8.82px 5.05px; rotate: -2.31deg; }
    55% { translate: 6.19px 7.68px; rotate: -2.06deg; }
    60% { translate: 4.14px 9.62px; rotate: -1.09deg; }
    65% { translate: 1.81px 10.11px; rotate: -2.28deg; }
    70% { translate: -1.55px 8.94px; rotate: -2.91deg; }
    75% { translate: -5.43px 6.78px; rotate: -2.44deg; }
    80% { translate: -8.32px 5.10px; rotate: -1.29deg; }
    85% { translate: -9.82px 3.09px; rotate: 0.08deg; }
    90% { translate: -10.02px 0.07px; rotate: 0.80deg; }
    95% { translate: -9.43px -3.48px; rotate: 0.82deg; }
    100% { translate: -8.92px -6.15px; rotate: 0.45deg; }
}

@keyframes ph-unit-drift-buyer-b-2iw73ofvn0 {
    0% { translate: -7.03px -4.37px; rotate: 0.68deg; }
    5% { translate: -5.06px -5.98px; rotate: 1.87deg; }
    10% { translate: -1.91px -7.17px; rotate: 2.42deg; }
    15% { translate: 1.25px -8.04px; rotate: 1.31deg; }
    20% { translate: 3.48px -8.20px; rotate: 1.24deg; }
    25% { translate: 5.89px -6.91px; rotate: 1.42deg; }
    30% { translate: 8.27px -4.89px; rotate: 1.01deg; }
    35% { translate: 9.81px -3.36px; rotate: 0.17deg; }
    40% { translate: 10.03px -1.01px; rotate: -0.62deg; }
    45% { translate: 9.31px 2.15px; rotate: -0.83deg; }
    50% { translate: 8.59px 4.65px; rotate: -0.40deg; }
    55% { translate: 6.59px 6.20px; rotate: -2.45deg; }
    60% { translate: 2.50px 7.19px; rotate: -3.40deg; }
    65% { translate: -1.76px 7.83px; rotate: -1.85deg; }
    70% { translate: -4.62px 7.88px; rotate: -1.29deg; }
    75% { translate: -7.05px 6.67px; rotate: -1.17deg; }
    80% { translate: -9.18px 4.79px; rotate: -0.78deg; }
    85% { translate: -10.47px 3.38px; rotate: 0.11deg; }
    90% { translate: -10.11px 1.13px; rotate: 1.19deg; }
    95% { translate: -8.49px -1.93px; rotate: 1.44deg; }
    100% { translate: -7.03px -4.37px; rotate: 0.68deg; }
}

@keyframes ph-unit-drift-courier-b-2iw73ofvn0 {
    0% { translate: -9.35px -3.50px; rotate: 0.13deg; }
    5% { translate: -8.51px -5.36px; rotate: 1.45deg; }
    10% { translate: -6.14px -6.56px; rotate: 2.26deg; }
    15% { translate: -2.69px -7.24px; rotate: 2.74deg; }
    20% { translate: 1.02px -7.61px; rotate: 1.93deg; }
    25% { translate: 3.78px -7.88px; rotate: 1.15deg; }
    30% { translate: 5.82px -7.31px; rotate: 0.79deg; }
    35% { translate: 7.42px -5.46px; rotate: 0.57deg; }
    40% { translate: 8.71px -2.66px; rotate: 0.43deg; }
    45% { translate: 9.72px 0.35px; rotate: 0.28deg; }
    50% { translate: 10.46px 2.58px; rotate: 0.15deg; }
    55% { translate: 9.81px 4.30px; rotate: -1.65deg; }
    60% { translate: 7.15px 5.74px; rotate: -2.73deg; }
    65% { translate: 2.99px 6.99px; rotate: -3.38deg; }
    70% { translate: -1.53px 8.03px; rotate: -2.39deg; }
    75% { translate: -4.87px 8.79px; rotate: -1.44deg; }
    80% { translate: -7.13px 8.37px; rotate: -0.59deg; }
    85% { translate: -8.41px 6.27px; rotate: -0.09deg; }
    90% { translate: -9.01px 2.94px; rotate: 0.21deg; }
    95% { translate: -9.21px -0.76px; rotate: 0.18deg; }
    100% { translate: -9.35px -3.50px; rotate: 0.13deg; }
}

@keyframes ph-unit-drift-inspector-b-2iw73ofvn0 {
    0% { translate: -7.42px -6.80px; rotate: 0.58deg; }
    5% { translate: -5.04px -8.02px; rotate: 2.71deg; }
    10% { translate: -0.69px -8.67px; rotate: 3.09deg; }
    15% { translate: 2.78px -9.01px; rotate: 1.43deg; }
    20% { translate: 5.44px -8.39px; rotate: 1.38deg; }
    25% { translate: 7.87px -6.92px; rotate: 1.06deg; }
    30% { translate: 9.41px -5.67px; rotate: 0.12deg; }
    35% { translate: 9.50px -2.79px; rotate: -0.77deg; }
    40% { translate: 8.66px 1.32px; rotate: -0.70deg; }
    45% { translate: 7.83px 4.16px; rotate: -1.09deg; }
    50% { translate: 5.77px 6.73px; rotate: -1.94deg; }
    55% { translate: 3.12px 9.06px; rotate: -1.27deg; }
    60% { translate: 1.14px 10.25px; rotate: -1.49deg; }
    65% { translate: -1.61px 9.88px; rotate: -2.04deg; }
    70% { translate: -4.42px 8.87px; rotate: -1.12deg; }
    75% { translate: -6.29px 7.49px; rotate: -0.93deg; }
    80% { translate: -8.05px 4.18px; rotate: -0.97deg; }
    85% { translate: -9.49px 0.73px; rotate: -0.45deg; }
    90% { translate: -9.77px -1.81px; rotate: 0.77deg; }
    95% { translate: -8.65px -4.59px; rotate: 1.36deg; }
    100% { translate: -7.42px -6.80px; rotate: 0.58deg; }
}

/* Longhand rather than the `animation` shorthand so each role can name its
   own orbit below without restating the timing. `translate`/`rotate` are used
   instead of `transform` because the runtime owns the wrapper's transform and
   the intro owns this element's `scale` — three independent tracks, no
   compositing fight. */
.ph-scene__unit[b-2iw73ofvn0] {
    animation-duration: var(--drift-duration, 11.5s);
    animation-timing-function: linear;
    animation-delay: var(--drift-delay, 0s);
    animation-iteration-count: infinite;
    aspect-ratio: 1;
    position: relative;
}

/* The whole crew runs one shared, unhurried 90s clock (--roam-duration /
   --roam-delay identical everywhere and inherited by the grab, nod, and +1
   animations), so every robot leaves home, grabs its coin, pockets it, and
   floats back at exactly the same moment. */
.ph-scene__roam--scout[b-2iw73ofvn0] {
    --roam-delay: 0s;
    --roam-duration: 90s;
    animation-name: ph-roam-scout-b-2iw73ofvn0;
    left: 4%;
    top: 34%;
    width: clamp(4.5rem, 10vw, 6.5rem);
}

/* Loop lengths are whole multiples of the 2.3s jetflame duty cycle (5, 6, 4
   and 7 burns), and the delays are whole multiples too, so in the no-JS
   fallback every acceleration in the orbit happens while that robot's jet is
   actually lit. Different multiples keep the four out of phase with each
   other without breaking that alignment. */
.ph-scene__unit--scout[b-2iw73ofvn0] {
    --drift-delay: -2.3s;
    --drift-duration: 11.5s;
    animation-name: ph-unit-drift-scout-b-2iw73ofvn0;
}

.ph-scene__roam--buyer[b-2iw73ofvn0] {
    --roam-delay: 0s;
    --roam-duration: 90s;
    animation-name: ph-roam-buyer-b-2iw73ofvn0;
    left: 15%;
    top: 68%;
    width: clamp(5.5rem, 11vw, 7.5rem);
}

.ph-scene__unit--buyer[b-2iw73ofvn0] {
    --drift-delay: -4.6s;
    --drift-duration: 13.8s;
    animation-name: ph-unit-drift-buyer-b-2iw73ofvn0;
}

/* Right-anchored robots use the mirrored sheet so they face left. */
.ph-scene__roam--courier[b-2iw73ofvn0] {
    --roam-delay: 0s;
    --roam-duration: 90s;
    animation-name: ph-roam-courier-b-2iw73ofvn0;
    /* --courier-home is overridden to 6% on narrow viewports; the loot coin
       reads the same variable, so home and coin move together. */
    right: var(--courier-home, 20%);
    top: 12%;
    width: clamp(4.5rem, 9vw, 6rem);
}

.ph-scene__roam--courier .ph-scene__actor[b-2iw73ofvn0],
.ph-scene__roam--courier .ph-scene__grab[b-2iw73ofvn0] {
    background-image: url("images/pl-robot-coincrew-flip.png");
}

.ph-scene__unit--courier[b-2iw73ofvn0] {
    --drift-delay: -6.9s;
    --drift-duration: 9.2s;
    animation-name: ph-unit-drift-courier-b-2iw73ofvn0;
}

.ph-scene__roam--inspector[b-2iw73ofvn0] {
    --roam-delay: 0s;
    --roam-duration: 90s;
    animation-name: ph-roam-inspector-b-2iw73ofvn0;
    right: 4%;
    top: 46%;
    width: clamp(5.5rem, 12vw, 8rem);
}

.ph-scene__roam--inspector .ph-scene__actor[b-2iw73ofvn0],
.ph-scene__roam--inspector .ph-scene__grab[b-2iw73ofvn0] {
    background-image: url("images/pl-robot-coincrew-flip.png");
}

.ph-scene__unit--inspector[b-2iw73ofvn0] {
    --drift-delay: -9.2s;
    --drift-duration: 16.1s;
    animation-name: ph-unit-drift-inspector-b-2iw73ofvn0;
}

/* Coin crew: one shared prop-less sprite sheet with five frames (0–3 hover,
   4 grab) advanced with steps(1, end); the hover loop runs on its own tempo
   per robot so they never flap in sync. A second, transform-only animation
   gives the unique collecting movement — a lunge-dip onto the coin followed
   by a tuck-in "pocketed" hold — synced to the roam cycle by consuming the
   wrapper's inherited --roam-duration / --roam-delay. */
.ph-scene__actor[b-2iw73ofvn0] {
    animation: ph-coincrew-hover-b-2iw73ofvn0 var(--hover-duration, 2.6s) steps(1, end) var(--hover-delay, 0s) infinite,
               ph-collect-nod-b-2iw73ofvn0 var(--roam-duration, 48s) ease-in-out var(--roam-delay, 0s) infinite,
               ph-collect-actor-swap-b-2iw73ofvn0 var(--roam-duration, 48s) steps(1, end) var(--roam-delay, 0s) infinite;
    background-image: url("images/pl-robot-coincrew.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 500% 100%;
    display: block;
    height: 100%;
    image-rendering: pixelated;
    inset: 0;
    position: absolute;
    width: 100%;
}

@keyframes ph-coincrew-hover-b-2iw73ofvn0 {
    0%, 24% { background-position: 0% 0; }
    25%, 49% { background-position: 25% 0; }
    50%, 74% { background-position: 50% 0; }
    75%, 100% { background-position: 75% 0; }
}

/* Jet exhaust is separate from the robot sheets so the burn can match the
   movement duty cycle exactly: 1.5s powered, 0.8s stopped. Four unequal,
   layered frames give the active burn a hot core, turbulent orange shell and
   unstable red tail instead of the old always-on single-pixel sputter. */
.ph-scene__jetflame[b-2iw73ofvn0] {
    animation:
        ph-jetflame-flicker-b-2iw73ofvn0 280ms steps(1, end) infinite,
        ph-jetflame-fallback-duty-b-2iw73ofvn0 2.3s steps(1, end) infinite;
    background-image: url("images/pl-robot-jetflame.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 400% 100%;
    filter:
        drop-shadow(0 2px 3px rgba(238, 69, 62, 0.45))
        drop-shadow(0 0 3px rgba(236, 178, 66, 0.35));
    height: 18.75%;
    image-rendering: pixelated;
    left: 20.3125%;
    pointer-events: none;
    position: absolute;
    top: 81.25%;
    width: 10.9375%;
    z-index: 2;
}

@keyframes ph-jetflame-flicker-b-2iw73ofvn0 {
    0%, 24% { background-position: 0 0; }
    25%, 49% { background-position: 33.333% 0; }
    50%, 74% { background-position: 66.667% 0; }
    75%, 100% { background-position: 100% 0; }
}

@keyframes ph-jetflame-fallback-duty-b-2iw73ofvn0 {
    0%, 65.2% { visibility: visible; }
    65.3%, 100% { visibility: hidden; }
}

.ph-scene__roam--courier .ph-scene__jetflame[b-2iw73ofvn0],
.ph-scene__roam--inspector .ph-scene__jetflame[b-2iw73ofvn0] {
    left: auto;
    right: 20.3125%;
}

/* Agarrar y guardar: dives onto the coin (54% ≈ roam arrival), then pulls
   back into a tuck while the coin is pocketed, then settles back. */
@keyframes ph-collect-nod-b-2iw73ofvn0 {
    0%, 53% { transform: none; }
    58% { transform: translate3d(0, 7%, 0) scale(1.06); }
    66%, 74% { transform: translate3d(0, -2%, 0) scale(0.95); }
    80%, 100% { transform: none; }
}

/* The grab sheet contains a complete robot, not just replacement arms.
   Hide the hover sheet for the exact window that the grab sheet is visible;
   otherwise their different leg poses composite into a duplicate robot. */
@keyframes ph-collect-actor-swap-b-2iw73ofvn0 {
    0%, 53% { opacity: 1; }
    54%, 73% { opacity: 0; }
    74%, 100% { opacity: 1; }
}

/* Collecting pose overlay (sheet frame 4): replaces the hidden paddling
   sprite for the grab window, so the pose change is instant and pixel-stepped. */
.ph-scene__grab[b-2iw73ofvn0] {
    animation: ph-collect-reveal-b-2iw73ofvn0 var(--roam-duration, 48s) steps(1, end) var(--roam-delay, 0s) infinite;
    background-image: url("images/pl-robot-coincrew.png");
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 500% 100%;
    height: 100%;
    image-rendering: pixelated;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

@keyframes ph-collect-reveal-b-2iw73ofvn0 {
    0%, 53% { opacity: 0; }
    54%, 73% { opacity: 1; }
    74%, 100% { opacity: 0; }
}

/* Coffee break: the trigger toggles .ph-scene__roam--sipping on the roam
   wrapper for about a second. The actor's hover freezes and is hidden while
   this overlay plays the four-frame sip (reach / raise / sip with steam / lower)
   across exactly 1s, then holds the last frame until the class comes off.
   The overlay is display:none when idle so it costs nothing. Mirror wiring
   matches the grab overlay: courier and inspector statically here, every
   robot under the sim dynamically via the --mirrored rules further down. */
.ph-scene__sip[b-2iw73ofvn0] {
    background-image: url("images/pl-robot-coincrew-sip.png");
    background-repeat: no-repeat;
    background-size: 400% 100%;
    display: none;
    height: 100%;
    image-rendering: pixelated;
    inset: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.ph-scene__roam--sipping .ph-scene__actor[b-2iw73ofvn0] {
    animation-play-state: paused;
    visibility: hidden;
}

.ph-scene__roam--sipping .ph-scene__sip[b-2iw73ofvn0] {
    animation: ph-sip-cycle-b-2iw73ofvn0 1s steps(1, end) both;
    display: block;
}

@keyframes ph-sip-cycle-b-2iw73ofvn0 {
    0%, 19% { background-position: 0% 0; }       /* reach for the cup */
    20%, 49% { background-position: 33.333% 0; } /* raise it to the face */
    50%, 74% { background-position: 66.667% 0; } /* sip, steam rises */
    75%, 100% { background-position: 100% 0; }   /* ease the cup back down */
}

.ph-scene__roam--courier .ph-scene__sip[b-2iw73ofvn0],
.ph-scene__roam--inspector .ph-scene__sip[b-2iw73ofvn0] {
    background-image: url("images/pl-robot-coincrew-sip-flip.png");
}

/* Mario-style +1: pops above the robot's head the moment its coin is
   pocketed (58% ≈ the loot coin's vanish beat) and drifts up out of view. */
.ph-scene__plus[b-2iw73ofvn0] {
    animation: ph-plus-pop-b-2iw73ofvn0 var(--roam-duration, 48s) ease-out var(--roam-delay, 0s) infinite;
    background: url("images/pl-plus-one.png") center / contain no-repeat;
    bottom: calc(100% + 0.15rem);
    height: 0.6rem;
    image-rendering: pixelated;
    left: 50%;
    margin-left: -0.6rem;
    opacity: 0;
    position: absolute;
    width: 1.2rem;
    z-index: 3;
}

@keyframes ph-plus-pop-b-2iw73ofvn0 {
    0%, 57% { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.7); }
    59% { opacity: 1; transform: translate3d(0, 2px, 0) scale(1.15); }
    64% { opacity: 1; transform: translate3d(0, -7px, 0) scale(1); }
    70% { opacity: 1; transform: translate3d(0, -14px, 0); }
    76%, 100% { opacity: 0; transform: translate3d(0, -18px, 0); }
}

/* Sonic power sneakers: a robot wears them for exactly as long as a
   coffee-mug boost runs (tools/generate_sonic_shoes.py). The runtime toggles
   .is-boosted on the roam wrapper for the whole caffeine window, so the shoes
   are keyed straight off that class — no separate timing to keep in sync.
   Both toes point in the robot's travel direction, so left-facing crew use
   the generated -flip sprite. display:none while idle so they cost nothing.

   Box is sized to the actor sprite's own boot pixels (pl-robot-coincrew.png,
   64x64 frame: legs sit at x23-30 and x34-41, y53-57). The sprite starts at
   y56, replacing only the final two leg rows plus the original boots; its
   thick sole extends four pixels below the old 64px frame. */
.ph-scene__shoes[b-2iw73ofvn0] {
    background: url("images/pl-sonic-shoes.png") center bottom / contain no-repeat;
    bottom: -6.25%;
    display: none;
    height: 18.75%;
    image-rendering: pixelated;
    left: 26.5625%;
    position: absolute;
    width: 45.3125%;
    z-index: 2;
}

/* Keep both long toes aimed toward the direction each robot faces. */
.ph-scene__roam--courier .ph-scene__shoes[b-2iw73ofvn0],
.ph-scene__roam--inspector .ph-scene__shoes[b-2iw73ofvn0],
.ph-scene--sim .ph-scene__roam--mirrored .ph-scene__shoes[b-2iw73ofvn0] {
    background-image: url("images/pl-sonic-shoes-flip.png");
}

.ph-scene__roam.is-boosted .ph-scene__shoes[b-2iw73ofvn0] {
    animation: ph-sonic-shoes-dash-b-2iw73ofvn0 0.5s steps(2, end) infinite;
    display: block;
}

/* Remove the robot's original lower legs and boots while the replacement
   sneakers are visible. Without this cutout, transparent pixels around the
   cuffs reveal the old feet underneath and the two silhouettes collide. */
.ph-scene__roam.is-boosted .ph-scene__actor[b-2iw73ofvn0],
.ph-scene__roam.is-boosted .ph-scene__grab[b-2iw73ofvn0],
.ph-scene__roam.is-boosted .ph-scene__sip[b-2iw73ofvn0] {
    clip-path: inset(0 0 12.5% 0);
}

/* Rapid stepped hop — the feet blur of a 40%-faster robot. */
@keyframes ph-sonic-shoes-dash-b-2iw73ofvn0 {
    0%, 49% { transform: translate3d(0, 0, 0); }
    50%, 100% { transform: translate3d(0, -2px, 0); }
}

.ph-scene__actor--scout[b-2iw73ofvn0] { --hover-delay: -0.7s; --hover-duration: 2.4s; }
.ph-scene__actor--buyer[b-2iw73ofvn0] { --hover-delay: -1.9s; --hover-duration: 2.9s; }
.ph-scene__actor--courier[b-2iw73ofvn0] { --hover-delay: -0.3s; --hover-duration: 2.5s; }
.ph-scene__actor--inspector[b-2iw73ofvn0] { --hover-delay: -1.2s; --hover-duration: 3.1s; }

/* Coins dispersed through the space. The wrapper carries the collect
   choreography for loot coins (a transform + fade the moment its robot
   arrives) while the img keeps an independent bob. Loot positions are the
   matching robot's home anchor plus its roam vector, so they sit exactly at
   the roam destination; both sides share the cycle duration and delay, which
   is what syncs the vanish to the arrival. */
.ph-coinbit[b-2iw73ofvn0] {
    animation: ph-coinbit-loot-b-2iw73ofvn0 var(--loot-duration, 0s) ease var(--loot-delay, 0s) infinite;
    filter: drop-shadow(0 0 6px rgba(236, 178, 66, 0.5));
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.ph-coinbit img[b-2iw73ofvn0] {
    animation: ph-coinbit-bob-b-2iw73ofvn0 var(--bob-duration, 6s) cubic-bezier(0.45, 0, 0.55, 1) var(--bob-delay, 0s) infinite alternate;
    display: block;
    width: 100%;
}

@keyframes ph-coinbit-bob-b-2iw73ofvn0 {
    from { transform: translate3d(0, -4px, 0); }
    to { transform: translate3d(0, 6px, 0); }
}

/* Visible until the robot lands → shrink-and-lift (collected) → stay gone
   while the robot dwells → pop back once it has floated home. */
@keyframes ph-coinbit-loot-b-2iw73ofvn0 {
    0%, 58% { opacity: 1; transform: none; }
    63%, 84% { opacity: 0; transform: scale(0.3) translate3d(0, -14px, 0); }
    89%, 100% { opacity: 1; transform: none; }
}

.ph-coinbit--ambient-a[b-2iw73ofvn0] {
    --bob-duration: 5.5s;
    left: var(--ambient-a-x);
    opacity: 0.75;
    top: var(--ambient-a-y);
    width: 1.2rem;
}

.ph-coinbit--ambient-b[b-2iw73ofvn0] {
    --bob-delay: -2s;
    --bob-duration: 7s;
    left: var(--ambient-b-x);
    opacity: 0.85;
    top: var(--ambient-b-y);
    width: 1.5rem;
}

.ph-coinbit--ambient-c[b-2iw73ofvn0] {
    --bob-delay: -4s;
    --bob-duration: 6.2s;
    left: var(--ambient-c-x);
    opacity: 0.7;
    top: var(--ambient-c-y);
    width: 1.1rem;
}

/* Loot positions are the matching robot's home anchor plus the same
   --<role>-roam-* variables its keyframes read, so the coin sits exactly at
   the roam destination in every scenario. Cycle duration and delay duplicate
   the robot's on purpose — that is what syncs the vanish to the arrival, and
   since the crew shares one clock, all four coins pop away at the same time. */
.ph-coinbit--loot-scout[b-2iw73ofvn0] {
    --loot-delay: 0s;
    --loot-duration: 90s;
    left: calc(4% + var(--scout-roam-x) + 2.2rem);
    top: calc(34% + var(--scout-roam-y) + 1.4rem);
    width: 1.7rem;
}

.ph-coinbit--loot-buyer[b-2iw73ofvn0] {
    --loot-delay: 0s;
    --loot-duration: 90s;
    left: calc(15% + var(--buyer-roam-x) + 2.6rem);
    top: calc(68% + var(--buyer-roam-y) + 1.6rem);
    width: 1.7rem;
}

.ph-coinbit--loot-courier[b-2iw73ofvn0] {
    --loot-delay: 0s;
    --loot-duration: 90s;
    right: calc(var(--courier-home, 20%) - var(--courier-roam-x) + 2rem);
    top: calc(12% + var(--courier-roam-y) + 1.4rem);
    width: 1.7rem;
}

.ph-coinbit--loot-inspector[b-2iw73ofvn0] {
    --loot-delay: 0s;
    --loot-duration: 90s;
    right: calc(4% - var(--inspector-roam-x) + 2.8rem);
    top: calc(46% + var(--inspector-roam-y) + 1.6rem);
    width: 1.7rem;
}

/* Cross-shaped pixel stars blinking at irregular stepped intervals
   (kimi_ui §2.2). */
.ph-star[b-2iw73ofvn0] {
    animation: ph-star-blink-b-2iw73ofvn0 var(--star-duration, 2.6s) steps(2, end) var(--star-delay, 0s) infinite;
    background: var(--star-color, var(--stake-faint));
    height: 3px;
    position: absolute;
    width: 11px;
}

.ph-star[b-2iw73ofvn0]::after {
    background: inherit;
    content: "";
    height: 11px;
    left: 4px;
    position: absolute;
    top: -4px;
    width: 3px;
}

.ph-star--one[b-2iw73ofvn0] { left: 4%; top: 6%; }
.ph-star--two[b-2iw73ofvn0] { --star-color: var(--stake-green); --star-delay: -0.9s; --star-duration: 3.1s; left: 15%; top: 30%; }
.ph-star--three[b-2iw73ofvn0] { --star-delay: -1.7s; left: 28%; top: 12%; }
.ph-star--four[b-2iw73ofvn0] { --star-color: var(--stake-amber); --star-delay: -0.4s; --star-duration: 2.2s; left: 42%; top: 6%; }
.ph-star--five[b-2iw73ofvn0] { --star-delay: -2.2s; --star-duration: 3.4s; left: 58%; top: 16%; }
.ph-star--six[b-2iw73ofvn0] { --star-delay: -1.1s; left: 70%; top: 36%; }
.ph-star--seven[b-2iw73ofvn0] { --star-color: var(--stake-copper); --star-delay: -2.8s; --star-duration: 3.7s; right: 16%; top: 8%; }
.ph-star--eight[b-2iw73ofvn0] { --star-delay: -1.9s; --star-duration: 2.9s; right: 4%; top: 42%; }
.ph-star--nine[b-2iw73ofvn0] { --star-color: var(--stake-green); --star-delay: -1.3s; --star-duration: 3.3s; left: 9%; top: 60%; }
.ph-star--ten[b-2iw73ofvn0] { --star-delay: -2.6s; --star-duration: 2.4s; left: 33%; top: 55%; }
.ph-star--eleven[b-2iw73ofvn0] { --star-color: var(--stake-amber); --star-delay: -0.7s; --star-duration: 3.9s; left: 52%; top: 4%; }
.ph-star--twelve[b-2iw73ofvn0] { --star-delay: -3.1s; --star-duration: 2.7s; left: 65%; top: 58%; }
.ph-star--thirteen[b-2iw73ofvn0] { --star-delay: -1.5s; --star-duration: 3.5s; right: 26%; top: 62%; }
.ph-star--fourteen[b-2iw73ofvn0] { --star-color: var(--stake-copper); --star-delay: -2.1s; --star-duration: 3s; left: 5%; top: 80%; }
.ph-star--fifteen[b-2iw73ofvn0] { --star-delay: -0.3s; --star-duration: 4.1s; right: 7%; top: 68%; }
.ph-star--sixteen[b-2iw73ofvn0] { --star-color: var(--stake-green); --star-delay: -2.4s; --star-duration: 2.6s; left: 44%; top: 78%; }

@keyframes ph-star-blink-b-2iw73ofvn0 {
    0%, 45% { opacity: 0.28; transform: scale(0.72); }
    50%, 100% { opacity: 1; transform: scale(1); }
}

/* Pixel chain badges — Ethereum crystal, Solana stripes and BNB cube —
   dispersed over the extended sky and drifting slowly. They stay in the
   background container so chapter two retains its pixel landmarks after the
   first-screen crew has scrolled away. */
.ph-chain[b-2iw73ofvn0] {
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.ph-chain img[b-2iw73ofvn0] {
    animation: ph-unit-float-b-2iw73ofvn0 var(--chain-bob-duration, 10s) cubic-bezier(0.45, 0, 0.55, 1) var(--chain-bob-delay, 0s) infinite alternate;
    display: block;
    image-rendering: pixelated;
    width: 100%;
}

.ph-chain--eth-a[b-2iw73ofvn0] {
    filter: drop-shadow(0 0 7px rgba(76, 138, 226, 0.48));
    left: 6%;
    opacity: 0.68;
    top: 46%;
    width: 2.75rem;
}

.ph-chain--sol-a[b-2iw73ofvn0] {
    --chain-bob-delay: -3.4s;
    --chain-bob-duration: 12s;
    filter: drop-shadow(0 0 7px rgba(20, 241, 149, 0.42));
    left: 36%;
    opacity: 0.7;
    top: 36%;
    width: 3.6rem;
}

.ph-chain--bnb-a[b-2iw73ofvn0] {
    --chain-bob-delay: -6.1s;
    --chain-bob-duration: 9s;
    filter: drop-shadow(0 0 7px rgba(255, 190, 32, 0.45));
    left: 62%;
    opacity: 0.66;
    top: 30%;
    width: 3.1rem;
}

.ph-chain--eth-b[b-2iw73ofvn0] {
    --chain-bob-delay: -1.8s;
    --chain-bob-duration: 13s;
    filter: drop-shadow(0 0 5px rgba(76, 138, 226, 0.38));
    opacity: 0.5;
    right: 20%;
    top: 72%;
    width: 2.2rem;
}

.ph-chain--sol-b[b-2iw73ofvn0] {
    --chain-bob-delay: -8.3s;
    --chain-bob-duration: 11s;
    filter: drop-shadow(0 0 5px rgba(20, 241, 149, 0.34));
    left: 8%;
    opacity: 0.54;
    top: 72%;
    width: 2.7rem;
}

.ph-chain--bnb-b[b-2iw73ofvn0] {
    --chain-bob-delay: -4.7s;
    --chain-bob-duration: 8.5s;
    filter: drop-shadow(0 0 5px rgba(255, 190, 32, 0.36));
    opacity: 0.5;
    right: 44%;
    top: 50%;
    width: 2.3rem;
}

/* Saucer-free pixel coffee mugs — six catchable coffee props based on the
   supplied cream-mug reference. The legacy .ph-bag class remains the runtime
   pickup hook, but the rendered asset is now a mug. Deep backdrop like the
   chains: softly tilted with a hard dark shadow instead of a glow. */
.ph-bag[b-2iw73ofvn0] {
    filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.34));
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.ph-bag img[b-2iw73ofvn0] {
    animation: ph-unit-float-b-2iw73ofvn0 var(--bag-bob-duration, 12s) cubic-bezier(0.45, 0, 0.55, 1) var(--bag-bob-delay, 0s) infinite alternate;
    display: block;
    image-rendering: pixelated;
    width: 100%;
}

.ph-mug--one[b-2iw73ofvn0] {
    left: 48%;
    opacity: 0.7;
    top: 84%;
    --bag-tilt: -4deg;
    transform: rotate(var(--bag-tilt));
    width: 3rem;
}

.ph-mug--two[b-2iw73ofvn0] {
    --bag-bob-delay: -4.2s;
    --bag-bob-duration: 13.5s;
    opacity: 0.66;
    right: 9%;
    top: 30%;
    --bag-tilt: 3deg;
    transform: rotate(var(--bag-tilt));
    width: 2.75rem;
}

.ph-mug--three[b-2iw73ofvn0] {
    --bag-bob-delay: -7.6s;
    --bag-bob-duration: 11s;
    left: 20%;
    opacity: 0.58;
    top: 88%;
    --bag-tilt: -2deg;
    transform: rotate(var(--bag-tilt));
    width: 2.5rem;
}

.ph-mug--four[b-2iw73ofvn0] {
    --bag-bob-delay: -2.9s;
    --bag-bob-duration: 12.5s;
    left: 63%;
    opacity: 0.58;
    top: 52%;
    --bag-tilt: 4deg;
    transform: rotate(var(--bag-tilt));
    width: 2.5rem;
}

.ph-mug--five[b-2iw73ofvn0] {
    --bag-bob-delay: -6.3s;
    --bag-bob-duration: 14s;
    left: 38%;
    opacity: 0.64;
    top: 12%;
    --bag-tilt: -4deg;
    transform: rotate(var(--bag-tilt));
    width: 2.75rem;
}

.ph-mug--six[b-2iw73ofvn0] {
    --bag-bob-delay: -9.1s;
    --bag-bob-duration: 10.5s;
    bottom: 6%;
    opacity: 0.6;
    right: 36%;
    --bag-tilt: 3deg;
    transform: rotate(var(--bag-tilt));
    width: 2.5rem;
}

/* ── Staking layer: the drifting coffee coins that used to live inside the
   /staking intro's own space container. The vignette ::after keeps them
   softly dimmed at the edges, matching the original crop. ── */
.gs-layer--staking[b-2iw73ofvn0]::after {
    background: radial-gradient(circle at center, transparent 0 25%, rgba(16, 13, 11, 0.28) 68%, rgba(16, 13, 11, 0.68) 100%);
    content: "";
    inset: 0;
    position: absolute;
}

.staking-space__coin[b-2iw73ofvn0] {
    animation: staking-space-coin-drift-b-2iw73ofvn0 var(--space-duration, 8s) cubic-bezier(0.77, 0, 0.175, 1) var(--space-delay, 0s) infinite alternate;
    filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.36));
    height: var(--space-size);
    image-rendering: pixelated;
    opacity: var(--space-opacity, 0.48);
    position: absolute;
    width: var(--space-size);
}

.staking-space__coin--one[b-2iw73ofvn0] {
    --space-delay: -2s;
    --space-duration: 8.5s;
    --space-opacity: 0.42;
    --space-size: clamp(2.25rem, 4.4vw, 4rem);
    left: 4%;
    top: 11%;
}

.staking-space__coin--two[b-2iw73ofvn0] {
    --space-delay: -5.4s;
    --space-duration: 10s;
    --space-opacity: 0.24;
    --space-size: clamp(3rem, 6.6vw, 6.25rem);
    right: 4%;
    top: 8%;
}

.staking-space__coin--three[b-2iw73ofvn0] {
    --space-delay: -3.6s;
    --space-duration: 7.5s;
    --space-opacity: 0.56;
    --space-size: clamp(1.75rem, 3.6vw, 3.25rem);
    left: 9%;
    top: 42%;
}

.staking-space__coin--four[b-2iw73ofvn0] {
    --space-delay: -1.2s;
    --space-duration: 9.4s;
    --space-opacity: 0.5;
    --space-size: clamp(2rem, 4.2vw, 3.75rem);
    right: 8%;
    top: 38%;
}

.staking-space__coin--five[b-2iw73ofvn0] {
    --space-delay: -7s;
    --space-duration: 11s;
    --space-opacity: 0.2;
    --space-size: clamp(4rem, 8vw, 7.5rem);
    bottom: 3%;
    left: 1%;
}

.staking-space__coin--six[b-2iw73ofvn0] {
    --space-delay: -4.4s;
    --space-duration: 8.8s;
    --space-opacity: 0.34;
    --space-size: clamp(2.5rem, 5.4vw, 5rem);
    bottom: 6%;
    right: 3%;
}

.staking-space__coin--seven[b-2iw73ofvn0] {
    --space-delay: -6.1s;
    --space-duration: 7.9s;
    --space-opacity: 0.3;
    --space-size: clamp(1.5rem, 3vw, 2.75rem);
    bottom: 24%;
    right: 22%;
}

@keyframes staking-space-coin-drift-b-2iw73ofvn0 {
    from { transform: translate3d(-5px, -7px, 0) rotate(-3deg); }
    to { transform: translate3d(7px, 9px, 0) rotate(4deg); }
}

/* ── Mobile: keep the full crew, drop secondary background floaters ── */
@media (max-width: 700px) {
    .ph-sky__planet--ringed[b-2iw73ofvn0],
    .ph-coinbit--loot-buyer[b-2iw73ofvn0],
    .ph-coinbit--loot-inspector[b-2iw73ofvn0],
    .ph-coinbit--ambient-b[b-2iw73ofvn0],
    .ph-chain--eth-b[b-2iw73ofvn0],
    .ph-chain--sol-b[b-2iw73ofvn0],
    .ph-chain--bnb-b[b-2iw73ofvn0],
    .ph-mug--four[b-2iw73ofvn0],
    .ph-mug--five[b-2iw73ofvn0],
    .ph-mug--six[b-2iw73ofvn0] {
        display: none;
    }

    /* On one column the home copy spans the full width (roughly 27%–77% of
       the scene vertically), so parking coins in the left and right margins
       has nowhere to go. Everything visible is pushed into the clear bands
       above the title and below the CTAs. */
    .gs-scene[b-2iw73ofvn0] {
        --courier-home: 6%;
        --courier-roam-x: -6vw;
        --courier-roam-y: -4vh;
        --scout-roam-x: 8vw;
        --scout-roam-y: -20vh;
        --ambient-a-x: 8%;
        --ambient-a-y: 10%;
        --ambient-c-x: 15%;
        --ambient-c-y: 88%;
    }

    /* Four-robot fallback composition: one crew member per mobile corner.
       The live simulation already starts at the same four quadrants and its
       later .ph-scene--sim rules take over these static anchors. */
    .ph-scene__roam--scout[b-2iw73ofvn0],
    .ph-scene__roam--buyer[b-2iw73ofvn0],
    .ph-scene__roam--courier[b-2iw73ofvn0],
    .ph-scene__roam--inspector[b-2iw73ofvn0] {
        width: clamp(4rem, 18vw, 5rem);
    }

    .ph-scene__roam--scout[b-2iw73ofvn0] {
        bottom: auto;
        left: max(0.25rem, env(safe-area-inset-left));
        right: auto;
        top: clamp(5.5rem, 12vh, 7rem);
    }

    .ph-scene__roam--courier[b-2iw73ofvn0] {
        bottom: auto;
        left: auto;
        right: max(0.25rem, env(safe-area-inset-right));
        top: clamp(5.5rem, 12vh, 7rem);
    }

    .ph-scene__roam--buyer[b-2iw73ofvn0] {
        bottom: clamp(1rem, 5vh, 3rem);
        left: max(0.25rem, env(safe-area-inset-left));
        right: auto;
        top: auto;
    }

    .ph-scene__roam--inspector[b-2iw73ofvn0] {
        bottom: clamp(1rem, 5vh, 3rem);
        left: auto;
        right: max(0.25rem, env(safe-area-inset-right));
        top: auto;
    }

    /* Small enough to clear the right edge, dropped into the band under the
       CTAs where nothing else sits. */
    .ph-sky__andromeda[b-2iw73ofvn0] {
        right: 5%;
        top: 84%;
        width: 8rem;
    }
}

/* ── Simulated crew ──────────────────────────────────────────────────────
   pixelCrewRuntime.js adds .ph-scene--sim to BOTH containers once it has
   taken over, and every rule below is scoped to that class. Nothing here is
   a progressive enhancement of the keyframes above — it is a replacement:
   position becomes a transform written per frame from the trained policy,
   and the three collect beats stop being percentages of a shared 90s clock
   and become one-shot animations fired the frame a robot actually touches a
   coin.

   Without the class (module blocked, JS off, reduced motion) the timed CSS
   composition above is still what renders. */
.ph-scene--sim .ph-scene__roam[b-2iw73ofvn0] {
    animation: none;
    bottom: auto;
    left: 0;
    right: auto;
    top: 0;
    /* The runtime writes the transform; anything transitioning it would fight
       the frame loop. */
    transition: none;
    will-change: transform;
}

/* Right-anchored roles used the mirrored sheet via a static rule; under the
   sim, facing follows travel direction instead. */
.ph-scene--sim .ph-scene__roam--mirrored .ph-scene__actor[b-2iw73ofvn0],
.ph-scene--sim .ph-scene__roam--mirrored .ph-scene__grab[b-2iw73ofvn0] {
    background-image: url("images/pl-robot-coincrew-flip.png");
}

.ph-scene--sim .ph-scene__roam--mirrored .ph-scene__sip[b-2iw73ofvn0] {
    background-image: url("images/pl-robot-coincrew-sip-flip.png");
}

.ph-scene--sim .ph-scene__roam:not(.ph-scene__roam--mirrored) .ph-scene__actor[b-2iw73ofvn0],
.ph-scene--sim .ph-scene__roam:not(.ph-scene__roam--mirrored) .ph-scene__grab[b-2iw73ofvn0] {
    background-image: url("images/pl-robot-coincrew.png");
}

.ph-scene--sim .ph-scene__jetflame[b-2iw73ofvn0] {
    animation: ph-jetflame-flicker-b-2iw73ofvn0 280ms steps(1, end) infinite;
    visibility: hidden;
}

.ph-scene--sim .ph-scene__roam.is-thrusting .ph-scene__jetflame[b-2iw73ofvn0] {
    visibility: visible;
}

.ph-scene--sim .ph-scene__roam--mirrored .ph-scene__jetflame[b-2iw73ofvn0] {
    left: auto;
    right: 20.3125%;
}

.ph-scene--sim .ph-scene__roam:not(.ph-scene__roam--mirrored) .ph-scene__jetflame[b-2iw73ofvn0] {
    left: 20.3125%;
    right: auto;
}

/* The engine-off window keeps the slow unit bob alive. The runtime separately
   caps residual travel to a few pixels, so the dark-jet beat reads as gentle
   zero-G inertia instead of either a frozen sprite or continued thrust. */

.ph-scene__roam--held .ph-scene__jetflame[b-2iw73ofvn0] {
    visibility: hidden;
}

.ph-scene--sim .ph-coinbit[b-2iw73ofvn0] {
    animation: none;
    bottom: auto;
    left: 0;
    right: auto;
    top: 0;
    will-change: transform;
}

/* ── Coffee mugs under the sim ────────────────────────────────────────────
   Mugs stop being background dressing and become catchable pickups: they blink
   in at random spots, sit briefly, and hand out a 40% speed boost (and the
   Sonic shoes) to whoever reaches one.

   STATE ONLY — the catch/drink choreography is a separate pass and is
   deliberately NOT written here. pixelCrewRuntime.js drives four classes:
   .ph-bag.is-live (catchable), .ph-bag.is-caught (~900ms one-shot on catch),
   .ph-scene__roam.is-boosted (the full 6s of caffeine) and
   .ph-scene__unit.is-drinking (~900ms one-shot). The rules below are the
   minimum needed for the mechanic to read at all; override them freely.

   One constraint worth keeping: the runtime owns `transform` on .ph-bag (it is
   how the mug is positioned) and composes the designed tilt back in via
   --bag-tilt. An animation that needs its own transform should target the
   inner <img>, which is free. */
.ph-scene--sim .ph-bag[b-2iw73ofvn0] {
    animation: none;
    bottom: auto;
    left: 0;
    right: auto;
    top: 0;
    /* Dormant by default: a mug only exists while it is catchable. */
    opacity: 0;
    transition: opacity 220ms ease;
    will-change: transform;
}

.ph-scene--sim .ph-bag.is-live[b-2iw73ofvn0] {
    /* Brighter than the static dressing — these are in play now. */
    opacity: 0.92;
}

.ph-scene--sim .ph-bag.is-caught[b-2iw73ofvn0] {
    opacity: 0;
}

/* The idle sprite loop and the bob are unchanged — they never depended on the
   roam clock. Only the collect-synced animations are re-declared. */
.ph-scene--sim .ph-scene__actor[b-2iw73ofvn0] {
    animation: ph-coincrew-hover-b-2iw73ofvn0 var(--hover-duration, 2.6s) steps(1, end) var(--hover-delay, 0s) infinite;
}

.ph-scene--sim .ph-scene__grab[b-2iw73ofvn0],
.ph-scene--sim .ph-scene__plus[b-2iw73ofvn0] {
    animation: none;
    opacity: 0;
}

/* One-shot collect: the runtime adds .is-collecting to the unit for ~900ms. */
.ph-scene--sim .ph-scene__unit.is-collecting .ph-scene__actor[b-2iw73ofvn0] {
    animation: ph-coincrew-hover-b-2iw73ofvn0 var(--hover-duration, 2.6s) steps(1, end) var(--hover-delay, 0s) infinite,
               ph-sim-nod-b-2iw73ofvn0 620ms ease-in-out 1,
               ph-sim-actor-swap-b-2iw73ofvn0 620ms steps(1, end) 1;
}

.ph-scene--sim .ph-scene__unit.is-collecting .ph-scene__grab[b-2iw73ofvn0] {
    animation: ph-sim-grab-b-2iw73ofvn0 620ms steps(1, end) 1;
}

.ph-scene--sim .ph-scene__unit.is-collecting .ph-scene__plus[b-2iw73ofvn0] {
    animation: ph-sim-plus-b-2iw73ofvn0 900ms ease-out 1;
}

@keyframes ph-sim-nod-b-2iw73ofvn0 {
    0% { transform: none; }
    22% { transform: translate3d(0, 7%, 0) scale(1.06); }
    52%, 74% { transform: translate3d(0, -2%, 0) scale(0.95); }
    100% { transform: none; }
}

@keyframes ph-sim-actor-swap-b-2iw73ofvn0 {
    0%, 74% { opacity: 0; }
    75%, 100% { opacity: 1; }
}

@keyframes ph-sim-grab-b-2iw73ofvn0 {
    0%, 74% { opacity: 1; }
    75%, 100% { opacity: 0; }
}

@keyframes ph-sim-plus-b-2iw73ofvn0 {
    0% { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.7); }
    12% { opacity: 1; transform: translate3d(0, 2px, 0) scale(1.15); }
    34% { opacity: 1; transform: translate3d(0, -7px, 0) scale(1); }
    58% { opacity: 1; transform: translate3d(0, -14px, 0); }
    100% { opacity: 0; transform: translate3d(0, -18px, 0); }
}

/* Coffee break (sim): the runtime adds .is-drinking to the unit for the sip
   window. Same one-second four-frame cycle as the manual --sipping hook —
   the robot's horizontal travel is the runtime's business, so this only
   swaps the paddle for the cup. One iteration, then back to the hover. */
.ph-scene--sim .ph-scene__unit.is-drinking .ph-scene__sip[b-2iw73ofvn0] {
    animation: ph-sip-cycle-b-2iw73ofvn0 1s steps(1, end) 1;
    display: block;
}

.ph-scene--sim .ph-scene__unit.is-drinking .ph-scene__actor[b-2iw73ofvn0] {
    visibility: hidden;
}

/* Collected coin: pop and stay hidden until the runtime respawns it (which is
   what removes the class). `forwards` holds the faded state, so the wrapper
   can be repositioned invisibly in the meantime. */
.ph-scene--sim .ph-coinbit.is-collected img[b-2iw73ofvn0] {
    animation: ph-sim-coin-pop-b-2iw73ofvn0 360ms ease-out 1 forwards;
}

@keyframes ph-sim-coin-pop-b-2iw73ofvn0 {
    0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.3); }
}

/* Reduced motion: everything freezes, the composition stays intact. Loot
   coins also stay put instead of vanishing mid-cycle. The runtime declines to
   start at all here, so the sim rules above never apply. Route cross-fades
   collapse to an instant swap as well. */
@media (prefers-reduced-motion: reduce) {
    .gs-scene[b-2iw73ofvn0],
    .gs-crew[b-2iw73ofvn0],
    .gs-layer[b-2iw73ofvn0] {
        transition: none;
    }

    .ph-coinbit[b-2iw73ofvn0],
    .ph-coinbit img[b-2iw73ofvn0],
    .ph-chain img[b-2iw73ofvn0],
    .ph-bag img[b-2iw73ofvn0],
    .ph-sky__planet[b-2iw73ofvn0],
    .ph-sky__andromeda[b-2iw73ofvn0],
    .ph-star[b-2iw73ofvn0],
    .ph-scene__roam[b-2iw73ofvn0],
    .ph-scene__unit[b-2iw73ofvn0],
    .ph-scene__actor[b-2iw73ofvn0],
    .ph-scene__jetflame[b-2iw73ofvn0],
    .ph-scene__grab[b-2iw73ofvn0],
    .ph-scene__sip[b-2iw73ofvn0],
    .ph-scene__plus[b-2iw73ofvn0],
    .staking-space__coin[b-2iw73ofvn0] {
        animation: none;
    }

    .ph-scene__jetflame[b-2iw73ofvn0] {
        visibility: hidden;
    }

    .gs-crew--intro-pending .ph-scene__unit[b-2iw73ofvn0],
    .gs-crew--intro-active .ph-scene__unit[b-2iw73ofvn0] {
        opacity: 1;
        scale: 1;
        transition: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-68617ojouu] {
    position: relative;
    min-height: 100vh;
}

main[b-68617ojouu] {
    min-height: 100vh;
}

.public-main[b-68617ojouu] {
    padding-top: 3.325rem;
}

@media (max-width: 760px) {
    .public-main[b-68617ojouu] {
        /* .site-nav shrinks to a 2.42rem bar below 760px (NavMenu.razor.css);
           this offset has to track it or the fixed header's real height falls
           short of the reserved space, leaving a blank strip above the content. */
        padding-top: 2.42rem;
    }
}

.public-page:has(.editorial-hero) .public-main[b-68617ojouu],
.public-page:has(.story-hero) .public-main[b-68617ojouu] {
    padding-top: 0;
}

/* The homepage hero already reserves its own header clearance and goes
   full-bleed (see .editorial-hero's calc(4.75rem + ...) padding and negative
   margins in app.css) — it was built for the fixed header to disappear over
   it, matching the treatment StakingLayout.razor.css gives the Lab/Yield
   heroes. NavMenu's TransparentHeader parameter defaults to false and
   MainLayout never opts in, so this drops the plate purely in CSS instead,
   scoped to pages that actually have the hero. ::deep is required because
   .public-header is rendered by the child <NavMenu /> component, outside
   MainLayout's own scoped markup.

   .journal-hero does NOT get the same treatment: unlike .editorial-hero,
   its slide images live in a .journal-hero-screen__frame that sits in normal
   flex flow below the reserved top padding (see Journal.razor's own <style>
   block) rather than bleeding under it — the reserved strip is genuinely
   empty, painted only by .journal-hero-screen's own `background: var(--surface)`.
   Making this header transparent would just expose that empty strip instead
   of blending into anything. See app.css's body:has(.journal-hero) rule for
   the treatment that actually fits: matching the header's solid color to
   that same --surface token. */
.public-page:has(.editorial-hero)[b-68617ojouu]  .public-header {
    background: transparent;
    border-bottom: 0;
}

/* Story opts into NavMenu's transparent variant so its artwork continues
   behind the fixed bar. Once the hero has left, publicHeader.js adds the solid
   state and this restores the component's own dark surface for contrast over
   the white technical sections. */
.public-page:has(.story-hero)[b-68617ojouu]  .public-header.public-header--solid {
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(251, 249, 244, 0.08);
}

.public-page:has(.journal-hero) .public-main[b-68617ojouu] {
    padding-top: 0;
}

body.product-detail-view .public-main[b-68617ojouu] {
    padding-top: 0;
}

#blazor-error-ui[b-68617ojouu] {
    /* Framework connectivity banner — deliberately loud/high-contrast in both
       themes rather than tokenized into the status-color set (that lands with
       the rest of the app's error/success/warning colors in a later phase).
       color-scheme:light-only used to force this element's native UA styling
       (scrollbars, form controls) light regardless of the page theme, which
       blocked dark mode outright; removed. The explicit color keeps text
       readable against the always-light yellow background even after --ink
       gets a dark-mode value elsewhere. */
    background: lightyellow;
    color: #1f1a18;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-68617ojouu] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =========================================
   NAVBAR REDESIGN - GLASSMORPHISM & MINIMALISM
   ========================================= */

/* Solid colors matching app.css's canonical tokens are aliased to var(--ink)/
   var(--white)/var(--accent)/var(--muted)/var(--surface)/var(--charcoal)
   throughout this file. A few literals are deliberately left as-is:
   #c2a47d/#e9d7bc (wallet-modal gold accents, no site-wide equivalent),
   #b23b2f/#942f25 (destructive red — status-color tokens land in a later
   phase), #050505/#ffffff/#ffb0a8/#f5f3ee/#627ee9 (small one-off uses with no
   exact canonical match). rgba(...) alpha blends of --ink etc. are also left
   as literals — converting those needs their own dark-mode values anyway,
   which is later-phase work, not a naming cleanup. */

/* The bar is dark on every page — it is not a reflection of the page's own
   ground (which is still cream on the storefront and near-black in the
   staking/lab wing), so its colors are literals off the --nav-* set below
   rather than the site's --surface/--ink tokens. Page-specific header
   recolors used to live in app.css; they were removed when this became the
   single design for all routes, including the homepage hero. */
.public-header[b-dfud9goyt1] {
    --nav-bg: #100e0d;
    --nav-fg: #fbf9f4;
    --nav-fg-dim: rgba(251, 249, 244, 0.8);
    --nav-line: rgba(251, 249, 244, 0.14);
    --nav-underline: #c2a47d;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(251, 249, 244, 0.08);
    transition: background-color 0.3s ease;
}

/* StakingLayout paints its background from the top of the page, behind the
   fixed navbar. Yield and Lab therefore expose that same ground directly:
   there is no separate navbar plate and no dividing rule. */
.public-header--transparent[b-dfud9goyt1] {
    background: rgba(16, 14, 13, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 0;
}

.public-header--home[b-dfud9goyt1] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* /, /staking (Yield), /procurement-lab and /about all render over GlobalScene's
   pixel-space background, so the bar starts with no plate at all and lets the
   scene run straight through it. publicHeader.js adds --scrolled once the page
   has moved past 1% of the viewport height, which fades the translucent plate
   (and its blur) back in; scrolling back to the very top removes it again, so
   the bar returns to full transparency in its original position. The plate
   values here are the same ones .public-header--transparent carries — this rule
   only gates *when* they apply. */
.public-header--scroll-veil[b-dfud9goyt1] {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.public-header--scroll-veil.public-header--scrolled[b-dfud9goyt1] {
    background: rgba(16, 14, 13, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* The homepage never had the blur (see .public-header--home above); it keeps
   the flat translucent plate once scrolled. Same specificity as the rule
   directly above, so this has to stay after it to win. */
.public-header--home.public-header--scrolled[b-dfud9goyt1] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Safari extends the background of an opaque fixed element touching the
   viewport edge into the Dynamic Island/status-bar area. Keep the hero routes
   visually transparent on larger screens, but give their mobile headers the
   same solid paint as each hero so the top inset is correct on the first frame. */
@media (max-width: 760px) {
    .public-header--story[b-dfud9goyt1] {
        top: 0 !important;
    }

    /* Over the hero itself (before publicHeader.js adds --solid on scroll),
       the bar stays transparent — same as desktop and same as /staking and
       /procurement-lab's "no separate plate" headers — so story-hero__media's
       poster/video occupies the navbar row instead of a flat guessed color
       cutting it off. Only the physical safe-area/notch sliver above the nav
       row keeps a CSS-only solid fallback (no JS dependency, so there's no
       flash before the circuit connects); it uses the same --active-theme-color
       var + #0f0f11 literal the hero itself paints with, so it can only ever
       match. z-index: -1 is required, not decorative: .public-header is a
       stacking context, and a position:fixed pseudo-element with the default
       z-index:auto paints in the "positioned" layer, which is ABOVE the
       header's own non-positioned children (.site-nav) regardless of source
       order — without this it blanks out the wordmark and nav links whenever
       the safe-area inset overlaps their vertical position. -1 drops it into
       the stacking context's background layer, below .site-nav but still
       above the page content the fixed header sits over. */
    .public-header--story[b-dfud9goyt1]::before {
        background: var(--active-theme-color, #0f0f11);
        content: "";
        height: env(safe-area-inset-top, 0px);
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: -1;
    }

    .public-header--story.public-header--solid[b-dfud9goyt1] {
        background: var(--active-theme-color, #0f0f11) !important;
    }

    .public-header--story.public-header--solid[b-dfud9goyt1]::before {
        content: none;
    }
}

/* Three tracks so the link row sits on the page's centre line rather than
   floating between two unequal-width neighbours. .navbar-toggler is
   display:none above 760px, so only three items ever occupy the grid. */
.site-nav[b-dfud9goyt1] {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr auto 1fr;
    margin: 0 auto;
    max-width: 1440px;
    min-height: 4.25rem;
    padding: 0 clamp(1.25rem, 3vw, 3rem);
}

.navbar-brand[b-dfud9goyt1] {
    color: var(--nav-fg);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    justify-self: start;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: opacity 200ms ease;
}

.navbar-brand:hover[b-dfud9goyt1] {
    opacity: 0.7;
}

.navbar-brand--jump-to-concept[b-dfud9goyt1],
.navbar-brand--jump-to-hero[b-dfud9goyt1] {
    animation: brand-jump-b-dfud9goyt1 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes brand-jump-b-dfud9goyt1 {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-0.45rem);
    }

    60% {
        transform: translateY(0.15rem);
    }

    100% {
        transform: translateY(0);
    }
}

.navbar-toggler[b-dfud9goyt1] {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    height: 2.8rem;
    justify-content: center;
    padding: 0;
    width: 2.8rem;
}

.navbar-toggler span[b-dfud9goyt1] {
    background: var(--nav-fg);
    display: block;
    height: 1px;
    transition: opacity 160ms ease, transform 160ms ease;
    width: 1.2rem;
}

.nav-links[b-dfud9goyt1] {
    align-items: center;
    display: flex;
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    justify-self: center;
}

[b-dfud9goyt1] .nav-link {
    border-bottom: 1px solid transparent;
    color: var(--nav-fg-dim);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    /* The tracking is part of the mark; the negative right margin cancels the
       trailing space it adds after the last glyph so the gaps stay even. */
    letter-spacing: 0.16em;
    margin-right: -0.16em;
    padding-bottom: 0.3rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 200ms ease, border-color 200ms ease;
}

[b-dfud9goyt1] .nav-link:hover {
    color: var(--nav-fg);
}

[b-dfud9goyt1] .nav-link.active {
    border-bottom-color: var(--nav-underline);
    color: var(--nav-fg);
}

.nav-utilities[b-dfud9goyt1] {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    justify-self: end;
}

.nav-login[b-dfud9goyt1] {
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: #000000;
    border: 1px solid var(--nav-line);
    border-radius: 999px;
    box-sizing: border-box;
    color: var(--nav-fg);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.55rem;
    letter-spacing: 0.08em;
    overflow: hidden;
    padding: 0.45rem 0.95rem 0.45rem 0.5rem;
    position: relative;
    text-transform: uppercase;
    transition: transform 160ms ease, border-color 200ms ease;
}

.nav-login:hover[b-dfud9goyt1] {
    border-color: rgba(251, 249, 244, 0.4);
}

.nav-login:hover[b-dfud9goyt1] {
    transform: translateY(-1px);
}

.nav-login[b-dfud9goyt1]::after {
    background: var(--chain-hover, #627ee9);
    border-radius: inherit;
    bottom: -1px;
    content: "";
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.nav-login:hover[b-dfud9goyt1]::after {
    transform: scaleX(1);
}

.nav-login .eth-mark[b-dfud9goyt1],
.nav-login__label[b-dfud9goyt1] {
    position: relative;
    z-index: 1;
}

.nav-login--authorized[b-dfud9goyt1] {
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--nav-fg);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-sans);
    gap: 0.6rem;
    padding: 0.35rem 0.85rem 0.35rem 0.35rem;
    text-transform: none;
    transition: background 200ms ease, border-color 200ms ease;
}

.nav-login--authorized[b-dfud9goyt1]::after {
    display: none;
}

.nav-login--authorized:hover[b-dfud9goyt1],
.nav-login.active[b-dfud9goyt1] {
    background: rgba(251, 249, 244, 0.06);
    border-color: rgba(251, 249, 244, 0.12);
}

.nav-login--authorized .eth-mark[b-dfud9goyt1] {
    border-radius: 50%;
    display: block;
    height: 1.8rem;
    width: 1.8rem;
    object-fit: cover;
}

/* The robot occupies the glyph's slot. It brings its own pixel ring and sizes
   itself from --rbt-size, so this only has to keep it out of the ::before
   hover wash the button paints behind its contents.

   ::deep because the class lands on RobotAvatarView's own root element, which
   carries that component's scope attribute and not this file's — without it
   the rule compiles to a selector nothing on the page matches. */
.nav-login--authorized[b-dfud9goyt1]  .nav-login__robot {
    position: relative;
    z-index: 1;
}

.nav-login__text-stack[b-dfud9goyt1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.nav-login__address[b-dfud9goyt1] {
    font-family: var(--crypto-mono, monospace);
    font-size: 0.75rem;
    font-weight: 600;
}

.nav-login__chain[b-dfud9goyt1] {
    color: var(--nav-fg-dim);
    font-size: 0.65rem;
    font-weight: 500;
}

.theme-toggle[b-dfud9goyt1] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--nav-fg);
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    opacity: 0.6;
    padding: 0;
    transition: opacity 160ms ease;
    width: 2rem;
}

.theme-toggle:hover[b-dfud9goyt1] {
    opacity: 1;
}

.theme-toggle__icon[b-dfud9goyt1] {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.nav-cart[b-dfud9goyt1] {
    color: var(--nav-fg);
    cursor: pointer;
    display: inline-flex;
    position: relative;
    text-decoration: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

.nav-cart:hover[b-dfud9goyt1] {
    opacity: 0.7;
    transform: scale(1.05);
}

.nav-cart__badge[b-dfud9goyt1] {
    align-items: center;
    background: var(--nav-fg);
    border-radius: 999px;
    color: var(--nav-bg);
    display: inline-flex;
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 600;
    height: 1.1rem;
    justify-content: center;
    min-width: 1.1rem;
    padding: 0 0.3rem;
    position: absolute;
    right: -0.4rem;
    top: -0.4rem;
}

.eth-mark[b-dfud9goyt1] {
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
    height: 1.7rem;
    object-fit: cover;
    width: 1.7rem;
}

.nav-link--button[b-dfud9goyt1] {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    padding: 0;
}

[b-dfud9goyt1] .nav-link--cta {
    border: 1px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    padding: 0.7rem 1rem;
}

[b-dfud9goyt1] .nav-link--cta.active,
[b-dfud9goyt1] .nav-link--cta:hover {
    background: var(--ink);
    color: var(--surface);
}

/* Dressed to match the storefront's testnet card (TestnetInfoModal.razor.css):
   same #1F1915 roast panel, 12px radius, soft drop shadow, left-aligned
   Playfair title over #e0e0e0 copy, and the same staggered reveal. Both are
   deliberately always-dark overlays, independent of the site theme. */
.wallet-modal[b-dfud9goyt1] {
    align-items: center;
    animation: wallet-backdrop-in-b-dfud9goyt1 500ms ease both;
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    height: 100dvh;
    justify-content: center;
    left: 0;
    overflow-y: auto;
    padding: 1.25rem;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 2000;
}

.wallet-modal__panel[b-dfud9goyt1] {
    animation: wallet-panel-in-b-dfud9goyt1 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
    background-color: #1F1915;
    border: none;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-family: var(--font-sans, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 28rem;
    overflow: hidden;
    padding: 2rem 2.25rem;
    position: relative;
    width: 100%;
}

.wallet-modal__header[b-dfud9goyt1] {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    width: 100%;
}



.wallet-modal__close[b-dfud9goyt1] {
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    border: none;
    border-radius: 50%;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    font-size: 1.25rem;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    transition: background 160ms ease, transform 160ms ease;
    width: 2rem;
    z-index: 10;
}

.wallet-modal__close[b-dfud9goyt1]::before,
.wallet-modal__close[b-dfud9goyt1]::after {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 0.75rem;
}

.wallet-modal__close[b-dfud9goyt1]::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.wallet-modal__close[b-dfud9goyt1]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.wallet-modal__close:hover[b-dfud9goyt1] {
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
    transform: scale(1.05);
}

.wallet-options[b-dfud9goyt1] {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 1.25rem;
}

.wallet-option[b-dfud9goyt1] {
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    height: 4.8rem;
    width: 4.8rem;
    padding: 0;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.wallet-option:hover:not(:disabled)[b-dfud9goyt1] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    transform: translateY(-1px);
}

.wallet-option:focus-visible[b-dfud9goyt1],
.wallet-modal__close:focus-visible[b-dfud9goyt1] {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.wallet-option:disabled[b-dfud9goyt1] {
    cursor: wait;
    opacity: 0.7;
}

.wallet-option__icon[b-dfud9goyt1] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.8rem;
    width: 2.8rem;
}

.wallet-option__icon img[b-dfud9goyt1] {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.wallet-option__icon--metamask img[b-dfud9goyt1] {
    transform: scale(1.1);
}

.wallet-option__icon--coinbase[b-dfud9goyt1] {
    border-radius: 50%;
    overflow: hidden;
}

.wallet-option__icon--phantom[b-dfud9goyt1] {
    background: rgba(171, 152, 255, 0.16);
}

.wallet-option__icon--brave[b-dfud9goyt1] {
    background: rgba(255, 84, 32, 0.14);
}

.wallet-option__icon--other[b-dfud9goyt1] {
    color: rgba(255, 253, 249, 0.6);
}

.wallet-option__icon--other[b-dfud9goyt1]::before {
    color: rgba(255, 253, 249, 0.72);
    content: "...";
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-0.12rem);
}

.wallet-option__icon--brave img[b-dfud9goyt1] {
    height: 100%;
    width: 100%;
}

.wallet-option__copy[b-dfud9goyt1] {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.wallet-option__name[b-dfud9goyt1] {
    color: var(--white);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
}

.wallet-option__meta[b-dfud9goyt1] {
    color: rgba(255, 253, 249, 0.54);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}


/* The testnet card runs title straight into copy, so the rule is dropped
   rather than removed from the markup (it still separates the two for
   assistive tech). */
.wallet-modal__divider[b-dfud9goyt1] {
    display: none;
}

.wallet-modal__description[b-dfud9goyt1] {
    color: #e0e0e0;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
    max-width: none;
    margin: 0;
}

.wallet-modal__note[b-dfud9goyt1] {
    color: #e0e0e0;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.wallet-modal__status[b-dfud9goyt1],
.wallet-modal__error[b-dfud9goyt1] {
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.85rem;
}

.wallet-modal__status[b-dfud9goyt1] {
    background: rgba(194, 164, 125, 0.12);
    color: #e9d7bc;
}

.wallet-modal__title-group[b-dfud9goyt1] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: 2.5rem;
    /* Clearance for network selector */
}

#wallet-modal-title[b-dfud9goyt1] {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    color: #ffffff;
    width: 100%;
    margin: 0;
}

.delete-account-modal__actions[b-dfud9goyt1] {
    display: grid;
    gap: 0.62rem;
    grid-template-columns: 1fr 1fr;
    margin-top: 1.35rem;
}

.delete-account-modal__cancel[b-dfud9goyt1],
.delete-account-modal__confirm[b-dfud9goyt1] {
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    min-height: 2.9rem;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms ease;
}

.delete-account-modal__cancel[b-dfud9goyt1] {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 253, 249, 0.22);
    color: var(--white);
}

.delete-account-modal__cancel:hover:not(:disabled)[b-dfud9goyt1] {
    background: rgba(0, 0, 0, 0.38);
    border-color: rgba(255, 253, 249, 0.32);
}

.delete-account-modal__confirm[b-dfud9goyt1] {
    background: #b23b2f;
    border: 1px solid #b23b2f;
    color: var(--white);
}

.delete-account-modal__confirm:hover:not(:disabled)[b-dfud9goyt1] {
    background: #942f25;
    border-color: #942f25;
    transform: translateY(-1px);
}

.delete-account-modal__cancel:disabled[b-dfud9goyt1],
.delete-account-modal__confirm:disabled[b-dfud9goyt1] {
    cursor: wait;
    opacity: 0.7;
}

.wallet-modal__error[b-dfud9goyt1] {
    background: rgba(255, 106, 86, 0.12);
    color: #ffb0a8;
}

@keyframes wallet-backdrop-in-b-dfud9goyt1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes wallet-panel-in-b-dfud9goyt1 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes wallet-content-in-b-dfud9goyt1 {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes wallet-content-fade-in-b-dfud9goyt1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Staggered content reveal, same cadence as the testnet card */
.wallet-modal__title-group>*[b-dfud9goyt1],
.wallet-options[b-dfud9goyt1] {
    opacity: 0;
    animation: wallet-content-in-b-dfud9goyt1 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Fade only — a forwards-filled transform would freeze out the hover scale. */
.wallet-modal__close[b-dfud9goyt1] {
    opacity: 0;
    animation: wallet-content-fade-in-b-dfud9goyt1 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#wallet-modal-title[b-dfud9goyt1] {
    animation-delay: 350ms;
}

.wallet-modal__description[b-dfud9goyt1] {
    animation-delay: 450ms;
}

.wallet-options[b-dfud9goyt1] {
    animation-delay: 550ms;
}

.wallet-modal__close[b-dfud9goyt1] {
    animation-delay: 600ms;
}

@media (prefers-reduced-motion: reduce) {

    .wallet-modal[b-dfud9goyt1],
    .wallet-modal__panel[b-dfud9goyt1],
    .wallet-modal__title-group>*[b-dfud9goyt1],
    .wallet-options[b-dfud9goyt1],
    .wallet-modal__close[b-dfud9goyt1] {
        animation: none;
        opacity: 1;
    }

    .wallet-modal__panel[b-dfud9goyt1] {
        transform: none;
    }
}

@media (max-width: 520px) {
    .wallet-modal[b-dfud9goyt1] {
        align-items: center;
        padding: 0.75rem;
    }

    .wallet-modal__panel[b-dfud9goyt1] {
        width: 100%;
    }



    .wallet-option__name[b-dfud9goyt1] {
        font-size: 0.94rem;
    }
}

.nav-drawer[b-dfud9goyt1],
.nav-drawer-backdrop[b-dfud9goyt1] {
    display: none;
}

@media (max-width: 760px) {
    .site-nav[b-dfud9goyt1] {
        /* Back to two-up (wordmark + hamburger); the three-track grid has no
           centre item to hold once the link row is hidden. */
        display: flex;
        justify-content: space-between;
        min-height: 3.5rem;
        /* Aumentado de 2.42rem para mejor área táctil */
        padding: 0 clamp(1rem, 4vw, 1.5rem);
    }

    .navbar-brand[b-dfud9goyt1] {
        font-size: 1.4rem;
        /* Aumentado de 1.1rem para darle más presencia */
    }

    .nav-links[b-dfud9goyt1] {
        display: none !important;
    }

    /* Theme toggle, wallet button and cart all live in the drawer below 760px. */
    .nav-utilities[b-dfud9goyt1] {
        display: flex;
    }

    .nav-utilities > *:not(.navbar-toggler)[b-dfud9goyt1] {
        display: none;
    }

    .navbar-toggler[b-dfud9goyt1] {
        display: flex;
        gap: 0.35rem;
        /* Separación ligeramente mayor entre las líneas */
        height: 2.5rem;
        /* Aumentado de 1.87rem */
        width: 2.5rem;
        /* Aumentado de 1.87rem */
        justify-content: center;
        align-items: center;
    }

    .navbar-toggler span[b-dfud9goyt1] {
        width: 1.4rem;
        /* Aumentado de 0.94rem para que el icono se vea más ancho */
        height: 1.5px;
        /* Un poco más de grosor para que no se pierda */
    }

    .site-nav:has(.nav-drawer--open) .navbar-brand[b-dfud9goyt1] {
        visibility: hidden;
    }

    .site-nav:has(.nav-drawer--open) .navbar-toggler span[b-dfud9goyt1] {
        background: #f5f3ee;
    }

    .site-nav:has(.nav-drawer--open) .navbar-toggler span:nth-child(1)[b-dfud9goyt1] {
        transform: translateY(0.35rem) rotate(45deg);
        /* Ajustado por el nuevo gap */
    }

    .site-nav:has(.nav-drawer--open) .navbar-toggler span:nth-child(2)[b-dfud9goyt1] {
        opacity: 0;
    }

    .site-nav:has(.nav-drawer--open) .navbar-toggler span:nth-child(3)[b-dfud9goyt1] {
        transform: translateY(-0.35rem) rotate(-45deg);
        /* Ajustado por el nuevo gap */
    }

    .nav-drawer-backdrop[b-dfud9goyt1] {
        background: rgba(8, 7, 6, 0.55);
        backdrop-filter: blur(6px);
        display: block;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        transition: opacity 320ms ease;
        z-index: 40;
    }

    .nav-drawer-backdrop--open[b-dfud9goyt1] {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-drawer[b-dfud9goyt1] {
        background: var(--surface);
        bottom: 0;
        display: flex;
        flex-direction: column;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        transform: translateX(100%);
        transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 50;
    }

    .nav-drawer--open[b-dfud9goyt1] {
        transform: translateX(0);
    }

    .nav-drawer__header[b-dfud9goyt1] {
        align-items: center;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 1.15rem;
    }

    .nav-drawer__wallet[b-dfud9goyt1] {
        align-items: center;
        display: flex;
        gap: 0.55rem;
        min-width: 0;
    }

    .nav-drawer__wordmark[b-dfud9goyt1] {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 4vw, 1.5rem);
        letter-spacing: -0.04em;
    }

    .nav-drawer__address[b-dfud9goyt1] {
        color: var(--ink);
        font-family: var(--crypto-mono);
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-drawer__close[b-dfud9goyt1] {
        align-items: center;
        background: transparent;
        border: 0;
        color: rgba(45, 36, 33, 0.55);
        cursor: pointer;
        display: inline-flex;
        flex-shrink: 0;
        font-size: 0;
        height: 2.2rem;
        justify-content: center;
        padding: 0;
        position: relative;
        transition: color 180ms ease;
        width: 2.2rem;
    }

    .nav-drawer__close[b-dfud9goyt1]::before,
    .nav-drawer__close[b-dfud9goyt1]::after {
        background: currentColor;
        border-radius: 999px;
        content: "";
        height: 1px;
        left: 50%;
        position: absolute;
        top: 50%;
        width: 1.1rem;
    }

    .nav-drawer__close[b-dfud9goyt1]::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .nav-drawer__close[b-dfud9goyt1]::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .nav-drawer__close:hover[b-dfud9goyt1] {
        color: var(--ink);
    }

    .nav-drawer__body[b-dfud9goyt1] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 0.5rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
    }

    [b-dfud9goyt1] .nav-drawer__chain-selector {
        display: block;
        margin-bottom: 1.5rem;
    }

    [b-dfud9goyt1] .nav-drawer__chain-selector .chain-selector__control::after {
        color: rgba(45, 36, 33, 0.6);
    }

    [b-dfud9goyt1] .nav-drawer__chain-selector .chain-selector__dropdown {
        position: static;
        margin-top: 0.5rem;
        box-shadow: none;
        border: 1px solid rgba(45, 36, 33, 0.08);
        background: rgba(45, 36, 33, 0.035);
    }

    [b-dfud9goyt1] .nav-drawer__chain-selector .chain-selector__option {
        color: var(--ink);
    }

    [b-dfud9goyt1] .nav-drawer__chain-selector .chain-selector__option:hover {
        background: rgba(45, 36, 33, 0.06);
    }

    [b-dfud9goyt1] .nav-drawer__chain-selector .chain-selector__option.selected {
        background: rgba(141, 111, 85, 0.15);
    }

    .nav-drawer__stats[b-dfud9goyt1] {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 1.5rem;
    }

    .nav-drawer__stat[b-dfud9goyt1] {
        background: rgba(45, 36, 33, 0.035);
        border: 1px solid rgba(45, 36, 33, 0.08);
        border-radius: 4px;
        padding: 1.1rem 1.15rem;
    }

    .nav-drawer__stat-label[b-dfud9goyt1] {
        color: rgba(45, 36, 33, 0.5);
        display: block;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
    }

    .nav-drawer__stat-value[b-dfud9goyt1] {
        color: var(--ink);
        display: block;
        font-family: var(--crypto-mono);
        font-size: 1.15rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .nav-drawer__stat-value--pos[b-dfud9goyt1] {
        color: var(--accent);
    }

    .nav-drawer__grid[b-dfud9goyt1] {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(2, 1fr);
    }

    [b-dfud9goyt1] .nav-drawer__tile {
        align-items: center;
        background: rgba(45, 36, 33, 0.035);
        border: 1px solid rgba(45, 36, 33, 0.08);
        border-radius: 4px;
        color: var(--ink);
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        justify-content: center;
        min-height: 6rem;
        padding: 1rem;
        position: relative;
        text-decoration: none;
        transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
    }

    [b-dfud9goyt1] .nav-drawer__tile:hover {
        background: rgba(45, 36, 33, 0.06);
        border-color: rgba(45, 36, 33, 0.16);
        transform: translateY(-2px);
    }

    [b-dfud9goyt1] .nav-drawer__tile.active {
        background: rgba(45, 36, 33, 0.08);
        border-color: rgba(45, 36, 33, 0.22);
    }

    [b-dfud9goyt1] .nav-drawer__tile.active .nav-drawer__tile-label {
        color: var(--accent);
    }

    [b-dfud9goyt1] .nav-drawer__tile.active .nav-drawer__tile-icon svg {
        stroke: var(--accent);
    }

    .nav-drawer__tile-icon[b-dfud9goyt1] {
        color: rgba(45, 36, 33, 0.65);
        line-height: 1;
    }

    .nav-drawer__tile-icon svg[b-dfud9goyt1] {
        stroke: rgba(45, 36, 33, 0.65);
    }

    [b-dfud9goyt1] .nav-drawer__tile:hover .nav-drawer__tile-icon svg {
        stroke: var(--ink);
    }

    .nav-drawer__tile-label[b-dfud9goyt1] {
        color: rgba(45, 36, 33, 0.65);
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        transition: color 180ms ease;
    }

    [b-dfud9goyt1] .nav-drawer__tile:hover .nav-drawer__tile-label {
        color: var(--ink);
    }

    .nav-drawer__tile-badge[b-dfud9goyt1] {
        align-items: center;
        background: var(--accent);
        border-radius: 999px;
        color: var(--surface);
        display: inline-flex;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 0.58rem;
        font-weight: 800;
        height: 1.15rem;
        justify-content: center;
        min-width: 1.15rem;
        padding: 0 0.35rem;
        position: absolute;
        right: 0.65rem;
        top: 0.65rem;
    }

    .nav-drawer__foot[b-dfud9goyt1] {
        border-top: 1px solid rgba(45, 36, 33, 0.08);
        display: grid;
        gap: 0.65rem;
        grid-template-columns: 1fr 1fr;
        padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
    }

    [b-dfud9goyt1] .nav-drawer__cta {
        align-items: center;
        background: var(--ink);
        border: 1px solid var(--ink);
        border-radius: 4px;
        color: var(--surface);
        cursor: pointer;
        display: inline-flex;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 0.65rem;
        font-weight: 800;
        justify-content: center;
        letter-spacing: 0.12em;
        min-height: 2.8rem;
        padding: 0.6rem 1.2rem;
        text-decoration: none;
        text-transform: uppercase;
        transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
    }

    [b-dfud9goyt1] .nav-drawer__cta:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--surface);
        transform: translateY(-1px);
    }

    [b-dfud9goyt1] .nav-drawer__cta--outline {
        background: transparent;
        border-color: rgba(45, 36, 33, 0.18);
        color: var(--ink);
    }

    [b-dfud9goyt1] .nav-drawer__cta--outline:hover {
        background: rgba(45, 36, 33, 0.06);
        border-color: rgba(45, 36, 33, 0.32);
        color: var(--ink);
    }

    .nav-drawer__logout[b-dfud9goyt1] {
        grid-column: 1 / -1;
        margin: 0;
    }

    .nav-drawer__logout button[b-dfud9goyt1] {
        background: transparent;
        border: 0;
        color: rgba(45, 36, 33, 0.42);
        cursor: pointer;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        padding: 0.5rem 0;
        text-align: left;
        text-transform: uppercase;
        transition: color 180ms ease;
        width: 100%;
    }

    .nav-drawer__logout button:hover[b-dfud9goyt1] {
        color: var(--ink);
    }

    .nav-drawer__delete-account[b-dfud9goyt1] {
        grid-column: 1 / -1;
        margin: 0;
    }

    .nav-drawer__delete-account button[b-dfud9goyt1] {
        background: transparent;
        border: 0;
        color: rgba(178, 59, 47, 0.65);
        cursor: pointer;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        padding: 0.5rem 0;
        text-align: left;
        text-transform: uppercase;
        transition: color 180ms ease;
        width: 100%;
    }

    .nav-drawer__delete-account button:hover[b-dfud9goyt1] {
        color: #b23b2f;
    }

    .nav-drawer__theme-toggle[b-dfud9goyt1] {
        background: transparent;
        border: 0;
        color: rgba(45, 36, 33, 0.42);
        cursor: pointer;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 0.62rem;
        font-weight: 700;
        grid-column: 1 / -1;
        letter-spacing: 0.14em;
        margin: 0;
        padding: 0.5rem 0;
        text-align: left;
        text-transform: uppercase;
        transition: color 180ms ease;
        width: 100%;
    }

    .nav-drawer__theme-toggle:hover[b-dfud9goyt1] {
        color: var(--ink);
    }
}

@media (prefers-reduced-motion: reduce) {

    .nav-drawer-backdrop[b-dfud9goyt1],
    .nav-drawer[b-dfud9goyt1] {
        transition: none;
    }

    .nav-drawer[b-dfud9goyt1] {
        transform: translateX(100%);
    }

    .nav-drawer--open[b-dfud9goyt1] {
        transform: translateX(0);
    }
}

.network-selector-wrapper[b-dfud9goyt1] {
    position: relative;
    margin-top: 0.15rem;
}

.network-selector-btn[b-dfud9goyt1] {
    align-items: center;
    background: rgba(30, 15, 5, 0.4);
    border: 1px solid rgba(194, 164, 125, 0.3);
    border-radius: 99px;
    color: rgba(255, 253, 249, 0.85);
    cursor: pointer;
    display: flex;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 0;
    padding: 0.35rem;
    height: 28px;
    min-width: 28px;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    justify-content: center;
}

.network-selector-btn img[b-dfud9goyt1] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.network-selector-btn:hover[b-dfud9goyt1],
.network-selector-btn:focus-visible[b-dfud9goyt1] {
    border-color: #c2a47d;
    background: rgba(30, 15, 5, 0.6);
    color: var(--white);
    outline: none;
    padding: 0.35rem 0.75rem 0.35rem 0.45rem;
    gap: 0.4rem;
}

.network-name[b-dfud9goyt1],
.network-dropdown-icon[b-dfud9goyt1] {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
}

.network-selector-btn:hover .network-name[b-dfud9goyt1],
.network-selector-btn:focus-visible .network-name[b-dfud9goyt1] {
    max-width: 150px;
    opacity: 1;
}

.network-selector-btn:hover .network-dropdown-icon[b-dfud9goyt1],
.network-selector-btn:focus-visible .network-dropdown-icon[b-dfud9goyt1] {
    max-width: 20px;
    opacity: 0.7;
}

.network-dropdown-menu[b-dfud9goyt1] {
    background: rgba(40, 20, 10, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(194, 164, 125, 0.5);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    left: 0;
    list-style: none;
    margin: 0;
    min-width: 140px;
    padding: 0.35rem;
    position: absolute;
    top: calc(100% + 0.5rem);
    z-index: 100;
}

.network-dropdown-menu li[b-dfud9goyt1] {
    margin-bottom: 0.15rem;
}

.network-dropdown-menu li:last-child[b-dfud9goyt1] {
    margin-bottom: 0;
}

.network-dropdown-menu button[b-dfud9goyt1] {
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 253, 249, 0.8);
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 0.6rem;
    text-align: left;
    transition: background 150ms ease, color 150ms ease;
    width: 100%;
}

.network-dropdown-menu button:hover[b-dfud9goyt1] {
    background: rgba(194, 164, 125, 0.15);
    color: var(--white);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-v41lgyqwyu],
.components-reconnect-repeated-attempt-visible[b-v41lgyqwyu],
.components-reconnect-failed-visible[b-v41lgyqwyu],
.components-pause-visible[b-v41lgyqwyu],
.components-resume-failed-visible[b-v41lgyqwyu],
.components-rejoining-animation[b-v41lgyqwyu] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-v41lgyqwyu],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-v41lgyqwyu],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-v41lgyqwyu],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-v41lgyqwyu],
#components-reconnect-modal.components-reconnect-retrying[b-v41lgyqwyu],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-v41lgyqwyu],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-v41lgyqwyu],
#components-reconnect-modal.components-reconnect-failed[b-v41lgyqwyu],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-v41lgyqwyu] {
    display: block;
}


#components-reconnect-modal[b-v41lgyqwyu] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-v41lgyqwyu 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-v41lgyqwyu 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-v41lgyqwyu 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-v41lgyqwyu]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-v41lgyqwyu 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-v41lgyqwyu {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-v41lgyqwyu {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-v41lgyqwyu {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-v41lgyqwyu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-v41lgyqwyu] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-v41lgyqwyu] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-v41lgyqwyu] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-v41lgyqwyu] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-v41lgyqwyu] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-v41lgyqwyu] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-v41lgyqwyu 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-v41lgyqwyu] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-v41lgyqwyu {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/StakingLayout.razor.rz.scp.css */
.page[b-zecgoeogrq] {
    background: var(--stake-bg-deep);
    position: relative;
    min-height: 100vh;
}

/* Transparent so the GlobalScene background scenario shows through; .page
   above keeps the flat --stake-bg-deep ground behind the scene. z-index: 2
   stacks the content over both the scene's under-content container (0) and
   the roaming crew (1, see GlobalScene.razor.css) — text, buttons and
   labels always paint over the robots, never the other way around. */
main[b-zecgoeogrq] {
    background: transparent;
    min-height: 100vh;
    position: relative;
    z-index: 2;
}

.public-main[b-zecgoeogrq] {
    padding-top: 3.325rem;
}

.yield-page-main[b-zecgoeogrq] {
    padding-top: 3.325rem;
}

@media (max-width: 760px) {
    .yield-page-main[b-zecgoeogrq] {
        padding-top: 2.42rem;
    }
}

/* Procurement Lab, the Yield/staking intro, and the PixelHome hero reserve
   header clearance themselves (see .procurement-lab's, .staking-intro's, and
   .ph-hero's padding-top in their own stylesheets), the same
   full-bleed-under-the-fixed-header treatment app.css gives
   .editorial-hero/.journal-hero. Without this override, the outer padding-top
   above leaves a gap that would keep the GlobalScene background scenario
   from running beneath the transparent header. The gradient ground itself
   now belongs to GlobalScene, shared by all three pages. */
.public-page:has(.procurement-lab) .yield-page-main[b-zecgoeogrq],
.public-page:has(.staking-intro) .yield-page-main[b-zecgoeogrq],
.public-page:has(.ph-page) .yield-page-main[b-zecgoeogrq] {
    padding-top: 0;
}

#blazor-error-ui[b-zecgoeogrq] {
    /* See the matching comment in MainLayout.razor.css — same banner, same
       reasoning: deliberately theme-invariant, color-scheme:light-only
       removed since it blocked dark mode outright. */
    background: lightyellow;
    color: #1f1a18;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-zecgoeogrq] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Pages/About.razor.rz.scp.css */
/* /about — the isometric café floor, plus one deep chapter per station.

   Lives in the dark roast wing: StakingLayout wraps the page in .yield-page,
   so the --stake-* tokens from app.css's ".yield-page, .procurement-lab" block
   are in scope. They are referenced as var(--stake-x) directly throughout —
   nested custom-property aliasing does not resolve reliably in this project.

   App.razor gives /about scene route "none", so GlobalScene's pixel space is
   hidden here and .page's flat --stake-bg-deep is the ground the room sits on.
   That is deliberate: a drifting starfield behind an isometric room reads as
   two drawings fighting, and the room already has its own window onto space.

   Geometry: the room is one 272x200 sprite and the six props are separate
   sprites positioned over it in percentages of that source. Everything scales
   off .af-room's width, so the whole floor plan stays in register at every
   viewport with no breakpoint-specific coordinates.

   Below the room, the chapters share one small diagram vocabulary — .af-node,
   .af-flow, .af-tree, .af-notes — rather than each inventing its own boxes.
   Two state modifiers run through all of it: --live (green, running) and --off
   (clay, provisioned but not running), which is the distinction the page is
   actually about. */

.af-page[b-f8uc54wvzo] {
    box-sizing: border-box;
    color: var(--stake-ink);
    font-family: var(--font-sans);
    margin: 0 auto;
    max-width: 78rem;
    min-height: 100dvh;
    padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 8vh, 5rem);
}

.af-page img[b-f8uc54wvzo] {
    image-rendering: pixelated;
}

.af-page code[b-f8uc54wvzo] {
    background: var(--stake-surface-2);
    color: var(--stake-amber);
    font-family: var(--crypto-mono);
    font-size: 0.86em;
    padding: 0.1em 0.35em;
    word-break: break-word;
}

/* ── Intro ───────────────────────────────────────────────────────────────── */

.af-intro[b-f8uc54wvzo] {
    margin: 0 auto clamp(2rem, 5vh, 3.25rem);
    max-width: 42rem;
    text-align: center;
}

.af-eyebrow[b-f8uc54wvzo] {
    color: var(--stake-green);
    font-family: var(--crypto-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 0.9rem;
    text-transform: uppercase;
}

/* 8-bit 3D title, same recipe as .ph-title3d and .story-title3d: white faces
   with a 2px keyline, a stacked hard-edge extrusion stepping down-right, and
   a staggered stepped bob. Each hero keeps its own copy — the originals are
   component-scoped and there is no shared stylesheet to hoist them into. */
.af-title3d[b-f8uc54wvzo] {
    font-family: 'Press Start 2P', var(--crypto-mono);
    font-size: clamp(1.35rem, 4vw, 2.4rem);
    letter-spacing: 0.14em;
    line-height: 1;
    margin: 0 0 1.4rem;
    padding-right: 0.45em; /* keeps the last letter's extrusion on-canvas */
}

.af-title3d__line[b-f8uc54wvzo] {
    display: block;
}

.af-title3d__line + .af-title3d__line[b-f8uc54wvzo] {
    margin-top: 0.75em;
}

.af-title3d__word[b-f8uc54wvzo] {
    display: inline-block;
    white-space: nowrap;
}

.af-title3d__word + .af-title3d__word[b-f8uc54wvzo] {
    margin-left: 1.1em;
}

.af-title3d__letter[b-f8uc54wvzo] {
    animation: af-title3d-bob-b-f8uc54wvzo 2.6s steps(4, end) infinite;
    animation-delay: calc(var(--i) * 120ms);
    color: #FFFDF9;
    display: inline-block;
    text-shadow:
        -2px -2px 0 #0B0806,
        0 -2px 0 #0B0806,
        2px -2px 0 #0B0806,
        -2px 0 0 #0B0806,
        -2px 2px 0 #0B0806,
        2px 2px 0 #2A1C11,
        4px 4px 0 #2A1C11,
        6px 6px 0 #241810,
        8px 8px 0 #1A110A,
        10px 10px 0 #0B0806;
    will-change: transform;
}

@keyframes af-title3d-bob-b-f8uc54wvzo {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -0.22em, 0); }
}

.af-lede[b-f8uc54wvzo] {
    color: rgba(244, 239, 230, 0.85);
    font-family: var(--crypto-mono);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0 auto;
    max-width: 36rem;
}

/* ── Floor plan: room beside the card, stacked under it when narrow ──────── */

.af-floorplan[b-f8uc54wvzo] {
    align-items: center;
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.75rem);
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.af-room[b-f8uc54wvzo] {
    aspect-ratio: 272 / 200;
    margin: 0 auto;
    max-width: 46rem;
    position: relative;
    width: 100%;
}

.af-room__ground[b-f8uc54wvzo] {
    display: block;
    height: 100%;
    width: 100%;
}

/* ── Stations ────────────────────────────────────────────────────────────── */

/* --x/--y are the prop's floor point and --w its width, both as percentages
   of the room sprite; the translate drops the button's base onto that point.
   --z is paint order: a prop nearer the front of the room covers one behind. */
.af-station[b-f8uc54wvzo] {
    background: none;
    border: 0;
    cursor: pointer;
    left: var(--x);
    padding: 0;
    position: absolute;
    top: var(--y);
    transform: translate(-50%, -100%);
    transition: transform 140ms steps(3, end);
    width: var(--w);
    z-index: var(--z);
}

.af-station__prop[b-f8uc54wvzo] {
    display: block;
    height: auto;
    position: relative;
    transition: filter 140ms ease;
    width: 100%;
    z-index: 1;
}

/* The lit floor patch under a prop. A clip-path diamond rather than a border
   box, so the highlight follows the room's isometric grid instead of cutting
   across it at right angles. */
.af-station__spot[b-f8uc54wvzo] {
    aspect-ratio: 2 / 1;
    background: transparent;
    bottom: -6%;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    transition: background-color 140ms ease;
    width: 116%;
}

.af-station:hover .af-station__spot[b-f8uc54wvzo],
.af-station:focus-visible .af-station__spot[b-f8uc54wvzo] {
    background: rgba(229, 192, 120, 0.14);
}

.af-station.is-active .af-station__spot[b-f8uc54wvzo] {
    background: rgba(229, 192, 120, 0.3);
}

/* The dormant station lights clay rather than amber — the same colour its
   standby lamp is drawn in, and the same one --off carries in the chapters
   below, so "not running" reads identically everywhere on the page. */
.af-station--dormant:hover .af-station__spot[b-f8uc54wvzo],
.af-station--dormant:focus-visible .af-station__spot[b-f8uc54wvzo] {
    background: rgba(229, 152, 128, 0.14);
}

.af-station--dormant.is-active .af-station__spot[b-f8uc54wvzo] {
    background: rgba(229, 152, 128, 0.26);
}

@media (hover: hover) and (pointer: fine) {
    .af-station:hover[b-f8uc54wvzo] {
        transform: translate(-50%, calc(-100% - 3px));
    }
}

/* Hard amber keyline traced around the sprite's own silhouette — four 1px
   drop-shadows rather than an outline, which would box the whole sprite. */
.af-station.is-active .af-station__prop[b-f8uc54wvzo] {
    filter:
        drop-shadow(1px 0 0 var(--stake-amber))
        drop-shadow(-1px 0 0 var(--stake-amber))
        drop-shadow(0 1px 0 var(--stake-amber))
        drop-shadow(0 -1px 0 var(--stake-amber));
}

.af-station--dormant.is-active .af-station__prop[b-f8uc54wvzo] {
    filter:
        drop-shadow(1px 0 0 var(--stake-clay))
        drop-shadow(-1px 0 0 var(--stake-clay))
        drop-shadow(0 1px 0 var(--stake-clay))
        drop-shadow(0 -1px 0 var(--stake-clay));
}

.af-station:focus-visible[b-f8uc54wvzo] {
    outline: 2px dashed var(--stake-green);
    outline-offset: 4px;
}

/* Two stepped pixel puffs off the bar and the roaster. Positioned against the
   button, so they ride along with the hover lift. */
.af-station__steam[b-f8uc54wvzo] {
    animation: af-steam-b-f8uc54wvzo 2.4s steps(4, end) infinite;
    background: rgba(244, 239, 230, 0.55);
    height: 5%;
    left: 46%;
    position: absolute;
    top: -6%;
    width: 4%;
    z-index: 1;
}

.af-station__steam[b-f8uc54wvzo]::after {
    animation: af-steam-b-f8uc54wvzo 2.4s steps(4, end) 1.2s infinite;
    background: inherit;
    content: "";
    height: 100%;
    left: 180%;
    position: absolute;
    top: 60%;
    width: 100%;
}

@keyframes af-steam-b-f8uc54wvzo {
    0% { opacity: 0; transform: translateY(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-180%); }
}

/* The station's accessible name, kept in the a11y tree at all times and
   revealed on hover, focus or selection. */
.af-station__name[b-f8uc54wvzo] {
    background: var(--stake-bg-deep);
    border: 1px solid var(--stake-line-strong);
    /* Clear of .af-station__steam, which vents just above the button's top
       edge on the two props that carry it. */
    bottom: calc(100% + 0.9rem);
    color: var(--stake-ink);
    font-family: var(--crypto-mono);
    font-size: 0.55rem;
    font-weight: 800;
    left: 50%;
    letter-spacing: 0.12em;
    opacity: 0;
    padding: 0.28rem 0.45rem;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    transition: opacity 140ms ease;
    white-space: nowrap;
    z-index: 5;
}

.af-station:hover .af-station__name[b-f8uc54wvzo],
.af-station:focus-visible .af-station__name[b-f8uc54wvzo],
.af-station.is-active .af-station__name[b-f8uc54wvzo] {
    opacity: 1;
}

.af-station.is-active .af-station__name[b-f8uc54wvzo] {
    border-color: var(--stake-amber);
    color: var(--stake-amber);
}

.af-station--dormant.is-active .af-station__name[b-f8uc54wvzo] {
    border-color: var(--stake-clay);
    color: var(--stake-clay);
}

/* ── The card the selected station fills ─────────────────────────────────── */

.af-card[b-f8uc54wvzo] {
    background: var(--stake-surface);
    border: 1px solid var(--stake-line-strong);
    padding: clamp(1.25rem, 3vw, 1.85rem);
}

.af-card__label[b-f8uc54wvzo] {
    align-items: center;
    color: var(--stake-green);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--crypto-mono);
    font-size: 0.6rem;
    font-weight: 800;
    gap: 0.5rem;
    letter-spacing: 0.16em;
    margin: 0 0 0.65rem;
}

.af-card__title[b-f8uc54wvzo] {
    color: var(--stake-ink);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.85rem;
}

.af-card__copy[b-f8uc54wvzo] {
    color: var(--stake-muted);
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0 0 1.25rem;
}

.af-card__actions[b-f8uc54wvzo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.af-specs[b-f8uc54wvzo] {
    border-top: 1px solid var(--stake-line);
    margin: 0 0 1.5rem;
}

.af-specs__row[b-f8uc54wvzo] {
    border-bottom: 1px solid var(--stake-line);
    display: grid;
    gap: 0.35rem 1rem;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    padding: 0.6rem 0;
}

.af-specs dt[b-f8uc54wvzo] {
    color: var(--stake-faint);
    font-family: var(--crypto-mono);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding-top: 0.12rem;
}

.af-specs dd[b-f8uc54wvzo] {
    color: var(--stake-ink);
    font-family: var(--crypto-mono);
    font-size: 0.68rem;
    line-height: 1.5;
    margin: 0;
}

/* ── Status tag ──────────────────────────────────────────────────────────── */

.af-tag[b-f8uc54wvzo] {
    border: 1px solid currentColor;
    font-family: var(--crypto-mono);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    padding: 0.16rem 0.38rem;
    white-space: nowrap;
}

.af-tag--off[b-f8uc54wvzo] {
    color: var(--stake-clay);
}

/* ── Clipped pixel CTA — kimi_ui §2.1 recipe ─────────────────────────────── */

.af-cta[b-f8uc54wvzo] {
    align-items: center;
    background: var(--stake-ink);
    border: 0;
    border-radius: 0;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, 100% 3px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) 100%, 6px 100%, 6px calc(100% - 3px), 0 calc(100% - 3px), 0 6px, 3px 6px, 3px 3px, 6px 3px);
    color: var(--stake-bg-deep);
    display: inline-flex;
    filter: drop-shadow(5px 5px 0 var(--stake-copper));
    font-family: var(--crypto-mono);
    font-size: 0.62rem;
    font-weight: 800;
    justify-content: center;
    letter-spacing: 0.12em;
    min-height: 2.75rem;
    padding-inline: 1.35rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 160ms ease, filter 160ms ease, transform 160ms ease-out;
}

.af-cta:hover[b-f8uc54wvzo] {
    background: var(--stake-amber);
    filter: drop-shadow(7px 7px 0 var(--stake-copper));
    transform: translate(-2px, -2px);
}

.af-cta:active[b-f8uc54wvzo] {
    filter: drop-shadow(2px 2px 0 var(--stake-copper));
    transform: scale(0.97);
}

.af-cta:focus-visible[b-f8uc54wvzo] {
    outline: 2px dashed var(--stake-green);
    outline-offset: 4px;
}

.af-cta--ghost[b-f8uc54wvzo] {
    background: var(--stake-surface-2);
    color: var(--stake-ink);
}

.af-cta--ghost:hover[b-f8uc54wvzo] {
    background: var(--stake-amber);
    color: var(--stake-bg-deep);
}

/* ── Chapters ────────────────────────────────────────────────────────────── */

.af-chapter[b-f8uc54wvzo] {
    border-top: 1px solid var(--stake-line);
    margin: clamp(3rem, 9vh, 5rem) auto 0;
    max-width: 62rem;
    padding-top: clamp(1.75rem, 5vh, 2.75rem);
    /* The site header is fixed; without this an anchor jump parks the chapter
       title underneath it. */
    scroll-margin-top: 5rem;
}

.af-chapter__head[b-f8uc54wvzo] {
    margin-bottom: clamp(1.5rem, 4vh, 2.25rem);
    max-width: 44rem;
}

.af-chapter__index[b-f8uc54wvzo] {
    color: var(--stake-copper);
    font-family: 'Press Start 2P', var(--crypto-mono);
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    margin: 0 0 0.9rem;
    text-shadow: 3px 3px 0 #1A110A;
}

.af-chapter__eyebrow[b-f8uc54wvzo] {
    align-items: center;
    color: var(--stake-green);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--crypto-mono);
    font-size: 0.62rem;
    font-weight: 800;
    gap: 0.6rem;
    letter-spacing: 0.16em;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}

.af-chapter--dormant .af-chapter__eyebrow[b-f8uc54wvzo],
.af-chapter--dormant .af-chapter__index[b-f8uc54wvzo] {
    color: var(--stake-clay);
}

.af-chapter__title[b-f8uc54wvzo] {
    color: var(--stake-ink);
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.2vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.9rem;
}

.af-chapter__intro[b-f8uc54wvzo] {
    color: var(--stake-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* ── Diagram shell ───────────────────────────────────────────────────────── */

.af-diagram[b-f8uc54wvzo] {
    background: var(--stake-surface);
    border: 1px solid var(--stake-line-strong);
    margin-bottom: 1.25rem;
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

.af-diagram--dormant[b-f8uc54wvzo] {
    border-color: rgba(229, 152, 128, 0.32);
}

.af-diagram__caption[b-f8uc54wvzo] {
    border-bottom: 1px solid var(--stake-line);
    color: var(--stake-faint);
    font-family: var(--crypto-mono);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin: 0 0 1.1rem;
    padding-bottom: 0.7rem;
    text-transform: uppercase;
}

.af-diagram__note[b-f8uc54wvzo] {
    border-top: 1px solid var(--stake-line);
    color: var(--stake-muted);
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 1.1rem 0 0;
    padding-top: 1rem;
}

/* ── Component tree ──────────────────────────────────────────────────────── */

.af-tree[b-f8uc54wvzo],
.af-tree ul[b-f8uc54wvzo] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.af-tree ul[b-f8uc54wvzo] {
    margin-top: 0.5rem;
    padding-left: 1.1rem;
}

.af-tree li[b-f8uc54wvzo] {
    position: relative;
}

.af-tree li + li[b-f8uc54wvzo] {
    margin-top: 0.5rem;
}

/* Elbow connectors drawn as borders on a pseudo-element, so the tree keeps
   its shape at any font size without box-drawing characters landing in the
   accessibility tree. */
.af-tree ul > li[b-f8uc54wvzo]::before {
    border-bottom: 1px solid var(--stake-line-strong);
    border-left: 1px solid var(--stake-line-strong);
    content: "";
    height: 0.85rem;
    left: -0.75rem;
    position: absolute;
    top: 0;
    width: 0.6rem;
}

.af-tree ul > li:not(:last-child)[b-f8uc54wvzo]::after {
    border-left: 1px solid var(--stake-line-strong);
    bottom: -0.5rem;
    content: "";
    left: -0.75rem;
    position: absolute;
    top: 0.85rem;
}

.af-chip[b-f8uc54wvzo] {
    background: var(--stake-surface-2);
    border: 1px solid var(--stake-line-strong);
    color: var(--stake-ink);
    display: inline-block;
    font-family: var(--crypto-mono);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.3rem 0.55rem;
}

.af-chip--root[b-f8uc54wvzo] {
    border-color: var(--stake-amber);
    color: var(--stake-amber);
}

.af-chip--leaf[b-f8uc54wvzo] {
    color: var(--stake-muted);
}

.af-chip__meta[b-f8uc54wvzo] {
    color: var(--stake-faint);
    display: inline-block;
    font-family: var(--crypto-mono);
    font-size: 0.62rem;
    line-height: 1.5;
    margin-left: 0.6rem;
}

/* ── Flow row ────────────────────────────────────────────────────────────── */

.af-flow[b-f8uc54wvzo] {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.af-flow__step[b-f8uc54wvzo] {
    background: var(--stake-surface-2);
    border: 1px solid var(--stake-line-strong);
    flex: 1 1 8rem;
    min-width: 0;
    padding: 0.7rem 0.75rem;
    position: relative;
}

/* Stepped pixel arrow between steps, drawn on the gap rather than inside a
   box so it never affects the steps' own widths. */
.af-flow__step:not(:last-child)[b-f8uc54wvzo]::after {
    color: var(--stake-copper);
    content: "→";
    font-family: var(--crypto-mono);
    font-size: 0.85rem;
    left: calc(100% + 0.35rem);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.af-flow__step--accent[b-f8uc54wvzo] {
    border-color: var(--stake-amber);
}

.af-flow__step--terminal[b-f8uc54wvzo] {
    border-color: var(--stake-green);
}

.af-flow__name[b-f8uc54wvzo] {
    color: var(--stake-ink);
    display: block;
    font-family: var(--crypto-mono);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.35;
}

.af-flow__note[b-f8uc54wvzo] {
    color: var(--stake-faint);
    display: block;
    font-family: var(--crypto-mono);
    font-size: 0.58rem;
    line-height: 1.4;
    margin-top: 0.28rem;
}

/* ── Resource nodes ──────────────────────────────────────────────────────── */

.af-rack[b-f8uc54wvzo] {
    border: 1px dashed var(--stake-line-strong);
    margin-bottom: 1.1rem;
    padding: 0.9rem;
}

.af-rack__title[b-f8uc54wvzo] {
    color: var(--stake-faint);
    font-family: var(--crypto-mono);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0 0 0.8rem;
    text-transform: uppercase;
}

.af-rack__body[b-f8uc54wvzo],
.af-grid[b-f8uc54wvzo] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.af-grid--tight[b-f8uc54wvzo] {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.af-node[b-f8uc54wvzo] {
    background: var(--stake-surface-2);
    border: 1px solid var(--stake-line-strong);
    min-width: 0;
    padding: 0.7rem 0.75rem;
}

.af-node--live[b-f8uc54wvzo] {
    border-color: rgba(143, 185, 155, 0.5);
}

.af-node--off[b-f8uc54wvzo] {
    background: transparent;
    border-color: rgba(229, 152, 128, 0.3);
    border-style: dashed;
}

.af-node__name[b-f8uc54wvzo] {
    color: var(--stake-ink);
    font-family: var(--crypto-mono);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 0.3rem;
    overflow-wrap: anywhere;
}

.af-node--off .af-node__name[b-f8uc54wvzo] {
    color: var(--stake-muted);
}

.af-node__spec[b-f8uc54wvzo] {
    color: var(--stake-faint);
    font-family: var(--crypto-mono);
    font-size: 0.58rem;
    line-height: 1.55;
    margin: 0;
}

.af-node__spec--on[b-f8uc54wvzo] {
    color: var(--stake-green);
}

.af-node__spec--off[b-f8uc54wvzo] {
    color: var(--stake-clay);
}

/* ── Address list ────────────────────────────────────────────────────────── */

.af-addresses[b-f8uc54wvzo] {
    margin: 0;
}

.af-addresses__row[b-f8uc54wvzo] {
    border-bottom: 1px solid var(--stake-line);
    display: grid;
    gap: 0.2rem 1rem;
    grid-template-columns: 9rem minmax(0, 1fr);
    padding: 0.5rem 0;
}

.af-addresses dt[b-f8uc54wvzo] {
    color: var(--stake-faint);
    font-family: var(--crypto-mono);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.af-addresses dd[b-f8uc54wvzo] {
    color: var(--stake-copper);
    font-family: var(--crypto-mono);
    font-size: 0.62rem;
    margin: 0;
    overflow-wrap: anywhere;
}

/* ── Notes ───────────────────────────────────────────────────────────────── */

.af-notes[b-f8uc54wvzo] {
    margin: 0;
}

.af-notes__row[b-f8uc54wvzo] {
    border-top: 1px solid var(--stake-line);
    display: grid;
    gap: 0.4rem 1.5rem;
    grid-template-columns: 9rem minmax(0, 1fr);
    padding: 1rem 0;
}

.af-notes__row:last-child[b-f8uc54wvzo] {
    border-bottom: 1px solid var(--stake-line);
}

.af-notes--compact .af-notes__row[b-f8uc54wvzo] {
    padding: 0.6rem 0;
}

.af-notes dt[b-f8uc54wvzo] {
    color: var(--stake-amber);
    font-family: var(--crypto-mono);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding-top: 0.2rem;
    text-transform: uppercase;
}

.af-diagram--dormant .af-notes dt[b-f8uc54wvzo] {
    color: var(--stake-clay);
}

.af-notes dd[b-f8uc54wvzo] {
    color: var(--stake-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
}

.af-notes--compact dd[b-f8uc54wvzo] {
    font-family: var(--crypto-mono);
    font-size: 0.66rem;
}

/* ── Blockers ────────────────────────────────────────────────────────────── */

.af-blockers[b-f8uc54wvzo] {
    counter-reset: blocker;
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.af-blockers__item[b-f8uc54wvzo] {
    border-left: 3px solid var(--stake-clay);
    counter-increment: blocker;
    min-width: 0;
    padding-left: 0.9rem;
}

.af-blockers__name[b-f8uc54wvzo] {
    color: var(--stake-ink);
    font-family: var(--crypto-mono);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 0.45rem;
}

.af-blockers__name[b-f8uc54wvzo]::before {
    color: var(--stake-clay);
    content: counter(blocker, decimal-leading-zero) " · ";
}

.af-blockers__copy[b-f8uc54wvzo] {
    color: var(--stake-muted);
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 0;
}

/* ── Outro ───────────────────────────────────────────────────────────────── */

.af-outro[b-f8uc54wvzo] {
    border-top: 1px solid var(--stake-line);
    margin-top: clamp(2.5rem, 7vh, 4rem);
    padding-top: clamp(1.5rem, 4vh, 2.25rem);
    text-align: center;
}

.af-outro__copy[b-f8uc54wvzo] {
    color: var(--stake-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0 auto 1.5rem;
    max-width: 36rem;
}

.af-outro__links[b-f8uc54wvzo] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* ── Narrow viewports ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .af-floorplan[b-f8uc54wvzo] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The label chips are the only affordance a touch user gets before
       tapping, so they stay on permanently once the room is the full width. */
    .af-station__name[b-f8uc54wvzo] {
        font-size: 0.5rem;
        opacity: 1;
    }
}

@media (max-width: 680px) {
    .af-specs__row[b-f8uc54wvzo],
    .af-addresses__row[b-f8uc54wvzo],
    .af-notes__row[b-f8uc54wvzo] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The arrow sits in the horizontal gap; once the steps stack it has to
       point down the column instead. */
    .af-flow__step:not(:last-child)[b-f8uc54wvzo]::after {
        content: "↓";
        left: 50%;
        top: calc(100% + 0.1rem);
        transform: translateX(-50%);
    }

    .af-chip__meta[b-f8uc54wvzo] {
        display: block;
        margin: 0.35rem 0 0;
    }
}

@media (max-width: 520px) {
    /* Below this the chips collide with each other faster than they help;
       the props themselves are still the tap targets and the card names
       whatever was picked. */
    .af-station__name[b-f8uc54wvzo] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .af-title3d__letter[b-f8uc54wvzo],
    .af-station__steam[b-f8uc54wvzo],
    .af-station__steam[b-f8uc54wvzo]::after {
        animation: none;
    }

    .af-station__steam[b-f8uc54wvzo] {
        opacity: 0.7;
    }

    .af-station[b-f8uc54wvzo],
    .af-station__prop[b-f8uc54wvzo],
    .af-station__spot[b-f8uc54wvzo],
    .af-cta[b-f8uc54wvzo] {
        transition: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .af-station:hover[b-f8uc54wvzo] {
            transform: translate(-50%, -100%);
        }
    }

    .af-cta:hover[b-f8uc54wvzo],
    .af-cta:active[b-f8uc54wvzo] {
        transform: none;
    }
}
/* /Components/Pages/Cart.razor.rz.scp.css */
.cart-page[b-k9x0qeidzp] {
    min-height: calc(100dvh - 4.75rem);
    padding: 1rem 0 4rem;
    background: var(--surface);
}

/* ── Status banner ── */
.cart-status[b-k9x0qeidzp] {
    background: var(--accent);
    border-radius: 0.5rem;
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 auto 1.5rem;
    max-width: 720px;
    padding: 0.75rem 1rem;
    text-align: center;
}

/* ── Empty state ── */
.cart-empty[b-k9x0qeidzp] {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: center;
    margin: 0 auto;
    max-width: 420px;
    min-height: calc(100dvh - 12rem);
    padding: 2rem 1.5rem;
    text-align: center;
}

.cart-empty__icon[b-k9x0qeidzp] {
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.cart-empty__title[b-k9x0qeidzp] {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
}

.cart-empty__lede[b-k9x0qeidzp] {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.cart-empty__cta[b-k9x0qeidzp] {
    align-items: center;
    background: var(--charcoal);
    border-radius: 999px;
    color: var(--white);
    display: inline-flex;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: 0.08em;
    margin-top: 0.5rem;
    min-height: 3rem;
    padding: 0.75rem 2rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.cart-empty__cta:hover[b-k9x0qeidzp] {
    box-shadow: 0 4px 16px rgba(31, 26, 24, 0.2);
    transform: translateY(-2px);
}

/* ── Cart card ── */
.cart-card[b-k9x0qeidzp] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 1rem;
    margin: 0 auto;
    max-width: 720px;
    padding: 2.5rem;
}

/* ── Card header ── */
.cart-card__header[b-k9x0qeidzp] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.cart-card__title-group[b-k9x0qeidzp] {
    align-items: baseline;
    display: flex;
    gap: 0.75rem;
}

.cart-card__title[b-k9x0qeidzp] {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
}

.cart-card__count[b-k9x0qeidzp] {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.cart-card__clear[b-k9x0qeidzp] {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: underline;
    text-transform: uppercase;
    transition: color 160ms ease;
}

.cart-card__clear:hover[b-k9x0qeidzp] {
    color: var(--ink);
}

/* ── Items list ── */
.cart-items[b-k9x0qeidzp] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cart-item[b-k9x0qeidzp] {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem 0;
}

.cart-item:first-child[b-k9x0qeidzp] {
    padding-top: 0;
}

.cart-item:last-child[b-k9x0qeidzp] {
    border-bottom: none;
    padding-bottom: 0;
}

/* ── Item media ── */
.cart-item__media[b-k9x0qeidzp] {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
}

.cart-item__image[b-k9x0qeidzp] {
    aspect-ratio: 1;
    background-position: center;
    background-size: cover;
    border-radius: 0.5rem;
    height: 5rem;
    width: 5rem;
}

/* ── Item body ── */
.cart-item__body[b-k9x0qeidzp] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.cart-item__top[b-k9x0qeidzp] {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.cart-item__info[b-k9x0qeidzp] {
    min-width: 0;
}

.cart-item__name[b-k9x0qeidzp] {
    color: var(--ink);
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: color 160ms ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-item__name:hover[b-k9x0qeidzp] {
    color: var(--accent);
}

.cart-item__meta[b-k9x0qeidzp] {
    color: var(--muted);
    font-size: 0.8rem;
    margin: 0.2rem 0 0;
}

.cart-item__price[b-k9x0qeidzp] {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

/* ── Item bottom row ── */
.cart-item__bottom[b-k9x0qeidzp] {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

/* ── Quantity selector ── */
.cart-item__quantity[b-k9x0qeidzp] {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    display: inline-flex;
    gap: 0;
    overflow: hidden;
}

.cart-item__qty-btn[b-k9x0qeidzp] {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: 500;
    height: 2.25rem;
    justify-content: center;
    line-height: 1;
    transition: background 160ms ease;
    width: 2.25rem;
}

.cart-item__qty-btn:hover:not(:disabled)[b-k9x0qeidzp] {
    background: var(--surface-deep);
}

.cart-item__qty-btn:disabled[b-k9x0qeidzp] {
    color: var(--line);
    cursor: not-allowed;
}

.cart-item__qty-value[b-k9x0qeidzp] {
    align-items: center;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    color: var(--ink);
    display: flex;
    font-size: 0.85rem;
    font-weight: 600;
    height: 2.25rem;
    justify-content: center;
    min-width: 2.5rem;
    text-align: center;
}

/* ── Remove button ── */
.cart-item__remove[b-k9x0qeidzp] {
    align-items: center;
    background: none;
    border: 1px solid var(--line);
    border-radius: 0.35rem;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    height: 2.25rem;
    justify-content: center;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
    width: 2.25rem;
}

.cart-item__remove:hover[b-k9x0qeidzp] {
    background: rgba(229, 0, 0, 0.06);
    border-color: #e50000;
    color: #e50000;
}

/* ── Divider ── */
.cart-divider[b-k9x0qeidzp] {
    background: var(--line);
    height: 1px;
    margin: 1.5rem 0;
}

/* ── Summary ── */
.cart-summary[b-k9x0qeidzp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.cart-summary__row[b-k9x0qeidzp] {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.cart-summary__row--total[b-k9x0qeidzp] {
    border-top: 1px solid var(--line);
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.cart-summary__label[b-k9x0qeidzp] {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.cart-summary__row--total .cart-summary__label[b-k9x0qeidzp] {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
}

.cart-summary__value[b-k9x0qeidzp] {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
}

.cart-summary__value--accent[b-k9x0qeidzp] {
    color: #2a9d5c;
    font-weight: 600;
}

.cart-summary__row--total .cart-summary__value[b-k9x0qeidzp] {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
}

/* ── CTA ── */
.cart-cta[b-k9x0qeidzp] {
    align-items: center;
    background: var(--charcoal);
    border-radius: 999px;
    color: var(--white);
    display: flex;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: 0.08em;
    line-height: 1;
    min-height: 3.5rem;
    padding: 1rem 1.5rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 160ms ease, box-shadow 160ms ease;
    width: 100%;
}

.cart-cta:hover[b-k9x0qeidzp] {
    box-shadow: 0 4px 20px rgba(31, 26, 24, 0.25);
    transform: translateY(-2px);
}

.cart-cta svg[b-k9x0qeidzp] {
    flex-shrink: 0;
}

/* Receipt heading is desktop-only; mobile keeps the original stacked look */
.cart-receipt__title[b-k9x0qeidzp] {
    display: none;
}

/* ═══════════════════════════════════════════
   DESKTOP  ≥ 961px — items left, receipt right
   ═══════════════════════════════════════════ */
@media (min-width: 961px) {
    .cart-card[b-k9x0qeidzp] {
        max-width: 1080px;
    }

    .cart-layout[b-k9x0qeidzp] {
        align-items: start;
        display: grid;
        gap: 3rem;
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .cart-main[b-k9x0qeidzp] {
        min-width: 0;
    }

    .cart-divider[b-k9x0qeidzp] {
        display: none;
    }

    .cart-receipt[b-k9x0qeidzp] {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 0.85rem;
        display: flex;
        flex-direction: column;
        padding: 1.75rem;
        position: sticky;
        top: 1.5rem;
    }

    .cart-receipt__title[b-k9x0qeidzp] {
        color: var(--ink);
        display: block;
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0 0 1.25rem;
    }

    .cart-summary[b-k9x0qeidzp] {
        margin-bottom: 1.5rem;
    }
}

/* ═══════════════════════════════════════════
   MOBILE  ≤ 960px
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
    .cart-page[b-k9x0qeidzp] {
        padding: 1rem 0 0;
    }

    /* Override data-animate fade-up opacity */
    .cart-empty[data-animate][b-k9x0qeidzp],
    .cart-card[data-animate][b-k9x0qeidzp] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .cart-empty[data-animate] *[b-k9x0qeidzp],
    .cart-card[data-animate] *[b-k9x0qeidzp] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .cart-status[b-k9x0qeidzp] {
        border-radius: 0;
        margin: 0 0 1rem;
        max-width: none;
    }

    .cart-empty[b-k9x0qeidzp] {
        min-height: calc(100dvh - 8rem);
        padding: 2rem 1.5rem;
    }

    .cart-empty__title[b-k9x0qeidzp] {
        font-size: 1.35rem;
    }

    .cart-card[b-k9x0qeidzp] {
        border: none;
        border-radius: 0;
        max-width: none;
        padding: 1.25rem;
    }

    .cart-card__header[b-k9x0qeidzp] {
        margin-bottom: 1.5rem;
    }

    .cart-card__title[b-k9x0qeidzp] {
        font-size: 1.35rem;
    }

    .cart-card__count[b-k9x0qeidzp] {
        font-size: 0.8rem;
    }

    .cart-item[b-k9x0qeidzp] {
        gap: 1rem;
        padding: 1.25rem 0;
    }

    .cart-item__image[b-k9x0qeidzp] {
        height: 4rem;
        width: 4rem;
    }

    .cart-item__name[b-k9x0qeidzp] {
        font-size: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cart-item__price[b-k9x0qeidzp] {
        font-size: 0.95rem;
    }

    .cart-item__quantity[b-k9x0qeidzp] {
        border-radius: 0.4rem;
    }

    .cart-item__qty-btn[b-k9x0qeidzp] {
        height: 2rem;
        width: 2rem;
    }

    .cart-item__qty-value[b-k9x0qeidzp] {
        height: 2rem;
        min-width: 2rem;
    }

    .cart-item__remove[b-k9x0qeidzp] {
        height: 2rem;
        width: 2rem;
    }

    .cart-divider[b-k9x0qeidzp] {
        margin: 1rem 0;
    }

    .cart-summary[b-k9x0qeidzp] {
        margin-bottom: 1rem;
    }

    .cart-summary__row--total .cart-summary__value[b-k9x0qeidzp] {
        font-size: 1.25rem;
    }

    .cart-cta[b-k9x0qeidzp] {
        font-size: 0.8rem;
        min-height: 3.25rem;
        position: sticky;
        bottom: 0;
        z-index: 10;
    }
}

/* Smaller phones */
@media (max-width: 400px) {
    .cart-card[b-k9x0qeidzp] {
        padding: 1rem;
    }

    .cart-item[b-k9x0qeidzp] {
        gap: 0.75rem;
    }

    .cart-item__image[b-k9x0qeidzp] {
        height: 3.5rem;
        width: 3.5rem;
    }

    .cart-item__name[b-k9x0qeidzp] {
        font-size: 0.95rem;
    }

    .cart-item__price[b-k9x0qeidzp] {
        font-size: 0.9rem;
    }
}
/* /Components/Pages/Checkout.razor.rz.scp.css */
.checkout-page[b-ivxy6nyjnq] {
    margin: 0 auto;
    max-width: 1200px;
    padding-bottom: clamp(3rem, 6vw, 5rem);
    position: relative;
}

.checkout-page__layout[b-ivxy6nyjnq] {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.checkout-main[b-ivxy6nyjnq] {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
}

.checkout-stepper[b-ivxy6nyjnq] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.checkout-stepper__step[b-ivxy6nyjnq] {
    align-items: center;
    color: var(--muted);
    display: flex;
    gap: 0.65rem;
}

.checkout-stepper__step--complete[b-ivxy6nyjnq] {
    color: var(--ink);
}

.checkout-stepper__step--active[b-ivxy6nyjnq] {
    color: var(--ink);
    font-weight: 600;
}

.checkout-stepper__icon[b-ivxy6nyjnq] {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.checkout-stepper__step--active .checkout-stepper__icon[b-ivxy6nyjnq],
.checkout-stepper__step--complete .checkout-stepper__icon[b-ivxy6nyjnq] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--surface);
}

.checkout-stepper__label[b-ivxy6nyjnq] {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.checkout-stepper__divider[b-ivxy6nyjnq] {
    background: var(--line);
    flex: 1 1 3rem;
    height: 1px;
    max-width: 6rem;
    min-width: 2rem;
}

.checkout-payment-method[b-ivxy6nyjnq] {
    align-items: center;
    border: 1px solid var(--line);
    display: flex;
    gap: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    transition: background 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) {
    .checkout-payment-method:hover[b-ivxy6nyjnq] {
        background: var(--surface-deep);
        box-shadow: 0 4px 16px rgba(45, 36, 33, 0.06);
    }
}

.checkout-payment-method__mark[b-ivxy6nyjnq] {
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 4.5rem;
    overflow: hidden;
    width: 4.5rem;
}

.checkout-payment-method__mark img[b-ivxy6nyjnq] {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.checkout-payment-method__copy h2[b-ivxy6nyjnq] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    line-height: 1.15;
    margin: 0 0 0.35rem;
}

.checkout-payment-method__copy p[b-ivxy6nyjnq] {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    margin: 0;
}

.checkout-coupon[b-ivxy6nyjnq] {
    border: 1px solid var(--line);
    display: grid;
    gap: 0.75rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.checkout-coupon label[b-ivxy6nyjnq] {
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.checkout-coupon__form[b-ivxy6nyjnq] {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.checkout-coupon__input[b-ivxy6nyjnq] {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    flex: 1;
    min-height: 3rem;
    padding: 0.75rem 1rem;
}

.checkout-coupon__button[b-ivxy6nyjnq] {
    border-radius: 0;
    flex: 0 0 auto;
}

.checkout-coupon__status[b-ivxy6nyjnq] {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    margin: 0;
}

.checkout-coupon__status--success[b-ivxy6nyjnq] {
    color: var(--accent);
}

.checkout-coupon__status--error[b-ivxy6nyjnq] {
    color: #9a3b2f;
}

.checkout-main--empty .lede[b-ivxy6nyjnq] {
    margin-bottom: 2rem;
}

.checkout-summary--empty .muted[b-ivxy6nyjnq] {
    margin: 0;
}

.checkout-connect[b-ivxy6nyjnq] {
    background: rgba(245, 242, 234, 0.9);
    border: 1px solid rgba(45, 36, 33, 0.12);
    border-radius: 8px;
    padding: clamp(2rem, 6vw, 4rem);
    text-align: center;
}

.checkout-connect h2[b-ivxy6nyjnq] {
    color: var(--ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.05;
    margin: 0 auto 1rem;
    max-width: 36rem;
}

.checkout-connect .lede[b-ivxy6nyjnq] {
    margin: 0 auto 1.5rem;
    max-width: 32rem;
}

.checkout-connect__error[b-ivxy6nyjnq] {
    color: #9a3b2f;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.checkout-wallet-connected[b-ivxy6nyjnq] {
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    margin: 0;
}

.checkout-wallet-connected span[b-ivxy6nyjnq] {
    color: var(--ink);
    font-weight: 600;
}

.checkout-breakdown[b-ivxy6nyjnq] {
    background: var(--surface-deep);
    border: 1px solid var(--line);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.checkout-breakdown__rows[b-ivxy6nyjnq] {
    display: grid;
    gap: 0.85rem;
    margin: 0 0 1.75rem;
}

.checkout-breakdown__row[b-ivxy6nyjnq] {
    align-items: baseline;
    display: flex;
    font-family: 'Inter', sans-serif;
    gap: 1rem;
    justify-content: space-between;
}

.checkout-breakdown__row dt[b-ivxy6nyjnq] {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 500;
    margin: 0;
}

.checkout-breakdown__row dd[b-ivxy6nyjnq] {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.checkout-breakdown__row--rate dd[b-ivxy6nyjnq] {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 400;
}

.checkout-breakdown__row--rate em[b-ivxy6nyjnq] {
    font-style: italic;
}

.checkout-breakdown__row--amount[b-ivxy6nyjnq] {
    border-top: 1px solid var(--line);
    margin-top: 0.5rem;
    padding-top: 0.85rem;
}

.checkout-breakdown__row--amount dd[b-ivxy6nyjnq] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
}

.checkout-breakdown__status[b-ivxy6nyjnq] {
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 600;
    margin: -0.5rem 0 1rem;
}

.checkout-breakdown__error[b-ivxy6nyjnq] {
    color: #9a3b2f;
    font-size: 0.88rem;
    margin: -0.5rem 0 1rem;
}

.checkout-breakdown__cta[b-ivxy6nyjnq] {
    border-radius: 0;
    letter-spacing: 0.12em;
    min-height: 3.25rem;
    width: 100%;
}

.checkout-payment-failure[b-ivxy6nyjnq] {
    background: rgba(245, 242, 234, 0.9);
    border: 1px solid rgba(45, 36, 33, 0.12);
    border-radius: 8px;
    padding: clamp(1.5rem, 3vw, 2rem);
}

.checkout-payment-failure__message[b-ivxy6nyjnq] {
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.checkout-payment-failure__actions[b-ivxy6nyjnq] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkout-payment-failure__try-again[b-ivxy6nyjnq] {
    border-radius: 0;
    flex: 1 1 auto;
    letter-spacing: 0.12em;
    min-height: 3.25rem;
    min-width: 200px;
    padding: 0.75rem 2rem;
}

.checkout-payment-failure__back-home[b-ivxy6nyjnq] {
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: color 180ms ease;
}

.checkout-payment-failure__back-home:hover[b-ivxy6nyjnq] {
    color: var(--ink);
}

.checkout-summary[b-ivxy6nyjnq] {
    align-self: start;
    background: rgba(255, 253, 249, 0.9);
    border: 1px solid var(--line);
    padding: clamp(1.5rem, 3vw, 2rem);
    position: sticky;
    top: 1.5rem;
}

.checkout-summary__title[b-ivxy6nyjnq] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
}

.checkout-summary__product[b-ivxy6nyjnq] {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 1rem;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
}

.checkout-summary__thumb[b-ivxy6nyjnq] {
    aspect-ratio: 1;
    margin-bottom: 0;
}

.checkout-summary__product-name[b-ivxy6nyjnq] {
    color: var(--ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.25;
    margin: 0 0 0.35rem;
}

.checkout-summary__product-price[b-ivxy6nyjnq] {
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    margin: 0;
}

.checkout-summary__product-qty[b-ivxy6nyjnq] {
    color: var(--ink);
    font-weight: 600;
    margin-left: 0.35rem;
}

.checkout-summary-carousel[b-ivxy6nyjnq] {
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
}

.checkout-summary-carousel__track[b-ivxy6nyjnq] {
    align-items: center;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.checkout-summary-carousel__viewport[b-ivxy6nyjnq] {
    min-height: 6.5rem;
    position: relative;
}

.checkout-summary-carousel__slide[b-ivxy6nyjnq] {
    margin-bottom: 0;
}

.checkout-summary-carousel__nav[b-ivxy6nyjnq] {
    align-self: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.35rem;
    height: 2.25rem;
    line-height: 1;
    padding: 0;
    width: 2.25rem;
}

.checkout-summary-carousel__nav:hover:not(:disabled)[b-ivxy6nyjnq] {
    border-color: var(--ink);
}

.checkout-summary-carousel__nav:disabled[b-ivxy6nyjnq] {
    cursor: default;
    opacity: 0.35;
}

.checkout-summary-carousel__dots[b-ivxy6nyjnq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    margin-top: 0.85rem;
}

.checkout-summary-carousel__dot[b-ivxy6nyjnq] {
    background: var(--line);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    height: 0.45rem;
    padding: 0;
    width: 0.45rem;
}

.checkout-summary-carousel__dot--active[b-ivxy6nyjnq] {
    background: var(--ink);
}

.checkout-summary__totals[b-ivxy6nyjnq] {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 1.75rem;
}

.checkout-summary__line[b-ivxy6nyjnq] {
    align-items: baseline;
    display: flex;
    font-family: 'Inter', sans-serif;
    gap: 1rem;
    justify-content: space-between;
}

.checkout-summary__line dt[b-ivxy6nyjnq] {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 500;
    margin: 0;
}

.checkout-summary__line dd[b-ivxy6nyjnq] {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

.checkout-summary__line--total[b-ivxy6nyjnq] {
    border-top: 1px solid var(--line);
    margin-top: 0.5rem;
    padding-top: 0.85rem;
}

.checkout-summary__line--total dt[b-ivxy6nyjnq],
.checkout-summary__line--total dd[b-ivxy6nyjnq] {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.checkout-summary__note[b-ivxy6nyjnq] {
    border: 0;
    color: var(--muted);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.65;
    margin: 0;
    padding: 0;
}

.checkout-summary__badge[b-ivxy6nyjnq] {
    background: var(--ink);
    color: var(--surface);
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.65rem;
    text-transform: uppercase;
}

.checkout-summary--paid[b-ivxy6nyjnq] {
    border-color: var(--ink);
}

.checkout-success__title[b-ivxy6nyjnq] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1;
    margin: 0 0 1rem;
}

.checkout-success__lede[b-ivxy6nyjnq] {
    color: var(--ink);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    margin: 0 0 2rem;
    max-width: 36rem;
}

.checkout-success__receipt[b-ivxy6nyjnq] {
    background: var(--surface-deep);
    border: 1px solid var(--line);
    display: grid;
    gap: 0.85rem;
    margin: 0 0 2rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.checkout-success__receipt-row[b-ivxy6nyjnq] {
    align-items: baseline;
    display: flex;
    font-family: 'Inter', sans-serif;
    gap: 1rem;
    justify-content: space-between;
}

.checkout-success__receipt-row dt[b-ivxy6nyjnq] {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
    margin: 0;
}

.checkout-success__receipt-row dd[b-ivxy6nyjnq] {
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0;
    text-align: right;
}

.checkout-success__receipt-muted[b-ivxy6nyjnq] {
    color: var(--muted);
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
}

.checkout-success__tx[b-ivxy6nyjnq] {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 500;
    word-break: break-all;
}

.checkout-success__wallet[b-ivxy6nyjnq] {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 500;
    word-break: break-all;
}

.checkout-receipt-email[b-ivxy6nyjnq] {
    background: var(--surface-deep);
    border: 1px solid var(--line);
    margin: 0 0 2rem;
    max-width: 28rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.checkout-receipt-email__lede[b-ivxy6nyjnq] {
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0 0 1.25rem;
}

.checkout-receipt-email__form[b-ivxy6nyjnq] {
    display: grid;
    gap: 0.85rem;
}

.checkout-receipt-email__form label[b-ivxy6nyjnq] {
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.checkout-receipt-email__input[b-ivxy6nyjnq] {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    width: 100%;
}

.checkout-receipt-email__input:focus[b-ivxy6nyjnq] {
    border-color: var(--ink);
    outline: none;
}

.checkout-receipt-email__submit[b-ivxy6nyjnq] {
    justify-self: start;
}

.checkout-receipt-email__status[b-ivxy6nyjnq] {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    margin: 0;
}

.checkout-receipt-email__status--success[b-ivxy6nyjnq] {
    color: #326b3a;
}

.checkout-receipt-email__status--error[b-ivxy6nyjnq] {
    color: #b32121;
}

.checkout-success__actions[b-ivxy6nyjnq] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.checkout-success__dev-note[b-ivxy6nyjnq] {
    font-size: 0.82rem;
    margin: 0;
}

.checkout-page--success[b-ivxy6nyjnq] {
    position: relative;
}

.checkout-fireworks[b-ivxy6nyjnq] {
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.checkout-page--success .checkout-page__layout[b-ivxy6nyjnq],
.checkout-page--success .checkout-main[b-ivxy6nyjnq],
.checkout-page--success .checkout-summary[b-ivxy6nyjnq] {
    position: relative;
    z-index: 1;
}

.checkout-fireworks__particle[b-ivxy6nyjnq] {
    background: var(--accent);
    border-radius: 50%;
    height: 5px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 38%;
    width: 5px;
}

.checkout-page--success .checkout-fireworks__particle[b-ivxy6nyjnq] {
    animation: checkout-firework-b-ivxy6nyjnq 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--particle-index) * 90ms);
}

.checkout-fireworks__particle:nth-child(3n)[b-ivxy6nyjnq] {
    background: #c9a227;
    height: 4px;
    width: 4px;
}

.checkout-fireworks__particle:nth-child(3n + 1)[b-ivxy6nyjnq] {
    background: var(--ink);
    height: 3px;
    width: 3px;
}

.checkout-fireworks__particle:nth-child(1)[b-ivxy6nyjnq] { --dx: -140px; --dy: -100px; }
.checkout-fireworks__particle:nth-child(2)[b-ivxy6nyjnq] { --dx: 120px; --dy: -120px; }
.checkout-fireworks__particle:nth-child(3)[b-ivxy6nyjnq] { --dx: -80px; --dy: -150px; }
.checkout-fireworks__particle:nth-child(4)[b-ivxy6nyjnq] { --dx: 160px; --dy: -80px; }
.checkout-fireworks__particle:nth-child(5)[b-ivxy6nyjnq] { --dx: -180px; --dy: -60px; }
.checkout-fireworks__particle:nth-child(6)[b-ivxy6nyjnq] { --dx: 90px; --dy: -140px; }
.checkout-fireworks__particle:nth-child(7)[b-ivxy6nyjnq] { --dx: -40px; --dy: -130px; }
.checkout-fireworks__particle:nth-child(8)[b-ivxy6nyjnq] { --dx: 200px; --dy: -110px; }
.checkout-fireworks__particle:nth-child(9)[b-ivxy6nyjnq] { --dx: -120px; --dy: -90px; }
.checkout-fireworks__particle:nth-child(10)[b-ivxy6nyjnq] { --dx: 60px; --dy: -160px; }
.checkout-fireworks__particle:nth-child(11)[b-ivxy6nyjnq] { --dx: -200px; --dy: -70px; }
.checkout-fireworks__particle:nth-child(12)[b-ivxy6nyjnq] { --dx: 140px; --dy: -130px; }
.checkout-fireworks__particle:nth-child(13)[b-ivxy6nyjnq] { --dx: -60px; --dy: -110px; }
.checkout-fireworks__particle:nth-child(14)[b-ivxy6nyjnq] { --dx: 180px; --dy: -95px; }

@keyframes checkout-firework-b-ivxy6nyjnq {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }

    15% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1);
    }
}

.checkout-summary__paid-total[b-ivxy6nyjnq] {
    color: var(--ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.75rem;
    margin: 0 0 1.25rem;
}

.checkout-order-disclosure[b-ivxy6nyjnq] {
    border-top: 1px solid var(--line);
    padding-top: 0.25rem;
}

.checkout-order-disclosure__summary[b-ivxy6nyjnq] {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-family: 'Inter', sans-serif;
    gap: 0.75rem;
    justify-content: space-between;
    list-style: none;
    padding: 0.85rem 0;
    user-select: none;
}

.checkout-order-disclosure__summary[b-ivxy6nyjnq]::-webkit-details-marker {
    display: none;
}

.checkout-order-disclosure__summary[b-ivxy6nyjnq]::before {
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--ink);
    border-top: 5px solid transparent;
    content: "";
    flex-shrink: 0;
    margin-right: 0.15rem;
    transition: transform 180ms ease;
}

.checkout-order-disclosure[open] .checkout-order-disclosure__summary[b-ivxy6nyjnq]::before {
    transform: rotate(90deg);
}

.checkout-order-disclosure__label[b-ivxy6nyjnq] {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.checkout-order-disclosure__meta[b-ivxy6nyjnq] {
    color: var(--muted);
    font-size: 0.82rem;
}

.checkout-order-disclosure__body[b-ivxy6nyjnq] {
    animation: checkout-disclosure-open-b-ivxy6nyjnq 220ms ease;
    padding-bottom: 0.5rem;
}

@keyframes checkout-disclosure-open-b-ivxy6nyjnq {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.checkout-order-disclosure__items[b-ivxy6nyjnq] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.checkout-order-disclosure__item[b-ivxy6nyjnq] {
    align-items: baseline;
    border-bottom: 1px solid rgba(216, 208, 196, 0.6);
    display: flex;
    font-family: 'Inter', sans-serif;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.65rem 0;
}

.checkout-order-disclosure__item:last-child[b-ivxy6nyjnq] {
    border-bottom: 0;
}

.checkout-order-disclosure__name[b-ivxy6nyjnq] {
    color: var(--ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.98rem;
}

.checkout-order-disclosure__qty-price[b-ivxy6nyjnq] {
    color: var(--muted);
    font-size: 0.85rem;
    text-align: right;
    white-space: nowrap;
}

.checkout-summary__totals--compact[b-ivxy6nyjnq] {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .checkout-page--success .checkout-fireworks__particle[b-ivxy6nyjnq] {
        animation: none;
        display: none;
    }

    .checkout-order-disclosure__body[b-ivxy6nyjnq] {
        animation: none;
    }
}

@media (max-width: 960px) {
    .checkout-page__layout[b-ivxy6nyjnq] {
        grid-template-columns: 1fr;
    }

    .checkout-summary[b-ivxy6nyjnq] {
        position: static;
    }
}

/* Mobile Review Step */
@media (max-width: 960px) {
    .checkout-review[b-ivxy6nyjnq] {
        background: var(--surface);
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0;
    }

    .checkout-review__header[b-ivxy6nyjnq] {
        align-items: center;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 1.25rem;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .checkout-review__back[b-ivxy6nyjnq] {
        align-items: center;
        background: transparent;
        border: none;
        color: var(--ink);
        cursor: pointer;
        display: inline-flex;
        padding: 0.25rem;
    }

    .checkout-review__back svg[b-ivxy6nyjnq] {
        height: 1.25rem;
        width: 1.25rem;
    }

    .checkout-review__header-title[b-ivxy6nyjnq] {
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .checkout-review__header-brand[b-ivxy6nyjnq] {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 600;
    }

    .checkout-review__section[b-ivxy6nyjnq] {
        padding: 0 1.25rem;
    }

    .checkout-review__section-title[b-ivxy6nyjnq] {
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        margin: 0 0 0.75rem;
        text-transform: uppercase;
    }

    .checkout-review__items[b-ivxy6nyjnq] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .checkout-review-item[b-ivxy6nyjnq] {
        align-items: flex-start;
        border-bottom: 1px solid var(--line);
        display: flex;
        gap: 0.85rem;
        padding: 0.85rem 0;
    }

    .checkout-review-item:last-child[b-ivxy6nyjnq] {
        border-bottom: none;
    }

    .checkout-review-item__image[b-ivxy6nyjnq] {
        border-radius: 6px;
        flex-shrink: 0;
        height: 4rem;
        overflow: hidden;
        width: 4rem;
    }

    .checkout-review-item__image img[b-ivxy6nyjnq],
    .checkout-review-item__image .image-frame[b-ivxy6nyjnq] {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    .checkout-review-item__info[b-ivxy6nyjnq] {
        flex: 1;
        min-width: 0;
    }

    .checkout-review-item__name[b-ivxy6nyjnq] {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: 0.95rem;
        line-height: 1.25;
        margin: 0 0 0.15rem;
    }

    .checkout-review-item__detail[b-ivxy6nyjnq] {
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 0.8rem;
        margin: 0 0 0.35rem;
    }

    .checkout-review-item__badge[b-ivxy6nyjnq] {
        background: var(--surface-deep);
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--ink);
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        padding: 0.2rem 0.55rem;
        text-transform: uppercase;
    }

    .checkout-review-item__price-qty[b-ivxy6nyjnq] {
        text-align: right;
    }

    .checkout-review-item__price[b-ivxy6nyjnq] {
        color: var(--ink);
        font-family: var(--font-sans);
        font-size: 0.85rem;
        font-weight: 600;
        margin: 0 0 0.15rem;
    }

    .checkout-review-item__qty[b-ivxy6nyjnq] {
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 0.75rem;
        margin: 0;
    }

    .checkout-review__box[b-ivxy6nyjnq] {
        align-items: flex-start;
        border: 1px solid var(--line);
        border-radius: 8px;
        display: flex;
        gap: 0.75rem;
        padding: 1rem;
        position: relative;
    }

    .checkout-review__box-inner[b-ivxy6nyjnq] {
        flex: 1;
        min-width: 0;
    }

    .checkout-review__box-header[b-ivxy6nyjnq] {
        align-items: center;
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .checkout-review__box-icon[b-ivxy6nyjnq] {
        font-size: 1rem;
        line-height: 1;
    }

    .checkout-review__box-icon-img[b-ivxy6nyjnq] {
        border-radius: 50%;
        flex-shrink: 0;
        height: 1.5rem;
        width: 1.5rem;
    }

    .checkout-review__box-body[b-ivxy6nyjnq] {
        flex: 1;
        min-width: 0;
    }

    .checkout-review__box-name[b-ivxy6nyjnq] {
        color: var(--ink);
        font-family: var(--font-sans);
        font-size: 0.9rem;
        font-weight: 600;
        margin: 0 0 0.15rem;
    }

    .checkout-review__box-address[b-ivxy6nyjnq] {
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 0.82rem;
        margin: 0;
    }

    .checkout-review__box-status[b-ivxy6nyjnq] {
        color: #326b3a;
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        margin: 0.15rem 0 0;
        text-transform: uppercase;
    }

    .checkout-review__box-action[b-ivxy6nyjnq] {
        background: transparent;
        border: none;
        color: var(--accent);
        cursor: pointer;
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        padding: 0;
        text-transform: uppercase;
    }

    .checkout-review__box--wallet[b-ivxy6nyjnq] {
        align-items: center;
    }

    .checkout-review__summary[b-ivxy6nyjnq] {
        display: grid;
        gap: 0.65rem;
        margin: 0;
    }

    .checkout-review__summary-row[b-ivxy6nyjnq] {
        align-items: baseline;
        display: flex;
        font-family: var(--font-sans);
        gap: 1rem;
        justify-content: space-between;
    }

    .checkout-review__summary-row dt[b-ivxy6nyjnq] {
        color: var(--muted);
        font-size: 0.85rem;
        font-weight: 500;
        margin: 0;
    }

    .checkout-review__summary-row dd[b-ivxy6nyjnq] {
        color: var(--ink);
        font-size: 0.9rem;
        font-weight: 600;
        margin: 0;
    }

    .checkout-review__summary-free[b-ivxy6nyjnq] {
        color: #326b3a;
        font-weight: 700;
    }

    .checkout-review__section--total[b-ivxy6nyjnq] {
        border-top: 1px solid var(--line);
        padding-top: 1.25rem;
    }

    .checkout-review__total-label[b-ivxy6nyjnq] {
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        margin: 0 0 0.35rem;
        text-transform: uppercase;
    }

    .checkout-review__total[b-ivxy6nyjnq] {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: 1.75rem;
        font-weight: 600;
        margin: 0;
    }

    .checkout-review__disclaimer[b-ivxy6nyjnq] {
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 0.75rem;
        line-height: 1.5;
        margin: 0;
        padding: 0 1.25rem 6rem;
        text-align: center;
    }

    .checkout-review__disclaimer a[b-ivxy6nyjnq] {
        color: var(--accent);
        text-decoration: underline;
    }

    .checkout-review__sticky-cta[b-ivxy6nyjnq] {
        background: linear-gradient(transparent, var(--surface) 30%);
        bottom: 0;
        left: 0;
        padding: 0.75rem 1.25rem 1.25rem;
        position: fixed;
        right: 0;
        z-index: 50;
    }

    .checkout-review__sticky-cta-inner[b-ivxy6nyjnq] {
        padding-bottom: env(safe-area-inset-bottom, 0.5rem);
    }

    .checkout-review__cta-button[b-ivxy6nyjnq] {
        align-items: center;
        background: var(--charcoal);
        border: none;
        border-radius: 999px;
        color: var(--white);
        cursor: pointer;
        display: flex;
        font-family: var(--font-sans);
        font-size: 0.85rem;
        font-weight: 700;
        gap: 0.5rem;
        justify-content: center;
        letter-spacing: 0.08em;
        min-height: 3.5rem;
        padding: 1rem 1.5rem;
        text-transform: uppercase;
        width: 100%;
    }

    .checkout-review__back-to-review[b-ivxy6nyjnq] {
        background: transparent;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font-family: var(--font-sans);
        font-size: 0.85rem;
        margin-bottom: 1rem;
        padding: 0;
        text-align: left;
        text-decoration: underline;
    }

    .checkout-review__back-to-review:hover[b-ivxy6nyjnq] {
        color: var(--ink);
    }

    /* Override data-animate opacity for payment step on mobile */
    .checkout-main:not(.checkout-review) [data-animate][b-ivxy6nyjnq] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    /* Payment step mobile styles */
    .checkout-main:not(.checkout-review)[b-ivxy6nyjnq] {
        padding: 0 1.25rem 1.5rem;
    }

    .checkout-main:not(.checkout-review) .checkout-stepper[b-ivxy6nyjnq] {
        margin-top: 0.5rem;
    }

    .checkout-main:not(.checkout-review) .checkout-wallet-connected[b-ivxy6nyjnq] {
        margin-top: 0.5rem;
    }

    .checkout-payment-method[b-ivxy6nyjnq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-top: 0.5rem;
        padding: 1.25rem;
    }

    .checkout-payment-method__mark img[b-ivxy6nyjnq] {
        height: 48px;
        width: 48px;
    }

    .checkout-coupon[b-ivxy6nyjnq] {
        margin-top: 0.5rem;
    }

    .checkout-coupon__form[b-ivxy6nyjnq] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .checkout-coupon__input[b-ivxy6nyjnq] {
        width: 100%;
    }

    .checkout-breakdown[b-ivxy6nyjnq] {
        margin-top: 0.5rem;
    }

    .checkout-breakdown__cta[b-ivxy6nyjnq] {
        margin-top: 1.5rem;
        width: 100%;
        min-height: 3.5rem;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* Hide sidebar on mobile for payment step */
    .checkout-main:not(.checkout-review) + .checkout-summary[b-ivxy6nyjnq] {
        display: none;
    }

    .checkout-payment-failure[b-ivxy6nyjnq] {
        margin-top: 1rem;
    }
}
/* /Components/Pages/Intro.razor.rz.scp.css */
.intro-stage[b-eu4w1qqu1c] {
    --bg: #050403;
    --ink: #f5efe4;
    --ink-dim: rgba(245, 239, 228, 0.56);
    --accent: #c9a063;
    --glow: rgba(201, 160, 99, 0.24);
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-caption: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    z-index: 2000;
}

.intro-grain[b-eu4w1qqu1c] {
    position: absolute;
    inset: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.intro-vignette[b-eu4w1qqu1c] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 46%, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.55) 100%);
}

.intro-glow[b-eu4w1qqu1c] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(60vw, 640px);
    height: min(60vw, 640px);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--glow) 0%, transparent 68%);
    filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    animation: introGlowIn-b-eu4w1qqu1c 2.2s ease-out forwards, introGlowBreathe-b-eu4w1qqu1c 5.5s ease-in-out 2.2s infinite;
}

.intro-content[b-eu4w1qqu1c] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6vw;
    text-align: center;
}

.intro-title[b-eu4w1qqu1c] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.32em;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.3rem, 7vw, 5.2rem);
    letter-spacing: -0.04em;
    color: var(--ink);
    text-wrap: balance;
}

.intro-word[b-eu4w1qqu1c] {
    display: inline-flex;
}

.intro-letter[b-eu4w1qqu1c] {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em) scale(0.94);
    filter: blur(7px);
    animation: introLetterIn-b-eu4w1qqu1c 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(0.35s + var(--i) * 55ms);
}

.intro-rule[b-eu4w1qqu1c] {
    --rule-width: 72px;
    margin-top: 1.6rem;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: introRuleIn-b-eu4w1qqu1c 0.85s cubic-bezier(0.22, 1, 0.36, 1) 2s forwards;
}

.intro-tagline[b-eu4w1qqu1c] {
    margin: 1.1rem 0 0;
    font-family: var(--font-caption);
    font-size: clamp(0.66rem, 1.1vw, 0.78rem);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-dim);
    opacity: 0;
    transform: translateY(6px);
    animation: introTagIn-b-eu4w1qqu1c 1s ease-out 2.55s forwards;
}

.intro-replay-zone[b-eu4w1qqu1c] {
    position: absolute;
    inset: auto 0 0 0;
    height: 18vh;
    min-height: 96px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 26px;
    pointer-events: auto;
}

.intro-replay-hint[b-eu4w1qqu1c] {
    margin: 0;
    font-family: var(--font-caption);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 239, 228, 0.3);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.intro-replay-zone:hover .intro-replay-hint[b-eu4w1qqu1c] {
    opacity: 1;
}

@keyframes introGlowIn-b-eu4w1qqu1c {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes introGlowBreathe-b-eu4w1qqu1c {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes introLetterIn-b-eu4w1qqu1c {
    60% { filter: blur(0); }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes introRuleIn-b-eu4w1qqu1c {
    to { width: var(--rule-width); }
}

@keyframes introTagIn-b-eu4w1qqu1c {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-glow[b-eu4w1qqu1c], .intro-letter[b-eu4w1qqu1c], .intro-rule[b-eu4w1qqu1c], .intro-tagline[b-eu4w1qqu1c] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .intro-rule[b-eu4w1qqu1c] { width: var(--rule-width) !important; }
}
/* /Components/Pages/ProductDetails.razor.rz.scp.css */
:host[b-uh48vay072], .product-detail-card[b-uh48vay072] {
    /* Catalog design line — mirrors Styles/catalog.input.css @theme's --color-*
       values, which is only linked on Products.razor, so this page declares its
       own copy. Keep these in sync by hand with catalog.input.css; do not
       repoint them at app.css's --ink/--surface/etc., which is a different,
       intentionally-distinct palette (see the comment in catalog.input.css).
       --card-bg (#ffffff) has no catalog equivalent — it's this page's own
       "white card on cream page" surface, one step lighter than --card-surface. */
    --card-bg: #ffffff;
    --card-surface: #f5f2ec;
    --card-ink: #1c1b1a;
    --card-muted: #8b8880;
    --card-faint: #a9a49b;
    --card-accent: #e8781e;
    --card-line: #e5e0d8;
    --card-meta: rgba(28, 27, 26, 0.5);
    --card-positive: #47614e;
}

:has(.product-detail-card) .content[b-uh48vay072] {
    background: var(--card-surface);
    height: calc(100dvh - 4.75rem);
    overflow: hidden;
    padding: 0;
}

/* Three tracks — thumbnail rail, image stage, buy column — with the two gutters
   as their own grid columns because the rail sits much closer to the stage than
   the copy does (a single column-gap can't express that). Mobile restacks them
   into one column further down. */
.product-detail-card[b-uh48vay072] {
    background: var(--card-bg);
    display: grid;
    grid-template-areas: "back" "stage" "rail" "info";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 0 auto auto 1fr;
    height: 100%;
    min-height: calc(100dvh + 5rem);
    overflow-y: auto;
    position: relative;
}

/* Floating, minimal controls overlaid on the image */
.product-detail-card__back a[b-uh48vay072],
.product-detail-card__action-icon[b-uh48vay072] {
    align-items: center;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.82);
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(28, 27, 26, 0.12);
    color: var(--card-ink);
    cursor: pointer;
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    top: 1rem;
    transition: background 180ms ease, transform 120ms ease;
    width: 2.5rem;
    z-index: 20;
}

/* Zero-height row on mobile: the control floats over the image instead. */
.product-detail-card__back[b-uh48vay072] {
    grid-area: back;
    margin: 0;
}

.product-detail-card__back a[b-uh48vay072] {
    font-size: 1.2rem;
    font-weight: 300;
    left: 1rem;
    text-decoration: none;
}

.product-detail-card__back-label[b-uh48vay072] {
    display: none;
}

.product-detail-card__action-icon[b-uh48vay072] {
    right: 1rem;
}

.product-detail-card__back a:hover[b-uh48vay072],
.product-detail-card__action-icon:hover[b-uh48vay072] {
    background: #ffffff;
    transform: translateY(-1px);
}

/* ── Image stage ─────────────────────────────────────────────────────────── */

.product-detail-card__media[b-uh48vay072] {
    background: var(--card-surface);
    grid-area: stage;
    min-width: 0;
    position: relative;
}

.product-detail-card__image[b-uh48vay072] {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.pdp-stage__badge[b-uh48vay072] {
    align-items: center;
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(28, 27, 26, 0.12);
    color: var(--card-ink);
    display: inline-flex;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.4rem;
    left: 1rem;
    padding: 0.5rem 0.9rem 0.5rem 0.75rem;
    position: absolute;
    top: 1rem;
    z-index: 10;
}

.pdp-stage__nav[b-uh48vay072] {
    bottom: 1rem;
    display: flex;
    gap: 0.6rem;
    position: absolute;
    right: 1rem;
    z-index: 10;
}

.pdp-stage__nav button[b-uh48vay072] {
    align-items: center;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(28, 27, 26, 0.14);
    color: var(--card-ink);
    cursor: pointer;
    display: inline-flex;
    height: 2.6rem;
    justify-content: center;
    padding: 0;
    transition: transform 120ms ease, background 180ms ease;
    width: 2.6rem;
}

.pdp-stage__nav button:hover[b-uh48vay072] {
    background: var(--card-surface);
    transform: translateY(-1px);
}

/* ── Thumbnail rail ──────────────────────────────────────────────────────── */

/* flex-start, not the default stretch: as a row the thumbs' aspect-ratio height
   would otherwise resolve against a flex line that is itself still zero-high,
   and they collapse to their borders. */
.pdp-rail[b-uh48vay072] {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;
    grid-area: rail;
    min-width: 0;
    scrollbar-width: none;
}

.pdp-rail[b-uh48vay072]::-webkit-scrollbar {
    display: none;
}

.pdp-rail__thumb[b-uh48vay072] {
    aspect-ratio: 1;
    background: var(--card-surface);
    border: 1px solid transparent;
    border-radius: 0.6rem;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: border-color 160ms ease, opacity 160ms ease;
}

.pdp-rail__thumb img[b-uh48vay072] {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.pdp-rail__thumb:hover[b-uh48vay072] {
    border-color: var(--card-line);
}

.pdp-rail__thumb--active[b-uh48vay072],
.pdp-rail__thumb--active:hover[b-uh48vay072] {
    border-color: var(--card-ink);
}

/* ── Buy column ──────────────────────────────────────────────────────────── */

/* Rhythm is per-block, not a uniform flex gap: tight inside logical groups
   (title → subtitle → price), larger between groups. */
.product-detail-card__sheet[b-uh48vay072] {
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    grid-area: info;
    min-width: 0;
    position: relative;
    z-index: 5;
}

.product-detail-card__header[b-uh48vay072] {
    min-width: 0;
    text-align: left;
}

.product-detail-card__name[b-uh48vay072] {
    color: var(--card-ink);
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
    min-width: 0;
}

.product-detail-card__subtitle[b-uh48vay072] {
    color: var(--card-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.98rem;
    margin: 0.25rem 0 0;
}

.product-detail-card__price[b-uh48vay072] {
    color: var(--card-ink);
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    margin: 1.1rem 0 0;
}

.pdp-buy[b-uh48vay072] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;
}

.pdp-buy__row[b-uh48vay072] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.pdp-buy__label[b-uh48vay072] {
    color: var(--card-ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Pill stepper to match .btn-add-cart and the catalog's rounded-full buttons */
.quantity-selector[b-uh48vay072] {
    align-items: center;
    border: 1px solid var(--card-line);
    border-radius: 999px;
    display: inline-flex;
    height: 2.75rem;
    overflow: hidden;
}

.quantity-btn[b-uh48vay072] {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--card-ink);
    cursor: pointer;
    display: inline-flex;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    height: 100%;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background 180ms ease;
    width: 2.4rem;
}

.quantity-btn:hover:not(:disabled)[b-uh48vay072] {
    background: rgba(28, 27, 26, 0.06);
}

.quantity-btn:disabled[b-uh48vay072] {
    color: rgba(28, 27, 26, 0.28);
    cursor: not-allowed;
    opacity: 0.45;
}

.quantity-value[b-uh48vay072] {
    align-items: center;
    color: var(--card-ink);
    display: inline-flex;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    height: 100%;
    justify-content: center;
    min-width: 1.8rem;
    padding: 0 0.25rem;
}

.btn-add-cart[b-uh48vay072],
.btn-favorite[b-uh48vay072] {
    align-items: center;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    gap: 0.5rem;
    justify-content: center;
    min-height: 3.4rem;
    padding: 0.6rem 1.5rem;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
    width: 100%;
}

.btn-add-cart[b-uh48vay072] {
    background: var(--card-ink);
    border: 1px solid var(--card-ink);
    color: #f5f3ee;
}

.btn-add-cart:hover:not(:disabled)[b-uh48vay072] {
    background: var(--card-accent);
    border-color: var(--card-accent);
}

.btn-add-cart:disabled[b-uh48vay072] {
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-favorite[b-uh48vay072] {
    background: transparent;
    border: 1px solid var(--card-line);
    color: var(--card-ink);
}

.btn-favorite:hover[b-uh48vay072] {
    border-color: var(--card-ink);
}

.pdp-note[b-uh48vay072] {
    margin-top: 1.75rem;
}

.pdp-note__title[b-uh48vay072] {
    color: var(--card-ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.pdp-note__body[b-uh48vay072] {
    color: var(--card-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0.35rem 0 0;
}

/* ── Details below the buy box ───────────────────────────────────────────── */

.pdp-details[b-uh48vay072] {
    margin-top: 2rem;
}

.product-detail-card__stamp[b-uh48vay072] {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    margin: 0;
}

.product-detail-card__stamp-icon[b-uh48vay072] {
    align-items: center;
    background: var(--card-positive);
    border-radius: 50%;
    color: #fffdf9;
    display: inline-flex;
    flex-shrink: 0;
    height: 1.1rem;
    justify-content: center;
    width: 1.1rem;
}

.product-detail-card__stamp-label[b-uh48vay072] {
    color: var(--card-ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
}

.product-detail-card__desc[b-uh48vay072] {
    color: var(--card-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0.6rem 0 0;
}

.product-detail-card__allergens[b-uh48vay072] {
    color: var(--card-meta);
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    margin: 0.5rem 0 0;
}

.product-detail-card__badges[b-uh48vay072] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

.product-detail-card__cert-badge[b-uh48vay072] {
    align-items: center;
    border: 1.5px solid var(--card-ink);
    border-radius: 0.5rem;
    color: var(--card-ink);
    display: inline-flex;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    height: 1.7rem;
    justify-content: center;
    width: 1.7rem;
}

.product-detail-card__divider[b-uh48vay072] {
    background: var(--card-line);
    border: none;
    height: 1px;
    margin: 1.5rem 0;
}

.product-detail-card__media-row[b-uh48vay072] {
    align-items: center;
    color: inherit;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    text-decoration: none;
}

.product-detail-card__media-row-label[b-uh48vay072] {
    color: var(--card-ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0;
    max-width: 65%;
}

.product-detail-card__media-row-thumb[b-uh48vay072] {
    align-items: center;
    background-color: var(--card-accent);
    background-position: center;
    background-size: cover;
    border-radius: 0.75rem;
    display: flex;
    flex-shrink: 0;
    height: 3.6rem;
    justify-content: center;
    position: relative;
    width: 4.8rem;
}

.product-detail-card__media-row-play[b-uh48vay072] {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    color: var(--card-ink);
    display: inline-flex;
    height: 1.65rem;
    justify-content: center;
    width: 1.65rem;
}

.product-detail-card__section-header[b-uh48vay072] {
    color: var(--card-ink);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}

.product-detail-card__highlights[b-uh48vay072] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.product-detail-card__highlight[b-uh48vay072] {
    color: var(--card-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.product-detail-card__highlight-divider[b-uh48vay072] {
    color: var(--card-faint);
}

.product-detail--empty h1[b-uh48vay072] {
    color: var(--card-ink);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
}

.product-detail--empty .lede[b-uh48vay072] {
    color: var(--card-muted);
}

/* Entry animations from card transition. The clone from productTransition.js
   lands exactly on the image stage and cross-fades into the real image, so
   only the rail and the buy column's copy animate — staggered, one item at a
   time. */
.product-detail-hero--from-card .pdp-rail[b-uh48vay072],
.product-detail-hero--from-card .product-detail-card__sheet > *[b-uh48vay072] {
    opacity: 0;
}

.product-detail-hero--from-card.product-detail-hero--ready .pdp-rail[b-uh48vay072],
.product-detail-hero--from-card.product-detail-hero--ready .product-detail-card__sheet > *[b-uh48vay072] {
    animation: product-detail-item-in-b-uh48vay072 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.product-detail-hero--from-card.product-detail-hero--ready .pdp-rail[b-uh48vay072] { animation-delay: 100ms; }
.product-detail-hero--from-card.product-detail-hero--ready .product-detail-card__sheet > *:nth-child(1)[b-uh48vay072] { animation-delay: 120ms; }
.product-detail-hero--from-card.product-detail-hero--ready .product-detail-card__sheet > *:nth-child(2)[b-uh48vay072] { animation-delay: 160ms; }
.product-detail-hero--from-card.product-detail-hero--ready .product-detail-card__sheet > *:nth-child(3)[b-uh48vay072] { animation-delay: 200ms; }
.product-detail-hero--from-card.product-detail-hero--ready .product-detail-card__sheet > *:nth-child(4)[b-uh48vay072] { animation-delay: 240ms; }
.product-detail-hero--from-card.product-detail-hero--ready .product-detail-card__sheet > *:nth-child(5)[b-uh48vay072] { animation-delay: 280ms; }
.product-detail-hero--from-card.product-detail-hero--ready .product-detail-card__sheet > *:nth-child(6)[b-uh48vay072] { animation-delay: 320ms; }
.product-detail-hero--from-card.product-detail-hero--ready .product-detail-card__sheet > *:nth-child(7)[b-uh48vay072] { animation-delay: 360ms; }
.product-detail-hero--from-card.product-detail-hero--ready .product-detail-card__sheet > *:nth-child(8)[b-uh48vay072] { animation-delay: 400ms; }

@keyframes product-detail-item-in-b-uh48vay072 {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile */
@media (max-width: 960px) {
    .product-detail-card[b-uh48vay072] {
        /* Pin the sheet to the viewport so it is not clipped by the parent
           .content container and stays independent of header/layout shifts.
           Covers almost the full height, rounded top — the same sheet metaphor
           as the filter receipt on /products. */
        border-radius: 1.25rem 1.25rem 0 0;
        bottom: 0;
        box-shadow: 0 -16px 48px rgba(28, 27, 26, 0.2);
        height: 94dvh;
        left: 0;
        min-height: 94dvh;
        position: fixed;
        right: 0;
        width: 100%;
        z-index: 100;

        /* The rail row is sized explicitly rather than left `auto`: it is a
           horizontal scroll container, and next to a copy row that already
           overflows the fixed-height sheet its automatic contribution resolves
           to zero, which drops the thumbnails behind the copy. One row of
           3.6rem thumbs plus the rail's own 1.5rem of padding. */
        grid-template-rows: 0 auto calc(3.6rem + 1.5rem) 1fr;
    }

    .product-detail-card__media[b-uh48vay072] {
        height: 46dvh;
    }

    /* The rail is the first band of the white sheet on mobile, so it carries the
       rounded lift over the image that the copy panel carries on desktop. */
    .pdp-rail[b-uh48vay072] {
        background: var(--card-bg);
        border-radius: 1.5rem 1.5rem 0 0;
        margin-top: -1.5rem;
        overflow-x: auto;
        padding: 1.25rem 1.5rem 0.25rem;
        position: relative;
        z-index: 5;
    }

    .pdp-rail__thumb[b-uh48vay072] {
        height: 3.6rem;
        width: 3.6rem;
    }

    /* Bottom-left, so it never lands under the floating back control. */
    .pdp-stage__badge[b-uh48vay072] {
        bottom: 1rem;
        top: auto;
    }

    .product-detail-card__sheet[b-uh48vay072] {
        /* Keep the add-to-cart bar clearly above the mobile browser chrome. */
        padding: 1.25rem 1.5rem calc(max(2rem, env(safe-area-inset-bottom)) + 4.5rem);
    }

    /* Bottom-sheet entry: same appear motion as the filter receipt sheet
       (drawer curve, 440ms). Pure CSS (not a JS-added class) so the very
       first painted frame is already translated down — no flash of the
       resting position. */
    .product-detail-card:not(.product-detail-sheet-dismiss-clone)[b-uh48vay072] {
        animation: pd-sheet-enter-b-uh48vay072 440ms cubic-bezier(0.32, 0.72, 0, 1) both;
        will-change: transform;
    }
}

@keyframes pd-sheet-enter-b-uh48vay072 {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Overlay snapshot used to dismiss the sheet downward while the list
   renders behind it (cloned to <body>, so it carries the scope attribute).
   Mirrors the mobile sheet geometry: almost full height, rounded top. */
.product-detail-sheet-dismiss-clone[b-uh48vay072] {
    background: var(--card-bg);
    border-radius: 1.25rem 1.25rem 0 0;
    bottom: 0;
    box-shadow: 0 -16px 48px rgba(28, 27, 26, 0.2);
    height: 94dvh;
    left: 0;
    min-height: 94dvh;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: auto;
    will-change: transform;
    z-index: 1000;
}

/* Desktop: rail | square image stage | buy column, centred in the viewport.
   --pdp-stage is the whole layout's one free dimension: the stage is square and
   as large as the shorter of (viewport height less its padding) and (viewport
   width less every fixed track beside it), so the three columns always fit
   without scrolling. productTransition.js recomputes this same expression to
   aim the shared-element flight — see the :root block in app.css. */
@media (min-width: 961px) {
    .product-detail-card[b-uh48vay072] {
        --pdp-stage: min(
            calc(100dvh - 2 * var(--pdp-pad-y)),
            calc(100vw - (2 * var(--pdp-pad-x) + var(--pdp-rail) + var(--pdp-rail-gap) + var(--pdp-col-gap) + var(--pdp-info)))
        );

        align-content: center;
        grid-template-areas:
            "rail . stage . back"
            "rail . stage . info";
        grid-template-columns:
            var(--pdp-rail)
            var(--pdp-rail-gap)
            var(--pdp-stage)
            var(--pdp-col-gap)
            var(--pdp-info);
        grid-template-rows: auto auto;
        height: 100dvh;
        inset: 0;
        justify-content: center;
        min-height: 100dvh;
        overflow: hidden;
        position: fixed;
        width: 100%;
        z-index: 100;
    }

    /* Both centre themselves: when the buy column is the taller of the two, the
       rows it defines are deeper than the stage, and start-aligned artwork would
       leave all of that slack pooled underneath it. */
    .product-detail-card__media[b-uh48vay072] {
        align-self: center;
        border-radius: var(--pdp-stage-radius);
        height: var(--pdp-stage);
        overflow: hidden;
    }

    /* Exactly the stage's height, not merely capped by it, so the first
       thumbnail lines up with the top edge of the artwork. */
    .pdp-rail[b-uh48vay072] {
        align-self: center;
        flex-direction: column;
        height: var(--pdp-stage);
        overflow-y: auto;
    }

    .pdp-rail__thumb[b-uh48vay072] {
        width: 100%;
    }

    .product-detail-card__action-icon[b-uh48vay072] {
        height: 2.75rem;
        right: 1rem;
        top: 1.5rem;
        width: 2.75rem;
    }

    /* Back leaves the artwork and becomes a plain link heading the buy column. */
    .product-detail-card__back a[b-uh48vay072] {
        align-items: center;
        backdrop-filter: none;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        color: var(--card-muted);
        display: inline-flex;
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        font-weight: 500;
        gap: 0.45rem;
        height: auto;
        left: auto;
        margin-bottom: 1.25rem;
        position: static;
        top: auto;
        width: auto;
    }

    .product-detail-card__back a:hover[b-uh48vay072] {
        background: transparent;
        color: var(--card-ink);
        transform: none;
    }

    .product-detail-card__back-label[b-uh48vay072] {
        display: inline;
    }

    .product-detail-card__sheet[b-uh48vay072] {
        /* The back link above it already spends part of the stage's height. */
        max-height: calc(100dvh - 2 * var(--pdp-pad-y) - 3rem);
        overflow-y: auto;
        padding-right: 0.5rem;
        scrollbar-width: thin;
    }

    .product-detail-card__name[b-uh48vay072] {
        font-size: 1.85rem;
    }

    .product-detail-card__subtitle[b-uh48vay072] {
        font-size: 1.05rem;
    }

    .product-detail-card__price[b-uh48vay072] {
        font-size: 1.1rem;
    }

    .product-detail-card__desc[b-uh48vay072] {
        font-size: 0.95rem;
    }

    .product-detail-card__stamp-label[b-uh48vay072] {
        font-size: 0.9rem;
    }

    .product-detail-card__allergens[b-uh48vay072] {
        font-size: 0.8rem;
    }

    .product-detail-card__cert-badge[b-uh48vay072] {
        font-size: 0.78rem;
        height: 1.9rem;
        width: 1.9rem;
    }

    .product-detail-card__media-row-label[b-uh48vay072] {
        font-size: 0.98rem;
    }

    .product-detail-card__media-row-thumb[b-uh48vay072] {
        height: 4.2rem;
        width: 5.6rem;
    }

    .product-detail-card__section-header[b-uh48vay072] {
        font-size: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-detail-hero--from-card .pdp-rail[b-uh48vay072],
    .product-detail-hero--from-card .product-detail-card__sheet > *[b-uh48vay072],
    .product-detail-card:not(.product-detail-sheet-dismiss-clone)[b-uh48vay072] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
/* /Components/Pages/Products.razor.rz.scp.css */
.product-grid-wrapper[b-ayqf5xrn6p] {
    opacity: 1;
    will-change: opacity;
}

.product-grid-wrapper.is-fading-out[b-ayqf5xrn6p] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.product-grid-wrapper.is-fading-in[b-ayqf5xrn6p] {
    opacity: 0;
    pointer-events: none;
}

.product-grid-wrapper:not(.is-fading-out)[b-ayqf5xrn6p] {
    transition: opacity 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .product-grid-wrapper[b-ayqf5xrn6p],
    .product-grid-wrapper.is-fading-out[b-ayqf5xrn6p],
    .product-grid-wrapper.is-fading-in[b-ayqf5xrn6p] {
        transition: none;
    }
}

.marketplace-card[b-ayqf5xrn6p] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.marketplace-card__link[b-ayqf5xrn6p] {
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    text-decoration: none;
}

.marketplace-card__link:hover .image-frame[b-ayqf5xrn6p] {
    opacity: 0.94;
}

.marketplace-card__link:focus-visible[b-ayqf5xrn6p] {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.marketplace-card__actions[b-ayqf5xrn6p] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
}

.marketplace-card__add[b-ayqf5xrn6p] {
    flex: 1 1 8rem;
    min-width: 0;
}

.marketplace-card__title-row[b-ayqf5xrn6p] {
    align-items: baseline;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.marketplace-card__title-row h3[b-ayqf5xrn6p] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketplace-card__title-row .price[b-ayqf5xrn6p] {
    flex: none;
    white-space: nowrap;
}

/* ── Roastery paper shop: shared tokens + banner (all viewports) ── */
/* Thin aliases onto app.css's canonical site tokens (always loaded, so no
   fallback literal needed) — --shop-accent/--shop-tint-* stay their own
   values, a deliberately distinct storefront accent. */
.products-shop[b-ayqf5xrn6p] {
    --shop-cream: var(--surface);
    --shop-ink: var(--ink);
    --shop-muted: var(--muted);
    --shop-line: var(--line);
    --shop-accent: #b8532e;
    --shop-tint-beans: #b8532e;
    --shop-tint-equipment: #6f7a5e;
    --shop-tint-ceramics: #b08d6a;
    --shop-serif: var(--font-display);
}

.products-shop__header[b-ayqf5xrn6p] {
    align-items: center;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    justify-content: center;
    min-height: 12.5rem;
    overflow: hidden;
    padding: 3.5rem 1rem 2.75rem;
    position: relative;
}

/* animated coffee backdrop with sepia grade */
.products-shop__header[b-ayqf5xrn6p]::before {
    animation: shop-banner-pan-b-ayqf5xrn6p 26s ease-in-out infinite alternate;
    background: center / cover no-repeat;
    content: "";
    filter: sepia(0.85) saturate(1.15) brightness(0.55) contrast(1.05);
    inset: -10%;
    position: absolute;
    z-index: -1;
}

.products-shop__header--All[b-ayqf5xrn6p]::before {
    background-image: url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1200&q=80');
}

.products-shop__header--Beans[b-ayqf5xrn6p]::before {
    background-image: url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1200&q=80');
}

.products-shop__header--BrewingEquipment[b-ayqf5xrn6p]::before {
    background-image: url('https://images.unsplash.com/photo-1544787219-7f47ccb76574?auto=format&fit=crop&w=1200&q=80');
}

.products-shop__header--CeramicsAndGoods[b-ayqf5xrn6p]::before {
    background-image: url('https://images.unsplash.com/photo-1572119865084-43c285814d63?auto=format&fit=crop&w=1200&q=80');
}

@keyframes shop-banner-pan-b-ayqf5xrn6p {
    from {
        transform: scale(1) translateX(0);
    }

    to {
        transform: scale(1.14) translateX(-2.5%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .products-shop__header[b-ayqf5xrn6p]::before {
        animation: none;
    }
}

.products-shop__title[b-ayqf5xrn6p] {
    color: #fbf9f4;
    font-family: var(--shop-serif);
    font-size: clamp(2.5rem, 12vw, 3.6rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.98;
    margin: 0 0 0.7rem;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
}

/* plain ampersand instead of Playfair's swash glyph */
.products-shop__title[b-ayqf5xrn6p]  .products-shop__amp {
    font-family: var(--font-sans);
    font-size: 0.72em;
    font-weight: 400;
}

.products-shop__lede[b-ayqf5xrn6p] {
    color: rgba(251, 249, 244, 0.82);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 20rem;
    text-align: center;
}

.marketplace-card__wishlist[b-ayqf5xrn6p] {
    align-items: center;
    background: rgba(251, 249, 244, 0.85);
    border-radius: 50%;
    color: var(--shop-ink);
    display: flex;
    height: 1.9rem;
    justify-content: center;
    position: absolute;
    right: 0.45rem;
    top: 0.55rem;
    width: 1.9rem;
    z-index: 2;
}

.marketplace-card__wishlist svg[b-ayqf5xrn6p] {
    height: 1rem;
    width: 1rem;
}

/* ── Mobile product-listing-page: roastery paper edition ── */
@media (max-width: 760px) {
    .products-shop[b-ayqf5xrn6p] {
        background-color: var(--shop-cream);
        color: var(--shop-ink);
        /* pulls the banner flush against the shortened mobile nav, closing the leftover whitespace above it */
        margin: calc(-1.25rem - 36.5px) -1.25rem -1.25rem;
        padding: 1.5rem 0 2rem;
        position: relative;
    }

    .products-shop__header[b-ayqf5xrn6p] {
        margin: -1.5rem 0 0;
    }

    /* longer category names need a smaller cap so they stay on one line */
    .products-shop__header--Beans .products-shop__title[b-ayqf5xrn6p],
    .products-shop__header--BrewingEquipment .products-shop__title[b-ayqf5xrn6p] {
        font-size: clamp(1.9rem, 9vw, 3.6rem);
    }

    .category-filter[b-ayqf5xrn6p] {
        border-bottom: 1px solid var(--shop-line);
        display: flex;
        gap: 1.4rem;
        list-style: none;
        margin: 0;
        overflow-x: auto;
        padding: 0 1rem;
        scrollbar-width: none;
        white-space: nowrap;
    }

    .category-filter[b-ayqf5xrn6p]::-webkit-scrollbar {
        display: none;
    }

    .category-filter li[b-ayqf5xrn6p] {
        color: var(--shop-muted);
        cursor: pointer;
        flex: none;
        font-family: var(--font-sans);
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        padding: 0.7rem 0 0.8rem;
        position: relative;
        transition: color 160ms ease;
    }

    .category-filter li.active[b-ayqf5xrn6p] {
        border-bottom: 0;
        color: var(--shop-ink);
        font-weight: 700;
    }

    .category-filter li:not(.active):active[b-ayqf5xrn6p] {
        opacity: 0.6;
    }

    /* hairline editorial grid via borders so empty cells stay clean */
    [b-ayqf5xrn6p] .product-grid {
        gap: 0;
        grid-template-columns: repeat(2, 1fr);
    }

    .marketplace-card[b-ayqf5xrn6p] {
        background: var(--shop-cream);
        border-bottom: 1px solid var(--shop-line);
        gap: 0;
        min-width: 0;
        padding: 0 0 0.9rem;
    }

    .marketplace-card:hover[b-ayqf5xrn6p] {
        transform: none;
    }

    .marketplace-card:nth-child(odd)[b-ayqf5xrn6p] {
        border-right: 1px solid var(--shop-line);
    }

    .marketplace-card__link[b-ayqf5xrn6p] {
        display: block;
        flex: none;
    }

    .marketplace-card .image-frame[b-ayqf5xrn6p] {
        aspect-ratio: 1 / 1;
        border-radius: 0;
        margin: 0;
        position: relative;
    }

    .marketplace-card .image-frame[b-ayqf5xrn6p]::before {
        border-radius: inherit;
        content: "";
        inset: 0;
        mix-blend-mode: multiply;
        opacity: 0.16;
        position: absolute;
        z-index: 1;
    }

    .marketplace-card .image-frame--coldbrew[b-ayqf5xrn6p]::before {
        background-color: var(--shop-tint-beans);
    }

    .marketplace-card .image-frame--equipment[b-ayqf5xrn6p]::before {
        background-color: var(--shop-tint-equipment);
    }

    .marketplace-card .image-frame--ceramics[b-ayqf5xrn6p]::before {
        background-color: var(--shop-tint-ceramics);
    }

    .marketplace-card__copy[b-ayqf5xrn6p] {
        padding: 0.7rem 0.75rem 0;
    }

    .marketplace-card__title-row[b-ayqf5xrn6p] {
        margin: 0 0 0.3rem;
    }

    .marketplace-card .price[b-ayqf5xrn6p] {
        color: var(--shop-ink);
        font-family: var(--shop-serif);
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0;
    }

    .marketplace-card h3[b-ayqf5xrn6p] {
        color: var(--shop-ink);
        font-family: var(--shop-serif);
        font-size: 0.95rem;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.22;
        margin: 0;
        text-transform: none;
    }

    .marketplace-card .eyebrow[b-ayqf5xrn6p] {
        color: var(--shop-muted);
        font-family: var(--font-sans);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        margin: 0 0 0.45rem;
        text-transform: uppercase;
    }

    .marketplace-card__footer[b-ayqf5xrn6p] {
        margin-top: auto;
        padding: 0.65rem 0.75rem 0;
    }

    .marketplace-card__actions[b-ayqf5xrn6p] {
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.4rem;
        margin: 0;
        padding: 0;
    }

    .marketplace-card[b-ayqf5xrn6p]  .product-qty,
    .marketplace-card--qty-expanded[b-ayqf5xrn6p]  .product-qty {
        display: inline-flex !important;
        justify-content: flex-start !important;
    }

    .marketplace-card[b-ayqf5xrn6p]  .product-qty__btn {
        background: transparent;
        border-color: var(--shop-line);
        border-radius: 50%;
        color: var(--shop-ink);
        height: 1.5rem;
        width: 1.5rem;
    }

    .marketplace-card[b-ayqf5xrn6p]  .product-qty__value {
        color: var(--shop-ink);
        font-family: var(--shop-serif);
        font-size: 0.85rem;
        min-width: 1.2rem;
    }

    .marketplace-card__add[b-ayqf5xrn6p] {
        flex: 1 1 auto;
        background: transparent;
        border: 1.5px solid var(--shop-ink);
        border-radius: 0.35rem;
        color: var(--shop-ink);
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.15;
        min-height: 2.4rem;
        min-width: 0;
        padding: 0.4rem 0.4rem;
        text-align: center;
        text-transform: uppercase;
        white-space: normal;
        transition: background 160ms ease, color 160ms ease, transform 120ms ease;
    }

    .marketplace-card__add:hover[b-ayqf5xrn6p] {
        background: var(--shop-ink);
        color: var(--shop-cream);
    }

    .marketplace-card__add:active[b-ayqf5xrn6p] {
        transform: scale(0.97);
    }

    .marketplace-card__add:disabled[b-ayqf5xrn6p] {
        opacity: 0.6;
    }
}

/* ── Desktop product-listing-page ── */
@media (min-width: 761px) {
    .products-shop__header[b-ayqf5xrn6p] {
        border-radius: 0;
        /* flush against the nav and content edges, same treatment as mobile —
           frees up vertical room for the grid instead of floating in a card */
        margin: calc(-1 * clamp(1.25rem, 3vw, 3rem)) calc(-1 * clamp(1.25rem, 3vw, 3rem)) 1.75rem;
        min-height: clamp(16rem, 32dvh, 21rem);
        padding: 4.5rem 2rem 3.5rem;
    }

    .products-shop__title[b-ayqf5xrn6p] {
        font-size: clamp(3rem, 5vw, 4.25rem);
        margin-bottom: 0.85rem;
    }

    .products-shop__lede[b-ayqf5xrn6p] {
        font-size: 0.92rem;
        max-width: 30rem;
    }

    .category-filter[b-ayqf5xrn6p] {
        margin-bottom: 2.5rem;
    }

    /* full-bleed grid: cancel .content's side gutter so cards run edge to edge */
    .product-grid-wrapper[b-ayqf5xrn6p] {
        margin-inline: calc(-1 * clamp(1.25rem, 3vw, 3rem));
    }

    /* harmonize desktop cards with the mobile roastery look */
    .marketplace-card .image-frame[b-ayqf5xrn6p] {
        border-radius: 0.6rem;
        margin-bottom: 0.95rem;
        position: relative;
    }

    .marketplace-card h3[b-ayqf5xrn6p] {
        color: var(--shop-ink);
        font-family: var(--shop-serif);
        font-size: 1.08rem;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.25;
        margin: 0;
        text-transform: none;
    }

    .marketplace-card .price[b-ayqf5xrn6p] {
        color: var(--shop-ink);
        font-family: var(--shop-serif);
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0;
    }

    .marketplace-card__wishlist[b-ayqf5xrn6p] {
        height: 2.2rem;
        right: 0.7rem;
        top: 0.7rem;
        width: 2.2rem;
    }

    .marketplace-card__footer[b-ayqf5xrn6p] {
        margin-top: auto;
    }
}

@media (min-width: 1200px) {
    [b-ayqf5xrn6p] .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ── Mobile catalog: filters live in a bottom sheet, not above the grid ── */
.catalog-filter-bar[b-ayqf5xrn6p],
.catalog-filter-backdrop[b-ayqf5xrn6p],
.catalog-filter-sheet__header[b-ayqf5xrn6p] {
    display: none;
}

@media (max-width: 1023px) {
    .catalog-filter-bar[b-ayqf5xrn6p] {
        align-items: center;
        display: flex;
        flex: none;
        gap: 1rem;
        justify-content: flex-end;
        margin: 0;
        padding: 0 1rem;
    }

    .catalog-filter-bar__trigger[b-ayqf5xrn6p] {
        align-items: center;
        background: var(--color-ink, #1c1b1a);
        border: 1px solid var(--color-ink, #1c1b1a);
        border-radius: 999px;
        color: var(--color-cream, #f5f2ec);
        cursor: pointer;
        display: inline-flex;
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem;
        font-weight: 600;
        gap: 0.45rem;
        letter-spacing: 0.02em;
        padding: 0.55rem 1rem;
        transition: background 160ms ease, transform 120ms ease;
    }

    .catalog-filter-bar__trigger:hover[b-ayqf5xrn6p] {
        background: var(--color-accent, #e8781e);
        border-color: var(--color-accent, #e8781e);
    }

    .catalog-filter-bar__trigger:active[b-ayqf5xrn6p] {
        transform: scale(0.97);
    }

    .catalog-filter-bar__count[b-ayqf5xrn6p] {
        align-items: center;
        background: var(--color-accent, #e8781e);
        border-radius: 999px;
        display: inline-flex;
        font-size: 0.66rem;
        font-weight: 700;
        height: 1.05rem;
        justify-content: center;
        min-width: 1.05rem;
        padding: 0 0.25rem;
    }

    .catalog-filter-bar__section[b-ayqf5xrn6p] {
        color: var(--color-mute, #8b8880);
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .catalog-filter-backdrop[b-ayqf5xrn6p] {
        background: rgba(28, 27, 26, 0.35);
        display: block;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        transition: opacity 240ms ease;
        z-index: 90;
    }

    .catalog-filter-backdrop.is-open[b-ayqf5xrn6p] {
        opacity: 1;
        pointer-events: auto;
    }

    .catalog-filter-sheet[b-ayqf5xrn6p] {
        background: var(--color-cream, #f5f2ec);
        border-radius: 1.25rem 1.25rem 0 0;
        bottom: 0;
        box-shadow: 0 -16px 48px rgba(28, 27, 26, 0.2);
        left: 0;
        max-height: 86dvh;
        overflow-y: auto;
        padding: 0.25rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom));
        position: fixed;
        right: 0;
        transform: translateY(105%);
        transition: transform 440ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 440ms;
        visibility: hidden;
        z-index: 95;
    }

    .catalog-filter-sheet.is-open[b-ayqf5xrn6p] {
        transform: translateY(0);
        transition-delay: 0s;
        visibility: visible;
    }

    .catalog-filter-sheet__header[b-ayqf5xrn6p] {
        align-items: center;
        display: flex;
        justify-content: center;
        min-height: 2.5rem;
        position: relative;
    }

    .catalog-filter-sheet__grabber[b-ayqf5xrn6p] {
        background: var(--color-line, #e5e0d8);
        border-radius: 999px;
        height: 0.3rem;
        width: 2.5rem;
    }

    .catalog-filter-sheet__done[b-ayqf5xrn6p] {
        background: transparent;
        border: 0;
        color: var(--color-accent, #e8781e);
        cursor: pointer;
        font-family: 'Inter', sans-serif;
        font-size: 0.82rem;
        font-weight: 700;
        padding: 0.5rem 0;
        position: absolute;
        right: 0;
    }

    @media (prefers-reduced-motion: reduce) {
        .catalog-filter-sheet[b-ayqf5xrn6p],
        .catalog-filter-backdrop[b-ayqf5xrn6p],
        .catalog-filter-bar__trigger[b-ayqf5xrn6p] {
            transition: none;
        }
    }
}

/* Desktop: the page wrapper's pt-6/lg:px-8 padding (Products.razor,
   class="catalog-shell") reserves breathing room the grid still needs on its
   right edge, but it also pushes the sidebar column down/right away from the
   header and viewport edge. Cancelling top padding here works (0 specificity
   tie broken in our favor); left doesn't: Tailwind's lg:px-8 sets the
   physical padding-left via the `padding-inline` shorthand, and catalog.css
   loads after this scoped bundle, so at equal specificity it wins that tie
   regardless. Margin doesn't share a property with padding, so a negative
   margin-left sidesteps the fight entirely — and unlike a negative
   margin-top, it's on the main (horizontal) axis of the row, so it doesn't
   feed into align-items: stretch's cross-size math and can't inflate the
   column's height the way that did. */
@media (min-width: 1024px) {
    .catalog-shell[b-ayqf5xrn6p] {
        /* Kill the centered max-width box so the sidebar can sit flush
           against the viewport edge instead of being trapped inside a
           1280px island. The grid area still has lg:px-8 right padding. */
        margin-inline: 0;
        max-width: none;
        padding-top: 0;
    }

    .catalog-filter-sheet[b-ayqf5xrn6p] {
        /* Matches --surface-deep (FilterSidebar.razor.css .filter-panel). The
           sticky panel has to be shorter than this column for sticky to have
           any room to hold — that's unavoidable, and once scroll passes the
           bottom of the grid it detaches and settles at the column's end,
           same as any sticky sidebar. Painting the column this color means
           whatever sliver shows below the panel at that point reads as more
           panel, not a gap — no need to fight the detach itself. */
        background-color: var(--surface-deep);
        margin-left: -2rem;
        margin-bottom: -6rem; /* Extends the column into the pb-24 padding of .catalog-shell */
        padding-bottom: 6rem; /* Prevents the sticky panel from entering the padded area */
    }
}

/* ── Mobile-only category sub-navbar (Adidas-style horizontal scroll tabs) ── */
/* Hidden on desktop where the FilterSidebar already handles category selection. */
.catalog-subnav[b-ayqf5xrn6p] {
    display: none;
}

@media (max-width: 1023px) {
    .catalog-subnav[b-ayqf5xrn6p] {
        align-items: stretch;
        border-bottom: 1px solid var(--color-line, #e5e0d8);
        display: flex;
        margin: 0 -1rem 1rem;
        padding: 0;
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--color-cream, #f5f2ec);
    }

    .catalog-subnav__list[b-ayqf5xrn6p] {
        display: flex;
        flex: 1 1 auto;
        gap: 0;
        list-style: none;
        margin: 0;
        min-width: 0;
        overflow-x: auto;
        padding: 0 1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .catalog-subnav__list[b-ayqf5xrn6p]::-webkit-scrollbar {
        display: none;
    }

    .catalog-subnav__tab[b-ayqf5xrn6p] {
        appearance: none;
        background: transparent;
        border: 0;
        border-bottom: 3px solid transparent;
        color: var(--color-mute, #8b8880);
        cursor: pointer;
        flex: none;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 0.88rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        padding: 0.85rem 1rem 0.75rem;
        position: relative;
        transition: color 180ms ease, border-color 180ms ease;
        white-space: nowrap;
    }

    .catalog-subnav__tab:first-child[b-ayqf5xrn6p] {
        padding-left: 0;
    }

    .catalog-subnav__tab.is-active[b-ayqf5xrn6p] {
        color: var(--color-ink, #1c1b1a);
        font-weight: 700;
        border-bottom-color: var(--color-ink, #1c1b1a);
    }

    .catalog-subnav__tab:not(.is-active):hover[b-ayqf5xrn6p] {
        color: var(--color-ink, #1c1b1a);
    }

    .catalog-subnav__tab:not(.is-active):active[b-ayqf5xrn6p] {
        opacity: 0.6;
    }

    @media (prefers-reduced-motion: reduce) {
        .catalog-subnav__tab[b-ayqf5xrn6p] {
            transition: none;
        }
    }
}

/* Phone-only: 4 categories, 4 equal columns — no horizontal scroll, each tab
   gets exactly 25% of the row. Tablet widths above keep the scrolling-tabs
   treatment from the block above. */
@media (max-width: 640px) {
    .catalog-subnav__list[b-ayqf5xrn6p] {
        display: flex;
        overflow-x: auto;
        padding: 0;
    }

    .catalog-subnav__tab[b-ayqf5xrn6p] {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
        text-align: center;
        white-space: normal;
        width: 100%;
    }

    .catalog-subnav__tab:first-child[b-ayqf5xrn6p] {
        padding-left: 0.35rem;
    }
}

/* ── Paginator buttons ── */
.catalog-paginator-btn[b-ayqf5xrn6p] {
    align-items: center;
    background: transparent;
    border: 1px solid var(--color-line, #e5e0d8);
    border-radius: 50%;
    color: var(--color-ink, #1c1b1a);
    cursor: pointer;
    display: flex;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    height: 2.75rem;
    justify-content: center;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
    width: 2.75rem;
}

.catalog-paginator-btn:hover[b-ayqf5xrn6p] {
    border-color: var(--color-ink, #1c1b1a);
}

.catalog-paginator-btn.is-active[b-ayqf5xrn6p] {
    background: var(--color-accent, #e8781e);
    border-color: var(--color-accent, #e8781e);
    color: #ffffff;
    font-weight: 600;
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* Account panel — the /procurement-lab console, applied to a profile.

   Same ground rules as ProcurementLab.razor.css: this file references
   var(--stake-x) directly rather than aliasing through its own --pf-* layer,
   because nested custom-property indirection (--pf-x: var(--stake-x), then
   var(--pf-x) elsewhere) was found not to resolve reliably. The --stake-*
   palette itself is declared by app.css on ".yield-page, .procurement-lab",
   and this page renders inside StakingLayout's .yield-page wrapper, so the
   tokens are already in scope.

   The furniture is pixel furniture: square corners, hard offset shadows
   instead of soft ones, 'Press Start 2P' headings small enough to act as
   labels rather than chapters, and mono for everything a wallet produces. */
.profile-lab[b-8wltawp2dx] {
    /* Lift the shared brand-green token so states relying on
       --crypto-positive stay legible against the roast ground — the same
       unconditional pin .procurement-lab makes (no [data-theme] /
       prefers-color-scheme gate while the theme toggle is deactivated). */
    --crypto-positive: #8fb99b;

    /* Transparent ground: the shared GlobalScene background scenario supplies
       the sky, and any opaque background here would cover it. */
    color: var(--stake-ink);
    font-family: var(--font-sans);
    min-height: calc(100dvh - 4.75rem);
    padding: clamp(1.25rem, 2.6vw, 2rem) 0 clamp(3rem, 6vw, 5rem);
    position: relative;
}

/* A wallet dashboard is a reading surface: addresses, hashes and figures were
   sitting straight on drifting stars, planets and chain badges. While the
   panel is mounted this fixed plate frosts the whole viewport behind it — the
   scene survives as soft bokeh, the numbers stay legible.

   No ancestor may take isolation/filter/opacity: any of those becomes the
   backdrop root and the blur silently does nothing. z-index: -1 keeps the
   plate under this page's own content while still painting over .gs-scene,
   which sits outside <main>'s stacking context. */
.profile-lab[b-8wltawp2dx]::before {
    backdrop-filter: blur(22px) saturate(118%);
    -webkit-backdrop-filter: blur(22px) saturate(118%);
    background:
        radial-gradient(ellipse 85% 60% at 50% 0%, rgba(16, 13, 11, 0.5), transparent 78%),
        rgba(16, 13, 11, 0.62);
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

/* Without the blur the scene stays sharp behind the panel, so the scrim has
   to carry the legibility on its own. Same for anyone who asked for less
   transparency. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .profile-lab[b-8wltawp2dx]::before {
        background: rgba(16, 13, 11, 0.93);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .profile-lab[b-8wltawp2dx]::before {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--stake-bg-deep);
    }
}

.profile-lab__inner[b-8wltawp2dx] {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 72rem;
    padding: 0 clamp(1.25rem, 4vw, 3.5rem);
    position: relative;
    width: 100%;
}

/* ── Command bar ────────────────────────────────────────────────────────────
   Replaces the sticky sidebar. That column existed to hold two anchors to
   sections a scroll away and two buttons; the anchors are gone with it (the
   page is short enough to see whole) and the buttons are here. */
.pf-bar[b-8wltawp2dx] {
    align-items: center;
    border-bottom: 1px solid var(--stake-line);
    column-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    min-height: 2.6rem;
    padding-bottom: 0.75rem;
    row-gap: 0.5rem;
}

.pf-bar__nav[b-8wltawp2dx] {
    align-items: center;
    display: flex;
    gap: 1.2rem;
}

.pf-bar__nav a[b-8wltawp2dx],
.pf-bar__nav button[b-8wltawp2dx],
.pf-bar__tour[b-8wltawp2dx],
.pf-bar__logout button[b-8wltawp2dx] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--stake-muted);
    cursor: pointer;
    display: flex;
    font: 700 0.62rem/1 var(--crypto-mono);
    gap: 0.35rem;
    letter-spacing: 0.1em;
    padding: 0.5rem 0;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 160ms ease;
}

.pf-bar__actions[b-8wltawp2dx] {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.pf-bar__tour[b-8wltawp2dx] {
    color: var(--stake-copper);
}

.pf-bar__logout[b-8wltawp2dx] {
    margin: 0;
}

@media (hover: hover) and (pointer: fine) {
    .pf-bar__nav a:hover[b-8wltawp2dx],
    .pf-bar__nav button:hover[b-8wltawp2dx],
    .pf-bar__tour:hover[b-8wltawp2dx] {
        color: var(--stake-ink);
    }

    .pf-bar__logout button:hover[b-8wltawp2dx] {
        color: var(--stake-clay);
    }
}

/* ── Identity ───────────────────────────────────────────────────────────────
   The buyer robot from the lab's cast stands in as the account's avatar: the
   customer is exactly the role it plays over on /procurement-lab. */
.pf-id[b-8wltawp2dx] {
    align-items: center;
    column-gap: clamp(1.25rem, 3vw, 2.5rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
}

/* The avatar used to be a decorative sprite of the lab's buyer robot — the
   same picture on every account. It is now the account's own robot and it is
   editable, so it has to look pressable: a bare image with a click handler
   reads as decoration and nobody finds it. The pencil badge is the whole
   affordance, and it only leaves the corner on hover. */
.pf-avatar[b-8wltawp2dx] {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    flex: none;
    line-height: 0;
    padding: 0;
    position: relative;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.pf-avatar:active[b-8wltawp2dx] {
    transform: scale(0.97);
}

.pf-avatar__pen[b-8wltawp2dx] {
    align-items: center;
    background: var(--stake-bg-deep);
    border: 1px solid var(--stake-line-strong);
    bottom: -2px;
    color: var(--stake-muted);
    display: flex;
    height: 2rem;
    justify-content: center;
    position: absolute;
    right: -2px;
    transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
    width: 2rem;
}

@media (hover: hover) and (pointer: fine) {
    .pf-avatar:hover .pf-avatar__pen[b-8wltawp2dx] {
        border-color: var(--stake-copper);
        color: var(--stake-ink);
        transform: translate(1px, 1px);
    }
}

.pf-avatar:focus-visible[b-8wltawp2dx] {
    outline: 2px solid var(--stake-copper);
    outline-offset: 3px;
}

.pf-avatar:focus-visible .pf-avatar__pen[b-8wltawp2dx] {
    border-color: var(--stake-copper);
    color: var(--stake-ink);
}

@media (prefers-reduced-motion: reduce) {
    .pf-avatar__pen[b-8wltawp2dx] {
        transition: none;
    }

    .pf-avatar:hover .pf-avatar__pen[b-8wltawp2dx] {
        transform: none;
    }
}

.pf-id__body[b-8wltawp2dx] {
    min-width: 0;
}

/* No kicker above it. "Account overview" sat here restating the page you were
   already on, in the same words as the sidebar heading two inches to the left. */
.pf-id__name[b-8wltawp2dx] {
    align-items: center;
    color: #FFFDF9;
    display: flex;
    flex-wrap: wrap;
    font: 400 clamp(0.92rem, 2.4vw, 1.5rem)/1.35 'Press Start 2P', var(--crypto-mono);
    gap: 0.7rem;
    letter-spacing: 0.04em;
    margin: 0;
    overflow-wrap: anywhere;
}

.pf-id__name-placeholder[b-8wltawp2dx] {
    color: var(--stake-muted);
}

.pf-id__edit[b-8wltawp2dx] {
    align-items: center;
    display: flex;
    gap: 0.7rem;
}

.pf-id__input[b-8wltawp2dx] {
    background: var(--stake-surface-2);
    border: 1px solid var(--stake-line-strong);
    border-radius: 0;
    color: var(--stake-ink);
    font-family: var(--crypto-mono);
    font-size: clamp(0.85rem, 1.8vw, 1.05rem);
    max-width: 26rem;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    width: 100%;
}

.pf-id__input:focus[b-8wltawp2dx] {
    border-color: var(--stake-copper);
    outline: none;
}

.pf-icon-btn[b-8wltawp2dx] {
    align-items: center;
    background: transparent;
    border: 1px solid var(--stake-line-strong);
    border-radius: 0;
    color: var(--stake-muted);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    height: 2.1rem;
    justify-content: center;
    padding: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
    width: 2.1rem;
}

.pf-icon-btn:hover:not(:disabled)[b-8wltawp2dx] {
    border-color: var(--stake-copper);
    box-shadow: 3px 3px 0 var(--stake-copper-dim);
    color: var(--stake-ink);
    transform: translate(-1px, -1px);
}

.pf-icon-btn:focus-visible[b-8wltawp2dx] {
    outline: 2px dashed var(--stake-green);
    outline-offset: 3px;
}

.pf-icon-btn:disabled[b-8wltawp2dx] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* One identity line: which chain, which address, which network, and where the
   gas comes from. "Testnet gas" used to be a boxed fact card of its own, one
   row below the wallet it funds. */
.pf-idline[b-8wltawp2dx] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    margin-top: 0.85rem;
}

.pf-idline__chain[b-8wltawp2dx] {
    display: block;
    flex: none;
    height: 1.15rem;
    image-rendering: pixelated;
    width: 1.15rem;
}

.pf-idline__unlinked[b-8wltawp2dx] {
    color: var(--stake-faint);
    font-family: var(--crypto-mono);
    font-size: 0.78rem;
}

.pf-faucet-group[b-8wltawp2dx] {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    white-space: nowrap;
}

.pf-idline__faucet[b-8wltawp2dx] {
    color: var(--stake-copper);
    font-family: var(--crypto-mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
}

.pf-idline__faucet:hover[b-8wltawp2dx] {
    color: var(--stake-amber);
    text-decoration: underline;
}

/* --- ETH asset icon + hover selector --- */
.pf-faucet-asset[b-8wltawp2dx] {
    position: relative;
    flex: none;
    cursor: pointer;
}

.pf-faucet-asset__icon[b-8wltawp2dx] {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    object-fit: contain;
    animation: asset-rainbow-b-8wltawp2dx 4s linear infinite;
    transition: transform 220ms cubic-bezier(.23,1,.32,1);
}

@keyframes asset-rainbow-b-8wltawp2dx {
    0%   { filter: sepia(1) saturate(4) hue-rotate(0deg); }
    100% { filter: sepia(1) saturate(4) hue-rotate(360deg); }
}

.pf-faucet-asset:hover .pf-faucet-asset__icon[b-8wltawp2dx] {
    transform: scale(1.18) translateY(-1px);
}

/* Selector dropdown beneath the asset icon */
.pf-faucet-selector[b-8wltawp2dx] {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    display: flex;
    flex-direction: column;
    min-width: 7rem;
    padding: 0.3rem 0;
    background: var(--stake-surface-2, #1e1e1e);
    border: 1px solid var(--stake-line-strong, #333);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease,
                transform 180ms cubic-bezier(.23,1,.32,1);
    z-index: 20;
}

.pf-faucet-asset:hover .pf-faucet-selector[b-8wltawp2dx] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pf-faucet-selector__item[b-8wltawp2dx] {
    color: var(--stake-ink, #c8c0b4);
    font-family: var(--crypto-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.pf-faucet-selector__item:hover[b-8wltawp2dx] {
    background: rgba(151, 117, 250, .12);
    color: #c4b5fd;
}

.pf-faucet-selector__item.is-active[b-8wltawp2dx] {
    color: #9775fa;
    font-weight: 600;
}



/* Both chips arrive from shared components as rounded pills on a light-ish
   surface; on this board they are pixel furniture. Selectors carry
   .profile-lab as well as the scoped class so they outrank the components'
   own :root[data-theme="dark"] rules, which would otherwise win the tie on
   source order (Components/Shared sorts after Components/Pages in the
   scoped-CSS bundle). */
.profile-lab .pf-idline[b-8wltawp2dx]  .addr-chip {
    background: var(--stake-surface-2);
    border-color: var(--stake-line-strong);
    border-radius: 0;
    color: var(--stake-ink);
}

.profile-lab .pf-idline[b-8wltawp2dx]  .addr-chip__value {
    font-size: 0.82rem;
}

.profile-lab .pf-idline[b-8wltawp2dx]  .chain-badge {
    background: transparent;
    border-color: var(--stake-line);
    border-radius: 0;
    color: var(--stake-muted);
    font-family: var(--crypto-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0.32rem 0.6rem;
}

.pf-id__errors[b-8wltawp2dx] {
    color: var(--stake-clay);
    font-size: 0.8rem;
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
}

.pf-id__saved[b-8wltawp2dx] {
    color: var(--stake-green);
    font-family: var(--crypto-mono);
    font-size: 0.76rem;
    margin: 0.6rem 0 0;
}

/* ── Summary rail ───────────────────────────────────────────────────────────
   Counts, not cards. This replaced five boxed dt/dd tiles whose uppercase
   labels were taller than the values they introduced. */
.pf-rail[b-8wltawp2dx] {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
}

.pf-rail__cell[b-8wltawp2dx] {
    align-items: center;
    background: var(--stake-surface);
    border: 1px solid var(--stake-line);
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
}

.pf-rail__k[b-8wltawp2dx] {
    color: var(--stake-muted);
    font-family: var(--crypto-mono);
    font-size: 0.7rem;
    min-width: 0;
}

.pf-rail__v[b-8wltawp2dx] {
    color: var(--stake-ink);
    font-family: var(--crypto-mono);
    font-size: 0.76rem;
    text-align: right;
    white-space: nowrap;
}

/* Only the count gets the pixel face — dates and role names are too wide in
   it to survive a 12rem cell. */
.pf-rail__v--num[b-8wltawp2dx] {
    font: 400 0.72rem/1 'Press Start 2P', var(--crypto-mono);
}

.pf-rail__cell.is-occupied[b-8wltawp2dx] {
    border-color: rgba(229, 192, 120, 0.4);
}

.pf-rail__cell.is-occupied .pf-rail__v--num[b-8wltawp2dx] {
    color: var(--stake-amber);
}

/* ── Panels ─────────────────────────────────────────────────────────────── */
.pf-panel[b-8wltawp2dx] {
    background: var(--stake-surface);
    border: 1px solid var(--stake-line);
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
    margin-bottom: 0.9rem;
    padding: 1rem 1.1rem 1.15rem;
}

.pf-panel__bar[b-8wltawp2dx] {
    align-items: center;
    border-bottom: 1px solid var(--stake-line);
    display: flex;
    gap: 0.9rem;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
}

.pf-panel h2[b-8wltawp2dx] {
    color: var(--stake-ink);
    font: 400 0.66rem/1 'Press Start 2P', var(--crypto-mono);
    margin: 0;
}

.pf-panel__count[b-8wltawp2dx] {
    color: var(--stake-green);
    font: 400 0.72rem/1 'Press Start 2P', var(--crypto-mono);
}

/* Empty states offer the next move instead of reporting an absence. */
.pf-panel__empty[b-8wltawp2dx] {
    align-items: center;
    color: var(--stake-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.82rem;
    gap: 0.7rem;
    margin: 0;
    padding: 0.35rem 0 0.2rem;
}

.pf-panel__empty a[b-8wltawp2dx] {
    color: var(--stake-copper);
    text-decoration: none;
}

.pf-panel__empty a:hover[b-8wltawp2dx] {
    text-decoration: underline;
}

.pf-panel__empty-sprite[b-8wltawp2dx] {
    animation: pf-sprite-frames 900ms steps(4, end) infinite;
    background-image: url("images/pl-robot-scout.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 400% 100%;
    display: block;
    flex: none;
    height: 2rem;
    image-rendering: pixelated;
    width: 2rem;
}

/* ── Guided profile tour ──────────────────────────────────────────────────
   The guide stays out of the top layer so the real robot workshop can still
   open. Returning from that dialog leaves the user on the same tutorial step. */
.pf-tour-target[b-8wltawp2dx] {
    outline: 2px solid var(--stake-amber);
    outline-offset: 6px;
    scroll-margin-block: 8rem;
    box-shadow: 0 0 0 7px rgba(229, 192, 120, 0.1), 7px 7px 0 rgba(0, 0, 0, 0.32);
    position: relative;
    z-index: 2;
}

.pf-tour[b-8wltawp2dx] {
    background: #19130f;
    border: 1px solid var(--stake-copper);
    bottom: clamp(1rem, 3vw, 2rem);
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.5);
    color: var(--stake-ink);
    max-width: min(27rem, calc(100vw - 2rem));
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    width: 100%;
    z-index: 50;
}

.pf-tour__head[b-8wltawp2dx] {
    align-items: center;
    border-bottom: 1px solid var(--stake-line);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.85rem 0.9rem;
}

.pf-tour__bot[b-8wltawp2dx] {
    animation: pf-tour-bot-b-8wltawp2dx 900ms steps(4, end) infinite;
    background-image: url("images/pl-robot-scout.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 400% 100%;
    display: block;
    height: 3rem;
    image-rendering: pixelated;
    position: relative;
    width: 3rem;
}

/* Oversized, hard-edged frames keep Brewbot's guide persona readable at the
   sprite's tiny display size. The lenses stay translucent so its face remains
   animated underneath instead of baking the glasses into a single frame. */
.pf-tour__bot[b-8wltawp2dx]::after {
    background:
        linear-gradient(#161616 0 0) 1px 0 / 13px 3px no-repeat,
        linear-gradient(#161616 0 0) 0 3px / 3px 8px no-repeat,
        linear-gradient(#161616 0 0) 2px 10px / 12px 3px no-repeat,
        linear-gradient(#161616 0 0) 12px 3px / 3px 8px no-repeat,
        linear-gradient(#161616 0 0) 20px 0 / 13px 3px no-repeat,
        linear-gradient(#161616 0 0) 19px 3px / 3px 8px no-repeat,
        linear-gradient(#161616 0 0) 20px 10px / 12px 3px no-repeat,
        linear-gradient(#161616 0 0) 31px 3px / 3px 8px no-repeat,
        linear-gradient(#161616 0 0) 14px 3px / 6px 3px no-repeat,
        linear-gradient(rgba(248, 248, 244, 0.22) 0 0) 3px 3px / 9px 7px no-repeat,
        linear-gradient(rgba(248, 248, 244, 0.22) 0 0) 22px 3px / 9px 7px no-repeat;
    content: "";
    height: 13px;
    image-rendering: pixelated;
    left: 7px;
    pointer-events: none;
    position: absolute;
    top: 13px;
    width: 34px;
}

.pf-tour__eyebrow[b-8wltawp2dx],
.pf-tour__step[b-8wltawp2dx] {
    color: var(--stake-copper);
    display: block;
    font: 700 0.56rem/1.3 var(--crypto-mono);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.pf-tour__head strong[b-8wltawp2dx] {
    color: var(--stake-ink);
    display: block;
    font: 400 0.68rem/1.5 'Press Start 2P', var(--crypto-mono);
    margin-top: 0.3rem;
}

.pf-tour__close[b-8wltawp2dx] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--stake-muted);
    cursor: pointer;
    display: inline-flex;
    font: 400 1.4rem/1 var(--crypto-mono);
    height: 2rem;
    justify-content: center;
    padding: 0;
    transition: color 160ms ease;
    width: 2rem;
}

.pf-tour__body[b-8wltawp2dx] {
    padding: 1rem 1rem 0.9rem;
}

.pf-tour__body > p[b-8wltawp2dx] {
    color: var(--stake-muted);
    font: 400 0.78rem/1.65 var(--crypto-mono);
    margin: 0.65rem 0 0;
}

.pf-tour__try[b-8wltawp2dx],
.pf-tour__next[b-8wltawp2dx],
.pf-tour__back[b-8wltawp2dx] {
    cursor: pointer;
    font: 700 0.64rem/1 var(--crypto-mono);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.pf-tour__try[b-8wltawp2dx] {
    background: var(--stake-copper-dim);
    border: 1px solid var(--stake-copper);
    color: var(--stake-ink);
    margin-top: 0.85rem;
    padding: 0.7rem 0.8rem;
}

.pf-tour__note[b-8wltawp2dx] {
    border-left: 2px solid var(--stake-green);
    color: var(--stake-faint) !important;
    padding-left: 0.7rem;
}

.pf-tour__footer[b-8wltawp2dx] {
    align-items: center;
    border-top: 1px solid var(--stake-line);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr auto 1fr;
    padding: 0.75rem 1rem;
}

.pf-tour__back[b-8wltawp2dx],
.pf-tour__next[b-8wltawp2dx] {
    background: transparent;
    border: 1px solid var(--stake-line-strong);
    color: var(--stake-muted);
    padding: 0.65rem 0.8rem;
}

.pf-tour__next[b-8wltawp2dx] {
    background: var(--stake-green);
    border-color: var(--stake-green);
    color: #100d0b;
    justify-self: end;
}

.pf-tour__back[b-8wltawp2dx] {
    justify-self: start;
}

.pf-tour__back:disabled[b-8wltawp2dx] {
    cursor: default;
    opacity: 0.35;
}

.pf-tour__progress[b-8wltawp2dx] {
    display: flex;
    gap: 0.35rem;
}

.pf-tour__progress span[b-8wltawp2dx] {
    background: var(--stake-line-strong);
    height: 0.38rem;
    transition: background-color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
    width: 0.38rem;
}

.pf-tour__progress span.is-current[b-8wltawp2dx] {
    background: var(--stake-amber);
    transform: scale(1.35);
}

@media (hover: hover) and (pointer: fine) {
    .pf-tour__close:hover[b-8wltawp2dx] {
        color: var(--stake-ink);
    }

    .pf-tour__try:hover[b-8wltawp2dx],
    .pf-tour__back:hover:not(:disabled)[b-8wltawp2dx] {
        border-color: var(--stake-copper);
        color: var(--stake-ink);
    }

    .pf-tour__next:hover[b-8wltawp2dx] {
        background: #a8cdb2;
    }
}

.pf-tour__try:active[b-8wltawp2dx],
.pf-tour__back:active:not(:disabled)[b-8wltawp2dx],
.pf-tour__next:active[b-8wltawp2dx] {
    transform: scale(0.97);
}

@keyframes pf-tour-bot-b-8wltawp2dx {
    to { background-position: 133.333% 0; }
}

/* The shared smart-account panel arrives as a 12px-radius light card that only
   turns dark under a matching OS/theme setting. The roast wing is
   unconditionally dark, so pin it here — and square it off to match the board. */
.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel {
    background: var(--stake-surface);
    border-color: var(--stake-line);
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
    margin-bottom: 0.9rem;
    padding: 1rem 1.1rem 1.15rem;
}

.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__kicker {
    color: var(--stake-ink);
    font: 400 0.66rem/1 'Press Start 2P', var(--crypto-mono);
    letter-spacing: 0;
    text-transform: none;
}

.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__option,
.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__permission {
    background: var(--stake-surface-2);
    border-color: var(--stake-line);
    border-radius: 0;
}

.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__option--selected {
    border-color: rgba(229, 192, 120, 0.45);
    box-shadow: none;
}

/* The two account-type badges ship with light-theme ink (#4453a8 on a 12%
   blue wash, #2f4534 on green) that all but disappears on the roast ground. */
.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__type-badge {
    border-radius: 0;
    font-family: var(--crypto-mono);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__type-badge--legacy {
    background: var(--stake-copper-dim);
    color: var(--stake-copper);
}

.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__type-badge--modular {
    background: var(--stake-green-dim);
    color: var(--stake-green);
}

.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__permission {
    border-style: dashed;
    border-color: rgba(143, 185, 155, 0.4);
}

.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__permission-kicker {
    color: var(--stake-green);
    font-family: var(--crypto-mono);
    letter-spacing: 0.08em;
}

.profile-lab .pf-smart[b-8wltawp2dx]  .chain-selector__control {
    border-radius: 0;
}

.profile-lab .pf-smart[b-8wltawp2dx]  .chain-selector__dropdown {
    border-radius: 0;
}

.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__status,
.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__empty,
.profile-lab .pf-smart[b-8wltawp2dx]  .smart-account-panel__intro {
    color: var(--stake-muted);
    font-family: var(--crypto-mono);
    font-size: 0.72rem;
}

.profile-lab .pf-smart[b-8wltawp2dx]  .addr-chip {
    background: var(--stake-bg-deep);
    border-color: var(--stake-line-strong);
    border-radius: 0;
    color: var(--stake-ink);
}

/* ── Orders ─────────────────────────────────────────────────────────────────
   One order is one row: number, state, total on top; when it happened and what
   paid for it underneath. Same shape as a mission row on the lab board. */
.pf-orders[b-8wltawp2dx] {
    display: grid;
    gap: 0.5rem;
}

.pf-order[b-8wltawp2dx] {
    background: var(--stake-surface-2);
    border: 1px solid var(--stake-line);
    display: grid;
    gap: 0.35rem;
    padding: 0.7rem 0.85rem;
}

.pf-order__top[b-8wltawp2dx] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pf-order__num[b-8wltawp2dx] {
    color: var(--stake-ink);
    font: 400 0.62rem/1.4 'Press Start 2P', var(--crypto-mono);
    overflow-wrap: anywhere;
}

.pf-order__state[b-8wltawp2dx] {
    background: var(--stake-copper-dim);
    color: var(--stake-copper);
    font-family: var(--crypto-mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    padding: 0.18rem 0.4rem;
    text-transform: uppercase;
}

.pf-order__total[b-8wltawp2dx] {
    color: var(--stake-amber);
    font-family: var(--crypto-mono);
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: auto;
}

.pf-order__bottom[b-8wltawp2dx] {
    align-items: center;
    color: var(--stake-faint);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--crypto-mono);
    font-size: 0.68rem;
    gap: 0.4rem 0.7rem;
}

.pf-order__tx[b-8wltawp2dx] {
    color: var(--stake-copper);
    text-decoration: none;
    white-space: nowrap;
}

.pf-order__tx:hover[b-8wltawp2dx] {
    text-decoration: underline;
}

/* ── Loading / error ── */
.pf-state[b-8wltawp2dx] {
    align-items: center;
    background: var(--stake-surface);
    border: 1px solid var(--stake-line);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: clamp(2rem, 8vw, 5rem);
    padding: clamp(1.4rem, 3vw, 2rem);
}

.pf-state h2[b-8wltawp2dx] {
    color: var(--stake-ink);
    font: 400 0.82rem/1.5 'Press Start 2P', var(--crypto-mono);
    margin: 0;
}

.pf-state p[b-8wltawp2dx] {
    color: var(--stake-muted);
    font-family: var(--crypto-mono);
    font-size: 0.78rem;
    line-height: 1.6;
    margin: 0;
    width: 100%;
}

.pf-state--error h2[b-8wltawp2dx] {
    color: var(--stake-clay);
}

.pf-state__pulse[b-8wltawp2dx] {
    animation: pf-state-blink-b-8wltawp2dx 1s steps(2, end) infinite;
    background: var(--stake-amber);
    display: block;
    flex: none;
    height: 0.55rem;
    width: 0.55rem;
}

@keyframes pf-state-blink-b-8wltawp2dx {
    to { opacity: 0.15; }
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .pf-id[b-8wltawp2dx] {
        align-items: start;
        grid-template-columns: 1fr;
        justify-items: start;
        row-gap: 1rem;
    }

    .pf-avatar[b-8wltawp2dx] {
        justify-self: center;
    }

    .pf-tour[b-8wltawp2dx] {
        bottom: 0.75rem;
        left: 0.75rem;
        max-width: calc(100vw - 1.5rem);
        right: auto;
    }

    .pf-order__total[b-8wltawp2dx] {
        margin-left: 0;
    }
}

/* RobotAvatar gates its own idle bob on prefers-reduced-motion, and it has to:
   its animation lives in that component's scoped stylesheet, which this file
   cannot reach. */
@media (prefers-reduced-motion: reduce) {
    .pf-avatar[b-8wltawp2dx],
    .pf-tour__try[b-8wltawp2dx],
    .pf-tour__next[b-8wltawp2dx],
    .pf-tour__back[b-8wltawp2dx],
    .pf-tour__progress span[b-8wltawp2dx] {
        transition: none;
    }

    .pf-panel__empty-sprite[b-8wltawp2dx],
    .pf-state__pulse[b-8wltawp2dx],
    .pf-tour__bot[b-8wltawp2dx] {
        animation: none;
    }
}
/* /Components/Shared/AddressChip.razor.rz.scp.css */
.addr-chip[b-fjzdrd8xjq] {
    align-items: center;
    background: var(--stake-surface, rgba(245, 242, 234, 0.7));
    border: 1px solid var(--stake-line-strong, rgba(44, 27, 18, 0.13));
    border-radius: 999px;
    color: var(--stake-ink, #2c1b12);
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.28rem 0.4rem 0.28rem 0.78rem;
    width: fit-content;
}

.addr-chip__label[b-fjzdrd8xjq] {
    color: var(--stake-muted, rgba(93, 83, 77, 0.85));
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.addr-chip__value[b-fjzdrd8xjq] {
    font-family: var(--crypto-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.addr-chip__copy[b-fjzdrd8xjq],
.addr-chip__explorer[b-fjzdrd8xjq] {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--stake-muted, rgba(44, 27, 18, 0.55));
    cursor: pointer;
    display: inline-flex;
    height: 1.55rem;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    width: 1.55rem;
}

.addr-chip__copy:hover[b-fjzdrd8xjq],
.addr-chip__explorer:hover[b-fjzdrd8xjq] {
    background: var(--stake-line, rgba(44, 27, 18, 0.08));
    color: var(--stake-ink, #2c1b12);
}

.addr-chip__copy svg[b-fjzdrd8xjq] {
    fill: none;
    height: 0.85rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 0.85rem;
}

.addr-chip__copy--done[b-fjzdrd8xjq] {
    color: var(--crypto-positive);
}

.addr-chip__copy--done:hover[b-fjzdrd8xjq] {
    background: transparent;
    color: var(--crypto-positive);
}

.addr-chip__explorer[b-fjzdrd8xjq] {
    font-size: 0.85rem;
    line-height: 1;
}
/* /Components/Shared/ChainBadge.razor.rz.scp.css */
.chain-badge[b-aomga7bjqn] {
    align-items: center;
    background: var(--stake-surface, rgba(245, 242, 234, 0.7));
    border: 1px solid var(--stake-line-strong, rgba(44, 27, 18, 0.13));
    border-radius: 999px;
    color: var(--stake-muted, #5d534d);
    display: inline-flex;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    gap: 0.45rem;
    letter-spacing: 0.06em;
    padding: 0.28rem 0.72rem;
    text-transform: uppercase;
    white-space: nowrap;
    width: fit-content;
}

.chain-badge--compact[b-aomga7bjqn] {
    font-size: 0.64rem;
    gap: 0.35rem;
    padding: 0.22rem 0.58rem;
}

.chain-badge__id[b-aomga7bjqn] {
    color: var(--stake-faint, rgba(93, 83, 77, 0.65));
    font-family: var(--crypto-mono);
    font-weight: 500;
    letter-spacing: 0.02em;
}
/* /Components/Shared/ChainSelector.razor.rz.scp.css */
.chain-selector[b-iaw93yztit] {
    position: relative;
    display: inline-block;
}
.chain-selector__control[b-iaw93yztit] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    max-width: max-content !important;
    padding-right: 1.2rem !important;
    justify-content: space-between;
    white-space: nowrap;
}
.chain-selector__control[b-iaw93yztit]::after {
    content: "▼";
    font-size: 0.6rem;
    margin-left: 8px;
    color: color-mix(in srgb, var(--stake-ink) 60%, transparent);
}
.chain-icon[b-iaw93yztit] {
    object-fit: contain;
    border-radius: 50%;
}
.chain-selector__dropdown[b-iaw93yztit] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 200px;
    background: var(--stake-surface);
    border: 1px solid color-mix(in srgb, var(--stake-ink) 22%, transparent);
    border-radius: 12px;
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.chain-selector__option[b-iaw93yztit] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: var(--stake-ink);
    font: 700 .72rem/1.2 Inter,sans-serif;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
    width: 100%;
    white-space: nowrap;
}
.chain-selector__option:hover[b-iaw93yztit] {
    background: color-mix(in srgb, var(--stake-ink) 10%, transparent);
}
.chain-selector__option.selected[b-iaw93yztit] {
    background: color-mix(in srgb, var(--stake-green) 20%, transparent);
}
/* /Components/Shared/CheckoutOrderSummary.razor.rz.scp.css */
.checkout-summary__product[b-cuf6gwyjii] {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 1rem;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
}

.checkout-summary__thumb[b-cuf6gwyjii] {
    aspect-ratio: 1;
    margin-bottom: 0;
}

.checkout-summary__product-name[b-cuf6gwyjii] {
    color: var(--ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.25;
    margin: 0 0 0.35rem;
}

.checkout-summary__product-price[b-cuf6gwyjii] {
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    margin: 0;
}

.checkout-summary__product-qty[b-cuf6gwyjii] {
    color: var(--ink);
    font-weight: 600;
    margin-left: 0.35rem;
}

.checkout-summary-carousel[b-cuf6gwyjii] {
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
}

.checkout-summary-carousel__track[b-cuf6gwyjii] {
    align-items: center;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.checkout-summary-carousel__viewport[b-cuf6gwyjii] {
    min-height: 6.5rem;
    position: relative;
}

.checkout-summary-carousel__slide[b-cuf6gwyjii] {
    margin-bottom: 0;
}

.checkout-summary-carousel__nav[b-cuf6gwyjii] {
    align-self: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.35rem;
    height: 2.25rem;
    line-height: 1;
    padding: 0;
    width: 2.25rem;
}

.checkout-summary-carousel__nav:hover:not(:disabled)[b-cuf6gwyjii] {
    border-color: var(--ink);
}

.checkout-summary-carousel__nav:disabled[b-cuf6gwyjii] {
    cursor: default;
    opacity: 0.35;
}

.checkout-summary-carousel__dots[b-cuf6gwyjii] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    margin-top: 0.85rem;
}

.checkout-summary-carousel__dot[b-cuf6gwyjii] {
    background: var(--line);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    height: 0.45rem;
    padding: 0;
    width: 0.45rem;
}

.checkout-summary-carousel__dot--active[b-cuf6gwyjii] {
    background: var(--ink);
}

.checkout-summary__totals[b-cuf6gwyjii] {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 1.75rem;
}

.checkout-summary__line[b-cuf6gwyjii] {
    align-items: baseline;
    display: flex;
    font-family: 'Inter', sans-serif;
    gap: 1rem;
    justify-content: space-between;
}

.checkout-summary__line dt[b-cuf6gwyjii] {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 500;
    margin: 0;
}

.checkout-summary__line dd[b-cuf6gwyjii] {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

.checkout-summary__line--total[b-cuf6gwyjii] {
    border-top: 1px solid var(--line);
    margin-top: 0.5rem;
    padding-top: 0.85rem;
}

.checkout-summary__line--total dt[b-cuf6gwyjii],
.checkout-summary__line--total dd[b-cuf6gwyjii] {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.checkout-summary__note[b-cuf6gwyjii] {
    border: 0;
    color: var(--muted);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.65;
    margin: 0;
    padding: 0;
}
/* /Components/Shared/FaucetPanel.razor.rz.scp.css */
.faucet-panel[b-sasxomodr9] {
    background: #faf9f5;
    border: 1px solid rgba(44, 27, 18, 0.11);
    border-radius: 12px;
    display: grid;
    gap: 1.1rem;
    padding: 1.4rem 1.5rem 1.5rem;
    text-align: left;
}

.faucet-panel__head[b-sasxomodr9] {
    align-items: start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.faucet-panel__eyebrow[b-sasxomodr9] {
    color: rgba(44, 27, 18, 0.48);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin: 0 0 0.35rem;
    text-transform: uppercase;
}

.faucet-panel__title[b-sasxomodr9] {
    color: #2c1b12;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
    margin: 0 0 0.5rem;
}

.faucet-panel__lede[b-sasxomodr9] {
    color: #5d534d;
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 0;
    max-width: 40rem;
}

.faucet-panel__refresh[b-sasxomodr9] {
    background: transparent;
    border: 1px solid rgba(44, 27, 18, 0.3);
    border-radius: 999px;
    color: #2c1b12;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.5rem 0.95rem;
    text-transform: uppercase;
    transition: background 140ms ease, border-color 140ms ease;
    white-space: nowrap;
}

.faucet-panel__refresh:hover[b-sasxomodr9] {
    background: rgba(44, 27, 18, 0.05);
    border-color: #2c1b12;
}

.faucet-panel__address[b-sasxomodr9] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.faucet-panel__address-hint[b-sasxomodr9] {
    color: rgba(44, 27, 18, 0.55);
    font-size: 0.78rem;
}

.faucet-panel__list[b-sasxomodr9] {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.faucet-panel__card[b-sasxomodr9] {
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    border: 1px solid rgba(44, 27, 18, 0.11);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
    display: flex;
    flex-direction: column;
    gap: 0.48rem;
    height: 100%;
    padding: 0.9rem 1rem 0.95rem;
    position: relative;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 120ms ease;
}

.faucet-panel__card[b-sasxomodr9]::before {
    background: #47614e;
    border-radius: 999px;
    content: "";
    height: calc(100% - 1.35rem);
    left: 0.55rem;
    opacity: 0.22;
    position: absolute;
    top: 0.675rem;
    width: 2px;
}

.faucet-panel__card:hover[b-sasxomodr9] {
    background: #ffffff;
    border-color: rgba(71, 97, 78, 0.5);
    box-shadow: 0 8px 24px rgba(44, 27, 18, 0.08);
    transform: translateY(-1px);
}

.faucet-panel__card-head[b-sasxomodr9] {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.faucet-panel__brand[b-sasxomodr9] {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    min-width: 0;
}

.faucet-panel__logo[b-sasxomodr9] {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(44, 27, 18, 0.1);
    border-radius: 7px;
    box-shadow: 0 1px 8px rgba(44, 27, 18, 0.06);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.faucet-panel__logo img[b-sasxomodr9] {
    display: block;
    height: 1.3rem;
    object-fit: contain;
    width: 1.3rem;
}

.faucet-panel__brand-copy[b-sasxomodr9] {
    display: grid;
    min-width: 0;
}

.faucet-panel__card-head strong[b-sasxomodr9] {
    color: #2c1b12;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.05;
    min-width: 0;
}

.faucet-panel__card-amount[b-sasxomodr9] {
    align-items: center;
    color: #627eea;
    display: inline-flex;
    font-family: var(--crypto-mono);
    font-size: 0.72rem;
    font-weight: 700;
    gap: 0.35rem;
    line-height: 1;
    white-space: nowrap;
}

.faucet-panel__eth-icon[b-sasxomodr9] {
    color: #627eea;
    display: inline-flex;
    flex: 0 0 auto;
    height: 0.95rem;
    width: 0.95rem;
}

.faucet-panel__eth-icon svg[b-sasxomodr9] {
    display: block;
    height: 100%;
    width: 100%;
}

.faucet-panel__card-note[b-sasxomodr9] {
    color: rgba(44, 27, 18, 0.55);
    font-size: 0.76rem;
    line-height: 1.5;
}

.faucet-panel__card-cta[b-sasxomodr9] {
    align-items: center;
    color: #8a4d34;
    display: flex;
    font-size: 0.66rem;
    font-weight: 800;
    gap: 0.35rem;
    justify-content: space-between;
    letter-spacing: 0.1em;
    margin-top: auto;
    padding-top: 0.1rem;
    text-transform: uppercase;
}

.faucet-panel__card-cta span[b-sasxomodr9] {
    align-items: center;
    border: 1px solid rgba(138, 77, 52, 0.22);
    border-radius: 999px;
    display: inline-flex;
    height: 1.75rem;
    justify-content: center;
    margin-left: auto;
    width: 1.75rem;
}

.faucet-panel--compact[b-sasxomodr9] {
    padding: 1.1rem 1.2rem 1.2rem;
}

.faucet-panel--compact .faucet-panel__lede[b-sasxomodr9] {
    font-size: 0.82rem;
}

@media (max-width: 640px) {
    .faucet-panel__head[b-sasxomodr9] {
        flex-direction: column;
    }

    .faucet-panel__list[b-sasxomodr9] {
        grid-template-columns: 1fr;
    }
}

/* Dark-mode override. FaucetPanel only ever renders inside the on-chain wing
   (YieldPanel/Profile), which is light by default and dark under the theme
   toggle. Its light styling above is a deliberate "paper card" look distinct
   from the rest of the page — kept as-is in light mode. This override only
   swaps it to the roast palette so it doesn't look unstyled on a dark page;
   it does not try to preserve the paper-card texture in dark mode. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .faucet-panel[b-sasxomodr9] {
        background: var(--stake-surface);
        border-color: var(--stake-line);
    }

    :root:not([data-theme]) .faucet-panel__eyebrow[b-sasxomodr9],
    :root:not([data-theme]) .faucet-panel__address-hint[b-sasxomodr9],
    :root:not([data-theme]) .faucet-panel__card-note[b-sasxomodr9] {
        color: var(--stake-muted);
    }

    :root:not([data-theme]) .faucet-panel__title[b-sasxomodr9],
    :root:not([data-theme]) .faucet-panel__refresh[b-sasxomodr9],
    :root:not([data-theme]) .faucet-panel__card-head strong[b-sasxomodr9] {
        color: var(--stake-ink);
    }

    :root:not([data-theme]) .faucet-panel__lede[b-sasxomodr9] {
        color: var(--stake-muted);
    }

    :root:not([data-theme]) .faucet-panel__refresh[b-sasxomodr9] {
        border-color: var(--stake-line-strong);
    }

    :root:not([data-theme]) .faucet-panel__refresh:hover[b-sasxomodr9] {
        background: color-mix(in srgb, var(--stake-ink) 8%, transparent);
        border-color: var(--stake-ink);
    }

    :root:not([data-theme]) .faucet-panel__card[b-sasxomodr9],
    :root:not([data-theme]) .faucet-panel__logo[b-sasxomodr9] {
        background: var(--stake-surface-2);
        border-color: var(--stake-line);
        box-shadow: none;
    }

    :root:not([data-theme]) .faucet-panel__card:hover[b-sasxomodr9] {
        background: var(--stake-surface-2);
        border-color: var(--stake-green-dim);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
}

:root[data-theme="dark"] .faucet-panel[b-sasxomodr9] {
    background: var(--stake-surface);
    border-color: var(--stake-line);
}

:root[data-theme="dark"] .faucet-panel__eyebrow[b-sasxomodr9],
:root[data-theme="dark"] .faucet-panel__address-hint[b-sasxomodr9],
:root[data-theme="dark"] .faucet-panel__card-note[b-sasxomodr9] {
    color: var(--stake-muted);
}

:root[data-theme="dark"] .faucet-panel__title[b-sasxomodr9],
:root[data-theme="dark"] .faucet-panel__refresh[b-sasxomodr9],
:root[data-theme="dark"] .faucet-panel__card-head strong[b-sasxomodr9] {
    color: var(--stake-ink);
}

:root[data-theme="dark"] .faucet-panel__lede[b-sasxomodr9] {
    color: var(--stake-muted);
}

:root[data-theme="dark"] .faucet-panel__refresh[b-sasxomodr9] {
    border-color: var(--stake-line-strong);
}

:root[data-theme="dark"] .faucet-panel__refresh:hover[b-sasxomodr9] {
    background: color-mix(in srgb, var(--stake-ink) 8%, transparent);
    border-color: var(--stake-ink);
}

:root[data-theme="dark"] .faucet-panel__card[b-sasxomodr9],
:root[data-theme="dark"] .faucet-panel__logo[b-sasxomodr9] {
    background: var(--stake-surface-2);
    border-color: var(--stake-line);
    box-shadow: none;
}

:root[data-theme="dark"] .faucet-panel__card:hover[b-sasxomodr9] {
    background: var(--stake-surface-2);
    border-color: var(--stake-green-dim);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
/* /Components/Shared/IdleTimeoutModal.razor.rz.scp.css */
#idle-timeout-modal[b-5pqh2zc4wr] {
    background-color: var(--surface, #fbf9f4);
    color: var(--ink, #2d2421);
    width: 22rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--line, #d8d0c4);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    font-family: var(--font-sans, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif);
}

#idle-timeout-modal[b-5pqh2zc4wr]::backdrop {
    background-color: rgba(31, 26, 24, 0.45);
}

.idle-timeout-container[b-5pqh2zc4wr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.idle-timeout-title[b-5pqh2zc4wr] {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.25rem;
    margin: 0;
}

#idle-timeout-modal p[b-5pqh2zc4wr] {
    margin: 0;
    color: var(--muted, #746a63);
}

#idle-timeout-modal .idle-timeout-title[b-5pqh2zc4wr] {
    color: var(--ink, #2d2421);
}

#idle-timeout-modal button[b-5pqh2zc4wr] {
    border: 0;
    background-color: var(--accent, #8d6f55);
    color: var(--white, #fffdf9);
    padding: 0.5rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
}

    #idle-timeout-modal button:hover[b-5pqh2zc4wr] {
        background-color: var(--charcoal, #1f1a18);
    }
/* /Components/Shared/Pixel3DText.razor.rz.scp.css */
.pixel-title[b-ia4dlrx209] {
    --arcade-face: #ffffff;
    --arcade-side-near: #aaa7a3;
    --arcade-side-middle: #56525b;
    --arcade-ink: #0b0919;
    --voxel: clamp(0.27rem, 0.76vw, 0.59rem);
    display: block;
    filter: drop-shadow(0 1rem 1.45rem rgba(0, 0, 0, 0.48));
    perspective: 40rem;
}

.pixel-title__object[b-ia4dlrx209] {
    animation: pixel-title-turn-b-ia4dlrx209 5.8s steps(12, end) 1.45s infinite alternate;
    display: grid;
    gap: calc(var(--voxel) * 0.8);
    justify-items: center;
    transform: rotateX(5deg) rotateY(-4deg);
    transform-style: preserve-3d;
    will-change: transform;
}

.pixel-title__line[b-ia4dlrx209] {
    align-items: center;
    display: flex;
    gap: 0;
    justify-content: center;
    transform-style: preserve-3d;
    white-space: nowrap;
}

.pixel-title__glyph[b-ia4dlrx209] {
    animation: pixel-glyph-build-b-ia4dlrx209 560ms steps(6, end) var(--glyph-delay) both;
    display: block;
    flex: none;
    height: calc(var(--voxel) * 9.4);
    opacity: 0;
    transform: translate3d(0, 0.2em, -1.1em) rotateX(22deg) scale(0.94);
    transform-origin: center bottom;
    transform-style: preserve-3d;
    width: calc(var(--voxel) * 6.4);
    will-change: opacity, transform;
}

.pixel-title__glyph-art[b-ia4dlrx209] {
    display: block;
    height: 100%;
    overflow: visible;
    width: 100%;
}

.pixel-title__space[b-ia4dlrx209] {
    flex: 0 0 calc(var(--voxel) * 2.35);
}

.pixel-title__depth[b-ia4dlrx209],
.pixel-title__face[b-ia4dlrx209] {
    shape-rendering: crispEdges;
}

.pixel-title__depth--far[b-ia4dlrx209] {
    fill: var(--arcade-ink);
}

.pixel-title__depth--middle[b-ia4dlrx209] {
    fill: var(--arcade-side-middle);
}

.pixel-title__depth--near[b-ia4dlrx209] {
    fill: var(--arcade-side-near);
}

.pixel-title__face[b-ia4dlrx209] {
    fill: var(--arcade-face);
}

@keyframes pixel-glyph-build-b-ia4dlrx209 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0.2em, -1.1em) rotateX(22deg) scale(0.94);
    }

    20% {
        opacity: 1;
    }

    70% {
        opacity: 1;
        transform: translate3d(0, -0.04em, 0.08em) rotateX(-3deg) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotateX(0) scale(1);
    }
}

@keyframes pixel-title-turn-b-ia4dlrx209 {
    from {
        transform: rotateX(5deg) rotateY(-4deg);
    }

    to {
        transform: rotateX(5deg) rotateY(4deg);
    }
}

@media (max-width: 520px) {
    .pixel-title[b-ia4dlrx209] {
        --voxel: clamp(0.225rem, 0.92vw, 0.265rem);
    }

    .pixel-title__object[b-ia4dlrx209] {
        gap: calc(var(--voxel) * 1.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pixel-title__object[b-ia4dlrx209] {
        animation: none;
        transform: rotateX(5deg) rotateY(-4deg);
    }

    .pixel-title__glyph[b-ia4dlrx209] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
/* /Components/Shared/ProductQuantityPicker.razor.rz.scp.css */
.product-qty[b-gq3gzj3e0j] {
    align-items: center;
    display: inline-flex;
    gap: 0.55rem;
}

.product-qty__btn[b-gq3gzj3e0j] {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    cursor: pointer;
    font-size: 1rem;
    height: 2.15rem;
    line-height: 1;
    width: 2.15rem;
}

.product-qty__btn:hover:not(:disabled)[b-gq3gzj3e0j] {
    border-color: var(--ink);
}

.product-qty__btn:disabled[b-gq3gzj3e0j] {
    cursor: not-allowed;
    opacity: 0.4;
}

.product-qty__value[b-gq3gzj3e0j] {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 1.35rem;
    text-align: center;
}
/* /Components/Shared/RobotAvatarEditor.razor.rz.scp.css */
/* Fullscreen robot workshop.

   The editor is deliberately a workspace rather than a floating card: the
   robot stays visible while the right side becomes the control surface. The
   hard pixel borders and copper accent keep it at home in the staking wing,
   while the generous stage gives the avatar enough room to be the focus. */

dialog.rae[b-ehtwj2grvf] {
    background: transparent;
    border: 0;
    box-sizing: border-box;
    color: var(--stake-ink, #fffdf9);
    display: block;
    height: 100dvh;
    inset: 0;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    min-height: 100dvh;
    overflow: hidden;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100vw;
}

.rae[b-ehtwj2grvf]::backdrop {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background: rgba(9, 7, 6, 0.58);
}

/* block-size, not just min-block-size. A column flex container with an auto
   height has no deficit to distribute, so nothing below it can shrink and the
   grid never becomes the scroll container it is set up to be — the whole frame
   grows past the viewport instead and takes the header off the top of the
   screen. Pinning the height is what makes `flex: 1 1 auto` mean anything. */
.rae__frame[b-ehtwj2grvf] {
    background: transparent;
    block-size: 100dvh;
    border: 1px solid var(--stake-line-strong, rgba(255, 253, 249, 0.18));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rae__eyebrow[b-ehtwj2grvf] {
    color: var(--stake-muted, rgba(255, 253, 249, 0.58));
    display: block;
    font: 700 0.58rem/1.3 var(--crypto-mono, monospace);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.rae__bar[b-ehtwj2grvf] {
    align-items: center;
    border-bottom: 1px solid var(--stake-line, rgba(255, 253, 249, 0.1));
    display: flex;
    flex: none;
    justify-content: space-between;
    min-block-size: 4.8rem;
    padding: 1rem clamp(1.1rem, 3vw, 3rem);
    background: var(--stake-bg, #17110d);
}

.rae__bar-copy[b-ehtwj2grvf] {
    display: grid;
    gap: 0.45rem;
}

.rae__bar h2[b-ehtwj2grvf] {
    color: var(--stake-ink, #fffdf9);
    font: 400 clamp(0.74rem, 1.2vw, 1rem)/1.3 'Press Start 2P', var(--crypto-mono, monospace);
    letter-spacing: 0.04em;
    margin: 0;
}

.rae__close[b-ehtwj2grvf] {
    align-items: center;
    background: transparent;
    border: 1px solid var(--stake-line-strong, rgba(255, 253, 249, 0.2));
    color: var(--stake-muted, rgba(255, 253, 249, 0.62));
    cursor: pointer;
    display: inline-flex;
    block-size: 2.25rem;
    inline-size: 2.25rem;
    justify-content: center;
    padding: 0;
    transition: border-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
}

.rae__close:hover[b-ehtwj2grvf] {
    border-color: var(--stake-copper, #c58d5d);
    color: var(--stake-ink, #fffdf9);
    transform: translate(-1px, -1px);
}

/* ── Two-pane workspace ─────────────────────────────────────────────────── */

.rae__panes[b-ehtwj2grvf] {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(20rem, 0.82fr) minmax(0, 1.65fr);
    min-block-size: 0;
    overflow: hidden;
}

.rae__stage[b-ehtwj2grvf] {
    align-items: center;
    background: transparent;
    border-right: 1px solid var(--stake-line, rgba(255, 253, 249, 0.1));
    display: flex;
    flex-direction: column;
    gap: clamp(0.9rem, 2vh, 1.5rem);
    justify-content: flex-end;
    min-block-size: 0;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 4rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 8vh, 6rem);
    position: relative;
}

.rae__stage[b-ehtwj2grvf]::after {
    color: var(--stake-muted, rgba(255, 253, 249, 0.3));
    font: 700 0.55rem/1 var(--crypto-mono, monospace);
    letter-spacing: 0.1em;
    pointer-events: none;
    position: absolute;
}

.rae__stage[b-ehtwj2grvf]::after {
    bottom: clamp(1.1rem, 3vw, 3rem);
    content: "SELECT A PART TO EDIT";
    right: clamp(1.1rem, 3vw, 3rem);
}

/* The editor preview is a character sheet, not an avatar chip. Remove only
   its decorative disc/ring so the robot can read as a larger standalone asset;
   RobotAvatarView keeps its normal circular treatment everywhere else. */
.rae__stage[b-ehtwj2grvf]  .rae__robot::before {
    display: none;
}

.rae__stage[b-ehtwj2grvf]  .rae__robot .rbt__disc {
    background: transparent !important;
    clip-path: none !important;
    inset: 0;
    overflow: visible;
}

.rae__stage[b-ehtwj2grvf]  .rae__robot .rbt__body {
    inset: 0 !important;
}

.rae__caption[b-ehtwj2grvf] {
    color: var(--stake-muted, rgba(255, 253, 249, 0.62));
    font: 400 clamp(0.58rem, 0.8vw, 0.68rem)/1.6 var(--crypto-mono, monospace);
    letter-spacing: 0.02em;
    margin: 0;
    max-inline-size: 24rem;
    min-block-size: 2.2em;
    text-align: center;
}

.rae__stage-actions[b-ehtwj2grvf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
}

.rae__ghost[b-ehtwj2grvf] {
    align-items: center;
    background: rgba(9, 7, 6, 0.18);
    border: 1px solid var(--stake-line-strong, rgba(255, 253, 249, 0.2));
    color: var(--stake-muted, rgba(255, 253, 249, 0.66));
    cursor: pointer;
    display: inline-flex;
    font: 700 0.58rem/1 var(--crypto-mono, monospace);
    gap: 0.4rem;
    letter-spacing: 0.08em;
    padding: 0.65rem 0.8rem;
    text-transform: uppercase;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
}

.rae__ghost:hover:not(:disabled)[b-ehtwj2grvf] {
    background: var(--stake-copper-dim, rgba(169, 117, 74, 0.16));
    border-color: var(--stake-copper, #c58d5d);
    color: var(--stake-ink, #fffdf9);
    transform: translate(-1px, -1px);
}

.rae__ghost:disabled[b-ehtwj2grvf] {
    cursor: default;
    opacity: 0.4;
}

/* ── Modifier surface ──────────────────────────────────────────────────── */

.rae__picker[b-ehtwj2grvf] {
    background: var(--stake-bg, #17110d);
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;
}

.rae__picker-head[b-ehtwj2grvf] {
    align-items: end;
    border-bottom: 1px solid var(--stake-line, rgba(255, 253, 249, 0.1));
    display: flex;
    flex: none;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2.6rem) clamp(1rem, 3vw, 3rem) 1.1rem;
}

.rae__picker-head h3[b-ehtwj2grvf] {
    color: var(--stake-ink, #fffdf9);
    font: 400 clamp(1rem, 2vw, 1.65rem)/1.25 'Press Start 2P', var(--crypto-mono, monospace);
    letter-spacing: 0.02em;
    margin: 0.6rem 0 0;
    text-transform: uppercase;
}

.rae__picker-count[b-ehtwj2grvf] {
    color: var(--stake-muted, rgba(255, 253, 249, 0.55));
    font: 400 0.62rem/1.3 var(--crypto-mono, monospace);
    white-space: nowrap;
}

.rae__tabs[b-ehtwj2grvf] {
    border-bottom: 1px solid var(--stake-line, rgba(255, 253, 249, 0.1));
    display: flex;
    flex: none;
    gap: 0.15rem;
    overflow-x: auto;
    padding: 0 clamp(0.75rem, 2.5vw, 2.4rem);
    scrollbar-width: thin;
}

.rae__tab[b-ehtwj2grvf] {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--stake-muted, rgba(255, 253, 249, 0.58));
    cursor: pointer;
    flex: none;
    font: 700 0.58rem/1 var(--crypto-mono, monospace);
    letter-spacing: 0.08em;
    padding: 0.85rem 0.7rem 0.75rem;
    text-transform: uppercase;
    transition: color 160ms ease-out, border-color 160ms ease-out;
    white-space: nowrap;
}

.rae__tab:hover[b-ehtwj2grvf] {
    color: var(--stake-ink, #fffdf9);
}

.rae__tab.is-active[b-ehtwj2grvf] {
    border-bottom-color: var(--stake-copper, #c58d5d);
    color: var(--stake-ink, #fffdf9);
}

/* Column width tracks the lens, not the viewport alone. A window twice as wide
   as it is tall (headgear) makes a card half as tall, and four of those across
   leave two thirds of the panel empty — so wide windows ask for wider, and
   therefore fewer, columns via --lens-span. The base shrinks at each breakpoint
   while the per-slot multiplier rides along on top of it. */
.rae__grid[b-ehtwj2grvf] {
    --lens-col: calc(12rem * var(--lens-span, 1));

    align-content: start;
    background:
        radial-gradient(circle at 80% 8%, rgba(209, 142, 83, 0.12), transparent 28%),
        linear-gradient(135deg, rgba(255, 253, 249, 0.018), transparent 42%);
    display: grid;
    flex: 1 1 auto;
    gap: clamp(0.7rem, 1.25vw, 1.1rem);
    /* min-content, not auto. An `auto` row sizes itself from the card's content
       contribution, which for an aspect-ratio box is measured before the 1fr
       column has settled — the track comes out short, the card renders at its
       true aspect anyway, and the rows silently overlap by the difference.
       min-content asks for the height the aspect actually produces. */
    grid-auto-rows: min-content;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lens-col)), 1fr));
    isolation: isolate;
    min-block-size: 0;
    overflow-y: auto;
    padding: clamp(1rem, 2.5vw, 2.5rem);
    position: relative;
}

/* The card is the viewfinder: it takes the window's shape, and the robot inside
   it is oversized and pushed off its edges until only that window shows. */
.rae__swatch[b-ehtwj2grvf] {
    aspect-ratio: var(--lens-w, 1) / var(--lens-h, 1);
    background: rgba(29, 22, 17, 0.72);
    border: 1px solid rgba(255, 223, 190, 0.08);
    color: var(--stake-muted, rgba(255, 253, 249, 0.62));
    cursor: pointer;
    display: block;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: left;
    transition: border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}

.rae__swatch:hover[b-ehtwj2grvf] {
    border-color: rgba(225, 158, 96, 0.48);
    color: var(--stake-ink, #fffdf9);
    box-shadow: 0 0.75rem 1.6rem rgba(9, 7, 6, 0.18);
    transform: translateY(-3px);
}

.rae__swatch.is-chosen[b-ehtwj2grvf] {
    border-color: #d99a5c;
    color: var(--stake-ink, #fffdf9);
    box-shadow: inset 0 0 0 1px rgba(217, 154, 92, 0.3), 0 0.8rem 1.8rem rgba(9, 7, 6, 0.22);
}

/* ── The lens ───────────────────────────────────────────────────────────── */

/* --lens-scale/left/bottom come from AvatarLens.Style(), which does all the
   arithmetic so nothing here divides. The insets are the fiddly half: a
   percentage `left` resolves against the card's width and a percentage `bottom`
   against its height, so the two numbers are scaled by different divisors on
   the C# side and are not interchangeable. */
.rae__swatch[b-ehtwj2grvf]  .rae__lens-robot {
    aspect-ratio: 1;
    block-size: auto;
    bottom: calc(100% * var(--lens-bottom, 0));
    inline-size: calc(100% * var(--lens-scale, 1));
    left: calc(100% * var(--lens-left, 0));
    position: absolute;
}

/* The circle is the avatar's frame, not the camera's. Dropping the ring and the
   clip is what lets the window land anywhere on the robot; the disc keeps its
   colour, so the chosen backdrop is the ground every card is shot against and
   the Backdrop tab needs no special case at all. */
.rae__swatch[b-ehtwj2grvf]  .rae__lens-robot::before {
    display: none;
}

.rae__swatch[b-ehtwj2grvf]  .rae__lens-robot .rbt__disc {
    clip-path: none;
    inset: 0;
    overflow: visible;
}

.rae__swatch[b-ehtwj2grvf]  .rae__lens-robot .rbt__body {
    inset: 0;
}

/* ── Corner chip ────────────────────────────────────────────────────────── */

.rae__tag[b-ehtwj2grvf] {
    align-items: center;
    background: linear-gradient(180deg, rgba(9, 7, 6, 0.72), rgba(9, 7, 6, 0));
    display: flex;
    gap: 0.45rem;
    inset: 0 0 auto 0;
    padding: 0.7rem 0.75rem 1.4rem;
    pointer-events: none;
    position: absolute;
}

.rae__tag-index[b-ehtwj2grvf] {
    color: rgba(255, 225, 190, 0.42);
    flex: none;
    font: 700 0.55rem/1 var(--crypto-mono, monospace);
    letter-spacing: 0.08em;
}

.rae__tag-name[b-ehtwj2grvf] {
    color: var(--stake-ink, #fffdf9);
    font: 700 0.58rem/1 var(--crypto-mono, monospace);
    letter-spacing: 0.02em;
    opacity: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    transform: translateX(-0.3rem);
    transition: opacity 160ms ease-out, transform 160ms ease-out;
    white-space: nowrap;
}

.rae__swatch:hover .rae__tag-name[b-ehtwj2grvf],
.rae__swatch:focus-visible .rae__tag-name[b-ehtwj2grvf],
.rae__swatch.is-chosen .rae__tag-name[b-ehtwj2grvf] {
    opacity: 1;
    transform: none;
}

.rae__swatch.is-chosen .rae__tag-index[b-ehtwj2grvf] {
    color: #e7ad70;
}

/* ── Footer actions ─────────────────────────────────────────────────────── */

.rae__actions[b-ehtwj2grvf] {
    align-items: center;
    border-top: 1px solid var(--stake-line, rgba(255, 253, 249, 0.1));
    display: flex;
    flex: none;
    gap: 0.65rem;
    justify-content: flex-end;
    padding: 1rem clamp(1.1rem, 3vw, 3rem);
    background: var(--stake-bg, #17110d);
}

.rae__cancel[b-ehtwj2grvf],
.rae__save[b-ehtwj2grvf] {
    border: 1px solid var(--stake-line-strong, rgba(255, 253, 249, 0.2));
    cursor: pointer;
    font: 700 0.6rem/1 var(--crypto-mono, monospace);
    letter-spacing: 0.08em;
    padding: 0.75rem 1.25rem;
    text-transform: uppercase;
    transition: box-shadow 160ms ease-out, transform 160ms ease-out, opacity 160ms ease-out;
}

.rae__cancel[b-ehtwj2grvf] {
    background: transparent;
    color: var(--stake-muted, rgba(255, 253, 249, 0.62));
}

.rae__save[b-ehtwj2grvf] {
    background: var(--stake-copper, #c58d5d);
    border-color: var(--stake-copper, #c58d5d);
    color: #17110c;
}

.rae__cancel:hover[b-ehtwj2grvf],
.rae__save:hover:not(:disabled)[b-ehtwj2grvf] {
    box-shadow: 3px 3px 0 rgba(9, 7, 6, 0.55);
    transform: translate(-1px, -1px);
}

.rae__save:disabled[b-ehtwj2grvf] {
    cursor: default;
    opacity: 0.45;
}

.rae__close:focus-visible[b-ehtwj2grvf],
.rae__ghost:focus-visible[b-ehtwj2grvf],
.rae__tab:focus-visible[b-ehtwj2grvf],
.rae__swatch:focus-visible[b-ehtwj2grvf],
.rae__cancel:focus-visible[b-ehtwj2grvf],
.rae__save:focus-visible[b-ehtwj2grvf] {
    outline: 2px solid var(--stake-copper, #c58d5d);
    outline-offset: 3px;
}

.rae__close:active[b-ehtwj2grvf],
.rae__ghost:active:not(:disabled)[b-ehtwj2grvf],
.rae__cancel:active[b-ehtwj2grvf],
.rae__save:active:not(:disabled)[b-ehtwj2grvf],
.rae__swatch:active[b-ehtwj2grvf] {
    transform: scale(0.98);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 52rem) {
    .rae__panes[b-ehtwj2grvf] {
        grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
    }

    .rae__stage[b-ehtwj2grvf] {
        padding-inline: 1.25rem;
    }

    .rae__grid[b-ehtwj2grvf] {
        --lens-col: calc(9rem * var(--lens-span, 1));
    }
}

@media (max-width: 42rem) {
    .rae__panes[b-ehtwj2grvf] {
        grid-template-columns: minmax(0, 1fr);
        overflow-y: auto;
    }

    .rae__stage[b-ehtwj2grvf] {
        border-bottom: 1px solid var(--stake-line, rgba(255, 253, 249, 0.1));
        border-right: 0;
        min-block-size: min(46dvh, 27rem);
        padding: 1.5rem 1rem;
    }

    .rae__stage[b-ehtwj2grvf]::after {
        display: none;
    }

    .rae__picker[b-ehtwj2grvf] {
        min-block-size: 24rem;
        overflow: visible;
    }

    .rae__grid[b-ehtwj2grvf] {
        overflow: visible;
    }
}

@media (max-width: 30rem) {
    /* No --lens-col override here on purpose: the panes have already stacked
       by this width, so the grid is full-bleed and the narrower column from
       the previous breakpoint is what lands two cards to a row. */
    .rae__grid[b-ehtwj2grvf] {
        flex: 0 0 auto;
    }

    .rae__picker-head[b-ehtwj2grvf] {
        align-items: start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .rae__actions[b-ehtwj2grvf] {
        justify-content: stretch;
    }

    .rae__cancel[b-ehtwj2grvf],
    .rae__save[b-ehtwj2grvf] {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rae__close[b-ehtwj2grvf],
    .rae__ghost[b-ehtwj2grvf],
    .rae__tab[b-ehtwj2grvf],
    .rae__swatch[b-ehtwj2grvf],
    .rae__tag-name[b-ehtwj2grvf],
    .rae__cancel[b-ehtwj2grvf],
    .rae__save[b-ehtwj2grvf] {
        transition: none;
    }

    .rae__close:hover[b-ehtwj2grvf],
    .rae__ghost:hover:not(:disabled)[b-ehtwj2grvf],
    .rae__cancel:hover[b-ehtwj2grvf],
    .rae__save:hover:not(:disabled)[b-ehtwj2grvf],
    .rae__swatch:hover[b-ehtwj2grvf],
    .rae__close:active[b-ehtwj2grvf],
    .rae__ghost:active:not(:disabled)[b-ehtwj2grvf],
    .rae__cancel:active[b-ehtwj2grvf],
    .rae__save:active:not(:disabled)[b-ehtwj2grvf],
    .rae__swatch:active[b-ehtwj2grvf],
    .rae__tag-name[b-ehtwj2grvf] {
        transform: none;
    }
}

@media (prefers-contrast: more) {
    .rae__frame[b-ehtwj2grvf],
    .rae__ghost[b-ehtwj2grvf],
    .rae__swatch[b-ehtwj2grvf],
    .rae__cancel[b-ehtwj2grvf],
    .rae__save[b-ehtwj2grvf] {
        border-color: currentColor;
    }
}
/* /Components/Shared/RobotAvatarView.razor.rz.scp.css */
/* The account robot.

   The circle is a 16-unit staircase, not border-radius: a smooth curve next
   to 64px nearest-neighbour sprites reads as two different art directions in
   one component. Both the ring and the disc are clipped by the same polygon,
   inset from each other by one grid unit, which is what makes the ring itself
   look drawn rather than stroked. */
.rbt[b-uhpp28bl8r] {
    --rbt-circle: polygon(37.5% 0%, 62.5% 0%, 62.5% 6.25%, 75% 6.25%, 75% 12.5%, 81.25% 12.5%, 81.25% 18.75%, 87.5% 18.75%, 87.5% 25%, 93.75% 25%, 93.75% 37.5%, 100% 37.5%, 100% 62.5%, 93.75% 62.5%, 93.75% 75%, 87.5% 75%, 87.5% 81.25%, 81.25% 81.25%, 81.25% 87.5%, 75% 87.5%, 75% 93.75%, 62.5% 93.75%, 62.5% 100%, 37.5% 100%, 37.5% 93.75%, 25% 93.75%, 25% 87.5%, 18.75% 87.5%, 18.75% 81.25%, 12.5% 81.25%, 12.5% 75%, 6.25% 75%, 6.25% 62.5%, 0% 62.5%, 0% 37.5%, 6.25% 37.5%, 6.25% 25%, 12.5% 25%, 12.5% 18.75%, 18.75% 18.75%, 18.75% 12.5%, 25% 12.5%, 25% 6.25%, 37.5% 6.25%);

    /* One unit of the same 16-step grid the polygon is built on, so the ring
       stays exactly one "pixel" thick at any Size. */
    --rbt-ring: calc(var(--rbt-size) / 16);

    block-size: var(--rbt-size);
    display: inline-block;
    flex: none;
    inline-size: var(--rbt-size);
    position: relative;
    vertical-align: middle;
}

.rbt[b-uhpp28bl8r]::before {
    background: var(--stake-line-strong, rgba(20, 16, 12, 0.35));
    clip-path: var(--rbt-circle);
    content: "";
    inset: 0;
    position: absolute;
}

.rbt__disc[b-uhpp28bl8r] {
    clip-path: var(--rbt-circle);
    inset: var(--rbt-ring);
    overflow: hidden;
    position: absolute;
}

/* The robot sits inside the disc rather than filling it: at full bleed the
   circle clips the toque and the boots, which are exactly the two things a
   dress-up avatar is meant to show off. */
.rbt__body[b-uhpp28bl8r] {
    inset: 7%;
    position: absolute;
}

.rbt__layer[b-uhpp28bl8r] {
    background-repeat: no-repeat;
    image-rendering: pixelated;
    inset: 0;
    position: absolute;
}

/* A two-state bob, not a smooth float: the hold-then-jump is what reads as
   sprite animation. The 1% window between stops is the whole transition. */
@keyframes rbt-bob-b-uhpp28bl8r {
    0%, 49% { transform: translateY(0); }
    50%, 100% { transform: translateY(-2.6%); }
}

@media (prefers-reduced-motion: no-preference) {
    .rbt--idle .rbt__body[b-uhpp28bl8r] {
        animation: rbt-bob-b-uhpp28bl8r 2.4s infinite;
    }
}

/* Backdrops are colour, not sprites — deliberately muted, because their job
   is to separate the robot from whatever is behind the circle, not to compete
   with it. Kept as literals: this component renders both inside the dark
   --stake-* wing and, later, in the light header, and a token that resolves
   differently in each place would change the user's chosen backdrop. */
.rbt[data-backdrop="roast"] .rbt__disc[b-uhpp28bl8r] { background: #241C16; }
.rbt[data-backdrop="espresso"] .rbt__disc[b-uhpp28bl8r] { background: #120E0B; }
.rbt[data-backdrop="teal"] .rbt__disc[b-uhpp28bl8r] { background: #2B4A5C; }
.rbt[data-backdrop="copper"] .rbt__disc[b-uhpp28bl8r] { background: #6B4526; }
.rbt[data-backdrop="clay"] .rbt__disc[b-uhpp28bl8r] { background: #6E3A35; }
.rbt[data-backdrop="moss"] .rbt__disc[b-uhpp28bl8r] { background: #3B5342; }
.rbt[data-backdrop="night"] .rbt__disc[b-uhpp28bl8r] { background: #191B2E; }
.rbt[data-backdrop="gold"] .rbt__disc[b-uhpp28bl8r] { background: #6B5320; }
/* /Components/Shared/SmartAccountPanel.razor.rz.scp.css */
.smart-account-panel[b-wum6j4ps5u] {
    background: #faf9f5;
    border: 1px solid rgba(44, 27, 18, 0.11);
    border-radius: 12px;
    display: grid;
    gap: 1rem;
    padding: 1.4rem 1.5rem 1.5rem;
    text-align: left;
}

.smart-account-panel__head[b-wum6j4ps5u] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
}

.smart-account-panel__kicker[b-wum6j4ps5u] {
    color: rgba(44, 27, 18, 0.48);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin: 0;
    text-transform: uppercase;
}

.smart-account-panel__intro[b-wum6j4ps5u] {
    color: #777064;
    font-size: 0.82rem;
    line-height: 1.55;
    margin: -0.15rem 0 1rem;
    max-width: 48rem;
}

.smart-account-panel__empty[b-wum6j4ps5u] {
    color: #5d534d;
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

.smart-account-panel__error[b-wum6j4ps5u] {
    color: #8a3b2a;
}

.smart-account-panel__list[b-wum6j4ps5u] {
    display: grid;
    gap: 0.65rem;
}

.smart-account-panel__option[b-wum6j4ps5u] {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(44, 27, 18, 0.11);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.smart-account-panel__option:hover[b-wum6j4ps5u] {
    border-color: rgba(71, 97, 78, 0.4);
}

.smart-account-panel__option--selected[b-wum6j4ps5u] {
    border-color: #47614e;
    box-shadow: 0 0 0 1px #47614e;
}

.smart-account-panel__option input[type="radio"][b-wum6j4ps5u] {
    accent-color: #47614e;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
}

.smart-account-panel__option-body[b-wum6j4ps5u] {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.smart-account-panel__option-head[b-wum6j4ps5u] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.smart-account-panel__type-badge[b-wum6j4ps5u] {
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.22rem 0.6rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.smart-account-panel__type-badge--legacy[b-wum6j4ps5u] {
    background: rgba(98, 126, 234, 0.12);
    color: #4453a8;
}

.smart-account-panel__type-badge--modular[b-wum6j4ps5u] {
    background: rgba(71, 97, 78, 0.14);
    color: #2f4534;
}

.smart-account-panel__status[b-wum6j4ps5u] {
    color: rgba(44, 27, 18, 0.55);
    font-size: 0.72rem;
}

.smart-account-panel__permission[b-wum6j4ps5u] {
    background: #ffffff;
    border: 1px dashed rgba(71, 97, 78, 0.4);
    border-radius: 10px;
    display: grid;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
}

.smart-account-panel__permission-kicker[b-wum6j4ps5u] {
    color: #2f4534;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin: 0;
    text-transform: uppercase;
}

.smart-account-panel__permission-facts[b-wum6j4ps5u] {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin: 0;
}

.smart-account-panel__permission-facts dt[b-wum6j4ps5u] {
    color: rgba(44, 27, 18, 0.5);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 0 0 0.2rem;
    text-transform: uppercase;
}

.smart-account-panel__permission-facts dd[b-wum6j4ps5u] {
    color: #2c1b12;
    font-size: 0.85rem;
    margin: 0;
}

.smart-account-panel__register[b-wum6j4ps5u] {
    display: grid;
    gap: 0.6rem;
}

.smart-account-panel__register-button[b-wum6j4ps5u] {
    background: #47614e;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    justify-self: start;
    padding: 0.6rem 1.1rem;
    transition: background 140ms ease, opacity 140ms ease;
}

.smart-account-panel__register-button:hover:not(:disabled)[b-wum6j4ps5u] {
    background: #38513f;
}

.smart-account-panel__register-button:disabled[b-wum6j4ps5u] {
    cursor: not-allowed;
    opacity: 0.6;
}

.smart-account-panel__activation[b-wum6j4ps5u] {
    display: grid;
    gap: 0.6rem;
}

.smart-account-panel__field[b-wum6j4ps5u] {
    display: grid;
    gap: 0.3rem;
}

.smart-account-panel__field span[b-wum6j4ps5u] {
    color: rgba(44, 27, 18, 0.55);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.smart-account-panel__field input[b-wum6j4ps5u],
.smart-account-panel__field select[b-wum6j4ps5u] {
    background: #ffffff;
    border: 1px solid rgba(44, 27, 18, 0.18);
    border-radius: 8px;
    color: #2c1b12;
    font-size: 0.85rem;
    padding: 0.5rem 0.65rem;
}

.smart-account-panel__review[b-wum6j4ps5u] {
    background: #ffffff;
    border: 1px dashed rgba(71, 97, 78, 0.4);
    border-radius: 10px;
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
}

.smart-account-panel__review-kicker[b-wum6j4ps5u] {
    color: #2f4534;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin: 0;
    text-transform: uppercase;
}

.smart-account-panel__review-actions[b-wum6j4ps5u] {
    display: flex;
    gap: 0.6rem;
}

.smart-account-panel__raw-details summary[b-wum6j4ps5u] {
    color: rgba(44, 27, 18, 0.55);
    cursor: pointer;
    font-size: 0.75rem;
}

.smart-account-panel__raw[b-wum6j4ps5u] {
    background: rgba(44, 27, 18, 0.05);
    border-radius: 8px;
    font-size: 0.68rem;
    margin: 0.5rem 0 0;
    max-height: 12rem;
    overflow: auto;
    padding: 0.65rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.smart-account-panel__danger-button[b-wum6j4ps5u],
.smart-account-panel__ghost-button[b-wum6j4ps5u] {
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    justify-self: start;
    padding: 0.6rem 1.1rem;
    transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.smart-account-panel__danger-button[b-wum6j4ps5u] {
    background: #8a3b2a;
    border: none;
    color: #ffffff;
}

.smart-account-panel__danger-button:hover:not(:disabled)[b-wum6j4ps5u] {
    background: #712f21;
}

.smart-account-panel__ghost-button[b-wum6j4ps5u] {
    background: transparent;
    border: 1px solid rgba(44, 27, 18, 0.18);
    color: #2c1b12;
}

.smart-account-panel__ghost-button:hover:not(:disabled)[b-wum6j4ps5u] {
    border-color: rgba(44, 27, 18, 0.35);
}

.smart-account-panel__danger-button:disabled[b-wum6j4ps5u],
.smart-account-panel__ghost-button:disabled[b-wum6j4ps5u] {
    cursor: not-allowed;
    opacity: 0.6;
}

@media (max-width: 640px) {
    .smart-account-panel__head[b-wum6j4ps5u] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Dark-mode override — see the matching comment in FaucetPanel.razor.css.
   SmartAccountPanel only ever renders inside the on-chain wing; the light
   "paper card" styling above stays as the light-mode default, this only
   swaps structural surfaces/text so it doesn't look unstyled in dark mode. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .smart-account-panel[b-wum6j4ps5u],
    :root:not([data-theme]) .smart-account-panel__option[b-wum6j4ps5u],
    :root:not([data-theme]) .smart-account-panel__permission[b-wum6j4ps5u],
    :root:not([data-theme]) .smart-account-panel__review[b-wum6j4ps5u] {
        background: var(--stake-surface-2);
        border-color: var(--stake-line);
    }

    :root:not([data-theme]) .smart-account-panel__kicker[b-wum6j4ps5u],
    :root:not([data-theme]) .smart-account-panel__intro[b-wum6j4ps5u],
    :root:not([data-theme]) .smart-account-panel__empty[b-wum6j4ps5u],
    :root:not([data-theme]) .smart-account-panel__status[b-wum6j4ps5u],
    :root:not([data-theme]) .smart-account-panel__field span[b-wum6j4ps5u],
    :root:not([data-theme]) .smart-account-panel__raw-details summary[b-wum6j4ps5u] {
        color: var(--stake-muted);
    }

    :root:not([data-theme]) .smart-account-panel__permission-facts dt[b-wum6j4ps5u] {
        color: var(--stake-faint);
    }

    :root:not([data-theme]) .smart-account-panel__permission-facts dd[b-wum6j4ps5u] {
        color: var(--stake-ink);
    }

    :root:not([data-theme]) .smart-account-panel__option:hover[b-wum6j4ps5u] {
        border-color: color-mix(in srgb, var(--stake-green) 40%, transparent);
    }

    :root:not([data-theme]) .smart-account-panel__field input[b-wum6j4ps5u],
    :root:not([data-theme]) .smart-account-panel__field select[b-wum6j4ps5u],
    :root:not([data-theme]) .smart-account-panel__raw[b-wum6j4ps5u] {
        background: var(--stake-surface);
        border-color: var(--stake-line);
        color: var(--stake-ink);
    }

    :root:not([data-theme]) .smart-account-panel__ghost-button[b-wum6j4ps5u] {
        border-color: var(--stake-line);
        color: var(--stake-ink);
    }
}

:root[data-theme="dark"] .smart-account-panel[b-wum6j4ps5u],
:root[data-theme="dark"] .smart-account-panel__option[b-wum6j4ps5u],
:root[data-theme="dark"] .smart-account-panel__permission[b-wum6j4ps5u],
:root[data-theme="dark"] .smart-account-panel__review[b-wum6j4ps5u] {
    background: var(--stake-surface-2);
    border-color: var(--stake-line);
}

:root[data-theme="dark"] .smart-account-panel__kicker[b-wum6j4ps5u],
:root[data-theme="dark"] .smart-account-panel__intro[b-wum6j4ps5u],
:root[data-theme="dark"] .smart-account-panel__empty[b-wum6j4ps5u],
:root[data-theme="dark"] .smart-account-panel__status[b-wum6j4ps5u],
:root[data-theme="dark"] .smart-account-panel__field span[b-wum6j4ps5u],
:root[data-theme="dark"] .smart-account-panel__raw-details summary[b-wum6j4ps5u] {
    color: var(--stake-muted);
}

:root[data-theme="dark"] .smart-account-panel__permission-facts dt[b-wum6j4ps5u] {
    color: var(--stake-faint);
}

:root[data-theme="dark"] .smart-account-panel__permission-facts dd[b-wum6j4ps5u] {
    color: var(--stake-ink);
}

:root[data-theme="dark"] .smart-account-panel__option:hover[b-wum6j4ps5u] {
    border-color: color-mix(in srgb, var(--stake-green) 40%, transparent);
}

:root[data-theme="dark"] .smart-account-panel__field input[b-wum6j4ps5u],
:root[data-theme="dark"] .smart-account-panel__field select[b-wum6j4ps5u],
:root[data-theme="dark"] .smart-account-panel__raw[b-wum6j4ps5u] {
    background: var(--stake-surface);
    border-color: var(--stake-line);
    color: var(--stake-ink);
}

:root[data-theme="dark"] .smart-account-panel__ghost-button[b-wum6j4ps5u] {
    border-color: var(--stake-line);
    color: var(--stake-ink);
}
/* /Components/Shared/StatTile.razor.rz.scp.css */
.stat-tile[b-svgzawbgm8] {
    background: var(--stake-surface);
    border: 1px solid color-mix(in srgb, var(--stake-ink) 11%, transparent);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 1rem 1.15rem;
}

.stat-tile__label[b-svgzawbgm8] {
    color: var(--stake-muted);
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin: 0;
    text-transform: uppercase;
}

.stat-tile__value[b-svgzawbgm8] {
    color: var(--stake-ink);
    font-family: var(--font-sans);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-tile--positive .stat-tile__value[b-svgzawbgm8] {
    color: var(--stake-green);
}

.stat-tile__suffix[b-svgzawbgm8] {
    color: color-mix(in srgb, var(--stake-ink) 50%, transparent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-left: 0.15rem;
}

.stat-tile--positive .stat-tile__suffix[b-svgzawbgm8] {
    color: color-mix(in srgb, var(--stake-green) 75%, transparent);
}

.stat-tile__hint[b-svgzawbgm8] {
    color: color-mix(in srgb, var(--stake-ink) 55%, transparent);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    margin: 0;
}

.stat-tile__retry[b-svgzawbgm8] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    margin-left: 0.35rem;
    padding: 0;
    text-decoration: underline;
}

.stat-tile__skeleton[b-svgzawbgm8] {
    animation: crypto-shimmer 1.4s ease-in-out infinite;
    background: linear-gradient(90deg, color-mix(in srgb, var(--stake-ink) 7%, transparent) 25%, color-mix(in srgb, var(--stake-ink) 14%, transparent) 50%, color-mix(in srgb, var(--stake-ink) 7%, transparent) 75%);
    background-size: 200% 100%;
    border-radius: 6px;
    display: block;
    height: 1.5rem;
    width: 72%;
}

@media (prefers-reduced-motion: reduce) {
    .stat-tile__skeleton[b-svgzawbgm8] {
        animation: none;
    }
}
/* /Components/Shared/TestnetInfoModal.razor.rz.scp.css */
#testnet-info-modal[b-48no3flypu] {
    /* Retinted from generic gray to the site's roast near-black for visual
       consistency with the rest of the on-chain wing's dark surfaces. This
       modal appears on the storefront (Products.razor), not the dark wing —
       like NavMenu's wallet-connect modal, it's a deliberately always-dark
       overlay regardless of the page/site theme, not theme-toggle-reactive. */
    background-color: #1F1915;
    color: #ffffff;
    width: 28rem;
    max-width: calc(100vw - 2rem);
    margin: auto;
    padding: 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    font-family: var(--font-sans, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif);
    position: relative;
    overflow: hidden;
    opacity: 0;
}

#testnet-info-modal[open][b-48no3flypu] {
    animation: modal-reveal-b-48no3flypu 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#testnet-info-modal[b-48no3flypu]::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
}

#testnet-info-modal[open][b-48no3flypu]::backdrop {
    animation: backdrop-reveal-b-48no3flypu 0.5s ease forwards;
}

@keyframes modal-reveal-b-48no3flypu {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes backdrop-reveal-b-48no3flypu {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes content-reveal-b-48no3flypu {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}



.testnet-info-close[b-48no3flypu] {
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    border: none;
    border-radius: 50%;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    width: 2rem;
    z-index: 10;
    transition: background 160ms ease, transform 160ms ease;
}

.testnet-info-close:hover[b-48no3flypu] {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
}

.testnet-info-content[b-48no3flypu] {
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}



.testnet-info-title[b-48no3flypu] {
    color: #ffffff;
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0;
    font-weight: 600;
}

.testnet-info-copy[b-48no3flypu] {
    color: #e0e0e0;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.testnet-info-copy a[b-48no3flypu] {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 160ms ease;
}

.testnet-info-copy a:hover[b-48no3flypu] {
    opacity: 0.8;
}

.testnet-info-eth-wrapper[b-48no3flypu] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.testnet-info-eth-icon[b-48no3flypu] {
    width: auto;
    height: 90px;
    opacity: 0.9;
    mix-blend-mode: screen;
    animation: float-eth-b-48no3flypu 4s ease-in-out infinite;
}

@keyframes float-eth-b-48no3flypu {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.testnet-info-actions[b-48no3flypu] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.testnet-info-button[b-48no3flypu] {
    background-color: #ffffff;
    border: none;
    border-radius: 8px;
    color: #1a1a1a;
    cursor: pointer;
    font-family: var(--font-sans, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: background-color 160ms ease, transform 160ms ease;
}

.testnet-info-button:hover[b-48no3flypu] {
    background-color: #f0f0f0;
    transform: translateY(-1px);
}

/* Staggered animation delays for content */
#testnet-info-modal[open] .testnet-info-content>*[b-48no3flypu] {
    opacity: 0;
    animation: content-reveal-b-48no3flypu 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#testnet-info-modal[open] .testnet-info-title[b-48no3flypu] {
    animation-delay: 0.35s;
}

#testnet-info-modal[open] .testnet-info-copy[b-48no3flypu] {
    animation-delay: 0.45s;
}

#testnet-info-modal[open] .testnet-info-actions[b-48no3flypu] {
    animation-delay: 0.55s;
}

#testnet-info-modal[open] .testnet-info-close[b-48no3flypu] {
    opacity: 0;
    animation: content-reveal-b-48no3flypu 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.6s;
}
/* /Components/Shared/TxStepper.razor.rz.scp.css */
.tx-stepper[b-zqqg5d0a71] {
    background: color-mix(in srgb, var(--stake-surface) 75%, transparent);
    border: 1px solid color-mix(in srgb, var(--stake-ink) 11%, transparent);
    border-radius: 10px;
    display: grid;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    width: 100%;
}

.tx-stepper__steps[b-zqqg5d0a71] {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tx-stepper__step[b-zqqg5d0a71] {
    align-items: center;
    color: color-mix(in srgb, var(--stake-ink) 45%, transparent);
    display: flex;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.55rem;
}

.tx-stepper__step--pending[b-zqqg5d0a71] {
    color: var(--stake-ink);
}

.tx-stepper__step--confirmed[b-zqqg5d0a71] {
    color: var(--crypto-positive);
}

.tx-stepper__step--error[b-zqqg5d0a71] {
    color: var(--stake-clay);
}

.tx-stepper__icon[b-zqqg5d0a71] {
    align-items: center;
    display: inline-flex;
    height: 1rem;
    justify-content: center;
    width: 1rem;
}

.tx-stepper__icon svg[b-zqqg5d0a71] {
    fill: none;
    height: 0.85rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    width: 0.85rem;
}

.tx-stepper__idle-dot[b-zqqg5d0a71] {
    background: color-mix(in srgb, var(--stake-ink) 22%, transparent);
    border-radius: 50%;
    height: 0.4rem;
    width: 0.4rem;
}

.tx-stepper__spinner[b-zqqg5d0a71] {
    animation: crypto-spin 0.8s linear infinite;
    border: 2px solid var(--stake-line-strong);
    border-radius: 50%;
    border-top-color: var(--stake-ink);
    height: 0.85rem;
    width: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .tx-stepper__spinner[b-zqqg5d0a71] {
        animation-duration: 2.4s;
    }
}

.tx-stepper__tx[b-zqqg5d0a71] {
    color: var(--stake-copper);
    font-family: var(--crypto-mono);
    font-size: 0.68rem;
    font-weight: 600;
    margin-left: auto;
    text-decoration: none;
    white-space: nowrap;
}

.tx-stepper__tx:hover[b-zqqg5d0a71] {
    text-decoration: underline;
}

.tx-stepper__error[b-zqqg5d0a71] {
    background: color-mix(in srgb, var(--stake-clay) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--stake-clay) 32%, transparent);
    border-radius: 6px;
    color: var(--stake-clay);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
    padding: 0.55rem 0.7rem;
}

.tx-stepper__done[b-zqqg5d0a71] {
    color: var(--crypto-positive);
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0;
}

.tx-stepper__dismiss[b-zqqg5d0a71] {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--stake-ink) 30%, transparent);
    border-radius: 999px;
    color: var(--stake-ink);
    cursor: pointer;
    font-size: 0.62rem;
    font-weight: 800;
    justify-self: start;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.85rem;
    text-transform: uppercase;
    transition: background 140ms ease;
}

.tx-stepper__dismiss:hover[b-zqqg5d0a71] {
    background: color-mix(in srgb, var(--stake-ink) 8%, transparent);
}
/* /Components/Shared/YieldPanel.razor.rz.scp.css */
.yield-dashboard [data-animate][b-pg6e9b2fot],
[data-animate][b-pg6e9b2fot],
[data-stagger][b-pg6e9b2fot],
.stagger-container [data-animate][b-pg6e9b2fot] {
    filter: none;
    opacity: 1;
    transform: none;
}

/* Transparent ground: the GlobalScene background scenario (stars, planets,
   badges) plus its drifting-coin staking layer now supply this intro's sky,
   and an opaque background here would cover them. */
.staking-intro[b-pg6e9b2fot] {
    display: flex;
    isolation: isolate;
    justify-content: center;
    min-height: 100dvh;
    overflow: hidden;
    /* Header clearance now lives here instead of on the outer .yield-page-main
       padding-top (removed in StakingLayout.razor.css for this route), so the
       fixed transparent header floats over the shared background scenario
       instead of a gap that exposed .page/main's flat swatch. */
    padding: calc(4.75rem + clamp(1.75rem, 5vh, 3.5rem)) clamp(1.25rem, 4vw, 3rem) 0;
    position: relative;
}

.staking-intro__inner[b-pg6e9b2fot] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 44rem;
    position: relative;
    width: 100%;
    z-index: 1;
}

.staking-intro__hero[b-pg6e9b2fot] {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.staking-intro__title[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font-family: "Playfair Display", Georgia, serif;
    /* Sized to run edge-to-edge of the 44rem intro column on one line — the
       upper bound is what "Stake CAFE, earn COFFEE." measures at just inside
       that width, so raising it further would break the line. */
    font-size: clamp(1.95rem, 5.2vw, 3.5rem);
    letter-spacing: -0.015em;
    line-height: 1.06;
    margin: 0;
    text-align: center;
}

.staking-intro__row[b-pg6e9b2fot] {
    display: flex;
    flex-direction: column;
}

.staking-intro__row--title[b-pg6e9b2fot] {
    align-items: center;
    gap: 0;
    width: 100%;
}

.staking-intro__subtitle[b-pg6e9b2fot] {
    color: var(--stake-muted);
    font-family: var(--crypto-mono);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0.7rem 0 0;
    max-width: 34rem;
    text-align: center;
}

.staking-intro__coins[b-pg6e9b2fot] {
    align-items: center;
    justify-content: center;
    min-height: clamp(14rem, 31vh, 18rem);
    padding-block: clamp(0.5rem, 1.5vh, 1rem);
    position: relative;
}

/* Cross-shaped pixel stars blinking at irregular stepped intervals. Only the
   hero coin's own constellation remains here — the wide-field stars and the
   drifting coins moved to GlobalScene.razor.css's staking layer. */
.coffee-orbit__star[b-pg6e9b2fot] {
    animation: staking-space-star-blink-b-pg6e9b2fot var(--star-duration, 2.4s) steps(2, end) var(--star-delay, 0s) infinite;
    background: var(--star-color, var(--stake-ink));
    height: 3px;
    position: absolute;
    width: var(--star-width, 11px);
}

.coffee-orbit__star[b-pg6e9b2fot]::after {
    background: inherit;
    content: "";
    height: var(--star-width, 11px);
    left: 4px;
    position: absolute;
    top: -4px;
    width: 3px;
}

.coffee-orbit[b-pg6e9b2fot] {
    align-items: center;
    animation: coffee-orbit-float-b-pg6e9b2fot 5.2s cubic-bezier(0.77, 0, 0.175, 1) 1s infinite alternate;
    display: flex;
    height: clamp(13rem, 28vh, 16rem);
    justify-content: center;
    position: relative;
    width: min(100%, 22rem);
}

.coffee-orbit__coin-scene[b-pg6e9b2fot] {
    animation: coffee-orbit-arrive-b-pg6e9b2fot 1.35s cubic-bezier(0.23, 1, 0.32, 1) 120ms both;
    filter: drop-shadow(10px 13px 0 rgba(0, 0, 0, 0.34));
    height: clamp(8.5rem, 20vw, 11rem);
    perspective: 40rem;
    width: clamp(8.5rem, 20vw, 11rem);
}

.coffee-orbit__coin3d[b-pg6e9b2fot] {
    animation: coffee-coin-flip-b-pg6e9b2fot 3.6s linear 1.55s infinite;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    width: 100%;
}

.coffee-orbit__coin-face[b-pg6e9b2fot],
.coffee-orbit__coin-layer[b-pg6e9b2fot] {
    height: 100%;
    image-rendering: pixelated;
    inset: 0;
    position: absolute;
    width: 100%;
}

.coffee-orbit__coin-face[b-pg6e9b2fot] {
    backface-visibility: hidden;
    transform: translateZ(6px);
}

.coffee-orbit__coin-face--back[b-pg6e9b2fot] {
    transform: translateZ(-6px) rotateY(180deg);
}

/* darkened sprite slices stacked between the faces read as the coin's milled edge */
.coffee-orbit__coin-layer[b-pg6e9b2fot] {
    background: url("images/coffee-coin-pixel.png") center / contain no-repeat;
    filter: brightness(0.45);
    transform: translateZ(calc(-6px + var(--layer) * 1.5px));
}

@keyframes coffee-coin-flip-b-pg6e9b2fot {
    from {
        transform: rotateX(14deg) rotateY(0deg);
    }

    to {
        transform: rotateX(14deg) rotateY(360deg);
    }
}

.coffee-orbit__star[b-pg6e9b2fot] {
    z-index: 1;
}

.coffee-orbit__star--one[b-pg6e9b2fot] {
    --star-color: var(--stake-amber);
    --star-delay: -0.6s;
    left: 18%;
    top: 24%;
}

.coffee-orbit__star--two[b-pg6e9b2fot] {
    --star-color: var(--stake-green);
    --star-delay: -1.4s;
    right: 17%;
    top: 38%;
}

.coffee-orbit__star--three[b-pg6e9b2fot] {
    --star-delay: -2s;
    bottom: 20%;
    left: 24%;
}

@keyframes coffee-orbit-arrive-b-pg6e9b2fot {
    from {
        opacity: 0;
        transform: translateY(65dvh) scale(0.9);
    }

    82% {
        opacity: 1;
        transform: translateY(-0.75rem) scale(1.02);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes coffee-orbit-float-b-pg6e9b2fot {
    from {
        transform: translate3d(0, -4px, 0);
    }

    to {
        transform: translate3d(0, 8px, 0);
    }
}

@keyframes staking-space-star-blink-b-pg6e9b2fot {
    0%,
    45% {
        opacity: 0.28;
        transform: scale(0.72);
    }

    50%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .coffee-orbit[b-pg6e9b2fot],
    .coffee-orbit__coin-scene[b-pg6e9b2fot],
    .coffee-orbit__coin3d[b-pg6e9b2fot],
    .coffee-orbit__star[b-pg6e9b2fot] {
        animation: none;
    }
}

.staking-intro__error[b-pg6e9b2fot] {
    color: var(--stake-clay);
    font-size: 0.88rem;
    margin: 0;
}

.staking-intro__actions[b-pg6e9b2fot] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    justify-content: center;
    width: 100%;
}

.staking-intro__row--connect[b-pg6e9b2fot] {
    align-items: stretch;
    gap: 0.65rem;
}

.staking-intro__description[b-pg6e9b2fot] {
    align-self: center;
    gap: 1rem;
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
    max-width: 100%;
    padding-bottom: clamp(0.75rem, 2vh, 1.25rem);
    width: min(100%, 32rem);
}

.staking-intro__faucet-title[b-pg6e9b2fot] {
    color: var(--stake-muted);
    font-family: var(--crypto-mono);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

.staking-intro__faucets[b-pg6e9b2fot] {
    display: flex;
    gap: 0.7rem;
    overflow: hidden;
    width: 100%;
}

.staking-intro__faucet-link[b-pg6e9b2fot] {
    align-items: center;
    color: var(--stake-ink);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    text-align: center;
    text-decoration: none;
    transition: transform 160ms ease-out, opacity 160ms ease-out;
}

.staking-intro__description .staking-intro__faucet-link[b-pg6e9b2fot] {
    flex: 1 1 0;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem;
}

.staking-intro__faucet-link:hover[b-pg6e9b2fot] {
    opacity: 0.8;
    transform: translateY(-1px);
}

.staking-intro__faucet-link:active[b-pg6e9b2fot] {
    transform: scale(0.98);
}

.staking-intro__faucet-logo[b-pg6e9b2fot] {
    align-items: center;
    background: var(--stake-surface-2);
    border: 1px solid var(--stake-line);
    border-radius: 0.5rem;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2rem;
    justify-content: center;
    overflow: hidden;
    width: 2rem;
}

.staking-intro__faucet-logo img[b-pg6e9b2fot] {
    height: 1.35rem;
    object-fit: contain;
    width: 1.35rem;
}

.staking-intro__description .staking-intro__faucet-logo[b-pg6e9b2fot] {
    height: 1.75rem;
    width: 1.75rem;
}

.staking-intro__description .staking-intro__faucet-logo img[b-pg6e9b2fot] {
    height: 1.15rem;
    width: 1.15rem;
}

.staking-intro__faucet-logo--solana[b-pg6e9b2fot] {
    background: linear-gradient(135deg, #9945ff, #14f195);
    border: 0;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 900;
}

.staking-intro__faucet-name[b-pg6e9b2fot] {
    display: -webkit-box;
    font-size: 0.78rem;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-width: 0;
    overflow: hidden;
}

.staking-intro__description .staking-intro__faucet-name[b-pg6e9b2fot] {
    font-size: 0.7rem;
    line-height: 1.15;
}

.staking-intro__faucet-amount[b-pg6e9b2fot] {
    color: color-mix(in srgb, var(--stake-ink) 75%, transparent);
    font-family: var(--crypto-mono);
    font-size: 0.62rem;
    line-height: 1;
}

.staking-intro__cta[b-pg6e9b2fot] {
    background: var(--stake-ink);
    border: 0;
    border-radius: 0;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, 100% 3px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) 100%, 6px 100%, 6px calc(100% - 3px), 0 calc(100% - 3px), 0 6px, 3px 6px, 3px 3px, 6px 3px);
    color: var(--stake-bg-deep);
    filter: drop-shadow(5px 5px 0 var(--stake-copper));
    font-family: var(--crypto-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    min-height: 3.15rem;
    padding-inline: 2.25rem;
    text-transform: uppercase;
    transition: background-color 160ms ease, color 160ms ease, filter 160ms ease, transform 160ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .staking-intro__cta:hover:not(:disabled)[b-pg6e9b2fot] {
        background: var(--stake-amber);
        color: var(--stake-bg-deep);
        filter: drop-shadow(7px 7px 0 var(--stake-copper));
        transform: translate(-2px, -2px);
    }
}

.staking-intro__cta:active:not(:disabled)[b-pg6e9b2fot] {
    filter: drop-shadow(2px 2px 0 var(--stake-copper));
    transform: scale(0.97);
}

.yield-back[b-pg6e9b2fot] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--yield-espresso);
    cursor: pointer;
    display: inline-flex;
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    gap: 0.45rem;
    letter-spacing: 0.16em;
    margin: 0 0 -0.5rem;
    padding: 0.35rem 0;
    text-transform: uppercase;
    transition: color 160ms ease, transform 160ms ease;
    width: fit-content;
}

.yield-back span[b-pg6e9b2fot] {
    font-size: 0.9rem;
    line-height: 1;
}

.yield-back:hover[b-pg6e9b2fot] {
    color: var(--yield-muted);
    transform: translateX(-2px);
}

.yield-allocate-link:disabled[b-pg6e9b2fot] {
    cursor: not-allowed;
    opacity: 0.48;
}

/* ── Main content area ── */

.yield-main[b-pg6e9b2fot] {
    display: grid;
    gap: clamp(1.4rem, 2.8vw, 2.4rem);
    min-height: calc(100dvh - var(--yield-header-offset));
    min-width: 0;
    overflow-x: hidden;
    padding: clamp(1.25rem, 2.6vw, 2.5rem) var(--yield-column-gutter) clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.6vw, 2.5rem);
}

/* ── Hero ── */

.yield-hero[b-pg6e9b2fot] {
    align-items: start;
    border-bottom: 1px solid color-mix(in srgb, var(--stake-ink) 14%, transparent);
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    padding-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.yield-hero-text[b-pg6e9b2fot] {
    container-type: inline-size;
    display: grid;
    gap: 0.8rem;
}

.yield-title-row[b-pg6e9b2fot] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

.yield-hero h1[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.6rem, 5.8vw, 7.8rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.88;
    margin: 0;
    max-width: 100%;
    white-space: nowrap;
}

.yield-title-note[b-pg6e9b2fot] {
    color: color-mix(in srgb, var(--stake-ink) 50%, transparent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

@container (max-width: 42rem) {
    .yield-hero h1[b-pg6e9b2fot] {
        font-size: clamp(2rem, 14.5cqi, 4.5rem);
    }
}

.yield-apr-badge[b-pg6e9b2fot] {
    background: var(--stake-green-dim);
    border: 1px solid color-mix(in srgb, var(--stake-green) 30%, transparent);
    border-radius: 999px;
    color: var(--stake-green);
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.68rem;
    white-space: nowrap;
}


.yield-stat-row[b-pg6e9b2fot] {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.yield-card-balance[b-pg6e9b2fot] {
    color: color-mix(in srgb, var(--stake-ink) 55%, transparent);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0;
    text-transform: uppercase;
}

.yield-card-balance strong[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font-weight: 700;
    letter-spacing: 0;
    margin-left: 0.3rem;
    text-transform: none;
}

.yield-config-card[b-pg6e9b2fot] {
    background: color-mix(in srgb, var(--stake-amber) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--stake-amber) 30%, transparent);
    border-radius: 12px;
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 1rem 1.2rem;
}

.yield-config-card__eyebrow[b-pg6e9b2fot] {
    color: var(--stake-amber);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin: 0;
    text-transform: uppercase;
}

.yield-config-card__body[b-pg6e9b2fot] {
    color: var(--stake-amber);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}

.yield-faucet-cafe[b-pg6e9b2fot] {
    align-items: center;
    background: color-mix(in srgb, var(--stake-amber) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--stake-amber) 30%, transparent);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin: 0;
    padding: 1rem 1.2rem;
}

.yield-faucet-cafe__body[b-pg6e9b2fot] {
    display: grid;
    gap: 0.3rem;
}

.yield-faucet-cafe__eyebrow[b-pg6e9b2fot] {
    color: var(--stake-amber);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin: 0;
    text-transform: uppercase;
}

.yield-faucet-cafe__title[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font-size: 1.05rem;
    margin: 0;
}

.yield-faucet-cafe__desc[b-pg6e9b2fot] {
    color: color-mix(in srgb, var(--stake-ink) 72%, transparent);
    font-size: 0.85rem;
    margin: 0;
}

.yield-hero-lede[b-pg6e9b2fot] {
    color: color-mix(in srgb, var(--stake-ink) 72%, transparent);
    font-size: clamp(0.98rem, 1.5vw, 1.15rem);
    line-height: 1.72;
    margin: 0;
    max-width: 100%;
}

/* ── State notes ── */

.yield-config-note[b-pg6e9b2fot] {
    background: color-mix(in srgb, var(--stake-amber) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--stake-amber) 30%, transparent);
    border-radius: 6px;
    color: var(--stake-amber);
    font-size: 0.88rem;
    margin: 0;
    padding: 0.8rem 1rem;
}

.yield-sync-note[b-pg6e9b2fot],
.yield-empty-note[b-pg6e9b2fot],
.yield-error-note[b-pg6e9b2fot] {
    border-radius: 6px;
    font-size: 0.88rem;
    margin: 0;
    padding: 0.8rem 1rem;
}

.yield-sync-note[b-pg6e9b2fot] {
    background: var(--stake-green-dim);
    border: 1px solid color-mix(in srgb, var(--stake-green) 28%, transparent);
    color: var(--stake-green);
}

.yield-empty-note[b-pg6e9b2fot] {
    background: color-mix(in srgb, var(--stake-ink) 4%, transparent);
    border: 1px solid var(--stake-line);
    color: color-mix(in srgb, var(--stake-ink) 60%, transparent);
}

.yield-error-note[b-pg6e9b2fot] {
    align-items: center;
    background: color-mix(in srgb, var(--stake-clay) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--stake-clay) 32%, transparent);
    color: var(--stake-clay);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.yield-error-note p[b-pg6e9b2fot] {
    color: inherit;
    margin: 0;
}

.yield-error-note button[b-pg6e9b2fot] {
    background: transparent;
    border: 0;
    border-bottom: 1px solid currentColor;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 0 0 0.12rem;
    text-transform: uppercase;
}


















.yield-faucet[b-pg6e9b2fot] {
    border: 1px solid color-mix(in srgb, var(--stake-ink) 11%, transparent);
    border-radius: 12px;
    overflow: hidden;
}

.yield-faucet__summary[b-pg6e9b2fot] {
    align-items: center;
    background: var(--stake-surface);
    color: var(--stake-ink);
    cursor: pointer;
    display: flex;
    font-size: 0.72rem;
    font-weight: 800;
    gap: 0.65rem;
    letter-spacing: 0.1em;
    list-style: none;
    padding: 0.85rem 1.2rem;
    text-transform: uppercase;
    transition: background 140ms ease;
    user-select: none;
}

.yield-faucet__summary[b-pg6e9b2fot]::-webkit-details-marker {
    display: none;
}

.yield-faucet__summary:hover[b-pg6e9b2fot] {
    background: var(--stake-surface-2);
}

.yield-faucet__summary-flag[b-pg6e9b2fot] {
    background: var(--stake-amber-dim);
    border: 1px solid color-mix(in srgb, var(--stake-amber) 30%, transparent);
    border-radius: 999px;
    color: var(--stake-amber);
    font-size: 0.58rem;
    padding: 0.18rem 0.55rem;
}

.yield-faucet__summary-chevron[b-pg6e9b2fot] {
    margin-left: auto;
    transition: transform 160ms ease;
}

.yield-faucet[open] .yield-faucet__summary-chevron[b-pg6e9b2fot] {
    transform: rotate(180deg);
}

.yield-faucet[b-pg6e9b2fot]  .faucet-panel {
    border: 0;
    border-radius: 0;
    border-top: 1px solid color-mix(in srgb, var(--stake-ink) 9%, transparent);
}

/* ── Allocation cards ── */

.yield-allocation-grid[b-pg6e9b2fot] {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yield-asset-card[b-pg6e9b2fot] {
    background: var(--stake-surface);
    border: 1px solid color-mix(in srgb, var(--stake-ink) 11%, transparent);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: box-shadow 200ms ease;
}

.yield-asset-card:hover[b-pg6e9b2fot] {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.yield-card-visual[b-pg6e9b2fot] {
    aspect-ratio: 16 / 9;
    background-position: center;
    background-size: cover;
    filter: saturate(0.75) contrast(1.05) brightness(0.9);
    flex-shrink: 0;
    position: relative;
}

.yield-card-visual[b-pg6e9b2fot]::after {
    background: linear-gradient(180deg, rgba(10, 8, 6, 0.15) 0%, rgba(10, 8, 6, 0.72) 100%);
    content: "";
    inset: 0;
    position: absolute;
}

.yield-card-visual--espresso[b-pg6e9b2fot] {
    background-image: url("https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?auto=format&fit=crop&w=900&q=80");
}

.yield-card-visual--reserve[b-pg6e9b2fot] {
    background-image: url("https://images.unsplash.com/photo-1559056199-641a0ac8b55e?auto=format&fit=crop&w=900&q=80");
}

.yield-card-tag[b-pg6e9b2fot] {
    background: rgba(23, 19, 16, 0.72);
    border: 1px solid var(--stake-line-strong);
    border-radius: 999px;
    color: var(--stake-ink);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    padding: 0.36rem 0.62rem;
    position: absolute;
    right: 0.75rem;
    text-transform: uppercase;
    top: 0.75rem;
    z-index: 1;
}

.yield-card-body[b-pg6e9b2fot] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.4rem 1.4rem 1.6rem;
}

.yield-card-eyebrow[b-pg6e9b2fot] {
    color: var(--stake-copper);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin: 0;
    text-transform: uppercase;
}

.yield-card-body h2[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
    margin: 0;
}

.yield-card-desc[b-pg6e9b2fot] {
    color: color-mix(in srgb, var(--stake-ink) 68%, transparent);
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 0 0 0.3rem;
}

.yield-card-footer[b-pg6e9b2fot] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.yield-input-group[b-pg6e9b2fot] {
    align-items: center;
    background: var(--stake-bg-deep);
    border: 1px solid var(--stake-line-strong);
    border-radius: 999px;
    display: flex;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 0.1rem 0.1rem 0.1rem 0.9rem;
}

.yield-token-input[b-pg6e9b2fot] {
    background: transparent;
    border: 0;
    color: var(--stake-ink);
    flex: 1;
    font: 700 0.85rem/1 "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    min-width: 0;
    outline: none;
    padding: 0.45rem 0;
}

.yield-token-input[b-pg6e9b2fot]::placeholder {
    color: color-mix(in srgb, var(--stake-ink) 36%, transparent);
}

.yield-token-input:disabled[b-pg6e9b2fot] {
    cursor: not-allowed;
    opacity: 0.55;
}

.yield-max-btn[b-pg6e9b2fot] {
    background: color-mix(in srgb, var(--stake-ink) 8%, transparent);
    border: 0;
    border-radius: 999px;
    color: var(--stake-ink);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 0.46rem 0.7rem;
    transition: background 140ms ease;
}

.yield-max-btn:hover:not(:disabled)[b-pg6e9b2fot] {
    background: color-mix(in srgb, var(--stake-ink) 15%, transparent);
}

.yield-max-btn:disabled[b-pg6e9b2fot] {
    cursor: not-allowed;
    opacity: 0.4;
}

.yield-cta-btn[b-pg6e9b2fot] {
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    min-height: 2.6rem;
    padding: 0.62rem 1.35rem;
    transition: background 160ms ease, border-color 160ms ease, transform 120ms ease, opacity 160ms ease;
    white-space: nowrap;
}

.yield-cta-btn--dark[b-pg6e9b2fot] {
    background: var(--stake-ink);
    border: 1px solid var(--stake-ink);
    color: var(--stake-bg);
}

.yield-cta-btn--dark:hover:not(:disabled)[b-pg6e9b2fot] {
    background: var(--stake-green);
    border-color: var(--stake-green);
    transform: translateY(-1px);
}

.yield-cta-btn--outline[b-pg6e9b2fot] {
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--stake-ink) 35%, transparent);
    color: var(--stake-ink);
}

.yield-cta-btn--outline:hover:not(:disabled)[b-pg6e9b2fot] {
    background: color-mix(in srgb, var(--stake-ink) 6%, transparent);
    border-color: var(--stake-ink);
    transform: translateY(-1px);
}

.yield-cta-btn:disabled[b-pg6e9b2fot] {
    cursor: not-allowed;
    opacity: 0.42;
}

.yield-input-error[b-pg6e9b2fot] {
    background: color-mix(in srgb, var(--stake-clay) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--stake-clay) 32%, transparent);
    border-radius: 6px;
    color: var(--stake-clay);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.7rem;
}

/* ── Recent Activity ── */

.yield-activity[b-pg6e9b2fot] {
    border-top: 1px solid color-mix(in srgb, var(--stake-ink) 14%, transparent);
    padding-top: 1.25rem;
}

.yield-activity-heading[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
    margin: 0 0 1rem;
}

.yield-activity-list[b-pg6e9b2fot] {
    display: grid;
}

.yield-activity-row[b-pg6e9b2fot] {
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--stake-ink) 8%, transparent);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 2rem minmax(0, 1fr) minmax(1rem, 1fr) max-content max-content max-content;
    min-height: 3.4rem;
    padding: 0.2rem 0;
}

.yield-activity-icon[b-pg6e9b2fot] {
    align-items: center;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.yield-activity-icon--in[b-pg6e9b2fot] {
    background: var(--stake-green-dim);
    color: var(--stake-green);
}

.yield-activity-icon--out[b-pg6e9b2fot] {
    background: var(--stake-copper-dim);
    color: var(--stake-copper);
}

.yield-activity-icon svg[b-pg6e9b2fot] {
    fill: none;
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 1rem;
}

.yield-activity-meta[b-pg6e9b2fot] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.yield-activity-label[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font-size: 0.87rem;
    font-weight: 700;
}

.yield-activity-time[b-pg6e9b2fot] {
    color: color-mix(in srgb, var(--stake-ink) 50%, transparent);
    font-size: 0.71rem;
    font-weight: 500;
}

.yield-activity-line[b-pg6e9b2fot] {
    border-bottom: 1px dotted color-mix(in srgb, var(--stake-ink) 24%, transparent);
    transform: translateY(0.08rem);
}

.yield-activity-amount[b-pg6e9b2fot] {
    font-family: var(--crypto-mono);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.yield-activity-amount--pos[b-pg6e9b2fot] {
    color: var(--stake-green);
}

.yield-activity-amount--neg[b-pg6e9b2fot] {
    color: color-mix(in srgb, var(--stake-ink) 70%, transparent);
}

.yield-confirmed-tag[b-pg6e9b2fot] {
    align-items: center;
    background: var(--stake-green-dim);
    border: 1px solid color-mix(in srgb, var(--stake-green) 32%, transparent);
    border-radius: 999px;
    color: var(--stake-green);
    display: inline-flex;
    font-size: 0.59rem;
    font-weight: 800;
    gap: 0.32rem;
    letter-spacing: 0.12em;
    padding: 0.25rem 0.55rem;
    text-transform: uppercase;
}

.yield-confirmed-tag[b-pg6e9b2fot]::before {
    background: var(--stake-green);
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 0.32rem;
    width: 0.32rem;
}

.yield-activity-tx[b-pg6e9b2fot] {
    color: var(--stake-copper);
    font-family: var(--crypto-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.yield-activity-tx:hover[b-pg6e9b2fot] {
    text-decoration: underline;
}

/* ── Responsive ── */

@media (max-width: 1100px) {
    .yield-main[b-pg6e9b2fot] {
        max-height: none;
        min-height: 0;
        overflow: visible;
        padding: 0;
    }
}

@media (max-width: 1100px) {
    .yield-stat-row[b-pg6e9b2fot] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .yield-allocation-grid[b-pg6e9b2fot] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .yield-card-footer[b-pg6e9b2fot] {
        flex-direction: column;
        align-items: stretch;
    }

    .yield-cta-btn[b-pg6e9b2fot] {
        text-align: center;
    }

    .yield-activity-row[b-pg6e9b2fot] {
        gap: 0.45rem 0.7rem;
        grid-template-columns: 2rem 1fr max-content max-content;
        padding: 0.75rem 0;
    }

    .yield-activity-line[b-pg6e9b2fot] {
        display: none;
    }

    .yield-activity-tx[b-pg6e9b2fot] {
        grid-column: 3 / 5;
        justify-self: end;
    }
}
 .yield-liquid-summary[b-pg6e9b2fot] {
    align-items: start;
    background: var(--stake-surface);
    border: 1px solid color-mix(in srgb, var(--stake-green) 32%, transparent);
    border-radius: 12px;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 1.3fr);
    padding: 1.25rem 1.4rem;
}
.yield-liquid-summary h2[b-pg6e9b2fot] { color: var(--stake-ink); font-family: "Playfair Display", Georgia, serif; font-weight: 500; margin: .2rem 0 .45rem; }
.yield-liquid-summary__stats[b-pg6e9b2fot] { display: grid; gap: .65rem; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; }
.yield-liquid-summary__stats div[b-pg6e9b2fot] { background: color-mix(in srgb, var(--stake-green) 8%, transparent); border-radius: 8px; padding: .7rem .8rem; }
.yield-liquid-summary__stats dt[b-pg6e9b2fot] { color: color-mix(in srgb, var(--stake-ink) 55%, transparent); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.yield-liquid-summary__stats dd[b-pg6e9b2fot] { color: var(--stake-ink); font-family: var(--crypto-mono); margin: .3rem 0 0; }
.yield-liquid-summary__actions[b-pg6e9b2fot] { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem; grid-column: 1 / -1; }
.yield-liquid-summary__actions .yield-token-input[b-pg6e9b2fot] { border: 1px solid var(--stake-line-strong); border-radius: 999px; min-width: 9rem; padding: .7rem .85rem; }
@media (max-width: 800px) { .yield-liquid-summary[b-pg6e9b2fot] { grid-template-columns: 1fr; } }

/* ── Connected liquid-staking dashboard ───────────────────────────────────
   Profile / ProcurementLab pixel furniture: square corners, offset shadows,
   Press Start 2P headings, frosted backdrop. The 3-column yield-studio grid
   was replaced by a stacked layout: hero → rail → panels → activity. */
.yield-dashboard--liquid[b-pg6e9b2fot] {
    background: transparent;
    display: block;
    position: relative;
}

/* Frosted backdrop — same technique as Profile.razor.css. */
.yield-dashboard--liquid[b-pg6e9b2fot]::before {
    backdrop-filter: blur(22px) saturate(118%);
    -webkit-backdrop-filter: blur(22px) saturate(118%);
    background:
        radial-gradient(ellipse 85% 60% at 50% 0%, rgba(16, 13, 11, 0.5), transparent 78%),
        rgba(16, 13, 11, 0.62);
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .yield-dashboard--liquid[b-pg6e9b2fot]::before {
        background: rgba(16, 13, 11, 0.93);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .yield-dashboard--liquid[b-pg6e9b2fot]::before {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--stake-bg-deep);
    }
}

.yield-main--liquid[b-pg6e9b2fot] {
    align-content: start;
    display: grid;
    gap: 0.9rem;
    margin: 0 auto;
    max-width: 72rem;
    padding: clamp(1rem, 2.2vw, 1.75rem) clamp(1rem, 4vw, 3.5rem) 4rem;
    position: relative;
    width: 100%;
}

/* ── Command bar ─────────────────────────────────────────────────────── */
.yield-commandbar[b-pg6e9b2fot] {
    align-items: center;
    border-bottom: 1px solid var(--stake-line);
    column-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 2.6rem;
    padding-bottom: 0.75rem;
    row-gap: 0.5rem;
}

.yield-commandbar__network[b-pg6e9b2fot],
.yield-commandbar__nav[b-pg6e9b2fot],
.yield-commandbar__nav a[b-pg6e9b2fot],
.yield-commandbar__nav button[b-pg6e9b2fot],
.yield-live-status[b-pg6e9b2fot] {
    align-items: center;
    display: flex;
}

.yield-commandbar__network[b-pg6e9b2fot] {
    gap: 0.75rem;
    min-width: 0;
}

.yield-commandbar__network[b-pg6e9b2fot]  .chain-selector {
    min-width: min(17rem, 56vw);
}

.yield-live-status[b-pg6e9b2fot] {
    color: var(--stake-green);
    font: 700 0.6rem/1 var(--crypto-mono);
    gap: 0.4rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yield-live-status > span[b-pg6e9b2fot] {
    background: var(--stake-green);
    box-shadow: 0 0 0 3px var(--stake-green-dim);
    height: 0.35rem;
    width: 0.35rem;
}

.yield-commandbar__nav[b-pg6e9b2fot] {
    gap: 1.2rem;
}

.yield-commandbar__nav a[b-pg6e9b2fot],
.yield-commandbar__nav button[b-pg6e9b2fot] {
    background: none;
    border: 0;
    color: var(--stake-muted);
    cursor: pointer;
    font: 700 0.62rem/1 var(--crypto-mono);
    gap: 0.35rem;
    letter-spacing: 0.1em;
    padding: 0.5rem 0;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .yield-commandbar__nav a:hover[b-pg6e9b2fot],
    .yield-commandbar__nav button:hover[b-pg6e9b2fot] {
        color: var(--stake-ink);
    }
}

/* ── Identity hero ───────────────────────────────────────────────────── */
.yd-hero[b-pg6e9b2fot] {
    align-items: center;
    column-gap: clamp(1rem, 2.5vw, 1.6rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 0.25rem;
}

/* ── 3D Golden Coin avatar ───────────────────────────────────────────── */
.yd-hero__coin[b-pg6e9b2fot] {
    flex: none;
    filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.36))
            drop-shadow(0 0 18px rgba(229, 192, 120, 0.35));
    height: clamp(4.5rem, 9vw, 6.5rem);
    perspective: 32rem;
    width: clamp(4.5rem, 9vw, 6.5rem);
}

.yd-coin-scene[b-pg6e9b2fot] {
    height: 100%;
    width: 100%;
}

.yd-coin3d[b-pg6e9b2fot] {
    animation: yd-coin-turn-b-pg6e9b2fot 4.6s linear infinite;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    width: 100%;
}

.yd-coin-face[b-pg6e9b2fot],
.yd-coin-layer[b-pg6e9b2fot] {
    height: 100%;
    image-rendering: pixelated;
    inset: 0;
    position: absolute;
    width: 100%;
}

.yd-coin-face[b-pg6e9b2fot] {
    backface-visibility: hidden;
    transform: translateZ(5px);
}

.yd-coin-face--back[b-pg6e9b2fot] {
    transform: translateZ(-5px) rotateY(180deg);
}

.yd-coin-layer[b-pg6e9b2fot] {
    background: url("images/coffee-coin-pixel.png") center / contain no-repeat;
    filter: brightness(0.42);
    image-rendering: pixelated;
    transform: translateZ(calc(-5px + var(--layer) * 1.25px));
}

@keyframes yd-coin-turn-b-pg6e9b2fot {
    from { transform: rotateX(12deg) rotateY(0deg); }
    to { transform: rotateX(12deg) rotateY(-360deg); }
}

.yd-hero__body[b-pg6e9b2fot] {
    min-width: 0;
}

.yd-hero__eyebrow[b-pg6e9b2fot] {
    color: var(--stake-green);
    font: 700 0.62rem/1.2 var(--crypto-mono);
    letter-spacing: 0.16em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.yd-hero__title-row[b-pg6e9b2fot] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.yd-hero__title-row h1[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font: 400 clamp(1rem, 2.6vw, 1.65rem)/1.35 'Press Start 2P', var(--crypto-mono);
    letter-spacing: 0.04em;
    margin: 0;
    overflow-wrap: anywhere;
}

.yd-apr-badge[b-pg6e9b2fot] {
    background: var(--stake-green-dim);
    border: 1px solid color-mix(in srgb, var(--stake-green) 30%, transparent);
    color: var(--stake-green);
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.55rem;
    white-space: nowrap;
}

.yd-hero__position[b-pg6e9b2fot] {
    align-items: baseline;
    display: flex;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.yd-hero__balance[b-pg6e9b2fot] {
    color: var(--stake-amber);
    font: 500 clamp(2rem, 4vw, 3.2rem)/0.9 var(--font-display);
    letter-spacing: -0.04em;
}

.yd-hero__unit[b-pg6e9b2fot] {
    color: var(--stake-muted);
    font: 700 0.66rem/1 var(--crypto-mono);
    letter-spacing: 0.12em;
}

/* ── KPI Rail ────────────────────────────────────────────────────────── */
.yd-rail[b-pg6e9b2fot] {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.yd-rail__cell[b-pg6e9b2fot] {
    align-items: center;
    background: var(--stake-surface);
    border: 1px solid var(--stake-line);
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
}

.yd-rail__k[b-pg6e9b2fot] {
    color: var(--stake-muted);
    font-family: var(--crypto-mono);
    font-size: 0.7rem;
    min-width: 0;
}

.yd-rail__v[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font-family: var(--crypto-mono);
    font-size: 0.76rem;
    text-align: right;
    white-space: nowrap;
}

.yd-rail__v--num[b-pg6e9b2fot] {
    font: 400 0.72rem/1 'Press Start 2P', var(--crypto-mono);
}

/* ── Panels ──────────────────────────────────────────────────────────── */
.yd-panel[b-pg6e9b2fot] {
    background: var(--stake-surface);
    border: 1px solid var(--stake-line);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
    padding: 1rem 1.1rem 1.15rem;
}

.yd-panel__bar[b-pg6e9b2fot] {
    align-items: center;
    border-bottom: 1px solid var(--stake-line);
    display: flex;
    gap: 0.9rem;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
}

.yd-panel h2[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font: 400 0.66rem/1 'Press Start 2P', var(--crypto-mono);
    margin: 0;
}

.yd-panel__count[b-pg6e9b2fot] {
    color: var(--stake-green);
    font: 400 0.72rem/1 'Press Start 2P', var(--crypto-mono);
}

.yd-panel__desc[b-pg6e9b2fot] {
    color: var(--stake-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: -0.25rem 0 1rem;
}

/* ── Metrics ─────────────────────────────────────────────────────────── */
.yd-metrics[b-pg6e9b2fot] {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin: 0;
}

.yd-metrics__cell[b-pg6e9b2fot] {
    background: var(--stake-surface-2);
    border: 1px solid var(--stake-line);
    padding: 0.7rem 0.85rem;
}

.yd-metrics__cell dt[b-pg6e9b2fot] {
    color: var(--stake-faint);
    font: 700 0.59rem/1.2 var(--crypto-mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.yd-metrics__cell dd[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font: 600 1rem/1.2 var(--font-sans);
    margin: 0.4rem 0 0;
}

.yd-metrics__cell dd small[b-pg6e9b2fot] {
    color: var(--stake-faint);
    font-size: 0.6rem;
}

.yd-metrics__cell--reward dd[b-pg6e9b2fot] {
    color: var(--stake-green);
    font-family: 'Press Start 2P', var(--crypto-mono);
    font-size: 0.74rem;
    font-weight: 400;
}

/* ── Actions ─────────────────────────────────────────────────────────── */
.yd-actions-grid[b-pg6e9b2fot] {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.yd-action[b-pg6e9b2fot] {
    background: var(--stake-surface-2);
    border: 1px solid var(--stake-line);
    display: grid;
    gap: 0.75rem;
    padding: clamp(0.85rem, 1.5vw, 1.1rem);
}

.yd-action__label[b-pg6e9b2fot] {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
}

.yd-action__label > span[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font: 600 0.88rem/1 var(--font-sans);
}

.yd-action__label small[b-pg6e9b2fot] {
    color: var(--stake-faint);
    font: 500 0.58rem/1.2 var(--crypto-mono);
}

.yd-action__input[b-pg6e9b2fot] {
    align-items: center;
    background: var(--stake-bg-deep);
    border: 1px solid var(--stake-line-strong);
    display: flex;
    min-height: 3rem;
    padding: 0 0.85rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.yd-action__input:focus-within[b-pg6e9b2fot] {
    border-color: var(--stake-green);
    box-shadow: 0 0 0 3px var(--stake-green-dim);
}

.yd-action__input .yield-token-input[b-pg6e9b2fot] {
    font-family: var(--crypto-mono);
    font-size: 0.95rem;
    padding: 0;
}

.yd-action__input > span[b-pg6e9b2fot] {
    color: var(--stake-faint);
    font: 700 0.61rem/1 var(--crypto-mono);
    letter-spacing: 0.08em;
}

/* Buttons — pixel furniture: no border-radius, offset shadow on hover. */
.yd-btn[b-pg6e9b2fot] {
    border-radius: 0;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    min-height: 2.8rem;
    padding: 0.62rem 1.35rem;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
    white-space: nowrap;
    width: 100%;
}

.yd-btn--dark[b-pg6e9b2fot] {
    background: var(--stake-ink);
    border: 1px solid var(--stake-ink);
    color: var(--stake-bg);
}

.yd-btn--dark:hover:not(:disabled)[b-pg6e9b2fot] {
    background: var(--stake-amber);
    border-color: var(--stake-amber);
    box-shadow: 4px 4px 0 var(--stake-copper-dim);
    color: var(--stake-bg-deep);
    transform: translate(-2px, -2px);
}

.yd-btn--outline[b-pg6e9b2fot] {
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--stake-ink) 35%, transparent);
    color: var(--stake-ink);
}

.yd-btn--outline:hover:not(:disabled)[b-pg6e9b2fot] {
    background: color-mix(in srgb, var(--stake-ink) 6%, transparent);
    border-color: var(--stake-ink);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    transform: translate(-2px, -2px);
}

.yd-btn:disabled[b-pg6e9b2fot] {
    cursor: not-allowed;
    opacity: 0.42;
}

.yd-btn:active:not(:disabled)[b-pg6e9b2fot],
.yd-claim:active:not(:disabled)[b-pg6e9b2fot] {
    transform: scale(0.97);
}

/* Claim rewards strip at the bottom of the actions panel. */
.yd-claim[b-pg6e9b2fot] {
    align-items: center;
    background: var(--stake-green-dim);
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--stake-green) 25%, transparent);
    color: var(--stake-green);
    cursor: pointer;
    display: grid;
    font-family: var(--crypto-mono);
    gap: 0.65rem;
    grid-template-columns: auto 1fr auto;
    margin-top: 0.55rem;
    padding: 1rem clamp(0.85rem, 1.5vw, 1.1rem);
    text-align: left;
    transition: background-color 160ms ease, opacity 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.yd-claim > span:first-child[b-pg6e9b2fot] {
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.yd-claim strong[b-pg6e9b2fot] {
    font-family: 'Press Start 2P', var(--crypto-mono);
    font-size: 0.6rem;
    font-weight: 400;
    justify-self: end;
}

.yd-claim:disabled[b-pg6e9b2fot] {
    cursor: not-allowed;
    opacity: 0.38;
}

@media (hover: hover) and (pointer: fine) {
    .yd-claim:hover:not(:disabled)[b-pg6e9b2fot] {
        background: color-mix(in srgb, var(--stake-green) 22%, transparent);
    }
}

/* ── Activity ────────────────────────────────────────────────────────── */
/* The activity section is now a yd-panel — its heading/count sit inside
   .yd-panel__bar. The existing yield-activity-* row classes still style
   the inner transaction rows. */
.yd-panel.yield-activity[b-pg6e9b2fot] {
    border-top: 0;
    padding-top: 1rem;
}

.yield-activity-heading[b-pg6e9b2fot] {
    color: var(--stake-ink);
    font: 400 0.66rem/1 'Press Start 2P', var(--crypto-mono);
    margin: 0 0 1rem;
}

/* Keep existing yield-faucet, yield-config-card, yield-allocation-grid
   (legacy) and yield-activity-row styles functional — they still render
   inside the new dashboard layout. Minor squared-off overrides follow. */
.yield-main--liquid .yield-config-card[b-pg6e9b2fot] {
    border-radius: 0;
}

.yield-main--liquid .yield-faucet[b-pg6e9b2fot] {
    border-radius: 0;
}

.yield-main--liquid .yield-faucet__summary[b-pg6e9b2fot] {
    border-radius: 0;
}

.yield-main--liquid .yield-faucet-cafe[b-pg6e9b2fot] {
    background: color-mix(in srgb, var(--stake-amber) 7%, transparent);
    border-radius: 0;
}

.yield-main--liquid .yield-config-card__body[b-pg6e9b2fot] {
    align-self: center;
    margin: 1.5rem;
}

.yield-main--liquid .yield-asset-card[b-pg6e9b2fot] {
    border-radius: 0;
}

.yield-main--liquid .yield-cta-btn[b-pg6e9b2fot] {
    border-radius: 0;
}

.yield-main--liquid .yield-input-group[b-pg6e9b2fot] {
    border-radius: 0;
}

.yield-main--liquid .yield-max-btn[b-pg6e9b2fot] {
    border-radius: 0;
}

@keyframes yield-staked-token-turn-b-pg6e9b2fot {
    from { transform: rotateX(14deg) rotateY(0deg); }
    to { transform: rotateX(14deg) rotateY(-360deg); }
}

@keyframes yield-token-float-b-pg6e9b2fot {
    from { transform: translate3d(0, -4px, 0); }
    to { transform: translate3d(0, 7px, 0); }
}

@keyframes yield-staked-bean-chain-b-pg6e9b2fot {
    0%, 26% {
        background: #627eea;
        filter: drop-shadow(0 0 5px rgba(98, 126, 234, 0.8));
    }
    34%, 59% {
        background: #17dacb;
        filter: drop-shadow(0 0 5px rgba(23, 218, 203, 0.8));
    }
    67%, 92% {
        background: #f0b90b;
        filter: drop-shadow(0 0 5px rgba(240, 185, 11, 0.8));
    }
    100% {
        background: #627eea;
        filter: drop-shadow(0 0 5px rgba(98, 126, 234, 0.8));
    }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .yield-main--liquid[b-pg6e9b2fot] {
        padding: 1rem 0.75rem 3rem;
    }

    .yield-commandbar__nav a:first-child[b-pg6e9b2fot],
    .yield-live-status[b-pg6e9b2fot] {
        display: none;
    }

    .yd-hero[b-pg6e9b2fot] {
        column-gap: 0.8rem;
    }

    .yd-hero__coin[b-pg6e9b2fot] {
        height: clamp(3.5rem, 14vw, 4.5rem);
        width: clamp(3.5rem, 14vw, 4.5rem);
    }

    .yd-hero__title-row h1[b-pg6e9b2fot] {
        font-size: clamp(0.8rem, 3.5vw, 1rem);
    }

    .yd-hero__balance[b-pg6e9b2fot] {
        font-size: clamp(1.6rem, 8vw, 2.2rem);
    }

    .yd-rail[b-pg6e9b2fot] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yd-actions-grid[b-pg6e9b2fot] {
        grid-template-columns: 1fr;
    }

    .yd-action__label[b-pg6e9b2fot] {
        align-items: start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .yd-claim[b-pg6e9b2fot] {
        grid-template-columns: 1fr auto;
    }

    .yd-claim strong[b-pg6e9b2fot] {
        display: none;
    }

    .yield-allocation-grid[b-pg6e9b2fot] {
        grid-template-columns: 1fr;
    }

    .yield-activity-row[b-pg6e9b2fot] {
        gap: 0.45rem 0.7rem;
        grid-template-columns: 2rem 1fr max-content max-content;
        padding: 0.75rem 0;
    }

    .yield-activity-line[b-pg6e9b2fot] {
        display: none;
    }

    .yield-activity-tx[b-pg6e9b2fot] {
        grid-column: 3 / 5;
        justify-self: end;
    }
}

@media (max-width: 440px) {
    .yield-commandbar__network[b-pg6e9b2fot]  .chain-selector {
        min-width: 0;
    }

    .yield-commandbar__nav[b-pg6e9b2fot] {
        gap: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yd-coin3d[b-pg6e9b2fot] {
        animation: none;
        transform: rotateX(12deg) rotateY(-18deg);
    }

    .yield-commandbar__nav a[b-pg6e9b2fot],
    .yield-commandbar__nav button[b-pg6e9b2fot],
    .yd-btn[b-pg6e9b2fot],
    .yd-claim[b-pg6e9b2fot] {
        transition: none;
    }

    .yield-staked-orbit[b-pg6e9b2fot],
    .yield-staked-token[b-pg6e9b2fot],
    .yield-staked-token__bean[b-pg6e9b2fot] {
        animation: none;
    }

    .yield-staked-token[b-pg6e9b2fot] {
        transform: rotateX(14deg) rotateY(-18deg);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .yd-action[b-pg6e9b2fot] {
        background: var(--stake-surface);
    }
}
/* /Components/Storefront/FilterSidebar.razor.rz.scp.css */
/* ── FilterSidebar — Artisanal premium styling ─────────────────────────── */

.filter-panel[b-a64f93xz1t] {
    background-color: var(--surface-deep);
    box-sizing: border-box;
    color: var(--ink);
    font-family: var(--font-sans);
    padding: 1.25rem 1.25rem 2rem;
    width: 100%;
}

.filter-panel[b-a64f93xz1t],
.filter-panel *[b-a64f93xz1t] {
    box-sizing: border-box;
}

/* ── Header ── */
.filter-panel__header[b-a64f93xz1t] {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--accent);
    position: relative;
}

.filter-panel__header[b-a64f93xz1t]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 4rem;
    height: 2px;
    background: var(--ink);
}

.filter-panel__title[b-a64f93xz1t] {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
    color: var(--ink);
}

/* ── Category list ── */
/* Kraft-label tags rather than flat text rows: the panel's own
   --surface-deep background sat too close to --muted text and to the
   color-mix(accent 8%) active tint for either state to read clearly, so
   each category now gets its own bordered card that stands off the panel
   regardless of state. */
.filter-panel__categories ul[b-a64f93xz1t] {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.filter-panel__category-link[b-a64f93xz1t] {
    background: var(--white);
    border: 1.5px solid var(--line);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.7rem 1rem;
    text-align: left;
    transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 160ms ease;
    width: 100%;
    border-radius: 0.6rem;
    position: relative;
}

.filter-panel__category-link:hover[b-a64f93xz1t] {
    border-color: var(--accent);
    transform: translateX(2px);
}

.filter-panel__category-link.is-active[b-a64f93xz1t] {
    background-color: var(--ink);
    border-color: var(--ink);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--ink) 25%, transparent);
    color: var(--white);
    font-weight: 700;
}

/* ── Sort control ── */
.filter-panel__sort[b-a64f93xz1t] {
    align-items: center;
    border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 1.15rem 0;
}

.filter-panel__sort label[b-a64f93xz1t] {
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.filter-panel__sort select[b-a64f93xz1t] {
    appearance: none;
    background: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23746a63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    max-width: 10rem;
    padding: 0.45rem 2rem 0.45rem 0.75rem;
    transition: border-color 180ms ease, box-shadow 180ms ease;
    cursor: pointer;
}

.filter-panel__sort select:hover[b-a64f93xz1t] {
    border-color: var(--accent);
}

/* ── Focus visible ── */
.filter-panel__sort select:focus-visible[b-a64f93xz1t],
.filter-panel__category-link:focus-visible[b-a64f93xz1t],
.filter-panel__section-header:focus-visible[b-a64f93xz1t],
.filter-panel__checkbox input:focus-visible[b-a64f93xz1t] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Collapsible sections ── */
.filter-panel__sections[b-a64f93xz1t] {
    display: grid;
}

.filter-panel__section[b-a64f93xz1t] {
    border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    padding: 0;
}

.filter-panel__section-header[b-a64f93xz1t] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    justify-content: space-between;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1rem 0;
    text-align: left;
    width: 100%;
    transition: color 160ms ease;
}

.filter-panel__section-header:hover[b-a64f93xz1t] {
    color: var(--accent);
}

.filter-panel__chevron[b-a64f93xz1t] {
    color: var(--muted);
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), color 160ms ease;
}

.filter-panel__section-header:hover .filter-panel__chevron[b-a64f93xz1t] {
    color: var(--accent);
}

.filter-panel__chevron.is-open[b-a64f93xz1t] {
    transform: rotate(180deg);
}

.filter-panel__section-content[b-a64f93xz1t] {
    display: grid;
    gap: 0.5rem;
    padding-bottom: 1rem;
    animation: filterReveal-b-a64f93xz1t 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes filterReveal-b-a64f93xz1t {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Checkbox filters ── */
.filter-panel__checkbox[b-a64f93xz1t] {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.65rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.4rem;
    transition: background-color 160ms ease;
}

.filter-panel__checkbox:hover[b-a64f93xz1t] {
    background-color: color-mix(in srgb, var(--accent) 5%, transparent);
}

.filter-panel__checkbox input[type="checkbox"][b-a64f93xz1t] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border: 1.5px solid var(--line);
    border-radius: 0.3rem;
    margin: 0;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    position: relative;
    flex-shrink: 0;
}

.filter-panel__checkbox input[type="checkbox"]:hover[b-a64f93xz1t] {
    border-color: var(--accent);
}

.filter-panel__checkbox input[type="checkbox"]:checked[b-a64f93xz1t] {
    background-color: var(--accent);
    border-color: var(--accent);
}

.filter-panel__checkbox input[type="checkbox"]:checked[b-a64f93xz1t]::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 0.35rem;
    height: 0.6rem;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.filter-panel__checkbox-label[b-a64f93xz1t] {
    color: var(--ink);
    flex: 1 1 auto;
    font-size: 0.87rem;
    font-weight: 450;
}

.filter-panel__checkbox-count[b-a64f93xz1t] {
    color: var(--muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--line) 40%, transparent);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-weight: 500;
    line-height: 1.5;
}

/* ── Price range ── */
.filter-panel__price-inputs[b-a64f93xz1t] {
    align-items: end;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr auto 1fr;
}

.filter-panel__price-inputs label[b-a64f93xz1t] {
    color: var(--muted);
    display: grid;
    font-size: 0.65rem;
    gap: 0.25rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

.filter-panel__price-inputs input[b-a64f93xz1t] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.82rem;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    width: 100%;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.filter-panel__price-inputs input:focus[b-a64f93xz1t] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    outline: none;
}

.filter-panel__range[b-a64f93xz1t] {
    height: 1.25rem;
    margin-top: 1rem;
    position: relative;
}

.filter-panel__range-track[b-a64f93xz1t],
.filter-panel__range-fill[b-a64f93xz1t] {
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: calc(50% - 1.5px);
    border-radius: 2px;
}

.filter-panel__range-track[b-a64f93xz1t] {
    background: var(--line);
}

.filter-panel__range-fill[b-a64f93xz1t] {
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--ink)));
}

.filter-panel__range-input[b-a64f93xz1t] {
    inset: 0;
}

.filter-panel__range-labels[b-a64f93xz1t] {
    color: var(--muted);
    display: flex;
    font-size: 0.7rem;
    font-weight: 500;
    justify-content: space-between;
    margin-top: 0.4rem;
    letter-spacing: 0.02em;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .filter-panel__category-link[b-a64f93xz1t],
    .filter-panel__chevron[b-a64f93xz1t] {
        transition: none;
    }

    .filter-panel__section-content[b-a64f93xz1t] {
        animation: none;
    }
}

/* ── Mobile ── */
/* .catalog-filter-sheet (Products.razor.css) already contributes 1.25rem of
   horizontal inset around the panel; this adds the panel's own breathing
   room on top of that rather than sitting flush against the sheet edge. */
@media (max-width: 1023px) {
    .filter-panel[b-a64f93xz1t] {
        padding: 0.75rem 0.5rem 1.5rem;
    }
}

/* Desktop: pins below the fixed header while the product grid scrolls past
   it (see Products.razor.css .catalog-filter-sheet for the header offset).
   max-height + overflow-y:auto rather than a fixed height: with several
   checkbox sections expanded the panel can exceed the viewport, and
   max-height only engages the internal scrollbar (and captures the wheel)
   once that actually happens — short content still lets the page scroll
   normally with the cursor over the panel. */
@media (min-width: 1024px) {
    .filter-panel[b-a64f93xz1t] {
        max-height: calc(100dvh - 3.325rem);
        overflow-y: auto;
        /* Thin custom scrollbar that blends with the panel */
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--line) 60%, transparent) transparent;
        /* The column's own margin-left cancellation (Products.razor.css
           .catalog-filter-sheet) pulls the panel's background flush to the
           shell's left edge — that's a background position, not a text
           inset, so it still needs its own left padding or the heading and
           section labels render glued to the viewport edge. */
        padding: 1.75rem 1.5rem;
        position: sticky;
        top: 3.325rem;
    }

    .filter-panel[b-a64f93xz1t]::-webkit-scrollbar {
        width: 4px;
    }

    .filter-panel[b-a64f93xz1t]::-webkit-scrollbar-track {
        background: transparent;
    }

    .filter-panel[b-a64f93xz1t]::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--line) 60%, transparent);
        border-radius: 4px;
    }
}
/* /Components/Story/StoryTechShowcase.razor.rz.scp.css */
.story-tech[b-eg9ijuz1up] {
    --tech-accent: #ed5138;
    --tech-blue: #1575d1;
    background: #fff;
    box-shadow: 0 0 0 100vmax #fff;
    clip-path: inset(0 -100vmax);
    color: #171717;
    height: 430svh;
    isolation: isolate;
    min-height: 100svh;
    position: relative;
}

.story-tech__sticky[b-eg9ijuz1up] {
    background:
        radial-gradient(circle at 50% 50%, rgba(21, 117, 209, 0.045), transparent 30%),
        linear-gradient(#fff, #fff);
    height: 100svh;
    min-height: 42rem;
    overflow: clip;
    position: sticky;
    top: 0;
}

.story-tech__kicker[b-eg9ijuz1up] {
    font-family: var(--crypto-mono);
    text-transform: uppercase;
}

.story-tech__titles[b-eg9ijuz1up] {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 5;
}

.story-tech__title[b-eg9ijuz1up] {
    left: 50%;
    max-width: min(42rem, calc(100vw - 3rem));
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate3d(-50%, calc(-50% + 2rem), 0) scale(0.96);
    width: 100%;
    will-change: transform, opacity;
}

.story-tech__title--infra[b-eg9ijuz1up] {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
}

.story-tech__kicker[b-eg9ijuz1up] {
    color: var(--tech-accent);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    margin: 0 0 0.8rem;
}

.story-tech__title--infra .story-tech__kicker[b-eg9ijuz1up] {
    color: var(--tech-blue);
}

.story-tech__title h2[b-eg9ijuz1up] {
    color: #171717;
    font-family: var(--font-sans);
    font-size: clamp(3rem, 8vw, 7.5rem);
    font-weight: 500;
    letter-spacing: -0.065em;
    line-height: 0.88;
    margin: 0;
}

.story-tech__title h2 em[b-eg9ijuz1up] {
    color: var(--tech-accent);
    font-family: var(--font-display);
    font-weight: 500;
}

.story-tech__title--infra h2 em[b-eg9ijuz1up] {
    color: var(--tech-blue);
    font-family: "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
}

.story-tech__title > p:last-child[b-eg9ijuz1up] {
    color: #686868;
    font-size: clamp(0.82rem, 1.2vw, 1rem);
    line-height: 1.55;
    margin: 1.25rem auto 0;
    max-width: 31rem;
}

.story-tech__title--bridge h2[b-eg9ijuz1up] {
    font-size: clamp(2.8rem, 7vw, 6.25rem);
}

.story-tech__layer[b-eg9ijuz1up] {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.story-tech__layer--contracts[b-eg9ijuz1up] {
    z-index: 4;
}

.story-tech__card[b-eg9ijuz1up] {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(23, 23, 23, 0.1);
    border-radius: 0.9rem;
    box-shadow: 0 18px 48px -28px rgba(16, 39, 66, 0.34);
    box-sizing: border-box;
    color: #171717;
    left: 50%;
    min-height: 7.25rem;
    padding: 0.9rem 1rem;
    pointer-events: auto;
    position: absolute;
    text-decoration: none;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center;
    width: clamp(10.5rem, 16vw, 14rem);
    will-change: transform, opacity;
}

.story-tech__card--azure[b-eg9ijuz1up] {
    pointer-events: none;
}

.story-tech__card--contract[b-eg9ijuz1up] {
    opacity: 0;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.story-tech__card--contract:focus-visible[b-eg9ijuz1up] {
    outline: 2px solid var(--tech-blue);
    outline-offset: 3px;
}

.story-tech__card-top[b-eg9ijuz1up] {
    align-items: center;
    display: flex;
    gap: 0.45rem;
}

.story-tech__icon-shell[b-eg9ijuz1up],
.story-tech__chain-mark[b-eg9ijuz1up] {
    align-items: center;
    background: #f2f7fc;
    border-radius: 0.45rem;
    display: inline-flex;
    flex: none;
    height: 1.7rem;
    justify-content: center;
    width: 1.7rem;
}

.story-tech__icon-shell img[b-eg9ijuz1up] {
    height: 1.05rem;
    width: 1.05rem;
}

.story-tech__chain-mark[b-eg9ijuz1up] {
    color: var(--tech-blue);
    font-family: var(--crypto-mono);
    font-size: 0.95rem;
    font-weight: 700;
}

.story-tech__status[b-eg9ijuz1up],
.story-tech__network[b-eg9ijuz1up] {
    align-items: center;
    color: #767676;
    display: flex;
    font-family: var(--crypto-mono);
    font-size: 0.55rem;
    gap: 0.3rem;
    letter-spacing: 0.07em;
    margin-left: auto;
    text-transform: uppercase;
}

.story-tech__status > span[b-eg9ijuz1up] {
    background: #279b57;
    border-radius: 50%;
    height: 0.38rem;
    width: 0.38rem;
}

.story-tech__status.is-idle > span[b-eg9ijuz1up] {
    background: #dc9b2b;
}

.story-tech__external[b-eg9ijuz1up] {
    color: #9a9a9a;
    font-size: 0.75rem;
}

.story-tech__meta[b-eg9ijuz1up] {
    color: var(--tech-blue);
    font-family: var(--crypto-mono);
    font-size: 0.55rem;
    letter-spacing: 0.11em;
    margin: 0.72rem 0 0;
    text-transform: uppercase;
}

.story-tech__card h3[b-eg9ijuz1up] {
    color: #171717;
    font-family: var(--font-sans);
    font-size: clamp(0.8rem, 1.05vw, 0.96rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0.28rem 0 0;
    overflow-wrap: anywhere;
}

.story-tech__detail[b-eg9ijuz1up] {
    color: #777;
    font-size: 0.65rem;
    line-height: 1.35;
    margin: 0.35rem 0 0;
}

.story-tech__nav[b-eg9ijuz1up] {
    align-items: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(23, 23, 23, 0.1);
    border-radius: 999px;
    bottom: clamp(1rem, 3vh, 2rem);
    box-shadow: 0 14px 40px -24px rgba(0, 0, 0, 0.4);
    display: flex;
    gap: 0.75rem;
    left: 50%;
    padding: 0.35rem;
    position: absolute;
    transform: translateX(-50%);
    z-index: 9;
}

.story-tech__nav button[b-eg9ijuz1up] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #777;
    cursor: pointer;
    display: flex;
    font-family: var(--crypto-mono);
    font-size: 0.61rem;
    gap: 0.45rem;
    letter-spacing: 0.04em;
    padding: 0.58rem 0.78rem;
    transition: background 180ms ease, color 180ms ease, transform 120ms cubic-bezier(.23, 1, .32, 1);
    white-space: nowrap;
}

.story-tech__nav button span[b-eg9ijuz1up] {
    color: var(--tech-accent);
    font-size: 0.55rem;
}

.story-tech__nav button.is-active[b-eg9ijuz1up] {
    background: #171717;
    color: #fff;
}

.story-tech__nav button:active[b-eg9ijuz1up] {
    transform: scale(0.97);
}

.story-tech__nav-track[b-eg9ijuz1up] {
    background: #e6e6e6;
    border-radius: 999px;
    display: block;
    height: 2px;
    overflow: hidden;
    width: clamp(2.5rem, 7vw, 6rem);
}

.story-tech__nav-track span[b-eg9ijuz1up] {
    background: var(--tech-accent);
    display: block;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    width: 100%;
}

.story-tech__scroll-cue[b-eg9ijuz1up] {
    align-items: center;
    bottom: clamp(1.75rem, 4vh, 3rem);
    color: #969696;
    display: flex;
    font-family: var(--crypto-mono);
    font-size: 0.56rem;
    gap: 0.55rem;
    left: clamp(1rem, 3vw, 2.5rem);
    letter-spacing: 0.08em;
    margin: 0;
    position: absolute;
    text-transform: uppercase;
    z-index: 8;
}

.story-tech__scroll-cue span[b-eg9ijuz1up] {
    border: 1px solid #b8b8b8;
    border-radius: 999px;
    display: block;
    height: 1.5rem;
    position: relative;
    width: 0.85rem;
}

.story-tech__scroll-cue span[b-eg9ijuz1up]::after {
    background: var(--tech-accent);
    border-radius: 50%;
    content: "";
    height: 0.2rem;
    left: 50%;
    position: absolute;
    top: 0.3rem;
    transform: translateX(-50%);
    width: 0.2rem;
}

@media (hover: hover) and (pointer: fine) {
    .story-tech__card--contract:hover[b-eg9ijuz1up] {
        border-color: color-mix(in srgb, var(--tech-blue) 42%, transparent);
        box-shadow: 0 24px 55px -27px rgba(21, 117, 209, 0.48);
    }
}

@media (max-width: 760px) {
    .story-tech[b-eg9ijuz1up] {
        height: 360svh;
    }

    .story-tech__sticky[b-eg9ijuz1up] {
        min-height: 36rem;
    }

    .story-tech__title[b-eg9ijuz1up] {
        background: radial-gradient(closest-side, #fff 68%, rgba(255, 255, 255, 0) 100%);
        box-sizing: border-box;
        max-width: 19rem;
        padding: 4rem 1rem;
    }

    .story-tech__title h2[b-eg9ijuz1up] {
        font-size: clamp(2.8rem, 13vw, 3.4rem);
        margin-inline: auto;
        max-width: 17rem;
    }

    .story-tech__title > p:last-child[b-eg9ijuz1up] {
        display: none;
    }

    .story-tech__card[b-eg9ijuz1up] {
        border-radius: 0.7rem;
        min-height: 6rem;
        padding: 0.7rem;
        width: clamp(8.25rem, 41vw, 10.5rem);
    }

    .story-tech__detail[b-eg9ijuz1up] {
        display: none;
    }

    .story-tech__meta[b-eg9ijuz1up] {
        margin-top: 0.48rem;
    }

    .story-tech__nav[b-eg9ijuz1up] {
        gap: 0.15rem;
        max-width: calc(100vw - 1.5rem);
    }

    .story-tech__nav button[b-eg9ijuz1up] {
        padding-inline: 0.62rem;
    }

    .story-tech__nav-track[b-eg9ijuz1up] {
        width: 1.25rem;
    }

    .story-tech__scroll-cue[b-eg9ijuz1up] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-tech[b-eg9ijuz1up] {
        height: auto;
        padding-block: clamp(5.5rem, 12vw, 8rem);
    }

    .story-tech__sticky[b-eg9ijuz1up] {
        height: auto;
        min-height: 0;
        overflow: visible;
        position: relative;
    }

    .story-tech__nav[b-eg9ijuz1up],
    .story-tech__scroll-cue[b-eg9ijuz1up],
    .story-tech__title--bridge[b-eg9ijuz1up] {
        display: none;
    }

    .story-tech__titles[b-eg9ijuz1up],
    .story-tech__layer[b-eg9ijuz1up] {
        inset: auto;
        position: relative;
    }

    .story-tech__title[b-eg9ijuz1up] {
        left: auto;
        margin: 0 auto 2.5rem;
        opacity: 1 !important;
        position: relative;
        top: auto;
        transform: none !important;
    }

    .story-tech__title--contracts[b-eg9ijuz1up] {
        margin-top: clamp(4rem, 10vw, 7rem);
    }

    .story-tech__layer[b-eg9ijuz1up] {
        display: grid;
        gap: 0.8rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .story-tech__card[b-eg9ijuz1up] {
        left: auto;
        min-height: 8rem;
        opacity: 1 !important;
        position: relative;
        top: auto;
        transform: none !important;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
    .story-tech__layer[b-eg9ijuz1up] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}