/* Minimal Software: site styles. One file, no framework. The page is a grid of thin black lines on white, a few colour blocks, and Bau. */

/* fonts:start */
@font-face{font-family:"Bau";src:url("fonts/BauhausBau-ExtraLight.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Bau";src:url("fonts/BauhausBau-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bau";src:url("fonts/BauhausBau-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* fonts:end */

/* tokens. One mode: the site is a painting and stays white for everyone. */
:root{
  --bg:#FFFFFF;
  --ink:#141414;
  --muted:#5E5A52;        /* 6.9 : 1 on white: small text only, never body text */
  --coral:#E4674A;        /* acts: calls to action, black text */
  --olive:#D5CF82;        /* silent: carries no text except the numbers row and, on the drawn desktop, the file's name and the key hints */
  --teal:#1D6E7B;         /* announces: Minimal AI, white text, 5.9 : 1 */
  --grey:#E4E4E4;         /* the app's own backdrop, inside captures only */
  --lw:1.5px;             /* every line on the site */
  --c1:13.61%;            /* the three verticals, from the hero's own composition at 1440: 196, 1000 and 1330 px */
  --c2:69.44%;
  --c3:92.36%;
  --mm:56px;              /* the margin at phone width */
  --pad:clamp(20px,3.3cqw,48px);
  --pady:clamp(24px,2.8cqw,40px);
  --sans:"Bau","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light only;
}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-synthesis:none}
::selection{background:var(--olive);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--teal)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
main:focus,main[tabindex]:focus-visible{outline:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:700}
code{font-family:inherit;font-weight:700;font-size:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
main,.nav,.foot{max-width:1440px;margin-inline:auto}
main{container-type:inline-size}
.sm{font-size:14px;line-height:1.45}
.mu{color:var(--muted)}
.b{font-weight:700}
.xl{font-weight:200}
.ul{text-decoration:underline;text-decoration-thickness:var(--lw);text-underline-offset:5px}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--ink);color:#fff;padding:8px 12px;font-size:14px}
.skip:focus-visible{top:12px}

/* the grid: a section is a row of cells between thin lines. Lines are the <i> children: .v verticals on the
   three columns, .h the row's top line. A cell names its column: .cx margin, .cm main, .cr right, .co outer. */
.sec{position:relative;display:grid;grid-template-columns:var(--c1) calc(var(--c2) - var(--c1)) calc(var(--c3) - var(--c2)) calc(100% - var(--c3))}
.sec>i{position:absolute;background:var(--ink);pointer-events:none}
.v{top:0;bottom:0;width:var(--lw)}
.v1{left:calc(var(--c1) - var(--lw)/2)}
.v2{left:calc(var(--c2) - var(--lw)/2)}
.v3{left:calc(var(--c3) - var(--lw)/2)}
.h{left:0;right:0;top:0;height:var(--lw)}
.h.b{top:auto;bottom:0}
.h.fm{left:var(--c1)}                      /* from the first vertical */
.h.fr{left:var(--c2)}                      /* from the second */
.h.tm{right:calc(100% - var(--c2))}        /* to the second */
.h.tr{right:calc(100% - var(--c3))}        /* to the third */
.h.mid{top:50%}                            /* splits a cell in two; at phone width the stacked cells have their own line */
.cx{grid-column:1}.cm{grid-column:2}.cr{grid-column:3}.co{grid-column:4}
.cro{grid-column:3 / span 2}.cmr{grid-column:2 / span 2}.call{grid-column:2 / span 3}
.cell{padding:var(--pady) var(--pad)}
.cell>*+*{margin-top:14px}
.cell.between{display:flex;flex-direction:column;justify-content:space-between}
.cell.between>*+*{margin-top:24px}
.blk{background:var(--olive)}
.blk.teal{background:var(--teal)}
.blk.coral{background:var(--coral)}
.blk.olive{background:var(--olive)}
.on-teal{background:var(--teal);color:#fff}
.on-teal a:hover{color:#fff;text-decoration:underline}
.on-teal a:focus-visible{outline-color:currentColor}    /* a teal ring cannot show on teal */
.inset{margin:var(--lw) 0 0 var(--lw)}    /* a filled cell stops at the lines around it */

/* a coral cell is a call to action: the whole cell is the link */
.cta{display:flex;align-items:flex-end;background:var(--coral);color:var(--ink);padding:var(--pady) var(--pad);font-weight:700;font-size:clamp(18px,1.53cqw,22px);line-height:1.1;min-height:120px;transition:background .15s ease,color .15s ease}
.cta:hover{background:var(--ink);color:#fff}
.cta:focus-visible{outline-offset:-6px;outline-color:currentColor}    /* teal on coral is under 3 : 1 */
.arrow{font-weight:400}

/* grids inside a cell. .vi is a vertical that belongs to one of them; both stack at phone width. */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rule h3,.rule p,.num .l,.cols li{overflow-wrap:break-word;hyphens:auto}

/* type */
.h1{font-size:clamp(40px,5cqw,72px);line-height:1;letter-spacing:-.02em}
.h2{font-size:clamp(30px,3.06cqw,44px);line-height:1.04}
.h3{font-size:clamp(20px,1.53cqw,22px);line-height:1.12}
.lead{font-size:clamp(17px,1.25cqw,18px);line-height:1.45}
.eyebrow{font-size:14px;line-height:1.45;color:var(--muted)}
.spec{font-size:14px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.prose p+p,.prose ul+p,.prose p+ul{margin-top:14px}
.prose li{position:relative;padding-left:22px}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:var(--lw);background:var(--ink)}
.prose li+li{margin-top:6px}
.prose a{text-decoration:underline;text-decoration-thickness:var(--lw);text-underline-offset:4px}
.num{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:28px var(--pad)}
.num .v{position:static;width:auto;background:none;font-weight:200;font-size:clamp(64px,8.33cqw,120px);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num .v small{font-size:.33em;letter-spacing:0;margin-left:.1em}
.num .l{font-size:14px;line-height:1.45}

/* rows of lines inside a cell: the step list, the engine facts, the controls, the log */
.rows>*{border-top:var(--lw) solid var(--ink)}
.rows>*:last-child{border-bottom:var(--lw) solid var(--ink)}
.rows.open>*:last-child{border-bottom:0}
.kv{display:grid;grid-template-columns:minmax(120px,32%) 1fr}
.kv>*{padding:16px 20px 18px 0;font-size:14px;line-height:1.45}
.kv>*+*{padding-left:20px;border-left:var(--lw) solid var(--ink)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
@media (max-width:1100px){.cro .kv,.cr .kv{grid-template-columns:1fr}.cro .kv>*+*,.cr .kv>*+*{padding-left:0;padding-top:0;border-left:0}.cro .kv>*,.cr .kv>*{padding:12px 0}.cro .kv dt,.cr .kv dt{padding-bottom:2px}}
.cheat>div{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 0;font-size:15px}
.cheat .keys{justify-content:flex-end;text-align:right}
.key{display:inline-block;font-size:12px;line-height:1;padding:7px 8px 7px;border:var(--lw) solid var(--ink);color:var(--ink);white-space:nowrap;font-weight:700}
.keys{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.keys .plus{font-size:13px;color:var(--muted)}
.nots li{padding:12px 0;font-size:15px}
.steps>li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:22px 0 24px}
.steps .n{font-weight:200;font-size:26px;line-height:1}
.steps h3{font-size:19px;line-height:1.15;margin-bottom:6px}
.steps p{font-size:15px;line-height:1.5}
.steps p+p{margin-top:8px}
.steps a,.note a,.faq a,.prose a,.cheat a{text-decoration:underline;text-decoration-thickness:var(--lw);text-underline-offset:4px}
.note{font-size:14px;line-height:1.5;color:var(--muted)}
.note b{color:var(--ink)}
.faq details{border-top:var(--lw) solid var(--ink)}
.faq details:last-child{border-bottom:var(--lw) solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:56px;padding:14px 0;font-weight:700;font-size:18px;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-weight:200;font-size:30px;line-height:1;flex:none;transition:transform .15s ease}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;font-size:15px;line-height:1.5;max-width:68ch}
.faq .a p+p{margin-top:10px}
.log>li{padding:22px 0 24px}
.log time{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.log h3{font-size:19px;line-height:1.15;margin-bottom:6px}
.log p{font-size:15px;line-height:1.5;max-width:66ch}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cols.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols.one{grid-template-columns:1fr}
.cols>*{padding:var(--pady) var(--pad)}
.cols>*+*{border-left:var(--lw) solid var(--ink)}
.cols h3{font-size:14px;font-weight:400;color:var(--muted);margin-bottom:12px}
.cols ul li{padding:8px 0;font-size:15px;line-height:1.45;border-top:var(--lw) solid var(--ink)}
.cols ul li:last-child{border-bottom:var(--lw) solid var(--ink)}
.cmd{display:inline-flex;align-items:center;gap:12px;max-width:100%;font-size:14px;border:var(--lw) solid var(--ink);padding:10px 12px}
.cmd code{font-weight:700;overflow-wrap:anywhere}
.cmd .p{color:var(--muted)}
.cmd button{color:var(--muted);font-size:13px;border-left:var(--lw) solid var(--ink);padding-left:12px}
.cmd button:hover{color:var(--ink)}
.table-wrap{overflow-x:auto}
table.hashes{width:100%;border-collapse:collapse;font-size:14px}
.hashes th,.hashes td{text-align:left;padding:12px 16px 12px 0;border-top:var(--lw) solid var(--ink);vertical-align:top}
.hashes tr:last-child td{border-bottom:var(--lw) solid var(--ink)}
.hashes th{font-weight:400;color:var(--muted)}
.hashes td.h{position:static;height:auto;background:none;font-size:13px;word-break:break-all;min-width:280px}
.pill{display:inline-block;font-size:13px;padding:4px 8px;border:var(--lw) solid var(--ink)}
.fig figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted)}
.fig img{border:var(--lw) solid var(--ink)}

/* the window: the real app, the grey is its own backdrop. No shadow, no radius: the grid is its frame. */
.win{position:relative;aspect-ratio:1346/1371;background:var(--grey);overflow:hidden}
.win>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* header: white, the wordmark left, the links right, one line under it. It slides away as you read down and
   comes back when you scroll up or tab into it. */
.nav{position:sticky;top:0;z-index:40;background:var(--bg);transition:transform .2s var(--ease)}
.nav.away{transform:translateY(-100%)}
.nav:focus-within{transform:none}
.nav-row{position:relative;display:grid;grid-template-columns:var(--c1) calc(var(--c2) - var(--c1)) calc(var(--c3) - var(--c2)) calc(100% - var(--c3));align-items:center;height:72px}
.nav-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--lw);background:var(--ink)}
.nav-main{grid-column:2;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--pad) 0 28px}
.nav-dl{grid-column:3;padding:0 28px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:16px;line-height:1;white-space:nowrap}
.brand-rule{display:inline-block;width:22px;height:var(--lw);background:currentColor}
.brand-sub{color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.5vw,36px);font-size:15px;white-space:nowrap}
.nav-links a,.nav-dl a{display:inline-block;padding:12px 0}
.nav-links a[aria-current="page"],.nav-dl a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:var(--lw);text-underline-offset:6px}
.nav-dl a{font-size:15px;white-space:nowrap;padding-bottom:5px;border-bottom:var(--lw) solid var(--ink)}
.nav-dl a{padding-top:0}
.nav-dl a:hover{border-color:var(--teal)}
@media (max-width:1180px){.hide-md,.nav-links a.hide-md{display:none}}
@media (max-width:560px){.hide-sm,.nav-links a.hide-sm{display:none}}

/* hero: the headline bleeds off the left edge and a thin composition stands behind it, its lines crossing the type */
.hero{position:relative;height:clamp(560px,61.7cqw,888px);overflow:hidden}
.hero>i{position:absolute;background:var(--ink);pointer-events:none}
.hero .v{top:0;bottom:0;width:var(--lw)}
.hero .h{left:0;right:0;height:var(--lw)}
.hero .v4{left:calc(60.4% - var(--lw)/2);top:72.97%}
.hero .v3{top:56.08%}
.hero .h1l{top:41.22%;right:30.56%}
.hero .h2l{top:56.08%;left:var(--c1)}
.hero .h3l{top:72.97%;right:7.64%}
.hero .h4l{top:86.49%;left:60.4%}
.hero .b1{position:absolute;left:0;top:calc(72.97% + var(--lw));bottom:0;width:calc(var(--c1) - var(--lw)/2)}
.hero .b2{position:absolute;left:calc(var(--c3) + var(--lw)/2);top:calc(86.49% + var(--lw));bottom:0;right:0}
.hero .cta{position:absolute;left:calc(var(--c2) + var(--lw)/2);top:calc(72.97% + var(--lw));width:calc(var(--c3) - var(--c2) - var(--lw));height:calc(13.52% - var(--lw));padding:24px;min-height:0}
.hero h1{position:absolute;left:0;top:32.4%;width:100%;font-size:clamp(56px,9.44cqw,136px);line-height:1;letter-spacing:-.03em;pointer-events:none}
.hero h1 .l1{display:block;margin-left:-.09em;white-space:nowrap}
.hero h1 .l2{display:block;padding-left:16%;white-space:nowrap}
.hero .intro{position:absolute;left:71.4%;top:31%;width:20%;font-size:16px;line-height:1.5}
.hero .intro a{display:inline-block;margin-top:20px;font-weight:700;font-size:16px;padding-bottom:4px;border-bottom:var(--lw) solid var(--ink)}
.hero .intro a:hover{border-color:var(--teal)}
@media (max-width:1100px){.hero .intro{top:11%;width:22%;font-size:15px}.hero .cta{padding:16px 20px;font-size:17px}}

/* the breathing block: after the hero fills, the teal cell in the margin moves between the three colours, 48 s a cycle */
@keyframes breathe{0%,100%{background:var(--teal)}33%{background:var(--olive)}66%{background:var(--coral)}}
.js .in .b1.breathe{animation:breathe 48s linear 6s infinite}

/* the lines draw themselves the first time a section comes into view, one by one, then the colour blocks fill in */
.js .sec>i,.js .hero>i{transition:transform .55s var(--ease)}
.js .sec>i.v,.js .hero>i.v{transform-origin:50% 0}
.js .sec>i.h,.js .hero>i.h{transform-origin:0 50%}
.js .sec:not(.in)>i.v,.js .hero:not(.in)>i.v{transform:scaleY(0)}
.js .sec:not(.in)>i.h,.js .hero:not(.in)>i.h{transform:scaleX(0)}
.js .sec>i:nth-of-type(2),.js .hero>i:nth-of-type(2){transition-delay:.33s}
.js .sec>i:nth-of-type(3),.js .hero>i:nth-of-type(3){transition-delay:.66s}
.js .sec>i:nth-of-type(4),.js .hero>i:nth-of-type(4){transition-delay:.99s}
.js .sec>i:nth-of-type(5),.js .hero>i:nth-of-type(5){transition-delay:1.32s}
.js .sec>i:nth-of-type(6),.js .hero>i:nth-of-type(6){transition-delay:1.65s}
.js .sec>i:nth-of-type(7),.js .hero>i:nth-of-type(7){transition-delay:1.98s}
.js .sec>i:nth-of-type(8),.js .hero>i:nth-of-type(8){transition-delay:2.31s}
.js .sec>i:nth-of-type(9),.js .hero>i:nth-of-type(9){transition-delay:2.64s}
.js .blk,.js .cta,.js .on-teal{transition:clip-path .4s ease-out calc(var(--n,3) * .33s + .3s),background .15s ease,color .15s ease}
.js .sec:not(.in) .blk,.js .sec:not(.in) .cta,.js .sec:not(.in) .on-teal,.js .hero:not(.in) .blk,.js .hero:not(.in) .cta{clip-path:inset(0 100% 0 0)}
.js .in .blk,.js .in .cta,.js .in .on-teal{clip-path:inset(0)}

/* Four moves taken from etingerinitiatives.com. site.js adds the classes, so without it everything is simply there.
   1. Pages cross-fade into each other where the browser can. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
/* 2. Words rise into place: below the first screen each block of text starts lowered and clear, then settles the
      first time it is on screen, one after another. */
.rv{opacity:0;transform:translateY(32px);transition:opacity .7s ease var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.rv.up{opacity:1;transform:none}
/* 3. The home page's headline and intro drift down and clear as the page scrolls past the hero. */
.hero h1,.hero .intro{transform:translateY(calc(var(--hero-p,0) * 48px));opacity:calc(1 - var(--hero-p,0) * 1.1)}
/* 4. A line that types itself: the whole text stays in place and the part not yet typed is transparent. The caret
      is out of the flow, so it never pushes a word to the next line. */
.type__rest{color:transparent}
.type.is-typing .type__done::after{content:"▍";content:"▍" / "";position:absolute;margin-left:2px;color:var(--coral);animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* on paper every word shows, risen or not, typed or not */
@media print{.rv{opacity:1;transform:none}.type__rest{color:inherit}.hero h1,.hero .intro{opacity:1;transform:none}}

/* the section badge: a black square at the bottom right that says n / 7 for a second as each home-page section arrives */
.sbadge{position:fixed;right:20px;bottom:20px;z-index:50;background:var(--ink);color:#fff;font-weight:700;font-size:14px;line-height:1;padding:10px 12px;opacity:0;transition:opacity .3s ease;pointer-events:none;font-variant-numeric:tabular-nums}
.sbadge.on{opacity:1;transition-duration:.15s}

/* the four-step demo on the home page. A drawn Windows desktop, .screen, fills the margin and the main cell up to
   the second vertical: an olive field and a taskbar of plain shapes, with no logo. The file waits on it as an icon,
   and the window floats on it at --ws of the main cell, above the taskbar. Only here does a window get the frame
   Windows draws: a hairline, 8 px corners at 100 % scaling and a shadow. One bold line and a caption are the right cell.
   --scr is the desktop's width, --tb the taskbar's height, --ww the window's width, and inside the window
   --u is one pixel of the 1346 x 1371 capture. */
.demo{--ws:.84;--scr:69.44cqw;--tb:calc(var(--scr) * .042);--ww:calc(var(--ws) * 55.83cqw)}
.demo .screen{position:absolute;left:0;top:var(--lw);bottom:0;width:calc(var(--c2) - var(--lw) / 2)}
.demo>.v1{display:none}    /* the desktop runs across the first vertical */
.demo .taskbar{position:absolute;left:0;right:0;bottom:0;height:var(--tb);display:flex;align-items:center;justify-content:center;background:var(--bg)}
.demo .apps{display:flex;gap:calc(var(--tb) * .24)}
.demo .apps span{position:relative;width:calc(var(--tb) * .54);height:calc(var(--tb) * .54);border-radius:calc(var(--tb) * .12);background:var(--muted)}
.demo .apps .run{background:var(--ink)}
.demo .apps .run::after{content:"";position:absolute;left:30%;right:30%;bottom:calc(var(--tb) * -.15);height:calc(var(--tb) * .07);border-radius:99px;background:var(--ink)}
.demo .tray{position:absolute;right:calc(var(--tb) * .45);top:50%;transform:translateY(-50%);display:grid;justify-items:end;gap:calc(var(--tb) * .13)}
.demo .tray span{height:calc(var(--tb) * .08);border-radius:99px;background:var(--muted)}
.demo .tray span:first-child{width:calc(var(--tb) * .7)}
.demo .tray span:last-child{width:calc(var(--tb) * 1.25)}
.demo .desk{aspect-ratio:1346/1371;display:flex;align-items:center;justify-content:center;padding-bottom:var(--tb);clip-path:inset(0 0 var(--tb) 0)}    /* clipped, so the window's shadow stops at the screen's edge and at the taskbar when it moves */
/* the right cell: the line sits at mid-height, flush left, and the caption at the foot */
.demo .cro{display:grid;grid-template-rows:1fr auto 1fr}
.demo .cro>.b{grid-row:2}
.demo .cro>.sm{grid-row:3;align-self:end}
.demo .win{width:calc(var(--ws) * 100%);container-type:inline-size;--u:calc(100cqw / 1346);will-change:transform;border-radius:calc(var(--ww) * 12 / 1346);box-shadow:0 0 0 1px rgba(20,20,20,.3),0 calc(var(--ww) * 18 / 1346) calc(var(--ww) * 56 / 1346) rgba(20,20,20,.3)}
.demo .win>.f{position:absolute;left:0;top:0;width:100%;visibility:hidden;transform-origin:0 0;will-change:transform}
.demo .win>.f.on{visibility:visible}
.demo .win>img.f{height:100%}
.demo .f img{display:block;width:100%;max-width:none;height:auto}
.demo .mark{position:absolute;top:0;right:calc(1 * var(--u));width:calc(4.5 * var(--u));border-radius:calc(2.25 * var(--u));background:rgba(48,48,48,.478);opacity:0;pointer-events:none}
.demo .badge{position:absolute;right:calc(19 * var(--u));bottom:calc(19 * var(--u));padding:calc(6 * var(--u)) calc(12 * var(--u));border-radius:calc(6 * var(--u));background:rgba(32,32,32,.706);color:#fff;font:400 calc(18 * var(--u))/1.33 "Segoe UI",system-ui,sans-serif;white-space:nowrap;opacity:0;pointer-events:none}
.chip{position:absolute;left:calc(var(--c1) / 2);top:50%;z-index:4;display:grid;justify-items:center;gap:8px;width:92px;margin:-62px 0 0 -46px;padding:10px 4px 8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;color:var(--ink)}
.chip svg{width:40px;height:auto;display:block}
.chip .fname{font-size:12px;line-height:1.25;text-align:center;white-space:nowrap}
.chip.picked,.chip:hover{outline:var(--lw) solid var(--ink);outline-offset:0}
.chip.dragging{cursor:grabbing}
.demo .ghost{z-index:5;opacity:0;pointer-events:none;will-change:transform;outline:0}
.demo .ghost.on{opacity:.7}
.demo .cursor{position:absolute;left:0;top:0;z-index:6;will-change:transform;width:max(16px,1.3cqw);pointer-events:none;opacity:0;transition:opacity .15s ease-out}
.demo .cursor.on{opacity:1}
.demo .cursor svg{display:block;width:100%;height:auto;overflow:visible}
.demo .cursor .c-hand,.demo .cursor .c-copy{display:none}
.demo .cursor[data-kind="hand"] .c-arrow{display:none}
.demo .cursor[data-kind="hand"] .c-hand,.demo .cursor[data-kind="copy"] .c-copy{display:inline}
.demo .cursor .wheel{position:absolute;left:96%;top:70%;width:78%;display:none}
.demo .cursor[data-wheel="up"] .wheel,.demo .cursor[data-wheel="down"] .wheel{display:block}
.demo .cursor[data-wheel="up"] .w-down,.demo .cursor[data-wheel="down"] .w-up{display:none}
.demo .cursor.tick .w-up{animation:wheel-up .14s ease-out}
.demo .cursor.tick .w-down{animation:wheel-down .14s ease-out}
@keyframes wheel-up{from{transform:translateY(1.5px)}}
@keyframes wheel-down{from{transform:translateY(-1.5px)}}
.demo .keycast{position:absolute;left:calc(var(--c1) / 2);top:74%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:.4em;font-size:14px;opacity:0;transition:opacity .15s ease-out;pointer-events:none;white-space:nowrap}
.demo .keycast.on{opacity:1}
.demo .keycast .key{background:var(--bg)}
.demo .keycast .plus{color:var(--ink)}

/* the seven rules on the home page: one row each, its number, its name and a line of text, beside a schematic
   viewer losing its chrome. .rule is the older cell, still used on the product and download pages. */
.rules>li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:20px;align-items:baseline;padding:24px var(--pad) 26px 28px}
.rules .n{grid-row:1 / span 2;font-weight:200;font-size:30px;line-height:1}
.rules h3{font-size:clamp(19px,1.53cqw,22px);line-height:1.12}
.rules p{grid-column:2;margin-top:8px;max-width:62ch;font-size:15px;line-height:1.5}
/* a row of the grid kept empty on purpose, for something that is still to come */
.hold{min-height:190px}
/* the product page's second section: the olive field of the home page's demo, and on it a 20 s video of the window
   snapped beside a spreadsheet. The video is a drawing and its caption says so. It gets the same frame as the
   demo's window: a hairline, rounded corners and a shadow. */
.vdemo .stage{position:relative;grid-column:1 / span 2;margin:var(--lw) calc(var(--lw) / 2) 0 0;display:flex;align-items:center;justify-content:center;padding:calc(var(--pady) + 16px) var(--pad)}
.vdemo video{display:block;width:100%;max-width:880px;height:auto;aspect-ratio:16/9;background:var(--bg);border-radius:6px;box-shadow:0 0 0 1px rgba(20,20,20,.3),0 9px 28px rgba(20,20,20,.3)}
.rule{padding:32px 28px}
.rule .n{font-weight:200;font-size:30px;line-height:1;display:block;margin-bottom:16px}
.rule h3{font-size:clamp(19px,1.53cqw,22px);line-height:1.12;margin-bottom:10px}
.rule p{font-size:14px;line-height:1.45}
.schem{position:relative;background:var(--bg);border:var(--lw) solid var(--ink);padding:36px 32px;aspect-ratio:344/230}
.schem i{display:block;height:2px;background:#C9C9C9;margin-bottom:8px}
.schem i:first-child{margin-bottom:12px}
.schem .sb{position:absolute;right:16px;bottom:16px;height:30px;padding:0 12px;border-radius:6px;background:var(--ink);color:#fff;font:400 14px/30px "Segoe UI",system-ui,sans-serif}
.schem .ch{position:absolute;left:0;right:0;background:#F2F2F2;border-bottom:1px solid #D8D8D8;transition:opacity .3s ease,transform .3s ease}
.schem .ch.off{opacity:0;transform:translateY(-4px)}

/* footer */
.foot{font-size:14px;line-height:1.45}
.foot h2{font-size:14px;font-weight:400;color:var(--muted);margin-bottom:12px}
.foot ul{display:flex;flex-direction:column;gap:2px}
.foot li{padding:3px 0}
.foot li a{display:inline-block;padding:3px 0;margin:-3px 0}
.foot .cols>*{padding:36px 28px}
.foot .base{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--pad) 12px calc(var(--c1) + 28px);font-size:13px}

/* phone and small tablet: one margin line at 56 px, the right column stacks under the main one */
@media (max-width:768px){
  :root{--pad:20px;--pady:24px}
  .sec,.nav-row{grid-template-columns:var(--mm) minmax(0,1fr)}
  .v1{left:calc(var(--mm) - var(--lw)/2)}
  .v2,.v3{display:none}
  .h.fm{left:var(--mm)}
  .h.fr,.h.tm,.h.tr{left:0;right:0}
  .h.mid{display:none}
  .cx{position:absolute;left:0;top:0;bottom:0;width:calc(var(--mm) - var(--lw)/2)}
  .cm,.cr,.co,.cro,.cmr,.call{grid-column:2}
  .cr,.cro{border-top:var(--lw) solid var(--ink)}
  .cr:empty,.cro:empty{display:none}    /* an empty cell would draw a second line against the next section's */
  .co{display:none}
  .nav-main{grid-column:2;padding:0 16px;gap:12px}
  .nav-links{gap:14px;font-size:14px}
  .brand{font-size:15px;gap:8px}
  .nav-dl{display:none}
  .nav-main .nav-dl-sm{display:inline}
  .hero{height:640px}
  .hero .v4{display:none}
  .hero .v3{display:none}
  .hero .v1{left:calc(var(--mm) - var(--lw)/2)}
  .hero .v2{left:calc(250px - var(--lw)/2);top:81.25%}
  .hero .h1l{top:28.9%;right:90px}
  .hero .h2l{top:46.25%;left:var(--mm)}
  .hero .h3l{top:81.25%;right:0}
  .hero .h4l{top:90.6%;left:0}
  .hero .b1{top:calc(90.6% + var(--lw));width:calc(var(--mm) - var(--lw)/2)}
  .hero .b2{left:calc(250px + var(--lw)/2);top:calc(90.6% + var(--lw));bottom:0}
  .hero .cta{left:calc(var(--mm) + var(--lw)/2);right:0;width:auto;top:calc(81.25% + var(--lw));height:calc(9.35% - var(--lw));padding:16px;font-size:18px}
  .hero h1{top:23.4%;font-size:clamp(44px,14.4cqw,72px)}
  .hero h1 .l2{padding-left:12%;white-space:normal}
  .hero h1 .l2 .l3{display:block;padding-left:14%}
  .hero .intro{left:72px;right:24px;width:auto;top:max(54.7%,calc(23.4% + 3*clamp(44px,14.4cqw,72px) + 28px));font-size:15px}
  .hero .intro a{margin-top:14px;font-size:15px}
  .chip{left:calc(var(--mm) / 2);margin-left:-20px;width:40px;padding:6px 2px;gap:4px}
  .chip svg{width:26px}
  .chip .fname{display:none}
  /* the desktop is the full width and as tall as the window's cell; the text stacks under it, below a line of the
     desktop's own, and the margin line starts again beside the text */
  .demo{--scr:100cqw;--ww:calc(var(--ws) * (100cqw - var(--mm)));--dh:calc((100cqw - var(--mm)) * 1371 / 1346)}
  .demo .screen{width:100%;bottom:auto;height:var(--dh);border-bottom:var(--lw) solid var(--ink)}
  .demo>.v1{display:block;top:var(--dh)}
  .demo .cro{border-top:0;display:block}
  /* inside the lower left of the window before and after it moves, 12 px above its resting bottom edge, clear of the text stacked under it */
  .demo .keycast{left:calc(var(--mm) + (100cqw - var(--mm)) * ((1 - var(--ws)) / 2 + .07) + 12px);top:calc(((100cqw - var(--mm)) * 1371 / 1346 * (1 + var(--ws)) - var(--tb)) / 2 - 41px);transform:none}
  .cols,.cols.two,.g2,.g3{grid-template-columns:1fr}
  .g3.nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3.nums>*:nth-child(even){border-left:var(--lw) solid var(--ink)}
  .g3.nums>*:nth-child(n+3){border-top:var(--lw) solid var(--ink)}
  .g2>*+*,.g3:not(.nums)>*+*{border-top:var(--lw) solid var(--ink)}
  .cols>*+*{border-left:0;border-top:var(--lw) solid var(--ink)}
  .sec>i.vi{display:none}
  .num .v{font-size:clamp(56px,20cqw,88px)}
  .rule{padding:22px 20px}
  .rules>li{grid-template-columns:30px minmax(0,1fr);column-gap:12px;padding:20px}
  .rules .n{font-size:18px}
  .hold{min-height:150px}
  .vdemo .stage{margin-right:0;padding:var(--pady) var(--pad)}
  .kv{grid-template-columns:1fr}
  .kv>*+*{padding-left:0;padding-top:0;border-left:0}
  .kv>*{padding:12px 0}
  .kv dt{padding-bottom:2px}
  .cheat>div{flex-direction:column;align-items:flex-start;gap:8px}
  .cheat .keys{justify-content:flex-start;text-align:left}
  .foot .base{flex-direction:column;align-items:flex-start;gap:4px;padding-left:calc(var(--mm) + 20px);min-height:72px}
  .sbadge{right:12px;bottom:12px}
}
@media (min-width:769px){.nav-main .nav-dl-sm,.nav-links a.nav-dl-sm{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
  .js .sec>i,.js .hero>i{transform:none!important}
  .js .blk,.js .cta,.js .on-teal{clip-path:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* a number in the margin column */
.rn{display:block;font-weight:200;font-size:30px;line-height:1}
@media (max-width:768px){.cx.cell{padding:26px 0 0 12px}.rn{font-size:18px}}