:root {
      --bg:            #141312;
      --surface-low:   #1d1b1a;
      --surface:       #211f1e;
      --surface-high:  #2b2a28;
      --on-surface:    #e6e1df;
      --on-muted:      #d7c2b7;
      --outline:       #a08d83;
      --outline-dim:   #52443b;
      --primary:       #ffb688;
      --primary-text:  #512400;
      --error:         #ffb4ab;
      --success:       #a8d5b5;
      --info:          #93c5fd;
      --radius:        4px;
      --radius-lg:     8px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--bg);
      color: var(--on-surface);
      font-family: "Hanken Grotesk", system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.025;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)'/%3E%3C/svg%3E");
    }

    .page {
      position: relative;
      z-index: 1;
      max-width: 600px;
      margin: 0 auto;
      padding: 72px 24px 96px;
    }

    .kicker {
      font-family: "Geist", monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--primary);
      display: block;
      margin-bottom: 16px;
    }

    h1 {
      font-family: "Source Serif 4", Georgia, serif;
      font-size: 36px;
      font-weight: 500;
      line-height: 1.3;
      color: var(--on-surface);
      margin-bottom: 10px;
    }

    .subtitle {
      font-size: 15px;
      color: var(--on-muted);
      margin-bottom: 48px;
    }

    .form-section {
      background: var(--surface);
      border: 1px solid var(--outline-dim);
      border-radius: var(--radius-lg);
      padding: 28px;
    }

    .field-label {
      font-family: "Geist", monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--outline);
      display: block;
      margin-bottom: 10px;
    }

    .field-input {
      width: 100%;
      padding: 11px 14px;
      background: var(--surface-low);
      border: 1px solid var(--outline-dim);
      border-radius: var(--radius);
      color: var(--on-surface);
      font-family: "Hanken Grotesk", system-ui, sans-serif;
      font-size: 15px;
      outline: none;
      transition: border-color 0.15s;
    }

    .field-input::placeholder { color: var(--outline-dim); }
    .field-input:focus { border-color: var(--outline); }

    .btn-primary {
      display: block;
      width: 100%;
      padding: 13px 24px;
      background: var(--primary);
      color: var(--primary-text);
      border: none;
      border-radius: var(--radius);
      font-family: "Hanken Grotesk", system-ui, sans-serif;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.15s;
      margin-top: 20px;
      letter-spacing: 0.01em;
    }

    .btn-primary:hover:not(:disabled) { opacity: 0.88; }
    .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

    .status {
      margin-top: 16px;
      padding: 12px 16px;
      border-radius: var(--radius);
      font-family: "Geist", monospace;
      font-size: 12px;
      letter-spacing: 0.02em;
      display: none;
    }

    .status.info    { background: rgba(147,197,253,0.08); color: var(--info);    border: 1px solid rgba(147,197,253,0.2); }
    .status.success { background: rgba(168,213,181,0.08); color: var(--success); border: 1px solid rgba(168,213,181,0.2); }
    .status.error   { background: rgba(255,180,171,0.08); color: var(--error);   border: 1px solid rgba(255,180,171,0.2); }

    .workflow-status {
      margin-top: 20px;
      padding: 20px;
      background: var(--surface);
      border: 1px solid var(--outline-dim);
      border-radius: var(--radius-lg);
    }

    .workflow-status-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 16px;
    }

    .workflow-status-title { color: var(--on-surface); font-size: 15px; font-weight: 600; }
    .workflow-status > .status { margin: 0 0 16px; }
    .workflow-status-meta {
      color: var(--outline);
      font-family: "Geist", monospace;
      font-size: 10px;
      overflow-wrap: anywhere;
      text-align: right;
    }

    .workflow-steps { list-style: none; margin: 0; padding: 0; }
    .workflow-step {
      position: relative;
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 10px;
      min-height: 34px;
      color: var(--outline);
      font-size: 13px;
    }

    .workflow-step:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 6px;
      top: 15px;
      bottom: 1px;
      width: 1px;
      background: var(--outline-dim);
    }

    .workflow-marker {
      position: relative;
      z-index: 1;
      width: 13px;
      height: 13px;
      margin-top: 2px;
      border: 1px solid var(--outline-dim);
      border-radius: 50%;
      background: var(--surface);
    }

    .workflow-step.completed { color: var(--success); }
    .workflow-step.completed .workflow-marker { border-color: var(--success); background: var(--success); }
    .workflow-step.current { color: var(--info); font-weight: 600; }
    .workflow-step.current .workflow-marker { border-color: var(--info); box-shadow: 0 0 0 3px rgba(147,197,253,0.12); }
    .workflow-step.failed { color: var(--error); font-weight: 600; }
    .workflow-step.failed .workflow-marker { border-color: var(--error); background: var(--error); }
    .workflow-step-detail { display: block; margin-top: 2px; color: var(--outline); font-family: "Geist", monospace; font-size: 10px; font-weight: 400; }

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

    @media (max-width: 520px) {
      .workflow-status-header { flex-direction: column; gap: 6px; }
      .workflow-status-meta { text-align: left; }
    }

    .drop-zone {
      background: var(--surface-low);
      border: 1px solid var(--outline-dim);
      border-radius: var(--radius);
      padding: 24px;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }

    .drop-zone:hover { border-color: var(--outline); }
    .drop-zone.drag-over { border-color: var(--primary); background: rgba(255,182,136,0.04); }
    .drop-zone.loaded { border-color: var(--primary); }

    .drop-hint { font-size: 14px; color: var(--on-muted); }
    .drop-link { color: var(--primary); }
    .drop-meta { font-family: "Geist", monospace; font-size: 11px; color: var(--outline); letter-spacing: 0.05em; }
    .drop-meta.ok { color: var(--primary); }

    .hidden-input { display: none; }

    .upload-progress {
      display: none;
      margin-top: 18px;
    }

    .progress-header {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 8px;
      color: var(--outline);
      font-family: "Geist", monospace;
      font-size: 11px;
      letter-spacing: 0.05em;
    }

    .progress-track {
      width: 100%;
      height: 8px;
      overflow: hidden;
      background: var(--surface-low);
      border: 1px solid var(--outline-dim);
      border-radius: 999px;
    }

    .progress-bar {
      width: 0%;
      height: 100%;
      background: var(--primary);
      transition: width 0.12s ease;
    }

    .uploaded-file {
      margin-top: 18px;
      padding: 12px 14px;
      background: var(--surface-low);
      border: 1px solid var(--outline-dim);
      border-radius: var(--radius);
    }

    .uploaded-file-name {
      color: var(--on-surface);
      font-size: 14px;
      overflow-wrap: anywhere;
    }

    .uploaded-file-meta {
      margin-top: 2px;
      color: var(--outline);
      font-family: "Geist", monospace;
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    .audio-list {
      margin-top: 28px;
      display: grid;
      gap: 10px;
    }

    .audio-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 13px 14px;
      background: var(--surface-low);
      border: 1px solid var(--outline-dim);
      border-radius: var(--radius);
    }

    .audio-title {
      color: var(--on-surface);
      font-size: 14px;
      overflow-wrap: anywhere;
    }

    .audio-meta {
      margin-top: 2px;
      color: var(--outline);
      font-family: "Geist", monospace;
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    .audio-action {
      padding: 9px 12px;
      min-width: 112px;
      background: var(--primary);
      color: var(--primary-text);
      border: 0;
      border-radius: var(--radius);
      font-family: "Hanken Grotesk", system-ui, sans-serif;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .audio-action:disabled { opacity: 0.45; cursor: not-allowed; }
    .audio-action:hover:not(:disabled) { opacity: 0.88; }
    .audio-action:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

    .audio-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .audio-action-secondary {
      min-width: auto;
      background: transparent;
      color: var(--error);
      border: 1px solid var(--outline-dim);
    }

    .spinner {
      width: 16px;
      height: 16px;
      border: 2px solid var(--outline-dim);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      flex-shrink: 0;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .audio-row-select {
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
    }

    .audio-row-select input[type="radio"]:disabled + div {
      opacity: 0.6;
    }

    @media (max-width: 520px) {
      .audio-row { grid-template-columns: minmax(0, 1fr); }
      .audio-actions { justify-content: stretch; }
      .audio-action { width: 100%; }
    }

    [hidden] { display: none !important; }

    .notice {
      margin-bottom: 20px;
      padding: 14px 16px;
      color: var(--on-muted);
      background: rgba(255,182,136,0.05);
      border: 1px solid rgba(255,182,136,0.22);
      border-left: 3px solid var(--primary);
      border-radius: var(--radius);
      font-size: 13px;
    }

    .section-copy {
      margin-bottom: 16px;
      color: var(--on-muted);
      font-size: 13px;
    }

    .selection-summary {
      margin-bottom: 16px;
      color: var(--on-muted);
      font-size: 14px;
    }

    .field-group + .field-group { margin-top: 20px; }

    .field-select,
    .field-textarea {
      width: 100%;
      padding: 11px 14px;
      color: var(--on-surface);
      background: var(--surface-low);
      border: 1px solid var(--outline-dim);
      border-radius: var(--radius);
      font: 15px/1.5 "Hanken Grotesk", system-ui, sans-serif;
    }

    .field-select:focus-visible,
    .field-textarea:focus-visible,
    .field-input:focus-visible,
    .drop-zone:focus-visible,
    .btn-primary:focus-visible {
      outline: 2px solid var(--info);
      outline-offset: 2px;
    }

    .field-textarea {
      min-height: 180px;
      resize: vertical;
    }

    .compact-drop-zone { padding: 20px; }

    .optional {
      color: var(--outline);
      font-family: "Hanken Grotesk", system-ui, sans-serif;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
    }

    .result-link {
      display: inline-block;
      padding: 9px 12px;
      color: var(--primary-text);
      background: var(--primary);
      border-radius: var(--radius);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
    }

    .result-link:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }