/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/PixelifySans-400-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/PixelifySans-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/PixelifySans-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Tiny5';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Tiny5-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Tiny5';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Tiny5-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Tiny5';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Tiny5-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Tiny5';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Tiny5-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Watch your hands! — cozy pixel landing
   Tokens: light on :root, dark under prefers-color-scheme + [data-theme]
   ============================================================ */
:root{
  color-scheme: light;
  --bg:#f4ecd8;          /* parchment */
  --bg-2:#ede2c6;        /* card / panel */
  --bg-3:#e3d5b3;        /* deeper panel, window bar */
  --ink:#3a2718;         /* warm brown ink */
  --ink-2:#6d5641;       /* muted */
  --line:#3a2718;        /* pixel borders + drop shadows */
  --orange:#e2622f;
  --orange-2:#c24f22;
  --banana:#d9a417;
  --banana-2:#f2c53a;
  --green:#6f9d4a;
  --green-2:#4f7d33;
  --sky:#f9f2e1;
  --grid:rgba(58,39,24,.075);
  --dot:rgba(58,39,24,.05);
  --on-accent:#fff7e6;
  --img-outline:rgba(0,0,0,.1);
  --glow:255,61,46;      /* the app's touch glow, rgb triplet */
  --fd:'Pixelify Sans','Press Start 2P','VT323','Courier New',monospace;
  --fb:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#2a211a;
    --bg-2:#352a21;
    --bg-3:#3f3227;
    --ink:#f1e6cf;
    --ink-2:#bba98f;
    --line:#150f0b;
    --orange:#ef7742;
    --orange-2:#d35f2c;
    --banana:#e5b326;
    --banana-2:#f5cc4a;
    --green:#86b35f;
    --green-2:#5f8f3f;
    --sky:#332822;
    --grid:rgba(241,230,207,.055);
    --dot:rgba(241,230,207,.04);
    --on-accent:#1f160f;
    --img-outline:rgba(255,255,255,.1);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#2a211a;
  --bg-2:#352a21;
  --bg-3:#3f3227;
  --ink:#f1e6cf;
  --ink-2:#bba98f;
  --line:#150f0b;
  --orange:#ef7742;
  --orange-2:#d35f2c;
  --banana:#e5b326;
  --banana-2:#f5cc4a;
  --green:#86b35f;
  --green-2:#5f8f3f;
  --sky:#332822;
  --grid:rgba(241,230,207,.055);
  --dot:rgba(241,230,207,.04);
  --on-accent:#1f160f;
  --img-outline:rgba(255,255,255,.1);
}

/* Russian: Pixelify Sans draws С/д/з like O/a/э — Tiny5 has proper Cyrillic.
   Tiny5 has a single weight, so never fake-bold it (smears the pixels). */
[lang="ru"]{--fd:'Tiny5','Pixelify Sans','Courier New',monospace;font-synthesis-weight:none}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}
body{
  margin:0;
  font-family:var(--fb);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background-color:var(--bg);
  /* faint pixel grid + 4px dither so the ground is never a flat void */
  background-image:
    repeating-conic-gradient(var(--dot) 0 25%, transparent 0 50%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 4px 4px, 32px 32px, 32px 32px;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:inherit}
h1,h2,h3{font-family:var(--fd);font-weight:700;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:.005em}
p{margin:0;text-wrap:pretty}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
code{font-family:var(--fb);font-size:.92em;background:var(--bg-3);padding:1px 5px;border:1px solid color-mix(in srgb, var(--line) 30%, transparent);overflow-wrap:anywhere}

/* ---------- chunky pixel primitives ---------- */
.panel{
  background:var(--bg-2);
  border:3px solid var(--line);
  box-shadow:6px 6px 0 var(--line);
  border-radius:2px;
}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fd);font-weight:700;font-size:15px;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;
  padding:7px 11px 6px;
  color:#3a2718;background:var(--banana);
  border:2px solid var(--line);box-shadow:3px 3px 0 var(--line);
  border-radius:1px;
}
.tag.orange{background:var(--orange);color:var(--on-accent)}
.tag.green{background:var(--green);color:#1c2412}
.tag.cream{background:var(--bg-3);color:var(--ink)}

.btn{
  --sh:5px;
  display:inline-flex;align-items:center;gap:10px;
  position:relative;
  font-family:var(--fd);font-weight:700;font-size:21px;line-height:1;
  letter-spacing:.02em;text-decoration:none;cursor:pointer;
  padding:14px 22px 13px;
  color:var(--on-accent);background:var(--orange);
  border:3px solid var(--line);border-radius:2px;
  box-shadow:var(--sh) var(--sh) 0 var(--line);
  transition:transform 70ms steps(2,end), box-shadow 70ms steps(2,end), background-color 120ms;
  user-select:none;-webkit-user-select:none;
  min-height:44px;
}
.btn:hover{--sh:7px;transform:translate(-2px,-2px);background:var(--orange-2)}
.btn:active{--sh:0px;transform:translate(5px,5px)}
.btn.soon{cursor:default;background:var(--bg-3);color:var(--ink-2)}
.btn.soon:hover{--sh:5px;transform:none;background:var(--bg-3)}
.btn.soon:active{--sh:5px;transform:none}
.btn .badge{
  position:absolute;top:-14px;right:-14px;transform:rotate(6deg);
  font-family:var(--fd);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:#3a2718;background:var(--banana-2);
  border:2px solid var(--line);box-shadow:2px 2px 0 var(--line);
  padding:4px 7px 3px;
}

.hr{
  height:6px;margin:0 auto;max-width:1120px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 14px);
  opacity:.28;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:20;
  background:var(--bg);
  border-bottom:3px solid var(--line);
  box-shadow:0 4px 0 var(--dot);
}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{flex:none;display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--fd);font-weight:700;font-size:23px;line-height:1;white-space:nowrap}
.brand img{width:36px;height:36px;border:2px solid var(--line);box-shadow:2px 2px 0 var(--line);background:var(--bg-2)}
.links{display:flex;gap:2px;margin-left:4px}
.links a{
  text-decoration:none;font-family:var(--fd);font-weight:500;font-size:19px;line-height:1;
  padding:12px 10px;border:2px solid transparent;border-radius:1px;
  color:var(--ink);white-space:nowrap;
  transition:background-color 120ms,border-color 120ms,box-shadow 70ms steps(2,end),transform 70ms steps(2,end);
}
.links a:hover{background:var(--bg-2);border-color:var(--line);box-shadow:3px 3px 0 var(--line);transform:translate(-1px,-1px)}
.links a:active{box-shadow:0 0 0 var(--line);transform:translate(2px,2px)}
.tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{position:relative}
.lang-btn{
  appearance:none;cursor:pointer;margin:0;
  display:inline-flex;align-items:center;gap:9px;
  min-width:44px;height:44px;padding:0 12px 0 14px;
  font-family:var(--fd);font-weight:700;font-size:17px;line-height:1;letter-spacing:.06em;
  color:var(--ink);background:var(--bg-2);
  border:2px solid var(--line);box-shadow:3px 3px 0 var(--line);border-radius:1px;
  transition:transform 70ms steps(2,end),box-shadow 70ms steps(2,end),background-color 120ms;
}
.lang-btn:hover{background:var(--bg-3)}
.lang-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--line)}
.caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;transition:transform 180ms cubic-bezier(.2,0,0,1)}
.lang.open .caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);z-index:30;
  min-width:184px;padding:6px;display:grid;gap:2px;
  background:var(--bg);border:2px solid var(--line);box-shadow:4px 4px 0 var(--line);
  opacity:0;transform:translateY(-4px);visibility:hidden;
  transition:opacity 160ms cubic-bezier(.2,0,0,1),transform 160ms cubic-bezier(.2,0,0,1),visibility 0s linear 160ms;
}
.lang.open .lang-menu{opacity:1;transform:none;visibility:visible;transition:opacity 180ms cubic-bezier(.2,0,0,1),transform 180ms cubic-bezier(.2,0,0,1),visibility 0s}
.lang-menu button{
  appearance:none;margin:0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:44px;padding:0 12px;text-align:left;
  font-family:var(--fd);font-weight:700;font-size:18px;line-height:1;
  color:var(--ink);background:transparent;border:2px solid transparent;
}
.lang-menu button:hover,.lang-menu button:focus-visible{background:var(--bg-2);border-color:var(--line);outline:none}
.lang-menu button[aria-checked="true"]{background:var(--orange);color:var(--on-accent);border-color:var(--line)}
.lang-menu button[aria-checked="true"]::after{content:"✓";font-family:var(--fb);font-size:16px}
.iconbtn{
  appearance:none;cursor:pointer;margin:0;padding:0;
  width:44px;height:44px;display:grid;place-items:center;
  font-size:20px;line-height:1;
  color:var(--ink);background:var(--bg-2);
  border:2px solid var(--line);box-shadow:3px 3px 0 var(--line);border-radius:1px;
  transition:transform 70ms steps(2,end),box-shadow 70ms steps(2,end);
}
.iconbtn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--line)}
.iconbtn > *{grid-area:1/1}
.iconbtn .ico{display:grid;place-items:center;width:100%;height:100%;
  transition:opacity 220ms cubic-bezier(.2,0,0,1),transform 220ms cubic-bezier(.2,0,0,1),filter 220ms cubic-bezier(.2,0,0,1)}
/* contextual icon swap: one icon in, the other out (opacity / scale .25 / blur 4px) */
.ico.on {opacity:1;transform:scale(1);filter:blur(0)}
.ico.off{opacity:0;transform:scale(.25);filter:blur(4px)}
.iconbtn .ico.sun{opacity:1;transform:scale(1);filter:blur(0)}
.iconbtn .ico.moon{opacity:0;transform:scale(.25);filter:blur(4px)}
:root[data-theme="dark"] .iconbtn .ico.sun{opacity:0;transform:scale(.25);filter:blur(4px)}
:root[data-theme="dark"] .iconbtn .ico.moon{opacity:1;transform:scale(1);filter:blur(0)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .iconbtn .ico.sun{opacity:0;transform:scale(.25);filter:blur(4px)}
  :root:not([data-theme="light"]) .iconbtn .ico.moon{opacity:1;transform:scale(1);filter:blur(0)}
}
/* burger: three pixel bars ↔ pixel cross */
#menu{display:none}
.burger,.cross{position:relative;width:20px;height:16px}
.burger i{position:absolute;left:0;right:0;height:3px;background:var(--ink)}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:6.5px}.burger i:nth-child(3){bottom:0}
.cross i{position:absolute;left:50%;top:50%;width:22px;height:3px;margin:-1.5px 0 0 -11px;background:var(--ink)}
.cross i:nth-child(1){transform:rotate(45deg)}.cross i:nth-child(2){transform:rotate(-45deg)}
#menu .ico.cross-wrap{opacity:0;transform:scale(.25);filter:blur(4px)}
.nav.open #menu .ico.burger-wrap{opacity:0;transform:scale(.25);filter:blur(4px)}
.nav.open #menu .ico.cross-wrap{opacity:1;transform:scale(1);filter:blur(0)}
.mnav{
  position:absolute;left:0;right:0;top:100%;
  background:var(--bg);
  border-bottom:3px solid var(--line);
  box-shadow:0 6px 0 var(--dot);
  padding:10px 24px 18px;
  display:grid;gap:4px;
  opacity:0;transform:translateY(-6px);visibility:hidden;
  transition:opacity 180ms cubic-bezier(.2,0,0,1),transform 180ms cubic-bezier(.2,0,0,1),visibility 0s linear 180ms;
}
.nav.open .mnav{opacity:1;transform:none;visibility:visible;transition:opacity 220ms cubic-bezier(.2,0,0,1),transform 220ms cubic-bezier(.2,0,0,1),visibility 0s}
.mnav a{
  font-family:var(--fd);font-weight:700;font-size:22px;line-height:1;text-decoration:none;
  padding:14px 12px;min-height:48px;display:flex;align-items:center;
  border:2px solid transparent;
}
.mnav a:hover,.mnav a:focus-visible{background:var(--bg-2);border-color:var(--line)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:64px 0 88px;
  background:linear-gradient(180deg, var(--sky) 0%, transparent 70%);
  overflow:hidden;
}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* two columns: centre the window itself against the text — the monkey just pokes out above it */
@media (min-width: 961px){ .hero{padding-top:104px} .hero .scene{margin-top:calc(-1 * var(--head))} }
.hero h1{font-size:clamp(40px, 5.6vw, 70px);margin:18px 0 20px}
.hero p.lead{font-size:19px;max-width:34ch;color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:18px 20px;margin-top:34px;align-items:center}
.note{margin-top:18px;font-size:14px;color:var(--ink-2)}

/* the scene: real app camera view in a pixel Mac window, monkey standing on its top edge */
/* --head: height of the monkey above the window (sprite: 30px of air above the head is skipped) */
.scene{--s:2;--head:calc(64px * var(--s));position:relative;padding-top:var(--head)}
.scene .win{position:relative;z-index:1}
.scene .win-bar{position:relative}
.cam{position:relative;aspect-ratio:4/3;background:#111;overflow:hidden}
.cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam .touch{opacity:0;transition:opacity 380ms cubic-bezier(.2,0,0,1)}
.cam::after{ /* in-app edge glow on touch */
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(var(--glow),0);
  transition:box-shadow 380ms cubic-bezier(.2,0,0,1);
}
.scene .win{transition:box-shadow 380ms cubic-bezier(.2,0,0,1)}
.scene.is-touch .cam .touch{opacity:1}
.scene.is-touch .cam::after{box-shadow:inset 0 0 38px 10px rgba(var(--glow),.55)}
.scene.is-touch .win{box-shadow:8px 8px 0 var(--line), 0 0 34px 6px rgba(var(--glow),.45)}
.mk{
  position:absolute;z-index:2;right:9%;
  /* sprite frames are 124px with 32px of air under the feet — stand them on the window's top border */
  top:calc(var(--head) - (124px - 32px) * var(--s) + 1px);
  width:calc(124px * var(--s));height:calc(124px * var(--s));
  background:url(mk/idle.png) 0 0 / calc(124px * var(--s) * 4) calc(124px * var(--s)) no-repeat;
  image-rendering:pixelated;image-rendering:crisp-edges;
  animation:mk-idle 880ms steps(4) infinite;
  pointer-events:none;
}
.scene.is-touch .mk{
  background-image:url(mk/scratch.png);
  background-size:calc(124px * var(--s) * 9) calc(124px * var(--s));
  animation:mk-scratch 630ms steps(9) infinite;
}
@keyframes mk-idle{to{background-position-x:calc(-124px * var(--s) * 4)}}
@keyframes mk-scratch{to{background-position-x:calc(-124px * var(--s) * 9)}}

/* ---------- feature sections ---------- */
.feat{padding:88px 0}
.feat .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.feat.flip .art{order:2}
.art{
  display:grid;place-items:center;
  padding:26px;
  background:var(--bg-2);
  border:3px solid var(--line);box-shadow:8px 8px 0 var(--line);
  position:relative;
}
.art::before{
  content:"";position:absolute;inset:8px;pointer-events:none;
  border:2px dashed color-mix(in srgb, var(--line) 35%, transparent);
}
.art img{width:100%;max-width:340px;height:auto;aspect-ratio:1/1;object-fit:contain}
.art-stage{width:100%;max-width:340px;aspect-ratio:1/1;display:grid;place-items:center}
.sprite-prob{
  --s:2.5;width:calc(124px * var(--s));height:calc(124px * var(--s));max-width:100%;
  background:url(mk/problem.png) 0 0 / calc(124px * var(--s) * 34) calc(124px * var(--s)) no-repeat;
  image-rendering:pixelated;image-rendering:crisp-edges;
  animation:mk-prob 3740ms steps(34) infinite;
}
@keyframes mk-prob{to{background-position-x:calc(-124px * var(--s) * 34)}}
.art .corner{
  position:absolute;font-size:20px;line-height:1;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25));
}
.art .corner.tl{left:-12px;top:-14px;transform:rotate(-14deg)}
.art .corner.br{right:-12px;bottom:-12px;transform:rotate(12deg)}
.copy h2{font-size:clamp(32px, 4.2vw, 48px);margin:18px 0 18px}
.copy p{font-size:18px;max-width:52ch}
.fn{margin-top:22px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.fn a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px;transition:color 120ms}
.fn a:hover{color:var(--ink)}

/* ---------- windows (screens) ---------- */
.win{
  background:var(--bg-2);
  border:3px solid var(--line);
  box-shadow:8px 8px 0 var(--line);
  border-radius:2px;
}
.win-bar{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;
  border-bottom:3px solid var(--line);
  background:var(--bg-3);
}
.win-bar i{width:12px;height:12px;border:2px solid var(--line);display:block}
.win-bar i:nth-child(1){background:var(--orange)}
.win-bar i:nth-child(2){background:var(--banana)}
.win-bar i:nth-child(3){background:var(--green)}
.win-bar b{margin-left:auto;font-family:var(--fd);font-weight:700;font-size:17px;line-height:1;letter-spacing:.03em}
.win img{width:100%;height:auto;background:#0b0b0b;outline:1px solid var(--img-outline);outline-offset:-1px}

.shots{padding:88px 0 96px;background:linear-gradient(180deg, transparent, var(--sky) 20%, var(--sky) 80%, transparent)}
.shots h2{font-size:clamp(34px, 4.6vw, 54px);text-align:center;margin:16px 0 48px}
.shots .head{text-align:center}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 40px}
.grid .win{margin:0;transition:transform 120ms steps(3,end), box-shadow 120ms steps(3,end)}
.grid .win:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--line)}
.grid .win img{aspect-ratio:1100/931}

.zoom{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in}
.zoom:focus-visible{outline-offset:-3px}

/* ---------- lightbox ---------- */
.lb{border:0;padding:24px 76px;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:transparent;overflow:hidden}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:rgba(20,14,10,.86)}
html:has(.lb[open]){overflow:hidden}
.lb-fig{margin:0;display:grid;gap:14px;justify-items:center}
.lb-fig img{display:block;max-width:100%;max-height:calc(100vh - 110px);width:auto;height:auto;border:3px solid #150f0b;box-shadow:8px 8px 0 #000;background:#0b0b0b}
.lb-fig figcaption{font-family:var(--fd);font-size:20px;line-height:1;color:#f1e6cf}
.lb-close{position:fixed;top:18px;right:18px}
.lb-nav{position:fixed;top:50%;margin-top:-22px}
.lb-nav.prev{left:18px}.lb-nav.next{right:18px}
.lb[open] .lb-fig{animation:lb-in 200ms cubic-bezier(.2,0,0,1)}
.lb[open]::backdrop{animation:lb-fade 200ms cubic-bezier(.2,0,0,1)}
@keyframes lb-in{from{opacity:0;transform:scale(.96)}}
@keyframes lb-fade{from{opacity:0}}
@media (max-width: 560px){ .lb{padding:64px 12px 84px} .lb-nav{top:auto;bottom:18px;margin-top:0} }

/* ---------- finale ---------- */
.finale{padding:96px 0 88px;text-align:center}
.diploma{position:relative;width:min(100%,380px);margin:0 auto 38px}
.diploma img{width:100%;height:auto;border-radius:14px;box-shadow:8px 8px 0 var(--line);outline:1px solid var(--img-outline);outline-offset:-1px}
.diploma .corner{position:absolute;z-index:1;font-size:26px;line-height:1;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25))}
.diploma .corner.tl{left:-16px;top:-18px;transform:rotate(-14deg)}
.diploma .corner.br{right:-14px;bottom:-14px;transform:rotate(12deg)}
.finale .fin-2{margin-top:14px;font-weight:700}
.finale h2{font-size:clamp(34px, 4.8vw, 56px);margin:0 auto 40px;max-width:18ch}
.finale p{font-size:18px;max-width:60ch;margin:0 auto}
/* ---------- privacy policy ---------- */
.policy{padding:88px 0}
.policy .head{max-width:760px}
.policy h2{font-size:clamp(28px, 3.6vw, 40px);margin:16px 0 40px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.card{
  padding:22px 20px 24px;
  background:var(--bg-2);border:3px solid var(--line);box-shadow:6px 6px 0 var(--line);
  display:flex;flex-direction:column;gap:12px;
  transition:transform 120ms steps(3,end), box-shadow 120ms steps(3,end);
}
.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--line)}
.card .ico{
  width:44px;height:44px;display:grid;place-items:center;font-size:22px;line-height:1;
  background:var(--banana);border:2px solid var(--line);box-shadow:3px 3px 0 var(--line);
}
.card:nth-child(2) .ico{background:var(--green)}
.card:nth-child(3) .ico{background:var(--orange)}
.card:nth-child(4) .ico{background:var(--bg-3)}
.card:nth-child(5) .ico{background:var(--green)}
.card:nth-child(6) .ico{background:var(--banana)}
.card h3{font-size:24px;margin-top:4px}
.card p{font-size:15px;line-height:1.6;color:var(--ink)}
.card a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--orange);word-break:break-all}
.card a:hover{background:var(--banana-2);color:#3a2718}
.pp-meta{margin-top:30px;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:80ch}

/* ---------- faq ---------- */
.faq{padding:40px 0 88px}
.faq h2{font-size:clamp(30px, 4vw, 44px);margin:16px 0 32px}
.qa{display:grid;gap:16px;max-width:820px}
.qa details{
  background:var(--bg-2);border:3px solid var(--line);box-shadow:5px 5px 0 var(--line);
}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;min-height:44px;
  font-family:var(--fd);font-weight:700;font-size:21px;line-height:1.2;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";margin-left:auto;flex:none;
  width:28px;height:28px;display:grid;place-items:center;
  font-size:22px;line-height:1;
  background:var(--banana);color:#3a2718;border:2px solid var(--line);
}
.qa details[open] summary::after{content:"−";background:var(--orange);color:var(--on-accent)}
.qa details[open] summary{border-bottom:2px dashed color-mix(in srgb, var(--line) 35%, transparent)}
.qa .a{padding:16px 20px 20px;font-size:16px;line-height:1.65;max-width:66ch}
.qa .a a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--orange)}

/* ---------- support ---------- */
.support{padding:24px 0 96px}
.support .panel{
  padding:44px 40px;
  display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:center;
  position:relative;overflow:visible;
}
.support h2{font-size:clamp(30px, 4vw, 44px);margin-bottom:12px}
.support p{font-size:18px;max-width:46ch}
.support .deco{position:absolute;right:-10px;top:-18px;font-size:30px;transform:rotate(10deg);filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25))}

/* ---------- footer ---------- */
footer{
  border-top:3px solid var(--line);
  padding:28px 0 40px;
  font-size:14px;color:var(--ink-2);
}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
footer .brand{font-size:19px;color:var(--ink)}
footer .brand img{width:28px;height:28px}
footer a{text-decoration:none;border-bottom:2px solid transparent}
footer a:hover{border-bottom-color:var(--orange);color:var(--ink)}
footer .dot{opacity:.5}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity 480ms cubic-bezier(.2,0,0,1),transform 480ms cubic-bezier(.2,0,0,1);transition-delay:calc(var(--i,0) * 90ms)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .links{display:none}
  #menu{display:grid}
}
@media (max-width: 960px){
  .hero{padding-bottom:64px}
  .hero .wrap{grid-template-columns:1fr;gap:28px}
  .scene{max-width:560px}
  .feat .wrap{grid-template-columns:1fr;gap:36px}
  .feat.flip .art{order:0}
  .art{max-width:440px}
  .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .support .panel{grid-template-columns:1fr}
}
@media (max-width: 560px){
  body{font-size:16px}
  .brand span{display:none}
  .tools{gap:8px}
  .hero{padding-top:40px}
  .hero h1{font-size:clamp(36px, 11vw, 52px)}
  .scene{--s:1.5}
  .feat{padding:64px 0}
  .cards{grid-template-columns:1fr}
  .support .panel{padding:32px 24px}
  .btn{font-size:19px}
  .qa summary{font-size:19px;padding:16px}
  .qa .a{padding:14px 16px 18px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mk,.sprite-prob,.lb[open] .lb-fig,.lb[open]::backdrop{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .btn,.links a,.iconbtn,.lang-btn,.lang-menu,.caret,.grid .win,.card,.mnav,.cam .touch,.cam::after,.scene .win{transition:none}
  .grid .win:hover,.card:hover,.links a:hover,.btn:hover{transform:none}
}

/* ---------- второстепенная кнопка («Скачать приложение» в блоке покупки) ---------- */
.btn.alt{background:var(--bg-2);color:var(--ink)}
.btn.alt:hover{background:var(--bg-3)}

/* ---------- nav: «Купить» ---------- */
.nav .links a.nav-buy,.mnav a.nav-buy{color:var(--orange)}

/* ---------- buy ---------- */
.buy{padding:72px 0 24px}
.buy-card{background:var(--bg-2);border:3px solid var(--line);box-shadow:8px 8px 0 var(--line);padding:36px}
.buy-head h2{font-size:clamp(30px,4vw,44px);margin:14px 0 0;text-wrap:balance}
/* переключатель «На сайте / В App Store» — сегменты в пиксельной рамке, как кнопки сайта */
.buy-tabs{display:inline-flex;margin:24px 0 0;background:var(--sky);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line)}
.buy-tabs [role=tab]{font-family:var(--fd);font-weight:700;font-size:19px;line-height:1;letter-spacing:.02em;
  min-height:44px;padding:12px 20px 11px;margin:0;border:0;border-radius:0;background:transparent;color:var(--ink-2);cursor:pointer;
  transition:background-color 120ms,color 120ms}
.buy-tabs [role=tab]+[role=tab]{border-left:3px solid var(--line)}
.buy-tabs [role=tab]:hover{color:var(--ink);background:var(--bg-3)}
.buy-tabs [role=tab][aria-selected=true]{background:var(--orange);color:var(--on-accent);cursor:default}
.buy-tabs [role=tab]:focus-visible{outline:3px solid var(--orange);outline-offset:4px;position:relative;z-index:1}
.buy-pane{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start;margin-top:30px;padding-top:30px;border-top:2px dashed var(--line)}
.buy-pane[hidden]{display:none}
.buy-card.switched .buy-pane{animation:paneIn 200ms cubic-bezier(.2,0,0,1)}
@keyframes paneIn{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.buy-card.switched .buy-pane{animation:none}}
.buy .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 18px}
.buy .price b{font-family:'Pixelify Sans',var(--fd);font-weight:700;font-size:50px;line-height:1;color:var(--orange)}
.buy .price span{color:var(--ink-2)}
.buy-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.buy-list li{position:relative;padding-left:26px}
.buy-list li::before{content:"🍌";position:absolute;left:0;top:0;font-size:15px}
#pane-direct .buy-form{grid-column:2;grid-row:1 / span 2}
.buy-have{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.buy-have p{margin:0;font-size:15px;color:var(--ink-2);text-wrap:pretty}
.buy-have .btn{font-size:18px;padding:12px 18px 11px}
.buy-recover{font-size:15px;color:var(--ink-2)}
.store-card{display:grid;gap:18px;justify-items:start}
.store-app{display:flex;align-items:center;gap:14px}
.store-app img{width:64px;height:64px;border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);image-rendering:pixelated}
.store-app div{display:flex;flex-direction:column;gap:4px}
.store-app b{font-family:var(--fd);font-size:22px;line-height:1.1}
.store-app span{font-size:14px;color:var(--ink-2)}
.store-card .fine{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.buy-form{display:grid;gap:14px}
.buy-form .field{font-weight:700}
.buy-form input[type=email]{font:inherit;font-size:17px;padding:12px 14px;background:var(--sky);color:var(--ink);
  border:3px solid var(--line);border-radius:0;width:100%}
.buy-form input[type=email]:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.buy-form .check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.buy-form .check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--orange)}
.buy-form .btn{justify-self:start;cursor:pointer;border:3px solid var(--line)}
.buy-form .btn:disabled{opacity:.6;cursor:progress}
.buy-form .fine{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.buy-form .form-msg{margin:0;padding:10px 12px;border:2px solid var(--orange);color:var(--ink);font-size:15px}
@media (max-width: 860px){ .buy-card{padding:24px} .buy-pane{grid-template-columns:1fr;gap:28px}
  #pane-direct .buy-form,.buy-have{grid-column:auto;grid-row:auto} .buy-have{padding-top:24px;border-top:2px dashed var(--line)} }
@media (max-width: 560px){ .buy-tabs{display:flex} .buy-tabs [role=tab]{flex:1;padding:12px 10px 11px;font-size:17px} }

/* ---------- legal footer ---------- */
footer.legal{padding:40px 0 44px}
footer.legal .wrap{display:grid;gap:32px}
footer.legal .f-top{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
footer.legal .f-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px 40px}
footer.legal .f-cols>*{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
footer.legal .f-h{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
footer.legal .f-cols a{color:var(--ink-2)}
footer.legal .f-cols a:hover{color:var(--ink)}
footer.legal .f-cols span{font-size:13px;opacity:.8}
footer.legal .f-legal{margin:0;padding-top:20px;border-top:2px solid var(--line);font-size:13px;color:var(--ink-2)}

/* ---------- documents ---------- */
.doc-top{padding:22px 0;border-bottom:3px solid var(--line)}
.doc-top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.doc-top a.back{font-family:var(--fd);font-weight:700;font-size:18px;text-decoration:none}
.doc{max-width:780px;margin:0 auto;padding:44px 16px 64px;line-height:1.6}
.doc h1{font-size:clamp(30px,4.2vw,44px);margin:0 0 10px}
.doc .meta{color:var(--ink-2);margin:0 0 30px;font-size:15px}
.doc h2{font-size:24px;margin:36px 0 12px}
.doc p,.doc li{font-size:16px}
.doc ol,.doc ul{padding-left:22px}
.doc li{margin:6px 0}
.doc table{border-collapse:collapse;width:100%;margin:12px 0;font-size:15px}
.doc td{border:2px solid var(--line);padding:8px 12px;vertical-align:top}
.doc td:first-child{width:38%;color:var(--ink-2)}
.doc .card{background:var(--bg-2);border:3px solid var(--line);box-shadow:6px 6px 0 var(--line);padding:20px 22px;margin:20px 0}