/* The home page: a hero with a before / after picture, five showcases (a picture, a title, a line), a short setup. Tokens, nav,
   buttons, footer come from site.css; tour.html (no longer linked) is only where guide-anim.js takes its stages from. */
.h-hero{padding:56px 0 40px;text-align:center}
.h-hero .pill{margin-bottom:22px}
.h-hero h1{font-size:clamp(40px,7vw,76px);font-weight:800;letter-spacing:-.03em}
.h-hero .lead{margin:14px auto 0;font-size:clamp(18px,2.2vw,24px);max-width:680px;color:var(--text)}
.h-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:28px 0 10px}
.h-cta.h-ai{margin-top:0}                                       /* the AI guide on a line of its own, under Download */
.h-trust{color:var(--dim);font-size:14px}
.h-stats{color:var(--dim);font-size:13px;margin:6px 0 0;min-height:20px;opacity:0;transition:opacity .4s}   /* height kept so the fade-in moves nothing */
.h-stats.on{opacity:1}
.h-stats i{font-style:normal}
.h-stats b{color:var(--text);font-weight:600}
.h-stats a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--dim)}
.h-stats a:hover{color:var(--text)}
/* before / after: the stock home on top, clipped to --p from the left; the transparent range input over it is the handle */
.ba{max-width:1080px;margin:40px auto 0;text-align:left}
.ba .hshot{user-select:none;-webkit-user-select:none}
.ba .hshot img{display:block}
.ba .ba-old{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba .htag{position:absolute;top:12px;margin:0;z-index:1;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.ba .htag.bad{left:12px}.ba .htag.good{right:12px}
.ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.6);pointer-events:none;z-index:1}
.ba-line::after{content:"\2039\00a0\203a";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:#111;font:700 22px/42px system-ui,sans-serif;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.ba-in{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:2;touch-action:pan-y}
.ba .hshot:has(.ba-in:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.ba figcaption{padding:12px 4px 0;color:var(--muted);font-size:15px;text-align:center}
.ba figcaption b{color:var(--text)}
.h-hero .lead,.sc-t h2,.sc-t p{text-wrap:balance}
.hshot{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line2);background:var(--card);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.hshot img{width:100%;height:auto}
.htag{display:inline-block;margin-bottom:10px;padding:5px 14px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.htag.bad{background:#b02a2a}.htag.good{background:#16804a}

.sc{padding:64px 0}
.sc .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.sc-t{min-width:0}
.sc-name{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.sc-name img{width:56px;height:56px;border-radius:14px;flex:none;box-shadow:0 8px 24px -8px #000}
.sc-name b{font-size:clamp(32px,4vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.05;color:var(--pc,var(--blue))}
#remote{--pc:#8fb0ff}#manage{--pc:#7da2ff}#home{--pc:#9db4f0}#channels{--pc:#35d6c0}#games{--pc:#e06ad6}
.sc-t h2{font-size:clamp(20px,2.3vw,26px);font-weight:600;line-height:1.25;margin:0 0 10px;color:var(--text)}
.sc-t p{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:440px}
.sc-t .btn{margin-top:22px}
.sc-p{position:relative;min-width:0}
.sc-p.port{display:flex;justify-content:center;padding:28px;border-radius:22px;border:1px solid var(--line);background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(91,140,255,.22),transparent 70%),var(--card)}
.sc-p.port .hshot{width:min(100%,260px);border-radius:26px}
.sc-p .ins{position:absolute;right:-10px;bottom:-22px;width:24%;min-width:110px;border-radius:14px}
.sc-p .ins img{width:100%;height:auto}

.h-setup{padding:72px 0 40px}
.h-setup h2{text-align:center;font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.025em}
.h-setup .lead{margin:0 auto;text-align:center}
.steps4{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;counter-reset:s;list-style:none}
.steps4 li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.steps4 li::before{content:counter(s);width:48px;height:48px;font-size:26px;border-radius:50%;background:var(--fill);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.steps4 h3{font-size:17px}
.steps4 p{color:var(--muted);font-size:14.5px;line-height:1.5}
.steps4 .th{margin-top:auto;border-radius:10px;overflow:hidden;border:1px solid var(--line2);background:var(--bg2);display:flex;align-items:center;justify-content:center;height:300px}
.steps4 .th img{height:100%;width:auto;max-width:100%;object-fit:contain}
.steps4 .th.emo{font-size:72px}
.steps4[hidden]{display:none}
.steps4 .th.dls{height:auto;min-height:300px;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;padding:16px;border:0;background:none}
.steps4 .th.dls .btn{justify-content:flex-start;padding:12px 18px;font-size:15px}
.steps4 .th.dlcode{flex-direction:column;gap:10px}
.steps4 .th.dlcode small{color:var(--muted);font-size:14px}
.steps4 .hcode.big{font-size:40px;padding:10px 22px;letter-spacing:.06em}
.steps4 .th.dls .btn.mine{border-color:var(--blue);color:var(--blue)}
.paths{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap}
.path{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 18px;display:flex;flex-direction:column;gap:2px;text-align:left;color:inherit;font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.path:hover{border-color:var(--line2)}
.path[aria-selected="true"]{border-color:var(--blue);background:linear-gradient(180deg,rgba(91,140,255,.10),var(--card) 70%)}
.path b{font-size:16px}
.path small{color:var(--muted);font-size:13.5px}
.hcode{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-weight:700;background:var(--card2);border:1px solid var(--line2);color:var(--text);border-radius:8px;padding:2px 8px;cursor:pointer;font-size:14px}
.h-note a{color:var(--blue)}
.h-guides{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.h-guides .btn{min-height:48px;padding:12px 20px;font-size:16px;text-align:center}
.h-note{text-align:center;color:var(--dim);font-size:14px;margin-top:10px}

@media (max-width:980px){
  .sc .wrap{grid-template-columns:1fr;gap:28px}
  .sc-t p{max-width:none}
}
@media (max-width:700px){
  .ba .htag{top:8px;font-size:11px;padding:4px 10px}.ba .htag.bad{left:8px}.ba .htag.good{right:8px}
  .steps4{grid-template-columns:1fr}
  .sc{padding:44px 0}
  .sc-p .ins{display:none}
}
@media (max-width:560px){
  .h-hero{padding-top:36px}
  .h-cta .btn,.h-guides .btn{flex:1 1 100%}
  .steps4{grid-template-columns:1fr}
  .steps4 .th{height:240px}
  .path{flex:1 1 100%}
}

/* ---- And more: a scroll-snap row, native swipe, no autoplay ---- */
.h-more2{padding:56px 0 24px;overflow-x:clip}
.car-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.car-head h2{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.025em}
.car-head .lead{margin:6px 0 0;color:var(--muted)}
.car-ctl{display:flex;align-items:center;gap:10px;flex:none}
.car-n{color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.car-b{width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:var(--card2);color:var(--text);display:grid;place-items:center;cursor:pointer}
.car-b svg{width:22px;height:22px}
.car-b:hover:not(:disabled){background:var(--fill);border-color:var(--fill)}
.car-b:disabled{opacity:.35;cursor:default}
.car-b:focus-visible,.car-track:focus-visible,.fc:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.car-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  --pad:max(24px,calc((100vw - var(--max))/2 + 24px));padding:4px var(--pad) 16px;scroll-padding-inline:var(--pad);scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
@media (pointer:fine){.car-track{cursor:grab}}
.car-track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.car-track.drag>*{pointer-events:none}
.car-track.glide{scroll-snap-type:none;scroll-behavior:auto}   /* home.js slides it: the snap would pull against the glide */
@media (prefers-reduced-motion:no-preference){.car-track{scroll-behavior:smooth}}
.fc{flex:0 0 360px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 10px 18px;color:var(--text);transition:border-color .15s,transform .15s}
.fc:hover{border-color:var(--line2);transform:translateY(-2px)}
.fc img{width:100%;height:auto;aspect-ratio:3/2;border-radius:12px;display:block;background:var(--bg2)}
.fc-grid{box-sizing:border-box;width:100%;aspect-ratio:3/2;grid-template-rows:repeat(3,1fr);border-radius:12px;background:var(--bg2);display:grid;grid-template-columns:repeat(4,1fr);align-items:center;justify-items:center;padding:10px;font-size:32px;line-height:1}
.fc-grid i{font-style:normal}
.fc h3{font-size:19px;margin:10px 8px 0;line-height:1.25}
.fc p{color:var(--muted);font-size:15px;line-height:1.5;margin:0 8px}
@media (max-width:560px){.fc{flex-basis:85%}.car-head{align-items:center}.car-head .lead{display:none}}
.sc-t p .ln{display:inline-block}                                  /* a line breaks between sentences first, not mid-phrase */

#dl-all .btn{gap:8px}
#dl-all .osi{width:18px;height:18px;flex:none}   /* each system's own mark (simple-icons, CC0; Windows drawn) */

/* Android button on a computer: a QR to scan with the phone, plus the APK itself */
#apkqr{margin:auto;inset:0;border:1px solid var(--line2);border-radius:22px;padding:26px 24px 22px;background:var(--card);color:inherit;text-align:center;width:min(92vw,380px);position:fixed}
#apkqr::backdrop{background:rgba(4,6,12,.78);backdrop-filter:blur(4px)}
#apkqr h3{font-size:18px;margin-bottom:14px}
#apkqr svg{width:min(70vw,260px);height:auto;border-radius:14px;display:block;margin:0 auto 12px}
#apkqr p{color:var(--muted);font-size:14px;margin-bottom:16px}
#apkqr .btn{width:100%;justify-content:center}
#apkqr .x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:10px;border:1px solid var(--line2);background:var(--card2);color:var(--text);font:inherit;font-size:15px;cursor:pointer}
#apkqr .x:hover{border-color:var(--blue)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}   /* the anchor jump to #install */
/* the themes row is the "And more" row (.car-*, .fc); only what differs is here */
.h-themes{padding-top:40px}
button.fc{font:inherit;text-align:left;cursor:pointer;width:auto}
.thc img{aspect-ratio:16/9}
.car-all{font-size:14px;font-weight:700;color:var(--blue);white-space:nowrap;padding:0 4px}
.car-all:hover{text-decoration:underline}
.thc-own{text-decoration:none}
.cm{margin-top:40px}   /* the community's row: shown only when the list has some */
.cm .car-head{margin-bottom:16px}
.cm-t{font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-.02em}
.cm .car-head .lead{margin-top:4px}
.thc-ph{display:grid;place-items:center;aspect-ratio:16/9;border-radius:12px;border:2px dashed var(--line2);color:var(--muted)}
.thc-ph svg{width:44px;height:44px}
.thc-own:hover .thc-ph{border-color:var(--blue);color:var(--blue)}
.car-head .lead a{color:var(--blue);white-space:nowrap}
.th-zoom{border:0;padding:0;background:transparent;color:var(--text);max-width:none;max-height:none;margin:auto;overflow:visible}
.th-zoom::backdrop{background:rgba(4,6,12,.97);backdrop-filter:blur(8px)}
.th-zoom[open]{display:flex;flex-direction:column;gap:12px;align-items:center;width:min(94vw,calc((100vh - 130px)*16/9))}
.th-zoom img{width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r);display:block;background:var(--bg2)}
.th-x{align-self:flex-end}
.th-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.th-name{margin:0;font-size:20px;color:#fff;text-align:center}
.th-zoom .car-b{background:var(--card2)}
@media (max-width:560px){.h-themes .car-head h2{font-size:26px}.h-themes .car-head .lead{display:block;font-size:15px}.th-name{font-size:18px}}

/* ---- FAQ: native <details>, the + turns into a − when open ---- */
.h-faq{padding:72px 0 80px}
.h-faq h2{text-align:center;font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.025em}