/* ─────────────────────────────────────────────────────────────
   SmurfVillage — "Apple bells & whistles" enhancements
   - Cross-document View Transitions (cart art morph)
   - Magnetic library cards (3D tilt + specular sheen)
   - Dynamic Island mini-player
   - System-color page chrome (filter-driven accent retint)
   - Scroll-driven storytelling (CSS scroll/view timelines)
   - Count-up on stat enter
   Layered on top of the existing shell; nothing here removes
   features — only refines feel.
───────────────────────────────────────────────────────────── */

/* ─── 1. Cross-document View Transitions ─────────────────── */
@view-transition { navigation: auto; }

::view-transition-group(cart-art){
  animation-duration: .55s;
  animation-timing-function: cubic-bezier(.2,.7,.15,1);
}
::view-transition-old(cart-art),
::view-transition-new(cart-art){
  animation-duration: .55s;
  animation-timing-function: cubic-bezier(.2,.7,.15,1);
  /* Avoid a fade through grey by overlapping start/end */
  mix-blend-mode: normal;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.2,.7,.15,1);
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation: none !important;
  }
}

/* ─── 2. Magnetic library cards ──────────────────────────── */
/* Motion is gated by html.fx-allow (set by apple-bells.js when motion is OK).
   This keeps reduced-motion users untouched and gives us one override knob. */
:root.fx-allow .card{
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --mx: 50%;
  --my: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
:root.fx-allow .card.is-tilting{
  transform:
    perspective(1000px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(-8px)
    translateZ(0) !important;
  transition: transform 80ms linear,
              box-shadow .35s var(--ease),
              border-color .35s var(--ease) !important;
  border-color: var(--line-2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 36px 70px -28px rgba(0,0,0,.88),
    0 18px 42px -18px var(--accent-glow, var(--glow));
}
:root.fx-allow .card.is-tilting .card-art img{
  transform: scale(1.08) translateZ(34px) rotate(-1.5deg) !important;
  transition: transform 120ms linear !important;
}
.card-sheen{
  position:absolute; inset:0; pointer-events:none;
  border-radius: inherit;
  z-index: 3;
  opacity: 0;
  transition: opacity .25s ease;
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
  mix-blend-mode: screen;
}
:root[data-theme="light"] .card-sheen,
:root:not([data-theme="dark"]) .card-sheen{
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,.60), rgba(255,255,255,0) 55%);
}
:root.fx-allow .card.is-tilting .card-sheen{ opacity: 1 }

/* Touch press feel — no tilt, but a tactile press */
@media (hover: none){
  .card{ transition: transform .25s var(--ease) }
  .card:active{ transform: scale(.97) }
}

/* ─── 3. Dynamic Island mini-player ──────────────────────── */
.sv-island{
  position: fixed;
  left: 50%;
  top: calc(var(--nav-h, 56px) + env(safe-area-inset-top, 0px) + 12px);
  transform: translateX(-50%) translateY(-160%) scale(.85);
  z-index: 49;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 7px 7px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-elev, #0b0f1a) 70%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--line-2, rgba(255,255,255,.14));
  box-shadow:
    0 18px 40px -16px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.04) inset;
  color: var(--ink, #fff);
  opacity: 0;
  pointer-events: none;
  transition:
    transform .6s cubic-bezier(.22, 1.4, .36, 1),
    opacity .32s ease;
  max-width: min(420px, calc(100vw - 24px));
}
:root[data-theme="light"] .sv-island,
:root:not([data-theme="dark"]) .sv-island{
  background: color-mix(in oklab, #ffffff 78%, transparent);
  border-color: rgba(15,22,38,.12);
  box-shadow:
    0 18px 40px -16px rgba(15,22,38,.22),
    0 1px 0 rgba(255,255,255,.5) inset;
}
.sv-island.is-open{
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.sv-island-cart{
  position: relative;
  width: 38px; height: 38px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  flex-shrink: 0;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.55);
}
.sv-island-cart img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sv-island-pulse{
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #34C759;
  border: 2px solid var(--bg-elev, #0b0f1a);
  box-shadow: 0 0 0 0 rgba(52,199,89,.55);
  animation: svIslandPulse 2.4s ease-out infinite;
}
:root[data-theme="light"] .sv-island-pulse,
:root:not([data-theme="dark"]) .sv-island-pulse{
  border-color: #fff;
}
@keyframes svIslandPulse{
  0%   { box-shadow: 0 0 0 0 rgba(52,199,89,.55) }
  70%  { box-shadow: 0 0 0 7px rgba(52,199,89,0) }
  100% { box-shadow: 0 0 0 0 rgba(52,199,89,0) }
}
.sv-island-text{
  display: flex; flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.sv-island-eyebrow{
  font-family: ui-monospace,"SF Mono",Menlo,monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint, #4A5266);
  font-weight: 500;
  margin-bottom: 2px;
}
.sv-island-title{
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.sv-island-cta{
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 4px;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-hi, var(--sapphire-hi)), var(--accent, var(--sapphire)));
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 6px 14px -6px var(--accent-glow, var(--glow));
  transition: transform .22s var(--ease);
}
.sv-island-cta:hover{ transform: translateY(-1px) }
.sv-island-cta svg{ width: 11px; height: 11px }

@media (max-width: 640px){
  .sv-island{
    top: calc(var(--nav-h, 56px) + env(safe-area-inset-top, 0px) + 8px);
    padding: 6px 6px 6px 12px;
    gap: 10px;
  }
  .sv-island-cart{ width: 32px; height: 32px; border-radius: 9px }
  .sv-island-title{ max-width: 120px; font-size: 13px }
  .sv-island-eyebrow{ font-size: 9.5px }
  .sv-island-cta{ padding: 7px 11px; font-size: 12.5px }
}

@media (prefers-reduced-motion: reduce){
  .sv-island{ transition: opacity .25s ease }
  .sv-island-pulse{ animation: none }
}

/* ─── 4. System-color page chrome ────────────────────────── */
@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #2C7BFF;
}
@property --accent-hi {
  syntax: '<color>';
  inherits: true;
  initial-value: #6FA5FF;
}
@property --accent-glow {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(44, 123, 255, 0.35);
}

:root{
  --accent: var(--sapphire);
  --accent-hi: var(--sapphire-hi);
  --accent-glow: var(--glow);
  transition:
    --accent .7s cubic-bezier(.2,.7,.15,1),
    --accent-hi .7s cubic-bezier(.2,.7,.15,1),
    --accent-glow .7s cubic-bezier(.2,.7,.15,1);
}
:root[data-sys="GB"]{
  --accent: #2EB872;
  --accent-hi: #9EE493;
  --accent-glow: rgba(46, 184, 114, 0.36);
}
:root[data-sys="GBC"]{
  --accent: #E69430;
  --accent-hi: #FFD08A;
  --accent-glow: rgba(255, 180, 84, 0.40);
}
:root[data-sys="GBA"]{
  --accent: #A170D8;
  --accent-hi: #C792EA;
  --accent-glow: rgba(176, 122, 224, 0.42);
}
:root[data-sys="NDS"]{
  --accent: #E55289;
  --accent-hi: #FF7AB6;
  --accent-glow: rgba(255, 106, 159, 0.42);
}
:root[data-sys="TET"]{
  --accent: #2C7BFF;
  --accent-hi: #BFD6FF;
  --accent-glow: rgba(111, 165, 255, 0.48);
}

/* Pipe accent into the existing chrome that referenced sapphire directly */
.hero h1 em{
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.btn-primary{
  background: linear-gradient(180deg, var(--accent-hi), var(--accent)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 8px 24px -8px var(--accent-glow),
    0 2px 10px -2px rgba(0,0,0,.5) !important;
}
.btn-primary:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 14px 36px -10px var(--accent-glow),
    0 4px 14px -2px rgba(0,0,0,.6) !important;
}
.eyebrow{ color: var(--accent-hi) !important }
.eyebrow::before{ background: var(--accent-hi) !important }
.brand .dot{
  background: var(--accent) !important;
  box-shadow: 0 0 14px var(--accent-glow) !important;
}
.hero-art::before{
  background: radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 65%) !important;
}
.chip.is-active{
  background: linear-gradient(180deg, var(--accent-hi), var(--accent)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -8px var(--accent-glow);
}
.card-play{ color: var(--accent-hi) !important }
.card:focus-visible{
  outline-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
.nav-cta:hover{
  border-color: var(--accent-hi) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
}
.hero-status .hero-mini b,
.dock-eyebrow{ color: var(--accent-hi) }
.stat-n em{ color: var(--accent-hi) !important }
.nav-iconbtn:hover{
  color: var(--accent-hi) !important;
  border-color: var(--accent-hi) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
}

/* ─── 5. Scroll-driven storytelling ──────────────────────── */
@supports (animation-timeline: scroll()){
  :root.fx-allow .hero-cart{
    animation: svHeroCartScrub linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 60vh;
  }
  @keyframes svHeroCartScrub{
    0%   { rotate: -2.5deg; scale: 1;   translate: 0 0 }
    100% { rotate: 0deg;    scale: .94; translate: 0 -22px }
  }
  :root.fx-allow .hero-copy{
    animation: svHeroCopyParallax linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 70vh;
  }
  @keyframes svHeroCopyParallax{
    0%   { translate: 0 0;     opacity: 1 }
    100% { translate: 0 -40px; opacity: .55 }
  }
  :root.fx-allow .player-dock > .dock-card,
  :root.fx-allow .systems > .sys{
    animation: svSectionRise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
  @keyframes svSectionRise{
    from{ opacity: 0; transform: translateY(28px) }
    to  { opacity: 1; transform: translateY(0) }
  }
}

/* Count-up flourish */
.stat-n.is-counting{ font-variant-numeric: tabular-nums }
.stat-n.is-counted{ animation: svCountPulse .6s cubic-bezier(.2,.7,.15,1) }
@keyframes svCountPulse{
  0%   { transform: scale(.94); opacity: .55 }
  60%  { transform: scale(1.04); opacity: 1 }
  100% { transform: scale(1); opacity: 1 }
}

/* ─── 5.5 Scroll edge effect — content fades into the nav glass ─ */
.sv-scroll-edge{
  position: fixed;
  top: calc(var(--nav-h, 56px) + env(safe-area-inset-top, 0px));
  left: 0; right: 0;
  height: 80px;
  z-index: 48;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--bg, #05070D) 88%, transparent) 0%,
    color-mix(in oklab, var(--bg, #05070D) 55%, transparent) 35%,
    color-mix(in oklab, var(--bg, #05070D) 20%, transparent) 70%,
    transparent 100%);
  opacity: 0;
  transition: opacity .35s cubic-bezier(.2,.7,.15,1);
}
.sv-scroll-edge.is-active{ opacity: 1 }

/* ─── 5.6 Internal glow on interaction (true Liquid Glass illumination) ─ */
/* NOTE: .sv-settings-btn is intentionally omitted — it must remain
   position:fixed (already a containing block for its ::after). */
:root.fx-allow .card,
:root.fx-allow .feat-cart,
:root.fx-allow .sv-island-cta,
:root.fx-allow .btn,
:root.fx-allow .chip{
  position: relative;
}
:root.fx-allow .card::after,
:root.fx-allow .feat-cart::after,
:root.fx-allow .sv-island-cta::after,
:root.fx-allow .sv-settings-btn::after,
:root.fx-allow .btn::after,
:root.fx-allow .chip::after{
  content: '';
  position: absolute;
  top: var(--ig-y, 50%); left: var(--ig-x, 50%);
  width: 0; height: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--card-glow, var(--accent-glow, rgba(255,255,255,.4))) 90%, white) 0%,
    transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 4;
}
:root.fx-allow .card.is-igniting::after,
:root.fx-allow .feat-cart.is-igniting::after,
:root.fx-allow .sv-island-cta.is-igniting::after,
:root.fx-allow .sv-settings-btn.is-igniting::after,
:root.fx-allow .btn.is-igniting::after,
:root.fx-allow .chip.is-igniting::after{
  animation: svInternalGlow .55s cubic-bezier(.2,.7,.15,1) forwards;
}
@keyframes svInternalGlow{
  0%   { width: 0;     height: 0;     opacity: .9 }
  60%  { opacity: .65 }
  100% { width: 240px; height: 240px; opacity: 0 }
}

/* ─── 5.7 Reduced-transparency fallback (WWDC accessibility) ─── */
@media (prefers-reduced-transparency: reduce){
  .nav,
  .drawer,
  .sv-island,
  .sv-settings-panel,
  .sv-settings-btn,
  .dock-card{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav{
    background: var(--bg, #05070D) !important;
  }
  :root[data-theme="light"] .nav,
  :root:not([data-theme="dark"]) .nav{
    background: var(--bg-elev, #ffffff) !important;
  }
  .drawer{
    background: var(--bg-elev, #0B0F1A) !important;
  }
  .sv-island,
  .sv-settings-panel,
  .sv-settings-btn{
    background: var(--bg-elev, #0B0F1A) !important;
  }
  :root[data-theme="light"] .sv-island,
  :root[data-theme="light"] .sv-settings-panel,
  :root[data-theme="light"] .sv-settings-btn,
  :root:not([data-theme="dark"]) .sv-island,
  :root:not([data-theme="dark"]) .sv-settings-panel,
  :root:not([data-theme="dark"]) .sv-settings-btn{
    background: #ffffff !important;
  }
  .dock-card{
    background: var(--bg-card, #0E1320) !important;
  }
  :root[data-theme="light"] .dock-card,
  :root:not([data-theme="dark"]) .dock-card{
    background: #ffffff !important;
  }
  /* Internal glow off — distracting with reduced transparency */
  .card.is-igniting::after,
  .feat-cart.is-igniting::after,
  .sv-island-cta.is-igniting::after,
  .sv-settings-btn.is-igniting::after,
  .btn.is-igniting::after,
  .chip.is-igniting::after{
    animation: none !important;
    display: none !important;
  }
}

/* ─── 6. Card sheen on play page covers (mirrors source) ─── */
#load-cover,
#launch-cover{
  view-transition-name: cart-art;
}

/* ─── 6.5 Boot splash ─────────────────────────────────────── */
.sv-boot{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--bg, #05070D);
  pointer-events: none;
  transition: opacity .55s cubic-bezier(.2,.7,.15,1);
}
:root[data-theme="light"] .sv-boot,
:root:not([data-theme="dark"]) .sv-boot{ background: var(--bg, #fbfbfd) }
.sv-boot.is-leaving{ opacity: 0 }
.sv-boot.is-gone{ display: none }
.sv-boot-mark{
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -.02em;
  color: var(--ink);
  opacity: 0;
  animation: svBootMark 1s cubic-bezier(.2,.7,.15,1) .05s both;
}
.sv-boot-mark .dot{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--sapphire, #2C7BFF);
  box-shadow: 0 0 22px var(--glow, rgba(44,123,255,.4));
  transform: scale(0);
  animation: svBootDot 1s cubic-bezier(.22,1.6,.36,1) both;
}
.sv-boot-mark i{
  font-style: italic;
  color: var(--sapphire-hi, #6FA5FF);
  font-weight: 400;
}
@keyframes svBootMark{
  0%   { opacity: 0; transform: translateY(8px); filter: blur(6px) }
  40%  { opacity: 1; filter: blur(0) }
  100% { opacity: 1; transform: translateY(0); filter: blur(0) }
}
@keyframes svBootDot{
  0%   { transform: scale(0) }
  50%  { transform: scale(1.18) }
  100% { transform: scale(1) }
}
/* Boot splash respects motion gate via JS — element is only inserted when
   motionOK is true, so no CSS suppression needed here. */

/* ─── 7. Nav wake-on-scroll ───────────────────────────────── */
.nav{
  transition:
    border-bottom-color .35s cubic-bezier(.2,.7,.15,1),
    box-shadow .35s cubic-bezier(.2,.7,.15,1),
    background .35s cubic-bezier(.2,.7,.15,1);
}
.nav.is-scrolled{
  border-bottom-color: var(--line-2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.03) inset,
    0 12px 28px -22px rgba(0,0,0,.7);
  background: color-mix(in oklab, var(--bg, #05070D) 82%, transparent);
}
:root[data-theme="light"] .nav.is-scrolled,
:root:not([data-theme="dark"]) .nav.is-scrolled{
  background: color-mix(in oklab, #ffffff 88%, transparent);
  border-bottom-color: rgba(15,22,38,.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 10px 22px -18px rgba(15,22,38,.32);
}

/* ─── 8. Smarter focus state on cards using current accent ─ */
.card:focus-visible{
  outline: 2px solid var(--accent, var(--sapphire));
  outline-offset: 3px;
}

/* ─── 9a. Magnetic + sheen — extended to hero cart & dock ─ */
:root.fx-allow .hero-cart,
:root.fx-allow .dock-card{
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --mx: 50%;
  --my: 50%;
  transform-style: preserve-3d;
  position: relative;
}
/* Hero cart already has its own rotate+float animation. Layer the tilt on top
   only while pointer is active, and respect the existing -2.5deg rest pose. */
:root.fx-allow .hero-cart.is-tilting{
  transform:
    perspective(1100px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    rotate(-2.5deg)
    translateZ(0) !important;
  transition: transform 90ms linear !important;
  animation-play-state: paused;
}
:root.fx-allow .dock-card.is-tilting{
  transform:
    perspective(1100px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(-4px)
    translateZ(0) !important;
  transition: transform 80ms linear,
              box-shadow .35s var(--ease),
              border-color .35s var(--ease) !important;
  border-color: var(--line-2) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 24px 50px -28px rgba(0,0,0,.7),
    0 14px 30px -18px var(--accent-glow, var(--glow)) !important;
}
/* Sheen for the hero cart + dock — same .card-sheen class */
.hero-cart > .card-sheen,
.dock-card > .card-sheen{ z-index: 5; }
.dock-card{ overflow: hidden; }

/* ─── 9b. Spring-press depth on every interactive surface ─ */
:root.fx-allow .btn,
:root.fx-allow .chip,
:root.fx-allow .dock-link,
:root.fx-allow .sv-island-cta,
:root.fx-allow .nav-iconbtn,
:root.fx-allow .hero-action,
:root.fx-allow .drawer-cell,
:root.fx-allow .drawer-cta,
:root.fx-allow .nav-cta,
:root.fx-allow .hero-mini{
  transition:
    transform .18s cubic-bezier(.32,.72,0,1),
    box-shadow .22s var(--ease),
    background .22s var(--ease),
    border-color .22s var(--ease),
    color .22s var(--ease);
}
:root.fx-allow .btn:active,
:root.fx-allow .chip:active,
:root.fx-allow .dock-link:active,
:root.fx-allow .sv-island-cta:active,
:root.fx-allow .nav-iconbtn:active,
:root.fx-allow .hero-action:active,
:root.fx-allow .drawer-cell:active,
:root.fx-allow .drawer-cta:active,
:root.fx-allow .nav-cta:active{
  transform: translateY(1px) scale(.985);
  transition: transform 80ms cubic-bezier(.32,.72,0,1) !important;
}
/* Primary buttons get a brief inset darken on press for that physical click */
:root.fx-allow .btn-primary:active,
:root.fx-allow .sv-island-cta:active,
:root.fx-allow .drawer-cta:active{
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 2px 6px -2px rgba(0,0,0,.6),
    0 4px 14px -8px var(--accent-glow, var(--glow)) !important;
}

/* ─── 9c. Featured cart highlight (ring only — overflow:hidden on .card
    means a top-eyebrow badge gets clipped, so we use a glowing ring instead) */
.card.is-featured{
  position: relative;
  box-shadow:
    0 0 0 1.5px var(--accent, var(--sapphire)),
    0 24px 48px -28px rgba(0,0,0,.85),
    0 14px 36px -18px var(--accent-glow, var(--glow)) !important;
  border-color: transparent !important;
}
/* A subtle inner glow in the cover area, so the ring doesn't look like just a focus state */
.card.is-featured .card-art::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, var(--accent-glow, transparent), transparent 55%);
  opacity: .85;
}

/* ─── 9d. Dynamic Island — compact when scrolled deep ───── */
.sv-island.is-compact{
  padding: 6px 8px 6px 6px;
  gap: 0;
}
.sv-island.is-compact .sv-island-text,
.sv-island.is-compact .sv-island-cta{
  max-width: 0;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity .25s ease, max-width .35s var(--ease),
              padding .25s var(--ease), margin-left .25s ease;
}
.sv-island:not(.is-compact) .sv-island-text,
.sv-island:not(.is-compact) .sv-island-cta{
  max-width: 280px;
  opacity: 1;
  transition: opacity .35s ease .1s, max-width .35s var(--ease);
}
.sv-island.is-compact:hover{
  /* Hovering the compact pill expands it back */
  padding: 7px 7px 7px 14px;
  gap: 12px;
}
.sv-island.is-compact:hover .sv-island-text,
.sv-island.is-compact:hover .sv-island-cta{
  max-width: 280px;
  opacity: 1;
}

/* ─── 9e. Liquid-Glass dock cards ─────────────────────────── */
.dock-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
    color-mix(in oklab, var(--bg-card) 80%, transparent) !important;
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-color: color-mix(in srgb, var(--line) 70%, var(--line-2)) !important;
  position: relative;
  overflow: hidden;
}
.dock-card::after{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 40%, rgba(255,255,255,.12) 60%, transparent);
  pointer-events: none;
}
:root[data-theme="light"] .dock-card,
:root:not([data-theme="dark"]) .dock-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 40%),
    color-mix(in oklab, #ffffff 88%, transparent) !important;
}
:root[data-theme="light"] .dock-card::after,
:root:not([data-theme="dark"]) .dock-card::after{
  background: linear-gradient(90deg, transparent, rgba(15,22,38,.06) 40%, rgba(15,22,38,.06) 60%, transparent);
}

/* ─── 9. Hero intro: gentle rise on first paint ──────────── */
:root.fx-allow .hero-copy > *{
  animation: svHeroIntroChild .8s cubic-bezier(.2,.7,.15,1) both;
}
:root.fx-allow .hero-copy > :nth-child(1){ animation-delay: 0s }
:root.fx-allow .hero-copy > :nth-child(2){ animation-delay: .08s }
:root.fx-allow .hero-copy > :nth-child(3){ animation-delay: .16s }
:root.fx-allow .hero-copy > :nth-child(4){ animation-delay: .24s }
:root.fx-allow .hero-copy > :nth-child(5){ animation-delay: .32s }
:root.fx-allow .hero-art{
  animation: svHeroArtIntro 1.1s cubic-bezier(.2,.7,.15,1) both;
  animation-delay: .12s;
}
@keyframes svHeroIntroChild{
  from{ opacity: 0; transform: translateY(18px) }
  to  { opacity: 1; transform: translateY(0) }
}
@keyframes svHeroArtIntro{
  from{ opacity: 0; transform: translateY(28px) scale(.96) }
  to  { opacity: 1; transform: translateY(0) scale(1) }
}

/* ─── 9e2. Per-system card glow (each cart wears its generation) ─ */
.card.sys-GB  { --card-glow: rgba(46, 184, 114, .42) }
.card.sys-GBC { --card-glow: rgba(255, 180, 84, .46) }
.card.sys-GBA { --card-glow: rgba(176, 122, 224, .48) }
.card.sys-NDS { --card-glow: rgba(255, 106, 159, .48) }
.card.sys-TET { --card-glow: rgba(111, 165, 255, .55) }
/* Override magnetic glow with the system glow */
:root.fx-allow .card.is-tilting{
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 36px 70px -28px rgba(0,0,0,.88),
    0 18px 42px -18px var(--card-glow, var(--accent-glow)) !important;
}
/* Hover (non-tilting fallback) also picks up the system glow */
.card:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 48px -28px rgba(0,0,0,.85),
    0 12px 30px -18px var(--card-glow, var(--glow));
}
/* Card "Play →" arrow uses system color */
.card.sys-GB  .card-play{ color: #9EE493 !important }
.card.sys-GBC .card-play{ color: #FFD08A !important }
.card.sys-GBA .card-play{ color: #C792EA !important }
.card.sys-NDS .card-play{ color: #FF7AB6 !important }
.card.sys-TET .card-play{ color: #BFD6FF !important }
/* Per-system focus ring */
.card.sys-GB:focus-visible  { outline-color: #2EB872 !important }
.card.sys-GBC:focus-visible { outline-color: #E69430 !important }
.card.sys-GBA:focus-visible { outline-color: #A170D8 !important }
.card.sys-NDS:focus-visible { outline-color: #E55289 !important }
.card.sys-TET:focus-visible { outline-color: #2C7BFF !important }

/* ─── 9f. Aurora — body ambient retints with system accent ─ */
/* The original body::before is a static sapphire wash. We overlay an extra
   layer that uses --accent-glow, so when [data-sys] flips, the whole page
   breathes a new color. Keeps the original wash for fallback depth. */
:root.fx-allow body::before{
  background:
    radial-gradient(1100px 600px at 75% -10%, var(--accent-glow, rgba(44,123,255,.16)), transparent 60%),
    radial-gradient(900px 700px at 8% 25%,   color-mix(in oklab, var(--accent-hi, #6FA5FF) 28%, transparent), transparent 65%),
    radial-gradient(700px 500px at 50% 110%, var(--accent-glow, rgba(44,123,255,.10)), transparent 70%);
  transition: background 1s cubic-bezier(.2,.7,.15,1);
}
/* Light theme — light bg swallows subtle tints. Boost saturation + opacity. */
:root[data-theme="light"].fx-allow body::before,
:root:not([data-theme="dark"]).fx-allow body::before{
  background:
    radial-gradient(1300px 700px at 78% -8%,
      color-mix(in oklab, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(1000px 800px at 6% 22%,
      color-mix(in oklab, var(--accent-hi) 14%, transparent), transparent 65%),
    radial-gradient(800px 600px at 50% 112%,
      color-mix(in oklab, var(--accent) 12%, transparent), transparent 72%),
    radial-gradient(60% 60% at 50% 0%, rgba(255,255,255,.6), transparent 70%);
}

/* ─── 9g. Edge vignette (top + bottom) ───────────────────── */
.sv-vignette{
  position: fixed; inset: 0; pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.32), transparent 12%, transparent 88%, rgba(0,0,0,.42)),
    radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.20));
  mix-blend-mode: multiply;
}
:root[data-theme="light"] .sv-vignette,
:root:not([data-theme="dark"]) .sv-vignette{
  background:
    linear-gradient(180deg, rgba(15,22,38,.04), transparent 12%, transparent 88%, rgba(15,22,38,.06)),
    radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(15,22,38,.04));
  mix-blend-mode: normal;
}

/* ─── 9h. Scroll progress fuel-gauge ─────────────────────── */
.sv-progress{
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 60;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent, #2C7BFF) 80%, transparent) 30%, color-mix(in srgb, var(--accent-hi, #6FA5FF) 90%, transparent) 60%, transparent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .12s linear, opacity .3s ease;
  opacity: 0;
  filter: drop-shadow(0 0 6px var(--accent-glow, rgba(44,123,255,.4)));
}
.sv-progress.is-active{ opacity: 1 }

/* ─── 9i. Arcade overdrive (Konami code) ─────────────────── */
:root.is-overdrive{
  --accent-glow: rgba(155, 245, 255, .55) !important;
}
:root.is-overdrive .brand .dot{
  animation: svOverdriveDot .55s cubic-bezier(.22,1.6,.36,1) infinite;
}
@keyframes svOverdriveDot{
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px var(--accent-glow)) }
  50%      { transform: scale(1.35); filter: drop-shadow(0 0 28px var(--accent-glow)) }
}
:root.is-overdrive .glyph,
:root.is-overdrive .stat-n,
:root.is-overdrive .hero-status .hero-mini b{
  animation: svOverdriveBounce .65s cubic-bezier(.22,1.6,.36,1);
}
@keyframes svOverdriveBounce{
  0%   { transform: scale(1) rotate(0) }
  30%  { transform: scale(1.35) rotate(-10deg) }
  70%  { transform: scale(.92) rotate(6deg) }
  100% { transform: scale(1) rotate(0) }
}
:root.is-overdrive body::before{
  filter: saturate(1.6) brightness(1.15);
  animation: svOverdriveAura 1.2s ease-in-out;
}
@keyframes svOverdriveAura{
  0%, 100% { filter: saturate(1.0) brightness(1) }
  50%      { filter: saturate(2.5) brightness(1.3) }
}

/* "1UP" overdrive toast */
.sv-overdrive-toast{
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  z-index: 9998;
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-size: 64px;
  font-weight: 500;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, var(--accent-hi, #6FA5FF), var(--accent, #2C7BFF));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 8px 32px var(--accent-glow));
  animation: svOverdriveToast 1.6s cubic-bezier(.22,1.6,.36,1) forwards;
}
.sv-overdrive-toast i{ font-style: italic; font-weight: 400 }
@keyframes svOverdriveToast{
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7) }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) }
  35%  { transform: translate(-50%, -50%) scale(1) }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1) }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1.05) }
}

/* ─── 9k. Settings control-center panel ─────────────────── */
.sv-settings-btn{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 65;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--bg-elev, #0b0f1a) 70%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--line-2, rgba(255,255,255,.14));
  color: var(--ink);
  cursor: pointer;
  box-shadow:
    0 10px 24px -10px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset;
  transition:
    transform .25s cubic-bezier(.22,1.6,.36,1),
    background .22s ease,
    border-color .22s ease;
}
:root[data-theme="light"] .sv-settings-btn,
:root:not([data-theme="dark"]) .sv-settings-btn{
  background: color-mix(in oklab, #ffffff 78%, transparent);
  border-color: rgba(15,22,38,.12);
  box-shadow:
    0 10px 24px -10px rgba(15,22,38,.18),
    0 1px 0 rgba(255,255,255,.6) inset;
}
.sv-settings-btn:hover{
  transform: translateY(-2px) rotate(40deg);
  border-color: var(--accent-hi);
  color: var(--accent-hi);
}
.sv-settings-btn svg{ width: 20px; height: 20px }
@media (max-width: 640px){
  .sv-settings-btn{ right: 16px; bottom: 16px; width: 44px; height: 44px }
}

.sv-settings-panel{
  position: fixed;
  right: 24px;
  bottom: 86px;
  z-index: 64;
  width: min(320px, calc(100vw - 48px));
  border-radius: 18px;
  padding: 16px;
  background: color-mix(in oklab, var(--bg-elev, #0b0f1a) 82%, transparent);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--line-2, rgba(255,255,255,.14));
  box-shadow:
    0 24px 56px -28px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.04) inset;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22, 1.6, .36, 1);
}
:root[data-theme="light"] .sv-settings-panel,
:root:not([data-theme="dark"]) .sv-settings-panel{
  background: color-mix(in oklab, #ffffff 88%, transparent);
  border-color: rgba(15,22,38,.12);
  box-shadow:
    0 24px 56px -28px rgba(15,22,38,.22),
    0 1px 0 rgba(255,255,255,.65) inset;
}
.sv-settings-panel.is-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sv-settings-head{
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint, #4A5266);
  font-weight: 500;
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.sv-settings-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px;
  gap: 12px;
}
.sv-settings-row + .sv-settings-row{ margin-top: 2px }
.sv-settings-label{
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
}
.sv-settings-seg{
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg-card, #0E1320) 70%, transparent);
  padding: 3px;
  gap: 2px;
}
:root[data-theme="light"] .sv-settings-seg,
:root:not([data-theme="dark"]) .sv-settings-seg{
  background: color-mix(in oklab, #f5f5f7 70%, transparent);
}
.sv-settings-seg button{
  border: 0;
  background: transparent;
  color: var(--ink-dim, #8993A8);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -.005em;
  transition: color .2s ease, background .2s ease;
}
.sv-settings-seg button:hover{ color: var(--ink) }
.sv-settings-seg button.is-on{
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: #fff;
  box-shadow: 0 4px 10px -4px var(--accent-glow);
}

/* Slide-toggle switch */
.sv-toggle{
  position: relative;
  width: 44px; height: 26px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-card) 60%, transparent);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease;
}
.sv-toggle::after{
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink-dim, #8993A8);
  transition: transform .25s cubic-bezier(.22, 1.6, .36, 1), background .22s ease;
}
.sv-toggle.is-on{
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: transparent;
  box-shadow: 0 4px 10px -4px var(--accent-glow);
}
.sv-toggle.is-on::after{
  transform: translateX(18px);
  background: #fff;
}

/* ─── 9l. CoverFlow featured rail ─────────────────────────── */
.featured-rail{
  position: relative;
  margin: 0 auto 36px;
  padding: 28px 0 8px;
  perspective: 1400px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  min-height: 360px;
  isolation: isolate;
}
.featured-rail-eyebrow{
  position: absolute;
  top: 0; left: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-hi, var(--sapphire-hi));
  font-weight: 500;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.featured-rail-eyebrow::after{
  content:''; width: 30px; height: 1px;
  background: var(--accent-hi, var(--sapphire-hi));
  display: inline-block;
}
.feat-cart{
  position: relative;
  width: 220px;
  aspect-ratio: 3/4;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
  transition:
    transform .55s cubic-bezier(.22, 1.6, .36, 1),
    filter .35s ease,
    box-shadow .35s ease;
  cursor: pointer;
  background: var(--card-art-bg);
  border: 1px solid var(--line-2);
  margin: 0 -28px;
  transform-style: preserve-3d;
}
.feat-cart img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.feat-cart-meta{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
  color: #fff;
  z-index: 2;
}
.feat-cart-name{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.012em;
  line-height: 1.05;
}
.feat-cart-sub{
  font-size: 11.5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
}
.feat-cart.is-left{
  transform: translateX(70px) rotateY(38deg) scale(.78);
  filter: brightness(.65) saturate(.85);
  z-index: 1;
}
.feat-cart.is-right{
  transform: translateX(-70px) rotateY(-38deg) scale(.78);
  filter: brightness(.65) saturate(.85);
  z-index: 1;
}
.feat-cart.is-center{
  transform: rotateY(0) scale(1.08) translateZ(40px);
  filter: brightness(1.06);
  z-index: 3;
  box-shadow:
    0 40px 80px -32px rgba(0,0,0,.85),
    0 24px 50px -22px var(--card-glow, var(--accent-glow));
}
.feat-cart.is-center .feat-cart-name{ font-size: 22px }
.feat-cart:hover{
  filter: brightness(1.1);
}
.feat-cart.is-left:hover{
  transform: translateX(60px) rotateY(28deg) scale(.85);
}
.feat-cart.is-right:hover{
  transform: translateX(-60px) rotateY(-28deg) scale(.85);
}
.feat-cart.is-center:hover img{ transform: scale(1.06) }

@media (max-width: 720px){
  .featured-rail{ min-height: 280px; padding: 24px 0 4px }
  .feat-cart{ width: 170px; margin: 0 -22px }
  .feat-cart.is-left,
  .feat-cart.is-right{ transform: translateX(50px) rotateY(34deg) scale(.74) }
  .feat-cart.is-right{ transform: translateX(-50px) rotateY(-34deg) scale(.74) }
}

/* ─── 9j. Hero cart cursor parallax (the image inside reacts) ─ */
:root.fx-allow .hero-cart{
  --hero-px: 0px;
  --hero-py: 0px;
}
:root.fx-allow .hero-cart.is-tilting img{
  transform:
    translate3d(calc(var(--hero-px) * 1px), calc(var(--hero-py) * 1px), 0)
    scale(1.04);
  transition: transform 220ms cubic-bezier(.2,.7,.15,1) !important;
  filter: drop-shadow(0 22px 32px rgba(0,0,0,.5));
}

/* ─── 10. Glyph spring on hover (SF Symbols-style) ───────── */
:root.fx-allow .glyph{
  transition: transform .25s cubic-bezier(.22, 1.6, .36, 1);
  transform-origin: center;
}
:root.fx-allow a:hover > .glyph,
:root.fx-allow button:hover > .glyph,
:root.fx-allow .nav-iconbtn:hover .glyph,
:root.fx-allow .drawer-cell:hover .drawer-cell-icon svg,
:root.fx-allow .eyebrow:hover .glyph,
:root.fx-allow .stat:hover .glyph{
  transform: scale(1.18) rotate(-3deg);
}
:root.fx-allow .drawer-cell .drawer-cell-icon svg,
:root.fx-allow .stat .glyph{
  transition: transform .35s cubic-bezier(.22, 1.6, .36, 1);
}
:root.fx-allow .stat:hover .glyph{ transform: scale(1.2) rotate(8deg) }

/* Bouncier dock title pulse */
:root.fx-allow .dock-title .pulse{
  transition: transform .35s cubic-bezier(.22, 1.6, .36, 1);
}

/* ─── 9l. ⌘K Command Palette (Spotlight-style) ──────────────── */
.sv-palette{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in oklab, #000 36%, transparent);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: max(96px, 12vh) 20px 20px;
  opacity: 0;
  transition: opacity .18s ease;
}
.sv-palette.is-open{ display: flex; opacity: 1 }
:root[data-theme="light"] .sv-palette,
:root:not([data-theme="dark"]) .sv-palette{
  background: color-mix(in oklab, #0b1424 16%, transparent);
}
.sv-palette-card{
  width: min(620px, 100%);
  max-height: min(640px, calc(100vh - 200px));
  display: flex; flex-direction: column;
  border-radius: 20px;
  background: color-mix(in oklab, var(--bg-elev, #0b0f1a) 76%, transparent);
  border: 1px solid var(--line-2, rgba(255,255,255,.14));
  box-shadow:
    0 32px 80px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.05) inset;
  backdrop-filter: saturate(180%) blur(34px);
  -webkit-backdrop-filter: saturate(180%) blur(34px);
  overflow: hidden;
  transform: scale(.96) translateY(-8px);
  opacity: 0;
  transition: transform .22s cubic-bezier(.22,1.6,.36,1), opacity .18s ease;
}
.sv-palette.is-open .sv-palette-card{
  transform: none;
  opacity: 1;
}
:root[data-theme="light"] .sv-palette-card,
:root:not([data-theme="dark"]) .sv-palette-card{
  background: color-mix(in oklab, #ffffff 82%, transparent);
  border-color: rgba(15,22,38,.10);
  box-shadow:
    0 32px 80px -20px rgba(15,22,38,.30),
    0 1px 0 rgba(255,255,255,.6) inset;
}
.sv-palette-input{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.07));
}
.sv-palette-input svg{ width: 18px; height: 18px; color: var(--ink-dim, var(--muted)); flex: none }
.sv-palette-input input{
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font: 500 16px/1.4 var(--body, -apple-system, system-ui, sans-serif);
  color: var(--ink);
  letter-spacing: -.005em;
}
.sv-palette-input input::placeholder{ color: var(--ink-dim, var(--muted)); opacity: .76 }
.sv-palette-input kbd{
  font: 600 10.5px/1 var(--body, -apple-system, system-ui, sans-serif);
  letter-spacing: .08em;
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px solid var(--line-2, rgba(255,255,255,.14));
  background: color-mix(in oklab, var(--surface, #fff) 60%, transparent);
  color: var(--ink-dim, var(--muted));
  text-transform: uppercase;
}
.sv-palette-results{
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  scrollbar-gutter: stable;
}
.sv-palette-results::-webkit-scrollbar{ width: 8px }
.sv-palette-results::-webkit-scrollbar-thumb{ background: var(--line-2, rgba(255,255,255,.14)); border-radius: 999px }
.sv-palette-group{
  display: block;
  font: 600 10.5px/1 var(--body, -apple-system, system-ui, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim, var(--muted));
  padding: 14px 12px 6px;
}
.sv-palette-row{
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
  color: var(--ink);
}
.sv-palette-row:hover,
.sv-palette-row.is-active{
  background: color-mix(in oklab, var(--accent, #2c7bff) 14%, transparent);
}
.sv-palette-row.is-active{
  box-shadow: inset 2px 0 0 var(--accent-hi, var(--accent, #2c7bff));
}
.sv-palette-icon{
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: color-mix(in oklab, var(--accent, #2c7bff) 18%, transparent);
  color: var(--accent-hi, var(--accent, #2c7bff));
}
.sv-palette-icon svg{ width: 15px; height: 15px }
.sv-palette-body{ display: grid; gap: 2px; min-width: 0 }
.sv-palette-title{
  font: 600 14px/1.3 var(--body, -apple-system, system-ui, sans-serif);
  color: var(--ink);
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-palette-sub{
  font: 400 12px/1.3 var(--body, -apple-system, system-ui, sans-serif);
  color: var(--ink-dim, var(--muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-palette-hint{
  font: 600 10.5px/1 var(--body, -apple-system, system-ui, sans-serif);
  color: var(--ink-dim, var(--muted));
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .12s ease;
}
.sv-palette-row.is-active .sv-palette-hint{ opacity: 1 }
.sv-palette-empty{
  padding: 36px 12px;
  text-align: center;
  color: var(--ink-dim, var(--muted));
  font-size: 14px;
}
.sv-palette-empty b{ color: var(--ink); font-weight: 600 }
.sv-palette-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line, rgba(255,255,255,.07));
  font: 500 11.5px/1 var(--body, -apple-system, system-ui, sans-serif);
  color: var(--ink-dim, var(--muted));
}
.sv-palette-foot .sv-palette-tags{ display: inline-flex; gap: 12px; align-items: center }
.sv-palette-foot kbd{
  font: 600 10px/1 var(--body, -apple-system, system-ui, sans-serif);
  padding: 3px 5px;
  border-radius: 4px;
  border: 1px solid var(--line-2, rgba(255,255,255,.14));
  background: color-mix(in oklab, var(--surface, #fff) 60%, transparent);
  color: var(--ink-dim, var(--muted));
  margin-right: 4px;
}
@media (max-width: 540px){
  .sv-palette{ padding: 56px 12px 12px }
  .sv-palette-card{ max-height: calc(100vh - 80px) }
  .sv-palette-input{ padding: 14px }
  .sv-palette-input input{ font-size: 16px }
  .sv-palette-row{ grid-template-columns: 26px 1fr; padding: 10px 10px }
  .sv-palette-hint{ display: none }
}