/* musicbot4you.net v2: tokens, base, shared components and the page shell.
   Layout: the shell of ts3musicbot.net v2 (announce bar, sticky header, 1178 px wrap), moved from navy and
   blue to aubergine and violet. The cave artwork and the octopus carry the brand. The octopus's tentacle
   (a line that ends in a ring) is the repeated motif: step markers, list bullets, the slider thumb, the bridge.
   Type: Outfit for display (the face the live site already uses, round like the mascot), Inter for text
   (shared with ts3musicbot.net), JetBrains Mono for addresses, tokens and prices.
   One dark look on purpose: both sites and the bot's webinterface are dark. */
:root{
  color-scheme:dark;
  --bg:#0c0816; --bg2:#140d24; --card:#1e1436; --side:#090511;
  --text:#faf7ff; --muted:#b6abcf; --dim:#9184b0;
  --line:rgba(226,214,255,.1); --line-strong:rgba(226,214,255,.2);
  --accent:#a855f7; --accent-soft:#d0a6fb; --accent-softer:#e7d2fd;
  --indigo:#8fa6ff;            /* top of the mascot, only inside gradients */
  --pink:#f472b6;              /* the one accent: free offers and discounts */
  --sib:#60a5fa;               /* ts3musicbot.net blue, only where that site is meant */
  --grad:linear-gradient(135deg,#9333ea,#6d28d9);
  --a10:color-mix(in srgb,var(--accent) 10%,transparent);
  --a18:color-mix(in srgb,var(--accent) 18%,transparent);
  --a30:color-mix(in srgb,var(--accent) 30%,transparent);
  --a45:color-mix(in srgb,var(--accent) 45%,transparent);
  --a60:color-mix(in srgb,var(--accent) 60%,transparent);
  --glass:color-mix(in srgb,var(--card) 62%,transparent);
  --ok:#22c55e; --ok-soft:#4ade80; --warn:#fbbf24; --danger:#fb7185;
  --display:Outfit,"Segoe UI",system-ui,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,57.6px);
  --wrap-max:calc(1178px + 2 * var(--gutter));
  --hdr-h:72px;
}
@font-face{font-family:Outfit;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/outfit-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/outfit-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/outfit-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/outfit-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2")}
/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 20px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--accent-soft);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-softer)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-softer);outline-offset:2px}
h1,h2,h3,p,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance;line-height:1.2}
::selection{background:var(--a45);color:#fff}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(64px,8vw,112px)}
/* ---------- type ---------- */
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft)}
.label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.h1{font:800 clamp(40px,5.6vw,72px)/1.02 var(--display);letter-spacing:-.03em}
.h2{font:800 clamp(30px,4vw,48px)/1.06 var(--display);letter-spacing:-.025em}
.h3{font:700 19px/1.25 var(--display);letter-spacing:-.005em}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--muted);max-width:60ch}
.grad-text{background:linear-gradient(120deg,var(--indigo),var(--accent-soft) 35%,#f5b8dc 55%,var(--accent-soft) 75%,var(--indigo));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 0}}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:760px}
.hint{font-size:13px;line-height:1.5;color:var(--dim)}
/* ---------- shared components ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border-radius:12px;border:1px solid transparent;font-weight:600;font-size:15px;line-height:1.2;text-align:center;transition:transform .15s,box-shadow .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn-lg{min-height:54px;padding:0 26px;font-size:16px}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px;border-radius:10px}
.btn-primary,.btn-primary:hover{background:var(--grad);color:#fff}
.btn-primary{box-shadow:0 0 26px var(--a45),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{box-shadow:0 0 36px var(--a60),inset 0 1px 0 rgba(255,255,255,.26)}
.btn-ghost,.btn-ghost:hover{background:var(--glass);border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--a60)}
.btn-ok,.btn-ok:hover{background:#15803d;color:#fff}
.btn-stop,.btn-stop:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:color-mix(in srgb,var(--danger) 55%,transparent);color:#fecdd3}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn img{height:20px;width:auto}
.mini{min-height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--line-strong);background:transparent;color:var(--accent-softer);font-size:12.5px;font-weight:600}
.mini:hover{border-color:var(--a60)}
@media (pointer:coarse){.btn-sm,.mini,.lang summary,.acct,.foot-grid a{min-height:44px}}
.pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:9999px;background:var(--a18);border:1px solid var(--a45);color:var(--accent-softer);font-size:12px;font-weight:600;white-space:nowrap}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:16px}
.pad{padding:28px}
.rings{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rings li{position:relative;padding-inline-start:26px;color:var(--muted)}
.rings li::before{content:"";position:absolute;inset-inline-start:0;top:.42em;width:11px;height:11px;border-radius:50%;border:2px solid var(--c,var(--accent))}
.rows{display:grid;gap:8px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14.5px;color:var(--muted)}
.row b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.row.total{padding-top:10px;border-top:1px solid var(--line);font-size:16px;color:var(--text)}
.row.total b{font-weight:700}
.state{display:inline-flex;align-items:center;padding:4px 10px;border-radius:9999px;border:1px solid var(--line-strong);font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.state.ok{color:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.state.wait{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.state.bad{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dim);flex-shrink:0}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--danger)}
.dot.wait{background:var(--warn);animation:blink 1s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.25}}
.stat{display:inline-flex;align-items:center;gap:7px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:13.5px;font-weight:600;color:color-mix(in srgb,var(--text) 86%,transparent)}
.field-row{display:flex;gap:8px;align-items:center}
.input{width:100%;min-width:0;min-height:46px;padding:10px 14px;border-radius:10px;border:1px solid var(--line-strong);background:var(--bg);color:var(--text);font:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s}
.input.mono{font-family:var(--mono);font-size:14px}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--a30)}
.input::placeholder{color:var(--dim)}
.err{font-size:13px;color:var(--danger)}
.oktxt{color:var(--ok-soft)} .badtxt{color:var(--danger)}
/* ---------- announce + header ---------- */
.announce{display:flex;align-items:center;justify-content:center;gap:8px 12px;flex-wrap:wrap;padding:9px 16px;background:var(--side);border-bottom:1px solid var(--line);font-size:13.5px;color:color-mix(in srgb,var(--text) 82%,transparent);text-align:center}
.announce a{font-weight:600}
.announce .pill{background:color-mix(in srgb,var(--pink) 16%,transparent);border-color:color-mix(in srgb,var(--pink) 50%,transparent);color:#fbcfe8}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--side) 88%,transparent);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--indigo) 25%,var(--accent) 50%,var(--pink) 75%,transparent);opacity:.75}
.hdr-inner{display:flex;align-items:center;gap:20px;min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand,.brand:hover{color:var(--text)}
.brand img{height:44px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.brand-text b{display:block;font:700 18px/1.15 var(--display);letter-spacing:-.01em}
.brand-text small{display:block;font-size:11.5px;color:var(--dim);white-space:nowrap}
.menu{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.nav{display:flex;gap:2px;flex:1;min-width:0;font-size:14px;font-weight:500}
.nav a{padding:8px 10px;border-radius:8px;color:var(--muted);white-space:nowrap}
.nav a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.hdr-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.hdr-link{font-weight:600;font-size:14px;color:var(--muted)}
.acct{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--a45);background:var(--a10);font-size:14px;font-weight:600}
.acct,.acct:hover{color:var(--text)}
.acct b{font-family:var(--mono);font-size:13px;color:var(--accent-softer)}
.lang{position:relative}
.lang summary{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);cursor:pointer;list-style:none;user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang[open] summary,.lang summary:hover{color:var(--text);border-color:var(--a60)}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:60;margin:0;padding:8px;list-style:none;min-width:200px;border-radius:14px;background:var(--side);border:1px solid var(--line-strong);box-shadow:0 24px 60px rgba(0,0,0,.6);display:grid;gap:2px;font-size:14px}
.lang-menu li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;color:var(--muted)}
.lang-menu li[aria-current]{background:var(--a18);color:var(--text)}
.lang-menu .hint{padding:8px 10px 2px;border-top:1px solid var(--line);border-radius:0;margin-top:4px}
.nav-toggle{display:none;margin-inline-start:auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);background:transparent;place-items:center}
.nav-toggle i,.nav-toggle i::before,.nav-toggle i::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--text)}
.nav-toggle i{position:relative}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0}
.nav-toggle i::before{top:-6px} .nav-toggle i::after{top:6px}
@media (max-width:1080px){
  .nav-toggle{display:grid}
  .hdr-inner{flex-wrap:wrap;gap:12px;padding-block:12px;min-height:0}
  .menu{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:16px;padding:4px 0 12px}
  .menu.open{display:flex}
  .nav{flex-direction:column;font-size:16px}
  .nav a{padding:12px}
  .hdr-actions{flex-wrap:wrap}
  .hdr-actions .btn,.hdr-actions .acct{flex:1}
  .lang-menu{inset-inline-end:auto;inset-inline-start:0}
}
/* ---------- section backdrops ----------
   The artwork fades in behind some sections, the way it does behind the account header: cave under
   "How it works", under the packages and in the FAQ corner, sky behind the ServerBridge and the cross
   promotion. It only shows where no running text sits, and it drifts and fades with the scroll position.
   Never scaled up: the files are the full 3728 px artwork and the transform only moves them by whole pixels. */
.has-art{position:relative;isolation:isolate;overflow:hidden;--sbg:var(--bg)}
.band.has-art{--sbg:var(--side)}
.sec-art{position:absolute;left:0;z-index:-2;width:100%;object-fit:cover;pointer-events:none;opacity:calc(var(--o,.5) * var(--v,1));transform:translate3d(0,calc(var(--y,0) * 1px),0) scale(var(--flip,1),var(--flipy,1))}
/* footer: the grass field of the robot artwork grows at the end of the page and fades up into the footer; it sits below the text */
.art-foot{bottom:-36px;height:calc(clamp(150px,17vw,240px) + 36px);object-position:50% 100%;-webkit-mask-image:linear-gradient(transparent 4%,#000 62%);mask-image:linear-gradient(transparent 4%,#000 62%)}
.has-art::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.art-top{top:-36px;height:calc(min(480px,100%) + 36px);-webkit-mask-image:linear-gradient(#000 12%,transparent);mask-image:linear-gradient(#000 12%,transparent)}
.shade-l::before{bottom:auto;height:min(480px,100%);background:linear-gradient(90deg,var(--sbg) 0%,color-mix(in srgb,var(--sbg) 78%,transparent) 46%,color-mix(in srgb,var(--sbg) 26%,transparent) 100%)}
.art-bottom{bottom:-36px;height:calc(min(640px,80%) + 36px);object-position:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 55%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 55%,#000 82%,transparent)}
.art-corner{bottom:0;width:min(640px,48%);height:min(420px,70%);object-position:28% 86%;-webkit-mask-image:radial-gradient(ellipse 75% 75% at 25% 80%,#000 15%,transparent 70%);mask-image:radial-gradient(ellipse 75% 75% at 25% 80%,#000 15%,transparent 70%)}
.art-full{top:0;height:100%;-webkit-mask-image:radial-gradient(ellipse 72% 82% at 50% 50%,#000 20%,transparent 76%);mask-image:radial-gradient(ellipse 72% 82% at 50% 50%,#000 20%,transparent 76%)}
@media (max-width:900px){
  .shade-l::before{background:linear-gradient(180deg,color-mix(in srgb,var(--sbg) 74%,transparent),color-mix(in srgb,var(--sbg) 88%,transparent))}
  .art-corner{display:none}
}
/* ---------- steps ---------- */
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.steps::before{content:"";position:absolute;inset-inline-start:22px;inset-inline-end:calc((100% - 84px) / 4 - 22px);top:21px;height:2px;background:linear-gradient(90deg,var(--indigo),var(--accent) 60%,var(--pink))}
.step{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.ring{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;margin-bottom:10px;border-radius:50%;border:2px solid var(--accent);background:var(--bg);box-shadow:0 0 0 6px var(--bg);font:700 17px var(--display)}
.step p{color:var(--muted);font-size:15px}
.step-ui{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kbd{font-family:var(--mono);font-size:12.5px;padding:8px 11px;border-radius:9px;background:var(--bg2);border:1px solid var(--line);color:var(--accent-softer);overflow-wrap:anywhere}
@media (max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr);gap:32px}
  .steps::before{display:none}
  .step{padding-inline-start:68px}
  .step:not(:last-child)::after{content:"";position:absolute;inset-inline-start:21px;top:44px;bottom:-32px;width:2px;background:var(--accent)}
  .step .ring{position:absolute;inset-inline-start:0;top:0;margin:0}
}
/* ---------- packages ---------- */
.cfg{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;margin-top:40px;align-items:stretch}
.cfg-main{display:flex;flex-direction:column;gap:30px}
.cfg-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.cfg-big{font:800 clamp(46px,6vw,68px)/1 var(--display);letter-spacing:-.03em}
.cfg-big small{font-size:.42em;font-weight:600;color:var(--muted);letter-spacing:0}
.range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;--p:5%}
.range::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--accent) var(--p),var(--card) var(--p))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--bg2);border:6px solid var(--accent-soft);cursor:grab}
.range::-moz-range-track{height:8px;border-radius:8px;background:var(--card)}
.range::-moz-range-progress{height:8px;border-radius:8px;background:var(--accent)}
.range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--bg2);border:6px solid var(--accent-soft);cursor:grab}
.range:focus-visible{outline-offset:4px}
.ticks{display:flex;justify-content:space-between;font:400 12px var(--mono);color:var(--dim);margin-top:6px}
.seg{border:0;margin:0;padding:0;min-width:0}
.seg legend{padding:0;margin-bottom:10px}
.seg-opts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.seg-opts label{position:relative;cursor:pointer}
.seg-opts input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg-opts span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;padding:6px 4px;border-radius:10px;border:1px solid var(--line-strong);font-size:14px;font-weight:600;color:var(--muted);text-align:center}
.seg-opts small{font:700 12px var(--mono);color:var(--pink)}
.seg-opts input:checked+span{border-color:var(--accent);background:var(--a18);color:var(--text)}
.seg-opts input:focus-visible+span{outline:2px solid var(--accent-softer);outline-offset:2px}
.sum{display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:16px;border:1px solid var(--a45);background:var(--card)}
.sum-price{font:800 clamp(40px,5vw,56px)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sum-sub{font-size:14px;color:var(--muted)}
.sum .btn{width:100%}
.save{color:var(--pink);font-weight:700}
@media (max-width:900px){.cfg{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.seg-opts{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ---------- footer ---------- */
.foot{background:var(--side);border-top:1px solid var(--line);padding-block:60px clamp(168px,18.5vw,264px)}
.foot-grid{display:flex;gap:40px 56px;flex-wrap:wrap}
.foot-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:14px;min-width:0}
.foot-grid strong{font-size:14px;color:color-mix(in srgb,var(--text) 90%,transparent);margin-bottom:2px}
.foot-grid a{display:inline-flex;align-items:center;min-height:30px;color:var(--muted)}
.foot-grid .brand{color:var(--text)}
.foot-grid a:hover{color:var(--text)}
.foot-brand{flex:1 1 300px;max-width:400px;gap:16px!important}
.foot-brand p{font-size:13.5px;line-height:1.65;color:var(--muted)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.pay{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.paychip{padding:3px 8px;border-radius:6px;border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--muted)}

/* ---------- support chat ---------- */
/* the widget and its stylesheet come from support.ts3musicbot.net; these variables give it this site's colours */
#apbd-cht-container{--apc-accent:var(--accent);--apc-bg:var(--bg2);--apc-surface:var(--card);--apc-text:var(--text);--apc-muted:var(--muted);--apc-line:var(--line);--apc-danger:var(--danger);--apc-ok:var(--ok-soft);--apc-font:var(--body)}

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