/*
 * reDO — site stylesheet (loaded from index as ./styles.css).
 * url() assets (relative to this file): Assets/arrow.png, Assets/arrow2.png
 * Ensure this file and Assets/ deploy beside index.html with matching case (Linux hosts are case-sensitive).
 */
:root {
    /* Single stack sitewide: body copy, UI, numbers, labels */
    --font-site: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Legacy token kept so existing rules stay valid; same family everywhere */
    --font-mono: var(--font-site);
    /* CLICK arc on forward handle: stable darker grey (no state-based fill shifts) */
    --redo-drag-label-fill: rgba(18, 18, 18, 0.94);
    --redo-drag-label-fill-on-dark: rgba(130, 130, 130, 0.96);
    /* Single tone on white + black forward knob (~5:1 on #000, readable on #fff) */
    --redo-drag-label-hint-grey: rgba(122, 122, 122, 0.98);
    --redo-drag-hint-copy: rgba(0, 0, 0, 0.78);
    /* Forward dragger: ring width + color track default .progress-line; same grey until forward is armed */
    /* Dragger ring + vertical track (all forward/back handles use this width) */
    --redo-progress-line-width: 3px;
    --redo-forward-dragger-border-idle: var(--color-disabled);
    /* Armed (black fill): ring matches fill so idle grey ring does not linger */
    --redo-forward-dragger-border-armed: var(--color-black);
    /* Monochrome UI — black, white, greys only (no accent hues) */
    /* OLED-friendly deep base (large fills), vs pure #000 for hairline UI strokes */
    --color-obsidian: #0a0a0a;
    --color-surface-low: #f5f5f5;
    --color-border-stroke: #e0e0e0;
    --color-surface-muted: #ebebeb;
    /* Step 4 column: dark grey (readable vs step 3 light #ebebeb), not near-black obsidian */
    --color-step-4-panel: #4f4f56;
    --glass-light-bg: rgba(255, 255, 255, 0.62);
    --glass-light-border: rgba(255, 255, 255, 0.38);
    --glass-dark-bg: rgba(0, 0, 0, 0.72);
    --glass-dark-bg-hover: rgba(0, 0, 0, 0.82);
    --glass-dark-border: rgba(255, 255, 255, 0.12);
    --glass-blur: blur(20px) saturate(120%);
    --glass-blur-strong: blur(24px) saturate(118%);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-softer: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    --color-black: #000000;
    --color-text: #111111;
    --color-text-secondary: #666666;
    --color-text-muted: #888888;
    --color-disabled: #cccccc;
    --color-border: var(--color-border-stroke);
    --color-surface: #fafafa;
    --color-surface-subtle: var(--color-surface-low);
    --color-white: #ffffff;
    --color-ui-strong: #1a1a1a;
    --color-step-idle: #e0e0e0;
    --color-step-idle-border: #cccccc;
    --color-step-completed-bg: #d0d0d0;
    --color-step-completed-border: #555555;
    /* Bottom nav — 3 states: completed | current (focus) | upcoming (inactive) */
    --nav-step-completed-circle-bg: #d6d6d6;
    --nav-step-completed-circle-border: rgba(0, 0, 0, 0.12);
    --nav-step-completed-tick: #1f1f1f;
    --nav-step-completed-label: #4a4a4a;
    --nav-step-completed-pretitle: #666666;
    --nav-step-upcoming-circle-bg: #f0f0f0;
    --nav-step-upcoming-circle-border: rgba(0, 0, 0, 0.14);
    --nav-step-upcoming-number: #5c5c5c;
    --nav-step-upcoming-label: rgba(0, 0, 0, 0.72);
    --nav-step-upcoming-pretitle: rgba(0, 0, 0, 0.66);
    /* Previous (completed) + next (upcoming) read closer to full strength */
    --nav-step-upcoming-opacity: 1;
    --nav-step-upcoming-locked-opacity: 0.94;
    --color-focus-ring: rgba(0, 0, 0, 0.12);
    /* Flat panels (non-card) */
    --panel-border: rgba(0, 0, 0, 0.12);
    --panel-border-strong: rgba(0, 0, 0, 0.18);
    /*
     * Reserve space for fixed .nav-steps. In short iframes, vh is tiny — clamp(..., Nvh, ...) must not shrink
     * below the real nav stack (~120px circle + labels + bottom offset) or text/tiles sit under the bar.
     */
    --redo-nav-clearance: max(
        240px,
        calc(
            env(safe-area-inset-bottom, 0px) + clamp(28px, 5.5vh, 56px) + clamp(168px, 22vh, 208px)
        )
    );
    /* Photos & option tabs: embossed lift (inset highlight + layered soft shadow) */
    --photo-emboss-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03),
        0 2px 6px rgba(0, 0, 0, 0.07),
        0 6px 18px rgba(0, 0, 0, 0.085),
        0 14px 36px rgba(0, 0, 0, 0.065);
    --photo-emboss-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(0, 0, 0, 0.035),
        0 3px 8px rgba(0, 0, 0, 0.09),
        0 8px 24px rgba(0, 0, 0, 0.095),
        0 18px 44px rgba(0, 0, 0, 0.075);
    /* Motion — consistent, premium easing (stack: vanilla CSS + rAF + Tween where used in JS) */
    --ease-out-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out-smooth: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
    /* Material / elastic UI standard */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.22s;
    --duration-ui: 0.36s;
    --duration-slow: 0.55s;
    /* Snappy “active” press feedback */
    --duration-tap: 0.1s;
    /* Hover / press scale on buttons & cards */
    --duration-interact: 0.28s;
    /* Subtle glass lift on step cards */
    --card-glass-glow:
        0 0 0 1px rgba(255, 255, 255, 0.45) inset,
        0 10px 36px rgba(0, 0, 0, 0.07),
        0 0 24px rgba(255, 255, 255, 0.12);
}

html {
    scroll-behavior: smooth;
    height: 100%;
    max-width: 100%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-site);
}

body {
    background: var(--color-surface-subtle);
    overflow: hidden;
    cursor: default;
    min-height: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body:active {
    cursor: default;
}

/* Focus — smooth outline, no layout jump */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 3px;
}

button,
a,
input,
select,
textarea {
    transition:
        color var(--duration-interact) var(--ease-standard),
        background-color var(--duration-interact) var(--ease-standard),
        border-color var(--duration-interact) var(--ease-standard),
        box-shadow var(--duration-interact) var(--ease-standard),
        transform var(--duration-interact) var(--ease-standard),
        opacity var(--duration-interact) var(--ease-standard),
        filter var(--duration-interact) var(--ease-standard);
}

/* WebGL root: reserve viewport up-front so the canvas never shifts layout when GL initializes */
#container {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100%;
    min-height: 100svh;
    min-block-size: 100dvh;
    position: relative;
    overflow: hidden;
    background: var(--color-surface-subtle);
}

#container canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* —— Primary controls: elastic easing, hover lift, press tuck —— */
.arrow-button,
.step-2-arrow-button {
    transition:
        transform var(--duration-interact) var(--ease-standard),
        box-shadow var(--duration-interact) var(--ease-standard),
        border-color var(--duration-interact) var(--ease-standard),
        background-color var(--duration-interact) var(--ease-standard),
        backdrop-filter var(--duration-interact) var(--ease-standard),
        opacity var(--duration-interact) var(--ease-standard),
        filter var(--duration-interact) var(--ease-standard);
}

.arrow-button:hover,
.step-2-arrow-button:hover {
    transform: scale(1.02);
}

.arrow-button:active,
.step-2-arrow-button:active {
    transform: scale(0.98);
}

.upload-box:not(.has-image):hover {
    transform: scale(1.02);
}

.upload-box:not(.has-image):active {
    transform: scale(0.98);
}

/* —— Homepage intro: motion typography → 3D handoff —— */
.home-intro {
    position: fixed;
    inset: 0;
    z-index: 4500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    transition: opacity 0.58s var(--ease-in-out-smooth, cubic-bezier(0.45, 0, 0.55, 1));
    padding: clamp(24px, 5vw, 56px);
    text-align: center;
}

.home-intro--exiting {
    opacity: 0;
    /* Still z-index 4500 until --gone; without this, invisible overlay eats clicks on the app below */
    pointer-events: none;
}

.home-intro--gone {
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

.home-intro__inner {
    /* Wide enough for four full-width sentences (bold/large) without mid-sentence wraps on desktop */
    max-width: min(96vw, 80rem);
    width: 100%;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 2.75rem);
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    min-height: min(42vh, 320px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Phase 1 — narrative (Helvetica Neue, centered, black on white) */
.home-intro__phase--1 {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    transition:
        opacity 0.52s var(--ease-out-smooth),
        transform 0.52s var(--ease-out-smooth);
}

.home-intro__phase--1.home-intro__phase--exiting {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
    pointer-events: none;
}

.home-intro__phase--1.home-intro__phase--off {
    display: none !important;
}

.home-intro__phase--1 .home-intro__line {
    font-family: var(--font-site);
    font-size: clamp(1.35rem, 4.5vw, 2.25rem);
    line-height: 1.3;
    letter-spacing: -0.025em;
    color: #000000;
    margin: 0 0 0.25em;
    text-align: center;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    animation: homeIntroLineIn 0.62s var(--ease-out-smooth, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}

/* First three lines: true regular only — do NOT put font-synthesis:none on parent (it inherits and kills bold on line 4). */
.home-intro__phase--1 .home-intro__line:not(.home-intro__line--bold) {
    font-weight: 400;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.home-intro__phase--1 .home-intro__line.home-intro__line--bold {
    font-weight: 700;
    font-synthesis: weight;
    letter-spacing: -0.038em;
}

.home-intro__phase--1 .home-intro__line:last-child {
    margin-bottom: 0;
}

.home-intro__phase--1 .home-intro__line:nth-child(1) {
    animation-delay: 0.08s;
}

.home-intro__phase--1 .home-intro__line:nth-child(2) {
    animation-delay: 0.58s;
}

.home-intro__phase--1 .home-intro__line:nth-child(3) {
    animation-delay: 1.08s;
}

.home-intro__phase--1 .home-intro__line:nth-child(4) {
    animation-delay: 1.58s;
}

/* One line per sentence (matches design); below ~1200px longest line may need wrap */
@media (min-width: 1200px) {
    .home-intro__phase--1 .home-intro__line {
        white-space: nowrap;
    }
}

@keyframes homeIntroLineIn {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Phase 2 — informational (pipeline tagline only) */
.home-intro__phase--2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    width: 100%;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.55s var(--ease-out-smooth),
        visibility 0s linear 0.55s,
        transform 0.55s var(--ease-out-smooth);
}

.home-intro__phase--2.home-intro__phase--hidden {
    display: none !important;
}

.home-intro__phase--2:not(.home-intro__phase--hidden) {
    display: block;
}

.home-intro__phase--2.home-intro__phase--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition:
        opacity 0.55s var(--ease-out-smooth),
        visibility 0s linear 0s,
        transform 0.55s var(--ease-out-smooth);
}

.home-intro__tagline {
    font-family: var(--font-site);
    font-size: clamp(1.85rem, 5.5vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.home-intro__phase--2.home-intro__phase--visible .home-intro__tagline {
    animation: homeIntroPhase2ItemIn 0.58s var(--ease-out-smooth, cubic-bezier(0.22, 1, 0.36, 1)) 0.08s forwards;
}

@keyframes homeIntroPhase2ItemIn {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.home-intro--reduce-motion .home-intro__phase--1 .home-intro__line {
    animation: none;
    opacity: 1;
    transform: none;
}

.home-intro--reduce-motion .home-intro__phase--1.home-intro__phase--exiting {
    transition-duration: 0.12s;
}

.home-intro--reduce-motion .home-intro__phase--2.home-intro__phase--visible .home-intro__tagline {
    animation: none;
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .home-intro:not(.home-intro--reduce-motion) {
        transition-duration: 0.12s;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Loading screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(250, 250, 250, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    transition: opacity var(--duration-slow) var(--ease-out-smooth);
}

#loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-screen__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.loading-screen__caption {
    margin: 0;
    font-size: 0.8125rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.002);
    border-top: 3px solid rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.model-load-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2500;
    margin: 0;
    padding: 14px 20px;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: var(--color-text);
    text-align: center;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        opacity var(--duration-ui) var(--ease-out-smooth),
        transform var(--duration-ui) var(--ease-out-smooth),
        visibility 0s linear var(--duration-ui);
}

.model-load-notice.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
}

.model-load-notice:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity var(--duration-ui) var(--ease-out-smooth),
        transform var(--duration-ui) var(--ease-out-smooth),
        visibility 0s linear 0s;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive design */
@media (max-width: 768px) {
    body {
        cursor: default;
    }
}

/* Tablet (iPad) scaling - keep desktop unchanged */
@media (max-width: 1024px) {
    .upload-box {
        width: clamp(320px, 60vw, 520px);
        height: auto;
        max-height: min(520px, min(62vh, 62dvh));
        aspect-ratio: 1;
    }

    .bottom-images {
        gap: clamp(12px, 2vw, 20px);
    }

    .image-thumbnail img {
        width: clamp(80px, 14vw, 110px);
        height: clamp(110px, 18vw, 160px);
    }

    .step-2-image-box {
        width: clamp(320px, 60vw, 520px);
        height: clamp(320px, 60vw, 520px);
    }

    .step-2-prompt-tab,
    .step-2-options-tab {
        width: clamp(320px, 60vw, 520px);
    }

    .step-2-content {
        gap: clamp(20px, 3vh, 32px);
        padding-bottom: clamp(16px, 3vh, 32px);
    }

    .step-2-image-container {
        margin-top: clamp(70px, 10vh, 100px);
    }

    .step-3-content {
        --step-3-bottom-safe: clamp(196px, 30vh, 264px);
    }

    .step-3-options-container {
        margin-top: 0;
        max-width: clamp(360px, 70vw, 600px);
        --step3-tile: clamp(220px, 40vw, 320px);
    }

    .step-4-guide {
        max-width: clamp(520px, 80vw, 720px);
        margin: clamp(80px, 11vh, 108px) 0 60px 20px;
        padding-right: clamp(10px, 2vw, 40px);
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    .step-4-guide.step-4-output-layout {
        margin-left: auto;
        margin-right: auto;
        max-height: none;
    }
}

/* iPad landscape fit: reduce sizes without affecting desktop */
@media (max-width: 1024px) and (orientation: landscape) {
    .upload-box {
        width: clamp(280px, 50vw, 420px);
        height: auto;
        max-height: min(420px, min(58vh, 58dvh));
        aspect-ratio: 1;
    }

    .bottom-images {
        gap: clamp(10px, 1.6vw, 16px);
    }

    .image-thumbnail img {
        width: clamp(70px, 12vw, 95px);
        height: clamp(95px, 16vw, 135px);
    }

    .step-2-image-box {
        width: clamp(280px, 50vw, 420px);
        height: clamp(280px, 50vw, 420px);
    }

    .step-2-prompt-tab,
    .step-2-options-tab {
        width: clamp(280px, 50vw, 420px);
    }

    .step-2-content {
        gap: clamp(16px, 2.4vh, 24px);
        padding-bottom: clamp(10px, 2vh, 20px);
    }

    .step-3-content {
        --step-3-bottom-safe: clamp(200px, 32vh, 270px);
    }

    .step-3-options-container {
        margin-top: 0;
        max-width: clamp(320px, 60vw, 520px);
        --step3-tile: clamp(200px, 36vw, 280px);
    }

    .step-4-guide {
        max-width: clamp(480px, 74vw, 640px);
        margin: clamp(100px, 12vh, 130px) 0 40px 20px;
        padding-right: clamp(10px, 2vw, 30px);
        max-height: calc(100vh - 220px);
        overflow-y: auto;
    }

    .step-4-guide.step-4-output-layout {
        margin-left: auto;
        margin-right: auto;
        max-height: none;
    }
}

/* iPad Air 11" landscape (1180x820) only */
@media (min-width: 1025px) and (max-width: 1180px) and (orientation: landscape) {
    /* Keep steps usable without changing desktop layout */
    .slider-container {
        overflow: visible; /* allow handles to remain fully visible */
    }

    .step-slide {
        overflow: visible; /* avoid clipping handles at boundaries */
    }

    .canvas-content:not(.step-3-content) {
        overflow-y: auto; /* allow vertical scroll when needed; step 3 clips, step 4 scrolls on .step-4-content */
        overflow-x: hidden;
    }

    .upload-box {
        width: clamp(300px, 46vw, 460px);
        height: auto;
        aspect-ratio: 1 / 1; /* keep square */
        max-height: min(460px, min(60vh, 60dvh));
    }

    .bottom-images {
        gap: clamp(10px, 1.6vw, 18px);
    }

    .image-thumbnail img {
        width: clamp(70px, 11vw, 100px);
        height: clamp(95px, 15vw, 140px);
    }

    .step-2-image-box {
        width: clamp(300px, 46vw, 460px);
        height: auto;
        aspect-ratio: 1 / 1; /* keep square */
    }

    .step-2-prompt-tab,
    .step-2-options-tab {
        width: clamp(300px, 46vw, 460px);
    }

    .step-2-content {
        gap: clamp(16px, 2.4vh, 26px);
        padding-bottom: clamp(12px, 2vh, 24px);
    }

    .step-3-content {
        --step-3-bottom-safe: clamp(200px, 32vh, 270px);
    }

    .step-3-options-container {
        margin-top: 0;
        max-width: clamp(320px, 56vw, 520px);
        --step3-tile: clamp(200px, 32vw, 280px);
    }

    .step-4-guide {
        max-width: clamp(480px, 70vw, 640px);
        max-height: calc(100vh - 220px);
        overflow-y: auto;
        padding-right: clamp(10px, 2vw, 30px);
    }

    .step-4-guide.step-4-output-layout {
        margin-left: auto;
        margin-right: auto;
        max-height: none;
    }
}

@supports (-webkit-touch-callout: none) and (orientation: landscape) {
  html, body {
    height: -webkit-fill-available;
    overflow: hidden;
  }

  body,
  #container,
  .slider-container,
  .step-slider,
  .step-slide {
    overflow: visible;
  }

  .canvas-content:not(.step-3-content) {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .slider-container {
    max-width: 100%;
    overflow-x: hidden;
  }

  .step-slide {
    max-height: -webkit-fill-available;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) and (orientation: landscape) {
  html, body {
    overflow: hidden;
  }

  .canvas-content,
  .slider-container,
  .step-slider,
  .step-slide {
    overflow: visible;
  }
}

@media (max-width: 480px) {
    .loading-spinner {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }
}

/* Navigation steps — floating row, no chrome
   Must stack above #step-slider (2000 / 4600); otherwise the full-viewport slider steals all clicks.
   Left-bottom (steps 1 & 4) vs horizontal-center-bottom (steps 2–3); max-width keeps row inside embeds/iframes. */
.nav-steps {
    position: fixed;
    bottom: clamp(28px, 4.5vh, 52px);
    left: clamp(20px, 3.5vw, 40px);
    right: auto;
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: clamp(2.25rem, 4vw, 3.25rem);
    z-index: 5000;
    pointer-events: none;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    max-width: calc(100% - 2 * clamp(12px, 3vw, 40px));
    box-sizing: border-box;
    transition:
        opacity var(--duration-slow) var(--ease-out-smooth),
        left 0.38s var(--ease-out-smooth),
        transform 0.38s var(--ease-out-smooth);
}

/* Steps 2–3: center nav over the main column. Step 1, 4, and homepage use default left (matches Step 1). */
body[data-active-flow-step='2'] .nav-steps,
body[data-active-flow-step='3'] .nav-steps {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100% - 2 * clamp(12px, 3vw, 28px));
}

.nav-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    pointer-events: auto;
    transition:
        transform var(--duration-interact) var(--ease-standard),
        opacity var(--duration-interact) var(--ease-standard);
    position: relative;
}

.nav-step--locked {
    pointer-events: none;
    cursor: not-allowed;
}

/* ─── 1. COMPLETED (done; not current): light grey circle, ✓ in circle, medium grey copy ─── */
.nav-step--completed:not(.active) {
    opacity: 1;
    filter: none;
}

.nav-step--completed:not(.active) .step-circle {
    position: relative;
    background: var(--nav-step-completed-circle-bg);
    border: 1px solid var(--nav-step-completed-circle-border);
}

.nav-step--completed:not(.active) .step-number {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-step--completed:not(.active) .step-circle::after {
    content: '\2713';
    /* ~30% smaller than prior clamp(24px, 4.85vw, 31px) */
    font-size: clamp(17px, 3.4vw, 22px);
    font-weight: 600;
    color: var(--nav-step-completed-tick);
    line-height: 1;
    font-family: var(--font-mono);
}

.nav-step--completed:not(.active) .step-label {
    color: var(--nav-step-completed-label);
    font-weight: 400;
}

.nav-step--completed:not(.active) .step-pretitle {
    color: var(--nav-step-completed-pretitle);
}

/* ─── 2. CURRENT (focus): black circle, white number, strongest label ─── */
.nav-step.active {
    opacity: 1;
    filter: none;
}

.nav-step.active .step-circle::after {
    content: none;
}

.nav-step.active .step-label {
    color: var(--color-black);
    font-weight: 600;
}

.nav-step.active .step-pretitle {
    color: var(--color-text);
    font-weight: 600;
}

/* ─── 3. UPCOMING (not done, not current): faint circle + type, reduced strength ─── */
.nav-step:not(.active):not(.nav-step--completed) {
    opacity: var(--nav-step-upcoming-opacity);
    filter: saturate(0.96);
}

.nav-step--locked:not(.active):not(.nav-step--completed) {
    opacity: var(--nav-step-upcoming-locked-opacity);
    filter: saturate(0.88);
}

.nav-step:not(.active):not(.nav-step--completed) .step-circle {
    background: var(--nav-step-upcoming-circle-bg);
    border: 1px solid var(--nav-step-upcoming-circle-border);
}

.nav-step:not(.active):not(.nav-step--completed) .step-number {
    color: var(--nav-step-upcoming-number);
    font-weight: 400;
}

.nav-step:not(.active):not(.nav-step--completed) .step-label {
    color: var(--nav-step-upcoming-label);
    font-weight: 400;
}

.nav-step:not(.active):not(.nav-step--completed) .step-pretitle {
    color: var(--nav-step-upcoming-pretitle);
}

.step-pretitle {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.2;
    user-select: none;
    margin-bottom: 0.1rem;
}

.step-circle {
    width: 120px;
    height: 120px;
    background: var(--color-step-idle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    transition:
        background var(--duration-interact) var(--ease-standard),
        border-color var(--duration-interact) var(--ease-standard),
        transform var(--duration-interact) var(--ease-standard),
        opacity var(--duration-interact) var(--ease-standard);
    border: 1px solid var(--color-step-idle-border);
    box-shadow: none;
    opacity: 1;
}

.nav-step.active .step-circle {
    background: var(--color-obsidian);
    border: 1px solid rgba(10, 10, 10, 0.45);
    position: relative;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        background var(--duration-interact) var(--ease-standard),
        border-color var(--duration-interact) var(--ease-standard),
        transform var(--duration-interact) var(--ease-standard),
        opacity var(--duration-interact) var(--ease-standard);
}

.nav-step:not(.active):not(.nav-step--locked):hover .step-circle {
    transform: scale(1.02);
    opacity: 0.98;
}

/* Active step: lift on hover, tuck on press + subtle grey gradient */
.nav-step.active:not(.nav-step--locked):hover .step-circle {
    transform: scale(1.02);
    opacity: 1;
    background: linear-gradient(155deg, #1f1f1f 0%, var(--color-obsidian) 42%, #141414 100%);
}

.nav-step.active:not(.nav-step--locked):active .step-circle {
    transform: scale(0.98);
    background: linear-gradient(155deg, #2a2a2a 0%, #121212 50%, #1a1a1a 100%);
}

.nav-steps .step-pretitle {
    font-family: var(--font-mono);
    letter-spacing: 0.14em;
}

.nav-steps .step-number {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* “start here” + ↓ above Step 1 only — bottom nav on GLB / homepage (reference layout) */
.nav-step[data-flow-step='1'] .nav-step-start-hint {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.28rem;
    margin-bottom: clamp(0.55rem, 1.4vh, 0.95rem);
    pointer-events: none;
    user-select: none;
}

body[data-active-flow-step='1'] .nav-step[data-flow-step='1'] .nav-step-start-hint {
    display: flex;
}

.nav-step-start-hint__text {
    font-size: clamp(12px, 2.4vw, 15px);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: var(--color-black);
    line-height: 1.2;
}

/* Simple Unicode down-arrow */
.nav-step-start-hint__arrow {
    display: block;
    font-size: clamp(16px, 3vw, 22px);
    font-weight: 700;
    line-height: 1;
    color: var(--color-black);
    animation: nav-step-start-hint-nudge 2s var(--ease-in-out-smooth) infinite;
}

@keyframes nav-step-start-hint-nudge {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.82;
    }
    50% {
        transform: translateY(3px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-step-start-hint__arrow {
        animation: none;
        transform: none;
        opacity: 0.95;
    }
}

.step-number {
    font-size: 31px;
    font-weight: 400;
    color: var(--color-text);
    user-select: none;
}

.nav-step.active .step-number {
    color: var(--color-white);
    font-weight: 500;
}

/* Contextual pointer hint — plain black text, no frame */
.redo-cursor-hint {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 12000;
    max-width: min(280px, calc(100vw - 24px));
    pointer-events: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-site);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.25;
    color: #000;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.1s ease,
        visibility 0.1s ease;
}

.redo-cursor-hint.redo-cursor-hint--visible {
    opacity: 1;
    visibility: visible;
}

.redo-cursor-hint.redo-cursor-hint--invert {
    color: #fff;
}

/* Step 4 3D orbit hint — always black (readable on light viewport chrome) */
.redo-cursor-hint.redo-cursor-hint--drag-dark {
    color: #000;
}

/* Square custom cursor (OS cursor hidden via html.redo-cursor-lock while slider is open) */
.redo-cursor-dot {
    position: fixed;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    z-index: 12001;
    pointer-events: none;
    background: #000;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
}

.redo-cursor-dot.redo-cursor-dot--invert {
    background: #fff;
}

.redo-cursor-dot.redo-cursor-dot--visible {
    opacity: 1;
    visibility: visible;
}

html.redo-cursor-lock,
html.redo-cursor-lock body {
    cursor: none !important;
}

html.redo-cursor-lock a,
html.redo-cursor-lock button,
html.redo-cursor-lock [role='button'],
html.redo-cursor-lock input,
html.redo-cursor-lock textarea,
html.redo-cursor-lock .canvas-slider .progress-circle {
    cursor: none !important;
}

/* Copy/paste fields + Step 4 instructions body: I-beam (no square / hint overlap) */
body.redo-cursor-ibeam,
body.redo-cursor-ibeam input,
body.redo-cursor-ibeam textarea,
body.redo-cursor-ibeam select,
body.redo-cursor-ibeam #step-4-instructions-body,
body.redo-cursor-ibeam #step-4-instructions-body * {
    cursor: text !important;
}

html.redo-cursor-lock body.redo-cursor-ibeam {
    cursor: text !important;
}

/* Help / about — bottom-right FAB + modal
   Must sit above #step-slider (2000 / 4600) and .home-intro (4500) or clicks never reach the button. */
.help-fab {
    position: fixed;
    right: clamp(20px, 3.5vw, 40px);
    bottom: clamp(28px, 4.5vh, 52px);
    z-index: 5000;
    pointer-events: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(10, 10, 10, 0.45);
    background: var(--color-obsidian);
    color: var(--color-white);
    cursor: pointer;
    box-shadow: none;
    transition:
        opacity var(--duration-slow) var(--ease-out-smooth),
        transform var(--duration-interact) var(--ease-standard),
        background var(--duration-interact) var(--ease-standard),
        border-color var(--duration-interact) var(--ease-standard);
    -webkit-tap-highlight-color: transparent;
}

.help-fab:hover {
    transform: scale(1.04);
    background: linear-gradient(155deg, #2a2a2a 0%, var(--color-obsidian) 50%, #1a1a1a 100%);
}

.help-fab:active {
    transform: scale(0.96);
}

.help-fab:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 3px;
}

.help-fab__glyph {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    user-select: none;
    color: var(--color-white);
}

a.help-fab {
    text-decoration: none;
    color: var(--color-white);
    box-sizing: border-box;
}

/* Hidden during home intro; body.redo-chrome-visible set in script when loading overlay dismisses (3D handoff). */
body:not(.redo-chrome-visible) .nav-steps,
body:not(.redo-chrome-visible) .help-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
}

body.redo-chrome-visible .nav-steps,
body.redo-chrome-visible .help-fab {
    opacity: 1;
    visibility: visible;
}

body.redo-chrome-visible .help-fab {
    pointer-events: auto;
}

body:has(#model-load-notice:not(.hidden)) .help-fab {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
    .help-fab {
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: max(20px, env(safe-area-inset-bottom, 0px));
        width: 42px;
        height: 42px;
    }

    body:has(#model-load-notice:not(.hidden)) .help-fab {
        bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    }
}

/* /info/ full page + shared prose/figure styles (also used by info/index.html) */
.info-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-surface-subtle);
    color: var(--color-text);
}

.info-page__header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top, 0px)) clamp(20px, 4vw, 40px) 16px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.info-page__back-sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 6px 12px;
    transition: color var(--duration-interact) var(--ease-standard);
}

.info-page__back-sign:hover {
    color: var(--color-text);
}

.info-page__back-sign:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 4px;
}

.info-page__back-arrow {
    font-size: 1.1em;
    line-height: 1;
    opacity: 0.85;
    transform: translateY(-0.5px);
}

.info-page__main {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px) clamp(64px, 10vh, 120px);
}

.info-page__article {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.info-page .help-about-dialog__title {
    font-size: clamp(1.35rem, 3.2vw, 1.85rem);
    line-height: 1.25;
}

.help-about-dialog__title {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

.help-about-dialog__content {
    margin: 0;
    padding: 0;
}

.help-about-dialog__lede {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--color-text);
}

.help-about-dialog__tagline {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-text);
}

.help-about-dialog__body + .help-about-dialog__body,
.help-about-dialog__body + .help-about-dialog__tagline,
.help-about-dialog__tagline + .help-about-dialog__body {
    margin-top: 12px;
}

.help-about-dialog__body--tight {
    margin-bottom: 14px;
}

.help-about-dialog__section {
    margin: 0;
    padding: 0;
}

.help-about-dialog__content > .help-about-dialog__section {
    margin-top: 26px;
}

.help-about-dialog__section + .help-about-dialog__section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.help-about-dialog__section-title {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.help-about-dialog__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
}

.help-about-dialog__placeholder {
    color: var(--color-text-muted);
}

.help-about-dialog__figures {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 4px;
}

.help-about-dialog__figure {
    margin: 0;
    padding: 0;
}

.help-about-dialog__figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.help-about-dialog__caption {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .nav-steps,
    .help-fab {
        transition: none;
    }

    .help-fab:hover,
    .help-fab:active {
        transform: none;
    }
}

.step-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-secondary);
    text-align: center;
    white-space: nowrap;
    user-select: none;
    letter-spacing: 0.01em;
    line-height: 1.35;
    max-width: 7.5rem;
}

/* Step 1 entry CTA: glow + scale on the circle only (“STEP” / label stay static) */
@keyframes nav-step-1-cta-breathe {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 transparent,
            0 6px 20px rgba(0, 0, 0, 0.14),
            0 0 28px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow:
            0 0 0 2px rgba(0, 0, 0, 0.07),
            0 10px 32px rgba(0, 0, 0, 0.22),
            0 0 40px rgba(0, 0, 0, 0.16);
    }
}

.nav-step[data-flow-step='1'].active:not(.nav-step--locked):not(:hover):not(:active)
    .step-circle {
    animation: nav-step-1-cta-breathe 1.65s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .nav-step[data-flow-step='1'].active:not(.nav-step--locked) .step-circle {
        animation: none;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 768px) {
    .nav-steps {
        bottom: max(20px, env(safe-area-inset-bottom, 0px));
        left: max(16px, env(safe-area-inset-left, 0px));
        gap: clamp(1.35rem, 5vw, 2rem);
    }

    body[data-active-flow-step='2'] .nav-steps,
    body[data-active-flow-step='3'] .nav-steps {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .step-circle {
        width: 100px;
        height: 100px;
    }

    .step-number {
        font-size: 25px;
    }

    .step-label {
        font-size: 12px;
        max-width: 6.5rem;
    }

    .step-pretitle {
        font-size: 10px;
        letter-spacing: 0.08em;
    }
}

/* Top-left reDO — above full-screen #step-slider (4600) & canvas; visible with body.redo-chrome-visible */
.top-logo {
    position: fixed;
    top: 20px;
    left: clamp(16px, 3.5vw, 40px);
    right: auto;
    max-width: min(160px, 38vw);
    z-index: 5100;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-ui) var(--ease-out-smooth);
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body.redo-chrome-visible .top-logo {
    opacity: 1;
    pointer-events: auto;
}

.top-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 40px;
    object-fit: contain;
    object-position: left center;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 768px) {
    .top-logo {
        top: 15px;
        left: max(12px, env(safe-area-inset-left, 0px));
        max-width: min(140px, 42vw);
    }
    
    .top-logo img {
        height: 30px;
    }
}

/* Step slider interface */
.step-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100%;
    z-index: 2000;
    box-sizing: border-box;
    opacity: 1;
    transition:
        opacity var(--duration-slow) var(--ease-out-smooth),
        visibility 0s linear var(--duration-slow);
    visibility: visible;
}

#step-slider.step-slider--raise-above-intro:not(.hidden) {
    z-index: 4600;
}

/* Canvas areas with different backgrounds */
.step-slider::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: var(--slider-left, 75vw);
	height: 100%;
	background: var(--left-canvas-bg, #fafafa); /* Step 1 canvas — light panel */
	z-index: -1;
	transition: background var(--duration-slow) var(--ease-in-out-smooth);
}

.step-slider::after {
	content: '';
	position: absolute;
	top: 0;
	left: var(--slider-left, 75vw);
	width: calc(100% - var(--slider-left, 75vw));
	height: 100%;
	background: var(--right-canvas-bg, #fafafa); /* Same light fill as Step 1 */
	z-index: -1;
	transition: background var(--duration-slow) var(--ease-in-out-smooth);
}

/* Next step badge (white circle outline with white number) */
/* Next step badge - HIDDEN: not needed, each canvas has its own header */
.next-step-badge {
	display: none !important;
}

.next-step-badge.hidden { display: none !important; }

/* Previous step badge (for left slider) */
/* Previous step badge - HIDDEN: not needed, each canvas has its own header */
.prev-step-badge {
	display: none !important;
}

.prev-step-badge.hidden { display: none !important; }

/* Canvas slider - positioned at edges of canvas */
.canvas-slider {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 4000; /* Ensure dragger renders above adjacent canvases */
    pointer-events: none; /* Let handle receive events */
    overflow: visible;
}

/* Left = previous; right = next — only current step’s sliders are shown in JS, so no double handles on one line */
.slider-left .progress-circle {
    display: flex;
}

/* Right slider (at right edge of canvas) */
.slider-right {
    right: 0;
    width: var(--redo-progress-line-width);
}

/* Left slider (at left edge of canvas) */
.slider-left {
    left: 0;
    width: var(--redo-progress-line-width);
}

/* Progress line — muted until flow is ready, then solid black */
.canvas-slider .progress-line {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--redo-progress-line-width);
    height: 100%;
    background: var(--color-disabled) !important;
    transition: background var(--duration-ui) var(--ease-in-out-smooth);
    pointer-events: none;
}

/* Back dragger: vertical track behind the left handle (black on light steps; Step 4 override below) */
.slider-left .progress-line {
    display: block;
}

/* Ready for next step: full contrast (back / shared tracks; forward line scoped below) */
.step-slider.image-selected .canvas-slider .progress-line {
    background: var(--color-obsidian) !important;
}

/* Forward vertical track: same grey as default line + knob ring until this step’s forward dragger is armed */
#step-slider.image-selected .step-slide .slider-right .progress-line {
    background: var(--color-disabled) !important;
}

/* Back track: black (overrides .image-selected obsidian on shared .progress-line rule) */
#step-slider .canvas-slider.slider-left .progress-line {
    background: var(--color-black) !important;
}

#step-slider[data-active-flow-step='1'].image-selected .step-slide[data-step='1'] .slider-right .progress-line,
#step-slider[data-active-flow-step='2'].design-selected .step-slide[data-step='2'] .slider-right .progress-line,
#step-slider[data-active-flow-step='3'].image-selected.step-3-output-ready.step-3-output-chosen .step-slide[data-step='3'] .slider-right .progress-line {
    background: var(--color-obsidian) !important;
}

/* “Click next” affordance: scale + glow only (no horizontal nudge; calmer than translate + scale) */
@keyframes drag-handle-next-hint {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 transparent,
            0 4px 16px rgba(0, 0, 0, 0.08);
        border-width: var(--redo-progress-line-width);
        border-color: var(--color-black);
    }
    45% {
        transform: scale(1.07);
        box-shadow:
            0 0 0 4px rgba(0, 0, 0, 0.07),
            0 10px 32px rgba(0, 0, 0, 0.18);
        border-width: var(--redo-progress-line-width);
        border-color: rgba(0, 0, 0, 0.42);
    }
    70% {
        transform: scale(1.03);
        box-shadow:
            0 0 0 2px rgba(0, 0, 0, 0.1),
            0 6px 22px rgba(0, 0, 0, 0.12);
        border-width: var(--redo-progress-line-width);
        border-color: rgba(0, 0, 0, 0.28);
    }
}

@keyframes drag-handle-next-hint-inverse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 transparent,
            0 3px 12px rgba(0, 0, 0, 0.22);
        border-width: var(--redo-progress-line-width);
        border-color: var(--redo-forward-dragger-border-armed);
    }
    45% {
        transform: scale(1.05);
        box-shadow:
            0 0 0 3px rgba(0, 0, 0, 0.12),
            0 8px 22px rgba(0, 0, 0, 0.32);
        border-width: var(--redo-progress-line-width);
        border-color: var(--redo-forward-dragger-border-armed);
    }
    70% {
        transform: scale(1.02);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.18),
            0 5px 16px rgba(0, 0, 0, 0.26);
        border-width: var(--redo-progress-line-width);
        border-color: var(--redo-forward-dragger-border-armed);
    }
}

#step-slider.step-slider--drag-hint-next.step-slider.image-selected[data-active-flow-step='1']
    .step-slide[data-step='1']
    .slider-right
    .progress-circle {
    animation: drag-handle-next-hint-inverse 1.65s ease-in-out infinite;
}

#step-slider.step-slider--drag-hint-next.step-slider.image-selected.step-3-output-ready.step-3-output-chosen[data-active-flow-step='3']
    .step-slide[data-step='3']
    .slider-right
    .progress-circle {
    animation: drag-handle-next-hint-inverse 1.65s ease-in-out infinite;
}

#step-slider.step-slider--drag-hint-next#step-slider.design-selected[data-active-flow-step='2']
    .step-slide[data-step='2']
    .slider-right
    .progress-circle {
    animation: drag-handle-next-hint-inverse 1.65s ease-in-out infinite;
}

#step-slider.step-slider--drag-hint-next.step-slider.image-selected[data-active-flow-step='1']
    .step-slide[data-step='1']
    .slider-right
    .progress-circle:hover,
#step-slider.step-slider--drag-hint-next#step-slider.design-selected[data-active-flow-step='2']
    .step-slide[data-step='2']
    .slider-right
    .progress-circle:hover,
#step-slider.step-slider--drag-hint-next.step-slider.image-selected.step-3-output-ready.step-3-output-chosen[data-active-flow-step='3']
    .step-slide[data-step='3']
    .slider-right
    .progress-circle:hover {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    #step-slider.step-slider--drag-hint-next.step-slider.image-selected[data-active-flow-step='1']
        .step-slide[data-step='1']
        .slider-right
        .progress-circle,
    #step-slider.step-slider--drag-hint-next.step-slider.image-selected.step-3-output-ready.step-3-output-chosen[data-active-flow-step='3']
        .step-slide[data-step='3']
        .slider-right
        .progress-circle {
        animation: none;
        transform: none;
        border-width: var(--redo-progress-line-width);
        border-color: var(--redo-forward-dragger-border-armed);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.22);
    }

    #step-slider.step-slider--drag-hint-next#step-slider.design-selected[data-active-flow-step='2']
        .step-slide[data-step='2']
        .slider-right
        .progress-circle {
        animation: none;
        transform: none;
        border-width: var(--redo-progress-line-width);
        border-color: var(--redo-forward-dragger-border-armed);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.22);
    }

}

/* CLICK ring: show when flow allows (step 2: design-selected; step 3: outputs generated) */
#step-slider.image-selected .step-slide[data-step='1'] .slider-right .drag-label,
#step-slider.design-selected .step-slide[data-step='2'] .slider-right .drag-label,
#step-slider.image-selected.step-3-output-ready.step-3-output-chosen .step-slide[data-step='3'] .slider-right .drag-label {
    opacity: 1;
    pointer-events: auto;
    cursor: default;
}

#step-slider.image-selected:not(.design-selected) .step-slide[data-step='2'] .slider-right .drag-label {
    opacity: 0;
    pointer-events: none;
    animation: none !important;
}

#step-slider.image-selected:not(.step-3-output-ready) .step-slide[data-step='3'] .slider-right .drag-label,
#step-slider.image-selected.step-3-output-ready:not(.step-3-output-chosen) .step-slide[data-step='3'] .slider-right .drag-label {
    opacity: 0;
    pointer-events: none;
    animation: none !important;
}

/* CLICK SVG: no independent bounce — it scales with .progress-circle (hint + hover) */
#step-slider.image-selected .step-slide[data-step='1'] .slider-right .drag-label:not(.drag-label--shake),
#step-slider.design-selected .step-slide[data-step='2'] .slider-right .drag-label:not(.drag-label--shake),
#step-slider.image-selected.step-3-output-ready.step-3-output-chosen .step-slide[data-step='3'] .slider-right .drag-label:not(.drag-label--shake) {
    animation: none;
}

@keyframes grabber-border-pulse {
    0%,
    100% {
        border-color: rgba(0, 0, 0, 0.12);
    }
    50% {
        border-color: rgba(0, 0, 0, 0.38);
    }
}

@keyframes grabber-border-pulse-inverse {
    0%,
    100% {
        border-color: rgba(255, 255, 255, 0.12);
    }
    50% {
        border-color: rgba(255, 255, 255, 0.28);
    }
}

/* Step 2: forward divider matches Step 1 (black when image in flow) */
.step-slide[data-step="2"] .slider-right .progress-line {
    background: var(--color-obsidian) !important;
}

/* Progress circle inside canvas slider */
.canvas-slider .progress-circle {
    position: absolute;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    flex: 0 0 56px;
    background: var(--color-white);
    border: var(--redo-progress-line-width) solid var(--color-border-stroke);
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    top: 50%;
    margin-top: -28px;
    transform: none;
    transition:
        border-color var(--duration-interact) var(--ease-standard),
        border-width var(--duration-interact) var(--ease-standard),
        background var(--duration-interact) var(--ease-standard),
        transform var(--duration-interact) var(--ease-standard),
        box-shadow var(--duration-interact) var(--ease-standard);
    z-index: 1001;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    overflow: visible;
}

/* Forward drag: idle = white + ring matching progress line; black when armed (Step 1 / Step 2 pre-ready below) */
#step-slider:not(.hidden) .step-slide .canvas-slider.slider-right .progress-circle {
    background: var(--color-white);
    border: var(--redo-progress-line-width) solid var(--redo-forward-dragger-border-idle);
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
}

#step-slider:not(.hidden) .step-slide .canvas-slider.slider-right .progress-circle .arrow-right {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

/* Armed by flow + active step (data-active-flow-step mirrors currentStep in JS — same logic as Step 1) */
#step-slider[data-active-flow-step='1'].image-selected .step-slide[data-step='1'] .slider-right .progress-circle,
#step-slider[data-active-flow-step='2'].design-selected .step-slide[data-step='2'] .slider-right .progress-circle,
#step-slider[data-active-flow-step='3'].image-selected.step-3-output-ready.step-3-output-chosen .step-slide[data-step='3'] .slider-right .progress-circle {
    background: var(--color-black);
    border: var(--redo-progress-line-width) solid var(--redo-forward-dragger-border-armed);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.32);
}

#step-slider[data-active-flow-step='1'].image-selected .step-slide[data-step='1'] .slider-right .progress-circle .arrow-right,
#step-slider[data-active-flow-step='2'].design-selected .step-slide[data-step='2'] .slider-right .progress-circle .arrow-right,
#step-slider[data-active-flow-step='3'].image-selected.step-3-output-ready.step-3-output-chosen .step-slide[data-step='3'] .slider-right .progress-circle .arrow-right {
    filter: grayscale(1) contrast(1.08) invert(1) brightness(1.14);
    opacity: 1;
}

/* Previous (back): white fill, black arrow, black ring (same width as vertical line) */
#step-slider:not(.hidden) .step-slide .canvas-slider.slider-left .progress-circle {
    background: var(--color-white);
    border: var(--redo-progress-line-width) solid var(--color-black);
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.14);
    animation: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#step-slider:not(.hidden) .step-slide .canvas-slider.slider-left .progress-circle .arrow-left {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

#step-slider:not(.hidden) .step-slide .canvas-slider.slider-left .progress-circle .drag-letter {
    fill: var(--redo-drag-label-fill);
}

/* Step 1 before image: white + grey ring (same token as muted .progress-line) */
#step-slider:not(.hidden):not(.image-selected) .step-slide[data-step='1'] .slider-right .progress-circle {
    background: var(--color-white);
    border: var(--redo-progress-line-width) solid var(--redo-forward-dragger-border-idle);
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.14);
    animation: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#step-slider:not(.hidden):not(.image-selected) .step-slide[data-step='1'] .slider-right .progress-circle .arrow-right {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

/* Step 3: idle forward until previews finish OR until user picks an output (then armed rules apply) */
#step-slider:not(.hidden).image-selected:not(.step-3-output-ready)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle,
#step-slider:not(.hidden).image-selected.step-3-output-ready:not(.step-3-output-chosen)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle {
    background: var(--color-white);
    border: var(--redo-progress-line-width) solid var(--redo-forward-dragger-border-idle);
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.14);
    animation: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#step-slider:not(.hidden).image-selected:not(.step-3-output-ready)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle .arrow-right,
#step-slider:not(.hidden).image-selected.step-3-output-ready:not(.step-3-output-chosen)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle .arrow-right {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

#step-slider:not(.hidden).image-selected:not(.step-3-output-ready)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle:hover,
#step-slider:not(.hidden).image-selected.step-3-output-ready:not(.step-3-output-chosen)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle:hover {
    background: linear-gradient(165deg, #ffffff 0%, #ececec 50%, #f4f4f4 100%);
    border-width: var(--redo-progress-line-width);
    border-color: var(--redo-forward-dragger-border-idle);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}

#step-slider:not(.hidden).image-selected:not(.step-3-output-ready)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle:active,
#step-slider:not(.hidden).image-selected.step-3-output-ready:not(.step-3-output-chosen)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle:active {
    background: linear-gradient(165deg, #e6e6e6 0%, #f0f0f0 100%);
    border-width: var(--redo-progress-line-width);
    border-color: var(--redo-forward-dragger-border-idle);
}

#step-slider:not(.hidden).image-selected:not(.step-3-output-ready)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle:hover .arrow-right,
#step-slider:not(.hidden).image-selected:not(.step-3-output-ready)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle:active .arrow-right,
#step-slider:not(.hidden).image-selected.step-3-output-ready:not(.step-3-output-chosen)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle:hover .arrow-right,
#step-slider:not(.hidden).image-selected.step-3-output-ready:not(.step-3-output-chosen)[data-active-flow-step='3'] .step-slide[data-step='3'] .slider-right .progress-circle:active .arrow-right {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

/* Step 2 before design: white + same grey ring/track as Step 1 pre-ready */
#step-slider:not(.hidden).image-selected:not(.design-selected) .step-slide[data-step='2'] .slider-right .progress-circle {
    background: var(--color-white);
    border: var(--redo-progress-line-width) solid var(--redo-forward-dragger-border-idle);
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.14);
    animation: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#step-slider:not(.hidden).image-selected:not(.design-selected) .step-slide[data-step='2'] .slider-right .progress-circle .arrow-right {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

.drag-label {
    position: absolute;
    width: 135px;
    height: 135px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.drag-letter {
    fill: var(--redo-drag-label-fill);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.85px;
    font-family: var(--font-mono);
    dominant-baseline: middle;
    text-anchor: middle;
}

.drag-letter textPath {
    letter-spacing: 0.85px;
}

@keyframes drag-label-shake {
    0%,
    100% {
        transform: translate(-50%, -50%) translateX(0);
    }
    15% {
        transform: translate(-50%, -50%) translateX(-4px);
    }
    30% {
        transform: translate(-50%, -50%) translateX(4px);
    }
    45% {
        transform: translate(-50%, -50%) translateX(-3px);
    }
    60% {
        transform: translate(-50%, -50%) translateX(3px);
    }
    75% {
        transform: translate(-50%, -50%) translateX(-2px);
    }
    90% {
        transform: translate(-50%, -50%) translateX(1px);
    }
}

.drag-label.drag-label--shake {
    animation: drag-label-shake 0.42s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .drag-label.drag-label--shake {
        animation: none;
    }
}

.canvas-slider .progress-circle:hover {
    transform: scale(1.02);
    background: linear-gradient(165deg, #ffffff 0%, #ececec 50%, #f4f4f4 100%);
    border-width: var(--redo-progress-line-width);
    border-color: rgba(0, 0, 0, 0.2);
}

.canvas-slider .progress-circle:active {
    cursor: default;
    transform: scale(0.98);
    background: linear-gradient(165deg, #e6e6e6 0%, #f0f0f0 100%);
}

/* Forward idle hover / active — light surface, ring tracks line color */
#step-slider:not(.hidden) .step-slide .canvas-slider.slider-right .progress-circle:hover {
    background: linear-gradient(165deg, #ffffff 0%, #f0f0f0 50%, #ebebeb 100%);
    border-width: var(--redo-progress-line-width);
    border-color: var(--redo-forward-dragger-border-idle);
}

#step-slider:not(.hidden) .step-slide .canvas-slider.slider-right .progress-circle:hover .arrow-right {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

#step-slider:not(.hidden) .step-slide .canvas-slider.slider-right .progress-circle:active {
    background: linear-gradient(165deg, #ececec 0%, #f2f2f2 100%);
    border-width: var(--redo-progress-line-width);
    border-color: var(--redo-forward-dragger-border-idle);
}

#step-slider:not(.hidden) .step-slide .canvas-slider.slider-right .progress-circle:active .arrow-right {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

/* Forward armed hover / active — stay black; CLICK arc stays grey */
#step-slider[data-active-flow-step='1'].image-selected .step-slide[data-step='1'] .slider-right .progress-circle:hover,
#step-slider[data-active-flow-step='2'].design-selected .step-slide[data-step='2'] .slider-right .progress-circle:hover,
#step-slider[data-active-flow-step='3'].image-selected.step-3-output-ready.step-3-output-chosen .step-slide[data-step='3'] .slider-right .progress-circle:hover {
    background: #0a0a0a;
    border-width: var(--redo-progress-line-width);
    border-color: var(--redo-forward-dragger-border-armed);
}

#step-slider[data-active-flow-step='1'].image-selected .step-slide[data-step='1'] .slider-right .progress-circle:hover .arrow-right,
#step-slider[data-active-flow-step='2'].design-selected .step-slide[data-step='2'] .slider-right .progress-circle:hover .arrow-right,
#step-slider[data-active-flow-step='3'].image-selected.step-3-output-ready.step-3-output-chosen .step-slide[data-step='3'] .slider-right .progress-circle:hover .arrow-right {
    filter: grayscale(1) contrast(1.08) invert(1) brightness(1.14);
    opacity: 1;
}

#step-slider[data-active-flow-step='1'].image-selected .step-slide[data-step='1'] .slider-right .progress-circle:active,
#step-slider[data-active-flow-step='2'].design-selected .step-slide[data-step='2'] .slider-right .progress-circle:active,
#step-slider[data-active-flow-step='3'].image-selected.step-3-output-ready.step-3-output-chosen .step-slide[data-step='3'] .slider-right .progress-circle:active {
    background: #000000;
    border-width: var(--redo-progress-line-width);
    border-color: var(--redo-forward-dragger-border-armed);
}

#step-slider[data-active-flow-step='1'].image-selected .step-slide[data-step='1'] .slider-right .progress-circle:active .arrow-right,
#step-slider[data-active-flow-step='2'].design-selected .step-slide[data-step='2'] .slider-right .progress-circle:active .arrow-right,
#step-slider[data-active-flow-step='3'].image-selected.step-3-output-ready.step-3-output-chosen .step-slide[data-step='3'] .slider-right .progress-circle:active .arrow-right {
    filter: grayscale(1) contrast(1.08) invert(1) brightness(1.14);
    opacity: 1;
}

#step-slider:not(.hidden) .step-slide .canvas-slider.slider-left .progress-circle:hover {
    background: linear-gradient(165deg, #ffffff 0%, #f0f0f0 50%, #ebebeb 100%);
    border-width: var(--redo-progress-line-width);
    border-color: var(--color-black);
}

#step-slider:not(.hidden) .step-slide .canvas-slider.slider-left .progress-circle:hover .arrow-left {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

#step-slider:not(.hidden) .step-slide .canvas-slider.slider-left .progress-circle:active {
    background: linear-gradient(165deg, #ececec 0%, #f2f2f2 100%);
    border-width: var(--redo-progress-line-width);
    border-color: var(--color-black);
}

#step-slider:not(.hidden) .step-slide .canvas-slider.slider-left .progress-circle:active .arrow-left {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

#step-slider:not(.hidden):not(.image-selected) .step-slide[data-step='1'] .slider-right .progress-circle:hover {
    background: linear-gradient(165deg, #ffffff 0%, #ececec 50%, #f4f4f4 100%);
    border-width: var(--redo-progress-line-width);
    border-color: var(--redo-forward-dragger-border-idle);
}

#step-slider:not(.hidden):not(.image-selected) .step-slide[data-step='1'] .slider-right .progress-circle:active {
    background: linear-gradient(165deg, #e6e6e6 0%, #f0f0f0 100%);
    border-width: var(--redo-progress-line-width);
    border-color: var(--redo-forward-dragger-border-idle);
}

#step-slider:not(.hidden):not(.image-selected) .step-slide[data-step='1'] .slider-right .progress-circle:hover .arrow-right,
#step-slider:not(.hidden):not(.image-selected) .step-slide[data-step='1'] .slider-right .progress-circle:active .arrow-right {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

#step-slider:not(.hidden).image-selected:not(.design-selected) .step-slide[data-step='2'] .slider-right .progress-circle:hover {
    background: linear-gradient(165deg, #ffffff 0%, #ececec 50%, #f4f4f4 100%);
    border-width: var(--redo-progress-line-width);
    border-color: var(--redo-forward-dragger-border-idle);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}

#step-slider:not(.hidden).image-selected:not(.design-selected) .step-slide[data-step='2'] .slider-right .progress-circle:active {
    background: linear-gradient(165deg, #e6e6e6 0%, #f0f0f0 100%);
    border-width: var(--redo-progress-line-width);
    border-color: var(--redo-forward-dragger-border-idle);
}

#step-slider:not(.hidden).image-selected:not(.design-selected) .step-slide[data-step='2'] .slider-right .progress-circle:hover .arrow-right,
#step-slider:not(.hidden).image-selected:not(.design-selected) .step-slide[data-step='2'] .slider-right .progress-circle:active .arrow-right {
    filter: grayscale(1) contrast(1.22) brightness(1.02);
    opacity: 1;
}

/* Forward handle CLICK text — high-contrast black, slightly lighter weight on arc */
#step-slider:not(.hidden) .step-slide .canvas-slider.slider-right .progress-circle .drag-letter {
    fill: #000;
    font-size: 9.5px;
    font-weight: 300;
    letter-spacing: 0.75px;
    transition: none;
}

#step-slider:not(.hidden) .step-slide .canvas-slider .progress-circle .drag-label {
    cursor: default;
}

/* Right slider circle (centered on right edge) */
.slider-right .progress-circle {
    left: -28px; /* Center on the line */
}

/* Left slider circle (centered on left edge) */
.slider-left .progress-circle {
    right: -28px; /* Center on the line */
}

/* Disable transitions during drag */
.step-slider.no-transition .canvas-slider .progress-line,
.step-slider.no-transition .canvas-slider .progress-circle {
	transition: none !important;
}

/* Arrow indicators — full opacity; contrast boost so glyphs read on white + on lane edges */
.arrow-right,
.arrow-left {
    width: 26px;
    height: 26px;
    background-image: url('Assets/arrow.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    transform-origin: center;
    margin: 0;
    opacity: 1;
    filter: grayscale(1) contrast(1.22) brightness(1.02);
}

.arrow-right {
    transform: rotate(0deg);
}

.arrow-left {
    transform: rotate(180deg);
}

/* Hidden manual slider for dragging functionality */
.manual-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    pointer-events: none;
}

.slider-input {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 60px;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transform: translateY(-50%);
    pointer-events: all;
    cursor: default;
}

.slider-input:active {
    cursor: default;
}

.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    cursor: default;
}

.slider-input::-moz-range-thumb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    cursor: default;
    border: none;
}

/* Hide the labels */
.slider-labels {
    display: none;
}

/* Step title in bottom left */
.step-title-bottom {
    position: absolute;
    bottom: 40px;
    left: 40px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    z-index: 5;
}

@media (max-width: 768px) {
    .step-title-bottom {
        bottom: 30px;
        left: 30px;
        font-size: 16px;
    }
}

.step-slider.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity var(--duration-slow) var(--ease-out-smooth),
        visibility 0s linear var(--duration-slow);
}

.step-slider:not(.hidden) {
    visibility: visible;
    transition:
        opacity var(--duration-slow) var(--ease-out-smooth),
        visibility 0s linear 0s;
}

.slider-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
}

.step-slide {
    height: 100%;
    position: absolute;
    top: 0;
    box-sizing: border-box;
    overflow: visible; /* Allow dragger circle to straddle both canvases */
    transition:
        width var(--duration-ui) var(--ease-standard),
        left var(--duration-ui) var(--ease-standard),
        background-color var(--duration-slow) var(--ease-in-out-smooth);
    z-index: 0;
}

/* Choreographed flow: longer easing when advancing (click-to-next or completion) */
.step-slider--flow-animate .step-slide {
    transition:
        width 1.05s var(--ease-out-smooth),
        left 1.05s var(--ease-out-smooth),
        background-color var(--duration-slow) var(--ease-in-out-smooth);
}

/* Keep active step (and its dragger) above adjacent canvases */
.step-slide.is-current-step {
    z-index: 20;
}

/* Canvas content area - fills the canvas */
.canvas-content {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Clip content beyond canvas */
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: opacity, transform;
}

/* Step 2: must scroll inside the slide; generic .canvas-content overflow:hidden loses the y-axis to .step-2-content in cascade — lock it for embeds */
.step-slide[data-step='2'] .canvas-content.step-2-content {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/*
 * Adjacent step dimming on .step-slide (not .canvas-content::after).
 * Step 3 uses .step-3-content::after as a flex spacer — a second ::after on the same element is impossible,
 * so canvas-level overlays were dropped for step 3. Slide-level ::after sits above content, below .canvas-slider (z 4000).
 */
.step-slide.step-slide--adjacent-prev::after,
.step-slide.step-slide--adjacent-next::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
}

.step-slide.step-slide--adjacent-prev::after {
    background: rgba(0, 0, 0, 0.505);
}

.step-slide.step-slide--adjacent-next::after {
    background: rgba(0, 0, 0, 0.8);
}

/* Entrance: fade + 20px rise (IntersectionObserver adds .step-content--revealed) */
#step-slider:not(.hidden) .step-slide .canvas-content:not(.step-content--revealed) {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.55s var(--ease-standard),
        transform 0.55s var(--ease-standard);
}

#step-slider:not(.hidden) .step-slide .canvas-content.step-content--revealed {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.55s var(--ease-standard),
        transform 0.55s var(--ease-standard);
}

/*
 * Adjacent columns stay narrow; IntersectionObserver may never cross the reveal threshold,
 * which left .canvas-content at opacity:0 and hid the dim overlays (::after). Force visible.
 * Skip while step-slider--crossfade-2-3 is on so the 2↔3 cross-fade rules keep precedence.
 */
#step-slider:not(.hidden):not(.step-slider--crossfade-2-3) .step-slide.step-slide--adjacent-prev .canvas-content:not(.step-content--revealed),
#step-slider:not(.hidden):not(.step-slider--crossfade-2-3) .step-slide.step-slide--adjacent-next .canvas-content:not(.step-content--revealed) {
    opacity: 1;
    transform: translateY(0);
}

/*
 * Step 2 (Prompt) → Step 3 (Result): cross-fade between panels while widths animate.
 * Static site — no React / Framer Motion; this mirrors AnimatePresence-style opacity handoff.
 */
#step-slider.step-slider--crossfade-2-3 .step-slide[data-step='2'] .canvas-content.step-2-content,
#step-slider.step-slider--crossfade-2-3 .step-slide[data-step='3'] .canvas-content.step-3-content {
    transition:
        opacity 0.62s var(--ease-standard),
        transform 0.62s var(--ease-standard);
}

#step-slider.step-slider--crossfade-2-3:not(.step-slider--crossfade-2-3-active)
    .step-slide[data-step='2']
    .canvas-content.step-2-content {
    opacity: 1;
    transform: translateY(0);
}

#step-slider.step-slider--crossfade-2-3:not(.step-slider--crossfade-2-3-active)
    .step-slide[data-step='3']
    .canvas-content.step-3-content {
    opacity: 0;
    transform: translateY(0);
}

#step-slider.step-slider--crossfade-2-3.step-slider--crossfade-2-3-active
    .step-slide[data-step='2']
    .canvas-content.step-2-content {
    opacity: 0;
    transform: translateY(0);
}

#step-slider.step-slider--crossfade-2-3.step-slider--crossfade-2-3-active
    .step-slide[data-step='3']
    .canvas-content.step-3-content {
    opacity: 1;
    transform: translateY(0);
}

/* Stable vertical footprint; cap with dvh so short embeds can scroll instead of crushing panels */
.step-slide[data-step='2'] .canvas-content.step-2-content,
.step-slide[data-step='3'] .canvas-content.step-3-content {
    min-height: min(520px, 58vh, 92dvh);
}

@media (prefers-reduced-motion: reduce) {
    #step-slider:not(.hidden) .step-slide .canvas-content {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .step-slider--flow-animate .step-slide {
        transition: none !important;
    }
}

/* Step 1 specific canvas content — flex column scales in short embeds / iframes (no fixed 340px thumbnail offset) */
.step-slide[data-step="1"] .canvas-content {
    padding: clamp(0.35rem, 1.5vh, 1rem) clamp(0.5rem, 2vw, 1rem) clamp(0.75rem, 2.5vh, 1.5rem);
    padding-top: clamp(1.25rem, 4.5vh, 2.75rem);
    background: transparent; /* Use canvas background */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vh, 1.25rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Step 3 and Step 4 canvas content */
.step-slide[data-step="3"] .canvas-content,
.step-slide[data-step="4"] .canvas-content {
    background: transparent; /* Use canvas background */
}

/* Disable slide transitions during drag */
.step-slider.no-transition .step-slide {
    transition: none !important;
}

/* Step panels — flat opaque (no glass) */
.step-slide[data-step="1"] {
    width: var(--boundary-1-2, 75vw);
    left: 0;
    background: #fafafa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #000;
}

.step-slide[data-step="2"] {
    width: calc(var(--boundary-2-3, 100vw) - var(--boundary-1-2, 75vw));
    left: var(--boundary-1-2, 75vw);
    background: #fafafa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #000;
}

.step-slide[data-step="3"] {
    width: calc(var(--boundary-3-4, 100vw) - var(--boundary-2-3, 100vw));
    left: var(--boundary-2-3, 100vw);
    background: #fafafa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #000;
}

.step-slide[data-step="4"] {
    width: calc(100vw - var(--boundary-3-4, 100vw));
    left: var(--boundary-3-4, 100vw);
    background: #fafafa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #000;
}

/* Step header with navigation */
.step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.step-indicator {
    display: flex;
    align-items: center;
    gap: 15px;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
}

.step-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.step-circle.current {
    background: #ffffff;
    border: 2px solid #333;
}

.step-circle.current img {
    filter: brightness(0) invert(1); /* Make image white for current step */
}

.step-circle.next {
    background: #000000;
    border: 2px solid #000000;
}

.step-circle.next img {
    filter: brightness(0); /* Make image black for next step */
}

.step-title {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.next-step-indicator {
    display: flex;
    align-items: center;
    gap: 15px;
}

.arrow-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--panel-border-strong);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.arrow-button:hover {
    background: var(--color-surface-subtle);
}

.arrow-button:active {
    background: linear-gradient(160deg, #ececec 0%, #f8f8f8 100%);
}

/* Upload area — flows in Step 1 flex column (embed-safe) */
.upload-area {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: 5;
    margin-top: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: min(520px, 100%);
}

.upload-box {
    /* Step 1 tile: L-bracket arms + stroke (thicker than main 1px frame) */
    --upload-corner-arm: 34px;
    --upload-corner-stroke: 3px;
    width: min(520px, 100%);
    max-width: 520px;
    aspect-ratio: 1;
    height: auto;
    max-height: min(520px, min(62vh, 62dvh));
    border: 1px solid var(--color-black);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
    transition:
        background-color var(--duration-interact) var(--ease-standard),
        border-color var(--duration-interact) var(--ease-standard),
        box-shadow var(--duration-interact) var(--ease-standard),
        transform var(--duration-interact) var(--ease-standard),
        opacity var(--duration-interact) var(--ease-standard);
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* Don't shrink */
}

/* L-shaped corner brackets — bold corner accents */
.upload-box::before,
.upload-box::after,
.upload-box .corner-tr,
.upload-box .corner-bl {
    z-index: 2;
}

.upload-box::before,
.upload-box::after {
    content: '';
    position: absolute;
    width: var(--upload-corner-arm);
    height: var(--upload-corner-arm);
    border: var(--upload-corner-stroke) solid var(--color-black);
    pointer-events: none;
    box-sizing: border-box;
}

/* Top-left corner */
.upload-box::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

/* Bottom-right corner */
.upload-box::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* Top-right corner */
.upload-box .corner-tr {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--upload-corner-arm);
    height: var(--upload-corner-arm);
    border: var(--upload-corner-stroke) solid var(--color-black);
    border-left: none;
    border-bottom: none;
    pointer-events: none;
    box-sizing: border-box;
}

/* Bottom-left corner */
.upload-box .corner-bl {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--upload-corner-arm);
    height: var(--upload-corner-arm);
    border: var(--upload-corner-stroke) solid var(--color-black);
    border-right: none;
    border-top: none;
    pointer-events: none;
    box-sizing: border-box;
}

.upload-box.has-image {
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-black);
    box-shadow: none;
}

/* Chosen image: same thick L-brackets + light frame (matches empty tile language) */
.upload-box.has-image::before,
.upload-box.has-image::after,
.upload-box.has-image .corner-tr,
.upload-box.has-image .corner-bl {
    display: block;
}

.upload-box.has-image .upload-icon,
.upload-box.has-image .upload-text {
    display: none;
}

/* Selected image (hidden by default, shown when image is selected) */
.upload-box .selected-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* fit to square without cropping */
    display: none;
}

.upload-box.has-image .selected-image {
    display: block;
    position: relative;
    z-index: 0;
}

.upload-box:hover {
    background: var(--color-surface);
    border-color: var(--color-black);
}

.upload-box.has-image:hover {
    background: var(--color-white);
    border: 1px solid var(--color-black);
    transform: none;
}

/* Magnetic drop target: pulse while a catalog thumbnail is dragged over the slot */
@keyframes redo-drop-zone-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.12),
            0 0 20px rgba(0, 0, 0, 0.06);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(0, 0, 0, 0.18),
            0 0 36px rgba(0, 0, 0, 0.1);
    }
}

.upload-box.drop-target--active {
    animation: redo-drop-zone-pulse 1.15s ease-in-out infinite;
}

.upload-box.has-image.drop-target--active {
    animation: redo-drop-zone-pulse 1.15s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .upload-box.drop-target--active,
    .upload-box.has-image.drop-target--active {
        animation: none;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.14);
    }
}

/* Floating preview while dragging a thumbnail toward the upload slot */
.redo-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 10050;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.12);
    will-change: transform;
    opacity: 0.96;
}

.upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

/* Minimal crosshair + (replaces raster upload graphic) */
.upload-plus {
    display: block;
    width: 44px;
    height: 44px;
    position: relative;
    flex-shrink: 0;
}

.upload-plus::before,
.upload-plus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--color-black);
    transform: translate(-50%, -50%);
}

.upload-plus::before {
    width: 2px;
    height: 100%;
}

.upload-plus::after {
    width: 100%;
    height: 2px;
}

/* Hide upload icon when image is selected */
.upload-box.has-image .upload-icon {
    display: none;
}

.upload-text {
    text-align: center;
    color: #000; /* Black text for visibility on grey background */
    font-family: var(--font-site);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: 0 20px; /* Add some horizontal padding */
    max-width: 400px; /* Limit text width for better readability */
}

@media (prefers-reduced-motion: reduce) {
    .step-slide[data-step='1'].is-current-step .upload-box:not(.has-image) .upload-text {
        transform: none;
    }

    .step-slider.image-selected .step-slide[data-step="1"] .slider-right .drag-label:not(.drag-label--shake),
    #step-slider.design-selected .step-slide[data-step="2"] .slider-right .drag-label:not(.drag-label--shake),
    #step-slider.image-selected.step-3-output-ready.step-3-output-chosen .step-slide[data-step="3"] .slider-right .drag-label:not(.drag-label--shake) {
        animation: none;
        transform: translate(-50%, -50%);
    }
}

/* Bottom image thumbnails — below upload in flex column (replaces fixed 340px offset for embeds) */
.bottom-images {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(10px, 2.5vw, 20px);
    z-index: 5;
    margin-top: 0;
    width: 100%;
    max-width: min(520px, 100%);
    flex-shrink: 0;
}

.image-thumbnail {
    position: relative;
    cursor: grab;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    transition:
        transform var(--duration-interact) var(--ease-standard),
        border-color var(--duration-interact) var(--ease-standard),
        box-shadow var(--duration-interact) var(--ease-standard),
        opacity var(--duration-interact) var(--ease-standard),
        backdrop-filter var(--duration-interact) var(--ease-standard),
        filter var(--duration-interact) var(--ease-standard);
    box-shadow: var(--photo-emboss-shadow);
}

.thumbnail-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    background: var(--color-white);
    border: 1px solid var(--panel-border);
    color: var(--color-text);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.image-thumbnail:hover {
    transform: scale(1.02);
    border-color: rgba(0, 0, 0, 0.22);
    opacity: 1;
    box-shadow: var(--photo-emboss-shadow-hover), var(--card-glass-glow);
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
}

.image-thumbnail:active {
    transform: scale(0.98);
    cursor: grabbing;
}

.image-thumbnail.image-thumbnail--dragging {
    touch-action: none;
    opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
    .image-thumbnail.image-thumbnail--dragging {
        opacity: 1;
    }
}

.image-thumbnail.selected,
.image-thumbnail.selected:hover {
    border-color: var(--color-black);
    opacity: 1;
}

.image-thumbnail img {
    width: 110px;
    height: 160px; /* vertical rectangle */
    object-fit: cover;
    display: block;
    transition:
        filter var(--duration-ui) var(--ease-out-smooth),
        opacity var(--duration-fast) var(--ease-out-smooth);
}

/* Catalogue / picker: wireframe-like pass, then full photo when scrolled into view (see script.js) */
.image-thumbnail img.redo-blueprint-pending,
.step-3-option-img.redo-blueprint-pending {
    filter: grayscale(1) contrast(1.38) brightness(1.1);
    opacity: 0.52;
}

.image-thumbnail img.redo-blueprint-revealed,
.step-3-option-img.redo-blueprint-revealed {
    filter: none;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .image-thumbnail img.redo-blueprint-pending,
    .step-3-option-img.redo-blueprint-pending {
        filter: none;
        opacity: 1;
    }
}

.selection-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background: var(--color-black);
    color: var(--color-white);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.image-thumbnail.selected img {
    border: none;
    box-sizing: border-box;
}

/* Step content for other steps - fixed size, centered */
.step-content {
    width: auto;
    max-width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 40px;
    box-sizing: border-box;
}

/* Step 4: fill column height; same vertical gutter top + bottom, bottom adds nav clearance */
.canvas-content.step-4-content {
    --step-4-v-gutter: clamp(16px, 2.5vh, 28px);
    /* Fixed .nav-steps — same floor as --redo-nav-clearance for iframe / short dvh */
    --step-4-nav-band: max(240px, calc(clamp(28px, 5.5vh, 56px) + clamp(168px, 22vh, 208px)));
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: calc(var(--step-4-v-gutter) + env(safe-area-inset-top, 0px));
    padding-left: max(clamp(12px, 3vw, 28px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(12px, 3vw, 28px), env(safe-area-inset-right, 0px));
    padding-bottom: calc(
        var(--step-4-v-gutter) + var(--step-4-nav-band) + env(safe-area-inset-bottom, 0px)
    );
}


/* Full width of Step 4 column */
.canvas-content.step-4-content > .step-4-guide.step-4-output-layout {
    align-self: stretch;
}

/* Inner scroll root (same element carries .step-4-content) */
.step-4-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

/* Step 3 — flex spacers center tiles; bottom padding clears fixed nav; @media max-height enables scroll in embeds */
.step-3-content {
    --step-3-bottom-safe: max(var(--redo-nav-clearance), clamp(200px, 28vh, 268px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: var(--step-3-bottom-safe);
    padding-left: clamp(8px, 2.5vw, 24px);
    padding-right: clamp(8px, 2.5vw, 24px);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    scrollbar-width: none;
}

.step-3-content::-webkit-scrollbar {
    display: none;
}

/* Slightly more flex above than below so the tile stack sits nearer true viewport center
   (bottom safe padding shrinks the flex box upward if these were equal). */
.step-3-content::before {
    content: '';
    flex: 1.18 1 0;
    min-height: 0;
    width: 0;
    pointer-events: none;
}

.step-3-content::after {
    content: '';
    flex: 0.82 1 0;
    min-height: 0;
    width: 0;
    pointer-events: none;
}

/* Short viewports / embedded iframes: vertical tile stack + fixed nav — enable scroll, drop flex spacers */
@media (max-height: 720px) {
    .step-slide[data-step='3'] .canvas-content.step-3-content {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        align-items: center;
        scrollbar-width: thin;
    }

    .step-3-content::-webkit-scrollbar {
        display: block;
        width: 6px;
    }

    .step-3-content::before,
    .step-3-content::after {
        display: none;
    }
}

.step-4-content::-webkit-scrollbar {
    width: 8px;
}

.step-4-content::-webkit-scrollbar-track {
    background: transparent;
}

.step-4-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.22);
    border-radius: 8px;
}

.step-4-guide {
    max-width: 720px;
    margin: 96px 0 60px 80px;
    padding: 28px 100px 72px 32px;
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: var(--color-text);
    white-space: normal;
    border-radius: 2px;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.step-4-guide h1:not(.step-4-output-title) {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
}

/* Stitched scroll: section titles stick briefly while content passes underneath */
.step-4-guide h2,
.step-4-guide h3 {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        #fafafa 0%,
        #fafafa 78%,
        rgba(250, 250, 250, 0) 100%
    );
    padding: 10px 0 12px;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
}

.step-4-guide h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 28px 0 12px;
}

.step-4-guide h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 22px 0 8px;
}

.step-4-guide h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 18px 0 6px;
}

.step-4-guide h5,
.step-4-guide h6 {
    font-size: 14px;
    font-weight: 700;
    margin: 14px 0 6px;
}

.step-4-guide p {
    margin: 0 0 12px;
}

.step-4-guide ul,
.step-4-guide ol {
    margin: 0 0 16px 20px;
}

.step-4-guide li {
    margin: 4px 0;
}

.step-4-guide pre {
    background: transparent;
    color: var(--color-text);
    margin: 8px 0 16px;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.4;
    white-space: pre;
}

/* Step 4 — guide fills full column height; square embeds stay their natural size inside the taller card. */
.step-4-guide.step-4-output-layout {
    --step-4-guide-pad-y: clamp(18px, 2.75vmin, 30px);
    flex: 1 0 auto;
    /* Explicit min-height so the card always reaches the bottom gutter even when flex propagation fails
       in overflow-y:auto containers. Uses the same variables as .step-4-content padding. */
    min-height: calc(
        100dvh
        - var(--step-4-v-gutter) * 2
        - var(--step-4-nav-band)
        - env(safe-area-inset-top, 0px)
        - env(safe-area-inset-bottom, 0px)
    );
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: min(960px, 92vw);
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 28px) var(--step-4-guide-pad-y);
    overflow: visible;
    box-sizing: border-box;
    font-family: var(--font-site);
}

/* Sticky header + tab strip — freezes at top of scroll area while tab panel scrolls beneath */
.step-4-sticky-chrome {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fafafa;
    padding: var(--step-4-guide-pad-y) 0 var(--step-4-guide-pad-y);
    margin-left: calc(-1 * clamp(16px, 3vw, 28px));
    margin-right: calc(-1 * clamp(16px, 3vw, 28px));
    padding-left: clamp(16px, 3vw, 28px);
    padding-right: clamp(16px, 3vw, 28px);
    box-sizing: border-box;
    flex-shrink: 0;
}

.step-4-output-header {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Step 4: horizontal tab strip (3D vs diagram vs instructions — same Step 3 build) */
.step-4-output-scroller {
    flex: 0 0 auto;
    margin: 0 0 var(--step-4-guide-pad-y);
    position: relative;
    width: 100%;
    /* Edge fade hints more content off-screen on narrow widths */
    mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}

.step-4-output-scroller__strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: stretch;
    gap: clamp(8px, 2vw, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 0;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.step-4-output-scroller__strip::-webkit-scrollbar {
    height: 6px;
}

.step-4-output-scroller__strip::-webkit-scrollbar-track {
    background: transparent;
}

.step-4-output-scroller__strip::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

/* Plain text tabs — equal width across the same horizontal band as the instructions panel */
.step-4-output-tab {
    flex: 1 1 0;
    min-width: 0;
    scroll-snap-align: start;
    margin: 0;
    font-family: var(--font-site);
    font-size: clamp(13px, 1.15vw, 15px);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 4px 10px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 0;
    background: transparent;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    display: block;
    box-sizing: border-box;
    transition:
        color var(--duration-interact) var(--ease-standard),
        border-color var(--duration-interact) var(--ease-standard);
}

.step-4-output-tab:hover {
    color: rgba(0, 0, 0, 0.78);
}

.step-4-output-tab:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 4px;
}

.step-4-output-tab.step-4-output-tab--active {
    color: rgba(0, 0, 0, 0.96);
    border-bottom-color: rgba(0, 0, 0, 0.85);
}

.step-4-output-title {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0;
    padding: 0;
    display: block;
    box-sizing: border-box;
    font-family: var(--font-site);
    background: transparent;
    color: var(--color-text);
    border: none;
    border-radius: 0;
}

.step-4-panels {
    --step-4-panel-max: min(900px, min(92vw, 100%));
    /* Height always follows active tab (square + chrome, or full instructions) — no empty flex column */
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
}

.step-4-panels .step-4-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: center;
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    max-width: var(--step-4-panel-max);
    justify-content: flex-start;
}

/* Only one deliverable view at a time (tab state also toggles [hidden] in JS) */
.step-4-panels .step-4-section[data-step4-view][hidden] {
    display: none !important;
}

/* 3D + diagram: square embed; side capped by remaining viewport height (~one screen, portrait-friendly 9∶16 slot) */
.step-4-viewport {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    max-height: none;
    border-radius: 0;
    /* Light stage on the same #fafafa step canvas as other steps */
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    overflow: hidden;
}

.step-4-viewport canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.step-4-diagram-frame {
    flex: 0 0 auto;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fafafa;
    overflow: hidden;
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Larger square stage; less chrome reserved so 3D fills more of the column */
.step-4-panels[data-step4-view='3d'] .step-4-viewport,
.step-4-panels[data-step4-view='diagram'] .step-4-diagram-frame {
    --step-4-embed-chrome: clamp(140px, 22svh, 220px);
    width: min(
        var(--step-4-panel-max),
        calc(100svh - var(--step-4-embed-chrome)),
        calc(100dvh - var(--step-4-embed-chrome))
    );
    max-width: 100%;
    align-self: center;
}

/* Portrait 9∶16-ish handsets: keep the square inside the narrow “page” width */
@media (max-aspect-ratio: 9 / 16) {
    .step-4-panels[data-step4-view='3d'] .step-4-viewport,
    .step-4-panels[data-step4-view='diagram'] .step-4-diagram-frame {
        width: min(
            var(--step-4-panel-max),
            calc(100vw - clamp(24px, 6vw, 40px)),
            calc((100svh - var(--step-4-embed-chrome)) * 9 / 16)
        );
    }
}

.step-4-diagram-img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    border-radius: 0;
}

.step-4-text-head {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 16px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.step-4-text-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.step-4-action-btn {
    font-family: var(--font-site);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    cursor: pointer;
    transition:
        background var(--duration-interact) var(--ease-standard),
        border-color var(--duration-interact) var(--ease-standard);
}

.step-4-action-btn:hover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.28);
}

.step-4-action-btn--primary {
    background: var(--color-black);
    color: #ffffff;
    border-color: var(--color-black);
}

.step-4-panels .step-4-section.step-4-section--text {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(calc(100dvh - clamp(88px, 12vh, 128px)), 920px);
}

.step-4-section--text .step-4-text-head {
    flex-shrink: 0;
}

/* Instructions: scrollable text region — extends toward bottom of viewport */
.step-4-section--text .step-4-code-shell {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(calc(100dvh - clamp(96px, 14vh, 168px)), 860px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: none;
    border: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 8px 0 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

.step-4-section--text .step-4-code-shell::-webkit-scrollbar {
    width: 8px;
}

.step-4-section--text .step-4-code-shell::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 8px;
}

/* ── Rendered markdown body ─────────────────────────────────────────────── */
.step-4-md-body {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    color: var(--color-text-secondary);
}

.step-4-md-body .md-h1 {
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--color-text);
    margin: 0 0 8px;
    line-height: 1.25;
}

.step-4-md-body .md-h2 {
    font-size: clamp(16px, 1.6vw, 19px);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-text);
    margin: 28px 0 6px;
    line-height: 1.3;
}

.step-4-md-body .md-h3 {
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 700;
    color: var(--color-text);
    margin: 20px 0 4px;
    line-height: 1.35;
}

.step-4-md-body .md-h4,
.step-4-md-body .md-h5,
.step-4-md-body .md-h6 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin: 16px 0 4px;
    line-height: 1.4;
}

.step-4-md-body .md-p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0 0 10px;
}

.step-4-md-body .md-p--loading {
    color: rgba(0, 0, 0, 0.35);
    font-style: italic;
}

.step-4-md-body .md-hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: 24px 0;
}

.step-4-md-body .md-list {
    margin: 4px 0 10px 0;
    padding-left: 20px;
    list-style: none;
}

.step-4-md-body ul.md-list > li::before {
    content: '•';
    display: inline-block;
    width: 16px;
    margin-left: -20px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 12px;
}

.step-4-md-body ol.md-list {
    list-style: decimal;
    list-style-position: outside;
}

.step-4-md-body ol.md-list > li::before {
    content: none;
}

.step-4-md-body .md-list > li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 3px;
}

/* Fenced blocks in instructions are often ASCII diagrams, not terminal code — keep a light ground */
.step-4-md-body .md-pre {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-surface-low);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 12px 14px;
    margin: 8px 0 12px;
    overflow-x: auto;
    white-space: pre;
    tab-size: 2;
}

.step-4-md-body strong {
    font-weight: 700;
    color: var(--color-text);
}

/* Step 3 Options Container — flush on step canvas (no grey panel behind tiles) */
.step-3-options-container {
    --step3-tile: 320px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: auto;
    max-width: 600px;
    margin: 0 auto;
    flex: 0 0 auto;
    padding: 12px 20px 20px;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    background: transparent;
    box-shadow: none;
}

.step-3-options-container.step-3-selection-visual {
    gap: clamp(20px, 3.5vw, 32px);
}

/* Step 3 — “AI generation” feedback: skeleton + progressive status */
.step-3-generation-overlay {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Match .step-3-options-container padding so skeleton tiles line up with .step-3-option-img */
    padding: 12px 20px 20px;
    gap: 24px;
    box-sizing: border-box;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.4s var(--ease-standard),
        visibility 0.4s var(--ease-standard);
}

.step-3-options-container.step-3-generation--busy .step-3-generation-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Text-only build phase: hide skeleton, center status like step 2 */
.step-3-options-container.step-3-generation--text-only .step-3-generation-skeleton {
    display: none;
}

.step-3-options-container.step-3-generation--text-only .step-3-generation-overlay {
    justify-content: center;
    padding-top: 48px;
}

.step-3-options-container.step-3-generation--text-only .step-3-generation-status {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    font-family: var(--font-site);
    color: var(--color-text);
}

/* Fully hide real pixels while generating so early decodes (e.g. one fast JPG) don’t leak through the overlay */
.step-3-options-container.step-3-generation--busy .step-3-option-img {
    opacity: 0;
    filter: none;
    transition:
        opacity 0.5s var(--ease-standard),
        filter 0.5s var(--ease-standard);
}

.step-3-generation-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Same as .step-3-options-container default gap (not .step-3-selection-visual — removed during gen) */
    gap: 24px;
    width: 100%;
    pointer-events: none;
}

.step-3-skel {
    flex-shrink: 0;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: linear-gradient(
        105deg,
        #d8d8d8 0%,
        #d8d8d8 38%,
        #ececec 50%,
        #d8d8d8 62%,
        #d8d8d8 100%
    );
    background-size: 220% 100%;
    animation: step3SkeletonShimmer 1.4s var(--ease-standard) infinite;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Match .step-3-option-img: square tile + same frame so loader occupies identical layout */
.step-3-skel--thumb {
    width: var(--step3-tile);
    height: var(--step3-tile);
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    box-shadow: var(--photo-emboss-shadow);
}

@keyframes step3SkeletonShimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.step-3-generation-status {
    margin: 0;
    padding: 0 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 24rem;
    line-height: 1.45;
    min-height: 1.45em;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .step-3-skel {
        animation: none;
        background: #d0d0d0;
    }

    .step-3-generation-overlay {
        transition: none;
    }
}

/* Step 3 Option Images — equal tiles; chosen option scales up in place */
.step-3-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 4px;
    transition:
        box-shadow var(--duration-interact) var(--ease-standard),
        filter var(--duration-interact) var(--ease-standard),
        backdrop-filter var(--duration-interact) var(--ease-standard);
    scroll-snap-align: center;
}

.step-3-option-img {
    display: block;
    object-fit: contain;
    background: var(--color-white);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    box-shadow: var(--photo-emboss-shadow);
    width: var(--step3-tile);
    height: var(--step3-tile);
    max-height: none;
    box-sizing: border-box;
    transition:
        transform var(--duration-interact) var(--ease-standard),
        width var(--duration-interact) var(--ease-standard),
        height var(--duration-interact) var(--ease-standard);
    transform-origin: center center;
}

/* Selection: resize in layout (not transform: scale) so flex gap stays between real bounds — no overlap */
.step-3-options-container.step-3-selection-visual .step-3-option.selected {
    z-index: 2;
}

.step-3-options-container.step-3-selection-visual .step-3-option.selected .step-3-option-img {
    transform: none;
    width: calc(var(--step3-tile) * 1.14);
    height: calc(var(--step3-tile) * 1.14);
}

.step-3-options-container.step-3-selection-visual .step-3-option:not(.selected) .step-3-option-img {
    transform: none;
    width: calc(var(--step3-tile) * 0.72);
    height: calc(var(--step3-tile) * 0.72);
}

.step-3-options-container:not(.step-3-selection-visual) .step-3-option:hover .step-3-option-img {
    transform: scale(1.03);
}

.step-3-options-container.step-3-selection-visual .step-3-option:not(.selected):hover .step-3-option-img {
    width: calc(var(--step3-tile) * 0.76);
    height: calc(var(--step3-tile) * 0.76);
}

.step-3-options-container.step-3-selection-visual .step-3-option.selected:hover .step-3-option-img {
    width: calc(var(--step3-tile) * 1.18);
    height: calc(var(--step3-tile) * 1.18);
}

.step-3-option-img[src=""] {
    display: none; /* Hide images with empty src */
}

.step-3-option:hover {
    box-shadow: var(--shadow-soft);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.step-3-options-container:not(.step-3-selection-visual) .step-3-option:active .step-3-option-img {
    transform: scale(0.98);
}

.step-3-options-container.step-3-selection-visual .step-3-option:not(.selected):active .step-3-option-img {
    width: calc(var(--step3-tile) * 0.7);
    height: calc(var(--step3-tile) * 0.7);
}

.step-3-options-container.step-3-selection-visual .step-3-option.selected:active .step-3-option-img {
    width: calc(var(--step3-tile) * 1.1);
    height: calc(var(--step3-tile) * 1.1);
}

@media (prefers-reduced-motion: reduce) {
    .step-3-option-img {
        transition: none;
    }

    .step-3-options-container.step-3-selection-visual .step-3-option.selected .step-3-option-img,
    .step-3-options-container.step-3-selection-visual .step-3-option:not(.selected) .step-3-option-img {
        width: var(--step3-tile);
        height: var(--step3-tile);
        outline: 2px solid rgba(0, 0, 0, 0.2);
        outline-offset: 4px;
    }

    .step-3-options-container.step-3-selection-visual .step-3-option.selected .step-3-option-img {
        outline-color: rgba(0, 0, 0, 0.35);
    }

    .step-3-options-container:not(.step-3-selection-visual) .step-3-option:hover .step-3-option-img,
    .step-3-options-container.step-3-selection-visual .step-3-option:not(.selected):hover .step-3-option-img,
    .step-3-options-container.step-3-selection-visual .step-3-option.selected:hover .step-3-option-img,
    .step-3-options-container:not(.step-3-selection-visual) .step-3-option:active .step-3-option-img,
    .step-3-options-container.step-3-selection-visual .step-3-option:not(.selected):active .step-3-option-img,
    .step-3-options-container.step-3-selection-visual .step-3-option.selected:active .step-3-option-img {
        transform: none;
    }
}

.step-content h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: inherit; /* Use parent color */
}

.step-content p {
    font-size: 16px;
    color: inherit; /* Use parent color */
    opacity: 0.8;
    line-height: 1.6;
}

/* Step 2 — scroll column; bottom padding clears fixed .nav-steps (embeds / short iframes) */
.step-2-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding:
        clamp(10px, 2vh, 28px)
        max(0px, env(safe-area-inset-right, 0px))
        var(--redo-nav-clearance)
        max(0px, env(safe-area-inset-left, 0px));
    gap: clamp(16px, 3vh, 32px);
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    background: transparent; /* Use canvas background */
    position: relative; /* For absolute positioned header */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Step 2 Image Container */
.step-2-image-container {
    width: auto;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    margin-top: clamp(20px, 4vh, 72px);
}

.step-2-image-box {
    width: 520px; /* Fixed size - no scaling */
    height: 520px; /* Fixed size - no scaling */
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
    flex-shrink: 0;
    transition: box-shadow var(--duration-ui) var(--ease-out-smooth);
}

.step-2-image-box:has(img[src]:not([src=""])) {
    box-shadow: var(--photo-emboss-shadow);
}

/* Short viewports / embedded iframes: shrink hero image so panels + nav fit without overlap */
@media (max-height: 760px) {
    .step-2-image-box {
        width: min(100%, clamp(280px, 78vw, 440px));
        height: auto;
        aspect-ratio: 1;
        max-height: min(380px, 50dvh);
    }

    .step-2-content {
        gap: clamp(12px, 2.2vh, 24px);
    }
}

@media (max-height: 560px) {
    .step-2-image-box {
        max-height: min(260px, 44dvh);
    }

    .step-2-image-container {
        margin-top: clamp(10px, 1.8vh, 24px);
    }
}

/* Same glass + grey + spinner/type as .step-2-analysis-overlay (prompt region) */
.step-2-image-processing {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    background: rgba(245, 245, 245, 0.88);
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.35s var(--ease-out-smooth),
        visibility 0.35s var(--ease-out-smooth);
}

.step-2-image-box.step-2-image-box--processing .step-2-image-processing {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .step-2-image-processing {
        transition: none;
    }
}

.step-2-image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none; /* Hidden by default, shown when image is selected */
}

/* Show image when it has a src */
.step-2-image-box img[src]:not([src=""]) {
    display: block !important;
}

/* Corner brackets for Step 2 image box */
.step-2-image-box .corner-tr,
.step-2-image-box .corner-bl,
.step-2-image-box .corner-tl,
.step-2-image-box .corner-br {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 1;
}

.step-2-image-box .corner-tl {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.step-2-image-box .corner-tr {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

.step-2-image-box .corner-bl {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

.step-2-image-box .corner-br {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* Step 2 — analysis overlay (before design options appear) */
.step-2-prompt-region {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.step-2-prompt-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.step-2-analysis-overlay {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.35s var(--ease-out-smooth),
        visibility 0.35s var(--ease-out-smooth);
}

.step-2-content.step-2--analysis-active .step-2-analysis-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.step-2-analysis-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 22rem;
    text-align: center;
    pointer-events: none;
}

.step-2-analysis-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-top-color: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}

.step-2-analysis-status {
    margin: 0;
    padding: 0 8px;
    font-family: var(--font-site);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text);
    line-height: 1.45;
    min-height: 1.45em;
}

@media (prefers-reduced-motion: reduce) {
    .step-2-analysis-overlay {
        transition: none;
    }

    .step-2-analysis-spinner {
        animation: none;
        border-top-color: rgba(0, 0, 0, 0.35);
    }
}

/*
 * Analysis phase: hide both panel titles and the whole Options card — only a single loading surface.
 * (Previously only the option rows were hidden, so “CHOOSE DESIGN” / “OPTIONS” still read as ready UI.)
 */
.step-2-content.step-2--analysis-active .step-2-prompt-tab > .step-2-tab-heading:first-of-type {
    display: none;
}

.step-2-content.step-2--analysis-active #step-2-options-tab {
    display: none;
}

.step-2-content.step-2--analysis-active .step-2-input-section {
    min-height: min(200px, 42vh);
}

.step-2-content.step-2--analysis-active .step-2-input-wrapper {
    visibility: hidden;
    pointer-events: none;
}

.step-2-content.step-2--analysis-active .step-2-chosen-display--empty::before {
    content: none;
}

/*
 * Adjacent Step 2 (e.g. peek from Step 1): no design row or option list until Step 2 is current;
 * after that, options stay hidden until analysis completes (.step-2--analysis-active rules above).
 */
.step-slide[data-step='2']:not(.is-current-step) .step-2-prompt-tab .step-2-input-section,
.step-slide[data-step='2']:not(.is-current-step) .step-2-options-tab .step-2-options {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Step 2 — two panels: “Choose design” (prompt) vs “Options” (list) */
.step-2-prompt-tab,
.step-2-options-tab {
    width: 520px;
    flex-shrink: 0;
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    background: var(--color-white);
    overflow: hidden;
    box-shadow: var(--photo-emboss-shadow);
}

/* Analysis overlay sits only over the input row (not CHOOSE DESIGN header, not Options tab) */
.step-2-prompt-tab {
    position: relative;
}

.step-2-tab-heading {
    margin: 0;
    padding: 10px 14px 9px;
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--panel-border);
    background: var(--color-surface-low);
}

/* Options panel: heading doubles as expand/collapse control (vv chevrons = expand when collapsed) */
button.step-2-tab-heading.step-2-options-tab__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--panel-border);
    font: inherit;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-surface-low);
    transition: background-color var(--duration-interact) var(--ease-standard);
}

.step-2-options-tab__chevrons {
    flex-shrink: 0;
    color: rgba(0, 0, 0, 0.42);
    transform: rotate(180deg);
    transition: transform 0.22s var(--ease-standard);
}

.step-2-options-tab--collapsed .step-2-options-tab__toggle .step-2-options-tab__chevrons {
    transform: rotate(0deg);
}

.step-2-options-tab__title-text {
    flex: 1;
    min-width: 0;
}

button.step-2-tab-heading.step-2-options-tab__toggle:hover {
    background: #ebebeb;
}

button.step-2-tab-heading.step-2-options-tab__toggle:hover .step-2-options-tab__chevrons {
    color: rgba(0, 0, 0, 0.55);
}

button.step-2-tab-heading.step-2-options-tab__toggle:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: -2px;
    position: relative;
    z-index: 1;
}

/* Step 2 Input Section — hosts analysis overlay (positioned) + input row */
.step-2-input-section {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.step-2-prompt-tab .step-2-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    min-height: 48px;
}

/* Read-only summary of the selection (typing only happens in browser chrome, not here) */
.step-2-chosen-display {
    flex: 1;
    min-height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: var(--color-text);
    font-family: inherit;
    background: var(--color-white);
    user-select: none;
    cursor: default;
    box-sizing: border-box;
}

.step-2-chosen-display--empty {
    color: var(--color-text-muted);
}

.step-2-chosen-display--empty::before {
    content: attr(data-empty-label);
}

.step-2-chosen-display:not(.step-2-chosen-display--empty)::before {
    content: none;
}

/* Choose-design control: 75% of prior 40px (25% smaller than nav-matched size) */
.step-2-arrow-button {
    width: 30px;
    height: 30px;
    background: var(--color-white);
    border: 1px solid var(--color-border-stroke);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-shrink: 0;
}

.step-2-prompt-tab .step-2-arrow-button {
    margin: 3px 8px 3px 6px;
    border: 1px solid var(--color-border-stroke);
}

.step-2-arrow-button .arrow-right-small {
    width: 14px;
    height: 14px;
}

.step-slide.is-current-step .step-2-arrow-button {
    animation: grabber-border-pulse 1.65s ease-in-out infinite;
}

/* After a design is chosen: match completed nav ring weight (1px); down-arrow → checkmark */
#step-slider.design-selected .step-slide .step-2-arrow-button {
    animation: none;
    border-width: 1px;
    border-color: var(--color-black);
}

#step-slider.design-selected .step-slide .step-2-arrow-button:hover {
    border-color: var(--color-black);
    background: linear-gradient(160deg, #fafafa 0%, #f0f0f0 55%, #f6f6f6 100%);
}

#step-slider.design-selected .step-slide .step-2-arrow-button:active {
    border-color: var(--color-black);
}

.step-2-cta-icons {
    position: relative;
    width: clamp(14px, 2.25vw, 17px);
    height: clamp(14px, 2.25vw, 17px);
    display: grid;
    place-items: center;
}

.step-2-cta-icons > * {
    grid-area: 1 / 1;
}

.step-2-cta-icons__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 0.22s var(--ease-standard),
        transform 0.22s var(--ease-standard);
}

/* Same ✓ character / mono / color as nav; glyph scaled with 30px button */
.step-2-cta-icons__tick {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: clamp(11px, 2.2vw, 14px);
    line-height: 1;
    color: var(--nav-step-completed-tick);
    opacity: 0;
    transform: scale(0.72);
    transition:
        opacity 0.22s var(--ease-standard),
        transform 0.22s var(--ease-standard);
}

.step-2-cta-icons__tick::before {
    content: '\2713';
}

#step-slider.design-selected .step-slide .step-2-arrow-button .step-2-cta-icons__arrow {
    opacity: 0;
    transform: scale(0.82);
    pointer-events: none;
}

#step-slider.design-selected .step-slide .step-2-arrow-button .step-2-cta-icons__tick {
    opacity: 1;
    transform: scale(1);
}

.step-2-arrow-button:hover {
    background: linear-gradient(160deg, #ffffff 0%, #ececec 55%, #f2f2f2 100%);
    border-color: rgba(0, 0, 0, 0.22);
}

.step-2-arrow-button:active {
    background: linear-gradient(160deg, #e8e8e8 0%, #f5f5f5 100%);
}

.arrow-right-small {
    width: 22px;
    height: 22px;
    background-image: url('Assets/arrow.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    display: block;
    transform: rotate(90deg);
    opacity: 0.75;
    filter: grayscale(1) contrast(1.1);
    transition: transform var(--duration-interact) var(--ease-standard),
        opacity var(--duration-interact) var(--ease-standard);
}

.arrow-right-small::after {
    content: none;
}

/* Step 2 options — rows inside the options tab */
.step-2-options-tab .step-2-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}

/* Must beat rule above (same 2-class specificity was losing in cascade) */
.step-2-options-tab.step-2-options-tab--collapsed .step-2-options {
    display: none;
}

.step-2-option {
    width: 100%;
    height: 48px;
    background: var(--color-white);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #000;
    cursor: pointer;
    box-shadow: var(--photo-emboss-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        background-color var(--duration-interact) var(--ease-standard),
        border-color var(--duration-interact) var(--ease-standard),
        box-shadow var(--duration-interact) var(--ease-standard),
        transform var(--duration-interact) var(--ease-standard),
        opacity var(--duration-interact) var(--ease-standard),
        filter var(--duration-interact) var(--ease-standard);
    font-family: inherit;
}

.step-2-options-tab .step-2-option {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.step-2-options-tab .step-2-option + .step-2-option {
    border-top: 1px solid var(--panel-border);
}

.step-2-options-tab .step-2-option:hover {
    background: #efefef;
    transform: none;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.step-2-options-tab .step-2-option:active {
    transform: none;
    opacity: 1;
    box-shadow: none;
    background: #e5e5e5;
}

.step-2-options-tab .step-2-option.selected {
    background: #d8d8d8;
    border-color: transparent;
    box-shadow: none;
}

.step-2-options-tab .step-2-option.selected:hover {
    background: #d0d0d0;
}

@media (max-width: 768px) {
    .step-slide {
        padding: 20px;
    }
    
    .upload-box {
        width: min(90%, 100%);
        max-width: 100%;
        height: auto;
        min-height: 200px;
        max-height: min(250px, 42vh, 42dvh);
        aspect-ratio: 1;
        --upload-corner-arm: 26px;
        --upload-corner-stroke: 2.5px;
    }
    
    .bottom-images {
        gap: 10px;
    }

    .step-slide[data-step="1"] .canvas-content {
        padding-top: clamp(1.5rem, 5vh, 2.75rem);
    }
    
    .image-thumbnail img {
        width: 100px;
        height: 70px;
    }
    
    .step-header {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .step-slider.no-transition .canvas-slider .progress-line,
    .step-slider.no-transition .canvas-slider .progress-circle,
    .step-slider.no-transition .step-slide {
        transition: none !important;
    }

    .loading-spinner {
        animation: none;
        border-top-color: rgba(0, 0, 0, 0.45);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .home-intro,
    #loading-screen,
    .home-intro__inner,
    .top-logo,
    .upload-box,
    .upload-box.has-image,
    .loading-screen__group,
    .model-load-notice,
    .canvas-slider .progress-circle,
    .step-slide[data-step='1'],
    .step-slide[data-step='2'],
    .step-slide[data-step='3'],
    .step-slide[data-step='4'],
    .step-2-prompt-tab,
    .step-2-options-tab,
    .step-2-chosen-display,
    .step-2-option,
    .step-2-arrow-button,
    .step-2-image-box,
    .step-2-image-processing,
    .step-4-guide,
    .thumbnail-badge,
    .nav-step.active .step-circle {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .home-intro {
        background: var(--color-surface);
    }

    .home-intro__inner,
    .loading-screen__group {
        background: rgba(255, 255, 255, 0.96);
    }

    .step-slide[data-step='1'] {
        background: rgba(255, 255, 255, 0.98);
    }

    .step-slide[data-step='2'],
    .step-slide[data-step='3'],
    .step-slide[data-step='4'] {
        background: rgba(250, 250, 250, 0.98);
    }
}

@supports (-webkit-touch-callout: none) and (orientation: landscape) {
  html, body {
    height: -webkit-fill-available;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  body,
  #container,
  .slider-container,
  .step-slider,
  .step-slide {
    overflow: visible;
  }

  .canvas-content:not(.step-3-content) {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .slider-container {
    max-width: 100%;
    overflow-x: hidden;
  }

  .step-slide {
    max-height: -webkit-fill-available;
  }
}

@media (max-width: 1180px) and (orientation: landscape) {
  .step-slider {
    transform: none;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) and (orientation: landscape) {
  #container {
    transform: scale(0.88);
    transform-origin: top left;
  }
}

/* Info route: global body is overflow:hidden for WebGL; restore normal document scroll here */
html:has(body.info-page) {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch;
}

body.info-page {
    overflow-x: hidden;
    overflow-y: visible !important;
    cursor: default !important;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
}

body.info-page:active {
    cursor: default !important;
}