:root {
  --ink: var(--ici-ink);
  --ink-soft: var(--ici-muted);
  --ink-faint: rgba(255, 255, 255, 0.46);
  --bronze: var(--ici-accent);
  --bronze-soft: var(--ici-accent-soft);
  --surface: var(--ici-field);
  --serif: var(--ici-serif);
  --sans: var(--ici-sans);
  --ease-out: var(--ici-ease-out);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--surface); color: var(--ink); }
body { min-height: 100dvh; overflow: hidden; font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
#stage { min-height: 100dvh; }

.browser-shell {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #111719;
}
.scene-backdrop, .scene-shade { position: absolute; inset: 0; z-index: -2; }
.scene-backdrop img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.72) contrast(1.08) brightness(.58);
  transform: scale(1.03);
  transition: opacity 180ms ease-out;
}
.scene-shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 8, 10, .52), rgba(3, 8, 10, .2) 38%, rgba(3, 8, 10, .83) 100%),
    radial-gradient(circle at 50% 42%, transparent 0 25%, rgba(4, 8, 9, .34) 76%);
}

/* Arc Bridge already carries a scene on every card. Its quiet ink-teal field
   gives those images one stable canvas instead of competing with another photo. */
.variant-arc { background: var(--ici-field); }
.variant-arc .arc-color-backdrop { background: var(--ici-field); }
.variant-arc .scene-shade {
  background:
    radial-gradient(circle at 50% 43%, rgba(37, 63, 65, .28), transparent 52%),
    linear-gradient(180deg, rgba(18, 36, 39, .48), rgba(7, 14, 16, .34));
}

/* The glyph-led variants can use the selected scene as atmosphere. */
.variant-orbit .scene-backdrop img,
.variant-scroll .scene-backdrop img {
  animation: scene-reveal 220ms ease-out both;
}
@keyframes scene-reveal { from { opacity: .72; } to { opacity: 1; } }

.browser-header {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 68px;
  padding: max(14px, env(safe-area-inset-top)) clamp(16px, 4vw, 42px) 8px;
}
.browser-head-start {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-back {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 11px;
  text-decoration: none;
}
.page-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-back:hover { color: var(--ink); }
.brand {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .1em;
  white-space: nowrap;
}
.site-brand-mark {
  width: 18px;
  flex: 0 0 18px;
  display: grid;
  gap: 1.5px;
}
.site-brand-mark i {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}
.site-brand-mark i.is-yin {
  background: linear-gradient(90deg, currentColor 0 42%, transparent 42% 58%, currentColor 58%);
}
.site-brand-name { overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.original-reading, .language-toggle, .text-action, .primary-action, .reading-close {
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(9, 13, 14, .42);
  color: var(--ink);
  cursor: pointer;
}
.original-reading {
  max-width: min(45vw, 280px);
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.original-reading[hidden] { display: none; }
.language-toggle {
  width: 44px;
  min-width: 44px;
  height: 36px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.browser-content {
  width: min(100%, 1120px);
  height: calc(100dvh - 68px);
  margin: 0 auto;
  padding: clamp(18px, 3vh, 34px) clamp(18px, 4vw, 48px) max(82px, calc(72px + env(safe-area-inset-bottom)));
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr) auto;
  gap: clamp(12px, 2.4vh, 24px);
}
.selector-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.selector-heading h1 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: .02em;
}
.selector-heading p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.text-action {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 13px;
}
.text-action:hover, .original-reading:hover, .language-toggle:hover { border-color: rgba(255, 255, 255, .48); }

.selection-panel {
  width: min(100%, 520px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}
.selection-status {
  margin: 0 0 7px;
  color: var(--bronze);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.selection-row { display: flex; align-items: center; gap: 15px; min-width: 0; }
.selection-copy { min-width: 0; }
.selection-copy h2, .orbit-centre h2 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: clamp(26px, 5vw, 42px);
  font-weight: 500;
  line-height: 1.05;
}
.selection-copy p, .orbit-centre > p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}
.primary-action {
  min-height: 44px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(215, 189, 145, .64);
  border-radius: 999px;
  background: rgba(215, 189, 145, .14);
  white-space: nowrap;
  font-size: 13px;
  text-decoration: none;
}
.primary-action:hover { background: rgba(215, 189, 145, .24); }

.hex-glyph, .selected-glyph, .grid-glyph, .arc-glyph, .orbit-node-glyph, .scroll-glyph, .reading-glyph {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.hex-line { display: flex; width: 100%; height: 3px; gap: 4px; }
.hex-line i { display: block; flex: 1; border-radius: 4px; background: currentColor; }
.selected-glyph { width: 54px; min-width: 54px; color: var(--ink); gap: 4px; }
.selected-glyph .hex-line { height: 4px; }

/* Arc Bridge */
.arc-viewport {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.arc-viewport:active { cursor: grabbing; }
.arc-guide {
  position: absolute;
  left: 50%; bottom: 12px;
  width: min(720px, 180vw); height: 230px;
  transform: translateX(-50%);
  border-top: 1px solid rgba(215, 189, 145, .26);
  border-radius: 50% 50% 0 0;
  opacity: .75;
}
.arc-track { position: absolute; inset: 0; }
.arc-card {
  --focus-lift: calc(var(--focus) * .35);
  --focus-drop: calc(var(--focus) * 38px);
  position: absolute;
  left: 50%; top: 42%;
  width: clamp(96px, 25vw, 156px);
  aspect-ratio: .72;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #111;
  color: var(--ink);
  cursor: pointer;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--offset) * clamp(88px, 23vw, 170px)))
    translateY(calc(var(--distance) * var(--distance) * 10px + var(--focus-drop)))
    rotate(calc(var(--offset) * 4deg))
    scale(calc(1 - var(--distance) * .075 + var(--focus-lift)));
  transform-origin: 50% 100%;
  opacity: calc(1 - var(--distance) * .19);
  transition: opacity 120ms ease-out;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .38);
}
.arc-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: filter 220ms ease-out, transform 220ms var(--ease-out);
}
.arc-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.7)); }
.arc-card-number, .arc-card strong, .arc-glyph { position: absolute; z-index: 1; }
.arc-card-number { left: 10px; top: 9px; font-size: 10px; letter-spacing: .1em; }
.arc-card strong {
  left: 10px; right: 10px; bottom: 11px;
  font-family: var(--serif); font-size: 15px; font-weight: 500; text-align: left;
}
.arc-glyph { right: 9px; top: 9px; width: 28px; color: rgba(255,255,255,.86); gap: 2px; }
.arc-glyph .hex-line { height: 2px; gap: 3px; }
.arc-card.is-active {
  border: 1px solid rgba(215, 189, 145, .86);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .48), 0 0 0 5px rgba(215, 189, 145, .08);
}
.arc-card.is-active { z-index: 2; }
.arc-selection { animation: detail-enter 260ms var(--ease-out) both; }
@keyframes detail-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Hexagram Dial */
.orbit-content { grid-template-rows: auto minmax(330px, 1fr) auto; }
.orbit-viewport {
  position: relative;
  width: min(100%, 690px);
  min-height: 350px;
  margin: 0 auto;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.orbit-viewport:active { cursor: grabbing; }
.orbit-ring {
  position: absolute;
  left: 50%; top: 56%;
  width: min(460px, 130vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(215, 189, 145, .3);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(215, 189, 145, .05) inset;
}
.orbit-nodes { position: absolute; inset: 0; }
.orbit-node {
  position: absolute;
  left: 50%; top: 56%;
  width: 50px; height: 56px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, calc(.9 - var(--distance) * .09));
  cursor: pointer;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(clamp(-210px, -28vw, -150px))
    rotate(calc(var(--angle) * -1))
    scale(calc(1 - var(--distance) * .045));
  opacity: calc(1 - var(--distance) * .105);
  transition: opacity 120ms ease-out, color 160ms ease-out;
}
.orbit-node-inner {
  width: 100%; height: 100%;
  padding: 7px 7px 6px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(8, 13, 14, .52);
  transform: scale(1);
  transition:
    color 160ms ease-out,
    background 160ms ease-out,
    border-color 160ms ease-out,
    box-shadow 180ms ease-out,
    transform 220ms var(--ease-out);
}
.orbit-node [data-node-number] { font-size: 9px; letter-spacing: .08em; }
.orbit-node-glyph { width: 28px; margin: 0 auto; gap: 2px; }
.orbit-node-glyph .hex-line { height: 2px; gap: 3px; }
.orbit-node.is-active {
  z-index: 2;
  color: var(--ink);
}
.orbit-node.is-active .orbit-node-inner {
  transform: scale(1.5);
  border-color: rgba(215, 189, 145, .92);
  background: rgba(8, 13, 14, .7);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .4);
}
.orbit-node:hover:not(.is-active) .orbit-node-inner {
  transform: scale(1.1);
  border-color: rgba(215, 189, 145, .56);
}
.orbit-centre {
  position: absolute;
  left: 50%; top: 56%;
  width: min(260px, 72vw);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  text-align: center;
}
.orbit-centre .selection-status { margin-bottom: 14px; }
.orbit-glyph { width: 64px; margin-bottom: 18px; }
.orbit-glyph .hex-line { height: 4px; }
.orbit-read { justify-self: center; }

/* Unfolding Scroll */
.scroll-content { grid-template-rows: auto minmax(300px, 1fr) auto; }
.scroll-window { position: relative; min-width: 0; display: flex; align-items: center; }
.scroll-focus-frame {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 0;
  width: 116px; height: 257px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(215, 189, 145, .88);
  background: rgba(215, 189, 145, .08);
  box-shadow: inset 0 0 28px rgba(215, 189, 145, .06);
  pointer-events: none;
}
.scroll-strip {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 64px calc(50% - 43px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.scroll-strip.is-dragging,
.scroll-strip.is-inertia { scroll-snap-type: none; }
.scroll-strip.is-dragging { cursor: grabbing; }
.scroll-strip::-webkit-scrollbar { display: none; }
.scroll-slip {
  flex: 0 0 76px;
  min-height: 170px;
  padding: 13px 9px 15px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 14px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
  scroll-snap-align: center;
  transition: transform 220ms var(--ease-out), color 160ms ease-out, background 160ms ease-out;
}
.scroll-slip-number { font-size: 10px; letter-spacing: .12em; }
.scroll-glyph { width: 40px; align-self: center; gap: 3px; }
.scroll-glyph .hex-line { height: 3px; }
.scroll-slip strong { font-family: var(--serif); font-size: 14px; font-weight: 500; }
.scroll-slip.is-active {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  transform: scale(1.5);
}
.scroll-detail {
  width: min(100%, 650px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

/* Shared library grid */
dialog { color: var(--ink); }
.library-dialog {
  width: min(900px, calc(100vw - 28px));
  max-height: min(780px, calc(100dvh - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(215, 189, 145, .42);
  border-radius: 16px;
  background: #111718;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58);
}
.library-dialog::backdrop { background: rgba(2, 5, 6, .76); }
.dialog-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: start; justify-content: space-between; gap: 18px;
  padding: 20px 20px 16px;
  background: #111718;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.dialog-head h2 { margin: 0 0 5px; font-family: var(--serif); font-size: 24px; font-weight: 500; }
.dialog-head p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.round-close {
  width: 38px; height: 38px; min-width: 38px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer; font-size: 22px;
}
.hex-grid {
  max-height: calc(100dvh - 150px);
  padding: 18px 20px 28px;
  display: grid;
  grid-template-columns: repeat(8, minmax(70px, 1fr));
  gap: 4px;
  overflow-y: auto;
}
.grid-hex {
  min-height: 92px;
  padding: 9px 5px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.grid-hex:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.grid-hex.is-current { border-color: var(--bronze); background: var(--bronze-soft); color: var(--ink); }
.grid-hex > span { font-size: 9px; letter-spacing: .1em; }
.grid-hex strong { font-family: var(--serif); font-size: 13px; font-weight: 500; }
.grid-glyph { width: 31px; gap: 2px; }
.grid-glyph .hex-line { height: 2px; gap: 3px; }

/* Picker spec — intentionally independent from the product world. */
.proto-picker {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 8px 24px rgba(0, 0, 0, 0.24),
    0 2px 6px rgba(0, 0, 0, 0.12);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

.proto-picker-highlight {
  position: absolute;
  top: 4px;
  left: 0;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  will-change: transform;
}

/* The slide is enabled only after first paint (data-ready), so load doesn't animate. */
.proto-picker[data-ready] .proto-picker-highlight {
  transition:
    transform 250ms cubic-bezier(0.23, 1, 0.32, 1),
    width 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-reduced-motion: reduce) {
  .proto-picker[data-ready] .proto-picker-highlight { transition: none; }
}

.proto-picker-item {
  position: relative; /* sits above the highlight */
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  cursor: pointer;
  transition: color 150ms ease-out;
}

.proto-picker-item:hover {
  color: rgba(255, 255, 255, 0.85);
}

.proto-picker-item:active {
  transform: scale(0.97);
}

.proto-picker-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

.proto-picker-item[data-active] {
  color: #fff;
}

.proto-picker-divider {
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.12);
}

.proto-picker-replay {
  padding: 0 10px;
  font-size: 14px;
}

.proto-picker[data-position="top"] {
  bottom: auto;
  top: 24px;
}

@media (max-width: 700px) {
  .browser-header { min-height: 60px; padding: max(12px, env(safe-area-inset-top)) 14px 6px; }
  .original-reading { max-width: 44vw; min-height: 34px; padding: 6px 10px; font-size: 11px; }
  .language-toggle { width: 44px; min-width: 44px; height: 34px; }
  .page-back { width: 44px; padding: 0; }
  .page-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .browser-content {
    height: calc(100dvh - 60px);
    padding: 14px 16px max(80px, calc(70px + env(safe-area-inset-bottom)));
    gap: 12px;
  }
  .selector-heading { align-items: center; gap: 12px; }
  .selector-heading h1 { margin-bottom: 4px; font-size: 27px; }
  .selector-heading p { font-size: 12px; }
  .text-action { min-height: 38px; padding: 7px 11px; font-size: 11px; }
  .selection-panel, .scroll-detail { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .primary-action { width: 100%; }
  .arc-viewport { min-height: 290px; }
  .arc-card { top: 43%; width: 112px; }
  .arc-guide { bottom: 30px; height: 190px; }
  .arc-selection { width: 100%; }
  .selection-copy h2 { font-size: 31px; }

  .orbit-content { grid-template-rows: auto minmax(350px, 1fr) auto; }
  .orbit-viewport { min-height: 360px; width: calc(100% + 32px); margin-left: -16px; }
  .orbit-ring { width: 390px; top: 60%; }
  .orbit-node { top: 60%; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-170px) rotate(calc(var(--angle) * -1)) scale(calc(1 - var(--distance) * .045)); }
  .orbit-centre { top: 58%; }
  .orbit-heading { padding: 0 2px; }

  .scroll-content { grid-template-rows: auto minmax(290px, 1fr) auto; }
  .scroll-strip { margin: 0 -16px; width: calc(100% + 32px); padding-left: calc(50% - 38px); padding-right: calc(50% - 38px); }
  .scroll-slip { flex-basis: 70px; min-height: 154px; }
  .scroll-focus-frame { width: 107px; height: 233px; }
  .scroll-detail { padding-top: 14px; }

  .library-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .dialog-head { padding: max(18px, env(safe-area-inset-top)) 16px 14px; }
  .hex-grid { max-height: calc(100dvh - 110px); grid-template-columns: repeat(4, minmax(62px, 1fr)); padding: 12px 12px 36px; }
  .grid-hex { min-height: 88px; }
  .reading-dialog { border-radius: 0; }
  .reading-page { margin-top: 165px; }
  .reading-identity { gap: 17px; margin-bottom: 38px; }
  .reading-glyph { width: 62px; min-width: 62px; }
}

@media (max-width: 360px) {
  .browser-shell.has-origin .browser-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
  }
  .browser-shell.has-origin .header-actions { display: contents; }
  .browser-shell.has-origin .original-reading {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
  }
  .browser-shell.has-origin .language-toggle { grid-column: 2; grid-row: 1; }
  .browser-shell.has-origin .browser-content { height: calc(100dvh - 98px); }
  .original-reading { max-width: 43vw; }
  .browser-shell.has-origin .original-reading { max-width: 100%; }
  .proto-picker-item { padding: 0 9px; }
  .proto-picker-replay { padding: 0 8px; }
}

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