:root {
      color-scheme: dark;
      --ink: #080808;
      --paper: #f1f0e9;
      --muted: #a4a49d;
      --line: rgba(255,255,255,.16);
      --accent: #d25a31;
      --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Noto Sans TC", sans-serif;
      --sans: Inter, "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--ink); }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--paper);
      background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        var(--ink);
      background-size: 32px 32px;
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { font: inherit; color: inherit; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    .noise {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 20;
      opacity: .12;
      background:
        repeating-linear-gradient(17deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px),
        repeating-linear-gradient(103deg, transparent 0 5px, rgba(255,255,255,.018) 5px 6px);
      mix-blend-mode: screen;
    }
    .nav {
      position: sticky;
      top: 0;
      z-index: 10;
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      background: rgba(8,8,8,.84);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(16px);
    }
    .brand {
      display: flex;
      align-items: baseline;
      gap: 8px;
      letter-spacing: -.04em;
    }
    .brand strong {
      font: 900 23px/1 var(--display);
      letter-spacing: -.02em;
    }
    .brand small {
      color: var(--muted);
      font-size: 9px;
      letter-spacing: .18em;
    }
    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .nav-link::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 14px var(--accent);
      transition: background .3s ease;
    }
    .hero {
      position: relative;
      min-height: calc(100svh - 66px);
      display: grid;
      align-content: space-between;
      padding: 23px 18px 20px;
      overflow: hidden;
    }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 14px;
      color: var(--accent);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      transition: color .3s ease;
    }
    .eyebrow::before { content: ""; width: 27px; height: 2px; background: currentColor; }
    h1 {
      max-width: 520px;
      margin: 0;
      font: 900 clamp(62px, 20.5vw, 106px)/.77 var(--display);
      letter-spacing: -.055em;
      text-transform: uppercase;
    }
    h1 .outline {
      color: transparent;
      -webkit-text-stroke: 1.5px var(--paper);
    }
    .hero-bottom {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 20px;
    }
    .hero-copy {
      max-width: 260px;
      margin: 0;
      color: #c7c7bf;
      font-size: 13px;
      line-height: 1.65;
    }
    .scroll-cue {
      width: 46px;
      height: 46px;
      border: 1px solid var(--line);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 22px;
      animation: bob 1.8s ease-in-out infinite;
    }
    @keyframes bob { 50% { transform: translateY(5px); } }

    .product {
      padding: 74px 0 0;
      border-top: 1px solid var(--line);
    }
    .section-head { padding: 0 18px 22px; }
    .kicker {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    h2 {
      margin: 0;
      font: 900 clamp(36px, 12vw, 62px)/.93 var(--display);
      letter-spacing: -.035em;
      text-transform: uppercase;
    }
    .stage-wrap { position: relative; margin: 0 12px; }
    .stage {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1.18 / 1;
      border-radius: 2px;
      background: #fff;
      touch-action: pan-y;
    }
    .stage::before {
      content: attr(data-index);
      position: absolute;
      z-index: 2;
      top: 14px;
      left: 15px;
      color: #111;
      font: 900 13px/1 var(--display);
      letter-spacing: .08em;
      mix-blend-mode: multiply;
    }
    .stage-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 1;
      transform: scale(1);
      transition: opacity .18s ease, transform .42s cubic-bezier(.2,.8,.2,1);
      user-select: none;
      -webkit-user-drag: none;
    }
    .stage-image.changing { opacity: .15; transform: scale(.97); }
    .arrow {
      position: absolute;
      z-index: 3;
      top: 50%;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(0,0,0,.24);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #111;
      background: rgba(255,255,255,.84);
      box-shadow: 0 8px 24px rgba(0,0,0,.14);
      cursor: pointer;
      transform: translateY(-50%);
      backdrop-filter: blur(8px);
    }
    .arrow:active { transform: translateY(-50%) scale(.92); }
    .arrow.prev { left: 10px; }
    .arrow.next { right: 10px; }
    .product-meta {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items: end;
      padding: 20px 18px 13px;
    }
    .color-name {
      margin: 0 0 4px;
      font: 900 31px/1 var(--display);
      letter-spacing: -.02em;
    }
    .color-en {
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .18em;
    }
    .counter { font: 900 22px/1 var(--display); }
    .counter span { color: var(--muted); font-size: 12px; }
    .swatches {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 9px 18px 24px;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
    }
    .swatches::-webkit-scrollbar { display: none; }
    .swatch {
      position: relative;
      flex: 0 0 42px;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 1px solid rgba(255,255,255,.26);
      border-radius: 50%;
      background: var(--swatch);
      cursor: pointer;
      scroll-snap-align: center;
    }
    .swatch[data-rainbow="true"] {
      background: conic-gradient(#d5412b, #f0c42e, #80b768, #3ca7b7, #676bc0, #b15b9a, #d5412b);
    }
    .swatch::after {
      content: "";
      position: absolute;
      inset: -5px;
      border: 1px solid transparent;
      border-radius: inherit;
      transition: border-color .2s ease;
    }
    .swatch[aria-pressed="true"]::after { border-color: var(--paper); }
    .swatch:focus-visible, .arrow:focus-visible, .cta:focus-visible, .nav-link:focus-visible {
      outline: 2px solid var(--paper);
      outline-offset: 4px;
    }
    .hint {
      padding: 0 18px 66px;
      color: #777;
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .manifesto {
      position: relative;
      overflow: hidden;
      padding: 74px 18px;
      color: #0a0a0a;
      background: var(--paper);
    }
    .manifesto .kicker { color: #686861; }
    .manifesto h2 { max-width: 360px; }
    .manifesto-copy {
      max-width: 430px;
      margin: 28px 0 44px;
      font-size: 15px;
      line-height: 1.8;
    }
    .glyphs {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      border: 1px solid #111;
    }
    .glyph {
      position: relative;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-right: 1px solid #111;
      font-size: clamp(21px, 8vw, 39px);
      color: var(--motif);
      background: #111;
    }
    .glyph:last-child { border-right: 0; }
    .glyph span {
      position: absolute;
      right: 2px;
      bottom: 5px;
      left: 2px;
      font: 800 7px/1 var(--sans);
      letter-spacing: .05em;
      text-align: center;
    }
    .motif-copy {
      margin: 18px 0 0;
      color: #55554f;
      font-size: 12px;
      line-height: 1.8;
    }
    .facts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid #111;
      border-bottom: 1px solid #111;
      color: #111;
      background: var(--paper);
    }
    .fact { padding: 24px 12px; border-right: 1px solid #111; }
    .fact:last-child { border-right: 0; }
    .fact strong { display: block; font: 900 35px/1 var(--display); }
    .fact span {
      display: block;
      margin-top: 8px;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: .15em;
    }
    .fit-guide {
      padding: 76px 18px;
      color: #0a0a0a;
      background: #dcdcd7;
    }
    .fit-guide .kicker { color: #666660; }
    .fit-intro {
      max-width: 460px;
      margin: 20px 0 28px;
      color: #494943;
      font-size: 13px;
      line-height: 1.75;
    }
    .fit-card {
      overflow: hidden;
      margin: 0;
      border: 1px solid rgba(0,0,0,.3);
      background: #fff;
      box-shadow: 8px 8px 0 #111;
    }
    .fit-card img {
      width: 100%;
      height: auto;
    }
    .fit-caption {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin: 18px 0 0;
      color: #5d5d57;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .08em;
      line-height: 1.5;
      text-transform: uppercase;
    }
    .details { padding: 76px 18px 100px; }
    .detail-list { margin-top: 34px; border-top: 1px solid var(--line); }
    details { border-bottom: 1px solid var(--line); }
    summary {
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 21px 0;
      cursor: pointer;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "＋"; color: var(--accent); font-size: 18px; }
    details[open] summary::after { content: "－"; }
    details p {
      margin: -4px 0 24px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.75;
    }
    .cta {
      position: fixed;
      z-index: 12;
      right: 14px;
      bottom: max(14px, env(safe-area-inset-bottom));
      left: 14px;
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      border: 1px solid rgba(255,255,255,.18);
      color: #080808;
      background: var(--accent);
      box-shadow: 0 14px 38px rgba(0,0,0,.4);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: background .3s ease, transform .2s ease;
    }
    .cta:active { transform: scale(.98); }
    .cta .cta-color { font-size: 9px; opacity: .7; }
    footer {
      min-height: 420px;
      display: grid;
      align-content: center;
      justify-items: center;
      padding: 80px 18px 130px;
      text-align: center;
      border-top: 1px solid var(--line);
    }
    .footer-mark {
      margin: 0;
      font: 900 clamp(68px, 25vw, 130px)/.78 var(--display);
      letter-spacing: -.06em;
    }
    footer p {
      max-width: 300px;
      margin: 24px 0 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.6;
      letter-spacing: .1em;
    }
    @media (min-width: 700px) {
      .nav { padding-inline: 32px; }
      .hero, .section-head, .manifesto, .details { padding-left: max(32px, calc((100vw - 1120px)/2)); padding-right: max(32px, calc((100vw - 1120px)/2)); }
      .hero { min-height: 780px; }
      h1 { font-size: 126px; }
      .product { padding-top: 100px; }
      .product-grid {
        max-width: 1120px;
        margin: auto;
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
        align-items: center;
      }
      .stage { aspect-ratio: 1.45 / 1; }
      .product-side { padding: 0 26px; }
      .product-meta, .swatches, .hint { padding-left: 0; padding-right: 0; }
      .manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; }
      .manifesto-copy { margin-bottom: 0; }
      .facts { max-width: 1120px; margin: auto; }
      .fact { padding: 34px; }
      .fact strong { font-size: 52px; }
      .fit-guide {
        display: grid;
        grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr);
        gap: 70px;
        align-items: start;
        padding-left: max(32px, calc((100vw - 1120px)/2));
        padding-right: max(32px, calc((100vw - 1120px)/2));
      }
      .fit-card { max-width: 700px; }
      .details { max-width: 1120px; margin: auto; display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
      .detail-list { margin-top: 0; }
      .cta { width: 330px; left: auto; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
    }