:root{    --ground:#181E27; --surface:#1F2733; --hairline:#2A3442; --hairline-2:#38455A;
    --ink:#E9EDF2; --ink-2:#8B97A6;
    --lime:#C3F53C; --cyan:#4FC3D9; --amber:#F2A93B;
    --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
    --serif:"Newsreader",Georgia,serif;
    --ease:cubic-bezier(.22,1,.36,1);
    --gutter:24px;
    --margin:clamp(20px,6vw,120px);
    --sect:clamp(96px,11vw,176px);       /* between sections */
    --beat:clamp(56px,7vw,100px);        /* head -> content, content -> closing line */
    --lead:clamp(28px,3vw,40px);         /* eyebrow -> heading */
    /* the index ladder: label type, and the standalone numbers that mark a thing */
    --ix:12px; --num:13px;
    /* the type ladder: every role on the page takes one of these */
    --t-h2:clamp(1.75rem,4.3vw,3.45rem);      /* the heading - the size the first screen sets */
    --t-quote:clamp(1.5rem,2.9vw,2.5rem);     /* closing line */
    --t-state:clamp(1.5rem,2.4vw,2.125rem);   /* a statement in a list */
    --t-name:clamp(1.25rem,1.9vw,1.625rem);   /* a named thing */
    --t-card:clamp(1rem,1.3vw,1.1875rem);
    --t-sf:clamp(1.0625rem,1.45vw,1.375rem);  /* standfirst */
    --t-display:clamp(2.6rem,5.4vw,4.75rem);  /* the product name, one step under the hero */

    /* the figure system: one tempo for every cycle on the page */
    --p:3.8s; --travel:cubic-bezier(.45,0,.25,1);
    --o-ln:.30; --o-soft:.14; --o-tk:.20; --o-edge:.17;

  }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:clamp(16px,3vw,40px);overflow-x:hidden;overflow-x:clip;}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
    line-height:1.55;-webkit-font-smoothing:antialiased;
    /* clip, not hidden: the full-bleed bars overshoot the screen on purpose and
       must not turn the page into something that scrolls sideways */
    overflow-x:hidden;overflow-x:clip;}
.wrap{padding-inline:var(--margin);}
.page{max-width:1560px;margin-inline:auto;}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
/* ---------- the top row: where you are in the SITE (the rail is where you are in the page) ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:30;pointer-events:none;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:clamp(16px,2vw,26px) var(--margin) 0;}
.top > *{pointer-events:auto;}
/* The bar sits over the page, so the page has to stop at it. A scrim that is
     absent on the opening screen - where the bar is meant to float - and fades
     in the moment anything is scrolled under it. The blur and the darkening
     fade out together through one mask, so the bar has no edge of its own. */
.top::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 34px);
    z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
    background:linear-gradient(180deg,var(--ground) 0%,rgba(24,30,39,.92) 50%,rgba(24,30,39,0) 100%);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 100%);}
.top.is-bg::before{opacity:1;}
.top__brand{display:flex;align-items:center;gap:12px;text-decoration:none;
    font-family:var(--mono);font-size:var(--ix);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);}
.top__brand .sdmark{height:22px;margin:0;}
.top__brand:hover{color:var(--lime);}
.top__nav{display:flex;gap:26px;margin:0;padding:0;list-style:none;}
.top__nav a{font-family:var(--mono);font-size:var(--ix);letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-2);text-decoration:none;padding:6px 0;position:relative;transition:color .35s var(--ease);}
.top__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lime);
    transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.top__nav a:hover,.top__nav a.is-cur{color:var(--ink);}
.top__nav a.is-cur::after,.top__nav a:hover::after{transform:none;}
.top__nav a:focus-visible,.top__brand:focus-visible{outline:2px solid var(--lime);outline-offset:4px;}
@media (max-width:760px){
.top__nav{gap:18px;}
.top__nav a{font-size:10px;}
}
/* ---------- the rail ---------- */
.rail{position:fixed;left:0;right:0;bottom:0;z-index:30;pointer-events:none;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:0 var(--margin) calc(clamp(16px,2vw,26px) + env(safe-area-inset-bottom,0px));
    padding-top:clamp(16px,2vw,26px);}
.rail > *{pointer-events:auto;}
/* The rail says where you are and offers one way to act. It is a running head,
     not a control panel: no capsule, no fill, no lime until a pointer asks for it,
     and nothing at all while the opening scene is on screen. */
.rail{transition:opacity .55s var(--ease);}
/* only the running head waits out the opening scene; the button does not */
.rail.is-hero .rail__caps{opacity:0;pointer-events:none;}
.rail__caps{transition:opacity .55s var(--ease);}
.rail__caps{display:flex;align-items:stretch;height:24px;}
.rail__win{position:relative;overflow:hidden;width:120px;transition:width .62s var(--ease);}
.rail__list{position:absolute;left:0;top:0;height:100%;width:max-content;
    display:flex;align-items:center;transition:transform .62s var(--ease);}
/* the mark under the section being read: one hairline, the width of its name */
.rail__pillbg{position:absolute;left:0;top:auto;bottom:0;height:1px;width:0;border-radius:0;
    background:var(--ink-2);opacity:.55;
    transition:transform .62s var(--ease),width .62s var(--ease),opacity .3s ease;}
.rail__item{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:9px;white-space:nowrap;
    padding:0 20px 0 0;height:100%;background:none;border:0;cursor:pointer;
    font-family:var(--mono);font-size:var(--ix);letter-spacing:.14em;text-transform:uppercase;
    color:var(--hairline-2);text-decoration:none;transition:color .4s var(--ease);}
.rail__item:hover{color:var(--ink);}
.rail__item.is-on{color:var(--ink);}
.rail__item:focus-visible{outline:2px solid var(--lime);outline-offset:-3px;}
.rail__acts{display:flex;gap:20px;}
/* one way to act, set as a line of type with a rule under it - not a button:
     a button would have a rounded border, and a rounded border means pressed */
.rail__pill{display:inline-flex;align-items:center;height:24px;white-space:nowrap;
    border:0;border-bottom:1px solid var(--hairline-2);background:none;border-radius:0;
    font-family:var(--mono);font-size:var(--ix);letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-2);text-decoration:none;
    transition:color .35s var(--ease),border-color .35s var(--ease);}
.rail__pill:hover{color:var(--lime);border-color:var(--lime);}
/* the one call to action keeps its capsule and its lime: it is the only thing
     on the page that is always pressable, and it is on every screen */
.rail__pill--cta{height:34px;padding:1px calc(18px - .14em) 0 18px;border-radius:999px;
    border:1px solid var(--lime);background:var(--lime);color:var(--ground);
    -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;-webkit-text-stroke:.22px currentColor;
    transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);}
.rail__pill--cta:hover{background:var(--lime);border-color:var(--lime);color:var(--ground);}
.rail__pill:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}
@media (max-width:760px){
.rail__caps{pointer-events:none;}
}
/* ---------- the ground ----------
     The page is set on twelve columns, so that is what the ground shows: the
     column lines themselves, drawn once and never moving, so a centred block and
     a block set from the left margin are visibly measured by the same thing.
     There are no horizontal lines in it. Horizontal rhythm belongs to the
     content - section rules, the lines between list rows - and a fixed
     horizontal grid can only ever cut across that rhythm rather than agree
     with it. */
.field{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;
    padding-inline:var(--margin);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%);}
.field__page{max-width:1560px;height:100%;margin-inline:auto;
    display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
/* One line per second gutter, and in the middle of it. A line on a column edge
     looks wrong at the end of the row - the last interval is a column, every
     other one is a column plus a gutter - and a line on both edges turns the
     ground into a drawing sheet. Halfway down every other gutter the rhythm is
     exactly even the whole way across, and there are five lines instead of
     twenty-four: enough to measure by, not enough to read. */
.field__page > i{display:block;height:100%;position:relative;}
.field__page > i:nth-child(even):not(:last-child)::after{content:"";position:absolute;
    top:0;bottom:0;right:calc(var(--gutter) / -2);width:1px;background:var(--hairline);opacity:.75;}
/* the page sits on the ground, not under it */
.wrap,section.wh{position:relative;z-index:1;}
/* on a narrow screen the page is one column, so the ground halves its own
     count rather than crowding: six lines across the same width */
@media (max-width:760px){
.field__page{grid-template-columns:repeat(6,1fr);}
.field__page > i:nth-child(n+7){display:none;}
/* the sixth is the last one on this screen, so its line would fall in the
       margin rather than in a gutter */
.field__page > i:nth-child(6)::after{display:none;}
}
/* ---------- the seam ----------
     The page changes axis here: the first screen is centred, everything under it
     is set from the left margin. The seam is the hinge. It opens from the centre
     - where the centred passage stood - and runs out to both margins, which is
     the alignment being handed over rather than simply dropped. The section
     index lands on its left end a moment later, and from there the page reads
     from the left. */
.seam{position:relative;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);
    margin-bottom:clamp(30px,4vw,56px);}
.in.seam{opacity:1;transform:none;}
.seam .ix{flex:0 0 auto;}
/* the rule is not laid behind the index and knocked out with a patch of
     ground - it genuinely stops at the index and starts again after it, so the
     same seam works over a photograph as over the page. It runs out of the
     index in both directions when the section arrives. */
.seam__ln{flex:1 1 auto;height:1px;background:var(--hairline-2);
    transform:scaleX(0);transform-origin:left center;transition:transform 1.15s var(--ease);}
.seam::before{content:"";position:absolute;top:50%;right:100%;width:50vw;height:1px;
    background:var(--hairline-2);transform:scaleX(0);transform-origin:right center;
    transition:transform 1.15s var(--ease);}
.seam.is-in .seam__ln,.seam.is-in::before{transform:none;}
/* over the photograph the hairline needs to be light, not dark */
.band .seam__ln,.band .seam::before{background:rgba(233,237,242,.3);}
/* ---------- roles ---------- */
/* index - where you are in the document */
/* index - where you are in the document. The number is the dimmer half: an
     index says where, not what, and the label is the part that has to be read.
     The slash belongs to the number and is held to it by thin spaces, so the
     whole thing is one word at one tracking. */
.ix{font-family:var(--mono);font-size:var(--ix);letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-2);margin:0;display:block;}
/* ---------- the heading ----------
     One heading for the whole site, taken from the first screen: the same size,
     the same weight, the same tracking and line, the operative words set in the
     serif, and the same arrival - a word at a time, rising out of its own line.
     A section heading should differ from the first screen only in what it says. */
h1,h2{font-weight:500;letter-spacing:-.032em;line-height:1.1;margin:0;text-wrap:balance;}
h1{font-size:clamp(2.05rem,5vw,5.5rem);line-height:1.0;letter-spacing:-.038em;}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-name);font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:0;}
/* the operative words. The serif is the page's one other voice, and it says
     the same thing here as in the first screen: this is the part that matters.
     It is set one step heavier than the sans around it because at the same
     optical size a serif reads lighter. */
/* an accent is one thing, so it breaks as one thing: the line turns before it
     rather than through it */
/* the two faces are matched on the x-height, not on the em: Newsreader sets a
     smaller x-height than Instrument Sans at the same size, and an accent that
     measures smaller in the middle of a line reads as a different size */
h2 .hl{font-family:var(--serif);font-weight:600;font-size:1.07em;
    letter-spacing:-.012em;white-space:nowrap;}
.hl{color:var(--lime);}
/* standfirst - the claim, restated plainly */
.standfirst{font-size:var(--t-sf);letter-spacing:-.012em;line-height:1.45;
    color:var(--ink);max-width:36ch;margin:0;}
/* body - the reasoning */
.body{color:var(--ink-2);font-size:1.0625rem;max-width:46ch;margin:0;}
.body + .body{margin-top:22px;}
/* a statement in a list: the gap rows, the sovereignty triad */
.state{font-size:var(--t-state);letter-spacing:-.022em;line-height:1.22;}
/* resolution - the line that closes a section, in the quote voice */
/* ---------- the conclusion ----------
     The line that closes a section is a remark on it, not another paragraph, so
     it stands where a remark stands: off the reading column, in the right half
     of the grid - the same columns the answers stand in - held by a rule of its
     own and set in the serif. The lime is in the rule alone: the mark says
     "this is the operative part", the words are left to be read.
     No rule above it - the block it closes has already drawn one, and a second
     line two rows below reads as a mistake. Space is the separator. */
.quote{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
    margin-top:clamp(56px,6.5vw,104px);}
.quote__m{display:none;}
/* a conclusion that sits inside a column is already off the reading axis, so
     it takes that column whole - pushing it half a column further would leave a
     six-word measure and break the line in the wrong places */
.quote__t{grid-column:1 / -1;padding-left:clamp(18px,1.6vw,28px);
    border-left:1px solid var(--lime);
    font-family:var(--serif);font-weight:600;font-size:var(--t-quote);
    letter-spacing:-.012em;line-height:1.24;color:var(--ink-2);}
section > .quote .quote__t{grid-column:7 / span 6;}
.quote__t b{font-weight:600;color:var(--ink);}
/* the two-column sections stack at 900, and the conclusion goes full width
     with them - otherwise one of the four would be measured against a stacked
     page while the other three are still in a column */
@media (max-width:900px){
.quote__t,section > .quote .quote__t{grid-column:1 / -1;}
}
/* headline reveal: each word rises out of a mask when the heading enters view */
/* the mask is cut, not overflowed: a box with overflow:hidden crops the side
     bearings of the serif and the tails of the descenders, and the accent words
     are exactly the ones that have them */
/* the masks sit on the baseline, not on their own top edge: two faces in one
     line have boxes of different heights, and aligning the boxes instead of the
     baselines is what drops the serif words out of the line */
.rv .wm{display:inline-block;vertical-align:baseline;padding-bottom:.16em;margin-bottom:-.16em;
    -webkit-clip-path:inset(-0.32em -0.1em .16em -0.1em);clip-path:inset(-0.32em -0.1em .16em -0.1em);}
.rv .w{display:inline-block;white-space:nowrap;transform:translateY(112%);
    transition:transform .86s var(--ease);}
.rv.is-rv .w{transform:none;}
/* anything else that should arrive: fade-rise once */
.in{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.in.is-in{opacity:1;transform:none;}
/* the rule: anything with a rounded border can be pressed, and nothing else has one.
     Two weights — filled for the one thing we want you to do, hairline for the rest —
     and the same four states on both: rest, hover, press, keyboard focus. */
.btn{position:relative;isolation:isolate;overflow:hidden;
    display:inline-flex;align-items:center;height:48px;border-radius:999px;
    padding-left:24px;padding-right:calc(24px - .12em);
    font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:1;
    text-decoration:none;cursor:pointer;border:1px solid transparent;
    transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .25s var(--ease);}
.btn:active{transform:scale(.975);}
.btn:focus-visible{outline:2px solid var(--lime);outline-offset:4px;}
.btn .btn__l{position:relative;z-index:1;transform:translateY(1px);}
.btn .btn__a{position:relative;z-index:1;width:0;margin-left:0;opacity:0;overflow:hidden;white-space:nowrap;
    transform:translateY(1px);
    transition:width .45s var(--ease),margin-left .45s var(--ease),opacity .35s var(--ease);}
.btn:hover .btn__a,.btn:focus-visible .btn__a{width:1.1em;margin-left:10px;opacity:1;}
/* primary: filled lime; on hover it brightens and makes room for an arrow */
.btn--1{background:var(--lime);border-color:var(--lime);color:var(--ground);}
/* ---------- section frame ---------- */
section{padding-block:var(--sect);}
.head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start;}
.head h2{grid-column:1 / span 7;}
.head .standfirst{grid-column:9 / span 4;margin-top:.5em;}
/* its cap height meets the heading's x-height */
/* one beat from a head to whatever follows it */
.head + *{margin-top:var(--beat);}
/* ================= A2 · THE GAP ================= */
/* the hall gets a frame to itself here, where it is the only image on screen
     and can afford the contrast a point cloud needs to resolve into a building */
/* no clipping here: the lit row's bar has to reach past the content column
     to the edges of the screen, and an overflow:hidden on the section would cut
     it at the margin. The hall clips itself instead. */
#gap{position:relative;}
/* the field carries its own gradient left to right, so the scrim only has to
     keep it off the section's edges */
#gap > *{position:relative;z-index:1;}
/* The list is the argument of this section, so it is read one line at a time:
     at rest a row says only what the company sees, and the half that says what
     it cannot do is withheld. A lime bar wipes across the row as the reader
     reaches it — the row inverts, dark on lime — and the second half arrives.
     Past rows keep both halves in ordinary colours, so by the end the whole
     argument is on the page with one line of it under the light. */
.gap-list{list-style:none;margin:var(--beat) 0 0;padding:0;border-top:1px solid var(--hairline);}
.gap-list li{position:relative;isolation:isolate;
    display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
    padding-block:clamp(22px,2.6vw,34px);align-items:baseline;cursor:default;}
/* the rule under a row draws itself as the row arrives */
.gap-list li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--hairline);transform:scaleX(0);transform-origin:left center;
    transition:transform .7s var(--ease),background-color .3s var(--ease);}
.gap-list li.is-in::after{transform:none;}
/* the light: it runs the full width of the screen, so the text sits on the
     grid with air around it rather than against the edge of a swatch. A little
     wider than the screen, so a scrollbar can never leave a sliver at the right */
.gap-list li::before{content:"";position:absolute;top:0;bottom:0;z-index:-1;background:var(--lime);
    left:calc((100vw + 40px - 100%) / -2);width:calc(100vw + 40px);
    transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease);}
.gap-list li.is-hot::before{transform:none;}
.gap-list li.is-hot::after{background:transparent;}
/* the half the company already knows, rising out of its own rule */
.gap-list .knows{grid-column:1 / span 6;color:var(--ink);display:block;
    clip-path:inset(-0.25em -0.12em 0 -0.12em);-webkit-clip-path:inset(-0.25em -0.12em 0 -0.12em);
    transition:color .4s var(--ease);}
.gap-list .knows > i{display:block;font-style:normal;transform:translateY(112%);
    transition:transform .8s var(--ease);}
.gap-list li.is-in .knows > i{transform:none;}
/* the other half is not written on the page, it is run: prompt, output, caret */
/* the prompt keeps its place on the grid and the answer prints away from it,
     left to right, the way a console writes - right-aligning it would push the
     prompt across the row as the line grew */
.gap-list .cant{grid-column:8 / span 5;justify-self:start;text-align:left;white-space:nowrap;
    font-family:var(--mono);font-size:calc(var(--t-state) * .8);letter-spacing:-.01em;line-height:1.22;
    color:var(--ink-2);opacity:0;transition:opacity .6s var(--ease) .24s,color .4s var(--ease);}
.gap-list li.is-in .cant{opacity:1;}
.gap-list .cant b{font-weight:400;}
.gap-list .cant .pr{color:var(--hairline-2);margin-right:.55ch;transition:color .4s var(--ease);}
.gap-list .cant .cu{display:inline-block;width:.52em;height:.94em;vertical-align:-.1em;
    margin-left:.35ch;background:currentColor;opacity:.5;animation:cu 1.06s steps(1,end) infinite;}
.gap-list li.is-hot .cant .cu{opacity:1;}
/* while it types the caret holds still; it blinks again when the line is done */
.gap-list li.is-typing .cant .cu{animation:none;}
/* the three prompts are not one machine, so they do not blink in step */
.gap-list li:nth-child(2) .cant .cu{animation-delay:.35s;}
.gap-list li:nth-child(3) .cant .cu{animation-delay:.7s;}
/* the row under the light. Dark on light reads thinner than light on dark at
     the same weight - the light spills over the edges of the letter. So the dark
     state gets the weight back: the browser's own subpixel rendering instead of
     the page's grey-on-black smoothing, plus a hairline stroke to match the
     measured ink of the unlit rows. */
.btn--1{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;
    -webkit-text-stroke:0.22px currentColor;paint-order:stroke fill;}
.gap-list li.is-hot .knows,.gap-list li.is-hot .cant{color:var(--ground);
    -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;
    -webkit-text-stroke:0.35px currentColor;paint-order:stroke fill;}
.gap-list li.is-hot .cant .pr{color:rgba(24,30,39,.5);}
/* between the stacked layout and a comfortable desktop the answer is longer
     than the column it prints into, so the console starts a column earlier and
     sets a size smaller rather than running past the margin */
@media (max-width:1280px){
.gap-list .cant{grid-column:7 / span 6;font-size:calc(var(--t-state) * .72);}
}
.sr-o{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0;}
/* ================= A3 · WHAT WE BUILD =================
     The claim holds still on the left while the three things pass it on the
     right — the reader is not choosing between three columns, they are being
     walked down a list that has an order. The spine carries a node per card,
     lime once the card has arrived, so the order is drawn and not just numbered.
     Each card arrives from below and, once it has been read, recedes: it blurs
     slightly and dims, which is what puts the card being read in front. */
/* the claim and the list share a grid that ends with the last card, so the
     claim lets go exactly when there is nothing left to hold it against */
.wbgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
.head--split{grid-column:1 / span 4;display:block;position:sticky;align-self:start;
    top:clamp(96px,16vh,190px);}
.head--split .standfirst{margin-top:var(--lead);max-width:30ch;}
.head--split + .wb{margin-top:0;}
.wb{grid-column:6 / span 7;position:relative;}
.wb__list{list-style:none;margin:0;padding:0 0 0 clamp(26px,3vw,46px);position:relative;
    display:grid;gap:clamp(16px,1.8vw,26px);}
/* the spine */
.wb__list::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--hairline);}
/* the figures are line drawings, and the ground's column lines run straight
     through them. So a card is a card: its own ground, closed by a hairline on
     all four sides. Square corners - a rounded edge on this page means the
     thing can be pressed. */
.wb__card{position:relative;display:grid;grid-template-columns:clamp(140px,15vw,196px) minmax(0,1fr);
    gap:clamp(22px,2.6vw,40px);align-items:start;
    padding:clamp(26px,3vw,42px);background:var(--ground);border:1px solid var(--hairline);
    /* driven by scroll position rather than by a one-shot transition: wherever
       the reader enters the block, the cards are moving under the wheel, which
       is what makes the column feel handled rather than merely revealed */
    --o:0;--y:46px;--b:0px;
    opacity:var(--o);transform:translateY(var(--y));}
/* the node on the spine, opposite the card's first line */
.wb__card::before{content:"";position:absolute;left:calc(clamp(26px,3vw,46px) * -1);top:clamp(32px,3.6vw,50px);
    width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:2px;background:var(--hairline-2);
    box-shadow:0 0 0 5px var(--ground);transition:background-color .6s var(--ease);}
.wb__card.is-read::before{background:var(--lime);}
/* what is behind you recedes by dimming alone — a blur over line figures
     turns clean strokes into grey wool */
.wb__fig{position:relative;aspect-ratio:1;}
.wb__fig canvas{width:100%;height:100%;display:block;}
.wb__k{font-family:var(--mono);font-size:var(--ix);letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-2);margin:0 0 14px;display:flex;align-items:baseline;gap:12px;}
.wb__k i{font-style:normal;font-size:var(--num);color:var(--lime);opacity:.85;}
.wb__name{font-size:var(--t-name);font-weight:500;letter-spacing:-.024em;line-height:1.15;margin:0;}
.wb__lead{color:var(--ink);font-size:var(--t-card);letter-spacing:-.012em;margin:14px 0 0;max-width:30ch;}
.wb__p{color:var(--ink-2);margin:16px 0 0;font-size:.9375rem;max-width:40ch;}
@media (max-width:1100px){
.wbgrid{display:block;}
.head--split{position:static;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
.head--split h2{grid-column:1 / span 7;}
.head--split .standfirst{grid-column:9 / span 4;margin-top:.5em;max-width:36ch;}
.head--split + .wb{margin-top:var(--beat);}
.wb{grid-column:auto;}
}
@media (max-width:760px){
.head--split h2,.head--split .standfirst{grid-column:1 / -1;}
.head--split .standfirst{margin-top:28px;}
.wb__card{grid-template-columns:1fr;gap:26px;}
.wb__fig{max-width:190px;}
}
/* ================= A4 · SUPERDIGITAL ================= */
.sd{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
.sd__l{grid-column:1 / span 6;}
.sd__r{grid-column:8 / span 5;}
.sd h2 .hl{white-space:normal;}
/* ---------- 005 · the platform, behind glass ----------
     The drawings are the ones from the Superdigital architecture - the same
     figures, not new ones, so the page and the product are visibly one system.
     They are shown on the machine the reader is holding: a monitor on a desk, a
     tablet on a tablet, a phone on a phone, each drawn in the one hairline the
     rest of the figures use, and each showing as much of the argument as its
     screen can hold - six panels, three, two. The way into the product is a
     control on that screen rather than a button beside the picture, which is
     what it would be in the product itself. Square corners on the machine,
     because a rounded edge on this page means the thing can be pressed - and
     the one rounded thing here is exactly that. */
.mon{margin-top:clamp(56px,6.5vw,104px);--p:3.8s;--travel:cubic-bezier(.45,0,.25,1);
    --o-ln:.34;--o-soft:.17;--o-tk:.24;--o-edge:.2;}
.mon__dev{position:relative;border:1px solid var(--hairline-2);background:var(--ground);
    padding:clamp(12px,1.2vw,20px) clamp(12px,1.2vw,20px) clamp(30px,2.6vw,42px);}
.mon__screen{position:relative;}
/* the glass: lit a shade above the page, falling off towards the edges */
.mon__screen::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
    background:radial-gradient(120% 90% at 50% 0%,rgba(233,237,242,.045),rgba(233,237,242,0) 68%);}
.mon__grid{position:relative;list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1vw,16px);}
.mon__panel{border:1px solid var(--hairline);padding:clamp(10px,0.9vw,16px);min-width:0;}
.mon__hd{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-2);margin:0 0 clamp(6px,0.6vw,10px);display:block;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;}
.mon__hd i{font-style:normal;color:var(--hairline-2);}
.mon__hd i::after{content:"\2009/\2009";}
.mon__fig svg{display:block;width:100%;height:auto;overflow:visible;}
.mon__act{position:relative;display:flex;justify-content:center;
    margin-top:clamp(14px,1.3vw,22px);}
/* the one light that says the machine is running */
.mon__ind{position:absolute;right:clamp(14px,1.3vw,22px);bottom:clamp(13px,1.1vw,18px);
    width:5px;height:5px;background:var(--lime);opacity:.9;}
.mon__cam{display:none;}
/* the stand, drawn rather than boxed: a neck and a foot in one hairline */
.mon__stand{display:block;width:clamp(160px,15vw,230px);height:auto;margin:0 auto;
    color:var(--hairline-2);}
/* ---- the tablet: the machine narrows, and so does the argument ---- */
@media (max-width:1100px){
/* the tablet keeps the whole argument, in two columns instead of three: the
       figures are drawn 320 wide, and half of this screen is still wider than
       that, so nothing is lost by turning the grid rather than cutting it */
.mon__dev{max-width:600px;margin-inline:auto;padding:clamp(30px,4vw,44px) clamp(18px,2.4vw,26px);}
.mon__grid{grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,18px);}
.mon__stand{display:none;}
/* a camera above the screen and a bar below it, instead of a chin light */
.mon__cam{display:block;position:absolute;top:clamp(13px,1.7vw,19px);left:50%;transform:translateX(-50%);
      width:5px;height:5px;border:1px solid var(--hairline-2);}
.mon__ind{right:auto;left:50%;transform:translateX(-50%);bottom:clamp(13px,1.7vw,19px);
      width:86px;height:2px;background:var(--hairline-2);opacity:1;}
}
/* ---- the phone ---- */
@media (max-width:600px){
.mon__dev{max-width:330px;padding:26px 14px 22px;}
.mon__grid{grid-template-columns:1fr;}
/* reads, decides by your rules, acts - the sentence the section makes, and
       the three the phone can hold at a size worth drawing */
.mon__panel:nth-child(1),.mon__panel:nth-child(3),.mon__panel:nth-child(4){display:none;}
.mon__cam{width:38px;height:3px;border:0;background:var(--hairline-2);top:12px;}
.mon__ind{width:96px;bottom:10px;}
}
@media (prefers-reduced-motion:reduce){
.mon *{animation:none!important;}
}
/* ---- the figure kit (shared with the layer-figure study) ---- */
.mon .ln{fill:none;stroke:var(--ink);stroke-opacity:var(--o-ln);stroke-width:1;vector-effect:non-scaling-stroke;}
.mon .ln-s{fill:none;stroke:var(--ink);stroke-opacity:var(--o-soft);stroke-width:1;vector-effect:non-scaling-stroke;}
.mon .ln-b{fill:none;stroke:var(--ink);stroke-opacity:var(--o-soft);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;}
.mon .ln-a{fill:none;stroke:var(--lime);stroke-width:1;vector-effect:non-scaling-stroke;}
.mon .ln-m{fill:none;stroke:var(--amber);stroke-opacity:.95;stroke-width:1;vector-effect:non-scaling-stroke;}
.mon .tk{fill:none;stroke:var(--ink);stroke-opacity:var(--o-tk);stroke-width:1;vector-effect:non-scaling-stroke;}
.mon .tk-a{fill:none;stroke:var(--lime);stroke-width:1;vector-effect:non-scaling-stroke;}
.mon .nd-o{fill:none;stroke:var(--ink);stroke-opacity:var(--o-ln);stroke-width:1;vector-effect:non-scaling-stroke;}
.mon .tok{fill:none;stroke:var(--ink);stroke-opacity:.5;stroke-width:1;vector-effect:non-scaling-stroke;}
.mon .tok-a{fill:var(--lime);}
.mon .tok-m{fill:none;stroke:var(--amber);stroke-width:1;vector-effect:non-scaling-stroke;}
.mon .tok-dot{fill:var(--lime);}
.mon .glyph{fill:none;stroke:var(--ink);stroke-opacity:.72;stroke-width:1;vector-effect:non-scaling-stroke;}
.mon .travel{offset-rotate:0deg;animation:travel var(--p) var(--travel) infinite;}
.mon .travel-a{offset-rotate:0deg;animation:travelA var(--p) var(--travel) infinite;}
.mon .lit{animation:lit var(--p) linear infinite;}
.mon .t-main,
.mon .t-in,
.mon .t-out,
.mon .t-alt{transform-box:fill-box;transform-origin:50% 50%;animation:wave var(--p) linear infinite;}
.mon .route{vector-effect:none;stroke-dasharray:101;stroke-dashoffset:101;animation:draw var(--p) linear infinite;}
.mon .try{offset-rotate:0deg;animation:tryRun var(--p) var(--travel) infinite;}
.mon .alt{offset-rotate:0deg;animation:altRun var(--p) linear infinite;}
.mon .fail{animation:fail var(--p) linear infinite;}
.mon .r-pass{animation-delay:0s;}
.r-pass2{animation-delay:calc(var(--p) * -.5);}
.r-drop{animation-delay:calc(var(--p) * -.25);}
.mon .r-up{animation:travelHold var(--p) var(--travel) infinite calc(var(--p) * -.75);}
.mon .who{animation:who var(--p) linear infinite calc(var(--p) * -.75);}
.mon .m1{animation-delay:0s;}
.m2{animation-delay:calc(var(--p) * -.3333);}
.m3{animation-delay:calc(var(--p) * -.6667);}
.mon .raw{animation:rawOut var(--p) linear infinite;}
.norm{animation:normIn var(--p) linear infinite;}
.mon .m2 .raw,.mon .m2 .norm{animation-delay:calc(var(--p) * -.3333);}
.m3 .raw,.m3 .norm{animation-delay:calc(var(--p) * -.6667);}
.mon .sweep{animation:sweep var(--p) linear infinite, sweepFade var(--p) linear infinite;}
.mon .scan{animation:scan var(--p) linear infinite, sweepFade var(--p) linear infinite;}
/* ================= A5 · BAND ================= */
/* no rules across the top and bottom: the band is a different ground, and the
     change of ground is the edge - a hairline on top of it only draws a box
     around the object */
.band{position:relative;min-height:clamp(480px,56vw,760px);display:flex;align-items:center;
    overflow:hidden;padding-block:var(--sect);}
/* the object is cut by the band, not by the page: it fades out before the
     section's edges so nothing of it sits on the rule above or below */
.band__fig{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);}
.band__fig canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;}
/* the copy has to win: the ground stays solid under it and clears to nothing
     where the object turns */
.band__fig::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
    background:linear-gradient(90deg,var(--ground) 4%,rgba(24,30,39,.82) 40%,rgba(24,30,39,0) 76%);}
.band__in{position:relative;width:100%;padding-inline:var(--margin);}
.band__txt{max-width:min(50ch,52%);}
.band h2{max-width:19ch;}
.band .body{margin-top:clamp(30px,3.4vw,44px);max-width:44ch;}
@media (max-width:900px){
.band__txt{max-width:100%;}
/* on a narrow screen the copy runs the full width, so the object cannot sit
       behind it. Dimming it to stay out of the way only made it disappear, so
       instead it is given a place of its own: the band grows a floor, and the
       object stands on it at full strength under the text rather than beneath it */
.band{padding-bottom:calc(var(--sect) + min(52vh,440px));}
.band__fig{top:auto;height:min(54vh,460px);opacity:1;
      -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 88%,transparent 100%);
      mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 88%,transparent 100%);}
.band__fig::after{display:none;}
}
/* two columns of the twelve-column grid: reasoning on the left, the claims on the right */
.col-a{grid-column:1 / span 5;}
.dc{margin:0;border:1px solid var(--hairline);background:var(--ground);
    padding:clamp(16px,1.6vw,22px) clamp(16px,1.6vw,22px) clamp(20px,2vw,28px);}
.dc__k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-2);margin:0 0 clamp(10px,1vw,14px);padding-bottom:clamp(10px,1vw,14px);
    border-bottom:1px solid var(--hairline);}
.dc__k i{font-style:normal;color:var(--hairline-2);margin-right:14px;}
.dc__fig svg{display:block;width:100%;height:auto;overflow:visible;}
.dc__t{margin:clamp(12px,1.2vw,18px) 0 0;color:var(--ink-2);font-size:.9375rem;max-width:34ch;}
/* --- the eye, set in a reticle --- */
.rt__brk{fill:none;stroke:var(--ink);stroke-opacity:.26;stroke-width:1;vector-effect:non-scaling-stroke;}
.rt__ax{stroke:var(--ink);stroke-opacity:.12;stroke-width:1;vector-effect:non-scaling-stroke;}
.rt__ax--d{stroke-opacity:.08;}
.rt__ring{fill:none;stroke:var(--ink);stroke-opacity:.2;stroke-width:1;vector-effect:non-scaling-stroke;}
.rt__ring--iris{stroke-opacity:.3;}
.rt__ring--pupil{stroke-opacity:.36;}
.rt__tk{stroke:var(--ink);stroke-opacity:.26;stroke-width:1;vector-effect:non-scaling-stroke;}
.rt__dot{fill:var(--ink);fill-opacity:.3;}
.ey__lid{stroke:var(--ink);stroke-opacity:.22;stroke-width:1;vector-effect:non-scaling-stroke;}
.ey__lens{fill:none;stroke:var(--ink);stroke-opacity:.5;stroke-width:1;vector-effect:non-scaling-stroke;}
.ey__pupil{fill:var(--ink);fill-opacity:.66;
    transform-box:view-box;transform-origin:180px 180px;animation:eyLook 13s ease-in-out infinite;}
.ey__scan{fill:var(--ink);fill-opacity:.05;animation:eyScan 7s linear infinite;}
/* the blink: the lens closes to its own lid line; the reticle does not move */
.ey__in{transform-box:view-box;transform-origin:180px 180px;
    animation:eyBlink 6.4s steps(1,end) infinite;}
/* --- the perimeter card: what is refused, and what stays --- */
.pb__bound{fill:none;stroke:rgba(79,195,217,.5);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:5 9;}
.pb__wire{stroke:var(--ink);stroke-opacity:.22;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:4 5;}
.pb__plate rect{fill:var(--ground);stroke:var(--ink);stroke-opacity:.22;stroke-width:1;vector-effect:non-scaling-stroke;}
.pb__plate text{fill:var(--ink-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-anchor:middle;}
.dc__fig .pb--tall{display:none;}
.pb__plate--s text{font-size:9px;letter-spacing:.04em;}
.pb--tall .pb__name{font-size:11px;}
.pb--tall .pb__ok{font-size:8.5px;}
.pb--tall .pb__parts{font-size:7.5px;}
/* below this the wide cross would set its labels too small to read */
@media (max-width:600px){
.dc__fig .pb--wide{display:none;}
.dc__fig .pb--tall{display:block;}
}
.pb__box{fill:var(--ground);stroke:var(--ink);stroke-opacity:.45;stroke-width:1;vector-effect:non-scaling-stroke;}
.pb__name{fill:var(--ink);font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-anchor:middle;}
.pb__ok{fill:var(--lime);font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-anchor:middle;}
.pb__rule{stroke:var(--ink);stroke-opacity:.18;stroke-width:1;vector-effect:non-scaling-stroke;}
.pb__parts{fill:var(--ink-2);font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-anchor:middle;opacity:.8;}
/* the refusal: grey, because nothing about it is ours - it is simply not allowed */
.pb__x line{stroke:var(--ink);stroke-opacity:.5;stroke-width:1.5;vector-effect:non-scaling-stroke;}
.pb__x{opacity:.55;animation:pbX var(--p,3.8s) linear infinite;animation-delay:calc(var(--i) * var(--p,3.8s) / -4);}
/* the attempt that meets it */
.pb__try{fill:var(--ink);fill-opacity:.5;
    animation:pbTry var(--p,3.8s) linear infinite;animation-delay:calc(var(--i) * var(--p,3.8s) / -4);}
/* ================= A6 · SOVEREIGNTY =================
     Two rows of the same shape: the text on the reading column, the figure it
     belongs to on the right. Between them the three guarantees are set as type
     on one rule - three stations, numbered - because with a drawing above and a
     drawing below, a third drawing in the middle would be one too many. The
     two cards carry the pictures; the band carries the words. */
.sv{margin-top:var(--beat);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:center;}
.sv__t{grid-column:1 / span 5;}
.sv__t .body + .body{margin-top:22px;}
.sv__f{grid-column:7 / span 6;}
.sv__f .dc{max-width:520px;margin-left:auto;}
.sv__f .dc__fig{max-width:420px;margin-inline:auto;}
.sv__f .dc--w .dc__fig{max-width:540px;}
/* the band: one rule, three stations */
.gband{list-style:none;margin:var(--beat) 0 0;padding:clamp(26px,3vw,40px) 0 0;
    border-top:1px solid var(--hairline-2);
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);}
.gband__i{position:relative;min-width:0;opacity:0;transform:translateY(12px);
    transition:opacity .8s var(--ease),transform .8s var(--ease);}
.gband.is-in .gband__i{opacity:1;transform:none;}
.gband.is-in .gband__i:nth-child(2){transition-delay:.12s;}
.gband.is-in .gband__i:nth-child(3){transition-delay:.24s;}
/* the station mark on the rule */
.gband__i::before{content:"";position:absolute;left:0;top:calc(clamp(26px,3vw,40px) * -1 - 4px);
    width:7px;height:7px;background:var(--hairline-2);box-shadow:0 0 0 4px var(--ground);}
.gband__n{display:block;font-family:var(--mono);font-size:var(--num);letter-spacing:.14em;
    color:var(--hairline-2);margin:0 0 clamp(12px,1.2vw,18px);}
.gband__t{margin:0;font-size:var(--t-state);letter-spacing:-.022em;line-height:1.22;color:var(--ink-2);}
.gband__t b{font-weight:500;color:var(--ink);}
.in.gband{opacity:1;transform:none;}
@media (max-width:900px){
.sv{gap:clamp(28px,4vw,40px);}
.sv__t,.sv__f{grid-column:1 / -1;}
.sv__f .dc{margin-left:0;max-width:none;}
.gband{grid-template-columns:1fr;gap:clamp(24px,3vw,32px);padding-top:0;border-top:0;}
.gband__i{padding-top:clamp(18px,2.4vw,24px);border-top:1px solid var(--hairline);}
.gband__i::before{display:none;}
}
@media (prefers-reduced-motion:reduce){
.gband__i{opacity:1;transform:none;transition:none;}
}
/* ================= A8 · CLOSE ================= */
.end{text-align:left;}
.end h2{max-width:14ch;}
/* ================= FOOTER ================= */
footer{border-top:1px solid var(--hairline);
    padding-block:clamp(56px,6vw,88px) calc(clamp(72px,8vw,104px) + env(safe-area-inset-bottom,0px));}
.foot{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
.foot__a{grid-column:1 / span 3;}
.foot__b{grid-column:4 / span 3;}
.foot__d{grid-column:7 / span 3;}
.foot__c{grid-column:10 / span 3;}
/* the blocks are equal, so what separates them is the measure of the type,
     not the width of the box */
.foot__a p{max-width:26ch;}
/* the registration number is a record, so it is set as one */
.foot__reg{margin-top:12px!important;font-family:var(--mono);font-size:.75rem!important;letter-spacing:.06em;}
.foot__adr{margin-top:12px!important;line-height:1.55;}
.foot p,.foot a{font-size:.875rem;color:var(--ink-2);margin:0;text-decoration:none;}
.foot a:hover{color:var(--ink);}
.foot__nav{display:flex;flex-direction:column;gap:12px;}
.foot__legal{margin-top:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;gap:8px 28px;
    font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);opacity:.65;}
/* the legal line: two of its items are pages of their own */
.foot__legal a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
    transition:color .3s var(--ease),border-color .3s var(--ease);}
.foot__legal a:hover{color:var(--lime);border-color:var(--lime);}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
.rv .w{transform:none;transition:none;}
.in{opacity:1;transform:none;transition:none;}
.gap-list li::after{transform:none;}
.gap-list .knows > i{transform:none;transition:none;}
.gap-list .cant{opacity:1;transition:none;}
.gap-list .cant .cu{animation:none;}
}
/* ---------- responsive ---------- */
@media (max-width:900px){
.head h2,.head .standfirst{grid-column:1 / -1;}
.head .standfirst{margin-top:28px;}
.gap-list li{grid-template-columns:1fr;gap:10px;}
.gap-list .knows,.gap-list .cant{grid-column:1 / -1;}
.gap-list .cant{justify-self:start;text-align:left;white-space:normal;}
.sd__l,.sd__r,.col-a{grid-column:1 / -1;}
.sd__r{margin-top:40px;}
.foot__a,
.foot__b,
.foot__c,
.foot__d{grid-column:1 / -1;}
.foot__b,.foot__c,.foot__d{margin-top:36px;}
}
/* the mark: a canvas, so it can turn; it takes the colour of the lockup it sits in */
.top__brand .nsmark{height:25px;width:25px;margin:0;display:block;}
section.wh{padding-block:0;border-top:0;margin:0;}
.wh-after{margin-top:-70vh;position:relative;z-index:1;}
/* the page carries a grain and a faint grid, so the ground is a material and not a void */
.whgrain{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:60;pointer-events:none;opacity:.038;background-repeat:repeat;}
/* the ground is the page's own grid: the twelve columns the layout is set on,
   drawn as hairlines and nothing else - so a centred block and a block set from
   the left margin are measured by the same thing. No horizontal lines: that
   rhythm belongs to the content, and a fixed horizontal grid can only cut
   across it. */
.field{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;
  padding-inline:var(--margin);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%);}
/* One line per second gutter, and in the middle of it. A line on a column edge
   looks wrong at the end of the row - the last interval is a column, every
   other one is a column plus a gutter - and a line on both edges turns the
   ground into a drawing sheet. Halfway down every other gutter the rhythm is
   exactly even the whole way across, and there are five lines instead of
   twenty-four: enough to measure by, not enough to read. */
.field__page > i{display:block;height:100%;position:relative;}
/* on a narrow screen the page is one column, so the ground halves its own
   count rather than crowding: six lines across the same width */
@media (max-width:760px){
.field__page{grid-template-columns:repeat(6,1fr);}
.field__page > i:nth-child(n+7){display:none;}
.field__page > i:nth-child(6)::after{display:none;}
}
.wh{height:700vh;position:relative;z-index:1;}
.whstage{position:sticky;top:0;height:100vh;overflow:hidden;}
.whleads{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;pointer-events:none;}
.whmark{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;
  font-weight:700;letter-spacing:.016em;line-height:1;font-size:clamp(1.8rem,7.2vw,6.5rem);color:var(--ink);}
.whlab{transition:color .32s var(--ease);position:absolute;font-family:var(--mono);font-weight:400;
  font-size:clamp(11.5px,0.86vw,13px);letter-spacing:.04em;line-height:1;color:var(--ink-2);white-space:nowrap;
  transform:translate(-50%,-50%);will-change:transform,opacity;}
.whhint{opacity:0;transition:opacity .8s var(--ease);position:absolute;left:0;right:0;bottom:34px;text-align:center;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);}
/* the curtain: it counts the page in, then lifts */
.whpre{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:80;background:var(--ground);will-change:transform;}
.whpre .whpct{position:absolute;right:var(--margin);bottom:30px;font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;color:var(--ink-2);}
.whpre .whrule{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--lime);}
.whpre.wh-out{transform:translateY(-101%);transition:transform .82s var(--ease);}
/* anything that arrives, arrives out of a mask, from below */
.whmask{display:inline-block;vertical-align:bottom;
  /* clipped at the baseline only: a letter may overhang sideways, which a bold
     S does, and still rise out of its own line */
  overflow:visible;-webkit-clip-path:inset(-0.35em -0.16em 0 -0.16em);-webkit-clip-path:inset(-0.35em -0.16em 0 -0.16em);clip-path:inset(-0.35em -0.16em 0 -0.16em);}
.whmask > i{display:inline-block;font-style:normal;transform:translateY(112%);
  transition:transform .78s var(--ease);}
.wh-in .whmask > i{transform:none;}
.whmark{display:flex;justify-content:center;}
/* Two statements of exactly the same shape, in the same place: two lines of the
   grotesque and one of the serif in lime. The first is spoken, then taken away,
   and the second takes its place — the swap is what makes them a pair. */
.whstack{position:absolute;left:0;right:0;top:49%;transform:translateY(calc(-50% + var(--sh,0px)));
  padding:0 var(--margin);pointer-events:none;}
.whsay{text-align:center;}
.whsay + .whsay{margin-top:clamp(36px,4.4vw,78px);}
/* One size for all six lines, so the two blocks share a single rhythm: the serif
   sits at 1em of the grotesque — the two faces have the same x-height, so at the
   same size they read as the same size, which is the whole point of the pairing. */
.whsay h2{margin:0 auto;max-width:none;font-weight:500;letter-spacing:-.032em;line-height:1.1;
  font-size:clamp(1.35rem,4.3vw,3.45rem);}
.whsay .whlm{display:block;overflow:visible;padding-bottom:.16em;-webkit-clip-path:inset(-0.3em -0.14em .16em -0.14em);-webkit-clip-path:inset(-0.3em -0.14em .16em -0.14em);clip-path:inset(-0.3em -0.14em .16em -0.14em);}
.whsay .whlm:not(.whlm--words) > span{display:block;transform:translateY(112%);will-change:transform;}
.whsay .whlm:not(.whlm--words) > span{white-space:nowrap;}
.whsay .whlm--words{display:block;white-space:nowrap;padding-bottom:0;-webkit-clip-path:none;-webkit-clip-path:none;clip-path:none;}
.whsay .whwm{display:inline-block;vertical-align:bottom;padding-bottom:.16em;
  -webkit-clip-path:inset(-0.3em -0.1em .16em -0.1em);-webkit-clip-path:inset(-0.3em -0.1em .16em -0.1em);clip-path:inset(-0.3em -0.1em .16em -0.1em);}
.whsay .whwm > i{display:inline-block;font-style:normal;font-family:var(--serif);font-weight:600;
  letter-spacing:-.012em;color:var(--lime);transform:translateY(112%);will-change:transform;}
.whsay .whix{display:block;margin:0 0 clamp(14px,1.8vw,24px);font-family:var(--mono);font-size:12px;
  /* a label has to be read: hairline grey is for rules, not for words */
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);opacity:0;}
/* a short window gets a smaller composition rather than a cropped one */
/* a short window gets a smaller pair rather than a cropped one */
@media (max-height:820px){
.whsay h2{font-size:clamp(1.25rem,3.5vw,2.85rem);}
.whsay + .whsay{margin-top:clamp(28px,3.4vw,58px);}
.whsay .whix{margin-bottom:clamp(10px,1.3vw,16px);}
}
@media (max-width:760px){
/* on a phone the long lines wrap rather than shrink to nothing */
.whsay h2{letter-spacing:-.018em;line-height:1.18;}
.whsay .whlm:not(.whlm--words) > span,.whsay .whlm--words{white-space:normal;}
.whmark{letter-spacing:.006em;}
}
@media (prefers-reduced-motion: reduce){
.whlab{transition:none!important}
}
/* ---------- what used to sit on the elements themselves ----------
   Moved here so no element carries a style attribute: the pages are then
   served under a policy that forbids inline style outright, and a class of
   injection stops being possible at the browser rather than at the server. */
.v1{--k:0;}
.v2{--k:1;}
.v3{--k:2;}
.v4{animation-delay:calc(var(--p) * -0.6167);}
.v5{animation-delay:calc(var(--p) * -0.6083);}
.v6{animation-delay:calc(var(--p) * -0.6000);}
.v7{animation-delay:calc(var(--p) * -0.5933);}
.v8{animation-delay:calc(var(--p) * -0.5850);}
.v9{animation-delay:calc(var(--p) * -0.5767);}
.v10{animation-delay:calc(var(--p) * -0.5683);}
.v11{animation-delay:calc(var(--p) * -0.5600);}
.v12{animation-delay:calc(var(--p) * -0.5517);}
.v13{animation-delay:calc(var(--p) * -0.5450);}
.v14{animation-delay:calc(var(--p) * -0.5367);}
.v15{animation-delay:calc(var(--p) * -0.5283);}
.v16{animation-delay:calc(var(--p) * -0.5200);}
.v17{animation-delay:calc(var(--p) * -0.5117);}
.v18{animation-delay:calc(var(--p) * -0.5033);}
.v19{animation-delay:calc(var(--p) * -0.4967);}
.v20{animation-delay:calc(var(--p) * -0.4883);}
.v21{animation-delay:calc(var(--p) * -0.4800);}
.v22{animation-delay:calc(var(--p) * -0.4717);}
.v23{animation-delay:calc(var(--p) * -0.4633);}
.v24{animation-delay:calc(var(--p) * -0.4550);}
.v25{animation-delay:calc(var(--p) * -0.4483);}
.v26{animation-delay:calc(var(--p) * -0.4400);}
.v27{animation-delay:calc(var(--p) * -0.4317);}
.v28{animation-delay:calc(var(--p) * -0.4233);}
.v29{animation-delay:calc(var(--p) * -0.4150);}
.v30{animation-delay:calc(var(--p) * -0.4067);}
.v31{animation-delay:calc(var(--p) * -0.4000);}
.v32{animation-delay:calc(var(--p) * -0.3917);}
.v33{animation-delay:calc(var(--p) * -0.3833);}
.v34{animation-delay:calc(var(--p) * -1.0000);}
.v35{animation-delay:calc(var(--p) * -0.9800);}
.v36{animation-delay:calc(var(--p) * -0.9617);}
.v37{animation-delay:calc(var(--p) * -0.9417);}
.v38{animation-delay:calc(var(--p) * -0.9217);}
.v39{animation-delay:calc(var(--p) * -0.9033);}
.v40{animation-delay:calc(var(--p) * -0.8833);}
.v41{animation-delay:calc(var(--p) * -0.9967);}
.v42{animation-delay:calc(var(--p) * -0.9767);}
.v43{animation-delay:calc(var(--p) * -0.9583);}
.v44{animation-delay:calc(var(--p) * -0.9383);}
.v45{animation-delay:calc(var(--p) * -0.9183);}
.v46{animation-delay:calc(var(--p) * -0.9000);}
.v47{animation-delay:calc(var(--p) * -0.8800);}
.v48{animation-delay:calc(var(--p) * -0.9933);}
.v49{animation-delay:calc(var(--p) * -0.9733);}
.v50{animation-delay:calc(var(--p) * -0.9550);}
.v51{animation-delay:calc(var(--p) * -0.9350);}
.v52{animation-delay:calc(var(--p) * -0.9150);}
.v53{animation-delay:calc(var(--p) * -0.8967);}
.v54{animation-delay:calc(var(--p) * -0.8767);}
.v55{offset-path:path('M26 36C96 36 118 90 176 90H294');}
.v56{offset-path:path('M26 90H176H294');}
.v57{offset-path:path('M26 144C96 144 118 90 176 90H294');}
.v58{animation-delay:calc(var(--p) * -0.4267);}
.v59{animation-delay:calc(var(--p) * -0.2150);}
.v60{animation-delay:calc(var(--p) * -0.0017);}
.v61{animation-delay:calc(var(--p) * -0.7883);}
.v62{animation-delay:calc(var(--p) * -0.1833);}
.v63{animation-delay:calc(var(--p) * -0.1733);}
.v64{animation-delay:calc(var(--p) * -0.1633);}
.v65{animation-delay:calc(var(--p) * -0.1533);}
.v66{animation-delay:calc(var(--p) * -0.1450);}
.v67{animation-delay:calc(var(--p) * -0.1350);}
.v68{animation-delay:calc(var(--p) * -0.1250);}
.v69{animation-delay:calc(var(--p) * -0.1150);}
.v70{animation-delay:calc(var(--p) * -0.1050);}
.v71{animation-delay:calc(var(--p) * -0.0950);}
.v72{animation-delay:calc(var(--p) * -0.0867);}
.v73{animation-delay:calc(var(--p) * -0.0767);}
.v74{animation-delay:calc(var(--p) * -0.0667);}
.v75{animation-delay:calc(var(--p) * 0.3383);}
.v76{animation-delay:calc(var(--p) * -0.9833);}
.v77{animation-delay:calc(var(--p) * -0.9667);}
.v78{animation-delay:calc(var(--p) * -0.9500);}
.v79{animation-delay:calc(var(--p) * -0.9333);}
.v80{animation-delay:calc(var(--p) * -0.9167);}
.v81{animation-delay:calc(var(--p) * -0.8667);}
.v82{animation-delay:calc(var(--p) * -0.8500);}
.v83{animation-delay:calc(var(--p) * -0.8333);}
.v84{animation-delay:calc(var(--p) * -0.8167);}
.v85{animation-delay:calc(var(--p) * -0.8000);}
.v86{animation-delay:calc(var(--p) * -0.7833);}
.v87{animation-delay:calc(var(--p) * -0.7667);}
.v88{animation-delay:calc(var(--p) * -0.7500);}
.v89{animation-delay:calc(var(--p) * -0.7333);}
.v90{animation-delay:calc(var(--p) * -0.7167);}
.v91{animation-delay:calc(var(--p) * -0.9600);}
.v92{animation-delay:calc(var(--p) * -0.9433);}
.v93{animation-delay:calc(var(--p) * -0.9267);}
.v94{animation-delay:calc(var(--p) * -0.9100);}
.v95{animation-delay:calc(var(--p) * -0.8933);}
.v96{animation-delay:calc(var(--p) * -0.8600);}
.v97{animation-delay:calc(var(--p) * -0.8433);}
.v98{animation-delay:calc(var(--p) * -0.8267);}
.v99{animation-delay:calc(var(--p) * -0.8100);}
.v100{animation-delay:calc(var(--p) * -0.7933);}
.v101{animation-delay:calc(var(--p) * -0.7767);}
.v102{animation-delay:calc(var(--p) * -0.7600);}
.v103{animation-delay:calc(var(--p) * -0.7433);}
.v104{animation-delay:calc(var(--p) * -0.7267);}
.v105{animation-delay:calc(var(--p) * -0.7100);}
.v106{animation-delay:calc(var(--p) * -0.9867);}
.v107{animation-delay:calc(var(--p) * -0.9700);}
.v108{animation-delay:calc(var(--p) * -0.9533);}
.v109{animation-delay:calc(var(--p) * -0.9367);}
.v110{animation-delay:calc(var(--p) * -0.9200);}
.v111{animation-delay:calc(var(--p) * -0.8867);}
.v112{animation-delay:calc(var(--p) * -0.8700);}
.v113{animation-delay:calc(var(--p) * -0.8533);}
.v114{animation-delay:calc(var(--p) * -0.8367);}
.v115{animation-delay:calc(var(--p) * -0.8200);}
.v116{animation-delay:calc(var(--p) * -0.8033);}
.v117{animation-delay:calc(var(--p) * -0.7867);}
.v118{animation-delay:calc(var(--p) * -0.7700);}
.v119{animation-delay:calc(var(--p) * -0.7533);}
.v120{animation-delay:calc(var(--p) * -0.7367);}
.v121{animation-delay:calc(var(--p) * -0.7200);}
.v122{animation-delay:calc(var(--p) * -0.7033);}
.v123{animation-delay:calc(var(--p) * -0.9633);}
.v124{animation-delay:calc(var(--p) * -0.9467);}
.v125{animation-delay:calc(var(--p) * -0.9300);}
.v126{animation-delay:calc(var(--p) * -0.9133);}
.v127{animation-delay:calc(var(--p) * -0.8633);}
.v128{animation-delay:calc(var(--p) * -0.8467);}
.v129{animation-delay:calc(var(--p) * -0.8300);}
.v130{animation-delay:calc(var(--p) * -0.8133);}
.v131{animation-delay:calc(var(--p) * -0.7967);}
.v132{animation-delay:calc(var(--p) * -0.7800);}
.v133{animation-delay:calc(var(--p) * -0.7633);}
.v134{animation-delay:calc(var(--p) * -0.7467);}
.v135{animation-delay:calc(var(--p) * -0.7300);}
.v136{animation-delay:calc(var(--p) * -0.7133);}
.v137{animation-delay:calc(var(--p) * -0.6967);}
.v138{animation-delay:calc(var(--p) * -0.6500);}
.v139{animation-delay:calc(var(--p) * -0.6367);}
.v140{animation-delay:calc(var(--p) * -0.6233);}
.v141{animation-delay:calc(var(--p) * -0.6100);}
.v142{animation-delay:calc(var(--p) * -0.5967);}
.v143{animation-delay:calc(var(--p) * -0.5717);}
.v144{animation-delay:calc(var(--p) * -0.5583);}
.v145{animation-delay:calc(var(--p) * -0.5317);}
.v146{animation-delay:calc(var(--p) * -0.5183);}
.v147{animation-delay:calc(var(--p) * -0.5050);}
.v148{animation-delay:calc(var(--p) * -0.4917);}
.v149{animation-delay:calc(var(--p) * -0.4783);}
.v150{animation-delay:calc(var(--p) * -0.4650);}
.v151{animation-delay:calc(var(--p) * -0.4533);}
.v152{animation-delay:calc(var(--p) * -0.4133);}
.v153{animation-delay:calc(var(--p) * -0.9883);}
.v154{animation-delay:calc(var(--p) * -0.9517);}
.v155{animation-delay:calc(var(--p) * -0.9400);}
.v156{animation-delay:calc(var(--p) * -0.9283);}
.v157{animation-delay:calc(var(--p) * -0.8917);}
.v158{animation-delay:calc(var(--p) * -0.8683);}
.v159{animation-delay:calc(var(--p) * -0.8550);}
.v160{animation-delay:calc(var(--p) * -0.8317);}
.v161{animation-delay:calc(var(--p) * -0.8067);}
.v162{animation-delay:calc(var(--p) * -0.7950);}
.v163{animation-delay:calc(var(--p) * -0.6833);}
.v164{animation-delay:calc(var(--p) * -0.6733);}
.v165{animation-delay:calc(var(--p) * -0.6633);}
.v166{animation-delay:calc(var(--p) * -0.6533);}
.v167{animation-delay:calc(var(--p) * -0.6433);}
.v168{animation-delay:calc(var(--p) * -0.6333);}
.v169{animation-delay:calc(var(--p) * -0.6250);}
.v170{animation-delay:calc(var(--p) * -0.6150);}
.v171{animation-delay:calc(var(--p) * -0.6050);}
.v172{animation-delay:calc(var(--p) * -0.5950);}
.v173{animation-delay:calc(var(--p) * -0.5750);}
.v174{animation-delay:calc(var(--p) * -0.5650);}
.v175{animation-delay:calc(var(--p) * -0.5550);}
.v176{animation-delay:calc(var(--p) * -0.5350);}
.v177{animation-delay:calc(var(--p) * -0.5250);}
.v178{animation-delay:calc(var(--p) * -0.5167);}
.v179{animation-delay:calc(var(--p) * -0.5067);}
.v180{animation-delay:calc(var(--p) * -0.4867);}
.v181{animation-delay:calc(var(--p) * -0.4767);}
.v182{animation-delay:calc(var(--p) * -0.4667);}
.v183{offset-path:path('M26 90H294');}
.v184{offset-path:path('M26 90H146 C196 90 202 138 248 138');}
.v185{offset-path:path('M26 90H146 C196 90 202 40 248 40');}
.v186{animation-delay:calc(var(--p) * -0.9850);}
.v187{animation-delay:calc(var(--p) * -0.9783);}
.v188{animation-delay:calc(var(--p) * -0.9717);}
.v189{animation-delay:calc(var(--p) * -0.9650);}
.v190{animation-delay:calc(var(--p) * -0.9567);}
.v191{animation-delay:calc(var(--p) * -0.9067);}
.v192{animation-delay:calc(var(--p) * -0.8850);}
.v193{animation-delay:calc(var(--p) * -0.8783);}
.v194{animation-delay:calc(var(--p) * -0.8717);}
.v195{animation-delay:calc(var(--p) * -0.8650);}
.v196{animation-delay:calc(var(--p) * -0.8567);}
.v197{animation-delay:calc(var(--p) * -0.8350);}
.v198{animation-delay:calc(var(--p) * -0.8283);}
.v199{animation-delay:calc(var(--p) * -0.8217);}
.v200{animation-delay:calc(var(--p) * -0.8150);}
.v201{animation-delay:calc(var(--p) * -0.7850);}
.v202{animation-delay:calc(var(--p) * -0.7783);}
.v203{animation-delay:calc(var(--p) * -0.7717);}
.v204{animation-delay:calc(var(--p) * -0.7650);}
.v205{animation-delay:calc(var(--p) * -0.7567);}
.v206{animation-delay:calc(var(--p) * -0.7350);}
.v207{animation-delay:calc(var(--p) * -0.7283);}
.v208{animation-delay:calc(var(--p) * -0.7217);}
.v209{animation-delay:calc(var(--p) * -0.7150);}
.v210{animation-delay:calc(var(--p) * -0.7067);}
.v211{animation-delay:calc(var(--p) * -0.7000);}
.v212{animation-delay:calc(var(--p) * -0.4900);}
.v213{animation-delay:calc(var(--p) * -0.4500);}
.v214{animation-delay:calc(var(--p) * -0.4367);}
.v215{animation-delay:calc(var(--p) * -0.4100);}
.v216{animation-delay:calc(var(--p) * -0.3967);}
.v217{offset-path:path('M32 58H294');}
.v218{offset-path:path('M112 58C152 58 152 126 192 126H258C292 126 280 58 294 58');}
.v219{animation-delay:calc(var(--p) * -0.0000);}
.v220{offset-path:path('M46 36 H182');animation-delay:calc(var(--p) * -0.0000);}
.v221{animation-delay:calc(var(--p) * -0.2500);}
.v222{offset-path:path('M46 72 H182');animation-delay:calc(var(--p) * -0.2500);}
.v223{animation-delay:calc(var(--p) * -0.5000);}
.v224{offset-path:path('M46 108 H182');animation-delay:calc(var(--p) * -0.5000);}
.v225{offset-path:path('M46 144 H182');animation-delay:calc(var(--p) * -0.7500);}
.v226{--i:0;--tx:0px;--ty:-20px;}
.v227{--i:1;--tx:20px;--ty:0px;}
.v228{--i:2;--tx:0px;--ty:20px;}
.v229{--i:3;--tx:-20px;--ty:0px;}
.v230{--i:0;}
.v231{--i:1;}
.v232{--i:2;}
.v233{--i:3;}
.v234{--i:0;--tx:0px;--ty:-16px;}
.v235{--i:1;--tx:16px;--ty:0px;}
.v236{--i:2;--tx:0px;--ty:16px;}
.v237{--i:3;--tx:-16px;--ty:0px;}
.v238{color:var(--ink);font-size:1rem;}
.v239{margin-top:12px;}
@keyframes cu{50%{opacity:0;}}
@keyframes travel{0%{offset-distance:0%;opacity:0;}6%{opacity:1;}94%{offset-distance:100%;opacity:1;}100%{offset-distance:100%;opacity:0;}}
@keyframes travelA{0%{offset-distance:0%;opacity:0;}5%{opacity:1;}52%{offset-distance:100%;opacity:1;}60%{offset-distance:100%;opacity:0;}100%{offset-distance:100%;opacity:0;}}
@keyframes lit{0%,52%{stroke:var(--ink);stroke-opacity:var(--o-tk);}58%{stroke:var(--lime);stroke-opacity:1;}84%{stroke:var(--lime);stroke-opacity:1;}92%,100%{stroke:var(--ink);stroke-opacity:var(--o-tk);}}
@keyframes wave{0%{transform:scaleY(.30);stroke-opacity:var(--o-tk);animation-timing-function:cubic-bezier(.16,.72,.3,1);}
    10%{transform:scaleY(1);stroke-opacity:.42;animation-timing-function:cubic-bezier(.5,0,.45,1);}
    34%{transform:scaleY(.30);stroke-opacity:var(--o-tk);}100%{transform:scaleY(.30);stroke-opacity:var(--o-tk);}}
@keyframes draw{0%,52%{stroke-dashoffset:101;}90%{stroke-dashoffset:0;}95%{stroke-dashoffset:0;}100%{stroke-dashoffset:101;}}
@keyframes edge{0%{stroke-dashoffset:101;stroke-opacity:0;}2%{stroke-opacity:var(--o-edge);}9%{stroke-dashoffset:0;}84%{stroke-dashoffset:0;stroke-opacity:var(--o-edge);}94%{stroke-opacity:0;}100%{stroke-dashoffset:101;stroke-opacity:0;}}
@keyframes tryRun{0%{offset-distance:0%;opacity:0;}5%{opacity:1;}26%{offset-distance:51.5%;opacity:1;}32%{offset-distance:51.5%;}44%{offset-distance:30%;opacity:1;}48%{opacity:0;}100%{opacity:0;}}
@keyframes altRun{0%,52%{offset-distance:0%;opacity:0;}54%{opacity:1;}90%{offset-distance:100%;opacity:1;}95%,100%{offset-distance:100%;opacity:0;}}
@keyframes fail{0%,26%{opacity:0;}31%{opacity:1;}44%{opacity:1;}50%,100%{opacity:0;}}
@keyframes travelHold{0%{offset-distance:0%;opacity:0;}6%{opacity:1;}58%{offset-distance:100%;opacity:1;}84%{offset-distance:100%;opacity:1;}92%,100%{offset-distance:100%;opacity:0;}}
@keyframes who{0%,54%{opacity:.28;}62%{opacity:1;}84%{opacity:1;}92%,100%{opacity:.28;}}
@keyframes rawOut{0%,44%{opacity:1;}52%,100%{opacity:0;}}
@keyframes normIn{0%,44%{opacity:0;}52%,100%{opacity:1;}}
@keyframes sweep{0%{transform:translateX(-130px);}100%{transform:translateX(130px);}}
@keyframes sweepFade{0%{opacity:0;}7%{opacity:1;}93%{opacity:1;}100%{opacity:0;}}
@keyframes scan{0%{transform:translateY(-56px);}100%{transform:translateY(56px);}}
/* the pupil keeps to the central circle: r 40 less its own 12 */
@keyframes eyLook{0%,100%{transform:translate(0,0);}18%,36%{transform:translate(22px,-9px);}
    52%,68%{transform:translate(-20px,7px);}84%{transform:translate(8px,18px);}}
@keyframes eyScan{0%{transform:translateY(100px);}100%{transform:translateY(270px);}}
@keyframes eyBlink{0%,90%{transform:scaleY(1);}92%{transform:scaleY(.06);}
    94%{transform:scaleY(1);}96%{transform:scaleY(.06);}98%,100%{transform:scaleY(1);}}
@keyframes pbX{0%,22%{opacity:.55;}28%{opacity:1;}44%{opacity:1;}56%,100%{opacity:.55;}}
@keyframes pbTry{0%{transform:translate(0,0);opacity:0;}
    6%{opacity:1;}24%{transform:translate(var(--tx),var(--ty));opacity:1;}
    30%,100%{transform:translate(var(--tx),var(--ty));opacity:0;}}