/* Slate site, "The slate" (site refresh 2026-09-27, slate.css v1).
   The hero is a board with a WORKING copy of Slate's basic keypad on it, and a skin switcher that
   re-dresses the whole board in the app's seven skins (Chalk, Ledger, Terminal, Porcelain, Ember,
   Drift, Blueprint). Chalk-written sums (slate.js draws them as strokes) fill the empty corner of
   the board. The rest of the page stands on the Chalk skin, the app's free default.

   Rules this file keeps:
   - Colours come from the app's own skins (commonMain/skins/Skins.kt), copied, not invented. Where
     an app pair would fail WCAG as web TEXT (the dim "preview" line on Ledger/Porcelain/Drift, a
     small accent on Porcelain), the skin block below carries a web-only darker/lighter value and
     says so. Key labels are large text (>= 24px), so their minimum is 3:1, as in the app.
   - Every skin block sets the SAME token list. The contrast proof is generated from this file by
     tools/gen_contrast.py in the site repo (every pair, every skin), then run through the site-kit
     contrast.py. Change a colour, run it.
   - Text never sits on moving ink: the chalk sums have their own corner of the board and are
     aria-hidden decoration. Board textures are static and proven at their worst point.
   - Motion is optional polish: nothing moves without JS, nothing under prefers-reduced-motion
     (html.rm), and the Pause motion chip (html.paused) stops every loop. The chalk only writes
     while it is on screen.
   - style.css is the pre-refresh stylesheet; nothing references it any more. */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/bricolage-display.woff2) format("woff2")}

:root{
  /* the page: the Chalk skin (backdrop, display, preview, accent, digitBg, fnBg, fnText, opText) */
  --bg:#22262B;          /* backdrop */
  --bg2:#1B1F23;         /* a deeper band (web-only shade of the backdrop) */
  --panel:#282E35;       /* fnBg */
  --panel2:#2C3138;      /* digitBg */
  --panel3:#343B44;      /* opBg */
  --line:#3A4149;        /* the board's frame line */
  --line2:#4A535D;       /* control outline */
  --ink:#FFFFFF;         /* headings */
  --text:#ECEFF1;        /* display */
  --text2:#C8D6E0;       /* opText */
  --dim:#A9B4BD;         /* fnText */
  --faint:#8B949C;       /* preview (small print on bg only) */
  --accent:#9FC1DB;      /* the chalk blue */
  --mist:#C4DCEE;        /* links */
  --action:#D8A6A0;      /* actionText */
  --onaccent:#15191D;    /* text on the chalk-blue button */
  --navbg:rgba(24,27,31,.9);
  --navh:56px;
  --pad:clamp(16px,4.2vw,40px);
  --display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sys:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",Times,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono","Liberation Mono",monospace;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* the board: Chalk (the free skin). Each skin block below sets this same list. */
  --sk-bg:#22262B;       /* backdrop */
  --sk-ink:#ECEFF1;      /* display: the headline */
  --sk-text:#C8D6E0;     /* body copy on the board (opText) */
  --sk-dim:#A9B4BD;      /* small print on the board (fnText) */
  --sk-acc:#9FC1DB;      /* accent, large text */
  --sk-acc2:#9FC1DB;     /* accent, small text */
  --sk-line:#3A4149;     /* hairlines */
  --sk-chip:rgba(236,239,241,.06);
  --sk-chipbd:rgba(236,239,241,.22);
  --sk-focus:#9FC1DB;    /* focus ring on the board */
  --sk-chalk:#ECEFF1;    /* the chalk */
  --sk-chalkfx:url(#chalky);
  --sk-glow:none;
  --sk-props:1;          /* the chalk stick and duster on the ledge */
  --sk-ledge:#2F353C; --sk-ledge2:#454D56;
  --sk-tex:radial-gradient(55% 38% at 16% 26%,rgba(236,239,241,.045),transparent 70%),radial-gradient(45% 40% at 84% 74%,rgba(236,239,241,.04),transparent 70%);
  --k-dg:#2C3138; --k-df:#ECEFF1;   /* digit keys */
  --k-og:#343B44; --k-of:#C8D6E0;   /* operator keys */
  --k-fg:#282E35; --k-ff:#A9B4BD;   /* function keys */
  --k-af:#D8A6A0;                   /* clear and back (on fnBg) */
  --k-eg:#5F87A8; --k-ef:#F2F6F9;   /* equals */
  --k-bd:transparent; --k-sh:none; --k-r:14px; --k-font:var(--sys);
  --d-fg:#ECEFF1; --d-pv:#8B949C;   /* display, and the live preview line */
  color-scheme:dark;
}

/* ---------- the other six skins (Skins.kt; "web" = a web-only value, see the header) ---------- */
:root:is([data-skin="ledger"],:has(#sk-ledger:checked)){
  --sk-bg:#F4EDDE; --sk-ink:#2B2620; --sk-text:#4A4234; --sk-dim:#62584A; /* web: fnText #6E6350 darkened for the ruled paper */
  --sk-acc:#A33B2E; --sk-acc2:#A33B2E; --sk-line:#D8C9A8;
  --sk-chip:rgba(43,38,32,.05); --sk-chipbd:rgba(43,38,32,.28); --sk-focus:#2B2620;
  --sk-chalk:#3A2F26; --sk-chalkfx:none; --sk-glow:none; --sk-props:0;
  --sk-ledge:#D8C9A8; --sk-ledge2:#E9DDC4;
  --sk-tex:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(110,99,80,.16) 31px 32px);
  --k-dg:#EDE3CE; --k-df:#2B2620; --k-og:#E3D5B8; --k-of:#4A4234; --k-fg:#E9DDC4; --k-ff:#6E6350; --k-af:#A33B2E;
  --k-eg:#A33B2E; --k-ef:#F8F3E7; --k-bd:#D8C9A8; --k-sh:none; --k-r:8px; --k-font:var(--serif);
  --d-fg:#2B2620; --d-pv:#6E6350; /* web: the app's preview #8A7F6C is 3.4:1 on paper */
  color-scheme:light;
}
:root:is([data-skin="terminal"],:has(#sk-terminal:checked)){
  --sk-bg:#000000; --sk-ink:#33FF66; --sk-text:#33FF66; --sk-dim:#25B54A;
  --sk-acc:#66FF99; --sk-acc2:#66FF99; --sk-line:#1E5B2E;
  --sk-chip:rgba(51,255,102,.06); --sk-chipbd:rgba(51,255,102,.4); --sk-focus:#66FF99;
  --sk-chalk:#33FF66; --sk-chalkfx:drop-shadow(0 0 3px rgba(51,255,102,.7)); --sk-glow:0 0 14px rgba(51,255,102,.45); --sk-props:0;
  --sk-ledge:#0A1A0D; --sk-ledge2:#1E5B2E;
  --sk-tex:repeating-linear-gradient(to bottom,rgba(51,255,102,.045) 0 1px,transparent 1px 3px),radial-gradient(70% 60% at 50% 45%,rgba(51,255,102,.06),transparent 70%);
  --k-dg:#060D07; --k-df:#33FF66; --k-og:#0A1A0D; --k-of:#52FF80; --k-fg:#060D07; --k-ff:#25B54A; --k-af:#66FF99;
  --k-eg:#124D22; --k-ef:#66FF99; --k-bd:#1E5B2E; --k-sh:none; --k-r:2px; --k-font:var(--mono);
  --d-fg:#33FF66; --d-pv:#23A047; /* web: the app's preview #1E8C3E is 4.9:1 on black, lifted for the scanlines */
  color-scheme:dark;
}
:root:is([data-skin="porcelain"],:has(#sk-porcelain:checked)){
  --sk-bg:#F6F8FA; --sk-ink:#1F2937; --sk-text:#33415A; --sk-dim:#556274; /* web: fnText #64748B is 4.5:1 */
  --sk-acc:#3B82C4; --sk-acc2:#2A68A6; /* web: the accent is 3.8:1, large text only */ --sk-line:#D5DEE8;
  --sk-chip:rgba(31,41,55,.04); --sk-chipbd:rgba(31,41,55,.26); --sk-focus:#1F2937;
  --sk-chalk:#3B82C4; --sk-chalkfx:none; --sk-glow:none; --sk-props:0;
  --sk-ledge:#E7EDF4; --sk-ledge2:#FFFFFF;
  --sk-tex:radial-gradient(60% 45% at 72% 18%,rgba(255,255,255,.95),transparent 70%);
  --k-dg:#FFFFFF; --k-df:#1F2937; --k-og:#E7EDF4; --k-of:#33547A; --k-fg:#EDF1F6; --k-ff:#64748B; --k-af:#C05B5B;
  --k-eg:#3B82C4; --k-ef:#FFFFFF; --k-bd:transparent; --k-sh:0 1px 2px rgba(31,41,55,.14),0 0 0 1px rgba(31,41,55,.06); --k-r:18px; --k-font:var(--sys);
  --d-fg:#1F2937; --d-pv:#556274; /* web: the app's preview #94A1B2 is 2.5:1 */
  color-scheme:light;
}
:root:is([data-skin="ember"],:has(#sk-ember:checked)){
  --sk-bg:#171210; --sk-ink:#F3E4D3; --sk-text:#E5CFB6; --sk-dim:#B09479;
  --sk-acc:#E08A3C; --sk-acc2:#E08A3C; --sk-line:#3A2C22;
  --sk-chip:rgba(243,228,211,.06); --sk-chipbd:rgba(243,228,211,.24); --sk-focus:#E08A3C;
  --sk-chalk:#F3E4D3; --sk-chalkfx:url(#chalky); --sk-glow:none; --sk-props:0;
  --sk-ledge:#2F241B; --sk-ledge2:#4A382A;
  --sk-tex:radial-gradient(90% 55% at 50% 118%,rgba(224,138,60,.16),transparent 70%);
  --k-dg:#241D18; --k-df:#F3E4D3; --k-og:#2F241B; --k-of:#E5BE93; --k-fg:#291F1A; --k-ff:#B09479; --k-af:#D97B63;
  --k-eg:#C96F23; --k-ef:#FFF3E4; --k-bd:transparent; --k-sh:none; --k-r:14px; --k-font:var(--sys);
  --d-fg:#F3E4D3; --d-pv:#9C8670; /* web: the app's preview #8F7B67 is 4.6:1, lifted a little */
  color-scheme:dark;
}
:root:is([data-skin="drift"],:has(#sk-drift:checked)){
  --sk-bg:#191B2A; --sk-ink:#DCD9F0; --sk-text:#C9C4E8; --sk-dim:#9BA0C4;
  --sk-acc:#9D8BE0; --sk-acc2:#A897E6; --sk-line:#2F3350;
  --sk-chip:rgba(220,217,240,.06); --sk-chipbd:rgba(220,217,240,.24); --sk-focus:#A897E6;
  --sk-chalk:#DCD9F0; --sk-chalkfx:url(#chalky); --sk-glow:none; --sk-props:0;
  --sk-ledge:#23263C; --sk-ledge2:#35395A;
  --sk-tex:radial-gradient(90% 60% at 82% -10%,rgba(157,139,224,.18),transparent 70%);
  --k-dg:#23263C; --k-df:#DCD9F0; --k-og:#2B2F4C; --k-of:#BCB2E8; --k-fg:#262A44; --k-ff:#9BA0C4; --k-af:#D9A0C0;
  --k-eg:#7B67C9; --k-ef:#F4F1FF; --k-bd:transparent; --k-sh:none; --k-r:22px; --k-font:var(--sys);
  --d-fg:#DCD9F0; --d-pv:#8F93B4; /* web: the app's preview #7B7F9E is 4.4:1 */
  color-scheme:dark;
}
:root:is([data-skin="blueprint"],:has(#sk-blueprint:checked)){
  --sk-bg:#0F2D52; --sk-ink:#EAF3FB; --sk-text:#D6E9F8; --sk-dim:#B8D4EA; /* web: fnText #9FC0DC, lifted for the grid lines */
  --sk-acc:#8FD4FF; --sk-acc2:#A6DEFF; /* web: small accent lifted for the grid lines */ --sk-line:#2A4E7A;
  --sk-chip:rgba(234,243,251,.06); --sk-chipbd:rgba(207,227,244,.45); --sk-focus:#8FD4FF;
  --sk-chalk:#EAF3FB; --sk-chalkfx:none; --sk-glow:none; --sk-props:0;
  --sk-ledge:#102C4F; --sk-ledge2:#2A4E7A;
  --sk-tex:linear-gradient(rgba(207,227,244,.09) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(90deg,rgba(207,227,244,.09) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(rgba(207,227,244,.045) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(207,227,244,.045) 1px,transparent 1px) 0 0/24px 24px;
  --k-dg:#123259; --k-df:#EAF3FB; --k-og:#16406E; --k-of:#D6E9F8; --k-fg:#102C4F; --k-ff:#9FC0DC; --k-af:#FFFFFF;
  --k-eg:#E6F1FA; --k-ef:#0F2D52; --k-bd:#CFE3F4; --k-sh:none; --k-r:4px; --k-font:var(--mono);
  --d-fg:#EAF3FB; --d-pv:#8FB1D0; /* web: the app's preview #7FA3C4, lifted for the grid lines */
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
[id]{scroll-margin-top:calc(var(--navh) + 12px)}
body{background:var(--bg);color:var(--text);font:16px/1.62 var(--sys);overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:var(--mist);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#E3F0FA}
strong{color:var(--ink);font-weight:650}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
button{font:inherit;color:inherit}

/* focus: a chalk-blue ring with a dark halo; on the board it follows the skin */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 5px rgba(21,24,28,.92)}
.skip{position:absolute;left:-999px;top:8px;z-index:90;background:var(--text);color:#15191D;padding:.7em 1.1em;border-radius:10px;font-weight:650;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{left:8px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--navh);background:var(--navbg);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled,html:not(.js) .nav{border-bottom-color:var(--line)}
.navin{max-width:1240px;margin:0 auto;height:100%;padding:0 12px;display:flex;align-items:center;gap:8px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);min-height:44px;padding-right:4px}
.logo-s{width:32px;height:32px;flex:none}
.brand .chalk{opacity:.8;transition:opacity .45s}
.brand:hover .chalk{opacity:1}
.wordmark{font-weight:650;font-size:.84rem;letter-spacing:.34em}
.navlinks{display:none}
.getbtn{margin-left:auto;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:var(--accent);color:var(--onaccent);font-weight:700;font-size:.86rem;text-decoration:none;white-space:nowrap}
.getbtn:hover{background:#BCD6EA;color:var(--onaccent)}
.navmenu{position:relative}
.navmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);color:var(--text);font-size:.86rem;background:rgba(40,46,53,.7)}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.navmenu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.navmenu nav{position:absolute;right:0;top:calc(100% + 10px);min-width:210px;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.navmenu nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--text);text-decoration:none}
.navmenu nav a:hover{background:var(--panel3);color:var(--ink)}
@media (min-width:370px){.navin{padding:0 16px;gap:10px}.wordmark{font-size:.9rem;letter-spacing:.4em}.getbtn{padding:0 16px;font-size:.9rem}}
@media (min-width:820px){
  .navlinks{display:flex;gap:2px;margin-left:auto}
  .navlinks a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:999px;color:var(--text2);text-decoration:none;font-size:.93rem}
  .navlinks a:hover{color:var(--ink);background:rgba(236,239,241,.06)}
  .getbtn{margin-left:8px}
  .navmenu{display:none}
}
@media (max-width:349.98px){.wordmark{display:none}}

/* ---------- the hero: the board ---------- */
.hero{position:relative;background-color:var(--sk-bg);color:var(--sk-text);transition:background-color .6s ease,color .6s ease;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sk-tex);pointer-events:none}
.hero-in{max-width:1240px;margin:0 auto;padding:calc(var(--navh) + 18px) var(--pad) 26px;display:grid;gap:18px;justify-items:start;
  grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "chalk" "calc" "skins"}
.hero-copy{grid-area:copy;max-width:36rem}
.eyebrow{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--sk-acc2);transition:color .6s}
.hero h1{font-family:var(--display);font-weight:760;font-size:clamp(2.35rem,10.4vw,3.3rem);line-height:.98;letter-spacing:-.022em;color:var(--sk-ink);margin-top:10px;text-shadow:var(--sk-glow);transition:color .6s}
.hero h1 em{font-style:normal;color:var(--sk-acc);position:relative;white-space:nowrap}
.lede{margin-top:12px;color:var(--sk-text);font-size:1.02rem;line-height:1.5;max-width:30rem;transition:color .6s}
.pillars{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pillars li{border:1px solid var(--sk-chipbd);background:var(--sk-chip);color:var(--sk-ink);font-size:.8rem;padding:4px 11px;border-radius:999px;white-space:nowrap;transition:color .6s,border-color .6s}
.store-row{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;margin-top:12px}
.store-row a{display:inline-flex;border-radius:10px}
.store-row a:focus-visible{outline-color:var(--sk-focus)}
.play-badge{height:64px;width:auto}
@media (max-width:359px){.play-badge{height:56px}}

/* the chalk corner (drawn by slate.js; decoration) */
.chalkzone{grid-area:chalk;width:100%;max-width:560px;min-height:10px}
.chalkzone svg{width:100%;height:auto;overflow:visible}
.chalkzone .st{fill:none;stroke:var(--sk-chalk);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.2;stroke-dashoffset:1;opacity:0}
.chalkzone .lbl .st{opacity:0;stroke-width:3.4}
.chalkzone .sum .st{stroke-width:2.3}
.chalkzone .ink{filter:var(--sk-chalkfx);transition:opacity .4s}
.chalkzone .lbl{opacity:.62}
.chalkzone .done .st{stroke-dashoffset:0;opacity:1}
html:not(.js) .chalkzone{display:none}

/* the calculator: a working copy of Slate's basic keys */
.calc{grid-area:calc;width:100%;max-width:372px;justify-self:center;position:relative}
.calc-h{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--sk-dim);margin-bottom:8px;transition:color .6s}
.slab{border-radius:28px;padding:14px;background:var(--sk-bg);border:1px solid var(--sk-line);box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 6px color-mix(in srgb,var(--sk-line) 45%,transparent);transition:background-color .6s,border-color .6s}
.screen{min-height:122px;padding:8px 8px 12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;text-align:right;font-family:var(--k-font);overflow:hidden}
.tape{font-size:.95rem;color:var(--d-pv);min-height:1.5em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;transition:color .6s}
.expr{font-size:2.5rem;line-height:1.12;font-weight:300;color:var(--d-fg);overflow-wrap:anywhere;max-width:100%;text-shadow:var(--sk-glow);transition:color .6s}
.expr.long{font-size:1.9rem}.expr.longer{font-size:1.45rem}
.prev{font-size:1.5rem;line-height:1.3;color:var(--d-pv);min-height:1.3em;transition:color .6s}
.prev.err{color:var(--k-af)}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.key{font-family:var(--k-font);font-size:1.55rem;line-height:1;min-height:56px;border-radius:var(--k-r);border:1px solid var(--k-bd);box-shadow:var(--k-sh);cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:var(--k-dg);color:var(--k-df);transition:background-color .5s,color .5s,border-color .5s,border-radius .5s,transform .08s,filter .12s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.key.op{background:var(--k-og);color:var(--k-of)}
.key.fn{background:var(--k-fg);color:var(--k-ff)}
.key.act{background:var(--k-fg);color:var(--k-af)}
.key.eq{background:var(--k-eg);color:var(--k-ef);font-weight:600}
.key:hover{filter:brightness(1.08)}
.key:active,.key.hit{transform:scale(.95);filter:brightness(1.18)}
:root:is([data-skin="ledger"],[data-skin="porcelain"]) .key:active,:root:is([data-skin="ledger"],[data-skin="porcelain"]) .key.hit{filter:brightness(.92)}
.key:focus-visible{outline:2px solid var(--sk-focus);outline-offset:2px;box-shadow:none;border-radius:var(--k-r)}
.key[disabled]{cursor:default}
.key svg{width:26px;height:26px}
.calc-note{margin-top:10px;font-size:.84rem;line-height:1.45;color:var(--sk-dim);max-width:34ch;transition:color .6s}
html:not(.js) .calc-note .js-only{display:none}

/* the skin switcher: native radios, so it works with no script (the :has() rules above) */
.skins{grid-area:skins;border:0;width:100%;max-width:372px;justify-self:center}
.skins legend{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--sk-dim);margin-bottom:8px;padding:0;transition:color .6s}
.skin-list{display:flex;flex-wrap:wrap;gap:6px}
.sw{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 8px;border:1px solid var(--sk-chipbd);border-radius:999px;background:var(--sk-chip);color:var(--sk-ink);font-size:.9rem;cursor:pointer;transition:border-color .3s,background-color .3s,color .6s}
.sw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.sw .dot{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(128,128,128,.55);position:relative;overflow:hidden}
.sw .dot::after{content:"";position:absolute;right:3px;bottom:3px;width:8px;height:8px;border-radius:50%}
.sw:has(input:checked){border-color:var(--sk-ink);box-shadow:inset 0 0 0 1px var(--sk-ink)}
.sw:has(input:focus-visible){outline:2px solid var(--sk-focus);outline-offset:3px}
.sw .lock{width:12px;height:12px;opacity:.8}
.d-chalk{background:#22262B}.d-chalk::after{background:#ECEFF1}
.d-ledger{background:#F4EDDE}.d-ledger::after{background:#A33B2E}
.d-terminal{background:#000}.d-terminal::after{background:#33FF66}
.d-porcelain{background:#F6F8FA}.d-porcelain::after{background:#3B82C4}
.d-ember{background:#171210}.d-ember::after{background:#E08A3C}
.d-drift{background:#191B2A}.d-drift::after{background:#9D8BE0}
.d-blueprint{background:#0F2D52}.d-blueprint::after{background:#8FD4FF}
.skins .hint{margin-top:8px;font-size:.84rem;line-height:1.45;color:var(--sk-dim);transition:color .6s}

/* the chalk ledge along the bottom of the board */
.ledge{position:relative;height:16px;background:linear-gradient(var(--sk-ledge2),var(--sk-ledge));box-shadow:0 -2px 0 rgba(0,0,0,.18),0 6px 14px rgba(0,0,0,.35);transition:background .6s}
.ledge i{position:absolute;bottom:13px;opacity:var(--sk-props);transition:opacity .5s}
.ledge .stick{left:14%;width:52px;height:9px;border-radius:5px;background:linear-gradient(#FFFFFF,#D9DEE2);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.ledge .stick2{left:calc(14% + 60px);width:24px;height:8px;border-radius:4px;background:linear-gradient(#D6E6F2,#9FC1DB);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.ledge .duster{right:clamp(40px,24%,340px);width:86px;height:22px;border-radius:5px;background:linear-gradient(#7A5A3C 0 44%,#565E68 44%);box-shadow:0 3px 5px rgba(0,0,0,.35)}

/* phones: the store row stays in the first screen; the board follows */
@media (min-width:600px){
  .hero-in{justify-items:center;text-align:center}
  .hero-copy{max-width:40rem}
  .lede{margin-left:auto;margin-right:auto}
  .pillars,.store-row{justify-content:center}
  .play-badge{height:72px}
  .calc-note,.skins .hint{margin-left:auto;margin-right:auto}
  .skin-list{justify-content:center}
}
/* desktop: copy and chalk on the left, the calculator and the skins on the right */
@media (min-width:960px){
  .hero-in{min-height:calc(100svh - 16px);max-height:none;text-align:left;justify-items:start;align-items:center;column-gap:clamp(28px,4vw,64px);row-gap:10px;padding-top:calc(var(--navh) + 30px);padding-bottom:34px;
    grid-template-columns:minmax(0,1fr) 372px;grid-template-rows:auto auto 1fr;grid-template-areas:"copy calc" "chalk calc" ". skins"}
  .hero-copy{align-self:end}
  .chalkzone{align-self:start;margin-top:10px}
  .calc{align-self:end}
  .skins{align-self:start}
  .lede{margin-left:0}
  .pillars,.store-row{justify-content:flex-start}
  .hero h1{font-size:clamp(3.2rem,5.6vw,5rem)}
  .lede{font-size:1.14rem}
  .play-badge{height:76px}
  .calc-note,.skins .hint{margin-left:0}
  .skin-list{justify-content:flex-start}
}
@media (min-width:1180px){
  .hero-in{grid-template-columns:minmax(0,1fr) 372px 158px;grid-template-rows:auto auto;grid-template-areas:"copy calc skins" "chalk calc skins"}
  .calc{align-self:center}
  .skins{align-self:center}
  .skin-list{flex-direction:column;flex-wrap:nowrap}
  .sw{width:100%}
}

/* ---------- sections ---------- */
main > section:not(.hero){padding:clamp(56px,8vw,104px) 0}
.band{background:var(--bg2)}
.kicker{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700}
h2{font-family:var(--display);font-weight:720;font-size:clamp(2rem,6.2vw,3.35rem);line-height:1.04;letter-spacing:-.018em;color:var(--ink);margin-top:10px;max-width:20ch}
h3{color:var(--ink)}
.intro{margin-top:14px;max-width:38rem;color:var(--text2);font-size:1.06rem;line-height:1.6}
.caption{margin-top:14px;color:var(--dim);font-size:.86rem}

/* the promo cards */
.cards{background:radial-gradient(70% 55% at 50% 0%,rgba(159,193,219,.08),transparent 70%),var(--bg)}
.cardstrip{margin-top:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:6px var(--pad) 18px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.cardstrip:focus-visible,.shotstrip:focus-visible{outline-offset:-4px}
.cardrow{display:flex;gap:16px;width:max-content}
.card{flex:0 0 auto;width:min(80vw,380px);scroll-snap-align:start}
.card img{width:100%;height:auto;border-radius:22px;border:1px solid var(--line);box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 70px -30px rgba(159,193,219,.35);background:var(--panel)}
@media (min-width:960px){
  .cardstrip{overflow:visible;padding:6px var(--pad) 8px}
  .cardrow{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;width:auto;max-width:1160px;margin:0 auto}
  .card{width:auto}
  .cards .caption{margin-top:28px}
}

/* the tools: a keypad of tools */
.toolpad{list-style:none;display:grid;gap:10px;margin-top:30px}
.tool{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;padding:18px 18px 18px 16px;border-radius:20px;background:var(--panel2);border:1px solid var(--line)}
.tool.pro{background:var(--panel3)}
.tool svg{width:44px;height:44px;grid-row:span 2;color:var(--accent)}
.tool.pro svg{color:var(--text2)}
.tool h3{font-family:var(--display);font-weight:680;font-size:1.3rem;line-height:1.2;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tool p{margin-top:4px;color:var(--text2);font-size:.96rem;line-height:1.5}
.tag{font-family:var(--sys);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px;line-height:1.2}
.tag.free{border:1px solid var(--accent);color:var(--mist)}
.tag.pro{background:var(--accent);color:var(--onaccent)}
.toolnote{margin-top:22px;max-width:44rem;color:var(--text2)}
@media (min-width:600px){.toolpad{grid-template-columns:1fr 1fr;gap:12px}}
@media (min-width:1040px){.toolpad{grid-template-columns:repeat(4,1fr)}.tool{grid-template-columns:1fr;padding:22px}.tool svg{grid-row:auto;margin-bottom:14px}}

/* history: the tape */
.split{display:grid;gap:28px;align-items:center}
.roll{position:relative;max-width:420px;padding:18px 0 22px;border-radius:6px 6px 0 0;background:#ECEFF1;color:#22262B;box-shadow:0 30px 60px -18px rgba(0,0,0,.6);
  -webkit-mask:linear-gradient(#000 calc(100% - 12px),transparent calc(100% - 12px)),conic-gradient(from -45deg at 50% calc(100% - 12px),#000 90deg,transparent 0) 0 100%/16px 12px repeat-x;
  mask:linear-gradient(#000 calc(100% - 12px),transparent calc(100% - 12px)),conic-gradient(from -45deg at 50% calc(100% - 12px),#000 90deg,transparent 0) 0 100%/16px 12px repeat-x}
.roll::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;border-radius:6px 6px 0 0;background:linear-gradient(#C9D0D6,#ECEFF1)}
.roll ol{list-style:none;padding:6px 22px 0}
.roll li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 0;border-bottom:1px dashed #A9B4BD;font-variant-numeric:tabular-nums}
.roll li:last-child{border-bottom:0}
.roll .tl{grid-row:span 2;align-self:start;margin-top:3px;font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#22262B;color:#ECEFF1}
.roll .q{color:#4A535D;font-size:.92rem;text-align:right}
.roll .a{font-size:1.28rem;text-align:right;color:#15191D;font-weight:600}
.roll li.new{animation:rollin .45s var(--ease)}
@keyframes rollin{from{opacity:0;transform:translateY(-10px)}}
.roll .rollnote{padding:4px 22px 0;color:#4A535D;font-size:.84rem}
html:not(.js) .roll .rollnote{display:none}
@media (min-width:900px){.split{grid-template-columns:1.1fr 1fr;gap:56px}.split.rev{grid-template-columns:1fr 1.1fr}}

/* skins and sounds */
.pairs{list-style:none;display:grid;gap:10px;margin-top:30px}
.pair{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 16px 12px 12px;border-radius:18px;background:var(--panel2);border:1px solid var(--line)}
.mini{display:grid;grid-template-columns:repeat(3,14px);gap:3px;padding:7px;border-radius:10px}
.mini i{height:14px;border-radius:3px}
.pair h3{font-family:var(--display);font-weight:680;font-size:1.12rem;line-height:1.2}
.pair p{color:var(--text2);font-size:.92rem;line-height:1.4}
.m-chalk{background:#22262B;box-shadow:inset 0 0 0 1px #3A4149}.m-chalk i{background:#2C3138}.m-chalk i:nth-child(2){background:#343B44}.m-chalk i:nth-child(3){background:#5F87A8}
.m-ledger{background:#F4EDDE}.m-ledger i{background:#EDE3CE;box-shadow:inset 0 0 0 1px #D8C9A8}.m-ledger i:nth-child(2){background:#E3D5B8}.m-ledger i:nth-child(3){background:#A33B2E}
.m-terminal{background:#000;box-shadow:inset 0 0 0 1px #1E5B2E}.m-terminal i{background:#060D07;box-shadow:inset 0 0 0 1px #1E5B2E}.m-terminal i:nth-child(2){background:#0A1A0D}.m-terminal i:nth-child(3){background:#124D22}
.m-porcelain{background:#F6F8FA}.m-porcelain i{background:#FFFFFF;box-shadow:0 0 0 1px rgba(31,41,55,.12)}.m-porcelain i:nth-child(2){background:#E7EDF4}.m-porcelain i:nth-child(3){background:#3B82C4}
.m-ember{background:#171210;box-shadow:inset 0 0 0 1px #3A2C22}.m-ember i{background:#241D18}.m-ember i:nth-child(2){background:#2F241B}.m-ember i:nth-child(3){background:#C96F23}
.m-drift{background:#191B2A;box-shadow:inset 0 0 0 1px #2F3350}.m-drift i{background:#23263C;border-radius:6px}.m-drift i:nth-child(2){background:#2B2F4C}.m-drift i:nth-child(3){background:#7B67C9}
.m-blueprint{background:#0F2D52}.m-blueprint i{background:#123259;box-shadow:inset 0 0 0 1px #CFE3F4;border-radius:1px}.m-blueprint i:nth-child(2){background:#16406E}.m-blueprint i:nth-child(3){background:#E6F1FA}
.trypair{display:flex;align-items:center;justify-content:center;background:transparent;border-style:dashed;border-color:var(--line2)}
.trylink{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--accent);color:var(--mist);text-decoration:none;font-weight:650}
.trylink:hover{background:rgba(159,193,219,.1);color:var(--ink)}
@media (min-width:700px){.pairs{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.pairs{grid-template-columns:repeat(4,1fr)}.pair{grid-template-columns:auto 1fr;grid-template-rows:auto auto}.pair .tag{grid-column:2;justify-self:start}.trypair{display:flex}}

/* the six real screens */
.shotstrip{margin-top:30px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:6px var(--pad) 16px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.shotrow{display:flex;gap:14px;width:max-content}
.shotrow figure{width:min(56vw,230px);scroll-snap-align:start}
.shotrow img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.shotrow figcaption{margin-top:8px;font-size:.84rem;line-height:1.4;color:var(--dim)}
@media (min-width:1100px){.shotstrip{overflow:visible}.shotrow{display:grid;grid-template-columns:repeat(6,1fr);width:auto;max-width:1160px;margin:0 auto}.shotrow figure{width:auto}}

/* cast: the TV and the phone */
.castscene{position:relative;max-width:580px;width:100%;margin:0 auto;padding-bottom:3%}
.tvwrap{width:82%}
.tv{position:relative;aspect-ratio:16/9.4;border-radius:10px;background:#07080A;padding:2.2%;box-shadow:0 0 0 1px #3A4149,0 22px 44px -12px rgba(0,0,0,.6),0 0 70px -24px color-mix(in srgb,var(--sk-acc) 55%,transparent)}
.tvscreen{position:relative;height:100%;border-radius:3px;overflow:hidden;background-color:var(--sk-bg);color:var(--d-fg);font-family:var(--k-font);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:6% 9% 11%;transition:background-color .6s,color .6s;container-type:inline-size}
.tvscreen p{position:relative;text-align:right;line-height:1.15}
.tv-k{position:absolute!important;top:7%;left:9%;font-weight:700;letter-spacing:.3em;font-size:max(11px,3.1cqi);color:var(--sk-acc2)}
.tv-tape{color:var(--d-pv);font-size:max(12px,3.6cqi);min-height:1.2em}
.tv-expr{font-size:max(22px,10.5cqi);font-weight:300;color:var(--d-fg);text-shadow:var(--sk-glow)}
.tv-prev{font-size:max(15px,5.2cqi);color:var(--sk-acc2);min-height:1.2em;margin-top:2%}
.tv-foot{position:absolute!important;bottom:5%;left:0;right:0;text-align:center!important;font-size:max(10px,2.2cqi);letter-spacing:.3em;color:var(--d-pv)}
.tvstand{width:30%;height:14px;margin:0 auto;border-radius:0 0 10px 10px;background:linear-gradient(#1B1F23,#0E1012)}
.minip{position:absolute;right:0;bottom:0;width:21%;aspect-ratio:9/18;border-radius:16%/8%;background:#0C0D0F;padding:3.2%;rotate:-5deg;box-shadow:0 0 0 1px #4A535D,0 24px 40px rgba(0,0,0,.6)}
.minip .ms{height:100%;border-radius:12%/6%;background:var(--sk-bg);display:grid;grid-template-columns:repeat(4,1fr);align-content:end;gap:5%;padding:10% 9%;transition:background-color .6s}
.minip .ms i{aspect-ratio:1;border-radius:calc(var(--k-r)*.4);background:var(--k-dg);transition:background-color .5s,transform .12s,filter .12s;box-shadow:inset 0 0 0 1px var(--k-bd)}
.minip .ms i.o{background:var(--k-og)}.minip .ms i.f{background:var(--k-fg)}.minip .ms i.e{background:var(--k-eg)}
.minip .ms i.hit{transform:scale(.8);filter:brightness(1.6)}
.waves{position:absolute;right:5%;top:3%;width:10%;aspect-ratio:1;color:var(--accent);transform:scaleX(-1)}
.waves path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;opacity:.25}
html.js.enh .waves path{animation:wave 2.4s ease-in-out infinite}
html.js.enh .waves path:nth-child(2){animation-delay:.3s}
html.js.enh .waves path:nth-child(3){animation-delay:.6s}
@keyframes wave{0%,100%{opacity:.2}40%{opacity:.95}}
.castcopy .fine{margin-top:16px;color:var(--dim);font-size:.92rem}
.android{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 14px;border-radius:999px;border:1px solid var(--line2);color:var(--text);font-size:.9rem}

/* the film */
.promo{margin-top:26px}
.promo video{width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:20px;border:1px solid var(--line);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.promo .note{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:baseline;margin-top:12px;color:var(--dim);font-size:.88rem}
.promo .note a{display:inline-flex;align-items:center;min-height:24px}

/* free and Pro */
.plans{display:grid;gap:16px;margin-top:30px}
.plan{padding:26px;border-radius:26px;background:var(--panel2);border:1px solid var(--line)}
.plan.pro{background:radial-gradient(120% 90% at 100% 0%,rgba(159,193,219,.16),transparent 60%),var(--panel3);border-color:var(--accent)}
.plan h3{font-family:var(--display);font-weight:720;font-size:1.7rem;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plan h3 small{font-family:var(--sys);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-weight:700}
.plan ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.plan li{position:relative;padding-left:22px;color:var(--text)}
.plan li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:2px;border-radius:2px;background:var(--accent)}
.plan:not(.pro) li::before{background:var(--text2)}
.plan-note{margin-top:16px;color:var(--text2);font-size:.96rem}
@media (min-width:820px){.plans{grid-template-columns:1fr 1fr;gap:22px}.plan{padding:32px}}

/* quiet by design */
.quiet{display:grid;gap:18px;margin-top:30px}
.netpair{padding:24px;border-radius:24px;background:linear-gradient(160deg,rgba(159,193,219,.1),rgba(40,46,53,.9) 55%);border:1px solid rgba(159,193,219,.28)}
.netpair .big{font-family:var(--display);font-weight:650;font-size:clamp(1.25rem,3.4vw,1.55rem);line-height:1.28;color:var(--ink)}
.netpair p{margin-top:12px;color:var(--text2)}
.netpair .fine{font-size:.92rem;color:var(--dim)}
.notlist{padding:24px;border-radius:24px;background:var(--panel);border:1px solid var(--line)}
.notlist .lead{color:var(--text2)}
.nots{list-style:none;margin-top:12px;display:grid;gap:2px}
.nots li{position:relative;padding:7px 0 7px 22px;color:var(--text);border-bottom:1px solid var(--line)}
.nots li:last-child{border-bottom:0}
.nots li::before{content:"";position:absolute;left:2px;top:50%;width:10px;height:2px;background:var(--accent);border-radius:2px}
@media (min-width:900px){.quiet{grid-template-columns:1.1fr 1fr;gap:22px}.netpair,.notlist{padding:30px}}

/* get */
.getbox{position:relative;text-align:center;padding:44px 20px 40px;border-radius:32px;background:radial-gradient(80% 120% at 50% 0%,rgba(159,193,219,.16),transparent 65%),var(--panel);border:1px solid var(--line2);overflow:hidden}
.getbox .logo-s{width:60px;height:60px;margin:0 auto}
.getbox h2{margin:8px auto 0}
.getbox p{max-width:34rem;margin:14px auto 0;color:var(--text2)}
.getbox .store-row{justify-content:center;margin-top:20px}
.getbox .store-row a:focus-visible{outline-color:var(--accent)}
.getbox .fine{font-size:.92rem;color:var(--dim);margin-top:16px}
@media (min-width:600px){.getbox .play-badge{height:76px}}

/* footer */
.foot{border-top:1px solid var(--line);padding:34px 0 88px;color:var(--dim);font-size:.92rem;background:var(--bg)}
.foot .family{color:var(--text2);max-width:44rem}
.footlinks{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:16px}
.footlinks a{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;margin-left:-10px;margin-right:6px;color:var(--text2);text-decoration:none;border-radius:8px}
.footlinks a:hover{color:var(--ink);text-decoration:underline}
.foot .co{margin-top:12px}
.foot .co a,.foot .family a{color:var(--text2)}
.legal-note{margin-top:10px;color:var(--dim);font-size:.82rem;line-height:1.5}

/* the Pause motion chip */
.motion{position:fixed;right:12px;bottom:12px;z-index:60;font:inherit;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:rgba(21,24,28,.94);border:1px solid rgba(159,193,219,.6);border-radius:999px;padding:0 14px;min-height:40px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.motion::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--accent)}
.motion[aria-pressed="true"]{border-color:var(--accent);color:var(--ink)}
.motion[aria-pressed="true"]::before{background:var(--accent)}
html.rm .motion,html:not(.js) .motion{display:none}
@media (max-width:599.98px){.motion .mw{display:none}}

/* ---------- motion (only with script, never under reduced motion, stopped by the chip) ---------- */
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important}
.rv{transition:opacity .8s ease,transform .9s var(--ease);transition-delay:var(--d,0s)}
html.js.enh:not(.failsafe) .rv:not(.in){opacity:0;transform:translateY(20px)}
.cardrow .card:nth-child(2),.plans .plan:nth-child(2),.quiet .notlist{--d:.12s}
.cardrow .card:nth-child(3){--d:.24s}
.toolpad .tool:nth-child(4n+2),.pairs .pair:nth-child(4n+2){--d:.06s}
.toolpad .tool:nth-child(4n+3),.pairs .pair:nth-child(4n+3){--d:.12s}
.toolpad .tool:nth-child(4n+4),.pairs .pair:nth-child(4n+4){--d:.18s}
html.rm{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}