/* Generated from landing-src/styles.css by landing-src/build-assets.py — edit the source, never this file. */








@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/syne-var.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/outfit-var.woff2") format("woff2");
}













@font-face {
  font-family: "Syne fallback";
  src: local("Arial Bold"), local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 113.17%;
  ascent-override: 82.8%;
  descent-override: 22.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Outfit fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 98.04%;
  ascent-override: 102%;
  descent-override: 25.5%;
  line-gap-override: 0%;
}



:root {

  --bg:           hsl(220, 15%, 6%);
  --bg-surface:   hsl(220, 15%, 10%);
  --bg-elevated:  hsl(220, 15%, 14%);
  --band:         hsl(220, 15%, 3.5%);
  --text:         hsl(220, 10%, 88%);
  --text-muted:   hsl(220, 8%, 55%);


  --accent:       hsl(180, 70%, 55%);
  --accent-dim:   hsla(180, 70%, 55%, 0.15);
  --accent-glow:  hsla(180, 70%, 55%, 0.25);







  --border:       hsl(220, 15%, 28%);





  --accent-text:  var(--accent);
  --accent-solid: var(--accent);




  --wave-l:       58%;
  --wave-a:       0.5;






  --card-lift:    0 10px 26px rgba(0, 0, 0, 0.34);


  --dev-bezel:    clamp(4px, 0.9vw, 9px);

  --dev-frame:    hsl(220, 10%, 22%);
  --dev-frame-lit: hsl(220, 9%, 38%);
  --dev-edge:     hsl(220, 12%, 13%);


  --max-width: 1120px;
  --px: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;











  --z-edge:    10;
  --z-float:   20;
  --z-grain:   30;
  --z-header:  40;
  --z-sheet:   50;
  --z-overlay: 60;
  --z-skip:    70;




  --anchor-room: 1.5rem;


  --font-display: 'Syne', 'Syne fallback', sans-serif;
  --font-body:    'Outfit', 'Outfit fallback', sans-serif;
  --fs-hero:   clamp(2rem, 6vw, 5rem);
  --fs-h2:     clamp(1.75rem, 4vw, 2.75rem);
  --fs-h3:     1.05rem;



  --fs-section: 1.45rem;
  --fs-sub:     1.2rem;
  --fs-body:   1.05rem;
  --fs-small:  0.85rem;
  --fs-table:  0.92rem;


  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;
}

[data-theme="light"] {




  --bg:           hsl(216, 16%, 87%);
  --bg-surface:   hsl(210, 40%, 98%);
  --bg-elevated:  hsl(0, 0%, 100%);
  --band:         hsl(216, 16%, 82%);
  --text:         hsl(220, 24%, 13%);
  --text-muted:   hsl(220, 12%, 35%);



  --accent:       hsl(180, 72%, 29%);
  --accent-dim:   hsla(180, 72%, 29%, 0.35);
  --accent-glow:  hsla(180, 72%, 29%, 0.20);




  --border:       hsl(216, 16%, 44%);
  --accent-text:  hsl(180, 72%, 21%);
  --accent-solid: var(--accent-text);
  --wave-l:       36%;
  --wave-a:       0.85;
  --card-lift:    0 2px 4px rgba(25, 35, 50, 0.07), 0 14px 30px rgba(25, 35, 50, 0.13);
  --dev-frame:    hsl(220, 8%, 74%);
  --dev-frame-lit: hsl(220, 8%, 55%);
  --dev-edge:     hsl(220, 8%, 55%);
}





[data-theme="light"] .product-card,
[data-theme="light"] .carousel-card {
  box-shadow: 0 1px 2px rgba(25, 35, 50, 0.05), 0 8px 20px rgba(25, 35, 50, 0.07);
}
[data-theme="light"] .product-icon {
  box-shadow: 0 2px 4px rgba(25, 35, 50, 0.10), 0 8px 18px rgba(25, 35, 50, 0.14);
}









:where(a, button, [tabindex="0"], input, textarea, select):focus-visible { border-radius: 4px; }









html:not(.js) :is(.theme-toggle, .a11y-toggle, .kb-ask, .cmd-filter, .carousel-controls, .fnd-form, .player) {
  display: none;
}



*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg);
  height: 100%;
}

html, body {
  overflow: hidden;
  height: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow-x: hidden;
  padding: 0 !important;
  margin: 0;
}

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: color 0.2s;
}







html a:hover {
  color: var(--text);
}



body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}



.app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.app-content {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.app-content::after {
  content: '';
  position: sticky;
  bottom: -1px;
  left: 0;
  right: 0;
  display: block;
  height: 17px;
  margin-top: -17px;
  background: linear-gradient(to top, var(--page-ground, var(--bg)), transparent);
  pointer-events: none;
  z-index: var(--z-edge);
}


body.theme-switching .app-content::after {
  opacity: 0;
}



.site-header {
  flex-shrink: 0;
  z-index: var(--z-header);
  padding: 0 var(--px);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
  height: 60px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9rem, 0.4rem + 1.7vw, 1.25rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  transition: color var(--dur) var(--ease);
}

.logo svg {
  flex-shrink: 0;
}

.logo:hover {
  opacity: 1;
  color: var(--accent-text);
}



.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}



.a11y-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color 0.2s;
}


[data-theme="dark"] .a11y-toggle,
[data-theme="dark"] .theme-toggle {
  color: hsl(220, 8%, 62%);
}

.a11y-toggle:hover {
  color: var(--accent-text);
  border-color: var(--accent-dim);
}

[data-contrast="high"] .a11y-toggle {
  color: var(--accent-text);
  border-color: var(--accent-text);
}



.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color 0.2s;
}

.theme-toggle:hover {
  color: var(--accent-text);
  border-color: var(--accent-dim);
}

.theme-icon--moon { display: none; }
[data-theme="light"] .theme-icon--sun  { display: none; }
[data-theme="light"] .theme-icon--moon { display: block; }



.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 61px);
  min-height: calc(100svh - 61px);
  padding: 40px var(--px) 60px;
  overflow: visible;
  background:
    radial-gradient(900px 520px at 82% -8%, rgba(255, 140, 46, 0.10), transparent 60%),
    radial-gradient(820px 520px at 4% 8%, rgba(34, 184, 163, 0.12), transparent 55%);
}


.hero-bars {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc((100vh - 61px) * -0.10);
  bottom: calc((100svh - 61px) * -0.10);
  width: 100%;
  height: calc((100vh - 61px) * 0.40);
  height: calc((100svh - 61px) * 0.40);








  z-index: 1;
  opacity: 0.6;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 88%, transparent 100%);
}


#player { border-top: none; }

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
  max-width: var(--max-width);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  letter-spacing: 0.06em;
  line-height: 0.95;
  color: var(--text);
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
  width: 100%;
}

.hero-tagline {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  letter-spacing: 0.04em;
  color: var(--accent-text);
  transition: color var(--dur) var(--ease);
}

.hero-description {
  margin-top: 1.25rem;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 400;
  line-height: 1.7;
  color: hsl(220, 10%, 70%);
  transition: color var(--dur) var(--ease);
}

[data-theme="light"] .hero-description {
  color: hsl(220, 10%, 38%);
}



.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--text-muted);
  animation: scroll-bounce 2s var(--ease) infinite;
  transition: color var(--dur) var(--ease);
}


.meet .scroll-cue { z-index: 3; color: rgba(255, 255, 255, 0.78); }

@keyframes scroll-bounce {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 0.8; transform: translateX(-50%) translateY(8px); }
}



.about {
  padding: clamp(5rem, 12vw, 10rem) var(--px);
  transition: border-color var(--dur) var(--ease);
}

.about-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1rem;
  transition: color var(--dur) var(--ease);
}

.about-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 2.5rem;
  transition: color var(--dur) var(--ease);
}

.about-subheading {
  margin-top: 0.75rem;
  margin-bottom: 2.5rem;
  font-size: var(--fs-body);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}

.about-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 3rem;
}

.about-text {
  color: var(--text-muted);
  margin-top: 2.5rem;
  transition: color var(--dur) var(--ease);
}

.about-text p {
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}

.about-text p + p {
  margin-top: 1.25rem;
}



.about-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 600px) {
  .about-pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pillar {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.4s var(--ease);
  box-shadow: 0 0 0 0 transparent;
}

.pillar:hover {
  transform: translateY(-3px);
  border-color: var(--accent-dim);
  box-shadow: var(--card-lift);
  background: var(--bg-elevated);
}

.pillar-marker {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transition: all 0.4s var(--ease);
}

.pillar:hover .pillar-marker {
  box-shadow: 0 0 14px var(--accent-glow), 0 0 4px var(--accent);
}

.pillar-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 0.25rem;
  transition: color var(--dur) var(--ease);
}

.pillar-text {
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}



.products {
  padding: clamp(5rem, 12vw, 10rem) var(--px);
  transition: border-color var(--dur) var(--ease);
}

.products-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.products-header {
  margin-bottom: 2.5rem;
}

.products-grid {
  display: grid;



  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
  }
}

.product-card {
  padding: 2rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.4s var(--ease);
  box-shadow: 0 0 0 0 transparent;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-dim);
  box-shadow: var(--card-lift);
  background: var(--bg-elevated);
}

.product-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.product-icon {
  width: 64px;
  height: 64px;
  border-radius: 15px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.product-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}

.product-text {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}

.product-status {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  color: var(--accent-text);
  transition: color var(--dur) var(--ease);
}



.product-actions {
  margin-top: auto;
  padding-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
}




.product-card--link { position: relative; }
.product-title a.card-stretch { color: inherit; text-decoration: none; }




.product-card--link:hover .product-title { color: var(--accent-text); }
.product-title a.card-stretch:hover { opacity: 1; }
.card-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card--link .store-pair { position: relative; z-index: 2; }
.card-stretch:focus-visible { outline: none; }
.product-card--link:has(.card-stretch:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 3px; }



.player {
  padding: clamp(5rem, 12vw, 10rem) var(--px);
  transition: border-color var(--dur) var(--ease);
}

.player-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.player-header {
  margin-bottom: 2.5rem;
}

.player-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}

.player-description {
  margin-top: 0.75rem;
  font-size: var(--fs-body);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}


.deck {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 64px;
  gap: 8px;
}

.deck-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.deck-col-header {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 0.5rem 0;
  transition: color var(--dur) var(--ease);
}

.deck-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.5rem;
  min-height: 56px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  box-shadow: 0 0 0 0 transparent;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.deck-cell:hover {
  border-color: var(--accent-dim);
  color: var(--text);
  background: var(--bg-elevated);
}

.deck-cell.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.cell-waveform {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.3s var(--ease);
}

.deck-cell:hover .cell-waveform {
  opacity: 0.55;
}

.deck-cell.is-active .cell-waveform {
  opacity: 0.7;
}

.cell-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.15s;
}

.deck-cell.is-active .cell-playhead,
.deck-cell.is-queued .cell-playhead {
  opacity: 0.8;
}

.deck-cell .cell-name {
  position: relative;
  z-index: 1;
}

.cell-key,
.btn-key {
  position: absolute;
  top: 4px;
  right: 4px;
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 5px;
  border-radius: 2px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.2s;
}

.deck-cell:hover .cell-key,
.deck-random:hover .btn-key {
  opacity: 0.8;
}

.deck-row-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck-cell.is-queued {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-surface);
  animation: cell-queue 0.3s ease-in-out infinite alternate;
}

@keyframes cell-queue {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

.deck-cell.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: hsla(180, 70%, 55%, 0.08);
  box-shadow: 0 2px 20px var(--accent-glow), inset 0 0 0 1px var(--accent-dim);
}

[data-theme="light"] .deck-cell.is-active {
  background: hsla(180, 75%, 32%, 0.08);
}

.deck-cell.is-active::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  animation: cell-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cell-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0; }
}


.xy-pad {
  position: relative;
  width: 100%;
  height: 240px;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur) var(--ease);
}

.xy-inner {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

.gesture-controls {
  flex-shrink: 0;
  width: 64px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gesture-btn {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.25s var(--ease);
}

.gesture-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transition: none;
}

.xy-well {
  position: relative;
  flex: 1;
  height: 100%;
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.xy-well-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background-color: var(--bg-surface);






  background-image:
    linear-gradient(to right, transparent 12.5%, var(--border) 12.5%, var(--border) calc(12.5% + 1px), transparent calc(12.5% + 1px), transparent 25.0%, var(--border) 25.0%, var(--border) calc(25.0% + 1px), transparent calc(25.0% + 1px), transparent 37.5%, var(--border) 37.5%, var(--border) calc(37.5% + 1px), transparent calc(37.5% + 1px), transparent 50.0%, var(--border) 50.0%, var(--border) calc(50.0% + 1px), transparent calc(50.0% + 1px), transparent 62.5%, var(--border) 62.5%, var(--border) calc(62.5% + 1px), transparent calc(62.5% + 1px), transparent 75.0%, var(--border) 75.0%, var(--border) calc(75.0% + 1px), transparent calc(75.0% + 1px), transparent 87.5%, var(--border) 87.5%, var(--border) calc(87.5% + 1px), transparent calc(87.5% + 1px)),
    linear-gradient(to bottom, transparent 25%, var(--border) 25%, var(--border) calc(25% + 1px), transparent calc(25% + 1px), transparent 50%, var(--border) 50%, var(--border) calc(50% + 1px), transparent calc(50% + 1px), transparent 75%, var(--border) 75%, var(--border) calc(75% + 1px), transparent calc(75% + 1px));
  border: 1px solid var(--border);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background-color var(--dur) var(--ease);
}

.xy-cursor {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 40%, transparent 70%);
  box-shadow: 0 0 12px var(--accent-glow);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 100%;
  pointer-events: none;
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  z-index: 1;
}

.xy-cursor--ghost {
  display: none;
  opacity: 0.25;
  box-shadow: none;
}

.xy-cursor--ghost.is-visible {
  display: block;
}

.xy-well.is-touching .xy-cursor:not(.xy-cursor--ghost),
.xy-pad.is-touching .xy-cursor:not(.xy-cursor--ghost) {
  box-shadow: 0 0 20px var(--accent-glow), 0 0 6px var(--accent);
  width: 32px;
  height: 32px;
}

.xy-label {
  position: absolute;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.5;
  pointer-events: none;
  transition: color var(--dur) var(--ease);
}

.xy-label--left   { left: 0; width: 28px; text-align: center; top: 50%;  transform: translateY(-50%); }
.xy-label--right  { right: 0; width: 28px; text-align: center; top: 50%;  transform: translateY(-50%); }
.xy-label--top    { top: 0; height: 28px; line-height: 28px; left: 50%; transform: translateX(-50%); }
.xy-label--bottom { bottom: 0; height: 28px; line-height: 28px; left: 50%; transform: translateX(-50%); }


.deck-controls {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
}

.deck-stop,
.deck-random,
.deck-help {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}


.deck-help {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0;
  width: 64px;
  max-width: 64px;
}

.gesture-rec.is-armed {
  color: hsl(35, 90%, 55%);
  animation: record-pulse 1s ease-in-out infinite;
}

.gesture-rec.is-recording {
  color: hsl(35, 90%, 55%);
  border-color: hsl(35, 90%, 55%);
  box-shadow: 0 2px 16px hsla(35, 90%, 55%, 0.3);
}

.gesture-rec.is-playing {
  color: var(--accent-text);
  border-color: var(--accent-text);
  box-shadow: 0 2px 16px var(--accent-glow);
  --fill-start: 0;
  --fill-end: 0;
}

.gesture-rec.is-playing::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    transparent calc(var(--fill-start) * 360deg),
    var(--accent) calc(var(--fill-start) * 360deg),
    var(--accent) calc(var(--fill-end) * 360deg),
    transparent calc(var(--fill-end) * 360deg)
  );
  opacity: 0.2;
  pointer-events: none;
}

.gesture-rec.is-queued {
  animation: record-pulse 0.3s ease-in-out infinite alternate;
}

.gesture-half.is-active,
.gesture-double.is-active {
  color: var(--accent-text);
  border-color: var(--accent-dim);
}

@keyframes record-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}


.xy-well.is-recording {
  border-color: hsl(35, 90%, 55%);
  box-shadow: inset 0 0 0 1px hsla(35, 90%, 55%, 0.3);
}

.xy-well.is-gesture-playing {
  border-color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}


@media (max-width: 768px) {
  .xy-pad {
    height: 160px;
  }

  .deck {
    gap: 6px;
  }

  .deck-cell {
    min-height: 64px;
    padding: 0.75rem 0.35rem;
    font-size: 0.75rem;
  }

  .deck-col-header {
    font-size: 0.7rem;
    padding: 0.35rem 0;
  }
}


@media (max-width: 480px) {
  .logo {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }

  .xy-pad {
    height: 200px;
  }

  .deck {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }

  .deck-col--rows {
    display: none;
  }

  .deck-cell {
    min-height: 44px;
    padding: 0.6rem 0.25rem;
    font-size: 0.7rem;
  }

  .deck-col-header {
    font-size: 0.65rem;
    padding: 0.3rem 0;
    letter-spacing: 0.05em;
  }

  .deck-controls {
    grid-template-columns: 1fr 1fr;
  }

  .deck-help {
    display: none;
  }

  .deck-stop {
    grid-column: span 1;
  }

  .cell-key,
  .btn-key {
    display: none;
  }

  .deck-stop,
  .deck-random {
    padding: 0.5rem;
  }

  .xy-label {
    font-size: 0.6rem;
  }
}

.help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 0.25rem;
  transition: all 0.2s var(--ease);
}

.help-trigger:hover {
  color: var(--accent-text);
  border-color: var(--accent-dim);
}



.help-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: hsla(220, 15%, 6%, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: var(--px);
}

[data-theme="light"] .help-overlay {
  background: hsla(220, 15%, 96%, 0.85);
}

.help-overlay.is-open {
  display: flex;
}

.help-sheet {
  position: relative;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.help-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
  transition: color 0.2s;
}

.help-close:hover {
  color: var(--text);
}

.help-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--text);
  margin-bottom: 1.5rem;
  transition: color var(--dur) var(--ease);
}

.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 480px) {
  .help-grid {
    grid-template-columns: 1fr;
  }
}

.help-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.75rem;
  transition: color var(--dur) var(--ease);
}

.help-keys {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.help-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}

.help-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.help-row span {
  margin-left: 0.25rem;
}

.help-sep {
  margin: 0 0.15rem;
  opacity: 0.25;
  font-size: 0.7rem;
}

.help-note {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.7;
  transition: color var(--dur) var(--ease);
}

.help-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-align: center;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.help-footer kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text);
}



.about-us {
  padding: clamp(4rem, 10vw, 8rem) var(--px);
  transition: border-color var(--dur) var(--ease);
}

.about-us-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.about-us-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 600px) {
  .about-us-people {
    grid-template-columns: 1fr;
  }
}




.about-us-photo {
  width: 100%;
  max-width: 260px;




  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  filter: grayscale(1);
  margin-bottom: 1.1rem;
  display: block;
}

.about-us-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--text);
  margin-bottom: 0.5rem;
  transition: color var(--dur) var(--ease);
}

.about-us-bio {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}

.about-us-bio a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.about-us-bio a:hover {
  color: var(--text);
  text-decoration-color: var(--text);
  opacity: 1;
}

.about-us-name a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}

.about-us-name a:hover {
  color: var(--accent-text);
  opacity: 1;
}

.about-us-contact {
  margin-top: 2.5rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}

.about-us-contact a {
  color: var(--accent-text);
  display: inline-block;
  margin-top: 0.25rem;
}



.site-footer {
  padding: 3rem var(--px);




  background-color: var(--bg);
  border-top: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease);
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  gap: 2.25rem 1.5rem;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-tag {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 24ch;
  margin: 0;
}



.footer-logo {
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text);





  transition: color 0.2s;
}

.footer-logo:hover { color: var(--accent-text); }

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-head {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text);
  margin: 0 0 0.9rem;
  transition: color var(--dur) var(--ease);
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;




  gap: 0.6rem;
}

.footer-links a {
  font-size: var(--fs-small);
  color: var(--text-muted);
  transition: color 0.2s;
  position: relative;
}

.footer-links a:hover {
  color: var(--accent-text);
  opacity: 1;
}










[data-page="tap"] .footer-links a[href="/tap"],
[data-page="support"] .footer-links a[href="/support"],
[data-page="bridge"] .footer-links a[href="/bridge"],
[data-page="traktor-coverage"] .footer-links a[href="/traktor-coverage"],
[data-page="guide-traktor-ipad"] .footer-links a[href="/guide-traktor-ipad"],
[data-page="ipad-traktor-controller"] .footer-links a[href="/ipad-traktor-controller"],
[data-page="tkfx-alternative"] .footer-links a[href="/tkfx-alternative"],
[data-page="traktor-mapping"] .footer-links a[href="/traktor-mapping"],
[data-page="traktor-send-monitor-state"] .footer-links a[href="/traktor-send-monitor-state"],
[data-page="traktor-stem-deck-ipad"] .footer-links a[href="/traktor-stem-deck-ipad"],
[data-page="traktor-commands"] .footer-links a[href="/traktor-commands"],
[data-page="about"] .footer-links a[href="/about"],
[data-page="press"] .footer-links a[href="/press"],
[data-page="news"] .footer-links a[href="/news"],
[data-page="news-post"] .footer-links a[href="/news"],
[data-page="privacy"] .footer-links a[href="/privacy"],
[data-page="terms"] .footer-links a[href="/terms"] {




  color: color-mix(in oklab, var(--text) 62%, var(--text-muted));
}
[data-page="tap"] .footer-links a[href="/tap"]::before,
[data-page="support"] .footer-links a[href="/support"]::before,
[data-page="bridge"] .footer-links a[href="/bridge"]::before,
[data-page="traktor-coverage"] .footer-links a[href="/traktor-coverage"]::before,
[data-page="guide-traktor-ipad"] .footer-links a[href="/guide-traktor-ipad"]::before,
[data-page="ipad-traktor-controller"] .footer-links a[href="/ipad-traktor-controller"]::before,
[data-page="tkfx-alternative"] .footer-links a[href="/tkfx-alternative"]::before,
[data-page="traktor-mapping"] .footer-links a[href="/traktor-mapping"]::before,
[data-page="traktor-send-monitor-state"] .footer-links a[href="/traktor-send-monitor-state"]::before,
[data-page="traktor-stem-deck-ipad"] .footer-links a[href="/traktor-stem-deck-ipad"]::before,
[data-page="traktor-commands"] .footer-links a[href="/traktor-commands"]::before,
[data-page="about"] .footer-links a[href="/about"]::before,
[data-page="press"] .footer-links a[href="/press"]::before,
[data-page="news"] .footer-links a[href="/news"]::before,
[data-page="news-post"] .footer-links a[href="/news"]::before,
[data-page="privacy"] .footer-links a[href="/privacy"]::before,
[data-page="terms"] .footer-links a[href="/terms"]::before {
  content: "";
  position: absolute;
  left: -0.7rem;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--accent);
}


.footer-ico {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.5rem);
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
}

.footer-copy {
  grid-column: 1 / -1;
  margin-top: 1.25rem;
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);

  transition: color var(--dur) var(--ease);
}



.footer-copy a { text-decoration: underline; }

@media (max-width: 860px) {





  .footer-container {
    display: block;
    columns: 2;
    column-gap: 1.5rem;
  }
  .footer-brand {
    column-span: all;
    margin-bottom: 2rem;
  }

  .footer-col {
    break-inside: avoid;
    margin-bottom: 2rem;
  }


  .footer-copy {
    column-span: all;
    margin-bottom: 0;
  }






  .footer-container {
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  .footer-container {
    columns: 1;
  }
}






@media (max-width: 599px) {
  .footer-container {
    padding-left: 0;
  }
  .footer-ico {
    display: none;
  }
}




.deck-cell:not(.is-active):not(.is-queued):hover,
.deck-stop:hover,
.deck-random:hover,
.deck-help:hover,
.gesture-btn:not(:disabled):not(.is-armed):not(.is-recording):not(.is-playing):hover {
  border-color: var(--accent-dim);
  color: var(--text);
  background: var(--bg-elevated);
}


.deck-cell.is-active:hover,
.gesture-rec.is-playing:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: hsla(180, 70%, 55%, 0.12);
  box-shadow: 0 4px 24px var(--accent-glow), inset 0 0 0 1px var(--accent);
}


.gesture-rec.is-armed:hover {
  color: hsl(35, 90%, 62%);
  border-color: hsl(35, 90%, 55%);
  background: hsla(35, 90%, 55%, 0.08);
  box-shadow: 0 4px 24px hsla(35, 90%, 55%, 0.3), inset 0 0 0 1px hsl(35, 90%, 55%);
}



@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}






.hero [data-animate="fade-up"] {
  animation: fade-up 0.8s var(--ease) backwards;
}

.hero [data-animate="fade"] {
  animation: fade-in 0.8s var(--ease) backwards;
}

.hero [data-delay="1"] { animation-delay: 0.15s; }
.hero [data-delay="2"] { animation-delay: 0.3s; }
.hero [data-delay="3"] { animation-delay: 0.45s; }
.hero [data-delay="4"] { animation-delay: 0.6s; }










.js [data-animate]:not(.hero [data-animate]) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-animate]:not(.hero [data-animate])[data-animate="fade"] {
  transform: none;
}

.js [data-animate]:not(.hero [data-animate]).is-visible {
  opacity: 1;
  transform: none;
}







.js [data-animate]:not(.hero [data-animate])[data-delay="1"] { transition-delay: 0.12s; }
.js [data-animate]:not(.hero [data-animate])[data-delay="2"] { transition-delay: 0.24s; }
.js [data-animate]:not(.hero [data-animate])[data-delay="3"] { transition-delay: 0.36s; }
.js [data-animate]:not(.hero [data-animate])[data-delay="4"] { transition-delay: 0.5s; }




@media (prefers-contrast: more) {
  :root {
    --text: hsl(0, 0%, 100%);
    --text-muted: hsl(220, 8%, 75%);
    --accent: hsl(180, 90%, 60%);
    --border: hsl(220, 15%, 30%);
  }
  [data-theme="light"] {
    --text: hsl(0, 0%, 0%);
    --text-muted: hsl(220, 15%, 25%);
    --accent: hsl(180, 90%, 28%);
    --border: hsl(220, 15%, 50%);
  }
}


[data-contrast="high"] {
  --fs-h2:     clamp(2rem, 4.5vw, 3.25rem);
  --fs-h3:     1.25rem;






  --band:       hsl(220, 15%, 1%);
  --fs-section: 1.7rem;
  --fs-sub:     1.38rem;
  --fs-body:   1.2rem;
  --fs-small:  1rem;
  --fs-table:  1.05rem;
}


[data-theme="light"][data-contrast="high"] { --band: hsl(216, 16%, 74%); }

[data-contrast="high"]:not([data-theme="light"]) {
  --text: hsl(0, 0%, 100%);
  --text-muted: hsl(220, 8%, 75%);
  --accent: hsl(180, 90%, 60%);
  --accent-dim: hsla(180, 90%, 60%, 0.2);
  --accent-glow: hsla(180, 90%, 60%, 0.35);
  --border: hsl(220, 15%, 28%);
  --bg-surface: hsl(220, 15%, 12%);
  --bg-elevated: hsl(220, 15%, 16%);
}

[data-contrast="high"][data-theme="light"] {
  --text: hsl(0, 0%, 0%);
  --text-muted: hsl(220, 15%, 22%);
  --accent: hsl(180, 90%, 25%);



  --accent-text: hsl(180, 90%, 14%);
  --accent-dim: hsla(180, 90%, 25%, 0.15);
  --accent-glow: hsla(180, 90%, 25%, 0.2);
  --border: hsl(220, 15%, 55%);
  --bg-surface: hsl(220, 12%, 88%);
  --bg-elevated: hsl(220, 12%, 100%);
}


[data-contrast="high"] .deck-cell,
[data-contrast="high"] .pillar,
[data-contrast="high"] .product-card,
[data-contrast="high"] .xy-well,
[data-contrast="high"] .theme-toggle,
[data-contrast="high"] .a11y-toggle,
[data-contrast="high"] .deck-stop,
[data-contrast="high"] .deck-random,
[data-contrast="high"] .deck-help,
[data-contrast="high"] .gesture-btn {
  border-width: 2px;
}

[data-contrast="high"] .deck-cell {
  min-height: 64px;
}

[data-contrast="high"] .hero-description {
  color: var(--text-muted);
}

[data-contrast="high"] .cell-key,
[data-contrast="high"] .btn-key {
  font-size: 0.75rem;
  opacity: 0.8;
}

[data-contrast="high"] .xy-label {
  font-size: 0.85rem;
  opacity: 0.8;
}

[data-contrast="high"] .deck-col-header {
  font-size: 1rem;
}



@media (max-width: 480px) {
  .hero-title {
    letter-spacing: 0;



    font-size: clamp(1.55rem, 7.4vw, 2rem);
  }

  .pillar {
    padding: 1rem 1.15rem;
  }

  .footer-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links {
    flex-direction: column;
    gap: 0.85rem;
  }
}







:root {
  --accent-warm:      hsl(35, 90%, 56%);
  --accent-warm-dim:  hsla(35, 90%, 56%, 0.16);
  --accent-warm-glow: hsla(35, 90%, 56%, 0.28);
  --accent-cool:      hsl(255, 80%, 68%);
  --accent-cool-dim:  hsla(255, 80%, 68%, 0.16);
  --accent-cool-glow: hsla(255, 80%, 68%, 0.28);
}

[data-theme="light"] {
  --accent-warm:      hsl(30, 95%, 38%);
  --accent-warm-dim:  hsla(30, 95%, 38%, 0.38);
  --accent-warm-glow: hsla(30, 95%, 38%, 0.20);
  --accent-cool:      hsl(255, 68%, 50%);
  --accent-cool-dim:  hsla(255, 68%, 50%, 0.38);
  --accent-cool-glow: hsla(255, 68%, 50%, 0.20);
}

[data-contrast="high"]:not([data-theme="light"]) {
  --accent-warm:      hsl(35, 95%, 62%);
  --accent-warm-dim:  hsla(35, 95%, 62%, 0.22);
  --accent-warm-glow: hsla(35, 95%, 62%, 0.35);
  --accent-cool:      hsl(255, 90%, 76%);
  --accent-cool-dim:  hsla(255, 90%, 76%, 0.22);
  --accent-cool-glow: hsla(255, 90%, 76%, 0.35);
}

[data-contrast="high"][data-theme="light"] {
  --accent-warm:      hsl(28, 95%, 32%);
  --accent-warm-dim:  hsla(28, 95%, 32%, 0.16);
  --accent-warm-glow: hsla(28, 95%, 32%, 0.22);
  --accent-cool:      hsl(255, 80%, 42%);
  --accent-cool-dim:  hsla(255, 80%, 42%, 0.16);
  --accent-cool-glow: hsla(255, 80%, 42%, 0.22);
}















.section--warm {
  --accent:      var(--accent-warm);
  --accent-text: var(--accent-warm);
  --accent-dim:  var(--accent-warm-dim);
  --accent-glow: var(--accent-warm-glow);
}
.section--cool {
  --accent:      var(--accent-cool);
  --accent-text: var(--accent-cool);
  --accent-dim:  var(--accent-cool-dim);
  --accent-glow: var(--accent-cool-glow);
}







[data-theme="light"] .section--warm { --accent-text: hsl(30, 95%, 27%); }
[data-contrast="high"][data-theme="light"] .section--warm { --accent-text: hsl(30, 95%, 20%); }






















.legal-container p a,
.legal-container li a,
.legal-container dd a,
.legal-container figcaption a,
.guide-body p a,
.guide-body li a,
.about-subheading a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}




.legal-container .guide-toc a,
.legal-container .news-cta a,
.legal-container a.press-kit-cta,
.legal-container a.legal-back { text-decoration: none; }




















html:not(:has(main > section)) body { --page-ground: var(--band); }
html:not(:has(main > section)) .app-content { background-color: var(--band); }







[data-theme="light"] .hero-bars { opacity: 0.92; }





















































#main > section.section--band { background-color: var(--band); }


















.section {
  padding: clamp(4.5rem, 11vw, 9rem) var(--px);
  position: relative;
  transition: border-color var(--dur) var(--ease);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-head {
  max-width: 640px;
  margin-bottom: 2.75rem;
}

.section-heading {


  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: 0.35rem;
  transition: color var(--dur) var(--ease);
}

.section-desc {
  margin-top: 0.9rem;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 52ch;
  transition: color var(--dur) var(--ease);
}



.cta-short { display: none; }

.nav-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}






[data-theme="light"] .nav-download,
[data-theme="light"] .hero-jump {
  background: hsl(180, 45%, 93%);
  border-color: hsl(180, 35%, 82%);
  color: hsl(180, 80%, 22%);
}

.nav-download:hover {
  opacity: 1;
  background: var(--accent-solid);
  color: var(--bg);
  border-color: var(--accent-solid);
}



.hero-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 14px;
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  background: var(--accent-dim);
  margin-bottom: 1.6rem;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.hero-subhead {
  margin: 1.25rem auto 0;
  max-width: 36ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}

.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-showcase {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 2.75rem auto 0;
}

.hero-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scale(1.08);
  background: radial-gradient(55% 55% at 50% 50%, var(--accent-glow), transparent 70%);
  filter: blur(50px);
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}

.hero-showcase .media-frame {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}



.hero-jump {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 7px 16px;
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  background: var(--accent-dim);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.hero-jump:hover {
  opacity: 1;
  background: var(--accent-solid);
  color: var(--bg);
  border-color: var(--accent-solid);
}



.meet {
  position: relative;
  overflow: hidden;
  text-align: center;
  min-height: min(80vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.meet-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}





.meet-video {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.meet-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .meet-video { display: none; }
}

.meet-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(125% 95% at 50% 45%, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.66) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.42));
}

.meet-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.meet-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6.5vw, 4.25rem);
  letter-spacing: 0.01em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.meet-subhead {
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
}

.meet .btn-primary { margin-top: 0.75rem; }


.meet--hero {
  border-top: none;
  min-height: calc(100vh - 61px);
  min-height: calc(100svh - 61px);
}








.meet--hero {
  padding-block: clamp(1.5rem, 5vh, 4rem);
}
.meet--hero .meet-heading {
  font-size: clamp(2rem, 4.6vw, 3.2rem);


  text-wrap: balance;
}
.meet--hero .meet-inner { gap: 0.9rem; }

.meet-inner .section-label { margin-bottom: 0; }




.meet-film { margin: 0.2rem 0 0.5rem; }
.film-link { display: inline-flex; align-items: center; gap: 0.45em; color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 1.06rem; letter-spacing: 0.01em; text-decoration: none; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
.film-link-icon { width: 1.35em; height: 1.35em; flex: none; }
.meet .section-label { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }



.meet-facts {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;



  padding: 0.7rem 1.15rem;
  border-radius: 12px;
  background: rgba(13, 18, 22, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.meet-specs,
.meet-price {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.meet-specs { letter-spacing: 0.04em; }
.meet-price strong { color: #fff; font-weight: 600; }

.meet-actions {
  margin-top: 0.4rem;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.85rem 1.6rem;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.btn-primary {
  background: var(--accent-solid);
  color: var(--bg);
  box-shadow: 0 4px 24px var(--accent-glow);
}

.btn-primary:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--accent-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover {
  opacity: 1;
  color: var(--accent-text);
  border-color: var(--accent-text);
}


.js-appstore:not([href]) {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-color: var(--border);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  transform: none;
}





.appstore-badge {
  display: inline-flex;
  align-items: center;
  height: var(--store-h);
  border-radius: 9px;
  transition: opacity 0.2s var(--ease), transform 0.25s var(--ease);
}
.appstore-badge img {
  height: 100%;
  width: auto;
  display: block;
  pointer-events: none;
}
.appstore-badge:hover { opacity: 0.9; transform: translateY(-2px); }
.appstore-badge:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

.appstore-badge:not([href]) { opacity: 0.4; filter: grayscale(1); pointer-events: none; }

















:root { --store-h: 52px; --qr-m: 1.5px; }
@media (max-resolution: 1.1dppx) { :root { --store-h: 66px; --qr-m: 2px; } }
@media (min-resolution: 1.1dppx) and (max-resolution: 1.4dppx) { :root { --qr-m: 1.6px; } }
@media (min-resolution: 1.4dppx) and (max-resolution: 1.75dppx) { :root { --qr-m: calc(4px / 3); } }


.store-pair { display: inline-flex; align-items: center; gap: calc(var(--store-h) / 4); }
.store-qr {
  display: none;
  position: relative;
  box-sizing: border-box;
  height: var(--store-h);
  align-items: center;
  gap: calc(var(--store-h) * 0.19);
  padding: 0 calc(var(--store-h) * 0.3) 0 calc((var(--store-h) - var(--qr-m) * 28) / 2 - 1px);
  background: #000;
  border: 1px solid #a6a6a6;
  border-radius: calc(var(--store-h) * 9 / 52);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
@media (hover: hover) and (pointer: fine) {
  .store-qr { display: inline-flex; }
}
.store-qr-code {
  flex: none;
  box-sizing: border-box;
  width: calc(var(--qr-m) * 28);
  height: calc(var(--qr-m) * 28);
  padding: calc(var(--qr-m) * 1.5);
  background: #fff;
  border-radius: calc(var(--store-h) * 5 / 52);
}
.store-qr-code img, .store-qr-big img { display: block; width: 100%; height: 100%; }
.store-qr-text { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; text-align: left; }
.store-qr-text > :first-child { font-size: calc(var(--store-h) * 0.21); font-weight: 500; letter-spacing: 0.01em; margin-bottom: 0.15em; }
.store-qr-text > :last-child { font-size: calc(var(--store-h) * 0.385); font-weight: 600; letter-spacing: -0.01em; }


.store-qr-big {
  position: absolute;
  left: calc((var(--store-h) - var(--qr-m) * 28) / 2 - 1px + var(--qr-m) * 14);
  bottom: calc(100% + 12px);
  box-sizing: content-box;
  width: 100px;
  height: 100px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0s linear 0.15s;
}
.store-qr:hover .store-qr-big { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .store-qr-big { transition: none; } }



.feature-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 860px) {
  .feature-inner {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
  .feature--reverse .feature-text  { order: 2; }
  .feature--reverse .feature-media { order: 1; }
}

.feature-text .section-desc { max-width: 46ch; }



.feature-media {
  position: relative;
}







.feature { overflow-x: clip; }

.feature-media::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scale(1.1);
  background: radial-gradient(50% 50% at 50% 50%, var(--accent-glow), transparent 70%);
  filter: blur(44px);
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}

.media-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}




.media-frame--portrait {
  aspect-ratio: 4 / 5;


  max-width: 400px;
  margin-inline: auto;
}
.media-caption {
  margin: 0.7rem 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  display: block;
}

.media-frame--cover img,
.media-frame--cover video { object-fit: cover; }

.media-frame--contain img,
.media-frame--contain video { object-fit: contain; }









.js .media-frame:not(.is-ready)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--bg-elevated);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: media-shimmer 1.5s var(--ease) infinite;
}
@keyframes media-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}


.js .media-frame:not(.is-ready)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid var(--text-muted);
  border-top-color: var(--accent-text);
  border-radius: 50%;
  animation: media-spin 0.7s linear infinite;
  pointer-events: none;
}
@keyframes media-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .js .media-frame:not(.is-ready)::before { animation: none; }

  .js .media-frame:not(.is-ready)::after { animation: none; border-top-color: var(--text-muted); opacity: 0.7; }
}


.onstage-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 760px) {
  .onstage-media { grid-template-columns: 1fr 1fr; }
  .onstage-media .onstage-feature { grid-column: 1 / -1; }
}



.carousel { position: relative; --fade: 32px; --off: min(var(--fade), var(--px)); --reach: min(var(--fade), var(--px) - 6px); --above: 20px; }
















.carousel-controls {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, opacity 0.2s;
}

.carousel-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--bg-elevated);
}

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: default;
}






.carousel-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--off);
  padding: var(--above) var(--off) 36px;
  margin-inline: calc(-1 * var(--off));
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent calc(var(--off) - var(--reach) + 2px), #000 var(--off), #000 calc(100% - var(--off)), transparent calc(100% - var(--off) + var(--reach) - 2px));
          mask-image: linear-gradient(to right, transparent calc(var(--off) - var(--reach) + 2px), #000 var(--off), #000 calc(100% - var(--off)), transparent calc(100% - var(--off) + var(--reach) - 2px));
}

.carousel-track::-webkit-scrollbar { display: none; }










.carousel:has(.carousel-track:focus-visible)::after {
  content: '';
  position: absolute;













  inset: calc(var(--above) - 8px) calc(-1 * var(--reach)) -6px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  pointer-events: none;
}

.carousel-card {
  flex: 0 0 min(84%, 340px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.carousel-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-dim);
  background: var(--bg-elevated);
  box-shadow: var(--card-lift);
}

.carousel-card .media-frame {
  z-index: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.decks .carousel-card { flex-basis: min(90%, 460px); }
.decks .carousel-card .media-frame { aspect-ratio: 1356 / 892; }




.decks .carousel-card .media-frame img { object-fit: cover; }








.deck-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.deck-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.deck-card:hover { transform: translateY(-3px); border-color: var(--accent-dim); background: var(--bg-elevated); box-shadow: var(--card-lift); }



.deck-card .media-frame { z-index: 0; border: 0; border-radius: 0; aspect-ratio: 1356 / 892; }
.deck-card .media-frame img { object-fit: cover; }

.deck-card .media-frame { border-top: 1px solid var(--border); }
.deck-card:not(.deck-card--top) .media-frame { border-top: 0; border-bottom: 1px solid var(--border); }

.deck-card .card-body { flex: 1 0 auto; }

@media (max-width: 760px) {



  .deck-grid { grid-template-columns: 1fr; }
  .deck-card--top { flex-direction: column-reverse; }
  .deck-card--top .media-frame { border-top: 0; border-bottom: 1px solid var(--border); }
}



.onstage .carousel { display: flex; flex-direction: column; }
.onstage .carousel-track { order: 1; }
.onstage .carousel-controls { order: 2; margin: 1.6rem 0 0; }
.onstage .carousel-card { flex-basis: min(92%, 600px); }

.card-body { padding: 1.1rem 1.25rem 1.35rem; }

.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--text);
  transition: color var(--dur) var(--ease);
}

.card-text {
  margin-top: 0.4rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}







.highlight-grid {
  --hl-cols: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.highlight-grid .highlight-item {
  flex: 0 1 calc((100% - (var(--hl-cols) - 1) * 1rem) / var(--hl-cols));
  min-width: 0;
}

@media (min-width: 560px) {
  .highlight-grid { --hl-cols: 3; }
}

@media (min-width: 920px) {
  .highlight-grid { --hl-cols: 4; }
  .highlight-grid--3 { --hl-cols: 3; }
}

.highlight-item {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.6rem 1.4rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.highlight-item:hover {
  transform: translateY(-3px);
  border-color: var(--accent-dim);
  background: var(--bg-elevated);
  box-shadow: var(--card-lift);
}

.highlight-icon {
  display: inline-flex;
  color: var(--accent-text);
  transition: color var(--dur) var(--ease);
}






.yt-facade { max-width: 900px; margin: 0 auto; }

.feature-media.yt-facade { max-width: none; margin: 0; }


.feature-media.yt-facade .yt-note { text-align: left; }
.yt-play,
.yt-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.yt-play {
  position: relative;
  padding: 0;
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.yt-play:hover { border-color: var(--accent-dim); box-shadow: var(--card-lift); }
.yt-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play-badge {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: var(--bg);
  background: var(--accent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: transform var(--dur) var(--ease);
}
.yt-play:hover .yt-play-badge { transform: translate(-50%, -50%) scale(1.06); }
.yt-frame { border: 0; }
.yt-note {
  margin: 0.9rem 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.highlight-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-muted);
}

.highlight-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}



.ownit { position: relative; text-align: center; overflow: hidden; }

.ownit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 12%, var(--accent-glow), transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}

.ownit-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.ownit-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}

.ownit-body {
  font-size: var(--fs-body);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}

.req-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: center;
  padding: 0;
  margin: 0.25rem 0 0.5rem;
}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}








.ownit-price {
  margin: -0.2rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}







.field { width: 100%; box-sizing: border-box; padding: 0.7rem 0.9rem; font: inherit; font-size: 1rem; color: var(--text); background: rgba(127, 127, 127, 0.1); border: 1px solid rgba(127, 127, 127, 0.28); border-radius: 10px; }
.field::placeholder { color: var(--text-muted); }
.field:focus { outline: 2px solid var(--accent-text); outline-offset: 1px; border-color: transparent; }
.field::-webkit-search-cancel-button, .field::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

.price-selectwrap { position: relative; display: inline-flex; }
.price-country {


  font-weight: 500;
  width: auto;
  max-width: 16rem;
  padding-right: 2.6rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.price-country::-ms-expand { display: none; }
.price-selectwrap::after {
  content: "";
  position: absolute;
  right: 1.05rem;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.price-country:hover { border-color: var(--accent-dim); }
.price-country:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-color: var(--accent-text);
}
.price-selectwrap:focus-within::after { border-color: var(--accent-text); }

.req-note {
  margin: -0.4rem 0 0;
  max-width: 48ch;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-muted);
}

.req-list li {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  color: var(--text);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}


a.product-status { text-decoration: none; }
a.product-status:hover { opacity: 0.8; }
.product-status.js-appstore:not([href]) {
  background: none;
  border-color: transparent;
  color: var(--accent);
  cursor: default;
  pointer-events: none;
}



.footer-requirements {
  width: 100%;
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}

@media (min-width: 768px) {
  .footer-requirements { width: auto; margin-top: 0; order: 3; }
}







@media (max-width: 480px) {




  .nav-download { padding: 0 11px; height: 36px; font-size: 0.75rem; }




  .cta-long { display: none; }
  .cta-short { display: inline; }


  #nav-download .cta-short { font-size: 1rem; line-height: 1; min-width: 1.1em; text-align: center; }
  .a11y-toggle, .theme-toggle { width: 36px; height: 36px; }
  .nav-actions { gap: 6px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .carousel-controls { justify-content: space-between; }
}





.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  background: var(--accent-solid);
  color: var(--bg);
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius);
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 8px; }








a:focus-visible,
button:focus-visible,
[tabindex="0"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {



  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}





[tabindex="-1"]:focus { outline: none; }



@media (prefers-reduced-motion: reduce) {
  html, .app-content, * { scroll-behavior: auto !important; }
  .scroll-cue { animation: none; }
  .hero [data-animate] { animation: none !important; }
  [data-animate]:not(.hero [data-animate]) { transition: none !important; opacity: 1 !important; transform: none !important; }
  .hero-content { transform: none !important; }
  .btn-primary:hover, .carousel-card:hover { transform: none; }
  .media-frame::before { animation: none; }
}







.player {
  --g:       hsl(145, 58%, 49%);
  --g-dim:   hsla(145, 58%, 49%, 0.5);
  --g-glow:  hsla(145, 58%, 49%, 0.3);
  --g-bg:    hsla(145, 58%, 49%, 0.1);
  --r:       hsl(0, 72%, 58%);
  --fx:      hsl(32, 92%, 56%);
  --fx-glow: hsla(32, 92%, 56%, 0.32);
}



.player .deck-col[data-col="0"] { --g: hsl(187, 72%, 52%); --g-dim: hsla(187, 72%, 52%, 0.5); --g-glow: hsla(187, 72%, 52%, 0.32); --g-bg: hsla(187, 72%, 52%, 0.12); }
.player .deck-col[data-col="1"] { --g: hsl(146, 58%, 50%); --g-dim: hsla(146, 58%, 50%, 0.5); --g-glow: hsla(146, 58%, 50%, 0.32); --g-bg: hsla(146, 58%, 50%, 0.12); }
.player .deck-col[data-col="2"] { --g: hsl(40, 92%, 56%);  --g-dim: hsla(40, 92%, 56%, 0.5);  --g-glow: hsla(40, 92%, 56%, 0.32);  --g-bg: hsla(40, 92%, 56%, 0.12); }
.player .deck-col[data-col="3"] { --g: hsl(264, 74%, 68%); --g-dim: hsla(264, 74%, 68%, 0.5); --g-glow: hsla(264, 74%, 68%, 0.32); --g-bg: hsla(264, 74%, 68%, 0.12); }


.player .deck-col-header { color: var(--g); }





[data-theme="light"] .player {
  --g: hsl(145, 66%, 25%); --g-dim: hsla(145, 66%, 25%, 0.5); --g-glow: hsla(145, 66%, 25%, 0.28); --g-bg: hsla(145, 66%, 25%, 0.10);
}
[data-theme="light"] .player .deck-col[data-col="0"] { --g: hsl(187, 80%, 24%); --g-dim: hsla(187, 80%, 24%, 0.5); --g-glow: hsla(187, 80%, 24%, 0.28); --g-bg: hsla(187, 80%, 24%, 0.10); }
[data-theme="light"] .player .deck-col[data-col="1"] { --g: hsl(146, 66%, 25%); --g-dim: hsla(146, 66%, 25%, 0.5); --g-glow: hsla(146, 66%, 25%, 0.28); --g-bg: hsla(146, 66%, 25%, 0.10); }
[data-theme="light"] .player .deck-col[data-col="2"] { --g: hsl(34, 98%, 26%);  --g-dim: hsla(34, 98%, 26%, 0.5);  --g-glow: hsla(34, 98%, 26%, 0.28);  --g-bg: hsla(34, 98%, 26%, 0.10); }
[data-theme="light"] .player .deck-col[data-col="3"] { --g: hsl(264, 52%, 43%); --g-dim: hsla(264, 52%, 43%, 0.5); --g-glow: hsla(264, 52%, 43%, 0.28); --g-bg: hsla(264, 52%, 43%, 0.10); }


.player .deck-cell.is-active {
  border-color: var(--g);
  color: var(--g);
  background: var(--g-bg);
  box-shadow: 0 2px 20px var(--g-glow), inset 0 0 0 1px var(--g-dim);
}
.player .deck-cell.is-active::after { border-color: var(--g); }
.player .deck-cell.is-queued { border-color: var(--g); color: var(--g); }
.player .cell-playhead { background: var(--g); }
.player .deck-cell.is-active:hover {
  border-color: var(--g);
  color: var(--g);
  background: var(--g-bg);
  box-shadow: 0 4px 24px var(--g-glow), inset 0 0 0 1px var(--g);
}


.player .deck-cell:not(.is-active):not(.is-queued):hover,
.player .deck-stop:hover,
.player .deck-random:hover,
.player .deck-help:hover,
.player .gesture-btn:not(:disabled):not(.is-armed):not(.is-recording):not(.is-playing):hover {
  border-color: var(--g-dim);
}


.player .deck-cell.deck-row-trigger,
.player .deck-cell.deck-row-trigger:hover { color: var(--g); }
.player .gesture-half.is-active,
.player .gesture-double.is-active { color: var(--g); border-color: var(--g-dim); }


.player .xy-cursor { background: radial-gradient(circle, var(--fx) 40%, transparent 70%); }
.player .xy-cursor:not(.xy-cursor--ghost) { box-shadow: 0 0 12px var(--fx-glow); }
.player .xy-well.is-touching .xy-cursor:not(.xy-cursor--ghost) {
  box-shadow: 0 0 20px var(--fx-glow), 0 0 6px var(--fx);
}


.player .gesture-rec.is-armed { color: var(--r); }
.player .gesture-rec.is-recording {
  color: var(--r);
  border-color: var(--r);
  box-shadow: 0 2px 16px hsla(0, 72%, 58%, 0.3);
}
.player .gesture-rec.is-armed:hover {
  color: hsl(0, 72%, 66%);
  border-color: var(--r);
  background: hsla(0, 72%, 58%, 0.08);
  box-shadow: 0 4px 24px hsla(0, 72%, 58%, 0.3), inset 0 0 0 1px var(--r);
}
.player .xy-well.is-recording {
  border-color: var(--r);
  box-shadow: inset 0 0 0 1px hsla(0, 72%, 58%, 0.3);
}


.player .gesture-rec.is-playing {
  color: var(--g);
  border-color: var(--g);
  box-shadow: 0 2px 16px var(--g-glow);
}
.player .gesture-rec.is-playing::before {
  background: conic-gradient(
    transparent calc(var(--fill-start) * 360deg),
    var(--g) calc(var(--fill-start) * 360deg),
    var(--g) calc(var(--fill-end) * 360deg),
    transparent calc(var(--fill-end) * 360deg)
  );
}
.player .gesture-rec.is-playing:hover {
  border-color: var(--g);
  color: var(--g);
  background: var(--g-bg);
  box-shadow: 0 4px 24px var(--g-glow), inset 0 0 0 1px var(--g);
}
.player .xy-well.is-gesture-playing {
  border-color: var(--g);
  box-shadow: inset 0 0 0 1px var(--g-dim);
}













.setup { padding-block: clamp(3.25rem, 7.4vw, 6.5rem); }
.setup .section-head { margin-bottom: clamp(1.25rem, 3vw, 1.9rem); max-width: none; }
.setup-stage {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.setup-lead { min-width: 0; }

.setup-devices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 auto;
  width: 100%;



  max-width: 380px;
}

.setup-dev {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.setup-dev--ipad { width: 86%; }



.setup-glass {
  position: relative;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--dev-edge);
  box-shadow: 0 0 0 var(--dev-bezel) var(--dev-frame),
              0 12px 34px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.25s var(--ease);
}
.setup-dev--mac .setup-glass {
  aspect-ratio: 2560 / 1664;
  border-radius: 4px;
}
.setup-dev--ipad .setup-glass {
  aspect-ratio: 2752 / 2064;
  border-radius: clamp(5px, 1.2vw, 11px);
}

.setup-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.setup-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}




.setup-foot {
  display: block;
  height: clamp(5px, 1.1vw, 11px);
  margin: 0 -4.5%;
  position: relative;
  background: var(--dev-frame);
  border-radius: 0 0 clamp(3px, 0.7vw, 7px) clamp(3px, 0.7vw, 7px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.setup-foot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 13%;
  height: 42%;
  transform: translateX(-50%);
  background: var(--dev-edge);
  border-radius: 0 0 5px 5px;
}





.setup-dev--ipad .setup-devname { margin-top: calc(0.7rem + var(--dev-bezel)); }
.setup-devname {
  margin-top: 0.7rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.4s var(--ease);
}




.setup-dev { opacity: 0.62; transition: opacity 0.25s var(--ease); }
.setup-dev.is-active { opacity: 1; }
.setup-dev.is-active .setup-glass {
  box-shadow: 0 0 0 var(--dev-bezel) var(--dev-frame-lit),
              0 14px 38px rgba(0, 0, 0, 0.5);
}
.setup-dev.is-active .setup-foot { background: var(--dev-frame-lit); }
.setup-dev.is-active .setup-devname { color: var(--text); }





.setup-wire {
  position: relative;
  align-self: center;
  width: 100%;
  height: 2.2rem;
}
.setup-wire-line {
  position: absolute;
  left: 50%;
  inset-block: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom,
    var(--border) 0 5px, transparent 5px 10px);
}
.setup-wire-label {
  position: absolute;
  left: calc(50% + 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}


@media (max-width: 420px) {
  .setup-wire-label { display: none; }
}
.setup-chip {
  position: absolute;
  left: 50%;
  top: 0;
  padding: 0.12rem 0.34rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.58rem;
  line-height: 1.3;
  color: var(--accent);
  background: var(--bg-surface);
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.setup-stage[data-flow="out"] .setup-chip { animation: chip-out 0.85s cubic-bezier(0.45, 0, 0.55, 1) forwards; }
.setup-stage[data-flow="back"] .setup-chip { animation: chip-back 0.85s cubic-bezier(0.45, 0, 0.55, 1) forwards; }
.setup-stage[data-flow] .setup-wire-label { opacity: 1; }
@keyframes chip-out {
  0%   { top: 0;    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes chip-back {
  0%   { top: 100%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 0;    opacity: 0; }
}




.setup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.setup-step { margin: 0; }
.setup-step-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.42rem 0.7rem;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}


.setup-step-btn {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.setup-step-btn:hover .setup-step-row { background: var(--bg-surface); }
.setup-step-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.setup-step-n {
  flex: 0 0 auto;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.setup-step-copy {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.5;
}


.setup-step-copy strong {
  font-weight: 600;
  color: var(--text);
  transition: color 0.3s var(--ease);
}


.setup-step-btn[aria-current="step"] .setup-step-row {
  border-color: var(--border);
  background: var(--bg-elevated);
  color: var(--text);
}
.setup-step-btn[aria-current="step"] .setup-step-copy strong { color: var(--text); }


.setup-step-btn[aria-current="step"] .setup-step-n {
  color: var(--text);
  border-color: var(--text-muted);
}




.setup-note {
  max-width: none;
  margin: 1.1rem 0 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}



@media (max-width: 820px) {
  .setup-stage { grid-template-columns: 1fr; gap: 1.75rem; }

  .setup-devices { max-width: 420px; }
  .setup-dev--mac { width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .setup-chip { display: none; }
  .setup-glass, .setup-devname, .setup-step-row, .setup-step-n { transition: none; }
}












.legal-page { padding: 2rem var(--px) 4rem; }
.legal-container { max-width: var(--max-width); margin: 0 auto; }


.legal-back {
  display: block;
  width: fit-content;
  margin-bottom: 1.25rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
  transition: color 0.2s;
}
.legal-back:hover { color: var(--accent-text); opacity: 1; }
.legal-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1.25rem;
}













.legal-container a { color: var(--accent-text); }
.legal-container code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: rgba(127, 127, 127, 0.16); padding: 0.12em 0.4em; border-radius: 4px; overflow-wrap: anywhere; }
.legal-container dd { margin: 0.3rem 0 0; color: var(--text); line-height: 1.7; }
.legal-container dl > dt:first-child { margin-top: 0; }
.legal-container dt { font-weight: 700; color: var(--text); margin-top: 1.25rem; }
.legal-container h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-top: 1.6rem; margin-bottom: 0.4rem; letter-spacing: 0.01em; }
.legal-container li { margin-bottom: 0.4rem; }
.legal-container p, .legal-container ul { margin-bottom: 1rem; color: var(--text); line-height: 1.7; }
.legal-container p, .legal-container ul, .legal-container ol, .legal-container dl { margin-bottom: 1rem; color: var(--text); line-height: 1.7; }
.legal-container ul { padding-left: 1.5rem; }
.legal-container ul, .legal-container ol { padding-left: 1.5rem; }
.legal-container ol:has(> li:nth-child(10)) { padding-left: 2rem; }
.legal-date { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 3rem; }






.guide-byline { font-size: var(--fs-small); color: var(--text-muted); margin: 0 0 1.5rem; }




.guide-body { max-width: 46rem; }

.cmp-quote { border-left: 3px solid var(--accent); padding: 0.15rem 0 0.15rem 1.1rem; margin: 1.6rem 0; max-width: 46rem; }
.guide-body a { color: var(--accent-text); }
.guide-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: rgba(127, 127, 127, 0.16); padding: 0.12em 0.4em; border-radius: 4px; overflow-wrap: anywhere; }











.ui { font-size: 0.94em; color: var(--text); background: rgba(127, 127, 127, 0.16); padding: 0.08em 0.36em; border-radius: 4px; white-space: nowrap; }




@media (max-width: 480px) {
  .ui { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}
.ui.ui--wrap { display: inline-block; white-space: normal; max-width: 100%; line-height: 1.35; text-align: center; }
.guide-body h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; margin: 2.5rem 0 0.75rem; letter-spacing: 0.01em; }
.guide-body li { margin-bottom: 0.45rem; }
.guide-body p { margin-bottom: 1rem; color: var(--text); line-height: 1.75; }
.guide-body p, .guide-body ul { margin-bottom: 1rem; color: var(--text); line-height: 1.75; }
.guide-body ul { padding-left: 1.4rem; }
.guide-cta { margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.guide-cta .press-kit-cta { margin: 0; }
.guide-lead, .cmp-lead, .press-lead { font-size: calc(var(--fs-body) * 1.07); }


.guide-note, .cmp-note { font-size: var(--fs-small); color: var(--text-muted); }


.guide-first { border-left: 2px solid var(--border); padding-left: 0.9rem; margin: 1.1rem 0; }














.h-anchored, tr[id], details[id], .cov-group { scroll-margin-top: var(--anchor-room); }
.cmp-cta { margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.cmp-note { margin: 0.4rem 0 0; }
.cmp-quote blockquote { margin: 0; }
.cmp-quote blockquote p { color: var(--text); line-height: 1.75; margin: 0; font-size: 1.02rem; }
.cmp-quote figcaption { margin-top: 0.45rem; color: var(--text-muted); font-size: var(--fs-small); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.cmp-table tbody th { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.cmp-table tbody tr:first-child th { color: var(--accent-text); }
.cmp-table tbody tr:first-child th, .cmp-table tbody tr:first-child td { background: var(--accent-dim); }
.cmp-table td { color: var(--text-muted); }
.cmp-table th, .cmp-table td { text-align: left; padding: 0.6rem 0.65rem; vertical-align: top; }

.cmp-table tbody tr + tr > th, .cmp-table tbody tr + tr > td { border-top: 1px solid var(--border); }
.cmp-table thead th { border-bottom: 1px solid var(--border); }
.cmp-table thead th { font-family: var(--font-display); font-weight: 700; color: var(--text); }


.cmp-wrap { overflow-x: auto; margin: 1.5rem 0; }
.cov-cat { color: var(--text); }


.cov-group > summary > h2 { font: inherit; margin: 0; padding: 0; letter-spacing: inherit; color: inherit; }
.guide-toc .cov-cat { color: inherit; }




.cov-group { background-color: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: clip; }
.cov-group summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; cursor: pointer; font-family: var(--font-display); font-weight: 700; list-style: none; }




body.tables-measured .cov-group > summary { position: sticky; top: 0; z-index: 3; background: var(--bg); }
@media (max-width: 639.98px) {





  body.tables-measured .cov-group[open]:not(.cmd-legend) > summary::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--border); pointer-events: none; }
}
.cov-group summary::-webkit-details-marker { display: none; }
.cov-group summary::after { content: "+"; margin-left: auto; color: var(--text-muted); font-weight: 400; font-size: 1.1rem; }
.cov-group summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -3px; border-radius: 8px; }
.cov-group[open] summary::after { content: "\2013"; }
.cov-groups { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.25rem 0 2.25rem; }
.audit-table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.audit-table th, .audit-table td { padding: 0.5rem 0.75rem; text-align: left; }



.audit-table tbody tr + tr > th, .audit-table tbody tr + tr > td { border-top: 1px solid var(--border, rgba(127,127,127,0.25)); }
.audit-table thead th { font-family: var(--font-display); font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border, rgba(127,127,127,0.25)); }
.audit-table tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
.audit-table td { color: var(--text-muted); font-variant-numeric: tabular-nums; }



td.cov-chips { line-height: 2; font-variant-numeric: normal; }
.cov-chip { display: inline-block; margin: 0 0.3rem 0.2rem 0; padding: 0.06em 0.4em; border-radius: 4px; background: rgba(127, 127, 127, 0.16); color: var(--text); font-size: var(--fs-small); text-decoration: none; white-space: nowrap; border: 1px solid transparent; }
[data-theme="light"] .cov-chip, [data-theme="light"] .cov-chip:hover, [data-theme="light"] .cov-chip:focus-visible { background: transparent; border-color: var(--border); }
.cov-chip:hover, .cov-chip:focus-visible { background: rgba(127, 127, 127, 0.28); border-color: var(--border); color: var(--text); }




@media (max-width: 480px) { .cov-chip { white-space: normal; } }
.cov-chip-n { margin-left: 0.3em; color: inherit; font-variant-numeric: tabular-nums; }
.cov-chip-n::before { content: "\00d7"; }
.cov-list { list-style: none; margin: 0; padding: 0 1rem 0.9rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.25rem 1.5rem; }
.cov-list li { color: var(--text-muted); line-height: 1.5; font-size: var(--fs-table); display: flex; align-items: baseline; gap: 0.4rem; }
.cov-n { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); color: var(--text-muted); }


.cov-n::before { content: "– "; }
.dir { flex: none; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05em 0.4em; border-radius: 4px; border: 1px solid var(--border); color: var(--text-muted); }
.dir-both { color: var(--accent-text); border-color: var(--accent-dim); }


.cmd-p4 { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05em 0.35em; border-radius: 4px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; vertical-align: 0.06em; }


.cmd-rig { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05em 0.35em; border-radius: 4px; border: 1px dashed var(--border); color: var(--text-muted); white-space: nowrap; vertical-align: 0.06em; }



.cmd-table a.cmd-kind { text-decoration: none; color: inherit; }


.cmd-id { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.cmd-kind:hover .dir, .cmd-kind:focus-visible .dir { background: rgba(127, 127, 127, 0.16); color: var(--text); border-color: var(--text-muted); }






.legal-container a.legal-back { color: var(--text-muted); }
.legal-container a.legal-back:hover { color: var(--accent-text); }






.legal-container h2,
.guide-body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin: 2.75rem 0 0.75rem;
}
.legal-container h3,
.guide-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 1.7rem 0 0.4rem;
}








.meet--hero { border-bottom: 1px solid var(--border); }




.founder { display: flex; gap: 1rem; align-items: center; margin: 1.6rem 0; }
.founder-text { min-width: 0; }
.founder > div { flex: 1 1 auto; min-width: 0; }
.founder-photo {
  width: var(--founder-size, 88px);
  height: var(--founder-size, 88px);
  border-radius: 10px;
  object-fit: cover;
  flex: none;
  filter: grayscale(1);
}
@media (max-width: 480px) {
  .founder { display: block; }
  .founder-photo { margin-bottom: 0.6rem; }
}












@media (hover: hover) {
  .about-us-photo,
  .founder-photo { transition: filter 0.45s var(--ease); }

  .about-us-photo:hover,
  .founder-photo:hover { filter: grayscale(0); }
}



























.notfound { display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem var(--px); min-height: 60vh; }
.notfound-inner { max-width: 32rem; }
.notfound-code { font-family: var(--font-display); font-size: clamp(3rem, 13vw, 7.5rem); font-weight: 800; line-height: 1; color: var(--accent-text); letter-spacing: -0.02em; }
.notfound-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; margin: 0.5rem 0 0.75rem; }
.notfound-text { color: var(--text-muted); margin-bottom: 2rem; line-height: 1.7; }




:where([data-page="about"]) .legal-title { max-width: 20ch; }
.founder-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin: 0; }
.founder-role { font-size: var(--fs-small); color: var(--text-muted); margin: 0.15rem 0 0.55rem; }




:where([data-page="bridge"]) .legal-title { max-width: 18ch; }

:where([data-page="bridge"]) .guide-body p,
:where([data-page="bridge"]) .guide-body ul,
:where([data-page="bridge"]) .guide-body ol { margin-bottom: 1rem; color: var(--text); line-height: 1.75; }

:where([data-page="bridge"]) .guide-body ul,
:where([data-page="bridge"]) .guide-body ol { padding-left: 1.4rem; }
.store-card { border: 1px solid var(--accent); border-radius: 10px; padding: 1.1rem 1.3rem; margin: 1.8rem 0; }
.store-card p { margin-bottom: 0.5rem; }
.store-card p:last-child { margin-bottom: 0; }
.quote-card { border-left: 3px solid var(--accent); padding: 0.15rem 0 0.15rem 1.1rem; margin: 1.6rem 0; }
.quote-card blockquote { margin: 0; }
.quote-card blockquote p { margin-bottom: 0.3rem; }
.quote-card figcaption { margin-top: 0.45rem; color: var(--text-muted); font-size: var(--fs-small); }
.status-scroll { overflow-x: auto; margin-bottom: 1rem; }
.status-table { border-collapse: collapse; width: 100%; font-size: var(--fs-table); }
.status-table th, .status-table td { text-align: left; padding: 0.5rem 0.75rem; vertical-align: top; line-height: 1.5; }
.status-table tbody tr + tr > th, .status-table tbody tr + tr > td { border-top: 1px solid rgba(127,127,127,0.25); }
.status-table thead th { border-bottom: 1px solid rgba(127,127,127,0.25); }
.status-table th:first-child, .status-table td:first-child { white-space: nowrap; }
.status-table td:nth-child(2) { width: 38%; }




.status-head { display: block; font-weight: 700; }
.status-line { display: block; width: fit-content; max-width: 100%; margin-top: 0.3rem; }
.status-line + .status-head { margin-top: 0.6rem; }
.status-table th { font-weight: 700; }






@media (max-width: 639.98px) {
  .status-scroll { overflow-x: visible; }
  .status-table, .status-table tbody, .status-table tr, .status-table td { display: block; }
  .status-table thead { display: none; }
  .status-table tr { padding: 0.75rem 0; }
  .status-table tbody tr + tr { border-top: 1px solid rgba(127,127,127,0.25); }
  .status-table tbody tr + tr > td { border-top: 0; }
  .status-table td { padding: 0.15rem 0; width: auto; }
  .status-table td:first-child, .status-table td:nth-child(2) { display: inline; padding: 0; }
  .status-table td:first-child { padding-right: 0.6rem; }
  .status-table td:nth-child(3) { padding-top: 0.35rem; }
}














.cmp-wrap, .status-scroll { --table-bg: var(--band); }
.cov-group .cmp-wrap { --table-bg: var(--bg); }
.cmp-table thead th, .audit-table thead th, .cmd-table thead th, .status-table thead th { vertical-align: bottom; }
body.tables-measured .cmp-wrap:not(.is-overflowing), body.tables-measured .status-scroll:not(.is-overflowing) { overflow: visible; }






















@property --fade-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
body.tables-measured :is(.cmp-wrap, .status-scroll).is-overflowing {
  --fade: 24px;
  --fade-l: var(--fade);
  --fade-r: var(--fade);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
body.tables-measured .cmp-table thead th, body.tables-measured .audit-table thead th, body.tables-measured .cmd-table thead th, body.tables-measured .status-table thead th { position: sticky; top: var(--group-head-h, 0px); z-index: 2; background: var(--table-bg); border-bottom: none; box-shadow: inset 0 -1px 0 var(--border); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.4em; vertical-align: baseline; }
.dot--green { background: #33c264; }
.dot--amber { background: #e0a63c; }
.dot--red { background: #e0524f; }
.dot--gray { background: #8a8f98; }




:where([data-page="founding"]) .legal-title { max-width: 20ch; }

:where([data-page="founding"]) .guide-body { max-width: 34rem; }
.fnd-form { margin: 2rem 0 0; }
.fnd-field { margin-bottom: 1.1rem; }
.fnd-label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 0.4rem; }
.fnd-hint { display: block; font-weight: 400; color: var(--text-muted); margin-top: 0.15rem; }
.fnd-input, .fnd-select { transition: border-color 0.2s; }

.fnd-selectwrap { position: relative; }
.fnd-select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer; }
.fnd-select::-ms-expand { display: none; }
.fnd-selectwrap::after { content: ""; position: absolute; right: 1.05rem; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); pointer-events: none; }
.fnd-selectwrap:focus-within::after { border-color: var(--accent-text); }
.fnd-optional { border-top: 1px solid var(--border); margin-top: 1.6rem; padding-top: 1.3rem; }
.fnd-optional-head { font-size: var(--fs-small); color: var(--text-muted); margin: 0 0 1rem; }
.fnd-submit { width: 100%; padding: 0.95rem 1.2rem; margin-top: 0.6rem; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; color: var(--bg); background: var(--accent-solid); border: none; border-radius: 8px; cursor: pointer; transition: opacity 0.2s; }
.fnd-submit:hover { opacity: 0.9; }
.fnd-form.is-live .fnd-submit[disabled] { opacity: 0.55; cursor: default; }

.fnd-nojs { display: none; border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.3rem; margin-top: 2rem; }
html:not(.js) .fnd-nojs { display: block; }
.fnd-fine { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.6; margin-top: 1rem; }
.fnd-error { color: #f4a02a; font-size: var(--fs-small); margin-top: 0.8rem; min-height: 1.2em; }

.fnd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fnd-done { display: none; border: 1px solid var(--accent); border-radius: 10px; padding: 1.4rem 1.5rem; margin-top: 2rem; }
.fnd-done h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.fnd-done p { margin-bottom: 0.5rem; }
.fnd-done p:last-child { margin-bottom: 0; }
.is-done .fnd-form { display: none; }
.is-done .fnd-done { display: block; }




:where([data-page="guide-traktor-ipad"]) .legal-title { max-width: 18ch; }




:where([data-page="ipad-traktor-controller"]) .legal-title { max-width: 24ch; }





.news-date { margin: 0 0 0.75rem; font-size: var(--fs-small); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }



.news-body ul { margin: 0.75rem 0 1rem; }
.news-body li { margin-bottom: 0.5rem; }





.legal-container .news-list { list-style: none; padding: 0; margin: 2rem 0 0; }
.legal-container .news-entry { border-top: 1px solid var(--border); padding: 1.5rem 0; margin: 0; display: grid; grid-template-columns: 200px 1fr; gap: 1.25rem; align-items: start; }
.news-entry:not(:has(.news-thumb)) { grid-template-columns: 1fr; }
.news-thumb img { width: 100%; height: auto; border-radius: 8px; display: block; border: 1px solid var(--border); }
@media (max-width: 640px) { .legal-container .news-entry { grid-template-columns: 1fr; } }
.news-entry h2 { margin: 0 0 0.5rem; }
.news-entry h2 a { text-decoration: none; }
.news-entry h2 a:hover { text-decoration: underline; }
.news-entry .news-date { margin-top: 0; margin-bottom: 0.35rem; }
.news-entry p:last-child { margin-bottom: 0; color: var(--text-muted); }



:where([data-page="press"]) .founder { --founder-size: 96px; align-items: flex-start; }



:where([data-page="press"]) .legal-title { max-width: 20ch; }

.press-block { border: 1px solid rgba(127, 127, 127, 0.28); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; background: rgba(127, 127, 127, 0.05); }
.press-block-label { display: block; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.5rem; }
.press-block p { margin: 0; }
.press-block .press-block-url { margin: 0.6rem 0 0; font-size: var(--fs-small); }


.fact-sheet { border: 1px solid rgba(127, 127, 127, 0.28); border-radius: 10px; padding: 1.25rem; }
.fact-sheet dt { text-transform: uppercase; font-size: var(--fs-small); letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.fact-sheet dd { margin-bottom: 0.2rem; overflow-wrap: anywhere; }


.press-assets { list-style: none; padding: 0; }
.press-assets li { margin-bottom: 0.5rem; }
.press-assets ul { list-style: none; padding-left: 0; margin: 0.5rem 0 0; }
.press-assets ul li { margin-bottom: 0.5rem; }
.press-assets > li:last-child, .press-assets ul li:last-child { margin-bottom: 0; }
.press-assets .press-kind { color: var(--text-muted); font-size: var(--fs-small); }
.press-kit-cta { display: inline-block; margin: 0.5rem 0 1.5rem; padding: 0.7rem 1.1rem; border: 1px solid var(--accent); border-radius: 10px; font-weight: 600; }




.press-shot-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 0.5rem; }
.press-shot-row img { width: 100%; height: auto; border-radius: 6px; display: block; }






.press-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.5rem; margin: 1.75rem 0 0; }
.press-media-cell { margin: 0; min-width: 0; }
.press-media-cell figcaption { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--text-muted); }
.press-media-cell .yt-facade { max-width: none; margin: 0; }






.press-media-cell .press-media-still,
.press-media-cell .press-video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; display: block; object-fit: contain; background: hsl(220, 15%, 8%); }
.press-media-cell .press-shot-row { margin-top: 0; grid-template-columns: repeat(2, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); aspect-ratio: 16 / 9; }
.press-media-cell .press-shot-row img { height: 100%; min-height: 0; object-fit: contain; background: hsl(220, 15%, 8%); }


.press-media-note { margin-top: 2.25rem; border: 1px solid rgba(127, 127, 127, 0.28); border-radius: 10px; padding: 1.1rem 1.25rem; background: rgba(127, 127, 127, 0.05); }
.press-media-note h3 { margin: 0 0 0.6rem; }
.press-media-note p { font-size: var(--fs-small); }
.press-media-note p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .press-media { grid-template-columns: 1fr; gap: 2rem; }
  .press-media-cell .press-shot-row { aspect-ratio: auto; }
  .press-media-cell .press-shot-row img { height: auto; background: none; }


  .press-media-cell .press-media-still,
  .press-media-cell .press-video { aspect-ratio: auto; background: none; }
}






.press-block, .press-quote { position: relative; }
.press-copy { position: absolute; top: 0.6rem; right: 0.6rem; padding: 0.25rem 0.6rem; font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: transparent; border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 6px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.press-copy::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 44px; transform: translateY(-50%); }
.press-copy:hover { color: var(--accent-text); border-color: var(--accent-text); }
.press-copy:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.press-copy.is-copied { color: var(--accent-text); border-color: var(--accent-text); }
.press-quote .press-copy { top: 0; right: 0; }
.press-quote p:first-of-type { padding-right: 5.5rem; }
.press-block p { padding-right: 4.5rem; }


.press-copy--inline { position: static; margin-left: 0.4rem; padding: 0.1rem 0.45rem; font-size: 0.7rem; vertical-align: middle; }
.press-copy-inline-holder { white-space: nowrap; }

.press-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) {
  .press-copy:not(.press-copy--inline) { position: relative; top: auto; right: auto; display: inline-block; margin-top: 0.75rem; }
  .press-quote p:first-of-type, .press-block p { padding-right: 0; }
  .press-quote .press-copy-holder { display: block; margin-top: 0.6rem; }
}

.press-quote { border-left: 2px solid var(--accent); padding: 0.2rem 0 0.2rem 1rem; margin: 0 0 1.5rem; }
.press-quote p { margin: 0 0 0.35rem; }
.press-quote-ctx { color: var(--text-muted); }
.press-quote cite { font-style: normal; font-size: var(--fs-small); color: var(--text-muted); }
.press-quote cite ~ p { margin-top: 0.6rem; }









.cmd-filter { position: relative; margin: 1.5rem 0; font-size: var(--fs-small); color: var(--text-muted); }
.cmd-filter .field { padding-right: 8.2rem; }
.cmd-filter .field:placeholder-shown { padding-right: 0.9rem; }

.cmd-filter-count { position: absolute; right: 2.7rem; top: 50%; transform: translateY(-50%); pointer-events: none; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.cmd-groups > .cov-group-wrap[hidden] { display: none; }
.cmd-legend-list { margin: 0; padding: 0.9rem 1rem 0.9rem 2.2rem; }







.cmd-legend.cov-group > summary { padding-left: 2.2rem; }
.cmd-legend.cov-group > summary > h2::before { content: none; }
.cmd-legend-list dt.h-anchored > .h-anchor { position: absolute; left: -1.2rem; right: auto; top: 0; margin-right: 0; }





.legal-container .cmd-legend-list dt[id] { scroll-margin-top: calc(var(--group-head-h, 0px) + var(--anchor-room)); }
.legal-container .cmd-legend-list dt { margin-top: 0.75rem; font-weight: 600; font-size: var(--fs-table); }
.cmd-legend-list dt > .dir, .cmd-legend-list dt > .cmd-p4, .cmd-legend-list dt > .cmd-rig { margin-right: 0.2em; }
.legal-container .cmd-legend-list dd { margin: 0.15rem 0 0; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; }
.cmd-legend summary .cov-cat { font-size: var(--fs-table); }




.cmd-legend { border-style: dashed; background: transparent; margin-bottom: 1.75rem; }




body.tables-measured .cmd-legend[open] > summary::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 1px dashed var(--border); pointer-events: none; }
.cmd-legend-hint { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); color: var(--text-muted); }
.cmd-target { margin-left: auto; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); color: var(--text-muted); text-align: right; }
.cov-group .cmp-wrap { margin: 0 0 0.35rem; padding: 0 0.5rem; }







:where([data-page="traktor-commands"]) .guide-body > p { max-width: 46rem; }
:where([data-page="traktor-commands"]) .cmd-legend-list dd { max-width: 46rem; }





.cmd-legend-list .cmd-facts { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.cmd-legend-list .cmd-facts li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 0.6rem; margin: 0 0 0.1rem; }
.cmd-facts-k { color: var(--text); }
.cmd-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-table); }













.cmd-table thead th:nth-child(1) { width: 2.5rem; }
.cmd-table thead th:nth-child(3) { width: 2.4rem; }
.cmd-table thead th:nth-child(4) { width: 6.5rem; }
.cmd-table thead th:nth-child(5) { width: 6.5rem; }
.cmd-table thead th:nth-child(6) { width: 6.5rem; }
.cmd-table thead th:nth-child(7) { width: 6.5rem; }
.cmd-table .cmd-val { white-space: normal; }
.cmd-table th.cmd-io-h, .cmd-table td.cmd-io-cell { padding-left: 0.1rem; padding-right: 0.1rem; }



.cmd-table th.cmd-tap-h, .cmd-table td.cmd-tap-cell { padding-left: 0.5rem; padding-right: 0.1rem; }
.cmd-table tr.cmd-sub th { padding-left: 0.5rem; }
.cmd-table td.cmd-io-cell { text-align: center; }


.cmd-io { display: inline-block; width: 12px; height: 12px; vertical-align: -0.1em; background-color: var(--text-muted); -webkit-mask: var(--io) center / contain no-repeat; mask: var(--io) center / contain no-repeat; }
.cmd-io--up { --io: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 10.5V1.5M2.5 5 6 1.5 9.5 5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cmd-io--down { --io: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M2.5 7 6 10.5 9.5 7' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cmd-io--both { --io: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 10.5V1.5M1 4l2.5-2.5L6 4M8.5 1.5v9M6 8l2.5 2.5L11 8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cmd-legend-list .cmd-io { margin-right: 0.15em; }
.cmd-tap { display: inline-block; width: 18px; height: 18px; border-radius: 4px; background: url("/assets/icons/tap-icon-54.png") center / 18px 18px no-repeat; vertical-align: -0.25em; }
.cmd-table th, .cmd-table td { padding: 0.35rem 0.45rem; text-align: left; vertical-align: baseline; }




















@media (hover: hover) {
  .cmp-table tbody tr:hover,
  .audit-table tbody tr:hover,
  .status-table tbody tr:hover,
  .cmd-table tbody tr:not(.cmd-sub):hover { background: rgba(127, 127, 127, 0.09); }
}




.cmd-table tbody tr:target,
.audit-table tbody tr:target { background: var(--accent-dim); }



.cmd-table tbody tr:target td, .audit-table tbody tr:target td,
.cmd-table tbody tr:target .cmd-id, .cmd-table tbody tr:target .dir,
.cmd-table tbody tr:target .cov-n { color: var(--text); }

.cmd-table tbody tr + tr > th, .cmd-table tbody tr + tr > td { border-top: 1px solid var(--border, rgba(127,127,127,0.25)); }
.cmd-table tbody tr.cmd-sub + tr > th, .cmd-table tbody tr.cmd-sub + tr > td { border-top: none; }
.cmd-table thead th { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); color: var(--text-muted); border-bottom: 1px solid var(--text-muted); }
.cmd-table tbody th { font-weight: 600; color: var(--text); white-space: normal; }





.cmp-wrap tr[id], .status-scroll tr[id] { scroll-margin-top: calc(var(--thead-h, 3.5rem) + var(--group-head-h, 0px) + var(--anchor-room)); }
.cmd-table td { color: var(--text-muted); }
.cmd-table td:nth-child(3), .cmd-table td:nth-child(4), .cmd-table td:nth-child(5) { white-space: nowrap; }
.cmd-table th .cmd-id { display: inline-block; font-weight: 400; font-size: var(--fs-small); margin-left: 0.35em; }



@media (max-width: 1023.98px) {
  .cmd-table { table-layout: auto; }
  .cmd-table thead th { width: auto; }
  .cmd-table th, .cmd-table td { padding: 0.35rem 0.45rem; }
  .cmd-table td:nth-child(5) { white-space: normal; }
}


td.cmd-values { font-size: var(--fs-small); line-height: 1.9; }


.cmd-val { display: inline-block; margin: 0 0.25rem 0.15rem 0; padding: 0.04em 0.36em; border-radius: 4px; background: rgba(127, 127, 127, 0.16); color: var(--text); white-space: nowrap; }
.cmd-values .cmd-note { color: var(--text-muted); }



.cmd-table tr.cmd-sub th { padding-top: 0.9rem; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); white-space: normal; }
.cmd-table tr.cmd-sub-2 th { padding-top: 0.6rem; text-transform: none; letter-spacing: 0; color: var(--text); }





.cmd-table th[data-path]::after { content: attr(data-path); display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); line-height: 1.35; color: var(--text-muted); margin-top: 0.1rem; }
.cmd-table tr[hidden] { display: none; }
.cmd-table tbody th .h-anchor, .audit-table tbody th .h-anchor { position: static; }


:where([data-page="support"]) .legal-container ol li { margin-bottom: 0.55rem; padding-left: 0.2rem; }
.guide-toc { margin: 1.5rem 0 2.75rem; padding: 1rem 1.25rem; border: 1px solid rgba(127, 127, 127, 0.28); border-radius: 10px; }
.guide-toc-title { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.7rem; }



.guide-toc > ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 1.4rem 2rem; align-items: start; }
.guide-toc-chapter { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text); line-height: 1.3; padding-bottom: 0.4rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border, rgba(127,127,127,0.28)); }
.guide-toc a { color: var(--accent-text); }
.guide-toc a.guide-toc-chapter { color: var(--text); }
.guide-toc a.guide-toc-chapter:hover { color: var(--accent-text); }
.guide-toc ul ul { list-style: none; margin: 0; padding: 0; }
.guide-toc ul ul li { margin: 0 0 0.3rem; font-size: var(--fs-small); line-height: 1.45; }
@media (max-width: 540px) {
  .guide-toc ul { columns: 1; }
}
.kb-ask { margin: 1.75rem 0 0; }
.kb-ask-label { display: block; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.5rem; }
.kb-ask-field { position: relative; }
.kb-ask-field input { padding-right: 2.6rem; }



.field-clear { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.field-clear[hidden] { display: none; }
.field-clear:hover { color: var(--text); background: rgba(127, 127, 127, 0.15); }
.field-clear:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.kb-results { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
.kb-results[hidden] { display: none; }















@media (min-width: 1024px) {
  body.has-rail .guide-cols { max-width: none; display: grid; grid-template-columns: minmax(0, 46rem) 16rem; grid-template-rows: auto 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  body.has-rail .guide-cols > .guide-lead { grid-column: 1; grid-row: 1; }
  body.has-rail .guide-cols > .guide-text { grid-column: 1; min-width: 0; }
  .guide-rail { --fade: 18px; grid-column: 2; grid-row: 1 / span 9999; position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 6rem); display: flex; flex-direction: column; min-height: 0; padding: 0.4rem 0 0 0.3rem; margin: 0 -0.3rem 0; }









  .guide-rail .kb-ask { margin: 0; }
  .guide-rail .kb-ask input { font-size: 0.92rem; padding: 0.55rem 0.7rem; }
  .guide-rail .cmd-filter { margin: 0; }
  .guide-rail .cmd-filter input { font-size: 0.92rem; padding: 0.55rem 7rem 0.55rem 0.7rem; }
  .guide-rail .cmd-filter input:placeholder-shown { padding-right: 0.7rem; }
  .guide-rail .guide-toc li[hidden] { display: none; }
  .guide-rail .guide-toc { flex: 1 1 auto; min-height: 0; margin: 0 0 0 -0.3rem; padding: var(--fade) 1rem var(--fade) 0.3rem; border: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--fade); scrollbar-width: thin; scrollbar-gutter: stable;    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }




  .guide-rail .kb-ask, .guide-rail .cmd-filter { flex: 0 0 auto; display: flex; flex-direction: column; margin-right: 1rem; margin-bottom: 0.4rem; }

  .guide-rail.is-searching .kb-ask { flex: 1 1 auto; min-height: 0; }
  .guide-rail .kb-results { flex: 1 1 auto; min-height: 0; margin: 0 -1rem 0 -0.3rem; padding: var(--fade) 1rem var(--fade) 0.3rem; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--fade); scrollbar-width: thin; scrollbar-gutter: stable; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
  .guide-rail .guide-toc-title { display: none; }
  .guide-rail .guide-toc > ul { display: block; }


  .guide-rail .guide-toc > ul > li { margin: 0 0 0.1rem; border-bottom: 1px solid var(--border, rgba(127,127,127,0.28)); }
  .guide-rail .guide-toc > ul > li:last-child { border-bottom: 0; }
  .guide-rail .guide-toc-chapter { font-size: 0.88rem; line-height: 1.35; padding: 0.3rem 0 0.3rem 0.7rem; margin: 0; border-bottom: 0; border-left: 2px solid transparent; cursor: pointer; }
  .guide-rail .guide-toc ul ul { display: none; padding: 0.1rem 0 0.45rem; }
  .guide-rail .guide-toc li.is-open > ul { display: block; }
  .guide-rail .guide-toc ul ul li { margin: 0; font-size: 0.84rem; line-height: 1.4; }
  .guide-rail .guide-toc ul ul a { display: block; padding: 0.2rem 0 0.2rem 1.45rem; border-left: 2px solid transparent; color: var(--text-muted); }
  .guide-rail .guide-toc ul ul a:hover, .guide-rail .guide-toc a.guide-toc-chapter:hover { color: var(--accent-text); }
  .guide-rail .guide-toc a.is-current { color: var(--text); border-left-color: var(--accent); }
  .guide-rail .guide-toc li.is-open > .guide-toc-chapter { color: var(--text); }
  .guide-rail .guide-toc li.is-open > .guide-toc-chapter:hover { color: var(--accent-text); }
  .guide-rail.is-searching .guide-toc { display: none; }
  .guide-rail .kb-results { gap: 0.4rem; }
  .guide-rail .kb-hit { padding: 0.5rem 0.7rem; }
  .guide-rail .kb-hit-title { font-size: 0.88rem; margin: 0; }
  .guide-rail .kb-hit p, .guide-rail .kb-hit .figure-zoom { display: none; }
  .guide-rail .kb-hit.has-figure { display: block; }
}










@media (max-width: 1023.98px) {
  .guide-rail .guide-toc { display: none; }
  .guide-sheet .guide-rail .guide-toc { display: block; }
}









@media (max-width: 1023.98px) {
  .guide-contents-btn { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: var(--z-float); height: 2.75rem; padding: 0 1rem 0 0.85rem; border-radius: 1.375rem; border: 1px solid var(--border, rgba(127,127,127,0.35)); background: var(--bg); color: var(--text); font: inherit; font-size: 0.92rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
  .guide-contents-btn[hidden] { display: none; }
  .guide-contents-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  .guide-sheet { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; flex-direction: column; justify-content: flex-end; }
  .guide-sheet[hidden] { display: none; }
  .guide-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
  .guide-sheet-panel { position: relative; box-sizing: border-box; height: 82%; display: flex; flex-direction: column; background: var(--bg); color: var(--text); border-radius: 16px 16px 0 0; border-top: 1px solid var(--border); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35); }
  .guide-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem 0.5rem 1.25rem; }
  .guide-sheet-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
  .guide-sheet-close { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
  .guide-sheet-close:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  .guide-sheet-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0.35rem 1.25rem 0; }
  .guide-sheet .guide-rail { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .guide-sheet .kb-ask, .guide-sheet .cmd-filter { flex: 0 0 auto; display: flex; flex-direction: column; margin: 0 0 0.75rem; }
  .guide-sheet .guide-rail.is-searching .kb-ask { flex: 1 1 auto; min-height: 0; }
  .guide-sheet .kb-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; padding-left: 0.3rem; margin-left: -0.3rem; }
  .guide-sheet .kb-results, .guide-sheet .guide-toc { padding-right: 1rem; scrollbar-gutter: stable; }
  .guide-sheet .guide-toc { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
  .guide-sheet .kb-results { gap: 0.4rem; }







  .guide-sheet .guide-toc::before, .guide-sheet .guide-toc::after, .guide-sheet .kb-results::before, .guide-sheet .kb-results::after { content: ''; position: sticky; left: 0; right: 0; display: block; flex: none; height: 22px; pointer-events: none; z-index: 2; }
  .guide-sheet .guide-toc::before, .guide-sheet .kb-results::before { top: -1px; background: linear-gradient(to bottom, var(--bg), transparent); }
  .guide-sheet .guide-toc::after, .guide-sheet .kb-results::after { bottom: -1px; background: linear-gradient(to top, var(--bg), transparent); }
  .guide-sheet .kb-hit { padding: 0.55rem 0.75rem; }
  .guide-sheet .kb-hit-title { font-size: 0.92rem; margin: 0; }
  .guide-sheet .kb-hit p, .guide-sheet .kb-hit .figure-zoom { display: none; }
  .guide-sheet .kb-hit.has-figure { display: block; }
  .guide-sheet .guide-rail.is-searching .guide-toc { display: none; }
  .guide-sheet .guide-toc { margin: 0; padding: 0 1rem 0 0; border: 0; }
  .guide-sheet .guide-toc-title { display: none; }
  .guide-sheet .guide-toc > ul { display: block; }
  .guide-sheet .guide-toc > ul > li { margin: 0 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border, rgba(127,127,127,0.28)); }
  .guide-sheet .guide-toc > ul > li:last-child { border-bottom: 0; }
  .guide-sheet .guide-toc-chapter { font-size: 0.95rem; padding-bottom: 0.35rem; margin-bottom: 0; border-bottom: 0; }
  .guide-sheet .guide-toc ul ul li { margin: 0; }
  .guide-sheet .guide-toc ul ul a { display: block; padding: 0.35rem 0 0.35rem 0.75rem; border-left: 2px solid transparent; color: var(--text-muted); font-size: 0.95rem; }
  .guide-sheet .guide-toc a.is-current { color: var(--text); border-left-color: var(--accent); }
  body.guide-sheet-open .app-content { overflow: hidden; }
  body.guide-sheet-open .app-content { visibility: hidden; }
}
@media (min-width: 1024px) { .guide-contents-btn, .guide-sheet { display: none !important; } }
.kb-hit { padding: 0.8rem 1rem; border: 1px solid rgba(127, 127, 127, 0.2); border-radius: 10px; background: rgba(127, 127, 127, 0.05); }
.kb-hit-title { display: block; margin: 0 0 0.3rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); }
.kb-hit p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text); }


a.kb-hit { display: block; text-decoration: none; color: inherit; transition: border-color 0.2s; }
a.kb-hit:hover, a.kb-hit:focus-visible { border-color: var(--accent-dim); }
a.kb-hit:hover .kb-hit-title { color: var(--accent-text); }
.kb-hit.has-figure { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; align-items: start; }
.kb-hit.has-figure .kb-hit-title, .kb-hit.has-figure p { grid-column: 1; }
.kb-hit .figure-zoom { grid-column: 2; grid-row: 1 / span 2; width: auto; }


.kb-hit .figure-zoom img { display: block; width: 7.5rem; height: 6rem; object-fit: contain; background: #000; border-radius: 6px; border: 1px solid var(--border, rgba(127,127,127,0.28)); }
.kb-empty { font-size: var(--fs-small); color: var(--text-muted); }


.tap-faq { max-width: 640px; margin: 0; }
.tap-faq dt { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); margin-top: 1.5rem; transition: color var(--dur) var(--ease); }
.tap-faq dt:first-of-type { margin-top: 0; }
.tap-faq dd { margin: 0.4rem 0 0; max-width: 60ch; color: var(--text-muted); line-height: 1.65; transition: color var(--dur) var(--ease); }
.faq-more { margin-top: 2rem; }



.centered-copy { max-width: 720px; margin-inline: auto; text-align: center; }
.centered-copy .section-desc { max-width: 62ch; margin-inline: auto; }
.stage-quote { margin: 2.4rem auto 0; max-width: 42rem; text-align: center; }
.stage-quote blockquote { margin: 0; }
.stage-quote blockquote p { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 0; }
.stage-quote figcaption { margin-top: 0.6rem; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.6; }

:where([data-page="tap"]) .cmp-quote { border-left: 3px solid var(--accent); padding: 0.15rem 0 0.15rem 1.1rem; margin: 1.6rem 0 0; max-width: 46rem; }




:where([data-page="tkfx-alternative"]) .legal-title { max-width: 24ch; }




:where([data-page="traktor-mapping"]) .legal-title { max-width: 18ch; }




:where([data-page="traktor-stem-deck-ipad"]) .legal-title { max-width: 20ch; }




.in-short { margin: 1.5rem 0 2rem; padding: 1rem 1.25rem; border: 1px solid var(--border, rgba(127,127,127,0.28)); border-left: 3px solid var(--accent); border-radius: 10px; background: rgba(127, 127, 127, 0.05); }
.in-short-title { margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); }
.in-short ul { margin: 0; padding-left: 1.1rem; }
.in-short li { margin: 0.35rem 0; }
.in-short li:last-child { margin-bottom: 0; }
.guide-body .guide-prereq { margin: 0 0 1rem; font-size: var(--fs-small); color: var(--text-muted); }
.guide-figure { margin: 1.5rem 0 2rem; }
li > .guide-figure, dd > .guide-figure { margin: 0.9rem 0 1.4rem; }







.guide-figure img { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 10px; border: 1px solid var(--border, rgba(127,127,127,0.28)); }














.guide-figure.tall { width: min(100%, max(22rem, calc(32rem * var(--ar)))); margin-inline: auto; }
.guide-figure.tall img { width: min(100%, calc(32rem * var(--ar))); }



.guide-figure.small { width: min(30rem, 100%); margin-inline: auto; }



@media (max-width: 599px) {
  .guide-figure.tall:not(.column) { width: 100%; }
  .guide-figure.tall:not(.column) img { width: 100%; }
}
.figure-zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; }



.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-float); width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--bg); color: var(--text); font: 1.25rem/1 var(--font-body); cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); opacity: 0.9; transition: color 0.2s, opacity 0.2s; }
.to-top:hover { color: var(--accent-text); opacity: 1; }





.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.to-top-ring circle { fill: none; }
.to-top-track { stroke: var(--border, rgba(127,127,127,0.35)); transition: stroke 0.2s; }
.to-top-read { stroke: var(--accent-text); stroke-linecap: round; }
.to-top:hover .to-top-track { stroke: var(--accent-dim); }
.to-top:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.figure-zoom:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 10px; }
.figure-lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 0.75rem; box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 2rem 2rem max(2rem, env(safe-area-inset-bottom)); overflow: auto; border: 0; background: transparent; color: #fff; cursor: zoom-out; }
.figure-lightbox::backdrop { background: rgba(0, 0, 0, 0.86); }





.figure-lightbox img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; border-radius: 10px; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: crosshair; }

.figure-loupe { position: fixed; top: 0; left: 0; width: 320px; height: 320px; border-radius: 50%; background-color: #000; background-repeat: no-repeat; border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); pointer-events: none; z-index: 1; }









.figure-film { display: block; width: 100%; max-width: calc((100vh - 8rem) * 16 / 9); max-width: calc((100dvh - 8rem) * 16 / 9); height: auto; aspect-ratio: 16 / 9; max-height: 100%; min-height: 0; border-radius: 10px; background: #000; cursor: default; }
.figure-lightbox img[hidden], .figure-film[hidden], .figure-lightbox-caption[hidden] { display: none; }

.figure-film.is-portrait { max-width: calc((100vh - 8rem) * 9 / 16); max-width: calc((100dvh - 8rem) * 9 / 16); aspect-ratio: 9 / 16; }
.figure-lightbox-caption { margin: 0; padding: 0.55rem 1rem; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.85); text-align: center; max-width: 64ch; cursor: default; background: rgba(13, 18, 22, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 12px; }
.figure-lightbox-close { position: fixed; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.55); color: #fff; font: 1.4rem/1 var(--font-body); cursor: pointer; }
.guide-figure figcaption { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--text-muted); }








@keyframes guide-flash {
  from { background: var(--accent-dim); box-shadow: 0 0 0 6px var(--accent-dim), 0 0 0 7px var(--accent-glow); }
  to   { background: transparent;       box-shadow: 0 0 0 6px transparent,      0 0 0 7px transparent; }
}







.is-flash {
  animation: guide-flash 1.1s ease-out;
  border-radius: 6px;
  box-decoration-break: clone;
}
@media (prefers-reduced-motion: reduce) {
  .is-flash {
    animation: none;
    background: var(--accent-dim);
    box-shadow: 0 0 0 6px var(--accent-dim), 0 0 0 7px var(--accent-glow);
    border-radius: 6px;
  }
}




.h-anchored { position: relative; }










.h-anchor { --h-anchor-gap: 0.62em; position: absolute; right: 100%; top: 0; margin-right: var(--h-anchor-gap); font-weight: 400; color: var(--text-muted); opacity: 0.45; text-decoration: none; }
.h-anchor:hover, .h-anchor:focus-visible, .h-anchored:hover > .h-anchor { opacity: 1; color: var(--accent-text); }








.cov-group-wrap { --row: calc(var(--group-head-h, 49.5px) + 1px); }
@media (max-width: 540px) {
  .cov-group-wrap:has(> .cmd-legend) { --row: calc(var(--group-head-h, 75px) + 1px); }
}
.cov-group-wrap > .h-anchor-slot {
  position: relative; z-index: 4;
  display: block; line-height: var(--row); white-space: nowrap;
  width: max-content; height: calc(var(--row) + 1px); padding-top: 1px;
  padding-left: calc(1rem + 1px);
  font-family: var(--font-display);
  pointer-events: none;
}




.cov-group-wrap > .h-anchor-slot + .cov-group { margin-top: calc(-1 * var(--row) - 1px); }
body.tables-measured .cov-group-wrap > .h-anchor-slot { position: sticky; top: -1px; }
.cov-group-wrap > .h-anchor-slot:has(+ .cmd-legend) { display: flex; align-items: center; line-height: inherit; }
.cov-group-wrap > .h-anchor-slot > .h-anchor { pointer-events: auto; position: static; padding: 0.15em 0.4em; margin-left: -0.4em; margin-right: 0; }



.cov-group > summary > h2::before { content: "#"; visibility: hidden; font-weight: 400; margin-right: 0.62em; }
.cov-group-wrap:has(> details > summary > h2:hover) > .h-anchor-slot > .h-anchor { opacity: 1; color: var(--accent-text); }







@media (max-width: 1151.98px) {
  .h-anchor { position: static; }
}


:is(.press-media-note, .press-block, .press-quote, .fact-sheet, .store-card, .quote-card) .h-anchored > .h-anchor { position: static; }
.h-anchor-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 0.5rem); padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 0.85rem; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: var(--z-float); }
.h-anchor-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .h-anchor-toast { transition: none; } }










@media (max-width: 639.98px) {
  .cmp-table, .audit-table, .cmd-table, .cmp-table tbody, .audit-table tbody, .cmd-table tbody,
  .cmp-table tbody tr, .audit-table tbody tr, .cmd-table tbody tr,
  .cmp-table tbody th, .audit-table tbody th, .cmd-table tbody th,
  .cmp-table td, .audit-table td, .cmd-table td { display: block; }
  .cmp-table thead, .audit-table thead, .cmd-table thead { display: none; }
  .cmp-table tbody tr, .audit-table tbody tr, .cmd-table tbody tr { padding: 0.7rem 0; }
  .cmp-table tbody tr + tr, .audit-table tbody tr + tr, .cmd-table tbody tr + tr { border-top: 1px solid var(--border); }
  .cmp-table tbody tr + tr > th, .cmp-table tbody tr + tr > td, .audit-table tbody tr + tr > th, .audit-table tbody tr + tr > td, .cmd-table tbody tr + tr > th, .cmd-table tbody tr + tr > td { border-top: 0; }
  .cmp-table tbody th, .audit-table tbody th, .cmd-table tbody th { padding: 0 0 0.35rem; font-weight: 700; color: var(--text); white-space: normal; }
  .cmp-table td, .audit-table td, .cmd-table td { position: relative; padding: 0.15rem 0 0.15rem calc(32% + 0.6rem); min-height: 1.5rem; color: var(--text); text-align: left; }
  .cmp-table td::before, .audit-table td::before, .cmd-table td::before { content: attr(data-label); position: absolute; left: 0; top: 0.15rem; width: 32%; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }






  .cmp-table td:empty, .audit-table td:empty, .cmd-table td:empty { display: none; }
  .cmp-table tbody tr:first-child th, .cmp-table tbody tr:first-child td { background: transparent; }
  .cmd-table td { white-space: normal; }
  .cov-group .cmp-wrap { padding: 0 1rem; }
  .cmd-table tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; }
  .cmd-table tbody th { order: -1; flex: 0 1 auto; padding-right: 0.5rem; }
  .cmd-table th[data-path]::after { display: inline-block; content: "\00B7\00A0" attr(data-path); margin: 0 0 0 0.5em; white-space: nowrap; }
  .cmd-table td.cmd-tap-cell { flex: 0 0 auto; padding: 0 0 0.35rem; min-height: 0; }
  .cmd-table td.cmd-tap-cell::before { content: none; }
  .cmd-table td:not(.cmd-tap-cell) { flex: 0 0 100%; }
  .cmd-table td.cmd-io-cell { text-align: left; padding-left: calc(32% + 0.6rem); }
  .cmd-table td.cmd-io-cell .visually-hidden { position: static; width: auto; height: auto; margin: 0 0 0 0.35em; padding: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
  .cmd-table td > * { max-width: 100%; }
  .cmd-table tr.cmd-sub th { padding: 0.5rem 0 0; }
}