@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/oswald-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/oswald-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2212,U+FFFD;}

:root{
    --ground:#F0F2F4;
    --surface:#FFFFFF;
    --sunk:#E5E9ED;
    --ink:#0C1116;
    --ink-2:#3D4A56;
    --steel:#61748A;
    --line:#C3CCD4;
    --amber:#9A5205;
    --amber-bright:#B8630A;
    --amber-on:#FFFFFF;
    --ring-track:#D3DAE1;
    --scene-sky-1:#FFE3A3;
    --scene-sky-2:#F5C98B;
    --scene-far:#B9A78F;
    --scene-mid:#8A7761;
    --scene-near:#5E4E3D;
    --scene-fig:#2E241B;
    --scene-op:.30;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0A0E13;
      --surface:#111820;
      --sunk:#0D141B;
      --ink:#E8EEF3;
      --ink-2:#9BAAB8;
      --steel:#7C8FA1;
      --line:#22303C;
      --amber:#FF9E2C;
      --amber-bright:#FFBC5C;
      --amber-on:#0A0E13;
      --ring-track:#1D2833;
      --scene-sky-1:#3A2A1E;
      --scene-sky-2:#141A22;
      --scene-far:#1B2733;
      --scene-mid:#16202A;
      --scene-near:#101820;
      --scene-fig:#05080B;
      --scene-op:.55;
    }
  }
  :root[data-theme="dark"]{
    --ground:#0A0E13;
    --surface:#111820;
    --sunk:#0D141B;
    --ink:#E8EEF3;
    --ink-2:#9BAAB8;
    --steel:#7C8FA1;
    --line:#22303C;
    --amber:#FF9E2C;
    --amber-bright:#FFBC5C;
    --amber-on:#0A0E13;
    --ring-track:#1D2833;
    --scene-sky-1:#3A2A1E;
    --scene-sky-2:#141A22;
    --scene-far:#1B2733;
    --scene-mid:#16202A;
    --scene-near:#101820;
    --scene-fig:#05080B;
    --scene-op:.55;
  }

  :root{
    --ground:#F0F2F4;
    --surface:#FFFFFF;
    --sunk:#E5E9ED;
    --ink:#0C1116;
    --ink-2:#3D4A56;
    --steel:#61748A;
    --line:#C3CCD4;
    --amber:#9A5205;
    --amber-bright:#B8630A;
    --amber-on:#FFFFFF;
    --ring-track:#D3DAE1;
    --scene-sky-1:#FFE3A3;
    --scene-sky-2:#F5C98B;
    --scene-far:#B9A78F;
    --scene-mid:#8A7761;
    --scene-near:#5E4E3D;
    --scene-fig:#2E241B;
    --scene-op:.30;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0A0E13;
      --surface:#111820;
      --sunk:#0D141B;
      --ink:#E8EEF3;
      --ink-2:#9BAAB8;
      --steel:#7C8FA1;
      --line:#22303C;
      --amber:#FF9E2C;
      --amber-bright:#FFBC5C;
      --amber-on:#0A0E13;
      --ring-track:#1D2833;
      --scene-sky-1:#3A2A1E;
      --scene-sky-2:#141A22;
      --scene-far:#1B2733;
      --scene-mid:#16202A;
      --scene-near:#101820;
      --scene-fig:#05080B;
      --scene-op:.55;
    }
  }
  :root[data-theme="dark"]{
    --ground:#0A0E13;
    --surface:#111820;
    --sunk:#0D141B;
    --ink:#E8EEF3;
    --ink-2:#9BAAB8;
    --steel:#7C8FA1;
    --line:#22303C;
    --amber:#FF9E2C;
    --amber-bright:#FFBC5C;
    --amber-on:#0A0E13;
    --ring-track:#1D2833;
    --scene-sky-1:#3A2A1E;
    --scene-sky-2:#141A22;
    --scene-far:#1B2733;
    --scene-mid:#16202A;
    --scene-near:#101820;
    --scene-fig:#05080B;
    --scene-op:.55;
  }

  *{box-sizing:border-box}
  body{
    background:var(--ground);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:400;text-wrap:balance;letter-spacing:.01em;line-height:.95;margin:0}
  p{margin:0}
  a{color:inherit}
  .eyebrow{
    font-family:ui-monospace,Menlo,Consolas,monospace;
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);
  }

  header{border-bottom:1px solid var(--line);position:relative;z-index:2}
  .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
  .mark{display:flex;align-items:center;gap:12px}
  .mark svg{display:block;width:34px;height:34px}
  .mark b{font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:400;font-size:21px;letter-spacing:.06em;text-transform:uppercase}
  .bar .eyebrow{display:none}
  @media(min-width:820px){.bar .eyebrow{display:block}}

  /* ---------------- hero with scene ---------------- */
  .hero-shell{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
  .scene{
    position:absolute;inset:auto 0 0 0;width:100%;height:100%;
    opacity:var(--scene-op);pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 42%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 42%,#000 100%);
  }
  .scene svg{position:absolute;inset:0;width:100%;height:100%}
  .hero{position:relative;z-index:1;display:grid;gap:20px;padding:78px 0 92px}
  @media(min-width:900px){.hero{padding:104px 0 120px;max-width:74%}}
  .hero h1{font-size:clamp(50px,9.5vw,102px);text-transform:uppercase}
  .hero h1 em{font-style:normal;color:var(--amber);display:block}
  .rule{height:2px;background:var(--amber);width:88px;margin:8px 0 6px}
  .lede{font-size:clamp(17px,2.2vw,20px);color:var(--ink-2);max-width:52ch}
  .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:16px}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--amber);color:var(--amber-on);
    font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;font-weight:600;font-size:14px;
    letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
    padding:16px 26px;border:2px solid var(--amber);
    transition:transform .12s ease, background .12s ease, border-color .12s ease;
  }
  .btn:hover{background:var(--amber-bright);border-color:var(--amber-bright);transform:translateY(-2px)}
  .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .meta{font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;font-size:13px;color:var(--steel);font-variant-numeric:tabular-nums}

  @media (prefers-reduced-motion:no-preference){
    .runner{animation:stride 2.6s ease-in-out infinite alternate}
    @keyframes stride{from{transform:translate(0,0)}to{transform:translate(10px,-5px)}}
  }

  /* ---------------- creed quote ---------------- */
  .quote{padding:76px 0 72px;border-bottom:1px solid var(--line);display:grid;gap:26px}
  @media(min-width:820px){.quote{grid-template-columns:auto 1fr;align-items:center;gap:48px}}
  .quote blockquote{
    margin:0;font-family:'Oswald','Arial Narrow',sans-serif;text-transform:uppercase;
    font-size:clamp(30px,5vw,56px);line-height:1.02;max-width:16ch;
  }
  .quote blockquote span{color:var(--amber)}
  .quote .attrib{color:var(--steel);font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;max-width:30ch}
  @media(min-width:820px){.quote .attrib{border-left:2px solid var(--amber);padding-left:24px}}

  /* ---------------- ring selector ---------------- */
  .explorer{padding:76px 0 92px;border-bottom:1px solid var(--line)}
  .explorer-hint{text-align:center;margin-bottom:26px}
  .rings{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 10px;justify-items:center;max-width:840px;margin:0 auto}
  @media(min-width:760px){.rings{grid-template-columns:repeat(5,1fr);gap:14px;max-width:1000px}}

  .ring{
    appearance:none;background:none;border:0;padding:10px 6px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;
    color:inherit;font:inherit;
  }
  .ring:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .ring svg{display:block;width:100%;max-width:150px;height:auto}
  .ring .track{fill:none;stroke:var(--ring-track);stroke-width:8}
  .ring .arc{
    fill:none;stroke:var(--amber);stroke-width:8;stroke-linecap:round;
    transform:rotate(-90deg);transform-origin:60px 60px;stroke-dasharray:314;
    transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.3,1), stroke-width .2s ease;
  }
  .ring .spin{
    fill:none;stroke:var(--amber);stroke-width:1.5;opacity:0;
    stroke-dasharray:3 9;transform-origin:60px 60px;transition:opacity .25s ease;
  }
  .ring .num{font-family:'Oswald','Arial Narrow',sans-serif;fill:var(--ink);font-size:29px;text-anchor:middle}
  .ring .unit{font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;fill:var(--steel);font-size:10.5px;text-anchor:middle;letter-spacing:.09em}
  .ring .label{font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);transition:color .2s ease}
  .ring:hover .arc,.ring[aria-selected="true"] .arc{stroke-width:10}
  .ring:hover .label,.ring[aria-selected="true"] .label{color:var(--amber)}
  .ring[aria-selected="true"] .spin{opacity:.85}
  @media (prefers-reduced-motion:no-preference){
    .ring[aria-selected="true"] .spin{animation:spin 9s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}
  }
  @media (prefers-reduced-motion:reduce){
    .ring .arc{transition:none}
    .btn{transition:none}
    .btn:hover{transform:none}
    .runner{animation:none}
  }

  /* ---------------- detail panel ---------------- */
  .panel{margin-top:40px;border:1px solid var(--line);background:var(--surface);display:grid}
  @media(min-width:880px){.panel{grid-template-columns:1fr 330px}}
  .panel-body{padding:38px 34px;display:flex;flex-direction:column;gap:18px}
  .panel-body h3{font-size:clamp(25px,3.2vw,36px);text-transform:uppercase}
  .panel-body .why{color:var(--ink-2);font-size:16px;max-width:54ch}
  .panel-body ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
  .panel-body li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;color:var(--ink-2);font-size:15px}
  .panel-body li::before{content:"";width:8px;height:8px;background:var(--amber);display:block;transform:translateY(2px)}
  .panel-body li b{color:var(--ink);font-weight:600}
  .kicker{font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
  .shot{border-left:1px solid var(--line);background:var(--sunk);display:grid;place-items:center;padding:30px 24px}
  @media(max-width:879px){.shot{border-left:0;border-top:1px solid var(--line)}}
  .shot svg{width:100%;max-width:236px;height:auto;display:block}
  .shot-note{font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);text-align:center;margin-top:14px}
  @media (prefers-reduced-motion:no-preference){
    .panel[data-anim="in"] .panel-body > *{animation:rise .45s cubic-bezier(.2,.7,.3,1) both}
    .panel[data-anim="in"] .panel-body > *:nth-child(2){animation-delay:.05s}
    .panel[data-anim="in"] .panel-body > *:nth-child(3){animation-delay:.1s}
    .panel[data-anim="in"] .panel-body > *:nth-child(4){animation-delay:.15s}
    .panel[data-anim="in"] .shot{animation:rise .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:.08s}
    @keyframes rise{from{opacity:0;transform:translateY(14px)}}
  }

  /* phone mock — painted in the app's own dark palette */
  .scr-bg{fill:#121212}
  .scr-surf{fill:#1C1B1F}
  .scr-var{fill:#2A2830}
  .scr-amber{fill:#FFB74D}
  .scr-teal{fill:#80CBC4}
  .scr-txt{font-family:system-ui,sans-serif;fill:#E6E1E5;font-size:9px;font-weight:600}
  .scr-dim{font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;fill:#938F99;font-size:6.6px;letter-spacing:.07em}
  .scr-big{font-family:'Oswald','Arial Narrow',sans-serif;fill:#E6E1E5;font-size:20px}
  .scr-mini{font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;fill:#E6E1E5;font-size:6.6px;letter-spacing:.06em}
  .scr-onamber{font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;fill:#3E2723;font-size:6.6px;letter-spacing:.1em;font-weight:600}
  .scr-frame{fill:#121212;stroke:#3A3A3A}
  .scr-track{fill:none;stroke:#2A2830}
  .scr-arc{fill:none;stroke:#FFB74D;stroke-linecap:round}
  .scr-arc2{fill:none;stroke:#80CBC4;stroke-linecap:round}
  .scr-line{fill:none;stroke:#FFB74D;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
  .scr-area{fill:#FFB74D;opacity:.14}
  .scr-grid{stroke:#2A2830;stroke-width:1}
  .scr-nav{fill:#2A2830;opacity:.92}

  /* ---------------- beyond ---------------- */
  .beyond{padding:88px 0;border-bottom:1px solid var(--line)}
  .beyond h2{font-size:clamp(34px,5.5vw,58px);text-transform:uppercase;max-width:18ch;margin-top:18px}
  .beyond-grid{display:grid;gap:1px;background:var(--line);margin-top:52px;border:1px solid var(--line)}
  @media(min-width:700px){.beyond-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1000px){.beyond-grid{grid-template-columns:repeat(3,1fr)}}
  .card{background:var(--ground);padding:30px 26px;display:flex;flex-direction:column;gap:13px}
  .card h3{font-size:19px;text-transform:uppercase;letter-spacing:.02em}
  .card p{color:var(--ink-2);font-size:15px}
  .card .idx{font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;font-size:12px;color:var(--amber);letter-spacing:.16em;font-variant-numeric:tabular-nums}

  /* ---------------- creed ---------------- */
  .creed{padding:88px 0;border-bottom:1px solid var(--line)}
  .creed h2{font-size:clamp(34px,5.5vw,58px);text-transform:uppercase;max-width:17ch;margin-top:18px}
  .creed-grid{display:grid;gap:1px;background:var(--line);margin-top:52px;border:1px solid var(--line)}
  @media(min-width:760px){.creed-grid{grid-template-columns:repeat(3,1fr)}}
  .creed .card h3{font-size:22px}

  /* ---------------- price ---------------- */
  .free{padding:88px 0;border-bottom:1px solid var(--line);display:grid;gap:34px}
  @media(min-width:820px){.free{grid-template-columns:1fr 1fr;align-items:center;gap:56px}}
  .free h2{font-size:clamp(34px,5.4vw,58px);text-transform:uppercase}
  .free p{color:var(--ink-2);margin-top:18px;max-width:46ch}
  .free-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
  .free-row{background:var(--ground);display:flex;justify-content:space-between;gap:16px;padding:16px 20px;font-size:15px}
  .free-row span:last-child{font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;color:var(--amber);font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

  /* ---------------- grab ---------------- */
  .grab{padding:96px 0;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
  .grab h2{font-size:clamp(40px,7.4vw,80px);text-transform:uppercase}
  .grab h2 span{color:var(--amber)}
  .grab > p{color:var(--ink-2);max-width:46ch}
  .install{margin-top:14px;border:1px solid var(--line);background:var(--surface);text-align:left;padding:24px 26px;max-width:560px;width:100%}
  .install ol{margin:12px 0 0;padding-left:20px;color:var(--ink-2);font-size:14px;display:grid;gap:8px}

  footer{border-top:1px solid var(--line);padding:28px 0 44px}
  .foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:var(--steel);font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;font-size:12px}
  .foot a:hover{color:var(--amber)}

/* ---- app metric colors (match the real app) ---- */
:root{
  --m-food:#C25E00; --m-water:#1E8FA8; --m-weight:#6D4FB0; --m-ready:#C62F34;
}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --m-food:#FF9E2C; --m-water:#4FC3E8; --m-weight:#B39DDB; --m-ready:#FF6B7A;
  }
}
:root[data-theme="dark"]{
  --m-food:#FF9E2C; --m-water:#4FC3E8; --m-weight:#B39DDB; --m-ready:#FF6B7A;
}
.ring{--ra:var(--amber);}
.ring.r-food{--ra:var(--m-food);}
.ring.r-water{--ra:var(--m-water);}
.ring.r-weight{--ra:var(--m-weight);}
.ring.r-move{--ra:var(--m-weight);}
.ring.r-ready{--ra:var(--m-ready);}
.ring .arc{stroke:var(--ra);}
.ring .spin{stroke:var(--ra);}
.ring:hover .label,.ring[aria-selected="true"] .label{color:var(--ra);}
/* panel accent follows the active metric */
#panel-view{--ra:var(--amber);}
.panel-body .kicker{color:var(--ra);}
.panel-body li::before{background:var(--ra);}
.rule,.hero h1 em{}
/* framed real screenshot */
.shot .frame{
  border-radius:30px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,.30);max-width:232px;background:#000;margin:0 auto;
}
.shot .frame img{display:block;width:100%;height:auto}


#panel-view.r-food{--ra:var(--m-food)}#panel-view.r-water{--ra:var(--m-water)}#panel-view.r-weight{--ra:var(--m-weight)}#panel-view.r-move{--ra:var(--m-weight)}#panel-view.r-ready{--ra:var(--m-ready)}

/* ---- privacy doc page ---- */
@body.doc media (prefers-color-scheme: dark){
    
  }
  
  *{box-sizing:border-box}
  body.doc body{background:var(--ground);color:var(--ink);line-height:1.65;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
  body.doc .wrap{max-width:760px;margin:0 auto;padding:0 24px}
  body.doc h1, body.doc h2{font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:400;line-height:1;
    text-transform:uppercase;text-wrap:balance;margin:0}
  body.doc h1{font-size:clamp(38px,7vw,64px)}
  body.doc h2{font-size:22px;margin-top:46px;margin-bottom:14px}
  body.doc p, body.doc li{color:var(--ink-2);font-size:16px}
  body.doc p{margin:14px 0 0}
  body.doc ul{margin:14px 0 0;padding-left:20px;display:grid;gap:8px}
  body.doc a{color:var(--amber)}
  body.doc .eyebrow{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--steel)}
  body.doc header{border-bottom:1px solid var(--line);padding:20px 0}
  body.doc .bar{display:flex;align-items:center;gap:12px}
  body.doc .bar b{font-family:'Oswald','Arial Narrow',sans-serif;font-weight:400;font-size:20px;letter-spacing:.06em;text-transform:uppercase}
  body.doc main{padding:56px 0 40px}
  body.doc .updated{margin-top:20px}
  body.doc .box{border:1px solid var(--line);background:var(--surface);padding:22px 24px;margin-top:26px}
  body.doc footer{border-top:1px solid var(--line);padding:26px 0 44px;margin-top:64px}
  body.doc .foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
    color:var(--steel);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
  body.doc .foot a{color:var(--steel)}