.short-version-page {
      --sv-button-bg: #1A1A1A;
      --sv-button-bg-hover: #333333;
      --sv-button-text: #FFFFFF;
      --sv-focus: #1A1A1A;
      --sv-panel-bg: #FFFFFF;
      --sv-panel-border: var(--color-divider);
      --sv-panel-active-border: #1A1A1A;
      --sv-panel-active-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      --sv-card-bg: #FAF7F1;
      --sv-card-border-hover: #1A1A1A;
      --sv-card-icon: #1A1A1A;
      --sv-pitch-bg: #FAF7F1;
      --sv-pitch-border: #1A1A1A;
    }

    @media (prefers-color-scheme: dark) {
      .short-version-page {
        --sv-button-bg: var(--color-surface-inverse);
        --sv-button-bg-hover: #CEC6BC;
        --sv-button-text: var(--color-text-inverse);
        --sv-focus: var(--focus-ring-color);
        --sv-panel-bg: var(--color-surface);
        --sv-panel-border: var(--color-divider-light);
        --sv-panel-active-border: rgba(232, 225, 216, 0.44);
        --sv-panel-active-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
        --sv-card-bg: #221E19;
        --sv-card-border-hover: rgba(232, 225, 216, 0.42);
        --sv-card-icon: var(--color-text);
        --sv-pitch-bg: #221E19;
        --sv-pitch-border: rgba(232, 225, 216, 0.42);
      }
    }

    /* Minimal focused-mode bar: just a floating close, no masthead or rule */
    .sv-topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--color-bg);
    }

    .sv-topbar-inner {
      width: min(100% - 32px, 1280px);
      margin: 0 auto;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .sv-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      background: none;
      border: none;
      padding: 8px;
      border-radius: 6px;
      color: var(--color-text);
      cursor: pointer;
    }

    .sv-close:hover {
      color: var(--color-accent);
    }

    .sv-close:focus-visible {
      outline: 2px solid var(--sv-focus);
      outline-offset: 2px;
    }

    /* Hide the tool's close X when embedded in the homepage overlay.
       The overlay provides its own close control. */
    body.short-version-embedded .sv-close {
      display: none;
    }

    .short-version-page .work-article {
      max-width: 640px;
      margin: 0 auto;
      padding: 24px 24px 0;
      text-align: center;
    }

    .sv-headline {
      font-family: var(--font-serif);
      font-size: clamp(34px, 7vw, 46px);
      line-height: 1.1;
      font-weight: 500;
      margin: 0 0 12px;
      color: var(--color-text);
    }

    .sv-intro {
      font-family: var(--font-serif);
      font-size: 19px;
      line-height: 1.45;
      color: var(--color-text);
      margin: 0;
    }

    /* Full-width tool shell: the machine breaks out to viewport width */
    .sv-tool-shell {
      width: min(100vw - 32px, 1280px);
      margin: 36px auto 64px;
      padding: 0 16px;
    }

    .sv-form {
      margin: 0;
    }

    .sv-begin-row {
      display: flex;
      justify-content: center;
    }

    /* Make the hidden attribute win over the flex/display rules below */
    .sv-track[hidden],
    .sv-panel[hidden],
    .sv-begin-row[hidden],
    .sv-output-row[hidden],
    .sv-controls-row[hidden] {
      display: none;
    }

    .sv-button {
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 15px;
      letter-spacing: 0.3px;
      background: var(--sv-button-bg);
      color: var(--sv-button-text);
      border: none;
      padding: 13px 22px;
      min-height: 46px;
      cursor: pointer;
      align-self: flex-start;
      border-radius: 4px;
    }

    .sv-button:hover:not(:disabled) {
      background: var(--sv-button-bg-hover);
    }

    .sv-button:focus-visible {
      outline: 2px solid var(--sv-focus);
      outline-offset: 3px;
    }

    .sv-button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    /* Horizontal stepper track; centered as a group, left-aligned only on overflow */
    .sv-track {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: safe center;
      gap: 16px;
      overflow-x: auto;
      padding: 0 24px 8px 24px;
    }

    .sv-panel {
      flex: 0 0 auto;
      width: 440px;
      min-width: 0;
      margin: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 22px;
      background: var(--sv-panel-bg);
      border: 1px solid var(--sv-panel-border);
      border-radius: 16px;
      transition: width 200ms ease, border-color 160ms ease, box-shadow 160ms ease;
      animation: svPanelIn 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    @keyframes svPanelIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Active angle panel: wide enough for clean 3-column card grid */
    .sv-panel-theme {
      width: 540px;
    }

    .sv-panel-voice {
      width: 450px;
    }

    /* Action panel (OUTPUT): hugs the label + Generate button */
    .sv-panel-action {
      width: auto;
    }

    /* Active = present through a darker neutral outline and a soft lift, not red */
    .sv-panel.is-active {
      border-color: var(--sv-panel-active-border);
      box-shadow: var(--sv-panel-active-shadow);
    }

    /* Completed panel collapses to a small, quiet receipt */
    .sv-panel.is-summary {
      width: 200px;
      gap: 10px;
      padding: 18px;
      border-color: var(--color-divider-light);
      box-shadow: none;
    }

    .sv-panel.is-summary .sv-panel-label,
    .sv-panel.is-summary .sv-card-grid {
      display: none;
    }

    .sv-panel-label {
      font-family: var(--font-kicker);
      text-transform: uppercase;
      font-size: 14px;
      letter-spacing: 0.5px;
      color: var(--color-text);
      margin: 0;
      padding: 0;
    }

    .sv-card-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .sv-panel-theme .sv-card-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    /* Center the lone 7th angle card on its own last row */
    .sv-panel-theme .sv-card-grid > .sv-card:last-child {
      grid-column: 1 / -1;
      justify-self: center;
      width: calc((100% - 24px) / 3);
    }

    .sv-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 8px;
      padding: 14px 12px;
      min-height: 96px;
      background: var(--sv-card-bg);
      border: 1px solid var(--sv-panel-border);
      border-radius: 12px;
      cursor: pointer;
      transition: border-color 140ms ease;
    }

    .sv-card:hover {
      border-color: var(--sv-card-border-hover);
    }

    .sv-card-input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      margin: 0;
      pointer-events: none;
    }

    .sv-card-icon {
      color: var(--sv-card-icon);
      line-height: 0;
    }

    .sv-card-icon svg,
    .sv-card-icon img {
      display: block;
    }

    .sv-card-icon img {
      object-fit: contain;
    }

    .sv-panel-theme .sv-card-icon img {
      width: 40px;
      height: 40px;
    }

    /* Selectively adjust angle icon scale for visual balance (% from base 40px) */
    .sv-panel-theme .sv-card:nth-child(3) .sv-card-icon img {
      width: 38px;
      height: 38px;
    }
    .sv-panel-theme .sv-card:nth-child(4) .sv-card-icon img {
      width: 43px;
      height: 43px;
    }
    .sv-panel-theme .sv-card:nth-child(5) .sv-card-icon img {
      width: 58px;
      height: 58px;
    }
    .sv-panel-theme .sv-card:nth-child(6) .sv-card-icon img {
      width: 43px;
      height: 43px;
    }
    .sv-panel-theme .sv-card:nth-child(7) .sv-card-icon img {
      width: 42px;
      height: 42px;
    }

    .sv-panel-voice .sv-card-icon img {
      width: 96px;
      height: 96px;
    }

    .sv-card-text {
      font-family: var(--font-sans);
      font-size: 14px;
      line-height: 1.3;
      color: var(--color-text);
    }

    /* Selected = soft black border + a small red dot marker, nothing loud */
    .sv-card.is-selected,
    .sv-card:has(.sv-card-input:checked) {
      border-color: var(--sv-panel-active-border);
    }

    .sv-card.is-selected::after,
    .sv-card:has(.sv-card-input:checked)::after {
      content: "";
      position: absolute;
      top: 8px;
      right: 8px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--color-accent);
    }

    /* Focus ring is a full soft-black outline, distinct from the selected dot */
    .sv-card:has(.sv-card-input:focus-visible) {
      outline: 2px solid var(--sv-focus);
      outline-offset: 3px;
    }

    /* Quiet text receipt shown once a panel is completed */
    /* The pitch bubble keeps its title-case label, not the machine's all-caps */
    .sv-bubble-label {
      text-transform: none;
    }

    .sv-summary {
      display: none;
    }

    .sv-panel.is-summary .sv-summary {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .sv-summary-label {
      font-family: var(--font-kicker);
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.5px;
      color: var(--color-text-secondary);
      margin: 0;
    }

    .sv-summary-value {
      font-family: var(--font-serif);
      font-size: 18px;
      line-height: 1.3;
      color: var(--color-text);
      margin: 0;
    }

    /* Loading + error status, shown below the machine row, outside all panels */
    .sv-status {
      max-width: 600px;
      margin: 16px auto 0;
      font-family: var(--font-sans);
      font-size: 14px;
    }

    .sv-status.is-error {
      color: var(--color-text);
      border-left: 3px solid var(--color-accent);
      padding-left: 12px;
    }

    .sv-status.is-loading {
      color: var(--color-text-secondary);
    }

    /* Fourth bubble: the generated pitch, below and centered under the machine */
    .sv-output-row {
      display: flex;
      justify-content: center;
      margin-top: 16px;
    }

    .sv-pitch-bubble {
      width: min(100%, 820px);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 26px 28px;
      background: var(--sv-pitch-bg);
      border: 1px solid var(--sv-pitch-border);
      border-radius: 16px;
      animation: svPanelIn 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    .sv-pitch-kicker {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 16px;
      line-height: 1.6;
      color: var(--color-text);
      margin: 0;
    }

    .sv-pitch-quote {
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.6;
      color: var(--color-text);
      white-space: pre-wrap;
      margin: 0;
    }

    .sv-pitch {
      max-width: 960px;
    }

    .sv-pitch-attribution {
      display: none;
    }

    /* End-state controls: quiet Start over | Close, outside all panels */
    .sv-controls-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      margin-top: 20px;
    }

    .sv-endbtn {
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--color-text-secondary);
      background: none;
      border: none;
      padding: 4px 8px;
      cursor: pointer;
      text-decoration: underline;
    }

    .sv-endbtn:hover {
      color: var(--color-text);
    }

    .sv-endbtn:focus-visible {
      outline: 2px solid var(--sv-focus);
      outline-offset: 2px;
    }

    .sv-controls-sep {
      color: var(--color-divider);
      font-size: 13px;
    }

    @media (prefers-reduced-motion: reduce) {
      .sv-panel,
      .sv-pitch-bubble {
        animation: none;
        transition: none;
      }

      .sv-card {
        transition: none;
      }
    }

    @media (max-width: 768px) {
      .sv-track {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        overflow-x: visible;
      }

      .sv-panel,
      .sv-panel-theme,
      .sv-panel-voice,
      .sv-panel-action,
      .sv-panel.is-summary {
        width: 100%;
      }

      .sv-panel-theme .sv-card-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .sv-panel-theme .sv-card-grid > .sv-card:last-child {
        grid-column: auto;
        justify-self: auto;
        width: auto;
      }
    }

    @media (max-width: 600px) {
      .sv-button {
        width: 100%;
        align-self: stretch;
      }

      .sv-pitch-kicker,
      .sv-pitch-quote {
        font-size: 15px;
        line-height: 1.55;
      }
    }

    /* On desktop, give the intro room so the dek stays on one line.
       Below this width it wraps naturally. */
    @media (min-width: 860px) {
      .short-version-page .work-article {
        max-width: 860px;
      }

      .sv-intro {
        white-space: nowrap;
      }
    }