:root {
  color-scheme:dark;
  /* Site theme tokens: the extension's UI palette (src/shared/ui-theme.js). These
     defaults are the Deus look; a theme picked on the page (site-themes.js)
     overrides them on <html>. Colours below are written in these tokens. */
  --bg-rgb:8 11 24;
  --fg-rgb:242 243 250;
  --accent-rgb:201 199 248;
  --night:rgb(var(--bg-rgb));
  --panel:#111626;
  --muted:#a7aec3;
  --solid:rgb(var(--accent-rgb));
  --on-accent:#131527;
  --theme-wash:radial-gradient(ellipse at 75% 15%,#605d8928,transparent 55%),radial-gradient(ellipse at 15% 85%,#46446720,transparent 65%),#080b18;
  --ambient-background:var(--theme-wash);
  --white:rgb(var(--fg-rgb));
  --line:rgb(var(--fg-rgb) / .14);
  --lilac:rgb(var(--accent-rgb));
  --font:'DM Sans',sans-serif;
  --display:'Space Grotesk',sans-serif;
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
:root[data-scheme=light] {
  color-scheme:light;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scrollbar-color:rgb(var(--fg-rgb) / .19) var(--night);
  /* Room for the fixed header bar past the hero. */
  scroll-padding-top:84px;
}

body {
  margin:0;
  background:var(--night);
  color:var(--white);
  font-family:var(--font);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection {
  background:rgb(var(--accent-rgb) / .33);
  color:rgb(var(--fg-rgb));
}

button,input {
  font:inherit;
}

a {
  color:inherit;
  text-decoration:none;
}

button,a,input {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:wait;
  opacity:.6;
}

button,a,input,summary {
  touch-action:manipulation;
}

a:hover {
  color:var(--lilac);
}

:focus-visible {
  outline:2px solid color-mix(in srgb,rgb(var(--fg-rgb)) 36%,rgb(var(--accent-rgb)));
  outline-offset:4px;
}

button {
  color:inherit;
}

h1,h2,h3,p,figure {
  margin:0;
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:400;
  text-wrap:balance;
}

p,li,dd {
  text-wrap:pretty;
}

p {
  line-height:1.65;
}

svg {
  width:20px;
  height:20px;
}

.skip-link {
  position:fixed;
  inset-inline-start:16px;
  top:-100px;
  z-index:20;
  padding:12px;
  background:white;
  color:black;
}

.skip-link:focus {
  top:16px;
}

.header {
  position:absolute;
  z-index:5;
  inset:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:30px 4.5%;
  gap:24px;
}

.wordmark {
  direction:ltr; /* the logo reads the same in right-to-left pages */
  font:600 38px/.8 var(--display);
  letter-spacing:-3px;
  display:flex;
  align-items:center;
  gap:6px;
}

.wordmark .brand-mark {
  display:block;
  width:32px;
  height:32px;
  object-fit:contain;
  flex:none;
}

.header nav {
  display:flex;
  gap:32px;
  font-size:14px;
}

.header nav a {
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 90%,rgb(var(--bg-rgb)));
  transition:color .2s;
}

.header-install {
  border:1px solid rgb(var(--fg-rgb) / .33);
  padding:12px 18px;
  border-radius:30px;
  font-size:14px;
  transition:border-color .2s,background-color .2s,color .2s;
}

.header-install:hover {
  border-color:var(--lilac);
  background:rgb(var(--accent-rgb) / .08);
}

.header-install span {
  margin-inline-start:13px;
}

.stage {
  position:relative;
  isolation:isolate;
  min-height:680px;
  height:100svh;
  max-height:1200px;
  overflow:hidden;
  background:transparent;
}

.hero-copy {
  position:absolute;
  top:17%;
  inset-inline-start:6%;
  max-width:1000px;
}

.intro {
  font-size:14px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 82%,rgb(var(--bg-rgb)));
  margin-bottom:22px;
}

.hero-copy h1 {
  font-size:clamp(60px,min(8vw,12.5svh),128px);
  letter-spacing:-.06em;
  line-height:.98;
}

.hero-description {
  margin-top:28px;
  font-size:clamp(20px,1.6vw,27px);
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 88%,rgb(var(--bg-rgb)));
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:0;
  border-radius:30px;
  padding:17px 25px;
  min-height:52px;
  font-size:14px;
  font-weight:600;
  text-align:center;
  transition:background .2s,box-shadow .25s,transform .2s var(--ease-out);
}

.button:active:not(:disabled) {
  transform:scale(.98);
}

.button-light {
  background:var(--white);
  color:color-mix(in srgb,rgb(var(--accent-rgb)) 6%,rgb(var(--bg-rgb)));
}

.button-light:hover {
  color:color-mix(in srgb,rgb(var(--accent-rgb)) 6%,rgb(var(--bg-rgb)));
  background:color-mix(in srgb,rgb(var(--fg-rgb)) 62%,rgb(var(--accent-rgb)));
  box-shadow:0 10px 36px color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 91%,rgb(var(--bg-rgb))) 25%,transparent);
}

.hero-copy .intro {
  font-size:18px;
  margin-bottom:24px;
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:32px;
  flex-wrap:wrap;
}
.hero-install {
  min-height:68px;
  padding:20px 32px;
  border-radius:40px;
  font-size:18px;
}
.hero-text-link {
  font-size:17px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 88%,rgb(var(--bg-rgb)));
  border-bottom:1px solid rgb(var(--fg-rgb) / .27);
  padding-bottom:5px;
  transition:color .2s,border-color .2s;
}
.hero-text-link:hover {
  border-color:var(--lilac);
}
.vibing-now {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:22px 0 0;
  font-size:15px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 88%,rgb(var(--bg-rgb)));
}
.vibing-now[hidden] {
  display:none;
}
.vibing-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#3ddc84;
  box-shadow:0 0 0 0 #3ddc8499;
  animation:vibing-pulse 2s ease-out infinite;
}
@keyframes vibing-pulse {
  0% {box-shadow:0 0 0 0 #3ddc8499;}
  70% {box-shadow:0 0 0 9px #3ddc8400;}
  100% {box-shadow:0 0 0 0 #3ddc8400;}
}
@media(prefers-reduced-motion:reduce) {
  .vibing-dot {animation:none;}
}
/* Phones: "email me the link" replaces the store button (html.is-phone is set in <head>). */
.desktop-link {
  display:none;
  margin-top:26px;
  max-width:460px;
}
.is-phone .desktop-link {
  display:block;
}
.is-phone .hero-install,.is-phone .header-install {
  display:none;
}
.is-phone .hero-actions {
  margin-top:18px;
}
.is-phone .stage-footnote {
  display:none;
}
.desktop-link-lead {
  margin:0 0 14px;
  font-size:15px;
  line-height:1.45;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 88%,rgb(var(--bg-rgb)));
}
.desktop-link-lead strong {
  color:var(--white);
}
.desktop-link-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.desktop-link-row input {
  flex:1 1 200px;
  min-width:0;
  min-height:52px;
  padding:0 20px;
  border:1px solid rgb(var(--fg-rgb) / .27);
  border-radius:30px;
  background:rgb(var(--bg-rgb) / .7);
  color:var(--white);
  font-size:16px;
}
.desktop-link-row input::placeholder {
  color:color-mix(in srgb,rgb(var(--accent-rgb)) 68%,rgb(var(--bg-rgb)));
}
.desktop-link-row input:focus {
  outline:none;
  border-color:var(--lilac);
}
.desktop-link-row .button {
  flex:1 1 auto;
  min-height:52px;
  padding:0 24px;
  font-size:16px;
  font-weight:600;
}
.desktop-link-row .button:disabled {
  opacity:.6;
}
.desktop-link-trap {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}
.desktop-link-note {
  margin:10px 0 0;
  min-height:1.4em;
  font-size:13px;
  color:var(--muted);
}
.desktop-link[data-state="sent"] .desktop-link-note {
  color:#b9f3cf;
}
.desktop-link[data-state="error"] .desktop-link-note {
  color:#ffb4b4;
}
.desktop-link-store {
  display:inline-block;
  margin-top:6px;
  font-size:13px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 71%,rgb(var(--bg-rgb)));
  border-bottom:1px solid rgb(var(--fg-rgb) / .19);
}
#heroTitle:focus {
  outline:none;
}

.section {
  max-width:1440px;
  margin:auto;
  padding:clamp(76px,7vw,104px) 7%;
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:70px;
  margin-bottom:48px;
}

h2,.pricing-only h1 {
  font-size:clamp(36px,4.2vw,64px);
  line-height:1.1;
  letter-spacing:-.045em;
}

.section-heading>p {
  max-width:380px;
  color:var(--muted);
  font-size:17px;
}

.pricing .section-heading {
  align-items:center;
}

.plans {
  display:grid;
  grid-template-columns:1fr 1fr;
  /* Rows shared by both cards (subgrid) so the two buttons line up:
     title, price, list, email field, button, trust note, message. */
  grid-template-rows:repeat(8,auto);
  column-gap:24px;
}

.plan {
  display:grid;
  grid-row:span 8;
  grid-template-rows:subgrid;
  row-gap:0;
  padding:38px;
  border:1px solid var(--line);
  border-radius:16px;
  background:color-mix(in srgb,rgb(var(--accent-rgb)) 4%,rgb(var(--bg-rgb)));
}

.plan-pro {
  position:relative;
  background:radial-gradient(ellipse 80% 60% at 85% 0%,color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 82%,rgb(var(--bg-rgb))) 23%,transparent),transparent 70%),color-mix(in srgb,rgb(var(--accent-rgb)) 9%,rgb(var(--bg-rgb)));
  border-color:rgb(var(--accent-rgb) / .54);
  box-shadow:0 30px 80px #0006,0 0 0 1px rgb(var(--accent-rgb) / .12),inset 0 1px 0 rgb(var(--fg-rgb) / .1);
}
.plan-badge {
  position:absolute;
  inset-inline-end:24px;
  top:24px;
  padding:6px 12px;
  border:1px solid rgb(var(--accent-rgb) / .4);
  border-radius:20px;
  background:rgb(var(--accent-rgb) / .12);
  font-size:12px;
  font-weight:550;
  letter-spacing:.02em;
  color:var(--lilac);
}

.plan h3 {
  font-size:19px;
  margin-bottom:24px;
}

.plan-price {
  font-family:var(--display);
  font-size:clamp(48px,4.4vw,60px);
  letter-spacing:-.05em;
  line-height:1;
}

.plan-price span {
  display:block;
  font-family:var(--font);
  font-size:13px;
  color:var(--muted);
  letter-spacing:0;
  margin-top:14px;
}

.plan ul {
  list-style:none;
  margin:30px 0;
  padding:0;
  min-height:158px;
}

.plan li {
  position:relative;
  padding-inline-start:24px;
  margin-top:12px;
  font-size:15px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 88%,rgb(var(--bg-rgb)));
  line-height:1.5;
}

.plan li::before {
  content:'';
  position:absolute;
  inset-inline-start:1px;
  top:.42em;
  width:10px;
  height:5px;
  border-left:1.5px solid var(--lilac);
  border-bottom:1.5px solid var(--lilac);
  transform:rotate(-45deg);
}

.plan li strong {
  font-weight:500;
}

.plan .button {
  width:100%;
}

.plan>.button {
  grid-row:5;
}

.plan .checkout-group {
  display:contents;
}

.checkout-field {
  display:grid;
  gap:9px;
  font-size:12px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 86%,rgb(var(--bg-rgb)));
}

.checkout-field input {
  width:100%;
  background:rgb(var(--bg-rgb) / .3);
  border:1px solid rgb(var(--fg-rgb) / .22);
  border-radius:12px;
  padding:13px 15px;
  color:white;
  margin-bottom:12px;
  min-height:48px;
  font-size:15px;
  transition:border-color .2s,background-color .2s;
}

.checkout-field input::placeholder {
  color:color-mix(in srgb,rgb(var(--accent-rgb)) 68%,rgb(var(--bg-rgb)));
}

.checkout-field input:focus {
  outline:none;
  border-color:var(--lilac);
  background:rgb(var(--bg-rgb) / .5);
}

.checkout-trust {
  font-size:12px;
  color:var(--muted);
  margin-top:12px;
}

.checkout-message {
  font-size:13px;
  margin-top:8px;
  color:#ebd6b1;
}
.checkout-alt {
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:1.5;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 83%,rgb(var(--bg-rgb)));
}

.recover {
  display:grid;
  place-items:center;
  min-height:calc(100svh - 220px);
}
.recover-card {
  display:block;
  grid-row:auto;
  width:100%;
  max-width:480px;
}
.pricing-only .recover-card h1 {
  font:400 40px/1.1 var(--display);
  letter-spacing:-.03em;
  margin-bottom:14px;
}
.recover-card>p:not(.eyebrow) {
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 83%,rgb(var(--bg-rgb)));
  font-size:15px;
  line-height:1.55;
  margin-bottom:28px;
}

.plan-footnote {
  font-size:14px;
  max-width:700px;
  margin:22px auto 0;
  text-align:center;
  color:var(--muted);
}

.faq {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:70px;
  padding-top:40px;
}

.questions details {
  border-bottom:1px solid var(--line);
}

.questions summary {
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:24px 40px 24px 0;
  font-size:16px;
  transition:color .2s;
}

.questions summary:hover,.questions details[open] summary {
  color:rgb(var(--fg-rgb));
}

.questions summary::-webkit-details-marker {
  display:none;
}

.questions summary::after,.spec-list summary::after {
  content:'+';
  position:absolute;
  inset-inline-end:4px;
  top:50%;
  font:300 24px/1 var(--font);
  color:var(--muted);
  transform:translateY(-50%);
  transition:transform .3s var(--ease-out),color .2s;
}

.questions details[open] summary::after,.spec-list details[open] summary::after {
  color:var(--lilac);
  transform:translateY(-50%) rotate(45deg);
}

.questions summary:hover::after,.spec-list summary:hover::after {
  color:var(--lilac);
}

/* Answers slide open (Chrome 131+; elsewhere they simply appear). */
:is(.questions,.spec-list) details::details-content {
  block-size:0;
  overflow:clip;
  transition:block-size .32s var(--ease-out),content-visibility .32s allow-discrete;
}

:is(.questions,.spec-list) details[open]::details-content {
  block-size:auto;
}

.questions p {
  max-width:620px;
  padding:0 40px 26px 0;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 81%,rgb(var(--bg-rgb)));
  font-size:16px;
}

.questions a {
  text-decoration:underline;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 54%,rgb(var(--accent-rgb)));
}

.footer {
  padding:24px 7%;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:18px 26px;
}

.footer>p {
  font-size:13px;
  color:var(--muted);
  text-align:end;
}

.footer nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px 24px;
  font-size:13px;
  color:var(--muted);
}

.footer nav a {
  transition:color .2s;
}

.footer .footer-note {
  grid-column:1/-1;
  max-width:none;
  justify-self:start;
  text-align:start;
  font-size:12px;
  color:color-mix(in srgb,rgb(var(--accent-rgb)) 61%,rgb(var(--bg-rgb)));
}

.pricing-only .header {
  position:relative;
}

.pricing-only main {
  padding-top:80px;
}

.pricing-only h1 {
  font-size:64px;
}

[hidden] {
  display:none!important;
}

@media(min-width:761px) {
  body:has(.visual-experience) .header {
    padding-inline-start:6%;
  }
  body:has(.visual-experience) .header .wordmark {
    font-size:44px;
  }
  body:has(.visual-experience) .header .wordmark .brand-mark {
    width:36px;
    height:36px;
  }
}

@media(min-width:1600px) {
  body:has(.visual-experience) .header {
    padding-inline-start:calc((100% - 1360px)/2);
  }
  .hero-copy {
    inset-inline-start:calc((100% - 1360px)/2);
  }
}

@media(max-width:1100px) {
  .section-heading {
    gap:32px;
  }
  .section-heading>p {
    max-width:300px;
  }
}

@media(max-width:760px) {
  .header {
    padding:25px 6%;
  }
  .header nav {
    display:none;
  }
  .wordmark {
    font-size:34px;
  }
  .header-install {
    font-size:12px;
    padding:10px 15px;
  }
  .stage {
    min-height:700px;
    max-height:none;
  }
  .hero-copy {
    top:155px;
    left:7%;
    right:7%;
  }
  .hero-copy h1 {
    font-size:clamp(44px,11.5vw,72px);
  }
  .hero-description {
    font-size:16px;
  }
  .intro {
    font-size:12px;
    margin-bottom:18px;
  }
  .section {
    padding:72px 7%;
  }
  .section-heading {
    display:block;
    margin-bottom:32px;
  }
  .section-heading>p {
    margin-top:24px;
    max-width:500px;
    font-size:15px;
  }
  .plans {
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:16px;
  }
  .plan {
    display:block;
    padding:28px;
  }
  .plan .checkout-group {
    display:block;
  }
  .plan ul {
    min-height:0;
  }
  .plan-footnote {
    text-align:start;
  }
  .faq {
    grid-template-columns:1fr;
    gap:24px;
    padding-top:24px;
  }
  .questions summary {
    padding-block:20px;
    font-size:15px;
  }
  .footer {
    padding:28px 7%;
  }
  .footer nav {
    grid-column:1/-1;
    justify-content:flex-start;
    gap:18px;
  }
  .footer>p {
    max-width:150px;
    justify-self:end;
    font-size:12px;
  }
  .pricing-only h1 {
    font-size:48px;
  }
  .pricing-only main {
    padding-top:45px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  * {
    transition:none!important;
  }
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

@media(max-width:380px) {
  .hero-copy h1 {
    font-size:40px;
  }
  .hero-description {
    font-size:15px;
  }
}

/* One continuous canvas, revealed by the first interaction. */
body:has(.visual-experience) main,body:has(.visual-experience) .footer {
  position:relative;
  z-index:1;
}
.visual-experience {
  pointer-events:none;
}
.visual-art,.scene-layer,.ambient-still,.visual-wash {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ambient-still {
  background:radial-gradient(ellipse at 75% 30%,color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 47%,rgb(var(--bg-rgb))) 21%,transparent),transparent 55%),radial-gradient(ellipse at 40% 90%,color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 33%,rgb(var(--bg-rgb))) 13%,transparent),transparent 65%),rgb(var(--bg-rgb));
}
.scene-layer {
  opacity:0;
  transition:opacity 1.2s ease;
}
.visual-experience.is-active.aurora-ready[data-scene=aurora] #visualizer,
.visual-experience.is-active.space-ready[data-scene=space] #space-travel,
.visual-experience.is-active.wave-ready[data-scene=wave] #wave-after-wave {
  opacity:1;
}
.visual-wash {
  background:linear-gradient(90deg,rgb(var(--bg-rgb) / .72), rgb(var(--bg-rgb) / .14) 75%),linear-gradient(0deg,rgb(var(--bg-rgb) / .4),transparent 50%,rgb(var(--bg-rgb) / .27));
  transition:background .8s;
}
.visual-experience[data-scene=space] .visual-wash,
.visual-experience[data-scene=wave] .visual-wash {
  background:linear-gradient(90deg,rgb(var(--bg-rgb) / .73),rgb(var(--bg-rgb) / .44)),linear-gradient(0deg,rgb(var(--bg-rgb) / .27),transparent);
}
.visual-controls {
  position:fixed;
  z-index:10;
  inset-inline-end:max(24px,env(safe-area-inset-right));
  bottom:max(24px,env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap:2px;
  padding:4px;
  border:1px solid rgb(var(--fg-rgb) / .18);
  border-radius:32px;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 7%,rgb(var(--bg-rgb))) 70%,transparent);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 8px 32px #0005;
  pointer-events:auto;
  transition:opacity .35s ease,transform .35s ease,visibility 0s;
}
body:not(.controls-revealed) .visual-experience:not(.is-immersive) .visual-controls {
  opacity:0;
  transform:translateY(12px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease,transform .35s ease,visibility 0s .35s;
}
/* The controls sit above page content without placing the background above it. */
.visual-experience:not(.is-immersive) .visual-controls,
.visual-experience:not(.is-immersive) .demo-status:not(.sr-only) {
  z-index:10;
}
.visual-experience {
  z-index:auto;
}
.visual-art,.visual-wash {
  position:fixed;
  z-index:0;
}
.widget-button {
  min-width:46px;
  min-height:46px;
  border:1px solid rgb(var(--fg-rgb) / .18);
  border-radius:30px;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 7%,rgb(var(--bg-rgb))) 65%,transparent);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 4px 24px #0002;
  padding:10px 15px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 97%,rgb(var(--bg-rgb)));
  font-size:13px;
  display:inline-flex;
  gap:9px;
  align-items:center;
  justify-content:center;
  transition:background .2s,border-color .2s;
}
.widget-button:hover {
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 23%,rgb(var(--bg-rgb))) 66%,transparent);
  border-color:rgb(var(--fg-rgb) / .44);
}
.widget-button.expand {
  padding-inline:18px;
}
.expand span[aria-hidden] {
  font-size:23px;
  line-height:1;
}
/* Inside the shared pill the buttons are flat; the pill carries the glass. */
.visual-controls>.widget-button {
  min-width:42px;
  min-height:42px;
  padding:8px 14px;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.visual-controls>.widget-button:hover,.visual-controls>.widget-button[aria-expanded=true] {
  background:rgb(var(--fg-rgb) / .08);
  border-color:transparent;
}
#motion {
  display:none;
}
.quality-button svg {
  width:18px;
  height:18px;
}
.quality-menu {
  position:absolute;
  inset-inline-end:0;
  bottom:calc(100% + 10px);
  width:min(300px,calc(100vw - 32px));
  padding:14px;
  border:1px solid rgb(var(--fg-rgb) / .18);
  border-radius:20px;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 5%,rgb(var(--bg-rgb))) 95%,transparent);
  box-shadow:0 12px 40px #0008;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 97%,rgb(var(--bg-rgb)));
  font-size:13px;
}
.quality-menu[hidden] {
  display:none;
}
.quality-title {
  margin:0 0 4px;
  font-weight:650;
}
.quality-hint,.quality-note {
  margin:0 0 10px;
  color:color-mix(in srgb,color-mix(in srgb,rgb(var(--fg-rgb)) 97%,rgb(var(--bg-rgb))) 70%,transparent);
  line-height:1.45;
}
.quality-note {
  margin:10px 0 0;
}
.quality-options {
  display:grid;
  gap:4px;
}
.quality-options button {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:start;
  cursor:pointer;
}
.quality-options button span {
  color:color-mix(in srgb,color-mix(in srgb,rgb(var(--fg-rgb)) 97%,rgb(var(--bg-rgb))) 60%,transparent);
  font-size:12px;
}
.quality-options button:hover {
  background:rgb(var(--fg-rgb) / .07);
}
.quality-options button[aria-pressed=true] {
  border-color:rgb(var(--accent-rgb) / .5);
  background:rgb(var(--accent-rgb) / .12);
}
/* On Low and Still, glass panels skip their live blur: over a moving background
   it is recomputed every frame and can cost more than the visual itself. */
[data-visual-quality=low] :is(.widget-button,.immersive-label,.persona-bar,.live-status,.visual-controls,.header-install),
[data-visual-quality=still] :is(.widget-button,.immersive-label,.persona-bar,.live-status,.visual-controls,.header-install) {
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background-color:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 7%,rgb(var(--bg-rgb))) 94%,transparent);
}
[data-visual-quality] .visual-controls>.widget-button:not(:hover,[aria-expanded=true]) {
  background-color:transparent;
}
.is-active #motion {
  display:inline-flex;
}
.stage-footnote {
  position:absolute;
  inset:auto 6% 45px;
  display:flex;
  justify-content:center;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 82%,rgb(var(--bg-rgb)));
  font-size:18px;
  letter-spacing:.02em;
}
.stage-footnote>span span {
  margin-inline-start:12px;
}
/* The scroll hint has done its job once the page moves. */
.stage-footnote {
  transition:opacity .4s ease,transform .4s ease;
}
body.controls-revealed .stage-footnote {
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce) {
  .stage-footnote {transition:none;}
}
.demo-status:not(.sr-only) {
  position:fixed;
  inset-inline-end:24px;
  bottom:86px;
  max-width:min(330px,calc(100vw - 48px));
  padding:14px 18px;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 7%,rgb(var(--bg-rgb))) 93%,transparent);
  border:1px solid var(--line);
  border-radius:16px;
  font-size:12px;
}
.arrival {
  position:fixed;
  z-index:30;
  inset:0;
  display:grid;
  place-items:center;
  background:rgb(var(--bg-rgb) / .44);
  backdrop-filter:blur(28px) saturate(.45);
  -webkit-backdrop-filter:blur(28px) saturate(.45);
  opacity:1;
  transition:opacity .45s ease;
}
.arrival.is-leaving {
  opacity:0;
}
.arrival-button {
  min-height:88px;
  padding:26px 48px;
  border-radius:60px;
  font-size:24px;
  font-weight:550;
  background:rgb(var(--fg-rgb));
  box-shadow:0 12px 60px #0002;
}
.arrival-button-frame {
  position:relative;
  display:inline-flex;
  isolation:isolate;
}
.arrival-trace {
  position:absolute;
  z-index:-1;
  inset:-10px;
  width:calc(100% + 20px);
  height:calc(100% + 20px);
  overflow:visible;
  pointer-events:none;
}
.arrival-trace rect {
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:13 37;
  animation:arrival-trace 4.2s linear infinite;
  vector-effect:non-scaling-stroke;
}
.arrival-trace-glow {
  stroke:color-mix(in srgb,rgb(var(--accent-rgb)) 85%,rgb(var(--bg-rgb)));
  stroke-width:8;
  opacity:.42;
  filter:blur(5px);
}
.arrival-trace-core {
  stroke:color-mix(in srgb,rgb(var(--fg-rgb)) 88%,rgb(var(--accent-rgb)));
  stroke-width:2;
  filter:drop-shadow(0 0 5px rgb(var(--accent-rgb)));
}
@keyframes arrival-trace {
  to { stroke-dashoffset:-100; }
}
.arrival-stack {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  padding:0 16px;
  text-align:center;
}
.arrival-nudge {
  margin:0;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 88%,rgb(var(--accent-rgb)));
  font-size:15px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 0 12px color-mix(in srgb,rgb(var(--accent-rgb)) 85%,rgb(var(--bg-rgb)));
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s ease,transform .5s ease;
}
.arrival-nudge span {
  display:inline-block;
  margin-inline-start:4px;
}
.arrival.is-nudging .arrival-nudge {
  opacity:1;
  transform:none;
}
.arrival.is-nudging .arrival-nudge span {
  animation:arrival-nudge 1.2s ease-in-out infinite;
}
@keyframes arrival-nudge {
  50% { transform:translateY(4px); }
}
.arrival-sound-note {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 18%,rgb(var(--accent-rgb)));
  font-size:14px;
}
.arrival-sound-note svg {
  flex:none;
  width:18px;
  height:18px;
}
.arrival-skip {
  margin-top:6px;
  padding:8px 4px;
  border:0;
  border-bottom:1px solid rgb(var(--fg-rgb) / .25);
  background:none;
  font-size:14px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 85%,rgb(var(--bg-rgb)));
  transition:color .2s,border-color .2s;
}
.arrival-skip:hover {
  color:var(--white);
  border-color:var(--lilac);
}
.arrival-button:focus:not(:focus-visible) {
  outline:none;
}
.visual-experience.is-immersive {
  position:fixed;
  inset:0;
  background:rgb(var(--bg-rgb));
  z-index:50;
  pointer-events:auto;
}
.visual-experience.is-immersive .visual-wash {
  opacity:0;
}
body.immersed {
  overflow:hidden;
}
body.immersed .header,body.immersed main,body.immersed .footer {
  visibility:hidden;
}
/* Clears the fixed visual controls (46px tall, 24px from the bottom). */
body:has(.visual-experience) .footer {
  padding-bottom:86px;
}
@media(max-width:760px) {
  .visual-controls {
    inset-inline-end:max(16px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom));
  }
  /* Icons only on phones: the pill stays small over the content. */
  .visual-controls .control-label {
    display:none;
  }
  .visual-controls>.widget-button,.widget-button.expand {
    padding-inline:10px;
  }
  .stage-footnote {
    bottom:95px;
  }
  .visual-wash {
    background:linear-gradient(90deg,rgb(var(--bg-rgb) / .69),rgb(var(--bg-rgb) / .2)),linear-gradient(0deg,rgb(var(--bg-rgb) / .4),transparent);
  }
}
/* Short phones: the hero's buttons reach the bottom, so the cue has no room. */
@media(max-width:760px) and (max-height:700px) {
  .stage-footnote {
    display:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  .arrival {transition:none;}
  .arrival-trace rect {animation:none;stroke-dasharray:18 32;}
  .arrival-nudge {transition:none;transform:none;}
  .arrival.is-nudging .arrival-nudge span {animation:none;}
}

body.pricing-only {
  min-height:100svh;
  background:var(--ambient-background);
  background-attachment:fixed;
}

body.awaiting-entry {
  overflow:hidden;
}
/* Engine surfaces (preset-live.js). A scene shows only its shader canvas; the
   engine's 2D canvas would only ever show its fallback while a shader loads. */
.scene-layer .live-surfaces {
  position:absolute;
  inset:0;
}
.scene-layer .ymv-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:1;
}
.scene-layer .ymv-canvas:not(.ymv-canvas--active),
.scene-layer .ymv-canvas:first-child {
  visibility:hidden;
}

/* ——— Content sections (2026-09 restructure) ——— */
.hero-copy .intro {
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 90%,rgb(var(--bg-rgb)));
}
.hero-copy .intro span[aria-hidden] {
  color:var(--lilac);
}
.hero-description {
  max-width:620px;
  line-height:1.45;
}
.eyebrow {
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lilac);
  margin-bottom:18px;
}
.section-heading>div {
  min-width:0;
}
kbd {
  display:inline-block;
  min-width:1.7em;
  padding:1px 6px;
  border:1px solid rgb(var(--fg-rgb) / .22);
  border-bottom-width:2px;
  border-radius:6px;
  font:500 12px/1.4 var(--font);
  text-align:center;
  color:var(--white);
}
.plan-tag {
  display:inline-block;
  vertical-align:middle;
  margin-inline-start:8px;
  padding:3px 10px;
  border-radius:20px;
  border:1px solid rgb(var(--fg-rgb) / .18);
  font:500 11px/1.5 var(--font);
  letter-spacing:.02em;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 87%,rgb(var(--bg-rgb)));
  white-space:nowrap;
}
.plan-tag--pro {
  background:rgb(var(--accent-rgb) / .12);
  border-color:rgb(var(--accent-rgb) / .4);
  color:var(--lilac);
}
.small-note {
  font-size:13px;
  color:var(--muted);
}
.text-button {
  display:flex;
  align-items:center;
  gap:10px;
  margin:28px auto 0;
  min-height:46px;
  padding:0 24px;
  border:1px solid rgb(var(--fg-rgb) / .22);
  border-radius:30px;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 4%,rgb(var(--bg-rgb))) 69%,transparent);
  font-size:14px;
  font-weight:550;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 96%,rgb(var(--bg-rgb)));
  transition:border-color .2s,background-color .2s,color .2s;
}
.text-button::after {
  content:'';
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .25s;
}
.text-button[aria-expanded=true]::after {
  transform:translateY(1px) rotate(-135deg);
}
.text-button:hover {
  border-color:var(--lilac);
  background:rgb(var(--accent-rgb) / .08);
  color:rgb(var(--fg-rgb));
}
.button-outline {
  border:1px solid rgb(var(--fg-rgb) / .33);
  color:var(--white);
  background:rgb(var(--bg-rgb) / .25);
}
.button-outline:hover {
  border-color:var(--lilac);
}

/* Placeholder frames for screenshots that will be added later. */
.shot-frame {
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:rgb(var(--bg-rgb));
  box-shadow:0 30px 80px #0006;
}
.shot-bar {
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,rgb(var(--accent-rgb)) 8%,rgb(var(--bg-rgb)));
}
.shot-bar i {
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgb(var(--fg-rgb) / .15);
}
.shot-bar span {
  margin-inline-start:12px;
  padding:3px 14px;
  border-radius:12px;
  background:rgb(var(--bg-rgb) / .5);
  font-size:11px;
  color:var(--muted);
}
.shot-placeholder--split::before {
  content:'';
  position:absolute;
  inset:0 50% 0 0;
  background:linear-gradient(135deg,#f4efe414,#f4efe405);
  border-right:1px dashed rgb(var(--fg-rgb) / .16);
}
/* Screenshots keep the ratio of the real capture (from their width/height), never cropped. */
.shot-img {
  display:block;
  width:100%;
  height:auto;
}
.shot-img--anytab {
  border-radius:0 0 10px 10px;
}

/* Theme gallery: full screenshots at their own ratio, so nothing is cropped. */
.theme-gallery {
  position:relative;
  touch-action:pan-y;
}
.shot-img--theme {
  background:rgb(var(--bg-rgb));
}
.theme-nav {
  position:absolute;
  top:50%;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgb(var(--fg-rgb) / .19);
  border-radius:50%;
  background:rgb(var(--bg-rgb) / .7);
  backdrop-filter:blur(8px);
  color:var(--white);
  transform:translateY(-50%);
  opacity:.7;
  transition:opacity .2s,background .2s;
}
.theme-nav--prev {
  left:12px;
}
.theme-nav--next {
  right:12px;
}
.theme-gallery:hover .theme-nav,.theme-nav:focus-visible {
  opacity:1;
}
.theme-nav:hover {
  background:rgb(var(--bg-rgb) / .9);
}
.theme-count {
  margin-inline-start:6px;
  font-variant-numeric:tabular-nums;
  opacity:.7;
}
@media (hover:none) {
  .theme-nav {
    opacity:1;
  }
}

/* Preset gallery */
.kind-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.kind-tabs [role=tab] {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:8px 12px 8px 18px;
  border:1px solid rgb(var(--fg-rgb) / .19);
  border-radius:30px;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 4%,rgb(var(--bg-rgb))) 69%,transparent);
  font-size:15px;
  font-weight:550;
  color:var(--muted);
  transition:background-color .2s,border-color .2s,color .2s;
}
.kind-tabs [role=tab]:hover {
  border-color:rgb(var(--fg-rgb) / .4);
  color:var(--white);
}
.kind-tabs [aria-selected=true],.kind-tabs [aria-selected=true]:hover {
  background:var(--white);
  border-color:var(--white);
  color:color-mix(in srgb,rgb(var(--accent-rgb)) 6%,rgb(var(--bg-rgb)));
}
.kind-count {
  padding:3px 9px;
  border-radius:12px;
  background:rgb(var(--fg-rgb) / .08);
  font-size:12px;
  font-weight:500;
  line-height:1.3;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 93%,rgb(var(--bg-rgb)));
}
.kind-tabs [aria-selected=true] .kind-count {
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 6%,rgb(var(--bg-rgb))) 8%,transparent);
  color:color-mix(in srgb,rgb(var(--accent-rgb)) 6%,rgb(var(--bg-rgb)));
}
.kind-panel {
  display:grid;
  grid-template-columns:minmax(260px,340px) 1fr;
  gap:56px;
  align-items:start;
  padding-top:40px;
}
/* The description stays in view while a long preset grid scrolls past. */
@media(min-width:1101px) {
  .kind-explainer {
    position:sticky;
    top:100px;
  }
}
/* Gallery hint: hover on desktop, tap on touch screens. */
.on-touch {
  display:none;
}
@media(hover:none),(pointer:coarse) {
  .on-pointer {display:none;}
  .on-touch {display:inline;}
}
.kind-copy h3 {
  font-size:26px;
  letter-spacing:-.03em;
  margin-bottom:16px;
}
.kind-copy>p {
  font-size:16px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 88%,rgb(var(--bg-rgb)));
}
.kind-copy dl {
  margin:28px 0 0;
}
.kind-copy dl div {
  padding:14px 0;
  border-top:1px solid var(--line);
}
.kind-copy dt {
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.kind-copy dd {
  margin:0;
  font-size:15px;
  line-height:1.5;
}
.kind-note {
  margin-top:22px;
  font-size:14px;
  color:var(--muted);
}
.preset-grid {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:14px;
}
.preset-tile {
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:0;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 4%,rgb(var(--bg-rgb))) 80%,transparent);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  text-align:start;
  transition:border-color .2s,transform .3s var(--ease-out),box-shadow .3s;
}
.preset-tile:hover {
  border-color:rgb(var(--accent-rgb) / .44);
  transform:translateY(-3px);
  box-shadow:0 18px 44px #0007;
}
.preset-art img {
  transition:transform .6s var(--ease-out);
}
.preset-tile:hover .preset-art img {
  transform:scale(1.05);
}
.preset-tile:focus-visible {
  outline-offset:3px;
}
.preset-art {
  position:relative;
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:rgb(var(--bg-rgb));
}
.preset-art img,.preset-art .preset-placeholder {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.preset-text {
  display:grid;
  gap:3px;
  padding:12px 14px 14px;
}
.preset-name {
  font-size:14px;
  font-weight:550;
  line-height:1.3;
}
.preset-meta {
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* One neutral motif per kind: a placeholder, not a picture of the preset. */
.preset-placeholder {
  position:relative;
  background:rgb(var(--bg-rgb));
}
.preset-placeholder::after {
  content:'';
  position:absolute;
  inset:0;
  opacity:.75;
}
.motif-webgl::after {
  background:
    radial-gradient(circle at 50% 55%,transparent 0 12%,rgb(var(--bg-rgb)) 55%),
    repeating-radial-gradient(circle at 50% 55%,rgb(var(--accent-rgb) / .4) 0 1px,transparent 1px 11px),
    radial-gradient(circle at 50% 55%,color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 60%,rgb(var(--bg-rgb))) 33%,transparent),transparent 70%);
}
.motif-canvas::after {
  background:
    linear-gradient(0deg,rgb(var(--bg-rgb)) 0 18%,transparent 70%),
    repeating-linear-gradient(90deg,#9fd4e866 0 7px,transparent 7px 13px);
  -webkit-mask:linear-gradient(0deg,#000 20%,transparent 85%);
  mask:linear-gradient(0deg,#000 20%,transparent 85%);
}
.motif-milkdrop::after {
  background:
    radial-gradient(ellipse at 30% 40%,#b48ae060,transparent 55%),
    radial-gradient(ellipse at 70% 65%,#6fb6d050,transparent 55%),
    repeating-conic-gradient(from 20deg at 50% 50%,rgb(var(--fg-rgb) / .09) 0 6deg,transparent 6deg 18deg);
}
.motif-oscilloscope::after {
  background:
    radial-gradient(ellipse 34% 22% at 50% 50%,transparent 0 58%,#8dffb0aa 61%,transparent 66%),
    linear-gradient(#8dffb022 1px,transparent 1px) 0 0/12.5% 12.5%,
    linear-gradient(90deg,#8dffb022 1px,transparent 1px) 0 0/12.5% 12.5%,
    rgb(var(--bg-rgb));
}
.preset-browser {
  min-width:0;
}

/* Larger view */
.preset-viewer {
  width:min(1080px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  padding:0;
  border:1px solid rgb(var(--fg-rgb) / .19);
  border-radius:18px;
  background:color-mix(in srgb,rgb(var(--accent-rgb)) 3%,rgb(var(--bg-rgb)));
  color:var(--white);
  overflow:auto;
}
.preset-viewer[open] {
  display:grid;
  grid-template-columns:1.6fr 1fr;
}
.preset-viewer::backdrop {
  background:rgb(var(--bg-rgb) / .8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.viewer-media {
  aspect-ratio:16/10;
  background:rgb(var(--bg-rgb));
  min-width:0;
}
.viewer-info {
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:64px 32px 28px;
}
.viewer-kind {
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lilac);
}
.viewer-info h3 {
  font-size:clamp(28px,3vw,40px);
  letter-spacing:-.04em;
  line-height:1.05;
}
.viewer-description {
  font-size:15px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 88%,rgb(var(--bg-rgb)));
}
.viewer-facts {
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
  color:var(--muted);
}
.viewer-facts li {
  padding:8px 0;
  border-top:1px solid var(--line);
}
.viewer-nav {
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  color:var(--muted);
}
.viewer-close {
  position:absolute;
  inset-inline-end:16px;
  top:16px;
}

/* Music services */
.service-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:36px;
}
.service-logos {
  display:inline-flex;
}
.service-logos .service-logo + .service-logo {
  margin-inline-start:-9px;
}
.service-tabs [role=tab] {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 22px 10px 12px;
  min-height:52px;
  border:1px solid rgb(var(--fg-rgb) / .19);
  border-radius:40px;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 4%,rgb(var(--bg-rgb))) 69%,transparent);
  font-size:16px;
  font-weight:550;
  color:var(--muted);
}
.service-tabs [role=tab] img {
  width:28px;
  height:28px;
}
.logo-square {
  border-radius:8px;
}
.service-tabs [role=tab] {
  transition:background-color .2s,border-color .2s,color .2s;
}
.service-tabs [role=tab]:hover {
  border-color:rgb(var(--fg-rgb) / .4);
  color:var(--white);
}
.service-tabs [aria-selected=true],.service-tabs [aria-selected=true]:hover {
  background:var(--white);
  border-color:var(--white);
  color:color-mix(in srgb,rgb(var(--accent-rgb)) 6%,rgb(var(--bg-rgb)));
}
.service-panel {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);
  gap:56px;
  align-items:start;
}
.service-panel[hidden] {
  display:none;
}
.shot figcaption {
  padding:14px 2px 0;
  font-size:14px;
  color:var(--muted);
}
.shot-picker {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.shot-picker button {
  padding:8px 16px;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:30px;
  background:none;
  font-size:13px;
  color:var(--muted);
  transition:border-color .2s,color .2s,background-color .2s;
}
.shot-picker button:hover {
  border-color:rgb(var(--fg-rgb) / .27);
  color:var(--white);
}
.shot-picker [aria-pressed=true] {
  border-color:var(--lilac);
  color:var(--white);
  background:rgb(var(--accent-rgb) / .08);
}
.spec-list {
  margin:0;
}
.spec-list details {
  border-top:1px solid var(--line);
}
.spec-list details:last-child {
  border-bottom:1px solid var(--line);
}
.spec-list summary {
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:17px 40px 17px 0;
  font:400 19px/1.25 var(--display);
  letter-spacing:-.02em;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 93%,rgb(var(--bg-rgb)));
  transition:color .2s;
}
.spec-list summary::-webkit-details-marker,.more summary::-webkit-details-marker {
  display:none;
}
.spec-list summary:hover,.spec-list details[open] summary {
  color:var(--white);
}
.spec-body {
  padding:0 0 20px;
  font-size:15px;
  line-height:1.6;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 83%,rgb(var(--bg-rgb)));
}
/* Secondary details tucked behind a quiet text toggle. */
.more {
  margin-top:18px;
}
.more summary {
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
  font-size:13px;
  font-weight:550;
  letter-spacing:.02em;
  color:var(--lilac);
}
.more summary::after {
  content:'';
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s;
}
.more[open] summary::after {
  transform:translateY(1px) rotate(-135deg);
}
.more summary:hover {
  color:var(--white);
}
.more[open]>:not(summary) {
  animation:more-in .25s ease;
}
@keyframes more-in {
  from { opacity:0; transform:translateY(-4px); }
}
.more .anytab-specs,.kind-copy .more dl {
  margin-top:10px;
}
.spec-shot {
  display:block;
  width:min(240px,70%);
  height:auto;
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 20px 50px #0006;
}
.service-note {
  margin-top:40px;
  font-size:15px;
  color:var(--muted);
}
.service-note a,.anytab-copy a {
  color:var(--white);
  border-bottom:1px solid rgb(var(--fg-rgb) / .33);
}
.service-tabs .service-logo {
  flex:none;
  width:28px;
  height:28px;
}
/* YouTube Music: no screenshot yet, so the left column explains it in words. */
.service-intro h3 {
  margin:0 0 14px;
  font:400 30px/1.15 var(--display);
  letter-spacing:-.02em;
}
.service-intro > p {
  margin:0 0 24px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 90%,rgb(var(--bg-rgb)));
  font-size:17px;
  line-height:1.6;
  max-width:560px;
}
.service-intro .service-intro-host {
  margin-bottom:12px;
  color:var(--lilac);
  font-size:13px;
  letter-spacing:.04em;
}
.service-intro .steps kbd,.service-intro .steps strong {
  color:var(--white);
}
/* YouTube glow: an illustration, not a screenshot. */
.glow-demo {
  margin:0;
}
.glow-demo-frame {
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:16/10;
  overflow:hidden;
  border:1px solid rgb(var(--fg-rgb) / .18);
  border-radius:22px;
  background:rgb(var(--bg-rgb));
  box-shadow:0 30px 90px #0005;
}
.glow-demo-halo {
  position:absolute;
  width:64%;
  aspect-ratio:16/9;
  border-radius:18px;
  background:conic-gradient(from 0deg,#ff4d6d,#ffb347,#7cf3c4,#5aa8ff,color-mix(in srgb,rgb(var(--accent-rgb)) 87%,rgb(var(--bg-rgb))),#ff4d6d);
  filter:blur(38px);
  opacity:.75;
  animation:glow-pulse 1.9s cubic-bezier(.3,0,.2,1) infinite;
}
.glow-demo-video {
  position:relative;
  width:62%;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 30%,#ff7a5c 0,transparent 45%),
    radial-gradient(ellipse at 80% 70%,#4f8dff 0,transparent 50%),
    linear-gradient(135deg,color-mix(in srgb,rgb(var(--accent-rgb)) 15%,rgb(var(--bg-rgb))),#0f2a3a);
  box-shadow:0 0 0 1px rgb(var(--fg-rgb) / .25);
}
.glow-demo-video i {
  position:absolute;
  left:50%;
  top:50%;
  width:46px;
  height:32px;
  border-radius:9px;
  background:#ff0033e6;
  transform:translate(-50%,-50%);
}
.glow-demo-video i::after {
  content:'';
  position:absolute;
  left:18px;
  top:9px;
  border-left:13px solid rgb(var(--fg-rgb));
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}
.glow-demo figcaption {
  padding:14px 2px 0;
  font-size:14px;
  color:var(--muted);
}
@keyframes glow-pulse {
  0%,100% {transform:scale(1);opacity:.6;}
  12% {transform:scale(1.12);opacity:.95;}
  45% {transform:scale(1.04);opacity:.72;}
}
@media(prefers-reduced-motion:reduce) {
  .glow-demo-halo {animation:none;}
}
@media(max-width:760px) {
  .service-tabs {
    flex-wrap:wrap;
  }
  .integrations .service-tabs [role=tab] {
    flex:1 1 calc(50% - 5px);
  }
  .service-intro h3 {
    font-size:24px;
  }
}

/* Any tab */
.anytab {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);
  gap:56px;
  align-items:center;
}
.anytab-diagram {
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgb(var(--bg-rgb) / .85);
}
.tabstrip {
  display:flex;
  gap:4px;
  padding:6px 6px 0;
  border-radius:10px 10px 0 0;
  background:color-mix(in srgb,rgb(var(--accent-rgb)) 8%,rgb(var(--bg-rgb)));
}
.tabstrip .tab {
  flex:1;
  min-width:0;
  padding:9px 12px;
  border-radius:8px 8px 0 0;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tabstrip .is-playing {
  background:rgb(var(--bg-rgb));
  color:var(--white);
}
.tabstrip .is-playing b {
  font-weight:400;
  color:#9ef0c0;
  margin-inline-start:4px;
}
.tabstrip--deus .tab {
  flex:0 1 220px;
}
.tabstrip--deus .is-active {
  background:rgb(var(--bg-rgb));
  color:var(--lilac);
}
.anytab-arrow {
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  font-size:12px;
  color:var(--muted);
}
.anytab-arrow::before {
  content:'↓';
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--lilac);
  font-size:16px;
}
.anytab-copy h3 {
  font-size:26px;
  letter-spacing:-.03em;
  line-height:1.2;
  margin-bottom:22px;
}
.anytab-copy .plan-tag {
  margin:6px 0 0;
  display:table;
}
.anytab-specs {
  margin:0 0 20px;
}
.anytab-specs div {
  padding:10px 0;
  border-top:1px solid var(--line);
}
.anytab-specs dt {
  font-size:13px;
  font-weight:600;
  color:var(--white);
  margin-bottom:3px;
}
.anytab-specs dd {
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 83%,rgb(var(--bg-rgb)));
}
.steps {
  margin:0 0 22px;
  padding:0;
  list-style:none;
  counter-reset:step;
}
.steps li {
  counter-increment:step;
  position:relative;
  padding:12px 0 12px 44px;
  border-top:1px solid var(--line);
  font-size:16px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 90%,rgb(var(--bg-rgb)));
}
.steps li::before {
  content:counter(step);
  position:absolute;
  inset-inline-start:0;
  top:11px;
  font:400 20px/1 var(--display);
  color:var(--lilac);
}
.steps strong {
  font-weight:600;
}
/* Any-tab interface tour */
.anytab-tour {
  display:grid;
  gap:88px;
  margin-top:88px;
}
.tour-row {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);
  gap:56px;
  align-items:center;
}
.tour-screen {
  display:grid;
  gap:32px;
}
.tour-screen .tour-copy {
  max-width:720px;
}
.tour-screen .anytab-specs {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:32px;
  margin-bottom:0;
}
.tour-row--panel {
  grid-template-columns:minmax(280px,1fr) minmax(0,1.45fr);
  align-items:start;
}
.tour-copy h3 {
  font-size:26px;
  letter-spacing:-.03em;
  line-height:1.2;
  margin:0 0 14px;
}
.tour-copy>p {
  margin:0 0 20px;
  font-size:16px;
  line-height:1.6;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 83%,rgb(var(--bg-rgb)));
}
.tour-copy .anytab-specs dt .plan-tag {
  margin-inline-start:6px;
  vertical-align:1px;
}
.tour-row--panel .shot-picker .plan-tag {
  margin-inline-start:4px;
}
.tour-themes {
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(0,1.45fr);
  gap:56px;
  align-items:start;
}
.tour-themes .tour-copy>p {
  margin:0;
}
/* Site themes: each swatch repaints the whole page in one of the extension's themes. */
.site-themes-hint {
  margin:0 0 18px;
  font-size:16px;
  line-height:1.6;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 83%,rgb(var(--bg-rgb)));
}
.site-theme-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.site-theme {
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  padding:6px 6px 10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgb(var(--fg-rgb) / .03);
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 86%,rgb(var(--bg-rgb)));
  font-size:13px;
  text-align:start;
  cursor:pointer;
  transition:border-color .2s,background-color .2s,color .2s,transform .2s var(--ease-out);
}
.site-theme:hover {
  border-color:rgb(var(--fg-rgb) / .3);
  color:rgb(var(--fg-rgb));
  transform:translateY(-1px);
}
.site-theme:focus-visible {
  outline:2px solid var(--lilac);
  outline-offset:2px;
}
.site-theme[aria-pressed=true] {
  border-color:var(--lilac);
  background:rgb(var(--accent-rgb) / .12);
  color:rgb(var(--fg-rgb));
  box-shadow:0 0 0 1px var(--lilac);
}
.site-theme-swatch {
  position:relative;
  display:block;
  aspect-ratio:16/9;
  border-radius:11px;
  box-shadow:inset 0 0 0 1px #0000001f;
  overflow:hidden;
}
/* A tiny page in the theme: two lines of its text and a button in its accent. */
.site-theme-swatch::before,.site-theme-swatch::after {
  content:"";
  position:absolute;
  inset-inline-start:10px;
  border-radius:4px;
}
.site-theme-swatch::before {
  top:12px;
  width:46%;
  height:5px;
  background:var(--swatch-fg,transparent);
  box-shadow:0 9px 0 -1px color-mix(in srgb,var(--swatch-fg,transparent) 45%,transparent);
  opacity:.9;
}
.site-theme-swatch::after {
  bottom:10px;
  width:34%;
  height:12px;
  border-radius:6px;
  background:var(--swatch-accent,transparent);
}
.site-theme-name {
  padding-inline:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.site-theme-more {
  margin-top:14px;
  padding:9px 18px;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:30px;
  background:none;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 86%,rgb(var(--bg-rgb)));
  font-size:14px;
  cursor:pointer;
}
.site-theme-more:hover {
  border-color:var(--lilac);
  color:rgb(var(--fg-rgb));
}
.lang-button.theme-button {
  padding:10px 11px;
}
.theme-button svg {
  width:18px;
  height:18px;
}
/* Phones keep the header to language and install; the picker stays in its section. */
@media(max-width:760px) {
  .lang-button.theme-button {
    display:none;
  }
}
/* A picked theme's wash replaces the default still behind the page. */
:root[data-site-theme] .ambient-still {
  background:var(--theme-wash);
}
/* Colour changes glide instead of snapping when a theme is picked. */
:root.theme-switching body,:root.theme-switching body * {
  transition:background-color .4s ease,border-color .4s ease,color .4s ease!important;
}

/* Deus Studio and the floating Pet share one workshop section. */
.creator-tools {
  padding-top:42px;
}
.tool-disclosure {
  border-top:1px solid var(--line);
}
.tool-disclosure:last-of-type {
  border-bottom:1px solid var(--line);
}
.tool-summary {
  list-style:none;
  display:grid;
  grid-template-columns:minmax(155px,.42fr) minmax(300px,1.3fr) auto;
  gap:40px;
  align-items:center;
  padding:34px 0;
  cursor:pointer;
}
.tool-summary::-webkit-details-marker {
  display:none;
}
.tool-kicker {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  color:var(--lilac);
  font-size:13px;
  font-weight:600;
}
.tool-kicker .plan-tag {
  margin:0;
}
.tool-summary-copy {
  display:grid;
  gap:7px;
  min-width:0;
}
.tool-summary-copy strong {
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 92%,rgb(var(--accent-rgb)));
  font:400 clamp(23px,2.3vw,34px)/1.12 var(--display);
  letter-spacing:-.035em;
}
.tool-summary-copy>span {
  max-width:620px;
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}
.tool-summary-action {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  min-width:142px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 87%,rgb(var(--bg-rgb)));
  font-size:12px;
  white-space:nowrap;
}
.tool-summary-action i {
  position:relative;
  display:block;
  width:42px;
  height:42px;
  border:1px solid rgb(var(--fg-rgb) / .22);
  border-radius:50%;
  transition:border-color .2s,background-color .2s;
}
.tool-summary-action i::before,.tool-summary-action i::after {
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:1px;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:opacity .2s,transform .25s;
}
.tool-summary-action i::after {
  transform:translate(-50%,-50%) rotate(90deg);
}
.tool-summary:hover .tool-summary-action i {
  border-color:rgb(var(--accent-rgb) / .52);
  background:rgb(var(--accent-rgb) / .07);
}
.tool-disclosure[open] .tool-summary-action i::after {
  opacity:0;
  transform:translate(-50%,-50%) rotate(0);
}
.when-open {
  display:none;
}
.tool-disclosure[open] .when-closed {
  display:none;
}
.tool-disclosure[open] .when-open {
  display:inline;
}
.tool-disclosure-body {
  padding:4px 0 64px;
  animation:tool-open .28s ease;
}
.tool-lead {
  max-width:760px;
  margin:0 0 30px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 83%,rgb(var(--bg-rgb)));
  font-size:16px;
  line-height:1.65;
}
@keyframes tool-open {
  from {opacity:0;transform:translateY(-6px);}
}
.studio-shot {
  margin:30px 0 0;
}
.studio-shot img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgb(var(--fg-rgb) / .17);
  border-radius:16px;
  background:rgb(var(--bg-rgb));
  box-shadow:0 34px 90px #0007;
}
.studio-shot figcaption {
  padding:13px 2px 0;
  color:var(--muted);
  font-size:12px;
}
.studio-capabilities {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 34px;
  margin:42px 0 0;
}
.studio-capabilities div {
  padding:21px 0 24px;
  border-top:1px solid var(--line);
}
.studio-capabilities dt {
  margin-bottom:8px;
  font:400 18px/1.25 var(--display);
  letter-spacing:-.02em;
}
.studio-capabilities dd {
  margin:0;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 80%,rgb(var(--bg-rgb)));
  font-size:14px;
  line-height:1.6;
}
.studio-language {
  max-width:860px;
  margin-top:4px;
}
.studio-language p {
  margin-top:12px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 80%,rgb(var(--bg-rgb)));
  font-size:15px;
  line-height:1.65;
}
.studio-language code {
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 47%,rgb(var(--accent-rgb)));
}
.pet-body {
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(360px,.9fr);
  gap:68px;
  align-items:center;
}
.pet-specs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 28px;
  margin:30px 0 0;
}
.pet-specs div {
  padding:16px 0 18px;
  border-top:1px solid var(--line);
}
.pet-specs dt {
  margin-bottom:5px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 92%,rgb(var(--accent-rgb)));
  font-size:14px;
  font-weight:600;
}
.pet-specs dd {
  margin:0;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 78%,rgb(var(--bg-rgb)));
  font-size:14px;
  line-height:1.5;
}
.pet-copy .pet-permission {
  margin-top:20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.pet-demo {
  position:relative;
  display:grid;
  align-content:end;
  min-height:480px;
  margin:0;
  padding:30px;
  overflow:hidden;
  border:1px solid rgb(var(--fg-rgb) / .18);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 34%,rgb(var(--accent-rgb) / .15) 0 8%,transparent 34%),
    radial-gradient(ellipse at 28% 90%,color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 53%,rgb(var(--bg-rgb))) 22%,transparent),transparent 52%),
    rgb(var(--bg-rgb) / .85);
  box-shadow:0 30px 90px #0005;
}
.pet-demo-art {
  position:absolute;
  left:50%;
  top:43%;
  width:min(62%,280px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:
    repeating-radial-gradient(ellipse at 55% 45%,transparent 0 11px,rgb(var(--accent-rgb) / .26) 12px 13px,transparent 14px 22px),
    radial-gradient(circle at 42% 38%,color-mix(in srgb,rgb(var(--fg-rgb)) 88%,rgb(var(--accent-rgb))),transparent 8%),
    radial-gradient(circle at 50% 50%,color-mix(in srgb,rgb(var(--accent-rgb)) 80%,rgb(var(--bg-rgb))) 0 12%,color-mix(in srgb,rgb(var(--accent-rgb)) 66%,rgb(var(--bg-rgb))) 26%,color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 24%,rgb(var(--bg-rgb))) 67%,transparent) 46%,transparent 66%);
  filter:drop-shadow(0 0 22px color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 80%,rgb(var(--bg-rgb))) 56%,transparent)) drop-shadow(0 0 56px color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 60%,rgb(var(--bg-rgb))) 44%,transparent));
  animation:pet-breathe 4.4s ease-in-out infinite;
}
.pet-demo-art::before,.pet-demo-art::after,.pet-demo-art i {
  content:'';
  position:absolute;
  inset:8%;
  border:1px solid color-mix(in srgb,color-mix(in srgb,rgb(var(--fg-rgb)) 44%,rgb(var(--accent-rgb))) 40%,transparent);
  border-radius:48% 52% 42% 58%;
  transform:rotate(18deg);
}
.pet-demo-art::after {
  inset:17%;
  border-color:rgb(var(--fg-rgb) / .31);
  border-radius:62% 38% 54% 46%;
  transform:rotate(-34deg);
}
.pet-demo-art i {
  inset:-4%;
  border-color:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 92%,rgb(var(--bg-rgb))) 18%,transparent);
  border-radius:50%;
  transform:none;
}
.pet-demo-copy {
  position:relative;
  z-index:1;
  display:grid;
  gap:5px;
  max-width:340px;
}
.pet-demo-copy strong {
  font:400 23px/1.2 var(--display);
  letter-spacing:-.02em;
}
.pet-demo-copy span {
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 81%,rgb(var(--bg-rgb)));
  font-size:14px;
  line-height:1.5;
}
@keyframes pet-breathe {
  50% {transform:translate(-50%,-50%) scale(1.045) rotate(3deg);}
}

/* Video */

.reel-slots {
  list-style:none;
  margin:0;
  padding:0;
}

/* Channels: two compact cards; picking one opens its panel below. */
.channels {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 24px;
}
.channel {
  position:relative;
  padding:26px 30px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 4%,rgb(var(--bg-rgb))) 85%,transparent);
  transition:border-color .2s,background-color .2s;
}
.channel:hover {
  border-color:rgb(var(--fg-rgb) / .25);
}
.channel:has([aria-expanded=true]) {
  border-color:var(--lilac);
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 9%,rgb(var(--bg-rgb))) 90%,transparent);
}
.channel-head {
  display:flex;
  gap:18px;
  align-items:center;
}
.channel-icon {
  flex:none;
  width:36px;
  height:36px;
  color:var(--lilac);
}
.channel-head>div {
  flex:1;
  min-width:0;
}
.channel h3 {
  font-size:24px;
  letter-spacing:-.03em;
  margin-bottom:4px;
}
.channel-toggle {
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  cursor:pointer;
}
/* The whole card is the hit area for its toggle. */
.channel-toggle::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
}
.channel-toggle:focus-visible {
  outline:none;
}
.channel:has(.channel-toggle:focus-visible) {
  outline:2px solid var(--lilac);
  outline-offset:3px;
}
.channel-head p {
  font-size:15px;
  color:var(--muted);
}
.channel-chevron {
  flex:none;
  width:10px;
  height:10px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:translateY(-3px) rotate(45deg);
  transition:transform .25s;
}
.channel:has([aria-expanded=true]) .channel-chevron {
  border-color:var(--lilac);
  transform:translateY(2px) rotate(-135deg);
}
.channel-panel {
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  padding:30px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 4%,rgb(var(--bg-rgb))) 85%,transparent);
  animation:more-in .25s ease;
}
.channel-panel[hidden] {
  display:none;
}
.channel-lists {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 40px;
}
.channel-panel h4 {
  margin:0 0 6px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.link-list {
  list-style:none;
  margin:0 0 24px;
  padding:0;
}
.link-list a {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
  transition:color .2s,padding .25s var(--ease-out);
}
.link-list a:hover {
  padding-inline-start:6px;
}
.link-list a span {
  color:var(--muted);
}
.reel-slots {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:min(320px,86%);
  gap:16px;
  margin:0 -30px 24px;
  padding:0 30px 10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:30px;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:rgb(var(--fg-rgb) / .18) transparent;
}
.reel-slots li {
  scroll-snap-align:start;
  container-type:inline-size;
  min-width:0;
}
.reel-embed {
  display:block;
  width:100%;
  /* Instagram embed: ~54px header + 4:5 media + ~150px footer */
  height:calc(125cqw + 204px);
  border:1px solid var(--line);
  border-radius:12px;
  background:rgb(var(--fg-rgb));
}
.channel-panel>.button {
  align-self:flex-start;
}
@media(prefers-reduced-motion:reduce) {
  .channel-panel {animation:none;}
  .channel-chevron {transition:none;}
}

/* Immersive preset label */
.immersive-label {
  position:fixed;
  z-index:10;
  inset-inline-start:max(24px,env(safe-area-inset-left));
  bottom:max(30px,env(safe-area-inset-bottom));
  padding:10px 16px;
  border-radius:30px;
  border:1px solid rgb(var(--fg-rgb) / .18);
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 7%,rgb(var(--bg-rgb))) 65%,transparent);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  font-size:13px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 97%,rgb(var(--bg-rgb)));
}

@media(max-width:1100px) {
  .header nav {
    gap:18px;
    font-size:13px;
  }
  .kind-panel,.service-panel,.anytab {
    grid-template-columns:1fr;
    gap:36px;
  }
  .kind-copy {
    max-width:640px;
  }
  .preset-viewer[open] {
    grid-template-columns:1fr;
  }
  .viewer-info {
    padding:24px;
  }
  .studio-capabilities {
    grid-template-columns:repeat(2,1fr);
  }
  .pet-body {
    grid-template-columns:1fr;
    gap:42px;
  }
  .pet-demo {
    min-height:460px;
  }
}
@media(max-width:760px) {
  .hero-copy .intro {
    font-size:13px;
    gap:4px 10px;
  }
  /* One swipeable row of chips, like the screenshot pickers below. */
  .kind-tabs {
    contain:inline-size;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    margin-inline:-6px 0;
    padding:6px 28px 6px 6px;
  }
  .kind-tabs::-webkit-scrollbar {
    display:none;
  }
  .kind-tabs [role=tab] {
    flex:none;
    min-height:42px;
    font-size:14px;
  }
  .kind-panel {
    padding-top:24px;
  }
  .preset-grid {
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .preset-text {
    padding:10px 11px 12px;
  }
  .preset-name {
    font-size:13px;
  }
  .service-tabs [role=tab] {
    flex:1;
    justify-content:center;
    padding:8px 12px;
    font-size:14px;
  }
  .service-note {
    margin-top:32px;
  }
  /* Picker chips: one swipeable row instead of a tall stack. The row adds no
     width of its own to the layout, so it can't widen the page. */
  .shot-picker {
    contain:inline-size;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    /* Room for the focus ring inside the scroller. */
    margin-inline:-6px 0;
    padding:6px 28px 6px 6px;
  }
  .shot-picker::-webkit-scrollbar {
    display:none;
  }
  .shot-picker button {
    flex:none;
  }
  .channels,.tour-row,.tour-row--panel,.tour-themes,.studio-capabilities,.pet-specs {
    grid-template-columns:1fr;
  }
  /* Stacked: each channel's panel opens right under its card. */
  .channels>:nth-child(1) {order:1;}
  #channel-youtube {order:2;}
  .channels>:nth-child(2) {order:3;}
  #channel-instagram {order:4;}
  .tour-screen .anytab-specs {
    grid-template-columns:1fr;
  }
  .anytab-tour {
    gap:64px;
    margin-top:64px;
  }
  .tour-row--panel .tour-copy {
    order:2;
  }
  .creator-tools {
    padding-top:22px;
  }
  .tool-summary {
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px 18px;
    padding:26px 0;
  }
  .tool-kicker {
    grid-column:1/-1;
  }
  .tool-summary-copy {
    gap:6px;
  }
  .tool-summary-copy strong {
    font-size:23px;
  }
  .tool-summary-action {
    min-width:42px;
  }
  .tool-summary-action>span {
    display:none!important;
  }
  .tool-disclosure-body {
    padding:2px 0 48px;
  }
  .studio-shot {
    margin-inline:-3%;
  }
  .studio-shot img {
    border-radius:12px;
  }
  .studio-capabilities {
    gap:0;
    margin-top:30px;
  }
  .pet-demo {
    min-height:420px;
    padding:24px;
  }
  .anytab-diagram {
    padding:14px;
  }
  .channel {
    padding:20px 22px;
  }
  .channel-panel {
    padding:22px;
  }
  .channel-lists {
    grid-template-columns:1fr;
  }
  .reel-slots {
    margin-inline:-22px;
    padding-inline:22px;
    scroll-padding-inline:22px;
  }
  .viewer-close {
    inset-inline-end:10px;
    top:10px;
  }
  .immersive-label {
    inset-inline-start:16px;
    bottom:auto;
    top:max(16px,env(safe-area-inset-top));
  }
}
@media(prefers-reduced-motion:reduce) {
  .preset-tile:hover {
    transform:none;
  }
  .pet-demo-art {
    animation:none;
  }
  .tool-disclosure-body {
    animation:none;
  }
}

/* Live preset stage inside the viewer */
.viewer-media {
  position:relative;
  overflow:hidden;
}
.viewer-stage,.live-surfaces {
  position:absolute;
  inset:0;
}
.live-surface {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  opacity:0;
  pointer-events:none;
  background:transparent;
}
.viewer-stage[data-state=live] .live-surface.is-active,
.viewer-stage[data-state=idle] .live-surface.is-active {
  opacity:1;
}
.viewer-media:fullscreen {
  aspect-ratio:auto;
  background:#000;
}
.live-status {
  position:absolute;
  inset-inline-start:16px;
  top:16px;
  padding:6px 12px;
  border-radius:20px;
  background:rgb(var(--bg-rgb) / .7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-size:12px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 93%,rgb(var(--bg-rgb)));
}
.live-status[data-state=live]::before {
  content:'';
  display:inline-block;
  width:7px;
  height:7px;
  margin-inline-end:8px;
  border-radius:50%;
  background:#9ef0c0;
  vertical-align:1px;
}
.live-status[data-state=loading],.live-status[data-state=failed] {
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  white-space:nowrap;
}
.live-status[data-state=failed] {
  color:#ebd6b1;
}
.stage-tools {
  position:absolute;
  inset-inline-end:14px;
  bottom:14px;
  display:flex;
  gap:8px;
}
.stage-tools .widget-button {
  min-height:40px;
  font-size:12px;
}

/* Community ratings */
.rating {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 10px;
  font-size:12px;
  color:var(--muted);
}
.rating-bar {
  position:relative;
  flex:0 0 44px;
  height:4px;
  border-radius:4px;
  overflow:hidden;
  background:#ff7a8a55;
}
.rating-bar span {
  position:absolute;
  inset:0 auto 0 0;
  background:#9ef0c0;
  border-radius:4px;
}
.rating.is-empty .rating-bar {
  background:rgb(var(--fg-rgb) / .12);
}
.preset-text .rating {
  margin-top:6px;
}
.preset-text .rating.is-empty {
  visibility:hidden;
}
.rating-actions {
  display:flex;
  gap:6px;
  margin-inline-start:auto;
}
.vote {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:5px 12px;
  border:1px solid rgb(var(--fg-rgb) / .18);
  border-radius:20px;
  background:rgb(var(--fg-rgb) / .03);
  font-size:12px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 93%,rgb(var(--bg-rgb)));
  transition:background .2s,border-color .2s,color .2s;
}
.vote svg {
  width:16px;
  height:16px;
}
.vote-dislike svg {
  transform:rotate(180deg);
}
.vote:hover {
  border-color:rgb(var(--fg-rgb) / .4);
}
.vote-like[aria-pressed=true] {
  background:#9ef0c026;
  border-color:#9ef0c0;
  color:#c9f8dc;
}
.vote-dislike[aria-pressed=true] {
  background:#ff7a8a26;
  border-color:#ff9aa6;
  color:#ffd2d8;
}
.viewer-rating {
  padding-top:14px;
  border-top:1px solid var(--line);
}
.viewer-rating-title {
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.viewer-rating .rating {
  font-size:13px;
}
.rating-message:empty {
  display:none;
}
.rating-message {
  margin-top:8px;
  font-size:12px;
  color:#ebd6b1;
}

/* Hover card: a tile opens into a live preview */
.preset-browser {
  position:relative;
}
.hover-card {
  position:absolute;
  z-index:6;
  display:flex;
  flex-direction:column;
  border:1px solid rgb(var(--accent-rgb) / .44);
  border-radius:16px;
  background:color-mix(in srgb,rgb(var(--accent-rgb)) 3%,rgb(var(--bg-rgb)));
  box-shadow:0 30px 80px #000a,0 0 0 1px #0006;
  overflow:hidden;
  opacity:0;
  transition:clip-path .32s cubic-bezier(.2,.8,.2,1),opacity .18s ease;
}
.hover-card.is-open {
  opacity:1;
}
.hover-stage {
  position:relative;
  aspect-ratio:16/10;
  background:rgb(var(--bg-rgb));
  cursor:zoom-in;
}
.hover-status {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:12px;
  color:var(--muted);
  pointer-events:none;
}
.hover-status:empty {
  display:none;
}
.hover-stage[data-state=live] .live-surface.is-active,
.hover-stage[data-state=idle] .live-surface.is-active {
  opacity:1;
}
.hover-info {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:2px 12px;
  padding:12px 14px 14px;
}
.hover-name {
  font-size:15px;
  font-weight:550;
}
.hover-kind {
  grid-row:2;
  font-size:12px;
  color:var(--muted);
}
.hover-info .rating {
  grid-column:1/-1;
  margin-top:8px;
}
@media(prefers-reduced-motion:reduce) {
  .hover-card {
    transition:none;
  }
}

/* "Today I am" soundtrack bar: collapsed to a note and the lead, opens on hover. */
:root {
  interpolate-size:allow-keywords;
}
.persona-bar {
  position:fixed;
  z-index:12;
  inset-inline-start:max(24px,env(safe-area-inset-left));
  bottom:max(24px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  width:max-content;
  max-width:min(560px,calc(100vw - 32px));
  padding:4px;
  border:1px solid rgb(var(--fg-rgb) / .18);
  border-radius:26px;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 5%,rgb(var(--bg-rgb))) 80%,transparent);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 12px 40px #0006;
  transform:translateY(140%);
  opacity:0;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,width .35s cubic-bezier(.2,.8,.2,1);
}
.persona-bar.is-visible {
  transform:translateY(0);
  opacity:1;
}
.persona-toggle {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:6px 16px 6px 12px;
  border:0;
  border-radius:22px;
  background:none;
  color:var(--white);
}
.persona-toggle:hover {
  background:rgb(var(--fg-rgb) / .05);
}
.persona-note {
  width:20px;
  height:20px;
  color:var(--lilac);
  transform-origin:50% 80%;
}
.persona-bar.is-playing .persona-note {
  animation:persona-note 1.6s ease-in-out infinite;
}
@keyframes persona-note {
  0%,100% {transform:rotate(-6deg) scale(1);}
  50% {transform:rotate(6deg) scale(1.08);}
}
.persona-lead {
  font:400 19px/1.1 var(--display);
  letter-spacing:-.02em;
}
.persona-choice {
  font:400 19px/1.1 var(--display);
  letter-spacing:-.02em;
  color:var(--lilac);
}
.persona-choice:empty {
  display:none;
}
.persona-panel {
  display:grid;
  grid-template-rows:0fr;
  width:0;
  max-width:100%;
  opacity:0;
  transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease,width .35s cubic-bezier(.2,.8,.2,1);
}
/* Open: a fixed-width card above the toggle, the choices in an even grid. */
.persona-bar.is-expanded {
  width:min(580px,calc(100vw - 32px));
}
.persona-bar.is-expanded .persona-panel {
  grid-template-rows:1fr;
  width:100%;
  opacity:1;
}
.persona-panel-inner {
  min-height:0;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  margin:0 4px;
  border-bottom:1px solid rgb(var(--fg-rgb) / .1);
}
.persona-options {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  padding:8px 4px 10px;
}
.persona {
  position:relative;
  min-width:0;
  min-height:40px;
  padding:8px 8px;
  border:1px solid rgb(var(--fg-rgb) / .14);
  border-radius:12px;
  background:rgb(var(--fg-rgb) / .03);
  font-size:14px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 93%,rgb(var(--bg-rgb)));
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .2s,color .2s,border-color .2s;
}
.persona:hover:not(:disabled) {
  background:rgb(var(--fg-rgb) / .08);
  border-color:rgb(var(--fg-rgb) / .36);
  color:var(--white);
}
.persona[aria-pressed=true],
.persona[aria-pressed=true]:hover:not(:disabled) {
  background:var(--white);
  color:color-mix(in srgb,rgb(var(--accent-rgb)) 6%,rgb(var(--bg-rgb)));
}
.persona:disabled {
  cursor:default;
  opacity:.5;
}
.persona-soon {
  margin-inline-start:6px;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--lilac);
}
.persona:focus-visible,.persona-toggle:focus-visible {
  outline-offset:2px;
}
.persona-now {
  order:-1;
  padding:10px 8px 2px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.persona-now:empty {
  display:none;
}
@media(max-width:760px) {
  .persona-bar {
    inset-inline-start:max(16px,env(safe-area-inset-left));
    bottom:max(16px,env(safe-area-inset-bottom));
    max-width:calc(100vw - 32px);
  }
  /* Collapsed: a round note button, the size of the corner controls. */
  .persona-bar:not(.is-expanded) .persona-lead,.persona-bar:not(.is-expanded) .persona-choice {
    display:none;
  }
  .persona-toggle {
    min-height:42px;
    min-width:42px;
    padding:6px 10px;
  }
  .persona-bar.is-expanded .persona-toggle {
    padding:6px 16px 6px 12px;
  }
  .persona-bar.is-expanded {
    width:calc(100vw - 32px);
  }
  .persona-options {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .persona-lead,.persona-choice {
    font-size:17px;
  }
  .persona {
    font-size:13px;
    padding:7px 10px;
  }
  /* Scrolling down tucks the corner pieces away; scrolling up brings them back.
     The open soundtrack panel spans the width, so the controls step aside meanwhile. */
  body:has(.persona-bar.is-expanded) .visual-experience:not(.is-immersive) .visual-controls,
  body.scrolling-down .visual-experience:not(.is-immersive) .visual-controls,
  body.scrolling-down .persona-bar.is-visible:not(.is-expanded) {
    opacity:0;
    transform:translateY(140%);
    pointer-events:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  .persona-bar,.persona-panel {
    transition:none;
  }
  .persona-bar.is-playing .persona-note {
    animation:none;
  }
}

/* The viewer leaves room for the "Today I am" bar below it. */
.preset-viewer.with-persona {
  max-height:calc(100dvh - 128px);
  margin-bottom:96px;
}
.persona-options {
  max-width:100%;
}

@media(prefers-reduced-motion:reduce) {
  .more[open]>:not(summary) {animation:none;}
  .more summary::after {transition:none;}
}

/* Past the hero, wide screens keep the wordmark and the install button in reach.
   landing.js sets body.past-hero; the "Today I am" bar sits between them. */
@media(min-width:1000px) {
  body.past-hero:not(.immersed) .header {
    position:fixed;
    padding-block:11px;
    border-bottom:1px solid rgb(var(--fg-rgb) / .08);
    background:rgb(var(--bg-rgb) / .85);
    backdrop-filter:blur(18px) saturate(1.2);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);
    animation:header-in .45s var(--ease-out);
  }
  body.past-hero .header nav {
    gap:26px;
    font-size:13px;
  }
  body.past-hero:has(.visual-experience) .header .wordmark {
    font-size:32px;
  }
  body.past-hero:has(.visual-experience) .header .wordmark .brand-mark {
    width:26px;
    height:26px;
  }
  body.past-hero .header-install {
    padding:9px 16px;
    font-size:13px;
  }
}
@keyframes header-in {
  from {opacity:0;transform:translateY(-100%);}
}

/* FAQ: the heading and the contact line stay beside the questions. */
.faq-heading {
  align-self:start;
}
.faq-heading p {
  max-width:340px;
  margin-top:22px;
  color:var(--muted);
  font-size:16px;
}
.faq-heading a {
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 54%,rgb(var(--accent-rgb)));
  border-bottom:1px solid rgb(var(--fg-rgb) / .27);
  transition:border-color .2s;
}
.faq-heading a:hover {
  border-color:var(--lilac);
}
@media(min-width:761px) {
  .faq-heading {
    position:sticky;
    top:110px;
  }
}

/* Closing call to install, above the footer. */
.closing {
  display:grid;
  justify-items:center;
  text-align:center;
  padding-block:clamp(96px,11vw,160px) clamp(110px,12vw,170px);
}
.closing-mark {
  width:56px;
  height:56px;
  margin-bottom:30px;
  filter:drop-shadow(0 0 26px color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 80%,rgb(var(--bg-rgb))) 67%,transparent));
}
.closing h2 {
  font-size:clamp(42px,5.6vw,88px);
  line-height:1.02;
  letter-spacing:-.05em;
}
.closing>p {
  margin-top:22px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 83%,rgb(var(--bg-rgb)));
  font-size:clamp(16px,1.3vw,19px);
}
.closing-actions {
  margin-top:38px;
}
.closing-phone {
  display:none;
}
.is-phone .closing-phone {
  display:inline-flex;
  min-height:60px;
  padding:0 32px;
  font-size:16px;
}
@media(prefers-reduced-motion:reduce) {
  body.past-hero .header {animation:none;}
}

/* Language menu in the header (markup from scripts/build_landing.py, behaviour in language.js).
   Every language is a plain link so search engines can follow it. */
.header-actions {
  display:flex;
  align-items:center;
  gap:12px;
}
.lang-switch {
  position:relative;
}
.lang-button {
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid rgb(var(--fg-rgb) / .22);
  border-radius:30px;
  padding:11px 14px;
  background:transparent;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 90%,rgb(var(--bg-rgb)));
  font:500 13px/1 var(--font);
  letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .2s,background-color .2s,color .2s;
}
.lang-button svg {
  width:16px;
  height:16px;
  flex:none;
}
.lang-button:hover,.lang-switch.is-open .lang-button {
  border-color:var(--lilac);
  background:rgb(var(--accent-rgb) / .08);
  color:var(--white);
}
.lang-menu {
  position:absolute;
  z-index:30;
  top:calc(100% + 10px);
  inset-inline-end:0;
  width:min(540px,calc(100vw - 32px));
  max-height:min(70vh,560px);
  overflow:auto;
  margin:0;
  padding:8px;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px;
  border:1px solid rgb(var(--fg-rgb) / .12);
  border-radius:18px;
  background:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 6%,rgb(var(--bg-rgb))) 95%,transparent);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 24px 60px #0008;
}
.lang-menu a {
  display:block;
  padding:9px 12px;
  border-radius:10px;
  font-size:14px;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 90%,rgb(var(--bg-rgb)));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:start;
}
.lang-menu a:hover,.lang-menu a:focus-visible {
  background:rgb(var(--fg-rgb) / .07);
  color:var(--white);
  outline:none;
}
.lang-menu a[aria-current=page] {
  background:rgb(var(--accent-rgb) / .12);
  color:var(--lilac);
}
@media(max-width:760px) {
  .header-actions {
    gap:8px;
  }
  .lang-button {
    padding:9px 11px;
    font-size:12px;
  }
  .lang-menu {
    position:fixed;
    top:84px;
    inset-inline:16px;
    width:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(min-width:1000px) {
  body.past-hero .lang-button {
    padding:8px 12px;
  }
}
[data-visual-quality=low] .lang-menu,[data-visual-quality=still] .lang-menu {
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background-color:color-mix(in srgb,color-mix(in srgb,rgb(var(--accent-rgb)) 7%,rgb(var(--bg-rgb))) 98%,transparent);
}
/* Longer menu labels in other languages wrap as whole items, never mid-label. */
.header nav {
  flex-wrap:wrap;
  justify-content:center;
  row-gap:8px;
}
.header nav a {
  white-space:nowrap;
}
.header-actions {
  flex:none;
}
.header-install {
  white-space:nowrap;
}
/* Oscilloscope tab: tracks written for an XY oscilloscope, under the preset
   grid in the same plain link-list style as the YouTube channel links. */
.osci-listen {
  max-width:560px;
  margin-top:36px;
}
.osci-listen[hidden] {
  display:none;
}
.osci-listen h4 {
  margin:0 0 6px;
  font-size:19px;
  letter-spacing:-.01em;
}
.osci-listen>p {
  margin:0 0 10px;
  font-size:14px;
  color:var(--muted);
}
.osci-listen .link-list {
  margin-bottom:14px;
}
.osci-listen-more {
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin:0;
  font-size:14px;
}
.osci-listen-more a {
  color:var(--lilac);
}
.osci-listen-more a:hover {
  color:var(--white);
}
.kind-copy>p+p {
  margin-top:14px;
}