/* Gym Data landing v2 «الرقم له وزن»: dark cinematic page. One CSS file, no framework.
   Page tokens: brand navy grounds, the three pastels as light. App slabs use the app's own dark tokens (GD2). */

@font-face{font-family:'GD Sans';src:url(fonts/plex-sans-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2009-2026,U+2032-2033,U+2039-203A,U+2044,U+2190-2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:'GD Sans';src:url(fonts/plex-sans-600.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2009-2026,U+2032-2033,U+2039-203A,U+2044,U+2190-2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:'GD Sans';src:url(fonts/plex-sans-700.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2009-2026,U+2032-2033,U+2039-203A,U+2044,U+2190-2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:'GD Arabic';src:url(fonts/plex-arabic-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'GD Arabic';src:url(fonts/plex-arabic-600.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'GD Arabic';src:url(fonts/plex-arabic-700.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'GD Fallback';src:local('Arial'),local('Helvetica Neue'),local('Roboto');size-adjust:101%;ascent-override:100%;descent-override:27%;line-gap-override:0%}
@font-face{font-family:'GD Fallback Arabic';src:local('Geeza Pro'),local('Tahoma'),local('Noto Sans Arabic');size-adjust:98%;ascent-override:104%;descent-override:42%;line-gap-override:0%;unicode-range:U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --bg:#0E1322;--navy:#18203A;--ink:#F3F5FB;--muted:#AEB6CF;--dim:#6E7794;
  --sky:#A1EAFB;--blush:#FFCEF3;--lav:#CABBE9;--accent:#2B3A70;
  --line:rgba(243,245,251,.12);--positive:#5CC98B;
  --enter:cubic-bezier(.22,1,.36,1);--state:cubic-bezier(.4,0,.2,1);--over:cubic-bezier(.34,1.56,.64,1);--cam:cubic-bezier(.2,.8,.2,1);
  --gutter:16px;--slabR:24px;
  --font:'GD Sans','GD Arabic','GD Fallback Arabic','GD Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#0E1322;overflow-x:clip;scroll-behavior:auto}
body{margin:0;background:#0E1322;color:var(--ink);font-family:var(--font);font-weight:500;font-size:16px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ul{margin:0}
bdi{unicode-bidi:isolate}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:12px;inset-inline-start:12px;z-index:99;width:auto;height:auto;clip:auto;background:var(--sky);color:#0E1322;padding:8px 14px;border-radius:999px;font-weight:600}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:10px}

/* ---------------- layers ---------------- */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:#0E1322}
.flat{position:fixed;inset:0;z-index:0;background:radial-gradient(120% 80% at 70% 40%,#1b2340 0%,#0E1322 60%)}
.flat svg{position:absolute;inset:0;width:100%;height:100%}
.pins{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.pins>*,.pins>.slab,.pins>.pin{position:absolute;left:0;top:0;margin:0;pointer-events:auto;will-change:transform;transform-origin:0 0}
.pins>.pin{pointer-events:none}
.pins>[data-off]{opacity:0;pointer-events:none;transition:opacity .32s var(--state)}
main{position:relative;z-index:3}
.stage{position:relative;min-height:170svh}
.stage.hero{min-height:160svh}
.stage.final{min-height:150svh}
.sticky{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;z-index:1}
.stage.on .sticky{z-index:2}
.stage.on .sticky>*{pointer-events:auto}
.sticky .copy{pointer-events:none}
.stage.on .sticky .copy :is(a,button){pointer-events:auto}
.copy{padding:0 var(--gutter);max-width:560px;opacity:0;transform:translateY(calc(14px + var(--py,0px)));transition:opacity .5s var(--enter),transform .6s var(--enter)}
.stage.on .copy{opacity:1;transform:translateY(var(--py,0px))}
.stage.on .copy{transition:opacity .5s var(--enter)}
.copy-top{margin-top:84px}
.copy-bottom{margin-top:auto;margin-bottom:max(28px,env(safe-area-inset-bottom))}
.copy-final{text-align:start}
.copy-final .h2{font-size:30px}
.final .copy-bottom{margin-bottom:max(16px,env(safe-area-inset-bottom))}
.final .facts{margin-top:12px;gap:8px;font-size:14.5px}
.final .store{margin-top:16px}
.final .cta-line{margin-top:14px;font-size:18px}
.final .counter{margin-top:10px}
.final .lang2{margin-top:12px}

/* ---------------- type ---------------- */
.eyebrow{font-size:13px;font-weight:600;color:var(--sky);letter-spacing:0;margin-bottom:10px;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--sky)}
.h1{font-size:46px;line-height:1.1;font-weight:700;letter-spacing:0;text-wrap:balance}
.h2{font-size:34px;line-height:1.15;font-weight:700;letter-spacing:0;text-wrap:balance;text-shadow:0 2px 24px rgba(14,19,34,.8)}
.sub,.line{font-size:17px;line-height:1.55;color:var(--muted);margin-top:12px;max-width:34ch;text-wrap:pretty;text-shadow:0 1px 12px rgba(14,19,34,.9)}
[lang=en] .h1{font-size:44px}
[lang=en] .h2{font-size:32px}

/* ---------------- top bar ---------------- */
.top{position:fixed;inset-inline:0;top:0;z-index:50;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);gap:10px;
  background:linear-gradient(180deg,rgba(14,19,34,.85),rgba(14,19,34,0));transition:opacity .3s var(--state)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.brand img{width:34px;height:34px;border-radius:10px}
.top-acts{display:flex;align-items:center;gap:8px}
.pill-lang{height:36px;padding-inline:14px;border-radius:999px;border:1px solid var(--line);background:rgba(24,32,58,.6);color:var(--ink);font-weight:600;font-size:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pill-store{height:36px;display:inline-flex;align-items:center;gap:7px;padding-inline:12px 14px;border-radius:999px;background:#fff;color:#0E1322;font-weight:700;font-size:14px}
.pill-store svg{width:16px;height:16px}

/* ---------------- hero ---------------- */
.hero .sticky{justify-content:flex-start}
.hero:not(.on) .hero-ui,.hero:not(.on) .hit{pointer-events:none!important}
.hero-copy{padding:76px var(--gutter) 0;opacity:0;transition:opacity .5s var(--enter)}
.stage.on .hero-copy{opacity:1}
.hero.late .hero-ui,.hero.late .hero-num{opacity:0;pointer-events:none;transition:opacity .4s var(--state)}
.hero.late .hit{pointer-events:none!important}
.hero-num{padding:14px var(--gutter) 0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;opacity:0;transform:translateY(8px);transition:opacity .5s var(--enter) .25s,transform .6s var(--enter) .25s}
.stage.on .hero-num{opacity:1;transform:none}
.hero-num .big{display:flex;align-items:baseline;gap:8px;font-size:64px;line-height:1;font-weight:700;letter-spacing:-.01em}
.hero-num .big small{font-size:18px;font-weight:600;color:var(--muted)}
.hero-num .math{font-size:13px;color:var(--muted);direction:ltr;text-align:start;min-height:20px;font-variant-numeric:tabular-nums}
[dir=rtl] .hero-num .math{text-align:right}
.hero-num .reps{display:inline-flex;align-items:baseline;gap:6px;margin-top:6px;font-size:28px;font-weight:700;color:var(--sky);line-height:1}
.hero-num .reps .x{font-size:20px;color:var(--muted)}
.hero-num .reps small{font-size:14px;font-weight:600;color:var(--muted)}
.hit{position:absolute;inset:40% 0 30% 0;pointer-events:none}
.hit.live{pointer-events:auto;touch-action:none;cursor:grab}
.hit.drag{cursor:grabbing}
.hero-ui{margin-top:auto;padding:0 var(--gutter) max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--enter) .4s,transform .6s var(--enter) .4s}
.stage.on .hero-ui{opacity:1;transform:none}
.hint{font-size:14px;color:var(--muted);min-height:22px;display:flex;align-items:center;gap:8px}
.hint b{color:var(--ink);font-weight:600}
.picker{display:flex;align-items:center;gap:8px}
.plate-btn{position:relative;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 42% 38%,#2b334d 0%,#171d31 55%,#0f1424 100%);box-shadow:inset 0 0 0 2px rgba(243,245,251,.22),inset 0 0 0 8px rgba(14,19,34,.6),inset 0 0 0 9px rgba(243,245,251,.08),0 10px 24px rgba(0,0,0,.4);display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--ink);transition:transform .14s var(--state),box-shadow .2s var(--state);font-variant-numeric:tabular-nums}
.plate-btn::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#0E1322;box-shadow:inset 0 0 0 1.5px rgba(243,245,251,.3);bottom:7px}
.plate-btn span{margin-bottom:8px}
.plate-btn:active{transform:scale(.92)}
.plate-btn[data-kg="20"]{box-shadow:inset 0 0 0 2px var(--sky),inset 0 0 0 8px rgba(14,19,34,.6),inset 0 0 0 9px rgba(161,234,251,.25),0 10px 24px rgba(0,0,0,.4)}
.plate-btn[data-kg="10"]{box-shadow:inset 0 0 0 2px var(--blush),inset 0 0 0 8px rgba(14,19,34,.6),inset 0 0 0 9px rgba(255,206,243,.2),0 10px 24px rgba(0,0,0,.4)}
.plate-btn[data-kg="5"]{box-shadow:inset 0 0 0 2px var(--lav),inset 0 0 0 8px rgba(14,19,34,.6),inset 0 0 0 9px rgba(202,187,233,.2),0 10px 24px rgba(0,0,0,.4)}
.plate-btn.small{width:46px;height:46px;font-size:12px}
.plate-btn.small::after{width:9px;height:9px;bottom:6px}
.plate-btn.nudge{animation:nudge 1.1s var(--state) 2}
@keyframes nudge{0%,100%{transform:none}30%{transform:translateY(-6px)}60%{transform:translateY(0) scale(1.04)}}
.plate-btn:disabled{opacity:.35;cursor:default}
.undo{width:40px;height:40px;border-radius:50%;background:rgba(243,245,251,.08);color:var(--muted);display:grid;place-items:center;margin-inline-start:auto}
.undo svg{width:18px;height:18px}
.acts{display:flex;align-items:center;gap:8px;min-height:52px;flex-wrap:wrap}
.btn-rep{min-height:52px;padding-inline:18px;border-radius:16px;background:rgba(161,234,251,.14);color:var(--sky);font-weight:700;font-size:17px;display:inline-flex;align-items:center;gap:8px;box-shadow:inset 0 0 0 1px rgba(161,234,251,.35)}
.btn-rep svg{width:18px;height:18px}
.btn-rep:active{transform:scale(.97)}
.btn-done{min-height:52px;padding-inline:22px;border-radius:16px;background:var(--sky);color:#0E1322;font-weight:700;font-size:17px;display:inline-flex;align-items:center;gap:8px;flex:1;justify-content:center;animation:popIn .4s var(--over)}
.btn-done svg{width:18px;height:18px}
@keyframes popIn{from{transform:scale(.9);opacity:0}}
.eff{display:flex;align-items:center;gap:8px;flex:1;animation:popIn .35s var(--over)}
.eff .lbl{font-size:14px;color:var(--muted);margin-inline-end:4px;white-space:nowrap}
.eff button{min-width:50px;height:50px;border-radius:14px;background:rgba(243,245,251,.08);box-shadow:inset 0 0 0 1px var(--line);font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.eff button:hover{background:rgba(243,245,251,.14)}
.eff button:active{transform:scale(.95)}
.eff .mean{font-size:13px;color:var(--muted);width:100%}
.saved-line{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:15px;font-weight:600;animation:popIn .4s var(--over)}
.saved-line .chev{color:var(--sky);animation:bob 1.6s var(--state) infinite}
@keyframes bob{50%{transform:translateY(5px)}}
.saved-line svg{width:18px;height:18px}

/* ---------------- pinned labels ---------------- */
.pin{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:rgba(23,29,49,.92);color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 0 1px rgba(161,234,251,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .3s var(--state)}
.pin .dot{width:8px;height:8px;border-radius:50%;background:var(--sky);flex:none}
.pin .dot.blush{background:var(--blush)}
.pin .dot.lav{background:var(--lav)}
.pin small{color:var(--muted);font-weight:500}
.pin.big{font-size:15px;padding:10px 14px;border-radius:16px;white-space:normal;max-width:min(calc(100vw - 32px),420px);line-height:1.4}
.pin.saved .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.pin.saved .tx b{font-size:16px;font-weight:700;white-space:nowrap}
.pin.saved .tx small{font-size:12.5px;color:var(--muted);font-weight:600}
.pin.saved .sep{color:var(--muted);font-weight:500}
.pin .tx bdi{unicode-bidi:isolate;display:inline-block}
.pin.ghost{background:rgba(14,19,34,.55);box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 1px rgba(161,234,251,.3)}
.pin.saved{box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px rgba(92,201,139,.45)}
.pin .ck{width:22px;height:22px;border-radius:50%;background:var(--positive);color:#fff;display:grid;place-items:center;flex:none}
.pin .ck svg{width:12px;height:12px}
.pin .ck.draw path{stroke-dasharray:20;stroke-dashoffset:20;animation:draw .22s var(--state) .12s forwards}
.pin .ck.draw{animation:pop .36s var(--over)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(.3)}}
.pin .best{background:rgba(255,206,243,.18);color:var(--blush);border-radius:999px;padding:2px 9px;font-size:12px}
.pin.lead{flex-direction:column;align-items:flex-start;gap:2px;white-space:normal;min-width:120px}
.pin.lead b{font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.pin.lead small{font-size:12.5px}
.pin.clock{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr;padding:10px 20px;border-radius:18px;background:rgba(14,19,34,.6);box-shadow:0 0 0 1px rgba(202,187,233,.35),0 0 60px rgba(202,187,233,.25);color:#fff;gap:12px}
.pin.clock .rec{width:10px;height:10px;border-radius:50%;background:#FF8A80;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.pin.lbl{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--muted);font-size:12.5px;padding:0}
.pin.lbl b{color:var(--ink);font-size:16px}
.pins .mapped{transform-origin:0 0;left:0;top:0;backface-visibility:hidden}
.pins .float{transform-origin:0 0}

/* ---------------- app slabs (GD2 dark tokens) ---------------- */
.slab{
  --a-bg:#0E1322;--a-card:#171D31;--a-raised:#20283F;--a-line:#2A3250;--a-softLine:#242B45;--a-field:#4A5272;
  --a-ink:#F3F5FB;--a-muted:#A3AAC0;--a-accent:#A1EAFB;--a-skySoft:#1B2C3C;--a-primary:#A1EAFB;--a-onPrimary:#0E1322;
  --a-positive:#5CC98B;--a-positiveSoft:#12291F;--a-warning:#F0B45B;--a-warningSoft:#2B2213;--a-blush:#FFCEF3;--a-sky:#A1EAFB;--a-lav:#CABBE9;
  --a-track:#24324A;--a-progress:#A1EAFB;
  position:relative;background:var(--a-bg);color:var(--a-ink);border-radius:var(--slabR);border:1px solid #2A3250;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(161,234,251,.08);padding:16px 14px;isolation:isolate;font-size:16px;line-height:1.5;text-align:start}
.slab.screen{border-radius:0;border:0;box-shadow:none;padding:0;background:#0E1322;overflow:hidden}
.slab.compact{font-size:15px;padding:12px}
.slab.compact .sw{margin:8px 0 10px}
.slab.compact .timed{margin-top:8px}
.a-row{display:flex;align-items:center;gap:8px}
.a-grow{flex:1;min-width:0}
.a-muted{color:var(--a-muted)}
.a-cap{font-size:13px;color:var(--a-muted);line-height:1.45}
.a-title{font-size:22px;font-weight:700;line-height:1.25}
.a-h{font-size:17px;font-weight:700}
.a-big{font-size:36px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
.a-big small{font-size:17px;font-weight:500;color:var(--a-muted);margin-inline-start:6px}
.a-card{background:var(--a-card);border-radius:20px;padding:12px}
.a-circ{width:36px;height:36px;border-radius:50%;background:var(--a-skySoft);color:var(--a-accent);display:inline-grid;place-items:center;flex:none}
.a-circ svg{width:18px;height:18px}
[dir=rtl] .flipx svg,[dir=rtl] svg.flipx{transform:scaleX(-1)}
.a-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:14px;background:var(--a-primary);color:var(--a-onPrimary);font-size:17px;font-weight:600;padding-inline:14px;transition:transform .12s var(--state),background-color .18s var(--state)}
.a-btn svg{width:19px;height:19px}
.a-btn:active:not(:disabled){transform:scale(.985)}
.a-btn:disabled{background:var(--a-raised);color:var(--a-muted);box-shadow:inset 0 0 0 1px var(--a-line);cursor:default}
.a-btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:14px;background:var(--a-skySoft);color:var(--a-accent);font-weight:600;font-size:16px;padding-inline:14px}
.a-quiet{color:var(--a-accent);font-weight:600;font-size:16px;min-height:44px;display:inline-flex;align-items:center;gap:6px;padding-inline:4px}
.a-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;background:var(--a-raised);color:var(--a-muted);white-space:nowrap}
.a-best{background:var(--a-warningSoft);color:var(--a-warning)}
.a-seg{display:flex;background:var(--a-card);border-radius:12px;padding:3px;gap:2px;box-shadow:inset 0 0 0 1px var(--a-line)}
.a-seg>*{flex:1;min-height:38px;border-radius:9px;font-size:15px;font-weight:600;color:var(--a-muted);display:flex;align-items:center;justify-content:center;gap:6px;padding-inline:10px;white-space:nowrap}
.a-seg>[aria-pressed=true],.a-seg>[aria-selected=true],.a-seg>.on{background:var(--a-raised);color:var(--a-ink);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.a-check{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center}
.a-check.done{background:var(--a-positive);color:#fff}
.a-check svg{width:14px;height:14px}
.a-check.draw path{stroke-dasharray:20;stroke-dashoffset:20;animation:draw .18s var(--state) .1s forwards}
.a-check.draw{animation:pop .32s var(--over)}
.badge{width:28px;height:28px;border-radius:50%;background:#F3F5FB;color:#0E1322;display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}

/* logger pieces */
.lg-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.lg-bar .lg-t{flex:1;text-align:center;font-size:14px;color:var(--a-muted);font-weight:600}
.sets{background:var(--a-card);border-radius:20px;padding:10px 10px 6px}
.editor{background:var(--a-bg);border-radius:18px;box-shadow:inset 0 0 0 1.5px #A1EAFB;padding:12px;margin:8px 0}
.ed-head{display:flex;align-items:center;gap:8px}
.ed-type{min-height:44px;padding-inline:14px;border-radius:14px;background:var(--a-skySoft);color:var(--a-accent);font-weight:600;font-size:16px;display:grid;place-items:center}
.unit{margin-inline-start:auto;display:flex;background:var(--a-card);border-radius:12px;padding:3px;box-shadow:inset 0 0 0 1px var(--a-line)}
.unit button{min-height:38px;min-width:42px;border-radius:9px;font-size:15px;font-weight:600;color:var(--a-muted);padding-inline:8px}
.unit button[aria-pressed=true]{background:var(--a-raised);color:var(--a-ink)}
.ed-minus{width:44px;height:44px;border-radius:50%;background:var(--a-warningSoft);color:var(--a-warning);display:grid;place-items:center;flex:none}
.ed-minus svg{width:20px;height:20px}
.use{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:10px;padding:12px 14px;border-radius:16px;background:var(--a-skySoft);color:var(--a-accent);text-align:start}
.use svg{width:24px;height:24px;flex:none}
.use .u1{display:block;font-size:16px;font-weight:600;line-height:1.35}
.use .u2{display:block;font-size:14px;font-weight:600;line-height:1.4}
.use .u3{display:block;font-size:13px;color:var(--a-muted);line-height:1.4}
.fields{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:8px;margin-top:10px}
.fields label{display:block;font-size:14px;font-weight:600;margin-bottom:5px;white-space:nowrap}
.well{width:100%;height:54px;border-radius:14px;border:1.5px solid var(--a-field);background:var(--a-raised);text-align:center;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--a-ink);display:grid;place-items:center}
.well.ghost{opacity:.35}
.prev{display:grid;grid-template-columns:22px 1fr auto;gap:2px 10px;align-items:start;padding:4px 0 2px}
.prev svg{width:20px;height:20px;color:var(--a-accent);margin-top:3px}
.prev .p1{font-size:16px;font-weight:600;color:var(--a-accent)}
.prev .p2{grid-column:2/4;font-size:14px;font-weight:500;color:var(--a-ink)}
.prev .pd{font-size:13px;color:var(--a-muted);white-space:nowrap}
.target{font-size:14px;color:var(--a-muted);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin:4px 0 12px}
.target b{color:var(--a-ink);font-size:16px;font-weight:600}
.sw{display:flex;background:var(--a-card);border-radius:14px;padding:4px;gap:4px;margin:12px 0 14px}
.sw button{flex:1;min-height:44px;border-radius:11px;font-size:15px;font-weight:600;color:var(--a-muted);display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding-inline:8px}
.sw button[aria-pressed=true]{background:var(--a-raised);color:var(--a-ink)}
.sw .nx{font-size:12px;color:var(--a-accent);background:var(--a-skySoft);border-radius:999px;padding:2px 8px}
.timed{padding:14px;margin-top:12px;background:var(--a-card);border-radius:20px}
.timed .th{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.timed .th b{font-size:17px;font-weight:700}
.timed .fields{grid-template-columns:1fr 1fr;margin-top:6px}
.clock{height:60px;border-radius:14px;border:1.5px solid var(--a-field);background:var(--a-raised);display:flex;align-items:center;justify-content:center;gap:8px;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
.clock.run{border-color:var(--a-accent);box-shadow:0 0 0 1px var(--a-accent)}
.clock .rec{width:9px;height:9px;border-radius:50%;background:#FF8A80}
.clock .pz{width:16px;height:16px;color:var(--a-muted)}
.timed .acts{display:flex;align-items:center;gap:10px;margin-top:12px;min-height:0}
.timed .acts .a-btn{flex:1}
.timed .saved{display:flex;align-items:center;gap:10px;margin-top:12px;font-weight:600}

/* Space board */
.sp-title{font-size:26px;font-weight:700;margin:10px 0 4px}
.days{display:flex;align-items:center;gap:8px;margin:10px 0 12px;overflow-x:auto;scrollbar-width:none;padding-block:4px}
.days::-webkit-scrollbar{display:none}
.days .dl{font-size:14px;color:var(--a-muted);white-space:nowrap;margin-inline-end:4px}
.days button{min-width:42px;height:42px;border-radius:999px;background:var(--a-card);font-weight:600;font-size:16px;padding-inline:12px;flex:none;transition:background-color .2s var(--state),color .2s var(--state)}
.days button[aria-pressed=true]{background:#F3F5FB;color:#0E1322}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-14px;padding:4px 14px 12px;scroll-padding-inline:14px;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.cover{position:relative;flex:0 0 272px;height:170px;border-radius:22px;overflow:hidden;scroll-snap-align:start;background:#1b2033;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.35);transition:opacity .24s var(--state),transform .24s var(--state)}
.cover.out{opacity:0;transform:scale(.96)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,19,34,.05) 0%,rgba(14,19,34,.18) 40%,rgba(14,19,34,.8) 100%);z-index:1}
.cover>*:not(img){position:relative;z-index:2}
.cover .k{position:absolute;top:12px;inset-inline-start:12px;display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.cover .dl-btn{position:absolute;top:10px;inset-inline-end:10px;width:42px;height:42px;border-radius:50%;background:#fff;color:#18203A;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.cover .dl-btn svg{width:22px;height:22px}
.cover .bt{position:absolute;inset-inline:14px;bottom:12px;display:flex;align-items:flex-end;gap:10px}
.cover .bt .tx{flex:1;min-width:0}
.cover h4{margin:0;font-size:18px;font-weight:700;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.cover .ln{font-size:13px;margin-top:4px;opacity:.95}
.cover .vp{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.cover .vp span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);background:rgba(14,19,34,.25)}
.wk{text-align:center;flex:none}
.wk small{display:block;font-size:11px;opacity:.85;margin-bottom:4px}
.wk span{display:flex;gap:3px}
.wk i{width:4px;height:14px;border-radius:2px;background:#fff}
.wk i.off{background:rgba(255,255,255,.35)}
.cover.imp .dl-btn{background:var(--a-positive);color:#fff}
.diet{flex:0 0 240px;scroll-snap-align:start;border-radius:20px;background:var(--a-card);box-shadow:inset 0 0 0 1px var(--a-line);padding:14px;position:relative}
.diet .dk{font-size:12px;color:var(--a-muted)}
.diet .dc{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.diet .dc small{font-size:14px;color:var(--a-muted);font-weight:500;margin-inline-start:4px}
.diet .mb{display:flex;height:8px;border-radius:99px;overflow:hidden;gap:2px;margin:12px 0 10px}
.diet .mb i{display:block;border-radius:99px}
.diet .ml{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--a-muted)}
.diet .ml span{display:inline-flex;align-items:center;gap:5px}
.diet .dl-btn{position:absolute;top:12px;inset-inline-end:12px;width:40px;height:40px;border-radius:50%;background:var(--a-skySoft);color:var(--a-accent);display:grid;place-items:center}
.diet .dl-btn svg{width:20px;height:20px}
.diet.imp .dl-btn{background:var(--a-positive);color:#fff}
.board{overflow:hidden}
.scrim{position:absolute;inset:0;z-index:20;background:rgba(14,19,34,.5);border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .32s var(--state)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;inset-inline:0;bottom:0;z-index:21;background:var(--a-card);border-radius:28px 28px 0 0;padding:10px 16px 16px;transform:translateY(105%);transition:transform .32s var(--enter);box-shadow:0 -10px 30px rgba(0,0,0,.4);max-height:100%;overflow:auto}
.sheet.on{transform:none}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:var(--a-line);margin:0 auto 10px}
.sh-h{display:flex;align-items:center;gap:10px;min-height:40px}
.sh-h b{flex:1;font-size:17px}
.sh-x{width:32px;height:32px;border-radius:50%;background:var(--a-raised);color:var(--a-muted);display:grid;place-items:center}
.sh-x svg{width:14px;height:14px}
.sh-item{display:flex;align-items:center;gap:12px;background:var(--a-raised);border-radius:16px;padding:10px;margin-top:8px}
.sh-item img{width:64px;height:40px;border-radius:9px;object-fit:cover;flex:none}
.sh-item .ti{font-weight:700;font-size:16px;line-height:1.3}
.sh-cap{font-size:13px;font-weight:600;color:var(--a-muted);margin:14px 4px 6px}
.opts{display:grid;gap:8px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:14px;background:var(--a-raised);text-align:start;box-shadow:inset 0 0 0 1.5px transparent;transition:background-color .18s var(--state),box-shadow .18s var(--state)}
.opt[aria-checked=true]{background:var(--a-bg);box-shadow:inset 0 0 0 1.5px var(--a-accent)}
.opt .ot{flex:1;min-width:0}
.opt .ot b{display:block;font-size:16px;font-weight:700}
.opt .ot small{display:block;font-size:13px;color:var(--a-muted)}
.radio{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--a-field);display:grid;place-items:center;flex:none;color:#0E1322}
.radio svg{width:12px;height:12px;opacity:0}
.opt[aria-checked=true] .radio{background:var(--a-accent);box-shadow:none}
.opt[aria-checked=true] .radio svg{opacity:1}
.lmark{width:30px;height:30px;border-radius:50%;background:var(--a-skySoft);color:var(--a-accent);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.sh-go{margin-top:14px}
.sh-hint{text-align:center;font-size:13px;color:var(--a-muted);margin-top:8px}
.done-mark{width:56px;height:56px;border-radius:50%;background:var(--a-positiveSoft);color:var(--a-positive);display:grid;place-items:center;margin:8px auto 10px}
.done-mark svg{width:26px;height:26px}
.sh-done{text-align:center}
.sh-done b{display:block;font-size:20px}
.sh-done .di{font-weight:700;margin-top:6px}
.sh-done p{color:var(--a-muted);font-size:15px;margin-top:6px}
.sh-acts{display:grid;gap:4px;margin-top:14px}
.sh-acts .a-quiet{justify-content:center}
.todaycard{margin-top:12px;padding:14px}
.todaycard .tc-h{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--a-muted)}
.todaycard .tc-t{font-size:22px;font-weight:700;margin-top:6px}
.todaycard .tc-s{font-size:15px;color:var(--a-muted)}
.todaycard .tc-d{display:flex;gap:8px;margin-top:12px}
.todaycard .tc-d span{width:34px;height:34px;border-radius:50%;background:var(--a-blush);opacity:.45;display:grid;place-items:center;font-weight:600;font-size:15px;color:#0E1322}
.todaycard .tc-d span.on{background:#F3F5FB;opacity:1}

/* food */
.f-h{display:flex;align-items:center;gap:8px}
.f-h .a-h{flex:1}
.goal{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding-inline:12px;border-radius:999px;background:var(--a-skySoft);color:var(--a-accent);font-size:14px;font-weight:600;white-space:nowrap}
.goal svg{width:14px;height:14px}
.cbar{position:relative;height:10px;border-radius:99px;background:var(--a-track);margin:34px 0 14px;overflow:visible}
.cbar .z,.cbar .c{position:absolute;inset-block:0;border-radius:99px}
.cbar .z{background:var(--a-lav);opacity:.45}
.cbar .c{background:var(--a-sky);inset-inline-start:0;transform-origin:var(--o,right);transform:scaleX(var(--p,.5));width:100%;transition:transform .32s var(--enter)}
[dir=ltr] .cbar .c{--o:left}
.pin{}
.cbar .pin,.mb .pin{position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;margin-inline-start:-9px;inset-inline-start:var(--x);border-radius:50%;background:var(--a-blush);box-shadow:0 0 0 1.5px #F3F5FB;transition:inset-inline-start .32s var(--state);padding:0;display:block;font-size:0}
.cbar .pin b,.mb .pin b{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:600;line-height:1;color:var(--a-ink)}
.tg{display:grid;gap:2px}
.tg button{display:flex;align-items:center;gap:6px;text-align:start;min-height:34px;font-size:15px;color:var(--a-muted);font-variant-numeric:tabular-nums;border-radius:10px;padding-inline:2px}
.tg button .ck{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--a-line);display:grid;place-items:center;flex:none;color:var(--a-positive)}
.tg button .ck svg{width:11px;height:11px;opacity:0}
.tg button[aria-checked=true]{color:var(--a-ink);font-weight:700}
.tg button[aria-checked=true] .ck{box-shadow:inset 0 0 0 1.5px var(--a-positive)}
.tg button[aria-checked=true] .ck svg{opacity:1}
.fr-items{padding:4px 14px}
.fr-it{padding:10px 0}
.fr-it+.fr-it{border-top:1px solid var(--a-line)}
.fr-it .n{font-size:16px;font-weight:700}
.fr-it .s{font-size:14px;font-weight:600;color:var(--a-accent);margin-top:2px}
.fr-it .m{font-size:13px;color:var(--a-muted);margin-top:4px;line-height:1.6}
.fr-it .m b{font-size:14px;color:var(--a-ink);font-weight:700}
.fr-it.ok .n::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--a-positive);margin-inline-start:8px;vertical-align:middle}
.note{font-size:12.5px;color:var(--a-muted);margin:10px 2px;line-height:1.5}
.toast{display:flex;align-items:center;gap:8px;justify-content:center;font-size:14px;font-weight:600;color:var(--a-positive);min-height:52px;border-radius:14px;background:var(--a-positiveSoft)}
.toast svg{width:16px;height:16px}

/* body + supplements */
.b-h{display:flex;align-items:center;gap:12px}
.b-ic{width:40px;height:40px;border-radius:50%;background:#F3F5FB;color:#0E1322;display:grid;place-items:center;flex:none}
.b-ic svg{width:20px;height:20px}
.b-v{display:flex;align-items:flex-end;justify-content:space-between;margin-top:10px;gap:10px}
.b-ch{text-align:end}
.b-ch small{display:block;font-size:13px;color:var(--a-muted)}
.b-ch b{font-size:22px;font-weight:700;color:var(--a-muted);font-variant-numeric:tabular-nums;direction:ltr;display:inline-block}
.periods{margin-top:12px}
.periods button{font-size:14px}
.chart{direction:ltr;margin:14px -2px 0;position:relative}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--a-line);stroke-width:1}
.chart .ln{fill:none;stroke:#F3F5FB;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .pt{fill:var(--a-sky);stroke:#0E1322;stroke-width:1.6}
.chart .pt.last{fill:#F3F5FB}
.chart .lbl{font-size:12.5px;fill:var(--a-muted);font-weight:600;font-family:var(--font)}
.chart .tick{stroke:var(--a-muted);stroke-width:1.2}
.chart .rng{fill:var(--a-lav);opacity:.22}
.chart .avg{stroke:var(--a-muted);stroke-width:1.2;stroke-dasharray:4 4;fill:none}
.b-stats{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--a-muted);margin-top:8px}
.b-stats b{font-size:15px;color:var(--a-ink);font-weight:700}
.mrow2{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--a-line)}
.mrow2 .ic{width:36px;height:36px;border-radius:50%;background:var(--a-skySoft);color:var(--a-accent);display:grid;place-items:center}
.mrow2 .ic svg{width:18px;height:18px}
.mrow2 .nm{font-size:15px;font-weight:600;line-height:1.35}
.mrow2 .vv{text-align:end;line-height:1.2}
.mrow2 .vv b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.mrow2 .vv small{display:block;font-size:12.5px;color:var(--a-muted);direction:ltr}
.supp{display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px}
.supp .ic{width:40px;height:40px;border-radius:50%;background:var(--a-skySoft);color:var(--a-accent);display:grid;place-items:center;flex:none}
.supp .ic svg{width:20px;height:20px}
.supp b{display:block;font-size:16px}
.supp small{display:block;font-size:13px;color:var(--a-muted);line-height:1.45}
.supp.locked{width:100%;text-align:start}
.supp.locked .ic{background:#F3F5FB;color:#0E1322}
.supp.locked .ic.wob{animation:wob .5s var(--state)}
@keyframes wob{20%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}}

/* report */
.paper{background:#fff;color:#18203A;border-radius:14px;padding:14px 14px 12px;font-size:11px;line-height:1.45;box-shadow:0 24px 50px rgba(0,0,0,.5)}
.paper .pp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1.5px solid #18203A;padding-bottom:6px;margin-bottom:6px}
.paper .pp-h b{font-size:14px}
.paper .pp-m{color:#5B627A;font-size:10.5px}
.paper .pp-s{font-weight:700;font-size:11.5px;margin:8px 0 4px}
.paper table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.paper th{font-weight:600;color:#5B627A;text-align:start;font-size:10px;padding:3px 4px;border-bottom:1px solid #E3E6EF}
.paper td{padding:4px;border-bottom:1px solid #ECEEF5;white-space:nowrap}
.paper td.ex{white-space:normal}
.paper tr.mine td{background:#DDF7FD}
.paper.excel .pp-h{border-bottom:0}
.paper.excel table{border:1px solid #CFD5E2}
.paper.excel th,.paper.excel td{border:1px solid #CFD5E2;text-align:center}
.paper.excel th{background:#F4F5FA}
.paper.excel .colh th{background:#ECEEF5;color:#8A90A8;font-size:9px}
.paper.word .pp-h{border-bottom:0;justify-content:center}
.paper .wl{height:5px;border-radius:3px;background:#ECEEF5;margin:5px 0}
.paper .fmt{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:10px;color:#fff;border-radius:6px;padding:2px 6px}
.radios{padding:4px 12px}
.radios button{display:flex;align-items:center;gap:12px;width:100%;text-align:start;padding:10px 0;min-height:52px}
.radios button+button{border-top:1px solid var(--a-line)}
.radios .rc{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--a-accent);display:grid;place-items:center;flex:none;color:#0E1322}
.radios .rc svg{width:12px;height:12px;opacity:0}
.radios button[aria-checked=true] .rc{background:var(--a-accent);box-shadow:none}
.radios button[aria-checked=true] .rc svg{opacity:1}
.radios b{display:block;font-size:16px}
.radios small{display:block;font-size:13px;color:var(--a-muted)}

/* phone screen content */
.scr{position:absolute;inset:0;padding:14px 12px;overflow:hidden;opacity:0;transition:opacity .4s var(--state);display:flex;flex-direction:column;gap:10px}
.scr.on{opacity:1}
.scr .sb{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--a-ink);padding:2px 8px 0;font-variant-numeric:tabular-nums}
.scr .sb span:last-child{display:inline-flex;gap:4px;align-items:center}
.scr .sb i{display:inline-block;width:14px;height:8px;border-radius:2px;background:var(--a-ink)}
.lockscr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;height:100%}
.lockscr .lk{width:56px;height:56px;border-radius:50%;background:rgba(161,234,251,.15);color:var(--sky);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(161,234,251,.4),0 0 50px rgba(161,234,251,.35)}
.lockscr .lk svg{width:24px;height:24px}
.lockscr p{font-size:15px;font-weight:700;color:var(--ink);text-wrap:balance;padding:0 10px}
.chip5{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:var(--a-skySoft);color:var(--a-accent);font-weight:600;font-size:14.5px;white-space:nowrap}
.chip5 .th-ic{width:26px;height:26px;border-radius:50%;background:var(--positive);color:#fff;display:grid;place-items:center;flex:none}
.chip5 .th-ic svg{width:14px;height:14px}
.chip5.last .th-ic{background:rgba(161,234,251,.2);color:var(--sky)}

/* ---------------- final + footer ---------------- */
.facts{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;font-size:15px;color:var(--muted);max-width:40ch}
.facts li{display:grid;grid-template-columns:20px 1fr;gap:10px;line-height:1.5}
.facts li::before{content:"";width:20px;height:20px;border-radius:50%;background:rgba(92,201,139,.18);box-shadow:inset 0 0 0 1.5px var(--positive);margin-top:3px}
.store{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn-store{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:8px 20px 8px 16px;border-radius:16px;background:#fff;color:#0E1322;box-shadow:0 20px 50px rgba(161,234,251,.18)}
[dir=rtl] .btn-store{padding:8px 16px 8px 20px}
.btn-store svg{width:24px;height:24px}
.btn-store .tx small,.soon .tx small{display:block;font-size:11px;font-weight:600;opacity:.75;line-height:1.1}
.btn-store .tx b,.soon .tx b{display:block;font-size:18px;line-height:1.15;font-weight:700}
.soon{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:8px 16px;border-radius:16px;border:1px dashed var(--line);color:var(--muted);cursor:default}
.soon svg{width:22px;height:22px}
a.soon{cursor:pointer;border-style:solid;color:var(--ink)}
.cta-line{margin-top:22px;font-size:20px;font-weight:700;color:var(--ink)}
.counter{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:7px 8px 7px 14px;border-radius:999px;background:rgba(243,245,251,.06);border:1px solid var(--line);font-size:13px;color:var(--muted)}
[dir=rtl] .counter{padding:7px 14px 7px 8px}
.counter b{min-width:28px;height:28px;padding-inline:8px;border-radius:999px;background:rgba(92,201,139,.18);color:var(--positive);display:grid;place-items:center;font-size:14px;font-variant-numeric:tabular-nums}
.counter.warn b{background:rgba(240,180,91,.2);color:#F0B45B}
.lang2{margin-top:18px;color:var(--sky);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:4px;display:block}
footer{position:relative;z-index:3;background:#0A0E1B;color:var(--muted);padding:40px var(--gutter) 34px}
.foot{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto}
.foot nav{display:flex;gap:22px;font-weight:600;color:var(--ink)}
.foot nav a:hover{text-decoration:underline}
.med{font-size:13px}
.credit{margin-top:28px;display:flex;justify-content:center}
.credit a{direction:ltr;display:inline-flex;align-items:center;gap:12px;padding:7px 7px 7px 16px;border-radius:999px;background:#18203A;border:1px solid rgba(221,230,255,.14);color:#C9D3F0;font-family:'GD Sans',system-ui,sans-serif;font-size:14px;font-weight:600;transition:transform .2s var(--state),background-color .2s var(--state)}
.credit a b{color:#fff;font-weight:700;letter-spacing:.04em}
.credit a img{width:30px;height:30px;border-radius:9px;transition:transform .35s var(--over)}
.credit a:hover{background:#223058;transform:translateY(-2px)}
.credit a:hover img{transform:rotate(-10deg) scale(1.08)}

/* ---------------- desktop ---------------- */
@media (min-width:960px){
  :root{--gutter:48px}
  .top{height:72px;padding:0 48px}
  .brand{font-size:19px}
  .h1{font-size:92px;line-height:1.02}
  [lang=en] .h1{font-size:84px}
  .h2{font-size:60px}
  [lang=en] .h2{font-size:56px}
  .sub,.line{font-size:20px;margin-top:18px}
  .copy{max-width:600px}
  .copy-top{margin-top:120px}
  .copy-bottom{margin-bottom:72px}
  .hero-copy{padding-top:118px;max-width:620px}
  .hero-num{position:absolute;inset-inline-end:48px;top:124px;align-items:flex-end;text-align:end}
  .hero-num .big{font-size:96px}
  .hero-num .reps{font-size:36px}
  .hit{inset:30% 0 24% 36%}
  [dir=rtl] .hit{inset:30% 36% 24% 0}
  .hero-ui{padding-bottom:40px;max-width:620px}
  .plate-btn{width:64px;height:64px;font-size:15px}
  .plate-btn.small{width:52px;height:52px}
  .copy-final{padding-top:120px}
  .stage{min-height:190svh}
  .stage.hero{min-height:170svh}
  .cover{flex-basis:300px;height:188px}
}
@media (max-width:359px){.h1{font-size:40px}.hero-num .big{font-size:54px}.plate-btn{width:50px;height:50px}}

/* ---------------- no WebGL: the page flows, slabs sit under their copy ---------------- */
.nogl .stage,.nogl .stage.hero,.nogl .stage.final{min-height:0}
.nogl .sticky{position:relative;height:auto;min-height:0;padding:72px 0 56px}
.nogl .stage.hero .sticky{min-height:100svh;padding:0}
.nogl .copy,.nogl .hero-num,.nogl .hero-ui{opacity:1;transform:none}
.nogl .copy-top,.nogl .copy-bottom{margin:0}
.nogl .flat{transition:opacity .6s var(--state)}
.nogl .slab.screen{position:relative;height:560px;max-width:312px;border-radius:24px;overflow:hidden}
.nogl .slab.screen .scr{opacity:1;position:absolute}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .copy,.hero-num,.hero-ui{opacity:1;transform:none}
}