.header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 2px solid var(--line);
    padding-bottom: 14px;
    margin-bottom: 28px;
  }
  .header h1 {
    font-family: var(--hand-loose);
    font-size: 32px;
    margin: 0;
    letter-spacing: 1px;
  }
  .header h1 .sub {
    font-family: var(--hand-script);
    font-weight: 400;
    color: var(--ink-faint);
    font-size: 22px;
    margin-left: 10px;
  }
  .header .meta {
    font-family: var(--hand);
    color: var(--ink-faint);
    font-size: 16px;
  }

  /* Step tabs */
  .step-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1.5px dashed var(--ink-soft);
  }
  .step-tab {
    flex: 1;
    padding: 14px 16px 12px;
    background: none;
    border: none;
    border-right: 1.5px dashed var(--ink-soft);
    font-family: var(--hand);
    font-size: 18px;
    color: var(--ink-soft);
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: background 120ms;
  }
  .step-tab:last-child { border-right: none; }
  .step-tab:hover { background: rgba(0,0,0,0.03); }
  .step-tab.active {
    color: var(--ink);
    background: rgba(0,0,0,0.04);
  }
  .step-tab.active::after {
    content: '';
    position: absolute;
    left: 8px; right: 8px; bottom: -2px;
    height: 3px;
    background: var(--ink);
    border-radius: 2px;
  }
  .step-tab .num {
    font-family: var(--hand-loose);
    font-size: 14px;
    color: var(--ink-faint);
    display: block;
    letter-spacing: 1px;
  }
  .step-tab.active .num { color: var(--ink); }
  .step-tab .ttl { font-size: 18px; }

  /* Two-pane layout */
  .pane {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 28px;
    min-height: 620px;
  }

  /* LEFT: bottle frame */
  .bottle-frame {
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--paper-2);
    padding: 24px 20px 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.08);
  }
  .bottle-frame::before {
    content: 'always visible →';
    position: absolute;
    top: -14px; left: 18px;
    background: var(--paper);
    padding: 0 8px;
    font-family: var(--hand-script);
    font-size: 18px;
    color: var(--ink-faint);
  }
  .bottle-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .bottle-summary {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1.5px dashed var(--ink-soft);
    font-family: var(--hand);
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .bottle-summary .row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
  .bottle-summary .row .k { color: var(--ink-faint); }
  .bottle-summary .row .v { color: var(--ink); font-weight: 500; max-width: 60%; text-align: right; }
  .bottle-summary .row .v.empty { color: var(--ink-faint); font-style: italic; }

  /* The bottle SVG container */
  .bottle-wrap { position: relative; width: 220px; height: 480px; transition: width 0.3s ease, height 0.3s ease; }
  .bottle-wrap.zoomed { width: 340px; height: 720px; }

  /* RIGHT: step panel */
  .step-panel {
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    padding: 28px 32px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.08);
    position: relative;
  }
  .step-panel::before {
    content: 'changes per step →';
    position: absolute;
    top: -14px; left: 18px;
    background: var(--paper);
    padding: 0 8px;
    font-family: var(--hand-script);
    font-size: 18px;
    color: var(--ink-faint);
  }
  .step-title {
    font-family: var(--hand-loose);
    font-size: 28px;
    margin: 0 0 6px;
  }
  .step-sub {
    font-family: var(--hand-script);
    font-size: 20px;
    color: var(--ink-faint);
    margin-bottom: 22px;
  }

  /* Generic option card */
  .opt-grid {
    display: grid;
    gap: 14px;
  }
  .opt-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .opt-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .opt-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .opt-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

  .opt-card {
    border: 2px solid var(--line);
    border-radius: 8px;
    padding: 18px 16px;
    background: var(--paper);
    cursor: pointer;
    transition: transform 120ms, box-shadow 120ms;
    position: relative;
    font-family: var(--hand);
  }
  .opt-card:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 rgba(0,0,0,0.1); }
  .opt-card.selected {
    background: var(--ink);
    color: var(--paper);
    box-shadow: 4px 4px 0 var(--accent-amber);
  }
  .opt-card.selected .desc { color: rgba(255,255,255,0.7); }
  .opt-card .icon-box {
    width: 56px; height: 56px;
    border: 1.5px dashed var(--ink-soft);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    font-family: var(--hand-script);
    font-size: 14px;
    color: var(--ink-faint);
  }
  .opt-card.selected .icon-box { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.6); }
  .opt-card .ttl { font-size: 18px; font-weight: 500; }
  .opt-card .desc { font-size: 14px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
  .opt-card .accent-tag {
    position: absolute; top: -10px; right: 10px;
    background: var(--paper);
    padding: 0 6px;
    font-family: var(--hand-script);
    font-size: 16px;
  }
  .opt-card.tag-red .accent-tag { color: var(--accent-red); }
  .opt-card.tag-blue .accent-tag { color: var(--accent-blue); }
  .opt-card.tag-pink .accent-tag { color: var(--accent-pink); }

  /* Step 1 path cards */
  .path-card {
    padding: 24px 20px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .path-card .top-icon {
    width: 64px; height: 64px;
    border: 2px solid var(--line);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
  }
  .path-card.selected .top-icon { border-color: var(--accent-amber); }
  .path-card .ttl { font-family: var(--hand-loose); font-size: 22px; }
  .path-card .desc { font-size: 15px; color: var(--ink-soft); margin-top: 6px; }
  .path-card.selected .desc { color: rgba(255,255,255,0.75); }
  .path-card .badge {
    align-self: flex-start;
    margin-top: 12px;
    border: 1.5px dashed currentColor;
    border-radius: 999px;
    padding: 2px 10px;
    font-family: var(--hand-script);
    font-size: 16px;
  }
  .path-card.path-gift { border-color: var(--accent-red); }
  .path-card.path-event { border-color: var(--accent-blue); }
  .path-card.path-self { border-color: var(--accent-pink); }
  .path-card.path-gift .top-icon { color: var(--accent-red); border-color: var(--accent-red); }
  .path-card.path-event .top-icon { color: var(--accent-blue); border-color: var(--accent-blue); }
  .path-card.path-self .top-icon { color: var(--accent-pink); border-color: var(--accent-pink); }

  /* Cover flow row */
  .cover-flow {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 24px 32px 28px;
    scroll-snap-type: x mandatory;
    margin: 0 -32px;
    max-width: calc(100% + 64px);
    box-sizing: border-box;
  }
  .cover-flow::after {
    content: '';
    flex: 0 0 8px;
  }
  .cover-flow::-webkit-scrollbar { height: 6px; }
  .cover-flow::-webkit-scrollbar-thumb { background: var(--ink-soft); border-radius: 3px; }
  .cover {
    flex: 0 0 180px;
    height: 240px;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--paper-2);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    scroll-snap-align: center;
    transition: transform 200ms, box-shadow 200ms;
    position: relative;
  }
  .cover:hover { transform: translateY(-4px); }
  .cover.selected {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 6px 6px 0 var(--accent-amber);
    background: var(--ink);
    color: var(--paper);
  }
  .cover .num { font-family: var(--hand-script); font-size: 18px; color: var(--ink-faint); }
  .cover.selected .num { color: rgba(255,255,255,0.6); }
  .cover .ill {
    flex: 1;
    border: 1.5px dashed var(--ink-soft);
    border-radius: 6px;
    margin: 8px 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hand-script);
    font-size: 14px;
    color: var(--ink-faint);
    text-align: center;
  }
  .cover.selected .ill { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.55); }
  .cover .lbl { font-family: var(--hand-loose); font-size: 18px; }

  /* Sound options row */
  .sound-input-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 20px; }
  .sound-card { padding: 18px 14px; text-align: center; }
  .sound-card .ic { font-family: var(--hand-script); font-size: 14px; color: var(--ink-faint); }
  .waveform {
    margin: 18px 0;
    height: 72px;
    border: 1.5px dashed var(--ink-soft);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 14px;
    overflow: hidden;
  }
  .waveform .bar {
    flex: 1;
    background: var(--ink);
    border-radius: 1px;
    opacity: 0.55;
  }

  .exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .exp-card { padding: 18px 16px; min-height: 170px; display:flex; flex-direction:column; }
  .exp-card .hdr { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom: 8px; gap: 8px; }
  .exp-card .hdr .ttl { font-family: var(--hand-loose); font-size: 20px; }
  .exp-card .hdr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .exp-card .hdr .hrs { font-family: var(--hand-script); font-size: 18px; color: var(--ink-faint); }
  .exp-card .price-tag {
    font-family: var(--hand-loose);
    font-size: 16px;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    padding: 2px 8px;
    transform: rotate(-1.5deg);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.1);
  }
  .exp-card .price-tag .price-delta { font-family: var(--hand-script); font-size: 13px; color: var(--ink-faint); }
  .exp-card.selected .hdr .hrs { color: rgba(255,255,255,0.7); }
  .exp-card.selected .price-tag { background: #f6f3ec; color: #1a1a1a; border-color: #f6f3ec; }
  .exp-card.selected .price-tag .price-delta { color: #555; }
  .exp-card ul { margin: 4px 0 0; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
  .exp-card.selected ul { color: rgba(255,255,255,0.75); }

  /* Step 5 - label design */
  .label-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
  .label-tab {
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 4px 14px;
    font-family: var(--hand);
    font-size: 16px;
    background: none;
    cursor: pointer;
  }
  .label-tab.active { background: var(--ink); color: var(--paper); }

  .label-design-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
  .label-thumb {
    aspect-ratio: 3/4;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    background: var(--paper-2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hand-script);
    font-size: 14px;
    color: var(--ink-faint);
    cursor: pointer;
    position: relative;
  }
  .label-thumb.selected {
    border-width: 2.5px;
    border-color: var(--accent-amber);
    box-shadow: 3px 3px 0 var(--accent-amber);
  }
  .label-thumb .check {
    position: absolute; top: 4px; right: 6px;
    font-family: var(--hand-script); font-size: 16px;
    color: var(--accent-amber);
    display: none;
  }
  .label-thumb.selected .check { display: block; }

  .form-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .field { display: flex; flex-direction: column; gap: 4px; }
  .field label { font-family: var(--hand-script); font-size: 17px; color: var(--ink-soft); }
  .field input, .field textarea {
    border: none;
    border-bottom: 1.5px dashed var(--ink-soft);
    background: transparent;
    font-family: var(--hand);
    font-size: 17px;
    padding: 6px 4px;
    color: var(--ink);
    outline: none;
    resize: none;
  }
  .field input:focus, .field textarea:focus {
    border-bottom-color: var(--ink);
    border-bottom-style: solid;
  }
  .field textarea { min-height: 60px; }

  .skip-note {
    font-family: var(--hand-script);
    font-size: 16px;
    color: var(--ink-faint);
    border-left: 2px dashed var(--ink-soft);
    padding: 6px 12px;
    margin: 14px 0 0;
    line-height: 1.4;
  }

  /* Footer nav */
  .step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1.5px dashed var(--ink-soft);
  }
  .nav-btn {
    border: 2px solid var(--line);
    background: var(--paper);
    padding: 8px 22px;
    font-family: var(--hand);
    font-size: 17px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 120ms, box-shadow 120ms;
  }
  .nav-btn:hover { transform: translate(-1px,-1px); box-shadow: 2px 2px 0 rgba(0,0,0,0.15); }
  .nav-btn.primary { background: var(--ink); color: var(--paper); }
  .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .nav-progress {
    display: flex; gap: 6px; align-items: center;
    font-family: var(--hand-script);
    font-size: 17px;
    color: var(--ink-faint);
  }
  .nav-progress .dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--paper);
  }
  .nav-progress .dot.done { background: var(--ink); }
  .nav-progress .dot.current { background: var(--accent-amber); border-color: var(--accent-amber); }

  /* Annotations - sketchy callouts */
  .annot {
    position: absolute;
    font-family: var(--hand-script);
    font-size: 17px;
    color: var(--accent-red);
    pointer-events: none;
  }
  .annot::before {
    content: '';
    position: absolute;
    border-top: 1.5px dashed currentColor;
  }

  /* Notes block at bottom */
  .notes {
    margin-top: 36px;
    border-top: 2px dashed var(--ink-soft);
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    font-family: var(--hand);
    color: var(--ink-soft);
    font-size: 15px;
  }
  .notes h4 {
    font-family: var(--hand-loose);
    color: var(--ink);
    margin: 0 0 6px;
    font-size: 17px;
  }
  .notes p { margin: 0 0 8px; line-height: 1.45; }

  /* Variant badges */
  .variant-pill {
    display: inline-block;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    padding: 1px 10px;
    font-family: var(--hand-script);
    font-size: 15px;
    margin-right: 6px;
  }
  .v-red { color: var(--accent-red); }
  .v-blue { color: var(--accent-blue); }
  .v-pink { color: var(--accent-pink); }