/* SiR.dNA — component styles. Every color, length, angle and shadow is a token from tokens.css. */

body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.sd-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-4); }
.sd-stage { position: relative; overflow: hidden; background: var(--ground); }

/* type helpers (mirror the token type styles; classes from tokens.css also apply) */
.sd-display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; margin: 0; }
.sd-display-xl { font-size: 160px; line-height: 0.88; }
.sd-display-lg { font-size: 112px; line-height: 0.9; }
.sd-display-md { font-size: 72px; line-height: 0.92; letter-spacing: -0.015em; }
.sd-display-sm { font-size: 44px; line-height: 0.96; letter-spacing: -0.01em; }
.sd-mono { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; }
.sd-tag-type { font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.sd-meta { font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; }
.sd-jp { font-family: var(--font-jp); font-weight: 700; letter-spacing: 0.2em; font-size: 12px; line-height: 16px; }
.sd-jp-display { font-family: var(--font-jp); font-weight: 900; font-size: 48px; line-height: 1.1; letter-spacing: 0.04em; }
.sd-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; margin: 0; }
.sd-body-lg { font-size: 18px; line-height: 28px; }
.sd-focus:focus-visible, .sd-btn:focus-visible, .sd-nav-key:focus-visible, .sd-topbar a:focus-visible, .sd-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Wordmark */
.sd-wm { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0; color: var(--ink); text-decoration: none; }
.sd-wm-name { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 0.9; text-transform: none; white-space: nowrap; }
.sd-wm-dot { color: var(--accent); }
.sd-wm-hero .sd-wm-name { font-size: 112px; }
.sd-wm-md .sd-wm-name { font-size: 44px; }
.sd-wm-sm .sd-wm-name { font-size: 22px; letter-spacing: -0.01em; }
.sd-wm-jp { font-family: var(--font-jp); font-weight: 900; letter-spacing: 0.04em; margin-top: var(--space-1); }
.sd-wm-hero .sd-wm-jp { font-size: 20px; margin-top: var(--space-3); }
.sd-wm-md .sd-wm-jp { font-size: 11px; }
.sd-wm-sm .sd-wm-jp { display: none; }
.sd-wm-row { display: inline-flex; align-items: center; gap: var(--space-3); }
.sd-wm-mark { display: block; height: 1.1em; width: auto; }

/* Headline */
.sd-hl { position: relative; display: inline-block; margin: 0; color: var(--ink); }
.sd-hl-bleed { white-space: nowrap; }
.sd-hl-dot { color: inherit; }
.sd-hl-dot-accent { color: var(--accent); }
.sd-hl-misprint-accent { text-shadow: var(--shadow-misprint-accent); }
.sd-hl-misprint-cyan { text-shadow: var(--shadow-misprint-accent), var(--shadow-misprint-cyan); }
.sd-hl-jp { display: block; margin-top: var(--space-3); color: var(--ink); }
.sd-hl-sm + .sd-hl-jp, .sd-hl-md .sd-hl-jp { font-size: 24px; }

/* Button */
.sd-btn { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; min-height: 44px; padding: var(--space-3) var(--space-4); border: var(--stroke-rule) solid var(--line); border-radius: var(--radius-none); background: var(--ink); color: var(--ink-inverse); font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 120ms linear, color 120ms linear, box-shadow 120ms linear, transform 120ms linear; }
.sd-btn:hover { background: var(--ground); color: var(--ink); box-shadow: var(--shadow-block); transform: translate(-2px, -2px); }
.sd-btn:active { box-shadow: var(--shadow-none); transform: none; }
.sd-btn-outline { background: transparent; color: var(--ink); }
.sd-btn-outline:hover { background: var(--ink); color: var(--ink-inverse); }
.sd-btn-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sd-btn-accent:hover { background: var(--ground); border-color: var(--line); color: var(--ink); }
.sd-btn-signal { background: var(--signal-yellow); border-color: var(--signal-yellow); color: var(--on-signal); }
.sd-btn-signal:hover { background: var(--ground); border-color: var(--line); color: var(--ink); }
.sd-btn-lg { min-height: 56px; padding: var(--space-4) var(--space-6); font-size: 14px; }
.sd-btn[disabled], .sd-btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: default; pointer-events: none; }
.sd-btn-arrow { font-family: var(--font-mono); }

/* Tag */
.sd-tag { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; padding: var(--space-1) var(--space-2); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-none); background: var(--ground); color: var(--ink); font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.sd-tag-jp { font-family: var(--font-jp); font-weight: 700; letter-spacing: 0.2em; text-transform: none; }
.sd-tag-ink { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); }
.sd-tag-inverse { background: var(--ground-inverse); border-color: var(--ground-inverse); color: var(--ink-inverse); }
.sd-tag-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sd-tag-cyan { background: var(--signal-cyan); border-color: var(--signal-cyan); color: var(--on-signal); }
.sd-tag-yellow { background: var(--signal-yellow); border-color: var(--signal-yellow); color: var(--on-signal); }
.sd-tag-sticker { border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); border-width: var(--stroke-rule); }
.sd-tag-vertical { writing-mode: vertical-rl; }
.sd-tilt-1 { transform: rotate(var(--tilt-1)); }
.sd-tilt-2 { transform: rotate(var(--tilt-2)); }
.sd-tilt-3 { transform: rotate(var(--tilt-3)); }
.sd-tilt-4 { transform: rotate(var(--tilt-4)); }
.sd-tilt-5 { transform: rotate(var(--tilt-5)); }

/* Stray */
.sd-stray { position: absolute; z-index: var(--z-stray); pointer-events: none; }
.sd-stray > * { pointer-events: auto; }
.sd-stray-tl { transform-origin: top left; }
.sd-stray-tr { transform-origin: top right; }
.sd-stray-bl { transform-origin: bottom left; }
.sd-stray-br { transform-origin: bottom right; }
.sd-tape { display: inline-block; height: var(--stroke-tape); line-height: var(--stroke-tape); padding: 0 var(--space-4); background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-weight: 700; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.sd-ghost { color: var(--ghost); }

/* Marquee */
.sd-marquee { position: relative; overflow: hidden; width: 100%; background: var(--ground); color: var(--ink); border-top: var(--stroke-hair) solid var(--line); border-bottom: var(--stroke-hair) solid var(--line); }
.sd-marquee-ink { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
.sd-marquee-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.sd-marquee-cyan { background: var(--signal-cyan); color: var(--on-signal); border-color: var(--signal-cyan); }
.sd-marquee-yellow { background: var(--signal-yellow); color: var(--on-signal); border-color: var(--signal-yellow); }
.sd-marquee-track { display: flex; width: max-content; will-change: transform; animation: sd-marquee var(--sd-marquee-duration, 20s) linear infinite; }
.sd-marquee:hover .sd-marquee-track { animation-play-state: paused; }
.sd-marquee-item { flex: none; padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.sd-marquee-item .sd-jp { margin-left: var(--space-3); }
.sd-marquee-sep { opacity: 1; padding: 0 var(--space-1); }
@keyframes sd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sd-marquee-track { animation: none; } }

/* ColorBars */
.sd-bars { position: relative; display: flex; width: 100%; height: var(--stroke-bars); box-sizing: border-box; }
.sd-bars-vertical { flex-direction: column; width: var(--stroke-bars); height: 100%; }
.sd-bar { flex: 1 1 0; }
.sd-bar-1 { background: var(--bars-white); }
.sd-bar-2 { background: var(--bars-yellow); }
.sd-bar-3 { background: var(--bars-cyan); }
.sd-bar-4 { background: var(--bars-green); }
.sd-bar-5 { background: var(--bars-magenta); }
.sd-bar-6 { background: var(--bars-red); }
.sd-bar-7 { background: var(--bars-blue); }
.sd-bars-label { position: absolute; left: var(--space-4); bottom: var(--space-4); padding: var(--space-1) var(--space-2); background: #000000; color: #ffffff; font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Slide */
.sd-slide { position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; background: var(--ground); color: var(--ink); z-index: var(--z-slide); }
.sd-slide-inverse { background: var(--ground-inverse); color: var(--ink-inverse); }
.sd-slide-inverse .sd-hl, .sd-slide-inverse .sd-hl-jp, .sd-slide-inverse .sd-wm { color: var(--ink-inverse); }
.sd-slide-inverse .sd-tag { background: var(--ground-inverse); color: var(--ink-inverse); border-color: var(--ink-inverse); }
.sd-slide-inverse .sd-tag-ink { background: var(--ink-inverse); color: var(--ink); }
.sd-slide-inverse .sd-btn { background: var(--ink-inverse); color: var(--ink); border-color: var(--ink-inverse); }
.sd-slide-inverse .sd-btn:hover { background: var(--ground-inverse); color: var(--ink-inverse); }
.sd-slide-inverse .sd-btn-outline { background: transparent; color: var(--ink-inverse); }
.sd-slide-inverse .sd-btn-outline:hover { background: var(--ink-inverse); color: var(--ink); }
.sd-slide-inverse .sd-slide-coord, .sd-slide-inverse .sd-slide-row { color: var(--ink-inverse); }
.sd-slide-photo { color: #ffffff; }
.sd-slide-photo .sd-hl, .sd-slide-photo .sd-hl-jp { color: #ffffff; }
.sd-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-slide-scrim { position: absolute; inset: 0; background: var(--overlay); }
.sd-slide-content { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); max-width: 58%; padding: var(--space-16); box-sizing: border-box; }
.sd-slide-bl { left: 0; bottom: 0; }
.sd-slide-tl { left: 0; top: 0; padding-top: var(--space-32); }
.sd-slide-br { right: 0; bottom: 0; align-items: flex-end; text-align: right; }
.sd-slide-tr { right: 0; top: 0; padding-top: var(--space-32); align-items: flex-end; text-align: right; }
.sd-slide-center { left: 50%; top: 50%; transform: translate(-50%, -50%); align-items: center; text-align: center; max-width: 80%; }
.sd-slide-coord { position: absolute; right: var(--space-6); bottom: var(--space-6); font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; color: var(--ink-muted); z-index: var(--z-stray); }
.sd-slide-photo .sd-slide-coord { color: #ffffff; }
.sd-slide-row { position: absolute; left: var(--space-6); top: var(--space-6); font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); z-index: var(--z-stray); }
.sd-slide-photo .sd-slide-row { color: #ffffff; }
.sd-slide-side { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; display: flex; align-items: center; justify-content: center; }
.sd-slide-side img { width: 90%; height: 90%; object-fit: contain; }
.sd-slide-mobile .sd-slide-content { max-width: 100%; padding: var(--space-8); }
.sd-slide-mobile .sd-slide-side { width: 100%; }

/* SlideNav */
.sd-nav { display: inline-grid; grid-template-columns: repeat(3, var(--space-12)); grid-template-rows: repeat(3, var(--space-12)); gap: var(--space-2); z-index: var(--z-nav); }
.sd-nav-key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; box-sizing: border-box; width: var(--space-12); height: var(--space-12); border: var(--stroke-rule) solid var(--line); border-radius: var(--radius-none); background: var(--ground); color: var(--ink); font-family: var(--font-mono); font-weight: 700; font-size: 16px; line-height: 16px; cursor: pointer; padding: 0; transition: background 120ms linear, color 120ms linear; }
.sd-nav-key:hover { background: var(--ink); color: var(--ink-inverse); }
.sd-nav-key[disabled] { opacity: var(--opacity-disabled); cursor: default; }
.sd-nav-key[disabled]:hover { background: var(--ground); color: var(--ink); }
.sd-nav-key-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sd-nav-kanji { font-family: var(--font-jp); font-weight: 700; font-size: 10px; line-height: 12px; letter-spacing: 0; }
.sd-nav-up { grid-column: 2; grid-row: 1; }
.sd-nav-left { grid-column: 1; grid-row: 2; }
.sd-nav-right { grid-column: 3; grid-row: 2; }
.sd-nav-down { grid-column: 2; grid-row: 3; }
.sd-nav-center { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 14px; letter-spacing: 0.02em; color: var(--ink-muted); text-align: center; }

/* SiteMap */
.sd-map { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); padding: var(--space-3); z-index: var(--z-nav); background: var(--glass); border: var(--stroke-hair) solid var(--ghost); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sd-map { background: var(--overlay); } }
.sd-map-solid { background: var(--ground); border-color: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sd-map-grid { position: relative; }
.sd-map-cell { position: absolute; display: block; padding: 0; margin: 0; border: 0; border-radius: var(--radius-none); background: var(--ink); opacity: 0.14; cursor: pointer; transition: opacity 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms cubic-bezier(.2,.8,.2,1), transform 60ms linear; }
.sd-map-cell:hover { opacity: 0.8; box-shadow: var(--shadow-glow-ink); }
.sd-map-reach { opacity: 0.45; box-shadow: var(--shadow-glow-ink); }
.sd-map-here { opacity: 0; cursor: default; }
.sd-map-cursor { position: absolute; left: 0; top: 0; pointer-events: none; transition: transform 320ms cubic-bezier(.2,.8,.2,1); }
.sd-map-pulse { width: 100%; height: 100%; background: var(--accent); box-shadow: var(--shadow-glow-accent); transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms cubic-bezier(.2,.8,.2,1), filter 260ms linear; }
.sd-map-lub { transform: scale(1.28); filter: brightness(1.35); transition-duration: 80ms; }
.sd-map-dub { transform: scale(1.12); filter: brightness(1.15); transition-duration: 70ms; }
.sd-map-moving { filter: brightness(1.5); box-shadow: var(--shadow-glow-accent), 0 0 40px 10px var(--accent); }
/* the trip: the red square separates into cyan and magenta passes that drift apart and back, like a film print
   off register, while a wash of the seven colour bars runs across the squares, column by column */
.sd-map-pulse { position: relative; }
.sd-map-pulse::before, .sd-map-pulse::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.sd-map-pulse::before { background: var(--signal-cyan); }
.sd-map-pulse::after { background: var(--bars-magenta); }
.sd-map-trip .sd-map-pulse { animation: sd-map-hue 1400ms cubic-bezier(.4,0,.2,1); }
.sd-map-trip .sd-map-pulse::before { animation: sd-map-sep-a 1400ms cubic-bezier(.4,0,.2,1); }
.sd-map-trip .sd-map-pulse::after { animation: sd-map-sep-b 1400ms cubic-bezier(.4,0,.2,1); }
.sd-map-trip .sd-map-cell { animation: sd-map-bars 1000ms cubic-bezier(.4,0,.2,1); animation-delay: calc(var(--sd-col, 0) * 70ms + var(--sd-row, 0) * 20ms); }
.sd-map-trip .sd-map-coord { animation: sd-map-coord 1400ms linear; }
@keyframes sd-map-sep-a { 0% { transform: none; opacity: 0; } 30% { transform: translate(-6px, -3px); opacity: .9; } 70% { transform: translate(-3px, 4px); opacity: .8; } 100% { transform: none; opacity: 0; } }
@keyframes sd-map-sep-b { 0% { transform: none; opacity: 0; } 30% { transform: translate(6px, 3px); opacity: .9; } 70% { transform: translate(4px, -4px); opacity: .8; } 100% { transform: none; opacity: 0; } }
@keyframes sd-map-hue { 0% { filter: hue-rotate(0deg) brightness(1); } 35% { filter: hue-rotate(-40deg) brightness(1.4); } 65% { filter: hue-rotate(45deg) brightness(1.3); } 100% { filter: hue-rotate(0deg) brightness(1); } }
@keyframes sd-map-bars {
  0% { background: var(--ink); opacity: .14; }
  14% { background: var(--bars-yellow); opacity: .9; }
  28% { background: var(--bars-cyan); opacity: .9; }
  42% { background: var(--bars-green); opacity: .9; }
  56% { background: var(--bars-magenta); opacity: .9; }
  70% { background: var(--bars-red); opacity: .9; }
  84% { background: var(--bars-blue); opacity: .9; }
  100% { background: var(--ink); opacity: .14; }
}
.sd-map-trip .sd-map-reach { animation-name: sd-map-bars-reach; }
@keyframes sd-map-bars-reach {
  0% { background: var(--ink); opacity: .45; }
  14% { background: var(--bars-yellow); opacity: 1; }
  28% { background: var(--bars-cyan); opacity: 1; }
  42% { background: var(--bars-green); opacity: 1; }
  56% { background: var(--bars-magenta); opacity: 1; }
  70% { background: var(--bars-red); opacity: 1; }
  84% { background: var(--bars-blue); opacity: 1; }
  100% { background: var(--ink); opacity: .45; }
}
@keyframes sd-map-coord { 0% { color: var(--ink); } 30% { color: var(--signal-cyan); } 60% { color: var(--bars-magenta); } 100% { color: var(--ink); } }
.sd-map-label { display: flex; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.sd-map-coord { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .sd-map-cursor, .sd-map-cell, .sd-map-pulse { transition: none; animation: none; } .sd-map-pulse { box-shadow: none; } .sd-map-pulse::before, .sd-map-pulse::after { display: none; } }

/* ProductCard */
.sd-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; box-sizing: border-box; padding: var(--space-4); background: var(--ground-raised); color: var(--ink); text-decoration: none; border-radius: var(--radius-none); transition: box-shadow 120ms linear; }
.sd-card:hover { box-shadow: var(--shadow-misprint-accent); }
.sd-card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: var(--stroke-hair) solid var(--line); background: var(--ground); }
.sd-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd-card-line { position: absolute; left: var(--space-2); top: var(--space-2); max-width: calc(100% - var(--space-4)); flex-wrap: wrap; white-space: normal; row-gap: 0; }
.sd-card-sold { position: absolute; right: var(--space-2); bottom: var(--space-2); }
.sd-card-name { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; margin: 0; }
.sd-card-meta { display: flex; justify-content: space-between; gap: var(--space-3); font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; }
.sd-card-price { color: var(--accent); }
.sd-card-no { color: var(--ink-muted); }
.sd-card-sold-out .sd-card-media img { opacity: var(--opacity-disabled); }

/* ProductZoom */
.sd-zoom { position: relative; display: block; overflow: hidden; background: var(--ground); color: var(--ink); text-decoration: none; border-radius: var(--radius-none); }
.sd-zoom-inverse { background: var(--ground-inverse); color: var(--ink-inverse); }
.sd-zoom-frame { position: absolute; inset: 0; overflow: hidden; }
.sd-zoom-img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: var(--sd-zoom-x, 50%) var(--sd-zoom-y, 50%); transform: scale(var(--sd-zoom, 3.2)); transition: transform 700ms cubic-bezier(.2,.8,.2,1); will-change: transform; user-select: none; -webkit-user-drag: none; }
.sd-zoom:hover .sd-zoom-img, .sd-zoom:focus-visible .sd-zoom-img, .sd-zoom-open .sd-zoom-img { transform: scale(1); }
.sd-zoom-hint { position: absolute; top: var(--space-4); right: var(--space-4); display: inline-flex; gap: var(--space-2); align-items: baseline; padding: var(--space-1) var(--space-2); background: var(--ground); color: var(--ink); font-family: var(--font-mono); font-weight: 700; font-size: 10px; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; transition: opacity 320ms linear; z-index: 2; }
.sd-zoom-inverse .sd-zoom-hint { background: var(--ground-inverse); color: var(--ink-inverse); }
.sd-zoom:hover .sd-zoom-hint, .sd-zoom-open .sd-zoom-hint { opacity: 0; }
.sd-zoom-info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); z-index: 2; pointer-events: none; }
.sd-zoom-name { margin: 0; padding: var(--space-1) var(--space-2); background: var(--ground); color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; }
.sd-zoom-inverse .sd-zoom-name { background: var(--ground-inverse); color: var(--ink-inverse); }
.sd-zoom-meta { display: flex; gap: var(--space-3); padding: var(--space-1) var(--space-2); background: var(--ground); font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; }
.sd-zoom-inverse .sd-zoom-meta { background: var(--ground-inverse); }
.sd-zoom-price { color: var(--accent); font-weight: 700; }
.sd-zoom-no { color: var(--ink-muted); }
.sd-zoom-hero .sd-zoom-name { font-size: 44px; }
@media (prefers-reduced-motion: reduce) { .sd-zoom-img { transform: none; transition: none; } .sd-zoom-hint { display: none; } }

/* ImageTrip */
.sd-trip { position: relative; overflow: hidden; background: #000000; }
.sd-trip-img { display: block; width: 100%; height: 100%; }
.sd-trip-ch { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.sd-trip-ch img { display: block; width: 100%; height: 100%; }
.sd-trip-r img { filter: url(#sd-ch-r); }
.sd-trip-g img { filter: url(#sd-ch-g); }
.sd-trip-b img { filter: url(#sd-ch-b); }
.sd-trip-on .sd-trip-img { opacity: 0; }
.sd-trip-on .sd-trip-ch { opacity: 1; }
.sd-trip-on .sd-trip-r { animation: sd-trip-r var(--sd-trip-ms, 1700ms) cubic-bezier(.4,0,.2,1); }
.sd-trip-on .sd-trip-g { animation: sd-trip-g var(--sd-trip-ms, 1700ms) cubic-bezier(.4,0,.2,1); }
.sd-trip-on .sd-trip-b { animation: sd-trip-b var(--sd-trip-ms, 1700ms) cubic-bezier(.4,0,.2,1); }
@keyframes sd-trip-r { 0% { transform: none; } 30% { transform: translate(-14px, 4px); } 65% { transform: translate(-6px, -8px); } 100% { transform: none; } }
@keyframes sd-trip-g { 0% { transform: none; } 30% { transform: translate(2px, -10px); } 65% { transform: translate(-8px, 6px); } 100% { transform: none; } }
@keyframes sd-trip-b { 0% { transform: none; } 30% { transform: translate(14px, 6px); } 65% { transform: translate(10px, -4px); } 100% { transform: none; } }
.sd-trip-tiles { position: absolute; inset: 0; display: grid; pointer-events: none; }
.sd-trip-tile { display: block; opacity: 0; mix-blend-mode: overlay; }
.sd-trip-on .sd-trip-tile { animation: sd-trip-bars 1100ms cubic-bezier(.4,0,.2,1); animation-delay: calc(var(--sd-col, 0) * 45ms + var(--sd-row, 0) * 14ms); }
@keyframes sd-trip-bars {
  0% { background: var(--bars-white); opacity: 0; }
  12% { background: var(--bars-yellow); opacity: .95; }
  27% { background: var(--bars-cyan); opacity: .95; }
  42% { background: var(--bars-green); opacity: .95; }
  57% { background: var(--bars-magenta); opacity: .95; }
  72% { background: var(--bars-red); opacity: .95; }
  86% { background: var(--bars-blue); opacity: .95; }
  100% { background: var(--bars-blue); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sd-trip-ch, .sd-trip-tiles { display: none; } .sd-trip-on .sd-trip-img { opacity: 1; } }

/* TopBar */
.sd-topbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); box-sizing: border-box; width: 100%; padding: var(--space-3) var(--space-6); background: var(--ground); color: var(--ink); border-bottom: var(--stroke-hair) solid var(--line); z-index: var(--z-nav); }
.sd-topbar-left, .sd-topbar-right { display: flex; align-items: center; gap: var(--space-6); }
.sd-topbar-links { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.sd-topbar a { color: var(--ink); text-decoration: none; }
.sd-topbar-link { display: inline-flex; align-items: baseline; gap: var(--space-1); font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: var(--space-1); border-bottom: var(--stroke-heavy) solid transparent; }
.sd-topbar-link:hover, .sd-topbar-link-active { border-bottom-color: var(--accent); }
.sd-topbar-link .sd-jp { font-size: 10px; letter-spacing: 0.1em; color: var(--ink-muted); }
.sd-topbar-row { font-family: var(--font-mono); font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; padding: var(--space-1) var(--space-2); border: var(--stroke-hair) solid var(--line); }
.sd-topbar-cart { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; }
.sd-topbar-cart-count { color: var(--accent); }