/* /Components/EmptyState.razor.rz.scp.css */
.pw-empty[b-iplv902n7t] {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--chrome-separator);
    background: var(--chrome-surface);
}

.pw-empty svg[b-iplv902n7t] {
    width: 48px;
    height: 48px;
    fill: none;
    stroke: var(--chrome-label-3);
    stroke-width: 1.5;
    stroke-linejoin: round;
}
/* /Components/PaletteStrip.razor.rz.scp.css */
.pw-strip[b-y8vvuoeu38] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-separator);
}

.pw-strip-item[b-y8vvuoeu38] {
    display: grid;
    gap: var(--space-1);
}

.pw-strip-label[b-y8vvuoeu38] {
    text-align: center;
    font-size: var(--text-caption2);
    color: var(--chrome-label-2);
    font-weight: 600;
}

.pw-strip[b-y8vvuoeu38]  .pw-swatch {
    min-height: 48px;
    border-radius: var(--radius-sm);
}

@media (min-width: 48rem) {
    .pw-strip[b-y8vvuoeu38]  .pw-swatch {
        min-height: 64px;
    }
}
/* /Components/PreviewUi.razor.rz.scp.css */
.pw-preview[b-v1vhm87ubl] {
    border-radius: var(--radius-lg);
    border: 1px solid var(--chrome-separator);
    overflow: hidden;
    max-width: 22rem;
    margin-inline: auto;
    box-shadow: var(--chrome-shadow);
}

.pw-preview-bar[b-v1vhm87ubl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid currentColor;
    opacity: 0.95;
}

.pw-preview-bar-title[b-v1vhm87ubl] {
    font-weight: 700;
    font-size: var(--text-callout);
}

.pw-preview-bar-dot[b-v1vhm87ubl] {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: currentColor;
    opacity: 0.4;
}

.pw-preview-body[b-v1vhm87ubl] {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.pw-preview-card[b-v1vhm87ubl] {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--pw-preview-surface);
}

.pw-preview-card-title[b-v1vhm87ubl] {
    font-weight: 700;
    font-size: var(--text-callout);
}

.pw-preview-card-text[b-v1vhm87ubl] {
    font-size: var(--text-subhead);
    line-height: 1.8;
}

/* The accent chip: its label sits on the accent colour, so it uses whichever of
   the palette's neutral roles reads on it. */
.pw-preview-chip[b-v1vhm87ubl] {
    justify-self: start;
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    background: var(--pw-preview-accent);
    color: var(--pw-preview-on-primary);
    font-size: var(--text-caption1);
    font-weight: 700;
}

.pw-preview-list[b-v1vhm87ubl] {
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-subhead);
}

.pw-preview-list li[b-v1vhm87ubl] {
    padding-block: var(--space-2);
    border-block-end: 1px solid currentColor;
    opacity: 0.9;
}

.pw-preview-button[b-v1vhm87ubl] {
    min-height: var(--tap-min);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--pw-preview-primary);
    color: var(--pw-preview-on-primary);
    font-size: var(--text-callout);
    font-weight: 700;
    cursor: default;
}
/* /Components/ScenarioCard.razor.rz.scp.css */
.pw-card[b-583kchiort] {
    display: grid;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-3);
    border: 1px solid var(--chrome-separator);
    border-radius: var(--radius-lg);
    background: var(--chrome-surface);
    color: var(--chrome-label);
    cursor: pointer;
    text-align: start;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.pw-card:hover:not(:disabled)[b-583kchiort] {
    border-color: var(--chrome-accent);
}

.pw-card:active:not(:disabled)[b-583kchiort] {
    transform: scale(0.985);
}

.pw-card:disabled[b-583kchiort] {
    cursor: progress;
    opacity: 0.9;
}

.pw-card[b-583kchiort]  .scene-art {
    border-radius: var(--radius-md);
    background: var(--chrome-fill);
    padding: var(--space-2);
}

.pw-card-caption[b-583kchiort] {
    font-size: var(--text-callout);
    font-weight: 600;
    line-height: 1.7;
}

/* /Components/Swatch.razor.rz.scp.css */
.pw-swatch[b-in1951ns53] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--chrome-separator);
    /* Swatches interpolate in OKLCH over about 400ms (SPEC §7.1). */
    transition: background-color var(--motion-swatch) ease, filter var(--motion-swatch) ease,
        opacity var(--motion-swatch) ease;
    min-height: 56px;
    overflow: hidden;
}

/* Below 0.4 confidence: desaturated and soft, so the estimate reads as a guess. */
.pw-swatch.is-blurred[b-in1951ns53] {
    filter: saturate(0.35) blur(3px);
    opacity: 0.85;
}

/* Between 0.4 and 0.7: partially sharp. */
.pw-swatch.is-partial[b-in1951ns53] {
    filter: saturate(0.7);
    opacity: 0.95;
}

/* At 0.7 and above the swatch locks in, with a small confirming pulse. */
.pw-swatch.is-crisp[b-in1951ns53] {
    filter: none;
    opacity: 1;
    animation: pw-swatch-lock-b-in1951ns53 520ms ease-out;
}

.pw-swatch-certainty[b-in1951ns53] {
    font-weight: 700;
    color: currentColor;
    mix-blend-mode: difference;
    opacity: 0.75;
    font-size: var(--text-footnote);
}

@keyframes pw-swatch-lock-b-in1951ns53 {
    0% {
        transform: scale(0.94);
        box-shadow: 0 0 0 0 var(--chrome-fill);
    }

    60% {
        box-shadow: 0 0 0 6px var(--chrome-fill);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--chrome-fill);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pw-swatch.is-crisp[b-in1951ns53] {
        animation: none;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.pw-shell[b-tztrrwisjt] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--chrome-bg);
    color: var(--chrome-label);
    transition: background-color 400ms ease, color 400ms ease;
}

/* The top bar is a control layer, so a light glass treatment is appropriate. */
.pw-topbar[b-tztrrwisjt] {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--tap-min);
    padding: var(--space-3) var(--space-4);
    background: var(--chrome-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-block-end: 1px solid var(--chrome-separator);
}

.pw-brand[b-tztrrwisjt] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    font-size: var(--text-headline);
    font-weight: 700;
    color: var(--chrome-label);
}

.pw-brand-mark[b-tztrrwisjt] {
    width: 22px;
    height: 22px;
    fill: var(--chrome-accent);
}

.pw-topbar-badge[b-tztrrwisjt] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--chrome-fill);
    color: var(--chrome-label-2);
    font-size: var(--text-caption1);
    font-weight: 600;
}

.pw-main[b-tztrrwisjt] {
    flex: 1;
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding: var(--space-4) var(--space-4) calc(var(--tap-min) + var(--space-6));
}

/* A floating capsule tab bar rather than an edge-to-edge bar. */
.pw-tabbar[b-tztrrwisjt] {
    position: fixed;
    inset-block-end: var(--space-4);
    inset-inline: var(--space-4);
    z-index: 30;
    max-width: 22rem;
    margin-inline: auto;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--chrome-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--chrome-separator);
    box-shadow: var(--chrome-shadow);
}

/*
   The tab anchors are rendered by the <NavLink> child component, so they carry
   no scope attribute of their own. These rules must therefore go through ::deep,
   anchored at the tab bar that this component renders itself — a bare
   ".pw-tab" here compiles to ".pw-tab[b-…]" and never matches.
*/
.pw-tabbar[b-tztrrwisjt]  .pw-tab {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--tap-min);
    border-radius: var(--radius-full);
    color: var(--chrome-label-2);
    font-size: var(--text-caption1);
    font-weight: 600;
}

.pw-tabbar[b-tztrrwisjt]  .pw-tab svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pw-tabbar[b-tztrrwisjt]  .pw-tab.active {
    color: var(--chrome-label);
    background: var(--chrome-fill);
}

@media (min-width: 48rem) {
    .pw-main[b-tztrrwisjt] {
        padding-inline: var(--space-6);
    }
}
/* /Pages/Compare.razor.rz.scp.css */
.pw-compare[b-nkomx5iuyy] {
    display: grid;
    gap: var(--space-4);
}

.pw-compare-side[b-nkomx5iuyy] {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-separator);
}

.pw-compare-swatches[b-nkomx5iuyy] {
    display: grid;
    gap: var(--space-2);
}

.pw-compare-swatches li[b-nkomx5iuyy] {
    display: grid;
    grid-template-columns: 32px 5.5rem 1fr;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-footnote);
}

.pw-compare-swatches span:first-child[b-nkomx5iuyy] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--chrome-separator);
}

.pw-compare-story[b-nkomx5iuyy] {
    color: var(--chrome-label-2);
    font-size: var(--text-subhead);
}

.pw-axis[b-nkomx5iuyy] {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-block-start: 1px solid var(--chrome-separator);
}

.pw-axis:first-child[b-nkomx5iuyy] {
    border-block-start: 0;
}

.pw-axis-head[b-nkomx5iuyy] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-subhead);
}

/* The track runs from -1 to +1 (or 0-360 for hue) with a single marker. */
.pw-axis-bar[b-nkomx5iuyy] {
    position: relative;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--chrome-fill);
}

.pw-axis-fill[b-nkomx5iuyy] {
    position: absolute;
    inset-block: -4px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: var(--chrome-accent);
    transform: translateX(50%);
}

@media (min-width: 48rem) {
    .pw-compare[b-nkomx5iuyy] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Pages/History.razor.rz.scp.css */
.pw-entry[b-t71vtaebtd] {
    flex-wrap: wrap;
    gap: var(--space-3);
}

.pw-entry-select[b-t71vtaebtd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    margin-inline-start: calc(var(--space-2) * -1);
}

.pw-entry-select input[b-t71vtaebtd] {
    width: 22px;
    height: 22px;
    accent-color: var(--chrome-accent);
}

.pw-entry-swatches[b-t71vtaebtd] {
    display: inline-flex;
    gap: 2px;
    flex: 0 0 auto;
}

.pw-entry-swatches span[b-t71vtaebtd] {
    width: 16px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid var(--chrome-separator);
}

.pw-entry-text[b-t71vtaebtd] {
    display: grid;
    gap: 0;
    flex: 1 1 10rem;
    font-size: var(--text-subhead);
}

.pw-entry-detail[b-t71vtaebtd] {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--chrome-fill);
}

.pw-detail-row[b-t71vtaebtd] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-footnote);
    flex-wrap: wrap;
}

.pw-detail-swatch[b-t71vtaebtd] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid var(--chrome-separator);
}
/* /Pages/Home.razor.rz.scp.css */
.pw-home[b-3owo7g9er3] {
    padding-block-start: var(--space-2);
}

.pw-hero[b-3owo7g9er3] {
    display: grid;
    gap: var(--space-3);
    padding-block: var(--space-5);
}

.pw-pill[b-3owo7g9er3] {
    justify-self: start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--chrome-fill);
    color: var(--chrome-label-2);
    font-size: var(--text-caption1);
    font-weight: 600;
}

.pw-home-cta[b-3owo7g9er3] {
    width: 100%;
    min-height: 56px;
    font-size: var(--text-headline);
}

.pw-step[b-3owo7g9er3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--chrome-fill);
    color: var(--chrome-label-2);
    font-size: var(--text-caption1);
    font-weight: 700;
}
/* /Pages/Play.razor.rz.scp.css */
.pw-play[b-y7o4er5lar] {
    display: grid;
    gap: var(--space-4);
    min-height: calc(100vh - 12rem);
    align-content: start;
}

.pw-play-head[b-y7o4er5lar] {
    display: grid;
    gap: var(--space-2);
}

.pw-play-prompt[b-y7o4er5lar] {
    font-size: var(--text-title2);
    font-weight: 700;
    line-height: 1.6;
}

.pw-play-tiebreaker[b-y7o4er5lar] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    justify-self: start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--chrome-fill);
    color: var(--chrome-label-2);
    font-size: var(--text-footnote);
    font-weight: 600;
}

.pw-play-tiebreaker-dot[b-y7o4er5lar] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--chrome-accent);
}

/* The option grid belongs to this page, so the rule must live here: a scoped
   rule only matches elements this component renders itself. */
.pw-grid[b-y7o4er5lar] {
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 34rem) {
    .pw-grid[b-y7o4er5lar] {
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    }
}

/* The strip stays in view while the cards scroll. */
.pw-play-strip[b-y7o4er5lar] {
    position: sticky;
    inset-block-end: calc(var(--tap-min) + var(--space-6));
    z-index: 10;
}
/* /Pages/Result.razor.rz.scp.css */
.pw-result[b-r49l4wqa2h] {
    padding-block-end: var(--space-6);
}

.pw-result-head[b-r49l4wqa2h] {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-4);
}

.pw-result-story[b-r49l4wqa2h] {
    color: var(--chrome-label-2);
    font-size: var(--text-callout);
    max-width: 40rem;
}

.pw-role-swatch[b-r49l4wqa2h] {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--chrome-separator);
}

.pw-role[b-r49l4wqa2h] {
    align-items: flex-start;
    flex-wrap: wrap;
}

.pw-role-name[b-r49l4wqa2h] {
    font-weight: 600;
    min-width: 4.5rem;
}

.pw-role-values[b-r49l4wqa2h] {
    display: grid;
    gap: 2px;
    font-size: var(--text-footnote);
    color: var(--chrome-label-2);
}

.pw-role-oklch[b-r49l4wqa2h] {
    font-size: var(--text-caption1);
    opacity: 0.85;
}

.pw-role-actions[b-r49l4wqa2h] {
    display: inline-flex;
    gap: var(--space-1);
    margin-inline-start: auto;
}

.pw-role-actions .pw-button[b-r49l4wqa2h] {
    min-height: 32px;
    padding: 0 var(--space-2);
    font-size: var(--text-caption1);
}

.pw-explain[b-r49l4wqa2h] {
    align-items: flex-start;
}

.pw-explain-text[b-r49l4wqa2h] {
    display: block;
    color: var(--chrome-label-2);
    font-size: var(--text-subhead);
    line-height: 1.9;
}

.pw-result-replay[b-r49l4wqa2h] {
    width: 100%;
    min-height: 52px;
    font-size: var(--text-headline);
}
/* /Pages/Reveal.razor.rz.scp.css */
.pw-reveal[b-pheptzwytl] {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    text-align: center;
    padding-block: var(--space-6);
    min-height: 60vh;
    align-content: center;
}

.pw-reveal-kicker[b-pheptzwytl] {
    font-size: var(--text-footnote);
    color: var(--chrome-label-2);
    font-weight: 600;
}

.pw-reveal-swatches[b-pheptzwytl] {
    display: flex;
    gap: var(--space-2);
}

.pw-reveal-swatch[b-pheptzwytl] {
    width: 44px;
    height: 88px;
    border-radius: var(--radius-full);
    transform: translateY(14px) scale(0.9);
    opacity: 0;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms ease;
}

.is-settled .pw-reveal-swatch[b-pheptzwytl] {
    transform: none;
    opacity: 1;
}

.is-settled .pw-reveal-swatch:nth-child(2)[b-pheptzwytl] { transition-delay: 60ms; }
.is-settled .pw-reveal-swatch:nth-child(3)[b-pheptzwytl] { transition-delay: 120ms; }
.is-settled .pw-reveal-swatch:nth-child(4)[b-pheptzwytl] { transition-delay: 180ms; }
.is-settled .pw-reveal-swatch:nth-child(5)[b-pheptzwytl] { transition-delay: 240ms; }

.pw-reveal-name[b-pheptzwytl] {
    font-size: var(--text-large-title);
    font-weight: 700;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 500ms ease 260ms, transform 500ms ease 260ms;
}

.is-settled .pw-reveal-name[b-pheptzwytl] {
    opacity: 1;
    transform: none;
}

.pw-reveal-story[b-pheptzwytl] {
    max-width: 34rem;
    color: var(--chrome-label-2);
    font-size: var(--text-callout);
    opacity: 0;
    transition: opacity 500ms ease 420ms;
}

.is-settled .pw-reveal-story[b-pheptzwytl] {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pw-reveal-swatch[b-pheptzwytl],
    .pw-reveal-name[b-pheptzwytl],
    .pw-reveal-story[b-pheptzwytl] {
        transition: none;
        opacity: 1;
        transform: none;
    }
}