/* handyaddons.com — shared stylesheet
   Palette sampled from the Cell Editor add-on itself:
   editor background #ECF0F3, brand green #00A57C, syntax tokens as rendered in-app. */

:root{
  /* The add-on itself has no dark theme and every screenshot on this site is
     light, so the page declares itself light-only. This also switches off
     Chrome's automatic darkening on Android, which would otherwise repaint the
     editor replica's sampled greys into something that no longer matches what
     people actually see in Google Sheets. */
  color-scheme: only light;

  --paper:#fff; --grid:#eaeee9; --grid-strong:#d7dcd6;
  --ink:#10231b; --ink-2:#51635a; --ink-3:#89988f;
  --green:#00815f; --green-hi:#00a57c; --green-deep:#00644a; --green-wash:#e8f6f1;
  --sel:#1668c4;
  --code-bg:#edf0f3;      /* formula input field */
  --gutter-bg:#f9f9f9;    /* line-number column and the toolbars (--raise) */
  --app-line:#ccc;        /* every border inside the add-on (--line) */
  --app-ink:#202124;      /* --ink */
  --app-muted:#555;       /* --muted, also brackets and separators */
  /* syntax tokens, copied from the add-on's CodeMirror theme */
  --t-fn:#1967d2;         /* cm-keyword, bold */
  --t-ref:#1a73e8;        /* cm-ref-0 */
  --t-ref2:#d93025;       /* cm-ref-1 */
  --t-str:#8430ce;        /* cm-string and cm-atom */
  --t-num:#b06000;        /* cm-number */
  --t-plain:#555;
  --t-gutter:#999;
  --app-green:#34a853;    /* --green-dark, the switch when FORMULA is on */
  --app-on:#188038;       /* the active mode label */
  --tip-bg:#202124; --tip-fg:#e8eaed; --tip-fn:#8ab4f8; --tip-arg:#fdd663;
  --err:#c5221f; --warn:#8a5b00;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0;color:var(--ink);background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:100% 32px,132px 100%;
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--sel);outline-offset:3px;border-radius:3px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;border-radius:8px;z-index:80;border:1px solid var(--grid-strong)}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--grid-strong)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:96px}
.brand{display:flex;align-items:center;gap:13px;font-weight:600;letter-spacing:-.03em;text-decoration:none;font-size:40px}
.brand img{width:52px;height:52px;border-radius:9px}
/* one word, two weights: the seam is visible without breaking the name */
.wm i{font-style:normal;font-weight:400;letter-spacing:-.02em}
.foot .brand{font-size:28px}
.foot .brand img{width:38px;height:38px}
.nav nav{display:none;gap:22px;font-size:15px;color:var(--ink-2);margin-left:auto}
.nav nav a{text-decoration:none}
.nav nav a{position:relative;padding:4px 0}
.nav nav a:hover{color:var(--green)}
.nav nav a.here{color:var(--ink);font-weight:500}
.nav nav a.here::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--green-hi);border-radius:2px}
@media(min-width:980px){.nav nav{display:flex}}
.nav .cta{margin-left:auto}
@media(min-width:980px){.nav .cta{margin-left:0}}

.btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:15.5px;font-weight:500;
  padding:12px 20px;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s}
.btn-solid{background:var(--green);color:#fff}
.btn-solid:hover{background:var(--green-deep)}
.btn-ghost{border-color:var(--grid-strong);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-sm{padding:8px 15px;font-size:14.5px}
/* shown while the Marketplace URL is not yet issued by Google */
.btn-pending{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;font-weight:500;padding:12px 20px;
  border-radius:8px;border:1px dashed var(--grid-strong);color:var(--ink-2);background:#fff}
.btn-pending::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-hi)}

/* ---------- hero ---------- */
.hero{padding:70px 0 58px}
.hero-grid{display:grid;gap:46px}
@media(min-width:1040px){.hero-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;align-items:start}}
/* The icon's height is computed from the two type sizes beside it, not from
   the height of the flex line — asking for the line height would be circular,
   since the icon is itself the tallest thing in that line. */
.eyebrow{--eb-name:clamp(28px,3vw,38px);--eb-sub:clamp(26px,2.7vw,34px);--eb-lh:1.18;
  display:flex;align-items:center;gap:16px;margin:0 0 26px}
.eyebrow img{flex:none;width:auto;aspect-ratio:1/1;
  height:calc(var(--eb-lh) * (var(--eb-name) + var(--eb-sub)))}
.eyebrow span{font-size:var(--eb-sub);line-height:var(--eb-lh);color:var(--ink-2);letter-spacing:-.028em}
/* the name keeps its own line, so "for" never separates from "Google Sheets" */
.eyebrow b{display:block;font-size:var(--eb-name);line-height:var(--eb-lh);
  font-weight:600;color:var(--ink);letter-spacing:-.035em}
.lede{font-size:19px;color:var(--ink-2);margin:0 0 28px;max-width:45ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.free{font-size:16.5px;font-weight:600;color:var(--green);margin:16px 0 0}

.before-cap,.after-cap{font-size:15.5px;color:var(--ink);margin:0 0 9px}
.after-cap{margin-top:20px}
.fbar{background:#fff;border:1px solid var(--grid-strong);border-radius:6px;display:flex;
  font-family:"Roboto Mono",Menlo,Consolas,monospace;font-size:13px}
.fbar .fx{padding:10px 13px;color:var(--ink-3);border-right:1px solid var(--grid-strong);flex:none}
.fbar .line{padding:10px 13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2);flex:1}

/* ---------- in-page replica of the add-on window ---------- */
.app{background:#fff;border:1px solid var(--app-line);border-radius:10px;overflow:hidden;position:relative;font-family:Arial,Helvetica,sans-serif;color:var(--app-ink);
  box-shadow:0 20px 48px -30px rgba(16,35,27,.55)}
.app-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--app-line)}
.app-head img{width:20px;height:20px}
.app-head b{font-weight:500;font-size:16px}
.app-head .x{margin-left:auto;color:var(--ink-3)}
.app-tools{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:9px 16px;border-bottom:1px solid var(--app-line);font-size:13px;color:var(--app-ink);background:var(--gutter-bg)}
.app-tools i{font-style:normal;width:26px;height:24px;border-radius:4px;display:grid;place-items:center}
.app-tools i.wide{width:auto;padding:0 7px;font-weight:700}
.app-tools .dim{opacity:.4}
.app-row{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--app-line);font-size:13px;background:var(--gutter-bg)}
.pill{border:1px solid var(--app-line);border-radius:3px;padding:3px 10px;background:#fff;color:var(--app-ink)}
.addr{border:1px solid var(--app-line);border-radius:3px;padding:3px 16px;
  font-family:"Roboto Mono",Menlo,Consolas,monospace;color:var(--sel);font-weight:500;background:#fff}
.arrows{display:flex;gap:4px;color:var(--ink-3)}
.arrows span{border:1px solid var(--app-line);border-radius:3px;width:24px;height:22px;display:grid;place-items:center;font-size:10px;background:#fff;color:var(--app-ink)}
.toggle{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--app-muted)}
.toggle .on{color:var(--app-on)}
.sw{width:38px;height:18px;border-radius:999px;background:var(--app-green);position:relative;flex:none}
.sw::after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.code-wrap{display:grid;grid-template-columns:46px minmax(0,1fr);background:var(--gutter-bg);border-top:1px solid var(--app-line);
  font-family:"Roboto Mono",Menlo,Consolas,monospace;font-size:14px;line-height:1.95}
.ln{color:var(--t-gutter);text-align:right;padding:14px 10px 14px 0;user-select:none;background:var(--gutter-bg);border-right:1px solid #ddd}
pre.code{margin:0;min-width:0;padding:14px 16px;white-space:pre;overflow-x:auto;color:var(--t-plain);background:var(--code-bg)}
.fn{color:var(--t-fn);font-weight:700}
.op{color:#c5221f}.ref{color:var(--t-ref)}.ref2{color:var(--t-ref2)}
.str{color:var(--t-str)}.num{color:var(--t-num)}
.app-sep{width:1px;height:20px;background:var(--app-line);margin:0 4px;flex:none}
.app-tools svg{width:20px;height:20px;display:block}
.grip{position:absolute;right:3px;bottom:3px;width:20px;height:20px;opacity:.55;
  background:linear-gradient(135deg,transparent 0 52%,var(--app-muted) 52% 68%,transparent 68%) 5px 5px/11px 11px no-repeat,
             linear-gradient(135deg,transparent 0 52%,var(--app-muted) 52% 68%,transparent 68%) 9px 9px/9px 9px no-repeat}
/* the signature tooltip, dark as it is in the add-on */
.sig{position:absolute;left:74px;top:214px;max-width:380px;z-index:2;
  padding:9px 12px;background:var(--tip-bg);color:var(--tip-fg);border-radius:6px;
  font-family:"Roboto Mono",Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;
  box-shadow:0 2px 12px rgba(0,0,0,.3)}
.sig .tfn{color:var(--tip-fn)}
.sig .arg{opacity:.6}
.sig .arg.on{opacity:1;color:var(--tip-arg);font-weight:700;text-decoration:underline}
.sig .desc{display:block;margin-top:6px;font-family:Arial,sans-serif;font-size:12px;opacity:.8}
@media(max-width:640px){.sig{display:none}}
.result{padding:10px 16px;border-top:1px solid var(--grid);font-size:13.5px;color:var(--app-muted);background:#fff}
.result b{font-family:"Roboto Mono",Menlo,Consolas,monospace;color:var(--ink);font-weight:500}
.app-foot{display:flex;flex-wrap:wrap;gap:10px;padding:12px 16px;border-top:1px solid var(--app-line)}
.app-foot span{border:1px solid var(--app-line);border-radius:20px;padding:6px 15px;font-size:13.5px;color:var(--app-ink);background:#fff}
.app-note{padding:9px 16px 20px;border-top:1px solid var(--app-line);font-size:12.5px;color:var(--app-muted);background:#fff}
.app-note code{font-family:"Roboto Mono",Menlo,Consolas,monospace;border:1px solid var(--app-line);border-radius:3px;padding:1px 5px;background:var(--gutter-bg);color:var(--app-ink)}

/* ---------- stat strip ---------- */
.strip{background:var(--ink);color:#fff}
.strip .wrap{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.strip .wrap{grid-template-columns:repeat(5,1fr)}}
.stat{padding:26px 10px 26px 0}
.stat b{display:block;font-size:34px;font-weight:600;letter-spacing:-.04em;line-height:1}
.stat span{font-size:14px;color:#9fb3aa}

/* ---------- sections ---------- */
section,section.wrap{padding-top:52px;padding-bottom:82px;scroll-margin-top:84px}
section.wrap{padding-left:24px;padding-right:24px}
h2{font-size:clamp(28px,3.5vw,38px);line-height:1.12;letter-spacing:-.032em;font-weight:600;margin:0 0 13px}
.sec-lede{color:var(--ink-2);max-width:62ch;margin:0 0 42px;font-size:18px}

.feat{display:grid;gap:1px;background:var(--grid);border:1px solid var(--grid);border-radius:10px;overflow:hidden}
@media(min-width:700px){.feat{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.feat{grid-template-columns:repeat(3,1fr)}}
.cellx{background:#fff;padding:26px 24px}
.cellx h3{font-size:17px;font-weight:600;margin:0 0 8px;letter-spacing:-.015em}
.cellx p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}

.split{display:grid;gap:32px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:52px;align-items:center}}
/* image-led variant: the screenshot gets the larger share */
@media(min-width:900px){.split.wide{grid-template-columns:1.42fr 1fr;gap:44px}}

/* a screenshot that runs the full width of the page */
.figure-full{margin:0 0 34px;border:1px solid var(--grid-strong);border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in;position:relative}
.figure-full figcaption{padding:15px 20px;font-size:16.5px;color:var(--ink);border-top:1px solid var(--grid)}

/* three supporting points under a full-width screenshot */
.points{display:grid;gap:1px;background:var(--grid);border:1px solid var(--grid);border-radius:10px;overflow:hidden}
@media(min-width:780px){.points{grid-template-columns:repeat(3,1fr)}}
.points div{background:#fff;padding:22px 22px 24px}
.points h3{font-size:16.5px;font-weight:600;margin:0 0 7px;letter-spacing:-.015em}
.points p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}
.shot{margin:0;border:1px solid var(--grid-strong);border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in;position:relative}
.shot figcaption{padding:13px 16px;font-size:16px;color:var(--ink);border-top:1px solid var(--grid)}

/* the frame holds the picture's own proportions, so nothing is ever squashed
   and the page does not jump while images load */
.shot-frame{width:100%;background:#fbfcfb;overflow:hidden}
.shot-frame img{width:100%;height:100%;object-fit:contain;display:block}

/* zoom affordance in the corner of every screenshot */
.shot::after,.figure-full::after{
  content:"\2922";position:absolute;right:12px;bottom:56px;width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.94);border:1px solid var(--grid-strong);color:var(--ink-2);
  display:grid;place-items:center;font-size:16px;opacity:0;transition:opacity .2s;pointer-events:none}
.shot:hover::after,.shot:focus-visible::after,.figure-full:hover::after{opacity:1}
@media(hover:none){.shot::after,.figure-full::after{opacity:1}}
.split h3{font-size:22px;letter-spacing:-.025em;font-weight:600;margin:0 0 12px}
.split p{color:var(--ink-2);margin:0 0 14px}
.mini{list-style:none;margin:0;padding:0}
.mini li{padding:8px 0 8px 22px;border-top:1px solid var(--grid);font-size:15.5px;position:relative;color:var(--ink-2)}
.mini li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:9px;border:1.5px solid var(--green-hi);border-radius:2px}

.checks{display:grid;gap:30px}
@media(min-width:880px){.checks{grid-template-columns:1.05fr .95fr;gap:46px;align-items:start}}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--grid)}
.list li{display:flex;gap:13px;align-items:baseline;padding:11px 2px;border-bottom:1px solid var(--grid);font-size:15.5px}
.tag{font-family:"Roboto Mono",Menlo,Consolas,monospace;font-size:11px;padding:2px 7px;border-radius:3px;flex:none}
.tag.e{background:#fdecec;color:var(--err)}
.tag.w{background:#fdf4e3;color:var(--warn)}
.panel{border:1px solid var(--grid-strong);border-radius:10px;overflow:hidden;background:#fff}
.err-tok{color:#c5221f}
.err-line{text-decoration:wavy underline var(--err);text-decoration-thickness:1.5px;text-underline-offset:5px}
.panel-msg{padding:12px 16px;border-top:1px solid var(--grid);background:#fdecec;color:var(--err);font-size:14px}

.video{border:1px dashed var(--grid-strong);border-radius:11px;background:#fff;aspect-ratio:16/9;
  display:grid;place-items:center;text-align:center;padding:24px}
.video p{margin:12px 0 0;color:var(--ink-3);font-size:15px}
.play{width:62px;height:62px;border-radius:50%;background:var(--green-wash);color:var(--green);display:grid;place-items:center;font-size:21px;margin:0 auto}

.gal{display:grid;gap:18px}
@media(min-width:760px){.gal{grid-template-columns:1fr 1fr}}

.langs{display:flex;flex-wrap:wrap;gap:8px;max-width:70ch}
.langs span{display:inline-flex;align-items:baseline;gap:7px;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--grid-strong);border-radius:20px;padding:5px 14px}
.langs i{font-style:normal;font-size:12.5px;color:var(--ink-3)}

.kbd{border-top:1px solid var(--grid);max-width:56ch}
.kbd div{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--grid);font-size:15.5px}
.kbd kbd{font-family:"Roboto Mono",Menlo,Consolas,monospace;font-size:12.5px;border:1px solid var(--grid-strong);
  border-bottom-width:2px;border-radius:4px;padding:3px 8px;background:#fff;white-space:nowrap}

.note{border-left:3px solid var(--warn);background:#fdf9ef;padding:16px 20px;max-width:70ch;font-size:15.5px;color:var(--ink-2)}
.note b{color:var(--ink);font-weight:600}
.note.good{border-left-color:var(--green-hi);background:var(--green-wash)}

.close{background:var(--green-wash);border-top:1px solid #cfe9e0;border-bottom:1px solid #cfe9e0;text-align:center}
.close .wrap{padding:70px 24px}
.close p{color:var(--ink-2);max-width:52ch;margin:0 auto 28px}

/* ---------- legal pages ---------- */
.doc{max-width:74ch;margin:0 auto;padding:64px 24px 40px}
.doc h1{font-size:clamp(32px,4.4vw,44px);margin-bottom:10px}
.doc .updated{color:var(--ink-3);font-size:15px;margin:0 0 42px}
.doc h2{font-size:22px;letter-spacing:-.022em;margin:44px 0 12px}
.doc h3{font-size:17.5px;margin:28px 0 8px}
.doc p,.doc li{color:var(--ink-2)}
.doc ul{padding-left:20px}
.doc li{margin:7px 0}
.doc code{font-family:"Roboto Mono",Menlo,Consolas,monospace;font-size:13.5px;background:#fff;
  border:1px solid var(--grid-strong);border-radius:4px;padding:2px 6px;color:var(--ink);word-break:break-all}
.doc a{color:var(--green)}
.doc table{border-collapse:collapse;width:100%;margin:18px 0;font-size:15.5px;background:#fff}
.doc th,.doc td{border:1px solid var(--grid-strong);padding:11px 14px;text-align:left;vertical-align:top}
.doc th{font-weight:600;color:var(--ink)}
.doc td{color:var(--ink-2)}

/* ---------- footer ---------- */
footer{padding:42px 0 58px;font-size:15px;color:var(--ink-2)}
.foot{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;border-top:1px solid var(--grid-strong);padding-top:26px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--green);text-decoration:underline}
.foot .sp{margin-left:auto;color:var(--ink-3)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(8,18,14,.92);display:none;z-index:100}
.lb.on{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;color:#e8efec;font-size:14.5px}
.lb-count{font-variant-numeric:tabular-nums;color:#9fb3aa}
.lb-bar .sp{margin-left:auto;display:flex;gap:8px}
.lb-stage{overflow:auto;display:grid;place-items:center;padding:0 18px;min-height:0}
/* fit mode: height decides, so nothing is ever cut off vertically */
.lb-stage img{max-height:calc(100vh - 168px);max-height:calc(100dvh - 168px);
  width:auto;height:auto;max-width:100%;object-fit:contain;
  border-radius:8px;background:#fff;cursor:zoom-in}
.lb-stage.zoom{place-items:start center}
.lb-stage.zoom img{height:auto;width:auto;max-width:none;max-height:none;cursor:zoom-out}
.lb-cap{padding:14px 18px 20px;color:#dfe8e4;font-size:16.5px;text-align:center}
.lb button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;
  border-radius:8px;padding:8px 14px;font:inherit;font-size:14.5px;cursor:pointer;line-height:1.2}
.lb button:hover{background:rgba(255,255,255,.2)}
.lb button[disabled]{opacity:.35;cursor:default}
body.lb-open{overflow:hidden}


/* ---------- scroll reveal ---------- */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.22,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .js .reveal.in{transition:none}
}
.btn,.btn-ghost{transition:background .15s,border-color .15s,transform .12s}
.btn:active{transform:translateY(1px)}
.shot img,.figure-full img{transition:transform .4s cubic-bezier(.22,.7,.3,1)}
.shot:hover img,.figure-full:hover img{transform:scale(1.012)}
@media (prefers-reduced-motion:reduce){.shot:hover img,.figure-full:hover img{transform:none}}


/* ---------- the add-on replica on small screens ----------
   This block is live markup, not a screenshot, so it cannot be opened in the
   gallery. Instead every part of it scales down, and the formula itself keeps
   a horizontal scroll of its own for very long lines. */
@media(max-width:640px){
  .app-head{padding:10px 12px;gap:8px}
  .app-head img{width:18px;height:18px}
  .app-head b{font-size:14.5px}
  .app-tools{gap:3px;padding:7px 10px;font-size:12px}
  .app-tools i{width:22px;height:22px}
  .app-tools i.wide{padding:0 5px}
  .app-tools svg{width:17px;height:17px}
  .app-sep{margin:0 2px;height:16px}
  .app-row{flex-wrap:wrap;row-gap:9px;padding:9px 10px}
  .pill,.addr{padding:3px 8px;font-size:12px}
  .toggle{margin-left:0;width:100%;justify-content:flex-start;font-size:11px}
  .code-wrap{grid-template-columns:30px minmax(0,1fr);font-size:11.5px;line-height:1.85}
  .ln{padding:12px 6px 12px 0}
  pre.code{padding:12px 10px}
  .result,.app-note{padding-left:10px;padding-right:10px;font-size:12px}
  .app-foot{gap:6px;padding:10px}
  .app-foot span{padding:5px 11px;font-size:12.5px}
  .grip{display:none}
  .fbar{font-size:11.5px}
  .fbar .fx,.fbar .line{padding:9px 10px}
}
@media(max-width:380px){
  .code-wrap{font-size:10.5px;grid-template-columns:26px minmax(0,1fr)}
  .app-foot span{font-size:11.5px;padding:5px 9px}
}


/* ---------- back to top ---------- */
.totop{position:fixed;right:20px;bottom:20px;z-index:50;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--grid-strong);background:#fff;color:var(--ink);font-size:19px;line-height:1;
  cursor:pointer;box-shadow:0 8px 22px -12px rgba(16,35,27,.45);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--green);color:var(--green)}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}


/* ---------- what one cell can hold ---------- */
.cells{display:grid;gap:20px}
@media(min-width:760px){.cells{grid-template-columns:1fr 1fr}}
.cellbox{border:1px solid var(--grid-strong);border-radius:10px;overflow:hidden;background:#fff}
.cellbox-h{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--gutter-bg);
  border-bottom:1px solid var(--grid-strong);font-size:12.5px;color:var(--ink-3)}
.cellbox-h b{font-family:"Roboto Mono",Menlo,Consolas,monospace;font-weight:500;color:var(--ink);
  border:1px solid var(--grid-strong);border-radius:3px;padding:1px 8px;background:#fff}
.cellbox-b{padding:16px 18px;font-size:15.5px;line-height:1.62;border-left:3px solid transparent}
.cellbox-b a{color:#1a73e8}
.cellbox-n{padding:11px 18px;border-top:1px solid var(--grid);font-size:14px;color:var(--ink-2);background:#fbfcfb}
.cellbox-b ol,.cellbox-b ul{margin:0;padding-left:22px}
.cellbox-b li{margin:4px 0}

/* ---------- function catalogue ---------- */
.cats{display:grid;gap:1px;background:var(--grid);border:1px solid var(--grid);border-radius:10px;overflow:hidden}
@media(min-width:820px){.cats{grid-template-columns:1fr 1fr}}
.cats details{background:#fff}
.cats summary{display:flex;align-items:center;gap:12px;padding:15px 20px;cursor:pointer;
  font-size:16.5px;font-weight:500;letter-spacing:-.015em;list-style:none}
.cats summary::-webkit-details-marker{display:none}
.cats summary::before{content:"";width:9px;height:9px;border-right:1.8px solid var(--green-hi);
  border-bottom:1.8px solid var(--green-hi);transform:rotate(-45deg);transition:transform .22s;flex:none;margin-left:2px}
.cats details[open] summary::before{transform:rotate(45deg)}
.cats summary:hover{color:var(--green)}
.cats .n{margin-left:auto;font-size:13.5px;color:var(--ink-3);font-weight:400;
  font-variant-numeric:tabular-nums}
.cats .fns{padding:0 20px 18px 43px;display:flex;flex-wrap:wrap;gap:6px}
.cats .fns code{font-family:"Roboto Mono",Menlo,Consolas,monospace;font-size:12.5px;
  border:1px solid var(--grid-strong);border-radius:4px;padding:2px 7px;color:var(--t-fn);background:var(--gutter-bg)}
.js .cats details[open] .fns{animation:catopen .26s cubic-bezier(.22,.7,.3,1)}
@keyframes catopen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cats summary::before{transition:none}
  .js .cats details[open] .fns{animation:none}
}

/* ---------- the formula unfolding in the hero ---------- */
.cl{display:block}
.js .app.unfold .cl{opacity:0}
.js .app.unfold.go .cl{animation:unfold .42s cubic-bezier(.22,.7,.3,1) forwards;
  animation-delay:calc(var(--i) * 90ms)}
@keyframes unfold{
  from{opacity:0;transform:translateY(-9px) scaleY(.75);transform-origin:top}
  to{opacity:1;transform:none}
}
.js .app.unfold .ln{opacity:0}
.js .app.unfold.go .ln{animation:gutterin .5s ease .18s forwards}
@keyframes gutterin{from{opacity:0}to{opacity:1}}
.js .app.unfold .sig{opacity:0}
.js .app.unfold.go .sig{animation:gutterin .4s ease 1.15s forwards}
@media (prefers-reduced-motion:reduce){
  .js .app.unfold .cl,.js .app.unfold .ln,.js .app.unfold .sig{opacity:1;animation:none}
}