/* ts3musicbot.net v2 – home page. Built on site.css tokens and components.
   Sections: hero (three crossfading designs), sources, steps, features, skin
   gallery, ServerBridge, pricing, wheel + hosted bots, FAQ. The cover art
   animations (copied from the webinterface's css/cover-art.css) are at the end. */

/* ---------- page rhythm ---------- */
.home .h1{font-weight:800;line-height:.98}
.home .h2{font-weight:800;line-height:1.03}
.home section[id],.home .anchor-alias{scroll-margin-top:calc(var(--hdr-h) - 8px)}
.anchor-alias{display:block;height:0}
.hsec{padding-bottom:clamp(88px,9vw,130px)}
.sec-head{display:flex;flex-direction:column;gap:14px}
.sec-head.center{align-items:center;text-align:center}
.sec-head .lead{max-width:56ch;font-size:17px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.panel-head .sec-head{max-width:620px;flex:1 1 460px}
.panel-lead{max-width:420px;flex:0 1 400px}
.home ul[role="list"],.home ol[role="list"]{list-style:none;margin:0;padding:0}
.kw{font-family:var(--mono);color:var(--accent-softer)}
.nick{color:#c4b5fd}
.botname{color:var(--accent-soft)}
.bridged{color:var(--accent-soft)}

/* ---------- shared pieces ---------- */
.home .cover{display:block;aspect-ratio:1;max-width:100%;border-radius:14px;overflow:hidden;background:#05080f}
.home .cover .ca-scope,.home .cover svg{display:block;width:100%;height:100%}
.play{width:48px;height:48px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:var(--on-accent);box-shadow:0 0 0 4px var(--a18),0 0 22px var(--a60);flex-shrink:0}
.progress{height:4px;border-radius:2px;background:color-mix(in srgb,var(--card) 90%,#000);display:flex}
.progress>span{border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--a60)}
.av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff}
.av-luna{background:#7c3aed}
.av-kira{background:#0e7490}
.av-bot{background:var(--grad);color:var(--on-accent)}
.bonuspill{display:inline-flex;align-items:center;padding:5px 12px;border-radius:9999px;background:rgba(34,197,94,.14);color:var(--ok-soft);font-size:14px;font-weight:700;white-space:nowrap;transition:background .3s,color .3s}
.bonuspill.is-none{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted)}
.bonuspill.is-once{background:var(--a18);color:var(--accent-softer)}
.mini{padding:14px;border-radius:12px;background:var(--glass-strong);border:1px solid var(--line);font-size:13.5px}
.c-spacer{flex:1}
.nowrap{white-space:nowrap}

/* ---------- hero: rotation ---------- */
.hero{position:relative;overflow:hidden;overflow:clip}
.hero-rot{display:grid}
.hero-rot>.slide{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;min-width:0;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s}
.hero-rot>.slide.on{opacity:1;visibility:visible;transition:opacity 1.2s ease,visibility 0s}
.slide:not(.on),.slide:not(.on) *{animation-play-state:paused!important}
.slide-stage{--hy:58%}
.slide-live{--hx:72%;--hy:55%}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-ctrl{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px;border-radius:9999px;background:var(--glass-strong);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);z-index:5;box-shadow:0 10px 30px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:calc(100% - 24px)}
.hero-tabs{display:flex;gap:4px}
.home .hero-tab{position:relative;min-height:36px;border:0;padding:0 14px;border-radius:9999px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;transition:background .3s,color .3s}
.hero-tab:hover{color:var(--text)}
.hero-tab[aria-selected="true"]{background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--text)}
.hero.is-auto .hero-tab[aria-selected="true"]::after{content:"";position:absolute;inset-inline-start:14px;bottom:5px;height:2px;width:0;border-radius:1px;background:var(--accent);box-shadow:0 0 6px var(--a60);animation:fillbar var(--interval,9s) linear forwards}
.hero.is-held .hero-tab[aria-selected="true"]::after{animation-play-state:paused}
@keyframes fillbar{to{width:calc(100% - 28px)}}
.hero-pause{width:36px;height:36px;border-radius:50%;border:0;background:color-mix(in srgb,var(--text) 8%,transparent);display:grid;place-items:center;color:var(--text);flex-shrink:0;transition:background .2s}
.hero-pause:hover{background:color-mix(in srgb,var(--text) 14%,transparent)}
.hero-pause .i-play,.hero-pause[aria-pressed="true"] .i-pause{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:block}
.hero-arrow{position:absolute;top:50%;z-index:5;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:var(--glass-strong);color:var(--text);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .2s,box-shadow .2s,transform .2s}
.hero-arrow:hover{border-color:var(--accent);box-shadow:0 0 24px var(--a45);transform:scale(1.05)}
.hero-arrow.prev{inset-inline-start:max(12px,1.5vw)}
.hero-arrow.next{inset-inline-end:max(12px,1.5vw)}
.hero-title{text-wrap:balance}

/* ---------- hero 1: The Console ---------- */
.c-hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px;padding-block:88px 124px}
.home .rail-new{align-items:center;padding-block:4px;padding-inline:4px 14px;gap:10px;min-height:36px;color:color-mix(in srgb,var(--text) 86%,transparent);transition:border-color .2s,box-shadow .2s}
.home .rail-new>*{padding:0;border:0}
.home .rail-new>.pill{padding:4px 10px;border:1px solid transparent}
.home .rail-new:hover{background:var(--glass-strong);border-color:var(--line-hover);box-shadow:0 0 18px var(--a18)}
.pill-solid{background:var(--grad);color:var(--on-accent);border-color:transparent;letter-spacing:.04em}
.c-title{max-width:1040px}
.console-fit{width:100%;margin-top:34px}
.console{width:100%;min-width:1100px;max-width:1200px;margin-inline:auto;height:640px;border-radius:18px;background:var(--bg);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);box-shadow:0 50px 120px rgba(0,0,0,.65),0 0 0 1px var(--a18),0 0 80px var(--a18);display:flex;flex-direction:column;overflow:hidden;text-align:start;font-size:13px}
.console-top{height:58px;padding:0 18px;display:flex;align-items:center;gap:14px;background:var(--side);border-bottom:1px solid var(--line);position:relative;flex-shrink:0}
.console-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 40%,transparent)}
.c-mark{width:30px;height:30px;border-radius:8px}
.c-mark svg{width:20px;height:20px}
.c-app{display:flex;flex-direction:column;line-height:1.25}
.c-app b{font-size:13px}
.c-app small{font-size:10.5px;color:var(--dim)}
.c-status{min-height:28px;font-size:11.5px}
.c-inst{background:color-mix(in srgb,var(--text) 5%,transparent)}
.c-status .okdot{width:6px;height:6px}
.c-dot2{margin-inline-start:6px}
.c-user{min-height:30px;font-size:11.5px;font-weight:700}
.home .c-user>span{gap:8px;padding-inline-start:4px}
.c-avatar{width:22px;height:22px;border-radius:50%;background:var(--grad)}
.console-body{flex:1;display:flex;min-height:0}
.c-side{width:196px;padding:14px 10px;background:var(--side);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;gap:3px;color:color-mix(in srgb,var(--text) 82%,transparent)}
.c-side span{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm)}
.c-side .on{background:var(--grad);color:var(--on-accent);font-weight:600;box-shadow:0 0 16px var(--a45)}
.c-side .upd{color:var(--ok-soft)}
.c-main{flex:1;min-width:0;padding:16px;display:flex;flex-direction:column;gap:12px;background-color:color-mix(in srgb,var(--bg) 70%,var(--bg2));background-image:radial-gradient(color-mix(in srgb,var(--muted) 12%,transparent) 1px,transparent 1.2px);background-size:18px 18px}
.c-tools{display:flex;gap:8px;font-size:12px;font-weight:500}
.c-tools span{padding:8px 12px;border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--line)}
.c-tools .c-spacer{padding:0;border:0;background:none}
.c-tools .c-search{width:180px;color:var(--dim)}
.c-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--card) 45%,transparent);border:1px solid var(--line)}
.c-row.on{background:var(--a10);border-color:var(--a45)}
.c-row i{width:34px;height:34px;border-radius:8px;flex-shrink:0}
.c-row div{flex:1;display:flex;flex-direction:column;min-width:0}
.c-row div small{font-size:11.5px;color:var(--muted)}
.c-row em{font-style:normal;font-size:12px;color:var(--dim)}
.c-row.on em{color:var(--accent-soft);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.c-player{width:300px;padding:14px;background:var(--side);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.home .c-player .cover{width:272px;border-radius:12px}
.c-np{text-align:center;display:flex;flex-direction:column;gap:2px}
.c-np b{font-size:14px}
.c-np small{font-size:11.5px;color:var(--muted)}
.c-time{display:flex;flex-direction:column;gap:5px}
.c-times{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim)}
.c-transport{display:flex;align-items:center;justify-content:center;gap:18px;color:color-mix(in srgb,var(--text) 80%,transparent)}
.c-label{font-size:10.5px}
.c-input{display:flex;gap:6px}
.c-input span{flex:1;padding:8px 10px;border-radius:var(--r-sm);background:var(--glass-strong);border:1px solid var(--line);font-size:11.5px;color:var(--dim)}
.c-input i{width:30px;border-radius:var(--r-sm);background:var(--accent)}
.c-btns{display:flex;gap:6px;font-size:11px;font-weight:600}
.c-btns span{flex:1;padding:8px 0;text-align:center;border-radius:var(--r-sm);background:var(--grad);color:var(--on-accent)}

/* ---------- hero 2: Crystal Stage ---------- */
.s-hero{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;padding-block:84px 116px}
.s-label{letter-spacing:.2em}
.home .s-title{font-size:clamp(46px,8vw,104px);letter-spacing:-.05em;line-height:.95}
.s-lead{max-width:56ch}
.stage{position:relative;width:100%;max-width:1200px;height:660px;margin-top:6px}
.stage .ring1,.stage .ring2,.stage .art{position:absolute;left:50%;top:50%;translate:-50% -50%}
.stage .ring1,.stage .ring2{border-radius:50%}
.stage .ring1{width:620px;height:620px;border:2px dashed color-mix(in srgb,var(--accent-soft) 24%,transparent);animation:spin 80s linear infinite}
.stage .ring2{width:540px;height:540px;border:1px solid var(--a45);box-shadow:0 0 80px var(--a30),inset 0 0 60px var(--a18)}
.stage .art{width:440px}
.home .stage .art .cover{width:100%;border-radius:22px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 60px var(--a45)}
.bracket{position:absolute;width:34px;height:34px;border:2px solid var(--accent-soft)}
.bracket.tl{left:-14px;top:-14px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.bracket.tr{right:-14px;top:-14px;border-left:0;border-bottom:0;border-top-right-radius:8px}
.bracket.bl{left:-14px;bottom:-14px;border-right:0;border-top:0;border-bottom-left-radius:8px}
.bracket.br{right:-14px;bottom:-14px;border-left:0;border-top:0;border-bottom-right-radius:8px}
.home .bigplay{position:absolute;left:50%;top:calc(50% + 196px);translate:-50% -50%;width:92px;height:92px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:var(--on-accent);box-shadow:0 0 0 8px var(--a18),0 0 0 18px var(--a10),0 0 50px var(--a60);transition:scale .2s}
.home .bigplay:hover{color:var(--on-accent);scale:1.05}
.float{position:absolute;border-radius:16px;background:color-mix(in srgb,var(--bg2) 82%,transparent);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);box-shadow:0 20px 50px rgba(0,0,0,.45);text-align:start;animation:bob 6s ease-in-out infinite;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.float.f2{animation-delay:-1.5s}.float.f3{animation-delay:-3s}.float.f4{animation-delay:-4.5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.f1{inset-inline-start:40px;top:110px;width:280px;padding:16px;display:flex;gap:12px}
.f1 .av{width:36px;height:36px}
.f1-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.f1-body b{font-size:13px}
.f1-body .dim{font-weight:500}
.f1-body .cmd{white-space:normal}
.float.f2{inset-inline-start:90px;top:430px;min-height:38px;border-radius:10px}
.f3{inset-inline-end:30px;top:90px;width:300px;padding:18px;display:flex;flex-direction:column;gap:10px}
.f3-head{display:flex;align-items:center;gap:10px}
.f3-head .label{color:var(--accent-soft)}
.f3-times{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim)}
.eqbars{display:flex;gap:3px;align-items:flex-end;height:16px}
.eqbars i{width:3px;height:16px;border-radius:1px;background:var(--accent);transform-origin:50% 100%;transform:scaleY(.5);animation:eqb 1.1s ease-in-out infinite alternate}
.eqbars i:nth-child(2){animation-delay:-.4s}.eqbars i:nth-child(3){animation-delay:-.8s}.eqbars i:nth-child(4){animation-delay:-.2s}
@keyframes eqb{0%{transform:scaleY(.35)}100%{transform:scaleY(1)}}
.f4{inset-inline-end:80px;top:440px;width:250px;padding:14px 16px;display:flex;align-items:center;gap:12px}
.f4-bar{flex:1;position:relative}
.f4-bar i{position:absolute;left:30%;top:-5px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--text);box-shadow:0 0 8px var(--a60)}
.f4-cmd{font-size:12px;color:var(--accent-soft)}

/* ---------- hero 3: Live Channel ---------- */
.l-hero{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:56px;align-items:center;padding-block:88px 124px}
.l-copy{display:flex;flex-direction:column;gap:28px}
.l-meta{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--muted);flex-wrap:wrap}
.l-meta .chip{padding:4px 10px;font-size:13px}
.home .l-title{font-size:clamp(44px,5.4vw,76px);letter-spacing:-.05em}
.cmdword{font-family:var(--mono);font-weight:700;font-size:.86em;letter-spacing:-.04em;color:var(--accent-soft)}
.l-hero .hero-cta{justify-content:flex-start}
/* the copy column is 600 px: the three buttons take two rows, so they fill both rows
   edge to edge instead of leaving one button alone on the second */
@media (min-width:1181px){.l-hero .hero-cta .btn{flex:1 1 auto}}
.l-cmds{display:flex;flex-wrap:wrap;gap:8px}
.l-comp{position:relative;min-height:600px}
.chan{width:min(620px,100%);min-height:520px;border-radius:18px;background:color-mix(in srgb,var(--side) 92%,transparent);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);box-shadow:0 50px 110px rgba(0,0,0,.6),0 0 0 1px var(--a10);display:flex;flex-direction:column;overflow:hidden}
.chan-tabs{height:48px;padding:0 12px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);background:var(--side)}
.chan-switch{display:flex;gap:6px}
.home .chan-switch button{border:1px solid transparent;background:transparent;padding:7px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--muted);transition:background .2s,color .2s}
.chan-switch button:hover{color:var(--text)}
.chan-switch button[aria-pressed="true"]{background:var(--a18);border-color:var(--a45);color:var(--accent-softer)}
.chan-host{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chan-body{flex:1;display:flex;min-height:0}
.tree{width:190px;padding:14px 12px;border-inline-end:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:13px;color:color-mix(in srgb,var(--text) 82%,transparent)}
.tree .u{padding-inline-start:14px;display:flex;align-items:center;gap:8px}
.tree .u i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.tree .u i.off{background:#475569}
.tree .bot{color:var(--accent-soft);font-weight:600}
.tree .bot i{background:var(--accent);box-shadow:0 0 0 3px var(--a30),0 0 10px var(--accent)}
.tree-gap{margin-top:6px}
.log{flex:1;padding:16px;display:flex;flex-direction:column;gap:14px;font-size:13.5px;min-width:0}
.msg{display:flex;gap:10px}
.msg-b{display:flex;flex-direction:column;gap:5px;min-width:0}
.msg-b b small{font-weight:500;color:var(--dim);font-size:12px;margin-inline-start:6px;unicode-bidi:isolate}
.msg-cmd{font-size:13px;color:var(--accent-softer)}
.msg-text{color:color-mix(in srgb,var(--text) 82%,transparent)}
.bottag{padding:1px 6px;border-radius:4px;background:var(--a18);font-size:10.5px;color:var(--accent-softer);margin-inline-start:6px;unicode-bidi:isolate}
.np{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;background:var(--glass);border:1px solid var(--line);max-width:300px}
.home .np .cover{width:56px;border-radius:8px;flex-shrink:0}
.np-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.np-text .label{font-size:10.5px}
.np-text b{font-size:13.5px}
.np-text .muted{font-size:12px}
.composer{margin-top:auto;padding:10px 12px;border-radius:10px;background:var(--glass-strong);border:1px solid var(--line);font-size:13px;color:var(--dim)}
.l-player{position:absolute;inset-inline-end:0;bottom:0;width:300px;padding:16px;border-radius:18px;background:var(--side);border:1px solid color-mix(in srgb,var(--accent-soft) 30%,transparent);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 50px var(--a30);display:flex;flex-direction:column;gap:12px}
.l-player .label{font-size:11px}
.home .l-player .cover{width:100%;aspect-ratio:16/10;border-radius:12px}
.home .l-player .cover svg{height:auto;margin-top:-18%}
.l-link{position:absolute;inset-inline-start:52%;top:52%;width:34%;height:34%;pointer-events:none}

/* ---------- hero: fit the first screen (desktop) ----------
   On desktop the hero is as tall as the first screen (viewport minus the
   announcement bar and header – home.js measures --hero-top; 118 px is the usual
   value), so every slide shows its headline, lead and the three CTAs above the
   fold with the slide controls under them. Each slide lays itself out in that
   height: The Console rises from the bottom edge and fades out, the Crystal Stage
   composition scales to the height left over, Live Channel stays centred. */
@media (min-width:1181px){
  .hero{
    --hero-h:clamp(560px,calc(100vh - var(--hero-top,118px)),1080px);
    --hero-pad:clamp(28px,calc(7vh - 18px),84px);   /* above the content */
    --hero-foot:clamp(86px,10vh,108px);             /* below it: room for the slide controls */
    --hero-gap:clamp(14px,2.5vh,26px);
  }
  @supports (height:100svh){.hero{--hero-h:clamp(560px,calc(100svh - var(--hero-top,118px)),1080px)}}
  .hero-rot{height:var(--hero-h);grid-template-rows:minmax(0,1fr)}
  .hero-rot>.slide{min-height:0}
  .hero-rot>.slide>.wrap{flex:1 1 auto;min-height:0;height:100%}
  .hero-ctrl{bottom:clamp(16px,2.4vh,26px)}
  .hero .lead{font-size:clamp(16px,min(1.5vw,2.3vh),19px)}
  .hero .btn-lg{min-height:clamp(48px,6vh,54px)}

  /* The Console: copy at the top, the mock fills the rest of the height and fades
     out above the slide controls (the extra padding keeps its glow unclipped) */
  .c-hero{gap:var(--hero-gap);padding-block:var(--hero-pad) 0;justify-content:flex-start}
  .home .c-title{font-size:clamp(46px,min(6.6vw,10vh),88px)}
  .console-fit{flex:1 1 0;min-height:0;align-self:stretch;width:auto;margin:calc(var(--hero-gap) - 64px) -140px 0;padding:64px 140px 0;pointer-events:none;
    -webkit-mask:linear-gradient(180deg,#000 calc(100% - var(--hero-foot) - 24px),transparent calc(100% - var(--hero-foot) + 30px)) no-repeat;
    mask:linear-gradient(180deg,#000 calc(100% - var(--hero-foot) - 24px),transparent calc(100% - var(--hero-foot) + 30px)) no-repeat}

  /* Crystal Stage: the stage takes the height between lead and CTAs (a size
     container), the cover is sized from it and the rings may reach into the gaps */
  .s-hero{gap:var(--hero-gap);padding-block:var(--hero-pad) var(--hero-foot);justify-content:center}
  .s-hero>:not(.stage){position:relative;z-index:1}
  .home .s-title{font-size:clamp(46px,min(8vw,9.4vh),104px)}
  .stage{flex:1 1 0;min-height:0;height:auto;margin-block:calc(var(--hero-gap) * -.5);container-type:size;--art:clamp(140px,min(100cqh - 28px,91cqh),440px)}
  @supports not (height:1cqh){.stage{--art:clamp(140px,calc(var(--hero-h) * .5 - 125px),400px)}}
  .stage .ring1{width:calc(var(--art) * 1.41);height:calc(var(--art) * 1.41)}
  .stage .ring2{width:calc(var(--art) * 1.227);height:calc(var(--art) * 1.227)}
  .stage .art{width:var(--art)}
  .home .bigplay{top:calc(50% + var(--art) * .445);width:clamp(52px,calc(var(--art) * .21),92px);height:clamp(52px,calc(var(--art) * .21),92px)}
  .home .bigplay svg{width:37%;height:37%}
  /* the floating cards keep their size and stay next to the cover */
  .float.f1{inset-inline-start:auto;inset-inline-end:calc(50% + var(--art) * .5 + var(--art) * .136);top:calc(50% - var(--art) * .5)}
  .float.f2{inset-inline-start:auto;inset-inline-end:calc(50% + var(--art) * .5 + var(--art) * .136);top:calc(50% + var(--art) * .227)}
  .float.f3{inset-inline-end:auto;inset-inline-start:calc(50% + var(--art) * .5 + var(--art) * .114);top:max(0px,calc(50% - var(--art) * .5 - 20px))}
  .float.f4{inset-inline-end:auto;inset-inline-start:calc(50% + var(--art) * .5 + var(--art) * .114);top:calc(50% + var(--art) * .25)}

  /* Live Channel: copy and preview centred in the height; the preview shrinks
     with it (the player card overlaps the channel less on short screens) */
  .l-hero{padding-block:var(--hero-pad) var(--hero-foot);grid-template-rows:minmax(0,1fr)}
  .l-copy{gap:var(--hero-gap)}
  .home .l-title{font-size:clamp(44px,min(5.4vw,8.4vh),76px)}
  .l-comp{min-height:0;height:min(600px,100%)}
  .chan{min-height:0;height:calc(100% - clamp(56px,9vh,80px))}
  .l-player{width:clamp(220px,min(var(--hero-h) * .38,50%),300px)}
}
/* short desktop screens: the second half of the chat and the command chips go */
@media (min-width:1181px) and (max-height:860px){
  .l-cmds{display:none}
}
@media (min-width:1181px) and (max-height:780px){
  .msg-more{display:none}
  .float{scale:.88}
  .float.f1,.float.f2{transform-origin:100% 50%}
  .float.f3,.float.f4{transform-origin:0 50%}
}
@media (min-width:1181px) and (max-height:660px){
  .float.f2,.float.f4{display:none}
}

/* ---------- sources ---------- */
.sources{display:flex;flex-direction:column;align-items:center;gap:20px;padding-block:72px 112px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1100px}

/* ---------- setup steps ---------- */
.steps-sec{display:flex;flex-direction:column;gap:32px}
.step{display:flex;flex-direction:column;gap:18px;transition:border-color .25s}
.step:hover{border-color:var(--line-hover)}
.stepnum{width:38px;height:38px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:800;color:var(--on-accent);box-shadow:0 0 16px var(--a45)}
.home .step-title{font-size:21px}
.step p{font-size:15px}
.mini-plan{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mini-plan>span:first-child{display:flex;flex-direction:column;gap:3px}
.mini-plan .bonuspill{font-size:12px;padding:4px 10px}
.term{background:#04060b;font-family:var(--mono);font-size:12.5px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.term span{white-space:nowrap}
.term-cmd{color:#f8fafc}
.term-out{color:var(--accent-soft)}
.mini-chat{display:flex;flex-direction:column;gap:8px}
.mini-bot{color:color-mix(in srgb,var(--text) 80%,transparent)}

/* ---------- features ---------- */
.features{display:flex;flex-direction:column;gap:36px}
.features .sec-head h2{max-width:760px}
.bento{grid-template-columns:repeat(4,minmax(0,1fr))}
.bento .card{transition:border-color .25s,box-shadow .25s}
.bento .card:hover{border-color:var(--line-hover);box-shadow:0 0 30px var(--a10)}
.bento .big{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;gap:16px;background-color:var(--side);background-image:radial-gradient(circle at 80% 20%,var(--a30),transparent 50%)}
.home .big-title{font-size:24px;letter-spacing:-.015em}
.big p{font-size:15.5px}
.ext-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;font-weight:600}
.browser{margin-top:auto;border-radius:14px;background:#04060b;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.browser-bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 12px;background:var(--bg2);border-bottom:1px solid var(--line)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--muted) 40%,transparent)}
.browser-bar span{flex:1;margin-inline-start:8px;padding:5px 10px;border-radius:7px;background:color-mix(in srgb,var(--text) 5%,transparent);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-body{min-height:190px;display:flex;align-items:center;justify-content:center;gap:22px;padding:22px}
.home .browser-body .cover{width:120px;border-radius:12px;flex-shrink:0;box-shadow:0 0 30px var(--a30)}
.browser-meta{display:flex;flex-direction:column;gap:8px;min-width:0}
.ph{display:block;border-radius:6px;background:color-mix(in srgb,var(--muted) 30%,transparent)}
.ph1{width:160px;max-width:100%;height:12px}
.ph2{width:110px;max-width:80%;height:10px;background:color-mix(in srgb,var(--muted) 16%,transparent)}
.browser-meta .play{margin-top:8px}
.bento .wide{grid-column:span 2;display:flex;gap:22px;align-items:center}
.wide-text{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.home .wide-title{font-size:20px}
.wide p{font-size:15px}
.icontile-lg{width:56px;height:56px;border-radius:14px}
.feat{display:flex;flex-direction:column;gap:12px}
.feat p{font-size:15px;color:var(--muted)}
.more{display:flex;flex-direction:column;gap:16px;padding-top:12px}
.home .more-title{font-size:12px}
.more-list{display:flex;flex-wrap:wrap;gap:8px}
.more-list li{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:12px;background:var(--glass);border:1px solid var(--line);font-size:13.5px;font-weight:500;color:color-mix(in srgb,var(--text) 86%,transparent)}
.more-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--a60);flex-shrink:0}

/* ---------- skin gallery ---------- */
.skins{padding-top:20px;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.home .skins-title{font-size:clamp(38px,5vw,60px)}
.gal-wrap{position:relative;width:100%}
.gal{position:relative;display:flex;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:46px calc(50% - 120px);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.gal::-webkit-scrollbar{display:none}
.gal-tile{flex:0 0 240px;max-width:62vw;scroll-snap-align:center;border:0;padding:0;background:transparent;border-radius:20px;opacity:.5;transform:scale(.86);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s,box-shadow .45s}
.gal-tile:hover{opacity:.8}
.gal-tile[aria-checked="true"]{opacity:1;transform:scale(1.14);box-shadow:0 0 0 6px var(--a18),0 0 60px var(--a45)}
.v2-body .gal-tile:focus-visible{outline-offset:6px;border-radius:20px}
/* site.css gives every focused element a 6px radius; keep round controls round */
.v2-body .hero-pause:focus-visible,.v2-body .hero-arrow:focus-visible,.v2-body .car-ctrl button:focus-visible{border-radius:50%}
.v2-body .faq-item summary:focus-visible{border-radius:inherit;outline-offset:-2px}
.home .gal .cover{width:100%;border-radius:inherit;background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--tile-a) 55%,transparent),transparent 62%),linear-gradient(160deg,var(--tile-card),var(--tile-bg))}
.gal-foot{display:flex;flex-direction:column;align-items:center;gap:16px}
.gal-caption{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:58px}
.gal-caption b{font-size:19px;letter-spacing:-.01em}
.gal-id{font-family:var(--mono);font-size:12.5px;padding:3px 9px;border-radius:6px;background:var(--a10);border:1px solid var(--a30);color:var(--accent-softer)}
.car-ctrl{display:flex;align-items:center;gap:10px;padding:6px;border-radius:9999px;background:var(--glass-strong);border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.car-ctrl button{width:40px;height:40px;border-radius:50%;border:0;background:color-mix(in srgb,var(--text) 7%,transparent);display:grid;place-items:center;transition:background .2s}
.car-ctrl button:hover{background:var(--a30)}
.car-ctrl span{padding:0 10px;font-size:14px;font-weight:500}
.gal-more{font-size:13.5px}

/* ---------- ServerBridge ---------- */
.bridge-panel{border-radius:22px;border:1px solid var(--line);padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:44px;background-color:var(--side);--hx:50%;--hy:55%}
.bridge-duo{display:flex;flex-direction:column;gap:22px}
.bridge-card{border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--side) 88%,transparent);padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:26px}
.bridge-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.bridge-head p{max-width:420px;font-size:15px}
.bridge-title{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.home .bridge-title h3{font-family:var(--display);font-weight:800;font-size:clamp(23px,2.6vw,30px);letter-spacing:-.03em}
.bridge{display:flex;align-items:center;justify-content:center}
.bridge .line{flex:1;min-width:24px;height:2px;background:linear-gradient(90deg,var(--a18),var(--accent));box-shadow:0 0 10px var(--a60)}
.bridge .line.rev{background:linear-gradient(90deg,var(--accent),var(--a18))}
.node{flex:0 1 380px;min-width:0;padding:20px;border-radius:var(--r-card);background:var(--glass-strong);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);display:flex;flex-direction:column;gap:10px;font-size:14px}
.talk{display:flex;align-items:center;gap:8px}
.bots{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.botchip{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--grad);color:var(--on-accent);font-size:12.5px;font-weight:700;box-shadow:0 0 18px var(--a45);white-space:nowrap}
.bots .link{width:2px;height:22px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.hub{width:160px;height:160px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle,var(--accent-hover),color-mix(in srgb,var(--accent-hover) 25%,#02040a) 70%);border:1px solid color-mix(in srgb,var(--accent-soft) 50%,transparent);box-shadow:0 0 0 10px var(--a10),0 0 50px var(--a60);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.hub b{font-family:var(--display);font-weight:800;font-size:28px;color:#fff;letter-spacing:-.02em}
.hub small{font-size:12px;color:color-mix(in srgb,#fff 75%,var(--accent))}
.net{position:relative;height:440px}
.net-lines{position:absolute;inset:0;width:100%;height:100%}
.net-lines path{vector-effect:non-scaling-stroke}
.net .flow{stroke-dasharray:4 7;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-22}}
.net-hub{position:absolute;left:50%;top:50%;translate:-50% -50%}
.net-hub::before{content:"";position:absolute;inset:-22px;border-radius:50%;border:1px solid var(--a30);animation:hubping 3.2s ease-out infinite}
@keyframes hubping{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.srv{position:absolute;translate:-50% -50%;width:230px;padding:14px 16px;border-radius:14px;background:var(--glass-strong);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);display:flex;flex-direction:column;gap:6px;font-size:13.5px;text-align:start}
.kind{display:flex;align-items:center;gap:8px;font-weight:700}
.kind i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);flex-shrink:0}
.srv-more{left:50%;top:92%;width:auto;white-space:nowrap;align-items:center;text-align:center}
.net-list{display:none}
.net-items{display:flex;flex-direction:column;gap:10px}
.net-items li{display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px solid var(--line)}

/* ---------- pricing ---------- */
.pricing{padding-bottom:clamp(88px,9vw,130px)}
.scrub-panel{border-radius:24px;border:1px solid var(--line);padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:40px;background-color:var(--side);--hx:85%;--hy:10%}
.scrub-head .sec-head p{max-width:48ch}
.price-out{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:end}
.price-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.bigprice{font-family:var(--display);font-weight:800;letter-spacing:-.04em;font-size:clamp(48px,6vw,72px);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.permonth{font-size:15px;color:color-mix(in srgb,var(--text) 80%,transparent);font-variant-numeric:tabular-nums}
.vatline{font-size:13.5px;color:var(--dim)}
.scrubber{display:flex;flex-direction:column;gap:8px;--n:7}
.range-wrap{position:relative;padding-block:6px}
.range{-webkit-appearance:none;appearance:none;display:block;height:32px;background:transparent;width:calc(100% * (var(--n) - 1) / var(--n) + 32px);margin:0;margin-inline-start:calc(100% / (2 * var(--n)) - 16px);cursor:pointer;--fill:66.67%}
.range:focus-visible{outline:none}
.range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--accent-hover),var(--accent)) 0/var(--fill) 100% no-repeat,color-mix(in srgb,var(--card) 90%,#000)}
.range::-moz-range-track{height:8px;border-radius:4px;background:color-mix(in srgb,var(--card) 90%,#000)}
.range::-moz-range-progress{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--accent-hover),var(--accent))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-12px;border-radius:50%;background:var(--text);border:0;box-shadow:0 0 0 6px var(--a30),0 0 24px var(--a60);transition:transform .15s}
.range::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:var(--text);border:0;box-shadow:0 0 0 6px var(--a30),0 0 24px var(--a60)}
.range:active::-webkit-slider-thumb{transform:scale(1.08)}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--a30),0 0 0 9px var(--accent-soft),0 0 24px var(--a60)}
.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 6px var(--a30),0 0 0 9px var(--accent-soft),0 0 24px var(--a60)}
.stops{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.stops button{border:0;background:transparent;text-align:center;padding:10px 4px;border-radius:12px;display:flex;flex-direction:column;gap:3px;align-items:center;min-height:44px;transition:background .2s}
.stops button:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.stops b{font-size:14.5px;white-space:nowrap}
.stop-inf{display:none}
.stops small{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.stops .stop-bonus{font-size:12px;color:var(--ok-soft);opacity:.85}
.stops button[aria-pressed="true"] b{color:var(--accent-soft)}
.stops button[aria-pressed="true"] small{color:color-mix(in srgb,var(--text) 85%,transparent)}
.stops button[aria-pressed="true"] .stop-bonus{color:var(--ok-soft);opacity:1}
.scrub-foot{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line)}
.checks{display:flex;flex-wrap:wrap;gap:12px 24px;flex:1 1 520px;font-size:15px}
.buy{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:end}
.buy .btn{min-width:200px}
.buy small{font-size:12.5px;max-width:30ch;text-wrap:balance}
.license-note{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;background:var(--glass-strong);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.license-note svg{color:var(--accent-soft);flex-shrink:0;margin-top:1px}
.price-more{margin-top:16px}
.more-card{display:flex;flex-direction:column;gap:8px}
.home .more-price{font-size:19px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.net-tag{font-size:12px;font-weight:600;color:var(--dim);letter-spacing:.02em}
.more-card p{font-size:14.5px}
.v2-body .more-link{font-weight:600;font-size:14.5px;margin-top:4px;width:max-content;max-width:100%}

/* ---------- wheel and hosted bots ---------- */
.hosting{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px}
.promo{background:linear-gradient(135deg,var(--a18),color-mix(in srgb,var(--accent) 5%,transparent));border:1px solid var(--a45)}
.wheel-card{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.wheel{position:relative;width:112px;height:112px;border-radius:50%;flex-shrink:0;background:conic-gradient(var(--accent) 0 45deg,var(--accent-hover) 45deg 90deg,var(--accent-soft) 90deg 135deg,color-mix(in srgb,var(--accent) 45%,#000) 135deg 180deg,var(--accent) 180deg 225deg,var(--accent-hover) 225deg 270deg,var(--accent-soft) 270deg 315deg,color-mix(in srgb,var(--accent) 45%,#000) 315deg 360deg);box-shadow:0 0 30px var(--a45);display:grid;place-items:center;animation:spin 18s linear infinite}
.wheel::after{content:"";width:26px;height:26px;border-radius:50%;background:var(--text);box-shadow:0 0 0 4px color-mix(in srgb,var(--bg) 60%,transparent)}
.wheel-text{display:flex;flex-direction:column;gap:8px;flex:1;min-width:200px}
.wheel-text p{color:color-mix(in srgb,var(--text) 80%,transparent)}
.home .card-title{font-size:22px;letter-spacing:-.015em}
.host-card{display:flex;flex-direction:column;gap:14px}
.host-links{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px 64px;align-items:start}
.faq-side{position:sticky;top:calc(var(--hdr-h) + 32px)}
.faq-help{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-card);background:var(--glass);transition:border-color .25s,background-color .25s}
.faq-item:hover{border-color:var(--line-hover)}
.faq-item[open]{border-color:var(--a45);background:color-mix(in srgb,var(--accent) 6%,var(--glass))}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:16px 20px;cursor:pointer;font-weight:600;font-size:16.5px;border-radius:inherit}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{position:relative;width:30px;height:30px;border-radius:50%;flex-shrink:0;background:var(--a18);transition:background .25s}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:var(--accent-softer);transition:transform .25s}
.faq-item summary i::after{transform:rotate(90deg)}
.faq-item[open] summary i{background:var(--a30)}
.faq-item[open] summary i::after{transform:rotate(0)}
.faq-item p{padding:0 20px 20px;color:var(--muted);font-size:15px;line-height:1.65;max-width:70ch}
@supports (interpolate-size:allow-keywords){
  .faq-item{interpolate-size:allow-keywords}
  .faq-item::details-content{height:0;overflow:clip;transition:height .3s ease,content-visibility .3s allow-discrete}
  .faq-item[open]::details-content{height:auto}
}

/* ---------- responsive ---------- */
/* below ~1340 px the side arrows would sit on top of the Console mock; tabs,
   swipe and the keyboard remain */
@media (max-width:1339px){.hero-arrow{display:none!important}}
@media (max-width:1180px){
  /* The Console keeps its 1100 px layout and is scaled to the width; home.js sets
     the exact --cs, these steps are the first paint (always slightly smaller). */
  .console-fit{--cs:.9;height:calc(640px * var(--cs))}
  .console{width:1100px;min-width:0;max-width:none;margin-inline-start:calc((100% - 1100px) / 2);transform:scale(var(--cs));transform-origin:50% 0}
  /* tablet and phone: every slide is stacked content (copy and CTAs first, then
     the picture), the hero takes the height of the tallest slide */
  .hero-ctrl{bottom:16px}
  .hero-rot>.slide{justify-content:flex-start}
  .l-hero{grid-template-columns:minmax(0,1fr);gap:48px}
  .l-comp{min-height:0}
  .chan{width:100%;max-width:680px;margin-inline:auto}
  .l-player,.l-link,.float{display:none}
  .s-hero>.stage{order:1}
  .stage{--art:min(400px,70vw);height:auto;display:grid;place-items:center;padding-block:28px 40px;margin-top:0}
  .stage>.ring1,.stage>.ring2,.stage>.art{grid-area:1/1;position:relative;left:auto;top:auto;translate:none}
  .stage .ring1{width:calc(var(--art) * 1.4);height:calc(var(--art) * 1.4)}
  .stage .ring2{width:calc(var(--art) * 1.22);height:calc(var(--art) * 1.22)}
  .stage .art{width:var(--art)}
  .home .bigplay{top:calc(50% + var(--art) * .445);width:80px;height:80px}
}
@media (max-width:1079px){.console-fit{--cs:.82}}
@media (max-width:979px){.console-fit{--cs:.73}}
@media (max-width:879px){.console-fit{--cs:.65}}
@media (max-width:779px){.console-fit{--cs:.56}}
@media (max-width:679px){.console-fit{--cs:.48}}
@media (max-width:579px){.console-fit{--cs:.4}}
@media (max-width:479px){.console-fit{--cs:.33}}
@media (max-width:399px){.console-fit{--cs:.29}}
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .net{height:auto}
  .net-lines,.net .srv,.net-hub{display:none}
  .net-list{display:flex;flex-direction:column;align-items:stretch;gap:24px}
  .net-list .hub{align-self:center;width:130px;height:130px}
  .net-list .node{flex:none;width:100%;max-width:none}
  .hosting{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .bridge{flex-direction:column}
  .bridge .line{width:2px;height:36px;flex:none;min-width:0;background:linear-gradient(180deg,var(--a18),var(--accent))}
  .bridge .line.rev{background:linear-gradient(180deg,var(--accent),var(--a18))}
  .bots{flex-direction:row}
  .bots .link{width:22px;height:2px}
  .node{flex:none;width:100%;max-width:560px}
  .price-out{align-items:flex-start;text-align:start}
  .price-row{justify-content:flex-start}
  .buy{align-items:stretch;text-align:start;width:100%}
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq-side{position:static}
}
@media (max-width:720px){
  .c-hero{padding-block:32px 92px;gap:16px}
  .s-hero{padding-block:32px 92px;gap:14px}
  .l-hero{padding-block:32px 92px;gap:32px}
  .l-copy{gap:16px}
  .hero .lead{font-size:16px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .hero-cta .btn{width:100%;min-height:50px}
  .home .rail-new{font-size:12px;text-align:start;border-radius:14px;padding-block:5px}
  .console-fit{margin-top:14px}
  .home .s-title{font-size:clamp(40px,11.5vw,56px)}
  .home .l-title{font-size:clamp(38px,11vw,52px)}
  .home .c-title{font-size:clamp(36px,10.5vw,52px)}
  .stage{--art:min(280px,68vw);padding-block:16px 28px}
  .home .bigplay{width:68px;height:68px}
  .home .bigplay svg{width:26px;height:26px}
  .l-cmds,.tree,.msg-more{display:none}
  .chan{min-height:0}
  .log{gap:12px;padding:14px}
  .chan-tabs{padding:0 8px}
  .home .chan-switch button{padding:7px 10px;min-height:40px}
  .chan-tabs{height:56px}
  .hero-ctrl{padding:4px;gap:4px}
  .hero-tabs{gap:2px}
  .home .hero-tab{min-height:40px;padding:0 10px;font-size:12px}
  .hero.is-auto .hero-tab[aria-selected="true"]::after{inset-inline-start:10px}
  .hero-pause{width:40px;height:40px}
  .sources{padding-block:56px 80px}
  .chips .chip{padding:9px 13px;font-size:13.5px}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento .big,.bento .wide{grid-column:auto;grid-row:auto}
  .browser-body{min-height:0;gap:16px;padding:18px}
  .home .browser-body .cover{width:96px}
  .bento .wide{flex-direction:row-reverse;justify-content:flex-end;align-items:flex-start}
  .more-list li{font-size:13px;padding:7px 12px}
  .gal{gap:14px;padding-block:40px}
  .gal-tile{flex-basis:200px}
  .stops small{display:none}
  .stops b{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15}
  .stop-n{font-size:16px;font-weight:800}
  .stop-u{font-size:var(--stop-u-size,10.5px);font-weight:600;color:var(--muted)}
  .stops button[aria-pressed="true"] .stop-u{color:var(--accent-soft)}
  .stop-inf{display:block}
  .stop-u-life{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stops button{padding:8px 0}
  .checks{flex-basis:100%;flex-direction:column;gap:10px}
  .wheel{width:88px;height:88px}
  .faq-item summary{font-size:15.5px;padding:14px 16px}
  .faq-item p{padding:0 16px 18px}
}
@media (max-width:400px){
  .term{font-size:11px}
  .home .hero-tab{padding:0 8px;font-size:11.5px}
  .botchip{font-size:11.5px;padding:7px 10px}
}
@media (max-width:389px){
  /* German stop units ("Monate") need room in seven columns */
  .scrub-panel{padding-inline:18px}
  .stop-u{font-size:var(--stop-u-size,9.5px)}
  .hero-cta .btn{font-size:15px;padding-inline:14px}
}
@media (max-width:359px){
  .home .hero-tab{padding:0 6px;font-size:11px}
  .stop-u{font-size:var(--stop-u-size,9px);letter-spacing:-.01em}
}
@media (prefers-reduced-motion:reduce){
  .hero-rot>.slide{transition:none}
}

/* ---------- right to left (Arabic) ----------
   The layout mirrors through logical properties; these are the parts that need more.
   The product mock-ups mirror with the page (they carry the translated texts), but
   media playback stays left to right as in RTL apps and the Material guidelines:
   transport buttons, playback progress and times, the volume slider. The skin
   gallery track and its arrows keep dir="ltr" (home-skins.php), so scroll-snap and
   the scrollLeft maths in home.js behave as in LTR. The price slider runs right to
   left: the native range input mirrors, the fill and the stop labels follow it. */
[dir="rtl"] .hero-arrow svg{scale:-1 1}
[dir="rtl"] .slide-live{--hx:28%}
[dir="rtl"] .l-link{scale:-1 1}
[dir="rtl"] .bridged{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] :is(.c-time,.c-transport,.f3 .progress,.f3-times,.f4 .progress,.l-player .progress){direction:ltr}
/* not direction on .f4 itself: its logical position would then flip back */
[dir="rtl"] .f4{flex-direction:row-reverse}
[dir="rtl"] .bento .big{background-image:radial-gradient(circle at 20% 20%,var(--a30),transparent 50%)}
[dir="rtl"] .scrub-panel{--hx:15%}
[dir="rtl"] .range::-webkit-slider-runnable-track{background:linear-gradient(270deg,var(--accent-hover),var(--accent)) 100% 0/var(--fill) 100% no-repeat,color-mix(in srgb,var(--card) 90%,#000)}
@media (min-width:901px){
  [dir="rtl"] .bridge .line{background:linear-gradient(270deg,var(--a18),var(--accent))}
  [dir="rtl"] .bridge .line.rev{background:linear-gradient(270deg,var(--accent),var(--a18))}
}
@media (min-width:1181px) and (max-height:780px){
  [dir="rtl"] .float.f1,[dir="rtl"] .float.f2{transform-origin:0 50%}
  [dir="rtl"] .float.f3,[dir="rtl"] .float.f4{transform-origin:100% 50%}
}

/* ---------- cover art ----------
   Copied from the webinterface's css/cover-art.css (covers 53-67, the skins in
   v2HomeSkins()). Only .is-playing covers animate; home.js sets it on visible ones. */
.ca-scope>svg{width:100%;height:100%;display:block}
@keyframes ca-c53Bar { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes ca-c53Orbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -746; } }
@keyframes ca-c53Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ca-c53Shim { 0%, 70%, 100% { opacity: 0; } 80% { opacity: 0.45; } }
@keyframes ca-c53Sweep { 0% { transform: translateX(-40px); } 60%, 100% { transform: translateX(200px); } }
@keyframes ca-c53Halo { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes ca-c53Beam { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes ca-c53Rise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-150px); opacity: 0; } }
@keyframes ca-c53Ring { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.ca-scope .c53-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.35); }
.ca-scope .c53-shim { opacity: 0; }
.ca-scope .c53-sweep { opacity: 0; }
.ca-scope .c53-ring { transform-box: fill-box; transform-origin: center; }
.ca-scope .c53-rise { opacity: 0; }
.ca-scope.is-playing .c53-bar { animation: ca-c53Bar 1.4s ease-in-out infinite; }
.ca-scope.is-playing .c53-comet { animation: ca-c53Orbit 5s linear infinite; }
.ca-scope.is-playing .c53-comet2 { animation: ca-c53Orbit 3.6s linear infinite reverse; }
.ca-scope.is-playing .c53-float { animation: ca-c53Float 4s ease-in-out infinite; }
.ca-scope.is-playing .c53-shim { animation: ca-c53Shim 3.6s ease-in-out infinite; }
.ca-scope.is-playing .c53-sweep { opacity: 1; animation: ca-c53Sweep 3.2s ease-in-out infinite; }
.ca-scope.is-playing .c53-halo { animation: ca-c53Halo 2.2s ease-in-out infinite; }
.ca-scope.is-playing .c53-beam { animation: ca-c53Beam 1.6s ease-in-out infinite; }
.ca-scope.is-playing .c53-rise { animation: ca-c53Rise 3.2s ease-out infinite; }
.ca-scope.is-playing .c53-ring { animation: ca-c53Ring 2s ease-out infinite; }
@keyframes ca-c54Spin { to { transform: rotate(360deg); } }
@keyframes ca-c54SpinR { to { transform: rotate(-360deg); } }
@keyframes ca-c54Step { 0% { transform: rotate(0deg); } 25% { transform: rotate(30deg); } 50% { transform: rotate(30deg); } 75% { transform: rotate(60deg); } 100% { transform: rotate(60deg); } }
@keyframes ca-c54Core { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.8; } }
@keyframes ca-c54Wave { from { transform: translateX(0); } to { transform: translateX(38px); } }
@keyframes ca-c54Wave2 { from { transform: translateX(0); } to { transform: translateX(-14px); } }
@keyframes ca-c54Blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes ca-c54Load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ca-c54Glitch { 0%, 86%, 100% { opacity: 0; transform: translateX(0); } 88% { opacity: 0.8; transform: translateX(-20px); } 92% { opacity: 0.5; transform: translateX(24px); } 95% { opacity: 0; } }
@keyframes ca-c54Scan { from { transform: translateY(-40px); opacity: 0.08; } to { transform: translateY(500px); opacity: 0.08; } }
@keyframes ca-c54Hex { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.ca-scope .c54-r1, .ca-scope .c54-r2, .ca-scope .c54-r3 { transform-origin: 250px 222px; }
.ca-scope .c54-core { transform-box: fill-box; transform-origin: center; }
.ca-scope .c54-load { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0.35); }
.ca-scope.is-playing .c54-r1 { animation: ca-c54Spin 14s linear infinite; }
.ca-scope.is-playing .c54-r2 { animation: ca-c54SpinR 8s linear infinite; }
.ca-scope.is-playing .c54-r3 { animation: ca-c54Step 2s steps(1) infinite; }
.ca-scope.is-playing .c54-core { animation: ca-c54Core 0.94s ease-in-out infinite; }
.ca-scope.is-playing .c54-hex { animation: ca-c54Hex 0.94s ease-in-out infinite; }
.ca-scope.is-playing .c54-wave { animation: ca-c54Wave 0.6s linear infinite; }
.ca-scope.is-playing .c54-wave2 { animation: ca-c54Wave2 0.35s linear infinite; }
.ca-scope.is-playing .c54-blink { animation: ca-c54Blink 1.4s steps(2) infinite; }
.ca-scope.is-playing .c54-load { animation: ca-c54Load 12s linear infinite; }
.ca-scope.is-playing .c54-glitch { animation: ca-c54Glitch 3.4s linear infinite; }
.ca-scope.is-playing .c54-scanbar { animation: ca-c54Scan 4s linear infinite; }
@keyframes ca-c55Aur { 0%, 100% { transform: translateX(0) skewX(0deg); opacity: 0.75; } 50% { transform: translateX(-26px) skewX(-6deg); opacity: 1; } }
@keyframes ca-c55Snow { from { transform: translateY(-60px) translateX(0); } 50% { transform: translateY(220px) translateX(14px); } to { transform: translateY(520px) translateX(0); } }
@keyframes ca-c55Flake { to { transform: rotate(360deg); } }
@keyframes ca-c55Tw { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes ca-c55Pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.3); opacity: 0; } }
.ca-scope .c55-aur { opacity: 0.75; }
.ca-scope .c55-snow { transform: translateY(0); }
.ca-scope .c55-flake { transform-origin: 0 0; }
.ca-scope .c55-pulse { opacity: 0; transform-origin: 0 0; }
.ca-scope .c55-tw { opacity: 0.6; }
.ca-scope.is-playing .c55-aur { animation: ca-c55Aur 7s ease-in-out infinite; }
.ca-scope.is-playing .c55-snow { animation-name: ca-c55Snow; animation-timing-function: linear; animation-iteration-count: infinite; }
.ca-scope.is-playing .c55-flake { animation: ca-c55Flake 30s linear infinite; }
.ca-scope.is-playing .c55-tw { animation: ca-c55Tw 2.6s ease-in-out infinite; }
.ca-scope.is-playing .c55-pulse { animation: ca-c55Pulse 2.4s ease-out infinite; }
@keyframes ca-c56Swirl { to { transform: rotate(360deg); } }
@keyframes ca-c56Bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ca-c56Pane { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -8px); } }
@keyframes ca-c56Eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes ca-c56Spec { 0%, 100% { transform: rotate(-35deg) translate(0, 0); opacity: 0.55; } 50% { transform: rotate(-35deg) translate(16px, -4px); opacity: 0.8; } }
@keyframes ca-c56Caustic { 0%, 100% { transform: scale(1, 1); opacity: 0.5; } 50% { transform: scale(1.15, 0.8); opacity: 1; } }
@keyframes ca-c56Prog { from { transform: scaleX(0.05); } to { transform: scaleX(1); } }
.ca-scope .c56-swirl, .ca-scope .c56-swirl2 { transform-origin: 250px 228px; }
.ca-scope .c56-eq { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.5); }
.ca-scope .c56-spec, .ca-scope .c56-caustic { transform-box: fill-box; transform-origin: center; }
.ca-scope .c56-prog { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0.3); }
.ca-scope.is-playing .c56-swirl { animation: ca-c56Swirl 10s linear infinite; }
.ca-scope.is-playing .c56-swirl2 { animation: ca-c56Swirl 7s linear infinite reverse; }
.ca-scope.is-playing .c56-bob { animation: ca-c56Bob 5s ease-in-out infinite; }
.ca-scope.is-playing .c56-pane1 { animation: ca-c56Pane 6s ease-in-out infinite; }
.ca-scope.is-playing .c56-pane2 { animation: ca-c56Pane 7s ease-in-out infinite reverse; }
.ca-scope.is-playing .c56-eq { animation: ca-c56Eq 0.9s ease-in-out infinite; }
.ca-scope.is-playing .c56-spec { animation: ca-c56Spec 5s ease-in-out infinite; }
.ca-scope.is-playing .c56-caustic { animation: ca-c56Caustic 3s ease-in-out infinite; }
.ca-scope.is-playing .c56-prog { animation: ca-c56Prog 20s linear infinite; }
@keyframes ca-c57Meter { 0%, 100% { transform: scaleY(0.35); } 20% { transform: scaleY(0.85); } 45% { transform: scaleY(0.55); } 70% { transform: scaleY(0.95); } }
@keyframes ca-c57Head { from { transform: translateX(0); } to { transform: translateX(414px); } }
@keyframes ca-c57Fader { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ca-c57Knob { 0%, 100% { transform: rotate(-40deg); } 50% { transform: rotate(60deg); } }
@keyframes ca-c57Clip { 0%, 88%, 100% { opacity: 0.15; } 90%, 96% { opacity: 1; } }
@keyframes ca-c57Rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes ca-c57Play { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.ca-scope .c57-meter { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.5); }
.ca-scope .c57-knob { transform: rotate(-40deg); }
.ca-scope .c57-clip { opacity: 0.15; }
.ca-scope .c57-play { opacity: 0.35; }
.ca-scope.is-playing .c57-meter { animation: ca-c57Meter 1.1s ease-in-out infinite; }
.ca-scope.is-playing .c57-head { animation: ca-c57Head 16s linear infinite; }
.ca-scope.is-playing .c57-fader { animation: ca-c57Fader 5s ease-in-out infinite; }
.ca-scope.is-playing .c57-knob { animation: ca-c57Knob 6s ease-in-out infinite; }
.ca-scope.is-playing .c57-clip { animation: ca-c57Clip 2.8s linear infinite; }
.ca-scope.is-playing .c57-rec { animation: ca-c57Rec 1.2s steps(2) infinite; }
.ca-scope.is-playing .c57-play { animation: ca-c57Play 1s ease-in-out infinite; }
@keyframes ca-c58Bezel { to { transform: rotate(360deg); } }
@keyframes ca-c58Ping { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(3.6); opacity: 0; } }
@keyframes ca-c58Laser { 0%, 100% { transform: translateY(-120px); opacity: 0.2; } 50% { transform: translateY(120px); opacity: 1; } }
@keyframes ca-c58Lock { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.82); } }
@keyframes ca-c58Rng { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ca-c58Wings { 0%, 100% { opacity: 0.8; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes ca-c58Ekg { from { stroke-dashoffset: 320; } to { stroke-dashoffset: -320; } }
.ca-scope .c58-bezel { transform-origin: 250px 262px; }
.ca-scope .c58-ping { opacity: 0; transform-origin: 250px 262px; }
.ca-scope .c58-lock { transform-origin: 250px 262px; }
.ca-scope .c58-laser { opacity: 0; }
.ca-scope .c58-ekg { stroke-dashoffset: 0; }
.ca-scope.is-playing .c58-bezel { animation: ca-c58Bezel 40s linear infinite; }
.ca-scope.is-playing .c58-ping { animation: ca-c58Ping 2.4s ease-out infinite; }
.ca-scope.is-playing .c58-laser { animation: ca-c58Laser 3s ease-in-out infinite; }
.ca-scope.is-playing .c58-lock { animation: ca-c58Lock 0.9s ease-in-out infinite; }
.ca-scope.is-playing .c58-rng { animation: ca-c58Rng 0.8s steps(2) infinite; }
.ca-scope.is-playing .c58-wings { animation: ca-c58Wings 3s ease-in-out infinite; }
.ca-scope.is-playing .c58-ekg { animation: ca-c58Ekg 2.2s linear infinite; }
@keyframes ca-c59Rain { from { transform: translateY(0); } to { transform: translateY(420px); } }
@keyframes ca-c59Disc { to { transform: rotate(360deg); } }
@keyframes ca-c59Core { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes ca-c59Cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ca-c59Type { 0% { transform: scaleX(0); } 45%, 100% { transform: scaleX(1); } }
.ca-scope .c59-rain { transform: translateY(140px); }
.ca-scope .c59-disc { transform-origin: 250px 236px; }
.ca-scope .c59-typer { transform-box: fill-box; transform-origin: 0 50%; }
.ca-scope.is-playing .c59-rain { animation-name: ca-c59Rain; animation-timing-function: linear; animation-iteration-count: infinite; }
.ca-scope.is-playing .c59-disc { animation: ca-c59Disc 60s linear infinite; }
.ca-scope.is-playing .c59-core { animation: ca-c59Core 1.8s ease-in-out infinite; }
.ca-scope.is-playing .c59-cursor { animation: ca-c59Cursor 1s steps(2) infinite; }
.ca-scope.is-playing .c59-typer { animation: ca-c59Type 6s steps(26) infinite; }
@keyframes ca-c60Spin { to { transform: rotate(360deg); } }
@keyframes ca-c60Rays { to { transform: rotate(-360deg); } }
@keyframes ca-c60Sb { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1.4); } }
@keyframes ca-c60Glint { 0%, 70%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes ca-c60Sun { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.ca-scope .c60-hour { transform-origin: 250px 240px; transform: rotate(300deg); }
.ca-scope .c60-min { transform-origin: 250px 240px; transform: rotate(60deg); }
.ca-scope .c60-sec { transform-origin: 250px 240px; }
.ca-scope .c60-sub1 { transform-origin: 250px 180px; transform: rotate(40deg); }
.ca-scope .c60-sub2 { transform-origin: 190px 240px; }
.ca-scope .c60-sub3 { transform-origin: 310px 240px; transform: rotate(120deg); }
.ca-scope .c60-rays { transform-origin: 250px 240px; }
.ca-scope .c60-sb { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.5); }
.ca-scope .c60-glint { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ca-scope .c60-sunc { transform-box: fill-box; transform-origin: center; }
.ca-scope.is-playing .c60-sec { animation: ca-c60Spin 12s steps(60) infinite; }
.ca-scope.is-playing .c60-min { animation: ca-c60Spin 120s linear infinite; }
.ca-scope.is-playing .c60-hour { animation: ca-c60Spin 720s linear infinite; }
.ca-scope.is-playing .c60-sub1 { animation: ca-c60Spin 20s linear infinite; }
.ca-scope.is-playing .c60-sub2 { animation: ca-c60Spin 3s linear infinite; }
.ca-scope.is-playing .c60-sub3 { animation: ca-c60Spin 36s linear infinite; }
.ca-scope.is-playing .c60-rays { animation: ca-c60Rays 50s linear infinite; }
.ca-scope.is-playing .c60-sb { animation: ca-c60Sb 0.8s ease-in-out infinite; }
.ca-scope.is-playing .c60-glint { animation: ca-c60Glint 4s ease-in-out infinite; }
.ca-scope.is-playing .c60-sunc { animation: ca-c60Sun 2.4s ease-in-out infinite; }
@keyframes ca-c61H { 0% { transform: translateY(0); opacity: 0.2; } 100% { transform: translateY(200px); opacity: 1; } }
@keyframes ca-c61Stripe { 0% { transform: translateY(0); } 100% { transform: translateY(-12px); } }
@keyframes ca-c61Tw { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@keyframes ca-c61Palm { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes ca-c61Halo { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.3; } }
@keyframes ca-c61Neon { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 94% { opacity: 0.4; } 96% { opacity: 1; } 98% { opacity: 0.6; } }
.ca-scope .c61-h { transform: translateY(40px); }
.ca-scope .c61-tw { opacity: 0.6; }
.ca-scope.is-playing .c61-h { animation: ca-c61H 3.2s cubic-bezier(0.55, 0, 1, 0.45) infinite; }
.ca-scope.is-playing .c61-stripe { animation: ca-c61Stripe 1.8s linear infinite; }
.ca-scope.is-playing .c61-tw { animation: ca-c61Tw 2.4s ease-in-out infinite; }
.ca-scope.is-playing .c61-palm { animation: ca-c61Palm 4s ease-in-out infinite; }
.ca-scope.is-playing .c61-palm2 { animation: ca-c61Palm 4.6s ease-in-out infinite reverse; }
.ca-scope.is-playing .c61-halo { animation: ca-c61Halo 2s ease-in-out infinite; }
.ca-scope.is-playing .c61-neon { animation: ca-c61Neon 5s linear infinite; }
@keyframes ca-c62Radar { to { transform: rotate(360deg); } }
@keyframes ca-c62Blip { 0%, 60%, 100% { opacity: 0; } 70% { opacity: 1; } }
@keyframes ca-c62Tape { from { transform: translateY(0); } to { transform: translateY(-40px); } }
@keyframes ca-c62Comp { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes ca-c62Jet { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(0, -4px) rotate(1.5deg); } }
@keyframes ca-c62Nav { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
.ca-scope .c62-radar, .ca-scope .c62-comp, .ca-scope .c62-jet { transform-origin: 250px 250px; }
.ca-scope .c62-blip { opacity: 0; }
.ca-scope.is-playing .c62-radar { animation: ca-c62Radar 4s linear infinite; }
.ca-scope.is-playing .c62-blip { animation: ca-c62Blip 4s linear infinite; }
.ca-scope.is-playing .c62-tape1 { animation: ca-c62Tape 2s linear infinite; }
.ca-scope.is-playing .c62-tape2 { animation: ca-c62Tape 3.4s linear infinite reverse; }
.ca-scope.is-playing .c62-comp { animation: ca-c62Comp 9s ease-in-out infinite; }
.ca-scope.is-playing .c62-jet { animation: ca-c62Jet 6s ease-in-out infinite; }
.ca-scope.is-playing .c62-nav { animation: ca-c62Nav 1.2s steps(2) infinite; }
@keyframes ca-c63Core { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes ca-c63Sp { 0%, 70%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes ca-c63Haze { 0%, 100% { transform: translateX(0); opacity: 0.7; } 50% { transform: translateX(60px); opacity: 1; } }
@keyframes ca-c63Dust { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(20px, -80px); opacity: 0; } }
.ca-scope .c63-core { transform-box: fill-box; transform-origin: center; }
.ca-scope .c63-sp { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ca-scope .c63-dust { opacity: 0.4; }
.ca-scope.is-playing .c63-core { animation: ca-c63Core 2.2s ease-in-out infinite; }
.ca-scope.is-playing .c63-sp { animation: ca-c63Sp 3s ease-in-out infinite; }
.ca-scope.is-playing .c63-haze1 { animation: ca-c63Haze 9s ease-in-out infinite; }
.ca-scope.is-playing .c63-haze2 { animation: ca-c63Haze 11s ease-in-out infinite reverse; }
.ca-scope.is-playing .c63-dust { animation: ca-c63Dust 6s ease-out infinite; }
@keyframes ca-c64Lure { 0%, 100% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(4px, 8px); opacity: 0.6; } }
@keyframes ca-c64Fish { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-6px, 4px) rotate(-1.5deg); } }
@keyframes ca-c64Jelly { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-4px) scale(1.08, 0.9); } 60% { transform: translateY(-22px) scale(0.95, 1.05); } }
@keyframes ca-c64Snow { from { transform: translate(0, -30px); } to { transform: translate(-30px, 60px); } }
@keyframes ca-c64Bub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-260px); opacity: 0; } }
@keyframes ca-c64Rays { 0%, 100% { opacity: 0.6; transform: skewX(0deg); } 50% { opacity: 1; transform: skewX(4deg); } }
@keyframes ca-c64Depth { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes ca-c64Gauge { 0%, 100% { transform: scaleY(0.62); } 50% { transform: scaleY(0.7); } }
.ca-scope .c64-fish { transform-origin: 260px 280px; }
.ca-scope .c64-lure { transform-origin: 394px 142px; }
.ca-scope .c64-bub { opacity: 0; }
.ca-scope .c64-gauge { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0.62); }
.ca-scope.is-playing .c64-lure { animation: ca-c64Lure 2.2s ease-in-out infinite; }
.ca-scope.is-playing .c64-fish { animation: ca-c64Fish 5s ease-in-out infinite; }
.ca-scope.is-playing .c64-jelly { animation: ca-c64Jelly 4s ease-in-out infinite; }
.ca-scope.is-playing .c64-snow { animation: ca-c64Snow 12s linear infinite; }
.ca-scope.is-playing .c64-bub { animation: ca-c64Bub 4s ease-in infinite; }
.ca-scope.is-playing .c64-rays { animation: ca-c64Rays 6s ease-in-out infinite; }
.ca-scope.is-playing .c64-depth { animation: ca-c64Depth 2s ease-in-out infinite; }
.ca-scope.is-playing .c64-gauge { animation: ca-c64Gauge 5s ease-in-out infinite; }
@keyframes ca-c65Needle { 0% { transform: rotate(-100deg); } 28% { transform: rotate(88deg); } 34% { transform: rotate(10deg); } 62% { transform: rotate(96deg); } 68% { transform: rotate(20deg); } 96% { transform: rotate(100deg); } 100% { transform: rotate(-100deg); } }
@keyframes ca-c65Led { 0%, 100% { opacity: 0.15; } 20%, 28% { opacity: 1; } 34% { opacity: 0.15; } }
@keyframes ca-c65G0 { 0%, 31% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes ca-c65G1 { 0%, 31% { opacity: 0; } 32%, 65% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes ca-c65G2 { 0%, 65% { opacity: 0; } 66%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ca-c65Smoke { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-40px, -70px) scale(2.2); opacity: 0; } }
@keyframes ca-c65Boost { 0%, 100% { transform: rotate(-80deg); } 30%, 60% { transform: rotate(90deg); } }
@keyframes ca-c65Under { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes ca-c65Spd { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.ca-scope .c65-needle { transform-origin: 250px 250px; transform: rotate(-60deg); }
.ca-scope .c65-boost { transform-origin: 120px 360px; transform: rotate(-60deg); }
.ca-scope .c65-led { opacity: 0.15; }
.ca-scope .c65-gear { opacity: 0; }
.ca-scope .c65-g0 { opacity: 1; }
.ca-scope .c65-smoke { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ca-scope.is-playing .c65-needle { animation: ca-c65Needle 4.5s ease-in infinite; }
.ca-scope.is-playing .c65-led { animation: ca-c65Led 1.5s linear infinite; }
.ca-scope.is-playing .c65-g0 { animation: ca-c65G0 4.5s linear infinite; }
.ca-scope.is-playing .c65-g1 { animation: ca-c65G1 4.5s linear infinite; }
.ca-scope.is-playing .c65-g2 { animation: ca-c65G2 4.5s linear infinite; }
.ca-scope.is-playing .c65-smoke { animation: ca-c65Smoke 3s ease-out infinite; }
.ca-scope.is-playing .c65-boost { animation: ca-c65Boost 1.5s ease-in-out infinite; }
.ca-scope.is-playing .c65-under { animation: ca-c65Under 1.2s ease-in-out infinite; }
.ca-scope.is-playing .c65-spd { animation: ca-c65Spd 0.6s steps(2) infinite; }
@keyframes ca-c66Spin { to { transform: rotate(360deg); } }
@keyframes ca-c66SpinR { to { transform: rotate(-360deg); } }
@keyframes ca-c66Needle { 0%, 100% { transform: rotate(40deg); } 20% { transform: rotate(70deg); } 40% { transform: rotate(55deg); } 60% { transform: rotate(92deg); } 80% { transform: rotate(60deg); } }
@keyframes ca-c66Fire { 0%, 100% { transform: scale(1, 1); opacity: 1; } 25% { transform: scale(1.05, 1.14); opacity: 0.9; } 50% { transform: scale(0.96, 0.92); } 75% { transform: scale(1.03, 1.08); opacity: 0.95; } }
@keyframes ca-c66Spark { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(24px, -170px); opacity: 0; } }
@keyframes ca-c66Steam { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-110px) scale(2.4); opacity: 0; } }
.ca-scope .c66-gA { transform-origin: 190px 200px; }
.ca-scope .c66-gB { transform-origin: 318px 150px; }
.ca-scope .c66-gC { transform-origin: 330px 268px; }
.ca-scope .c66-needle { transform-origin: 400px 340px; transform: rotate(40deg); }
.ca-scope .c66-fire, .ca-scope .c66-fire2 { transform-origin: 250px 440px; }
.ca-scope .c66-spark { opacity: 0; }
.ca-scope .c66-steam { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ca-scope.is-playing .c66-gA { animation: ca-c66Spin 12s linear infinite; }
.ca-scope.is-playing .c66-gB { animation: ca-c66SpinR 8s linear infinite; }
.ca-scope.is-playing .c66-gC { animation: ca-c66SpinR 6s linear infinite; }
.ca-scope.is-playing .c66-needle { animation: ca-c66Needle 3s ease-in-out infinite; }
.ca-scope.is-playing .c66-fire { animation: ca-c66Fire 0.9s ease-in-out infinite; }
.ca-scope.is-playing .c66-fire2 { animation: ca-c66Fire 0.6s ease-in-out infinite reverse; }
.ca-scope.is-playing .c66-spark { animation: ca-c66Spark 2s ease-out infinite; }
.ca-scope.is-playing .c66-steam { animation: ca-c66Steam 2.8s ease-out infinite; }
@keyframes ca-c67Petal { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(40px, 200px) rotate(180deg); } 100% { transform: translate(-10px, 420px) rotate(360deg); opacity: 0; } }
@keyframes ca-c67Ripple { 0% { transform: scale(0.2); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes ca-c67Lamp { 0%, 100% { opacity: 1; } 40% { opacity: 0.7; } 60% { opacity: 0.9; } }
@keyframes ca-c67Branch { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.2deg); } }
@keyframes ca-c67Koi { 0% { transform: translateX(0); } 100% { transform: translateX(380px); } }
@keyframes ca-c67Mg { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.ca-scope .c67-petal { opacity: 0.9; }
.ca-scope .c67-ripple { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ca-scope .c67-branch { transform-origin: 0 40px; }
.ca-scope.is-playing .c67-petal { animation-name: ca-c67Petal; animation-timing-function: linear; animation-iteration-count: infinite; }
.ca-scope.is-playing .c67-ripple { animation: ca-c67Ripple 2.6s ease-out infinite; }
.ca-scope.is-playing .c67-lamp { animation: ca-c67Lamp 1.8s ease-in-out infinite; }
.ca-scope.is-playing .c67-branch { animation: ca-c67Branch 5s ease-in-out infinite; }
.ca-scope.is-playing .c67-koi { animation: ca-c67Koi 14s linear infinite; }
.ca-scope.is-playing .c67-mg { animation: ca-c67Mg 4s ease-in-out infinite; }