:root {
      --ink: #111827;
      --muted: #4b5563;
      --line: #e5e7eb;
      --bg: #fafaf9;
      --accent: #c2410c;
      --accent-dark: #9a3412;
      --accent-soft: #fff4e8;
      /* legacy names used by the order modal and JS */
      --comic-yellow: #fff4e8;
      --comic-red: #c2410c;
      --comic-blue: #1d4ed8;
      --comic-paper: #ffffff;
      --comic-black: #111827;
      --comic-purple: #4b5563;
      --comic-green: #15803d;
      --font-heading: 'Inter', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;
      --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 17px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

    /* top bar */
    .topbar { border-bottom: 1px solid var(--line); background: #fff; }
    .topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 60px; }
    .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; color: inherit; text-decoration: none; }
    .brand img { height: 32px; width: auto; display: block; }
    .brand span { color: var(--accent); }
    .topbar .btn-comic { width: auto; padding: 8px 16px; font-size: 14px; }

    /* hero */
    .hero { padding: 56px 0 40px; }
    .hero .wrap { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 48px; row-gap: 32px; align-items: start; }
    .hero-head { grid-column: 1 / -1; }
    .proof { margin-top: 14px; font-size: 18px; }
    .proof span { color: var(--muted); font-size: 14px; }
    .hero-head .lede { max-width: none; margin-bottom: 0; }
    .eyebrow {
      display: inline-block; background: var(--accent-soft); color: var(--accent-dark);
      font-weight: 600; font-size: 14px; padding: 4px 12px; border-radius: 999px; margin-bottom: 18px;
    }
    h1.comic-title {
      font-size: clamp(34px, 5vw, 54px); line-height: 1.08; font-weight: 800;
      letter-spacing: -0.02em; margin-bottom: 18px;
    }
    .lede { font-size: 20px; color: var(--muted); margin-bottom: 28px; max-width: 30em; }
    .price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
    .price-row .amount { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
    .price-row .note { color: var(--muted); font-size: 15px; }
    .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
    .cta-row .btn-comic { width: auto; }
    .stock { font-size: 15px; color: var(--muted); }
    .stock strong { color: var(--accent-dark); }
    .facts { list-style: none; margin-top: 28px; display: grid; gap: 8px; font-size: 16px; }
    .facts li::before { content: "✓"; color: var(--comic-green); font-weight: 700; margin-right: 10px; }

    /* viewer */
    .viewer { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 8px 30px rgba(17,24,39,0.06); }
    .canvas-container {
      width: 100%; height: 360px; border-radius: 10px; position: relative; cursor: grab;
      background: radial-gradient(circle, #4b5465 20%, #3f4756 90%);
    }
    .canvas-container .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
    .canvas-container:active { cursor: grabbing; }
    .canvas-hint {
      position: absolute; bottom: 10px; right: 10px; background: rgba(255,255,255,0.9);
      border-radius: 6px; padding: 4px 10px; font-size: 13px; color: var(--muted); pointer-events: none;
    }
    .viewer-controls { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
    .viewer-controls strong { font-size: 15px; }
    .color-pick { margin-bottom: 16px; }
    .color-pick strong { font-size: 16px; }
    .color-msg { display: block; min-height: 18px; margin-top: 8px; color: var(--accent-dark); font-weight: 600; }
    .color-pick.need .swatch { animation: nudge 0.5s ease 2; box-shadow: 0 0 0 3px var(--accent); }
    @keyframes nudge { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
    .color-swatches { display: flex; gap: 12px; margin-top: 8px; }
    .swatch {
      width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
      box-shadow: 0 0 0 2px #6b7280; transition: box-shadow 0.15s;
    }
    .swatch:hover { box-shadow: 0 0 0 2px #374151; }
    .swatch.selected { box-shadow: 0 0 0 3px var(--accent); }
    .swatch-name { font-size: 14px; color: var(--muted); margin-top: 6px; }


    /* carousel */
    .slides { display: grid; }
    .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; min-height: 0; }
    .slide.active { opacity: 1; visibility: visible; }
    .slide img, .slide video { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; background: #e5e7eb; }
    .car-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
    .car-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #d1d5db; background: #fff; cursor: pointer; font-size: 16px; color: var(--ink); }
    .car-btn:hover { background: #f3f4f6; }
    .car-btn:focus-visible, .car-dot:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
    .car-dots { display: flex; gap: 8px; }
    .car-dot { min-width: 12px; height: 12px; border-radius: 999px; border: 0; background: #d1d5db; cursor: pointer; padding: 0; }
    .car-dot.active { background: var(--accent); width: 28px; }

    .field-error { display: block; color: #b91c1c; font-size: 13px; margin-top: 4px; min-height: 0; }
    .form-control.invalid { border-color: #b91c1c; }

    /* sections */
    section.block { padding: 56px 0; border-top: 1px solid var(--line); background: #fff; }
    section.block.alt { background: var(--bg); }
    h2.section-title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
    .section-sub { color: var(--muted); margin-bottom: 32px; max-width: 36em; }
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
    .card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
    .card .num { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
      border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
    .card h3 { font-size: 17px; margin-bottom: 6px; }
    .card p { color: var(--muted); font-size: 15px; }

    .spec-list { list-style: none; }
    .spec-list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
    .spec-list li span:first-child { color: var(--muted); }
    .spec-list li span.badge { font-weight: 600; }
    .includes { background: var(--accent-soft); border-radius: 10px; padding: 14px 16px; font-size: 15px; margin-top: 18px; }
    code { font-family: var(--font-mono); font-size: 0.9em; background: #f3f4f6; padding: 1px 5px; border-radius: 4px; }

    .final { text-align: center; padding: 64px 0; background: var(--ink); color: #fff; }
    .final h2 { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
    .final p { color: #d1d5db; margin-bottom: 24px; }
    .final .btn-comic { width: auto; background: #fff; color: var(--ink); }
    .final .btn-comic:hover { background: var(--accent-soft); }
    footer.foot { text-align: center; font-size: 14px; color: var(--muted); padding: 20px; }

    @media (max-width: 820px) {
      .hero .wrap, .two-col { grid-template-columns: 1fr; gap: 32px; }
      .hero .wrap { row-gap: 24px; }
      .hero { padding-top: 32px; }
    }

    /* buttons */
    .btn-comic {
      display: inline-block; width: 100%; background: var(--accent); color: #fff; font-family: var(--font-body);
      font-weight: 700; font-size: 18px; text-align: center; padding: 14px 24px; text-decoration: none;
      border: 0; border-radius: 10px; cursor: pointer; transition: background 0.15s;
    }
    .btn-comic:hover { background: var(--accent-dark); }
    .btn-comic:focus-visible, .swatch:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
    .btn-secondary { background: #fff; color: var(--ink); border: 1px solid #d1d5db; font-size: 14px; padding: 8px 14px; font-weight: 600; }
    .btn-secondary:hover { background: #f3f4f6; }
    .btn-square { background: var(--comic-blue); color: #fff; }
    .btn-square:hover { background: #1e40af; }

    /* modal / form */
    .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(17,24,39,0.6); z-index: 999; justify-content: center; align-items: center; padding: 15px; }
    .modal-overlay.active { display: flex; }
    .modal-card { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 550px; width: 100%; padding: 28px; max-height: 90vh; overflow-y: auto; position: relative; }
    .close-modal { position: absolute; top: 10px; right: 16px; font-size: 32px; cursor: pointer; line-height: 1; color: var(--muted); }
    .caption-box { display: inline-block; background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; font-size: 14px; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
    .form-group { margin-bottom: 14px; }
    .form-group label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
    .form-control { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-family: var(--font-body); font-size: 16px; background: #fff; }
    .form-control:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
    .pay-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 14px; }
    .pay-option { border: 1px solid #d1d5db; border-radius: 10px; background: #fff; padding: 10px; cursor: pointer; font-weight: 700; font-size: 15px; text-align: center; }
    .pay-option input { margin-right: 6px; }
    .pay-option small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
    .pay-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
    .pay-details { background: var(--accent-soft); border-radius: 10px; padding: 12px; margin-bottom: 15px; font-size: 15px; }
    .sound-effect { font-size: 48px; color: var(--comic-green); line-height: 1; }

    .price-row .price-label { flex-basis: 100%; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-dark); }
    .price-row { flex-wrap: wrap; }
    .price-row .was { color: var(--muted); font-size: 24px; text-decoration: line-through; }
    .stock { line-height: 1.4; }
    #days-left { color: var(--accent-dark); font-weight: 600; }
    .notify { margin-top: 28px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; }
    .notify-row { display: flex; gap: 8px; margin-top: 8px; }
    .notify small { display: block; margin-top: 6px; color: var(--comic-green); font-weight: 600; }
    .keymap { margin-top: 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 20px; }
    .keymap summary { cursor: pointer; font-weight: 700; padding: 16px 0; color: var(--accent-dark); }
    .keymap-body { padding-bottom: 16px; }
    .keymap-body h3 { font-size: 15px; margin: 18px 0 4px; }
    /* Spec table: fixed label column, values left-aligned so wrapped text lines up */
    .two-col .spec-list li { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; align-items: baseline; }
    .two-col .spec-list li span:first-child { white-space: nowrap; }
    .keymap-body .spec-list li { gap: 24px; font-size: 15px; }
    .keymap-body .spec-list li span.badge { text-align: right; }
    .pad-figure { margin: 8px 0 4px; }
    .pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 460px; margin: 0 auto; padding: 14px; background: #1f2937; border-radius: 14px; }
    .pad .k { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.1; padding: 2px; }
    .pad .k.k-star { font-size: 34px; line-height: 1; padding-top: 10px; }
    .k.term, .lg.term { background: var(--accent); color: #fff; }
    .k.nav, .lg.nav { background: #9ca3af; color: #111827; }
    .k.in, .lg.in { background: #f3f4f6; color: #111827; }
    .pad-figure figcaption { text-align: center; font-size: 13px; color: var(--muted); margin-top: 10px; }
    .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin: 0 4px 0 12px; vertical-align: middle; border: 1px solid #d1d5db; }
    .keymap-note { font-size: 14px; color: var(--muted); margin-top: 8px; }
    .maker { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: center; }
    .maker-photo { aspect-ratio: 1; background: var(--accent-soft); border: 2px dashed var(--accent); border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; color: var(--accent-dark); font-size: 14px; }
    .maker-photo { border: 0; padding: 0; overflow: hidden; background: #e5e7eb; }
    .maker-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 64%; border-radius: 12px; }
    @media (max-width: 820px) { .maker { grid-template-columns: 1fr; } }
    .render-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
    .check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-bottom: 12px; font-weight: 500; }
    .check input { margin-top: 3px; }
    .design-note { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
    footer.foot a, .section-sub a { color: var(--accent-dark); }
    .tear-slips { display: none; }
    @media print {
      body { background: #fff; }
      .no-print, .topbar { display: none !important; }
      .tear-slips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 24px; border-top: 2px dashed #000; padding-top: 15px; }
      .slip { border: 1px dashed #000; padding: 8px; text-align: center; font-size: 11px; }
    }