/* Dashboard design language applied to the whole site: black base, 1px lines, no filled cards, radius 10 buttons / 14 cards.
   Values come from the app (appTheme BLACK_BG/BLACK_LINE, tokens CTRL_DARK, RADIUS/BUTTON_RADIUS). */
html{background:#000;color-scheme:dark}
body{background:#000;color:#F4F4F4}
a{color:inherit}
/* top bar */
nav{background:rgba(0,0,0,.92)!important;border-bottom:1px solid rgba(255,255,255,.20)!important}
nav a{color:#F4F4F4!important}
nav svg{color:#F4F4F4!important}
nav a[href*="login"]:not([style*="background"]){color:rgba(244,244,244,.6)!important}
nav a[style*="background:#0a0a0a"]{background:#F4F4F4!important;color:#111!important;border-radius:10px!important}
.nxNavDesktop a[href$=".html"][style*="A1A1A8"]{color:rgba(244,244,244,.4)!important}
.nxNavSheet>div>div{background:#000!important;border-top-color:rgba(255,255,255,.20)!important}
.nxNavItem{border-bottom-color:rgba(255,255,255,.20)!important}
.nxNavItem[style*="background:#0a0a0a"]{background:#F4F4F4!important;color:#111!important;border-radius:10px!important}
.nxNavBurger path{stroke:#F4F4F4!important}
/* footer */
html body footer.nxFooter{background:#000;border-top:1px solid rgba(255,255,255,.20);color:rgba(244,244,244,.6)}
.nxFooter svg,.nxFooter .so{color:#F4F4F4!important}
.nxFooter .so:hover{color:rgba(244,244,244,.5)}
/* buttons: primary = light fill + dark text, radius 10 (no pills) */
.btn,.btn.blue{border-radius:10px;height:44px;padding:0 22px;font-size:14px;font-weight:600;background:#F4F4F4;color:#111}
.btn:hover{background:#E0E0E0}
.btn.w{background:#F4F4F4;color:#111}
.btn.d{background:#292929;color:#F4F4F4}.btn.d:hover{background:#333}
.btn.sm{height:36px;padding:0 16px}
.btn:focus-visible{background:#CCCCCC;color:#111}

/* Poppins first so every Latin glyph is Poppins; Korean falls through to Noto Sans KR */
html,body,button,input,textarea,select,nav,nav *,footer,footer *,.aw,.aw *,.mq .b{font-family:"Poppins","Noto Sans KR",system-ui,sans-serif!important}

/* Windows / Mac download badges, same size and edge as the Google Play badge */
.dlb{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 16px;background:#000;border:1px solid #A6A6A6;border-radius:6px;color:#fff}
.dlb span{display:flex;flex-direction:column;line-height:1.1}
.dlb small{font-size:10px;font-weight:500;letter-spacing:.02em}
.dlb b{font-size:17px;font-weight:600}
.dlb:hover{border-color:#fff}

/* bottom-left theme icon: fixed, square-ish, no fill, 1px line like the dashboard handle */
.thm{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:60;width:40px;height:40px;padding:0;display:grid;place-items:center;background:#000;color:#F4F4F4;border:1px solid rgba(255,255,255,.20);border-radius:8px;cursor:pointer}
.thm:hover{border-color:rgba(255,255,255,.5)}
.thm:focus-visible{outline:2px solid #F4F4F4;outline-offset:2px}
[data-theme="light"] .thm{background:#fff;color:#0a0a0a;border-color:rgba(10,10,10,.12)}
[data-theme="light"] .thm:hover{border-color:rgba(10,10,10,.5)}
/* narrow screens: the toggle sits bottom-right inside the safe area so it never covers the left-aligned headings */
@media (max-width:820px){.thm{left:auto;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px))}}
[data-theme="light"] .thm:focus-visible{outline-color:#0a0a0a}

/* footer language links: one wrapping row under the copyright, starts on the left grid line */
.nxFooter .lang{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:2px;font-size:13px;line-height:1.7}
.nxFooter .lang a{color:rgba(244,244,244,.85);white-space:nowrap}
.nxFooter .lang a:hover{color:#F4F4F4;text-decoration:underline;text-underline-offset:3px}
.nxFooter .lang a[aria-current]{font-weight:700;color:rgba(244,244,244,.45)}
/* social icons stay on the right edge even when they wrap below (clear of the bottom-left theme icon) */
.nxFooter .sr{margin-left:auto}
[data-theme="light"] .nxFooter .lang a{color:#0a0a0a}
[data-theme="light"] .nxFooter .lang a[aria-current]{color:#A1A1A8}
/* translated pages: Poppins first for every Latin glyph, the language's Noto font behind it */
html[lang="en"] *,html[lang="id"] *,html[lang="ms"] *{font-family:"Poppins",system-ui,sans-serif!important}
html[lang="vi"] *{font-family:"Poppins","Be Vietnam Pro",system-ui,sans-serif!important}
html[lang="ja"] *{font-family:"Poppins","Noto Sans JP",system-ui,sans-serif!important}
html[lang="zh-CN"] *{font-family:"Poppins","Noto Sans SC",system-ui,sans-serif!important}
html[lang="zh-TW"] *{font-family:"Poppins","Noto Sans TC",system-ui,sans-serif!important}
html[lang="th"] *{font-family:"Poppins","Noto Sans Thai",system-ui,sans-serif!important}
/* keep-all (for Korean) leaves Japanese/Chinese with no break points at all; let them break per character */
html[lang="ja"] *,html[lang="zh-CN"] *,html[lang="zh-TW"] *{word-break:normal!important;line-break:strict}
/* Thai tone marks collide under the tight negative tracking of the Latin headlines */
html[lang="th"] :is(h1,h2,h3){letter-spacing:0!important;line-height:1.3!important}

/* ---- scroll-in motion (fx.js). Hidden states apply only while html.fx is set, so no-JS / reduced-motion pages stay fully visible ---- */
.fx .fxh .fw{display:inline-block;opacity:0;filter:blur(16px);transform:translateY(.6em) scale(1.12);transform-origin:50% 100%;will-change:transform,opacity,filter}
.fx .fxh.in .fw{opacity:1;filter:none;transform:none;transition:opacity .42s ease calc(min(var(--i),16)*55ms),filter .5s ease calc(min(var(--i),16)*55ms),transform .7s cubic-bezier(.2,1.45,.35,1) calc(min(var(--i),16)*55ms)}
.fx .fxh.rv{opacity:1;filter:none;transform:none;transition:none}
.fx .rv:not(.fxh){opacity:0;filter:blur(14px);transform:translateY(34px) scale(.95);transition:none}
.fx .rv:not(.fxh).in{opacity:1;filter:none;transform:none;transition:opacity .45s ease var(--d,0ms),filter .55s ease var(--d,0ms),transform .75s cubic-bezier(.2,1.35,.3,1) var(--d,0ms)}
.fx .hero .stage.rv:not(.in){transform:translateY(40px) scale(.88)}
@media (max-width:820px){
  .fx .fxh .fw{filter:blur(12px);transform:translateY(.5em) scale(1.08)}
  .fx .rv:not(.fxh){transform:translateY(24px) scale(.96)}
}
@media (prefers-reduced-motion:reduce){
  .fx .fxh .fw,.fx .rv:not(.fxh){opacity:1;filter:none;transform:none;transition:none}
}

/* ---- key colour: candy gradient (pink -> lilac). Big faces and lines take the gradient; anything under 48px takes the solid --ks. Text on a face is always #0a0a0a ---- */
/* candy: pink -> lilac; black text on it stays >= 6.79:1 over the whole ramp (sRGB, checked per 1%) */
:root,[data-theme="light"]{--kg:linear-gradient(90deg,#FF5C93 0%,#B69CFF 100%);--ks:#FF5C93}
.eyebrow::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ks);margin-right:9px;vertical-align:.08em}
.hero>div:first-child::before,.ph::before{content:"";display:block;width:56px;height:8px;border-radius:4px;background:var(--kg);margin-bottom:20px}
html .sw,html .k .sw{background:var(--ks)!important}
html .sw::after,html .k .sw::after{background:#0a0a0a!important}
html .dot.kb{background:var(--ks)!important;color:#0a0a0a!important;min-width:22px;height:20px;border-radius:10px;padding:0 7px;display:inline-grid;place-items:center;font-weight:800}
.fw.kw{position:relative;isolation:isolate;color:#0a0a0a!important}
.fw.kw::before{content:"";position:absolute;top:-.07em;bottom:-.07em;left:calc(-1*var(--kl,.1em));right:calc(-1*var(--kr,.1em));background:var(--kg) no-repeat;background-size:var(--kwid,100%) 100%;background-position:calc(-1*var(--kx,0px)) 0;border-radius:var(--kbr,8px);z-index:-1;transform-origin:0 50%}
.fx .fxh .fw.kw::before{transform:scaleX(0)}
.fx .fxh.in .fw.kw::before{transform:scaleX(1);transition:transform .7s cubic-bezier(.2,1.2,.3,1) calc(min(var(--i),16)*55ms + 450ms)}
@media (prefers-reduced-motion:reduce){.fx .fxh .fw.kw::before{transform:none;transition:none}}

/* ---- app strip: no card outlines, one hairline above and below; draggable ---- */
html .app{border:0!important}
html .mq{border-top:1px solid rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.85);border-left:0;border-right:0}
html[data-theme="light"] .mq{border-top-color:rgba(10,10,10,.85);border-bottom-color:rgba(10,10,10,.85)}
.mq.mq-js{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;overscroll-behavior-x:contain}
.mq.mq-js::-webkit-scrollbar{display:none}
.mq.mq-js.drag{cursor:grabbing;user-select:none}
.mq.mq-js .mq-track{animation:none!important;transform:none!important}

/* ---- media can't be picked up or dragged out of the page (images, svg, canvas) ---- */
img,svg,canvas,video{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}

/* app-strip link buttons: real spacing between them (the grid rule had them butted together) */
html .sol{gap:12px!important;margin-top:32px}
html .sol a{margin-right:0!important}

/* home statement (two lines + key-word blocks) */
.state.st3 .sl{display:block;line-height:1.34}
.state.st3 .sl:first-child{color:#F4F4F4}
html[data-theme="light"] .state.st3 .sl:first-child{color:#0a0a0a}
.state.st3 .key{position:relative;display:inline-block;isolation:isolate;color:#0a0a0a!important;margin:0 .14em;line-height:1.1}
.state.st3 .key::before{content:"";position:absolute;inset:.02em -.14em .02em;background:var(--kg);border-radius:8px;z-index:-1;transform-origin:0 50%}
.fx .state.st3:not(.go) .sl{opacity:0;transform:translateY(.32em)}
.fx .state.st3:not(.go) .key::before{transform:scaleX(0)}
.fx .state.st3.go .sl{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.fx .state.st3.go .sl+.sl{transition-delay:1s}
.fx .state.st3.go .key::before{transform:scaleX(1);transition:transform .8s cubic-bezier(.45,.05,.25,1) .52s}
.fx .state.st3.go .sl+.sl .key::before{transition-delay:1.52s}

/* Mac download badge carries its hardware note underneath (Apple Silicon only) */
.dlc{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px}
.dlc .as{font-size:12px;line-height:1.3;color:rgba(244,244,244,.6);letter-spacing:0}
html[data-theme="light"] .dlc .as{color:rgba(10,10,10,.6)}
.stores:has(.dlc){align-items:flex-start}
.dlc .as{margin-top:-2px}
.dlc{align-items:flex-start}
.dlc .as{align-self:flex-start;text-align:left;white-space:nowrap;padding-left:2px}