: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);          /* section statement */
    --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: loop steps, control rules */
    --t-name:clamp(1.25rem,1.9vw,1.625rem);   /* a named thing: functions, stages */
    --t-card:clamp(1rem,1.3vw,1.1875rem);     /* a card's title */
    --t-sf:clamp(1.0625rem,1.45vw,1.375rem);  /* standfirst */

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

    /* the loop stack */
    --strip:48px; --h1:440px; --gap:24px; --stack-top:clamp(24px,9vh,88px);
  }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:clamp(16px,3vw,40px);}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
    line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.wrap{padding-inline:var(--margin);}
.page{max-width:1560px;margin-inline:auto;}
::selection{background:var(--lime);color:var(--ground);}
/* ---------- 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);}
/* the mark of a link that leaves the site */
.rail__out{margin-left:9px;font-size:1.05em;line-height:0;transform:translateY(.5px);}
.rail__pill:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}
@media (max-width:760px){
.rail__caps{pointer-events:none;}
}
/* the page carries a grain, so the ground reads as a surface rather than a void */
.grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;pointer-events:none;
    opacity:.038;background-repeat:repeat;}
/* ---------- the ground ----------
     The page is set on twelve columns, so the ground is measured by them: one
     hairline halfway down every second gutter. A line on a column edge makes
     the last interval a column and every other one a column plus a gutter, and
     the eye reads the last as a mistake; halfway down a gutter the rhythm is
     even the whole way across. */
.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);}
.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;}
@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;}
}
/* the page sits on the ground, not under it */
.wrap{position:relative;z-index:1;}
/* ---------- roles ---------- */
/* index - where you are in the document. The number is the dimmer half: an
     index says where, not what, and the label is what has to be read. The slash
     belongs to the number, held to it by thin spaces. */
.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 across both pages: the same size, weight, tracking and line, the
     operative words in the serif, and the same arrival - a word at a time,
     rising out of its own line. */
h1,h2{font-weight:500;letter-spacing:-.032em;line-height:1.1;margin:0;text-wrap:balance;}
h1{font-size:clamp(3.4rem,9.2vw,9.5rem);line-height:.96;letter-spacing:-.045em;}
h2{font-size:var(--t-h2);}
h3{font-size:clamp(1.25rem,1.9vw,1.75rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:0;}
/* the operative words. The serif is the page's one other voice, matched to the
     sans on the x-height rather than the em, and set one step heavier because a
     serif reads lighter at the same size. An accent breaks as one thing. */
h2 .hl{font-family:var(--serif);font-weight:600;font-size:1.07em;
    letter-spacing:-.012em;white-space:nowrap;}
.hl{color:var(--lime);}
.standfirst{font-size:var(--t-sf);letter-spacing:-.012em;line-height:1.45;
    color:var(--ink);max-width:36ch;margin:0;}
.body{color:var(--ink-2);font-size:1.0625rem;max-width:46ch;margin:0;}
.body + .body{margin-top:22px;}
/* 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. */
.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;}
/* ---------- the seam ----------
     Every section opens the same way: a hairline the width of the screen with
     the section's index cut into it at the left margin. The rule genuinely
     stops at the index and starts again after it, so the same seam works over a
     figure as over the page. */
.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;}
.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;}
.head h2{grid-column:1 / span 7;}
.head .standfirst{grid-column:9 / span 4;margin-top:.5em;}
/* the mark itself, in its own colour, small: identity is a signature, not a wallpaper */
.sdmark{height:26px;width:auto;display:block;margin-right:6px;align-self:center;}
/* ================= B2 · THE LOOP (one scene, five states) ================= */
/* the figure is pinned and the steps scroll past it: one event, one drawing,
     five states — the thing the copy calls "start to finish" stays on screen */
.loop{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);margin-top:var(--beat);}
.loop__stagewrap{grid-column:1 / span 5;}
.loop__stage{position:sticky;top:calc(50vh - 190px);max-width:492px;
    border:1px solid var(--hairline);background:var(--ground);overflow:hidden;
    transition:border-color .5s var(--ease);}
.loop__bar{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--hairline);}
.loop__n{font-family:var(--mono);font-size:var(--num);letter-spacing:.1em;color:var(--lime);}
.loop__t{font-size:var(--t-card);font-weight:500;letter-spacing:-.015em;
    transition:opacity .35s var(--ease);}
.loop__t.is-swap{opacity:0;}
/* the drawing is the same size as a layer figure on the architecture spine, plus the
     margin the scene needs — not "as wide as its column", which made it four times the size */
.loop__fig{position:relative;padding:clamp(18px,2.2vw,30px) clamp(20px,2.6vw,40px) clamp(14px,1.8vw,22px);--o-tk:.30;--o-soft:.22;--o-ln:.38;
    display:flex;align-items:center;justify-content:center;}
.loop__fig svg{width:100%;max-width:412px;height:auto;display:block;overflow:visible;}
.loop__fig .st{opacity:0;transition:opacity .7s var(--ease);}
.loop__fig .st.is-act{opacity:1;}
.loop__fig .st:not(.is-act) *{animation-play-state:paused!important;}
.loop__dots{list-style:none;margin:0;padding:0 clamp(20px,2.6vw,40px) clamp(18px,2vw,24px);display:flex;gap:8px;}
.loop__dots li{width:24px;height:2px;border-radius:1px;background:var(--hairline-2);
    transition:background-color .5s var(--ease);}
.loop__dots li.is-act{background:var(--lime);}
.loop__steps{grid-column:7 / span 6;list-style:none;margin:0;padding:0;}
.lstep{min-height:62vh;display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(24px,4vh,48px);border-top:1px solid var(--hairline);
    transition:opacity .6s var(--ease);opacity:.32;}
.lstep:first-child{border-top:0;}
.lstep.is-act{opacity:1;}
.lstep__n{font-family:var(--mono);font-size:var(--num);letter-spacing:.1em;color:var(--ink-2);transition:color .5s var(--ease);}
.lstep.is-act .lstep__n{color:var(--lime);}
.lstep__t{font-size:var(--t-state);letter-spacing:-.028em;line-height:1.1;margin:16px 0 0;font-weight:500;}
.lstep__p{margin:20px 0 0;color:var(--ink-2);font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.5;max-width:34ch;}
.lstep__p em{color:var(--ink);font-style:normal;}
@media (max-width:900px){
/* stacked: the stage pins at the top and the steps read beneath it. The
       wrapper dissolves so the stage's containing block is the whole block,
       not its own grid row — otherwise it scrolls away with the first step. */
.loop{display:block;}
.loop__stagewrap{display:contents;}
.loop__stage{top:56px;z-index:2;box-shadow:0 -56px 0 0 var(--ground);}
.loop__fig{padding:12px 16px;}
.loop__steps{padding-top:16px;}
.lstep{min-height:52vh;padding-block:28px;}
.lstep__p{max-width:none;}
}
@media (max-height:640px){
.loop__stage{top:12px;}
}
/* ---------- 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, held by a rule of its own and set in the serif. The lime is in
     the rule alone. No rule above it - the block it closes has drawn one
     already, and a second line two rows below reads as a mistake. */
.quote{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
    margin-top:clamp(56px,6.5vw,104px);}
.quote__m{display:none;}
.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,.spine-close > .quote .quote__t{grid-column:7 / span 6;}
.quote__t b{font-weight:600;color:var(--ink);}
@media (max-width:900px){
.quote__t,section > .quote .quote__t,.spine-close > .quote .quote__t{grid-column:1 / -1;}
}
/* ================= B3 · ARCHITECTURE (the spine) ================= */
/* ---- the three functions: three stations on one rail ----
     No box, no numbers, no layer maps. A hairline rail runs the width of the block;
     each function is a station on it, and at the end of each station's stretch the
     rail names what that function hands on — context, decision, action — which is
     the standfirst's sentence drawn as a line. A lime run travels the rail station
     to station on the six-second period every figure on the page keeps. */
.fn{position:relative;margin-top:calc(var(--beat) * 1.35);}
.fn__row{list-style:none;margin:0;padding:0;position:relative;
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);}
.fn__row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hairline-2);}
.fn__cell{position:relative;padding-top:clamp(30px,3vw,42px);}
/* the station */
.fn__cell::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;margin:-5px 0 0 -1px;
    border-radius:2px;background:var(--hairline-2);box-shadow:0 0 0 5px var(--ground);z-index:1;
    animation:fnNode var(--p) linear infinite;animation-delay:calc(var(--k) * var(--p) / 3);}
/* the run along this station's stretch */
.fn__cell::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--lime);
    transform-origin:left center;transform:scaleX(0);
    animation:fnRun var(--p) linear infinite;animation-delay:calc(var(--k) * var(--p) / 3);}
/* what the station hands on, sitting on the rail at the end of its stretch */
.fn__out{position:absolute;right:0;top:0;transform:translateY(-50%);z-index:1;
    padding-left:14px;background:var(--ground);
    font-family:var(--mono);font-size:var(--ix);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
    animation:fnOut var(--p) linear infinite;animation-delay:calc(var(--k) * var(--p) / 3);}
.fn__out i{font-style:normal;margin-right:8px;opacity:.6;}
.fn__name{font-size:var(--t-name);font-weight:500;letter-spacing:-.024em;margin:0;line-height:1.15;}
.fn__name span{color:var(--ink-2);font-weight:400;}
.fn__p{color:var(--ink-2);margin:16px 0 0;font-size:.9375rem;max-width:34ch;}
@media (max-width:900px){
.fn__row{grid-template-columns:1fr;gap:clamp(36px,7vw,52px);padding-left:26px;}
/* stacked: the rail stands on the left and the stations sit on it */
.fn__row::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto;}
.fn__cell{padding-top:0;display:flex;flex-direction:column;}
.fn__cell::before{left:-26px;top:10px;margin:0 0 0 -5px;}
.fn__cell::after{display:none;}
.fn__out{position:static;transform:none;display:block;padding:0;margin-top:16px;background:none;order:3;}
.fn__p{max-width:none;}
}
/* layer 00 is the contour itself: full width, above the spine, and the rail
     descends out of its bottom edge — so the drawing says "through every layer" */
/* the contour card matches the width the seven layer cards span: two cards plus
     the gap between them, so it reads as the top of the same drawing */
.layer00{width:min(100%,calc(936px + clamp(28px,3.4vw,56px)));margin-inline:auto;
    margin-top:clamp(84px,10.5vw,160px);border:1px solid var(--hairline);
    background:var(--ground);overflow:hidden;
    opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.layer00.is-in{opacity:1;transform:none;}
.l0__fig{padding:clamp(18px,2.2vw,30px) clamp(20px,2.4vw,34px) clamp(10px,1.4vw,18px);}
.l0__fig svg{width:100%;height:auto;display:block;overflow:visible;}
.l0__body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);
    align-items:baseline;padding:0 clamp(20px,2.4vw,34px) clamp(20px,2.4vw,30px);}
.l0__body .card__says{max-width:52ch;}
.l0__body .card__parts{margin:0;}
.cy-win{animation:cyWin var(--p) linear infinite, cyFade var(--p) linear infinite;}
.spine{position:relative;margin-top:0;padding-top:clamp(64px,8vw,112px);}
/* the seam: where the rail leaves the contour */
.spine::before{content:"";position:absolute;left:50%;top:-5px;width:11px;height:11px;
    margin-left:-5.5px;background:var(--lime);border-radius:2px;box-shadow:0 0 0 5px var(--ground);}
.spine__rail{position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translateX(-.5px);
    background:repeating-linear-gradient(to bottom,var(--hairline-2) 0 3px,transparent 3px 9px);}
.spine__done{position:absolute;top:0;left:50%;width:1px;transform:translateX(-.5px);height:0;
    background:var(--lime);opacity:.5;}
.spine__mark{position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;margin-top:-4.5px;
    background:var(--lime);border-radius:2px;top:0;box-shadow:0 0 0 5px var(--ground);}
.layer{position:relative;display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(28px,3.4vw,56px);padding-block:clamp(14px,1.6vw,24px);}
.layer + .layer{margin-top:clamp(-170px,-12vw,-100px);}
/* a card is a card: its own ground, closed by a hairline on all four sides.
     Square corners - a rounded edge on these pages means the thing can be pressed. */
.layer__card{grid-column:1;justify-self:end;width:min(100%,468px);
    border:1px solid var(--hairline);background:var(--ground);overflow:hidden;
    opacity:0;transform:translateY(26px);
    transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .5s var(--ease);}
.layer:nth-of-type(even) .layer__card{grid-column:2;justify-self:start;}
.layer.is-in .layer__card{opacity:1;transform:none;}
/* the lit hairline means one thing only: this is the layer being read.
     A card is not pressable, so it does not answer the pointer. */
.layer.is-on .layer__card{border-color:var(--hairline-2);}
.layer:not(.is-in) .card__fig *{animation-play-state:paused!important;}
.card__bar{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--hairline);}
.card__no{font-family:var(--mono);font-size:var(--num);letter-spacing:.1em;color:var(--ink-2);transition:color .5s var(--ease);}
.layer.is-on .card__no{color:var(--lime);}
.card__name{font-size:var(--t-card);font-weight:500;letter-spacing:-.015em;margin:0;}
.card__grp{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);opacity:.7;}
.card__fig{height:196px;display:flex;align-items:center;justify-content:center;}
.card__fig svg{height:144px;width:auto;max-width:calc(100% - 36px);display:block;overflow:visible;}
.card__body{padding:4px 20px 20px;}
.card__says{margin:0;color:var(--ink);font-size:.9375rem;}
.card__parts{margin:10px 0 0;color:var(--ink-2);font-size:.875rem;}
.spine-close{margin-top:var(--beat);}
.spine-close .quote{margin-top:0;}
@media (max-width:900px){
.l0__body{grid-template-columns:1fr;gap:14px;}
.spine::before{left:8px;}
.spine__rail,.spine__done,.spine__mark{left:8px;}
.layer{grid-template-columns:1fr;padding-left:40px;}
.layer + .layer{margin-top:24px;}
.layer__card,.layer:nth-of-type(even) .layer__card{grid-column:1;justify-self:stretch;width:100%;}
}
/* ---- the figure kit (shared with the layer-figure study) ---- */
.ln{fill:none;stroke:var(--ink);stroke-opacity:var(--o-ln);stroke-width:1;vector-effect:non-scaling-stroke;}
.ln-s{fill:none;stroke:var(--ink);stroke-opacity:var(--o-soft);stroke-width:1;vector-effect:non-scaling-stroke;}
.ln-b{fill:none;stroke:var(--ink);stroke-opacity:var(--o-soft);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;}
.ln-a{fill:none;stroke:var(--lime);stroke-width:1;vector-effect:non-scaling-stroke;}
.ln-m{fill:none;stroke:var(--amber);stroke-opacity:.95;stroke-width:1;vector-effect:non-scaling-stroke;}
.tk{fill:none;stroke:var(--ink);stroke-opacity:var(--o-tk);stroke-width:1;vector-effect:non-scaling-stroke;}
.tk-a{fill:none;stroke:var(--lime);stroke-width:1;vector-effect:non-scaling-stroke;}
.nd-o{fill:none;stroke:var(--ink);stroke-opacity:var(--o-ln);stroke-width:1;vector-effect:non-scaling-stroke;}
.nd-seed{fill:var(--lime);}
.tok{fill:none;stroke:var(--ink);stroke-opacity:.5;stroke-width:1;vector-effect:non-scaling-stroke;}
.tok-a{fill:var(--lime);}
.tok-m{fill:none;stroke:var(--amber);stroke-width:1;vector-effect:non-scaling-stroke;}
.tok-dot{fill:var(--lime);}
.glyph{fill:none;stroke:var(--ink);stroke-opacity:.72;stroke-width:1;vector-effect:non-scaling-stroke;}
.travel{offset-rotate:0deg;animation:travel var(--p) var(--travel) infinite;}
.travel-a{offset-rotate:0deg;animation:travelA var(--p) var(--travel) infinite;}
.lit{animation:lit var(--p) linear infinite;}
.dev{fill:none;stroke:var(--ink);stroke-opacity:.26;stroke-width:1;vector-effect:non-scaling-stroke;animation:devlit var(--p) linear infinite;}
.t-main,
.t-in,
.t-out,
.t-alt{transform-box:fill-box;transform-origin:50% 50%;animation:wave var(--p) linear infinite;}
.route{vector-effect:none;stroke-dasharray:101;stroke-dashoffset:101;animation:draw var(--p) linear infinite;}
.edge{vector-effect:none;stroke-dasharray:101;stroke-dashoffset:101;animation:edge var(--p) linear infinite;}
.nd-seed{transform-box:fill-box;transform-origin:50% 50%;animation:seed var(--p) linear infinite;}
.pulse{animation:seed var(--p) linear infinite;}
.try{offset-rotate:0deg;animation:tryRun var(--p) var(--travel) infinite;}
.alt{offset-rotate:0deg;animation:altRun var(--p) linear infinite;}
.fail{animation:fail var(--p) linear infinite;}
.r-pass{animation-delay:0s;}
.r-pass2{animation-delay:calc(var(--p) * -.5);}
.r-drop{animation-delay:calc(var(--p) * -.25);}
.r-up{animation:travelHold var(--p) var(--travel) infinite calc(var(--p) * -.75);}
.who{animation:who var(--p) linear infinite calc(var(--p) * -.75);}
.m1{animation-delay:0s;}
.m2{animation-delay:calc(var(--p) * -.3333);}
.m3{animation-delay:calc(var(--p) * -.6667);}
.raw{animation:rawOut var(--p) linear infinite;}
.norm{animation:normIn var(--p) linear infinite;}
.m2 .raw,.m2 .norm{animation-delay:calc(var(--p) * -.3333);}
.m3 .raw,.m3 .norm{animation-delay:calc(var(--p) * -.6667);}
.sweep{animation:sweep var(--p) linear infinite, sweepFade var(--p) linear infinite;}
.scan{animation:scan var(--p) linear infinite, sweepFade var(--p) linear infinite;}
.out{offset-rotate:0deg;animation:outBack var(--p) var(--travel) infinite;}
/* ================= B4 · CONTROL =================
     An index of four rules. The numeral is drawn, not set: transparent with a
     hairline stroke, the same 1px the figures use, so it belongs to the drawing
     system rather than the type system. Opening a rule is the only interaction
     on the page that reveals new text, so it gets the only + / x in the kit. */
.ctl{--ctl-n:42px;--ctl-gap:clamp(18px,2.4vw,36px);
    list-style:none;margin:var(--beat) 0 0;padding:0;border-top:1px solid var(--hairline);}
.ctl__row{border-bottom:1px solid var(--hairline);}
.ctl__bar{display:grid;grid-template-columns:var(--ctl-n) minmax(0,1fr) 18px;align-items:baseline;
    gap:var(--ctl-gap);width:100%;padding:clamp(16px,2vw,26px) 0;
    background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.ctl__bar:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:4px;}
.ctl__n{font-family:var(--mono);font-size:var(--num);letter-spacing:.1em;
    color:var(--ink-2);transition:color .5s var(--ease);}
.ctl__bar:hover .ctl__n,.is-open .ctl__n{color:var(--lime);}
.ctl__t{font-size:var(--t-state);letter-spacing:-.024em;line-height:1.2;
    color:var(--ink-2);transition:color .5s var(--ease);}
.ctl__bar:hover .ctl__t,.is-open .ctl__t{color:var(--ink);}
.ctl__t b{font-weight:500;color:var(--lime);}
/* the toggle: two hairlines, the vertical one folding away when the rule opens */
.ctl__x{position:relative;width:18px;height:18px;align-self:center;}
.ctl__x::before,.ctl__x::after{content:"";position:absolute;background:var(--ink-2);
    transition:transform .6s var(--ease),background-color .5s var(--ease);}
.ctl__x::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px;}
.ctl__x::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;}
.is-open .ctl__x::after{transform:scaleY(0);}
.is-open .ctl__x::before{background:var(--lime);}
.ctl__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .72s var(--ease);}
.is-open .ctl__more{grid-template-rows:1fr;}
.ctl__more > div{overflow:hidden;min-height:0;}
.ctl__more p{margin:0;padding:0 0 clamp(24px,3vw,36px) calc(var(--ctl-n) + var(--ctl-gap));
    color:var(--ink-2);font-size:1.0625rem;max-width:calc(var(--ctl-n) + var(--ctl-gap) + 54ch);
    opacity:0;transition:opacity .3s ease;}
.is-open .ctl__more p{opacity:1;transition:opacity .5s ease .18s;}
@media (max-width:760px){
.ctl{--ctl-n:34px;--ctl-gap:16px;}
.ctl__more p{padding-left:0;}
}
/* ================= B5 · HOW IT LANDS =================
     Three cells across the full width, each starting higher than the one before,
     so the three rules form an ascending flight. The rule draws itself as the
     stage arrives, and the number and the rule go lime as you scroll past them —
     the staircase is built as you climb it. */
.stair{--rise:clamp(0px,4vw,92px);
    list-style:none;margin:var(--beat) 0 0;padding:0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--gutter);align-items:start;}
.stair__cell{--d:calc(var(--k) * .12s);
    padding-top:calc(var(--k) * var(--rise));}
.stair__rule{display:block;height:1px;background:var(--hairline-2);
    transform:scaleX(0);transform-origin:left center;
    transition:transform .85s var(--ease) calc(var(--d) + .12s),background-color .6s var(--ease);}
.stair__cell.is-in .stair__rule{transform:none;}
.stair__n{display:block;margin-top:clamp(18px,2vw,26px);
    font-family:var(--mono);font-size:var(--num);letter-spacing:.1em;color:var(--ink-2);
    transition:color .6s var(--ease);}
.stair__t{margin:clamp(12px,1.4vw,18px) 0 0;font-size:var(--t-name);
    font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--ink-2);
    transition:color .6s var(--ease) calc(var(--d) + .2s);}
.stair__p{margin:14px 0 0;color:var(--ink-2);font-size:.9375rem;
    opacity:.5;transition:opacity .6s var(--ease) calc(var(--d) + .2s);}
.stair__cell.is-in .stair__t{color:var(--ink);}
.stair__cell.is-in .stair__p{opacity:1;}
/* lit on the way past: the mark and its rule take the lime */
.stair__cell.is-lit .stair__n{color:var(--lime);}
.stair__cell.is-lit .stair__rule{background:var(--lime);}
@media (max-width:900px){
.stair{--rise:0px;grid-template-columns:1fr;gap:clamp(34px,7vw,48px) 0;}
}
@media (prefers-reduced-motion:reduce){
.stair__rule{transform:none;background:var(--lime);}
.stair__n{color:var(--lime);}
.stair__t{color:var(--ink);}
.stair__p{opacity:1;}
}
/* ================= B6 · DEMO ================= */
.demo{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);margin-top:var(--beat);}
.demo__l{grid-column:1 / span 5;}
.demo__r{grid-column:7 / span 6;}
.form{display:grid;grid-template-columns:1fr 1fr;gap:28px var(--gutter);}
.fld{display:flex;flex-direction:column;gap:10px;}
.fld--wide{grid-column:1 / -1;}
.fld label{font-family:var(--mono);font-size:var(--ix);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
.fld label em{font-style:normal;opacity:.6;}
.fld input,.fld select,.fld textarea{    font-family:var(--sans);font-size:1.0625rem;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--hairline);
    border-radius:0;padding:10px 0 12px;outline:0;width:100%;transition:border-color .35s var(--ease);appearance:none;-webkit-appearance:none;}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
    background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:24px;}
.fld select option{background:var(--surface);}
.fld textarea{resize:vertical;min-height:88px;}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--lime);}
.form__act{grid-column:1 / -1;margin-top:8px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.form__done{display:none;color:var(--ink);font-size:1.0625rem;max-width:44ch;border-top:1px solid var(--hairline);padding-top:24px;}
.form.is-sent .form__done{display:block;}
.form.is-sent .fld,.form.is-sent .form__act{display:none;}
/* ================= B6a · the notice tick =================
     A square box on a hairline: the affordance rule says a rounded border means
     pressable, not that everything pressable is rounded, and a square marker
     belongs to the same family as the plates. Lime is the state that is acting.
     A failed check speaks in cyan, because a rule is cyan and there is no red
     anywhere on this site; amber is reserved for "a human decided". */
.cns{grid-column:1 / -1;margin-top:4px;padding-top:22px;border-top:1px solid var(--hairline);display:grid;gap:16px;}
.cns__box{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;align-items:start;cursor:pointer;}
.cns__box input{position:absolute;left:0;top:3px;width:18px;height:18px;margin:0;opacity:0;cursor:pointer;}
.cns__mk{width:18px;height:18px;margin-top:3px;display:block;position:relative;
    border:1px solid var(--hairline-2);transition:border-color .3s var(--ease),background .3s var(--ease);}
.cns__mk::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:5px;
    border-left:1.6px solid var(--ground);border-bottom:1.6px solid var(--ground);
    transform:translate(-50%,calc(-50% - 1.8px)) rotate(-45deg) scale(.5);
    opacity:0;transition:opacity .25s var(--ease),transform .25s var(--ease);}
.cns__box:hover .cns__mk{border-color:var(--ink-2);}
.cns__box input:checked ~ .cns__mk{background:var(--lime);border-color:var(--lime);}
.cns__box input:checked ~ .cns__mk::after{opacity:1;transform:translate(-50%,calc(-50% - 1.8px)) rotate(-45deg) scale(1);}
.cns__box input:focus-visible ~ .cns__mk{outline:2px solid var(--lime);outline-offset:4px;}
.cns__t{font-size:.9375rem;line-height:1.55;color:var(--ink-2);max-width:58ch;}
.cns__t a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline-2);
    transition:color .3s var(--ease),border-color .3s var(--ease);}
.cns__t a:hover{color:var(--lime);border-color:var(--lime);}
.cns__t span[lang]{display:block;margin-top:.55em;}
.form.cns-bad .cns__mk{border-color:var(--cyan);}
.form__err{grid-column:1 / -1;margin:0;font-size:.875rem;line-height:1.55;color:var(--cyan);max-width:58ch;}
.form__err span[lang]{display:block;margin-top:.35em;}
.form__err[hidden]{display:none;}
.fld__hint{grid-column:1 / -1;margin:-14px 0 0;font-size:.75rem;line-height:1.65;color:var(--ink-2);max-width:60ch;}
.fld__hint span[lang]{margin-top:.4em;}
.form.is-sent .cns,.form.is-sent .form__err,.form.is-sent .fld__hint{display:none;}
@media (max-width:900px){
.demo__l,.demo__r{grid-column:1 / -1;}
.demo__r{margin-top:44px;}
.form{grid-template-columns:1fr;}
.fld--wide{grid-column:1;}
}
/* ================= 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;}
.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:11px;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 (max-width:900px){
.head h2,.head .standfirst{grid-column:1 / -1;}
.head .standfirst{margin-top:28px;}
.foot__a,
.foot__b,
.foot__c,
.foot__d{grid-column:1 / -1;}
.foot__b,.foot__c,.foot__d{margin-top:36px;}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
.rv .w{transform:none;transition:none;}
.in{opacity:1;transform:none;transition:none;}
.layer__card{opacity:1;transform:none;transition:none;}
.card__fig *{animation:none!important;transition:none!important;}
}
/* ============ B1 - the name, and the volume that opens around it ============
   One scene, held by the scroll: the name arrives letter by letter, the sphere
   of strings builds out of the core it stands in, and then the two statements
   take its place - the same grammar as the homepage, with the volume in the
   place of the word graph. */
/* the scene is the page's own first pixel: no section padding above it */
.sh{height:540vh;position:relative;z-index:1;padding:0;margin:0;border:0;}
.shstage{position:sticky;top:0;height:100vh;overflow:hidden;}
.shcv{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;}
/* a well of ground under the type, so a string passes behind a line and not through it */
.shveil{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 49%, rgba(24,30,39,.945) 0%, rgba(24,30,39,.9) 40%, rgba(24,30,39,.66) 68%, rgba(24,30,39,.22) 86%, rgba(24,30,39,0) 100%);}
.shmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;
  display:flex;justify-content:center;font-weight:500;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2.1rem,8.6vw,7.4rem);color:var(--ink);}
/* anything that arrives, arrives out of a mask, from below */
/* the mask ends below the descender line, not at the baseline: a lower-case
   name has a g and a p, and both keep their tails */
.shmask{display:inline-block;vertical-align:bottom;overflow:visible;padding-bottom:.26em;
  -webkit-clip-path:inset(-0.4em -0.16em 0 -0.16em);clip-path:inset(-0.4em -0.16em 0 -0.16em);}
.shmask > i{display:inline-block;font-style:normal;transform:translateY(138%);
  transition:transform .78s var(--ease);}
.sh-in .shmask > i{transform:none;}
/* two statements of the same shape, in the same place the name stood */
.shstack{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + var(--sh,0px)));
  padding:0 var(--margin);pointer-events:none;}
.shsay{text-align:center;}
.shsay + .shsay{margin-top:clamp(36px,4.4vw,78px);}
.shsay 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);}
.shsay .shlm{display:block;overflow:visible;padding-bottom:.16em;
  -webkit-clip-path:inset(-0.3em -0.14em .16em -0.14em);clip-path:inset(-0.3em -0.14em .16em -0.14em);}
.shsay .shlm:not(.shlm--words) > span{display:block;white-space:nowrap;transform:translateY(112%);will-change:transform;}
.shsay .shlm--words{display:block;white-space:nowrap;padding-bottom:0;-webkit-clip-path:none;clip-path:none;}
.shsay .shwm{display:inline-block;vertical-align:bottom;padding-bottom:.16em;
  -webkit-clip-path:inset(-0.3em -0.1em .16em -0.1em);clip-path:inset(-0.3em -0.1em .16em -0.1em);}
.shsay .shwm > 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;}
/* the second statement keeps one quiet line of its own */
.shtrio{margin:clamp(20px,2.4vw,34px) auto 0;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.35rem,4.3vw,3.45rem);line-height:1.12;color:var(--lime);letter-spacing:-.012em;}
.shtrio .ln{display:block;overflow:visible;padding-bottom:.14em;
  -webkit-clip-path:inset(-0.3em -0.1em .14em -0.1em);clip-path:inset(-0.3em -0.1em .14em -0.1em);}
.shtrio .ln > span{display:block;transform:translateY(112%);will-change:transform;}
.shsay .shix{display:block;margin:0 0 clamp(14px,1.8vw,24px);font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);opacity:0;}
.shhint{opacity:0;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);}
@media (max-height:820px){
.shsay h2{font-size:clamp(1.25rem,3.5vw,2.85rem);}
.shsay + .shsay{margin-top:clamp(28px,3.4vw,58px);}
.shsay .shix{margin-bottom:clamp(10px,1.3vw,16px);}
.shtrio{font-size:clamp(1.25rem,3.5vw,2.85rem);}
}
@media (max-width:760px){
.sh{height:480vh;}
.shhint{display:none;}
.shsay h2{letter-spacing:-.018em;line-height:1.18;}
.shsay .shlm:not(.shlm--words) > span,.shsay .shlm--words{white-space:normal;}
}
/* 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;}
/* ---------- 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{animation-delay:calc(var(--p) * -1.0000);}
.v2{animation-delay:calc(var(--p) * -0.9917);}
.v3{animation-delay:calc(var(--p) * -0.9833);}
.v4{animation-delay:calc(var(--p) * -0.9750);}
.v5{animation-delay:calc(var(--p) * -0.9667);}
.v6{animation-delay:calc(var(--p) * -0.9583);}
.v7{animation-delay:calc(var(--p) * -0.9500);}
.v8{animation-delay:calc(var(--p) * -0.9417);}
.v9{animation-delay:calc(var(--p) * -0.9333);}
.v10{animation-delay:calc(var(--p) * -0.9250);}
.v11{animation-delay:calc(var(--p) * -0.9167);}
.v12{animation-delay:calc(var(--p) * -0.9083);}
.v13{animation-delay:calc(var(--p) * -0.9000);}
.v14{animation-delay:calc(var(--p) * -0.8917);}
.v15{animation-delay:calc(var(--p) * -0.8833);}
.v16{animation-delay:calc(var(--p) * -0.8750);}
.v17{animation-delay:calc(var(--p) * -0.8667);}
.v18{animation-delay:calc(var(--p) * -0.8583);}
.v19{animation-delay:calc(var(--p) * -0.8500);}
.v20{animation-delay:calc(var(--p) * -0.8417);}
.v21{animation-delay:calc(var(--p) * -0.8333);}
.v22{animation-delay:calc(var(--p) * -0.8250);}
.v23{animation-delay:calc(var(--p) * -0.8167);}
.v24{animation-delay:calc(var(--p) * -0.8083);}
.v25{animation-delay:calc(var(--p) * -0.8000);}
.v26{animation-delay:calc(var(--p) * -0.7917);}
.v27{animation-delay:calc(var(--p) * -0.7833);}
.v28{animation-delay:calc(var(--p) * -0.7750);}
.v29{animation-delay:calc(var(--p) * -0.7667);}
.v30{animation-delay:calc(var(--p) * -0.7583);}
.v31{animation-delay:calc(var(--p) * -0.7500);}
.v32{animation-delay:calc(var(--p) * -0.7417);}
.v33{animation-delay:calc(var(--p) * -0.7333);}
.v34{animation-delay:calc(var(--p) * -0.7250);}
.v35{animation-delay:calc(var(--p) * -0.7167);}
.v36{animation-delay:calc(var(--p) * -0.7083);}
.v37{animation-delay:calc(var(--p) * -0.7000);}
.v38{animation-delay:calc(var(--p) * -0.6917);}
.v39{animation-delay:calc(var(--p) * -0.6833);}
.v40{animation-delay:calc(var(--p) * -0.6750);}
.v41{animation-delay:calc(var(--p) * -0.6667);}
.v42{animation-delay:calc(var(--p) * -0.6583);}
.v43{animation-delay:calc(var(--p) * -0.6500);}
.v44{animation-delay:calc(var(--p) * -0.6417);}
.v45{animation-delay:calc(var(--p) * -0.6333);}
.v46{offset-path:path('M26 44C88 44 96 90 150 90');}
.v47{offset-path:path('M26 136C88 136 96 90 150 90');animation-delay:calc(var(--p) * -0.5000);}
.v48{animation-delay:calc(var(--p) * -0.5000);}
.v49{animation-delay:calc(var(--p) * 0.0000);}
.v50{animation-delay:calc(var(--p) * -0.3700);}
.v51{animation-delay:calc(var(--p) * -0.2700);}
.v52{animation-delay:calc(var(--p) * -0.1700);}
.v53{animation-delay:calc(var(--p) * -0.0700);}
.v54{animation-delay:calc(var(--p) * -0.4000);}
.v55{animation-delay:calc(var(--p) * -0.3783);}
.v56{animation-delay:calc(var(--p) * -0.3550);}
.v57{animation-delay:calc(var(--p) * -0.3333);}
.v58{animation-delay:calc(var(--p) * -0.3117);}
.v59{animation-delay:calc(var(--p) * -0.2883);}
.v60{animation-delay:calc(var(--p) * -0.2667);}
.v61{animation-delay:calc(var(--p) * -0.2450);}
.v62{animation-delay:calc(var(--p) * -0.2217);}
.v63{animation-delay:calc(var(--p) * -0.2000);}
.v64{offset-path:path('M150 90C192 90 192 50 232 50H294');}
.v65{offset-path:path('M150 90H294');}
.v66{offset-path:path('M150 90C192 90 192 130 232 130H294');}
.v67{offset-path:path('M150 90C192 90 192 50 232 50C244 50 246 40 252 34');}
.v68{animation-delay:calc(var(--p) * -0.3750);}
.v69{animation-delay:calc(var(--p) * -0.3500);}
.v70{animation-delay:calc(var(--p) * -0.3250);}
.v71{animation-delay:calc(var(--p) * -0.3000);}
.v72{animation-delay:calc(var(--p) * -0.2750);}
.v73{animation-delay:calc(var(--p) * -0.2500);}
.v74{animation-delay:calc(var(--p) * -0.2250);}
.v75{offset-path:path('M150 90H262C300 90 300 148 262 148H104');}
.v76{--k:0;}
.v77{--k:1;}
.v78{--k:2;}
.v79{animation-delay:calc(var(--p) * -0.0000);}
.v80{offset-path:path('M46 36 H182');animation-delay:calc(var(--p) * -0.0000);}
.v81{offset-path:path('M46 72 H182');animation-delay:calc(var(--p) * -0.2500);}
.v82{offset-path:path('M46 108 H182');animation-delay:calc(var(--p) * -0.5000);}
.v83{offset-path:path('M46 144 H182');animation-delay:calc(var(--p) * -0.7500);}
.v84{animation-delay:calc(var(--p) * -0.9933);}
.v85{animation-delay:calc(var(--p) * -0.9850);}
.v86{animation-delay:calc(var(--p) * -0.9783);}
.v87{animation-delay:calc(var(--p) * -0.9717);}
.v88{animation-delay:calc(var(--p) * -0.9650);}
.v89{animation-delay:calc(var(--p) * -0.9567);}
.v90{animation-delay:calc(var(--p) * -0.9433);}
.v91{animation-delay:calc(var(--p) * -0.9350);}
.v92{animation-delay:calc(var(--p) * -0.9283);}
.v93{animation-delay:calc(var(--p) * -0.9217);}
.v94{animation-delay:calc(var(--p) * -0.9150);}
.v95{animation-delay:calc(var(--p) * -0.9067);}
.v96{animation-delay:calc(var(--p) * -0.8933);}
.v97{animation-delay:calc(var(--p) * -0.8850);}
.v98{animation-delay:calc(var(--p) * -0.8783);}
.v99{animation-delay:calc(var(--p) * -0.8717);}
.v100{animation-delay:calc(var(--p) * -0.8650);}
.v101{animation-delay:calc(var(--p) * -0.8567);}
.v102{animation-delay:calc(var(--p) * -0.8433);}
.v103{animation-delay:calc(var(--p) * -0.8350);}
.v104{animation-delay:calc(var(--p) * -0.8283);}
.v105{animation-delay:calc(var(--p) * -0.8217);}
.v106{animation-delay:calc(var(--p) * -0.8150);}
.v107{animation-delay:calc(var(--p) * -0.8067);}
.v108{animation-delay:calc(var(--p) * -0.7933);}
.v109{animation-delay:calc(var(--p) * -0.7850);}
.v110{animation-delay:calc(var(--p) * -0.7783);}
.v111{animation-delay:calc(var(--p) * -0.7717);}
.v112{animation-delay:calc(var(--p) * -0.7650);}
.v113{animation-delay:calc(var(--p) * -0.7567);}
.v114{animation-delay:calc(var(--p) * -0.7433);}
.v115{animation-delay:calc(var(--p) * -0.7350);}
.v116{animation-delay:calc(var(--p) * -0.7283);}
.v117{animation-delay:calc(var(--p) * -0.7217);}
.v118{animation-delay:calc(var(--p) * -0.7150);}
.v119{animation-delay:calc(var(--p) * -0.7067);}
.v120{animation-delay:calc(var(--p) * -0.5167);}
.v121{animation-delay:calc(var(--p) * -0.5033);}
.v122{animation-delay:calc(var(--p) * -0.4900);}
.v123{animation-delay:calc(var(--p) * -0.4767);}
.v124{animation-delay:calc(var(--p) * -0.4633);}
.v125{animation-delay:calc(var(--p) * -0.4500);}
.v126{animation-delay:calc(var(--p) * -0.4367);}
.v127{animation-delay:calc(var(--p) * -0.4233);}
.v128{animation-delay:calc(var(--p) * -0.4100);}
.v129{animation-delay:calc(var(--p) * -0.3967);}
.v130{animation-delay:calc(var(--p) * -0.3833);}
.v131{offset-path:path('M32 58H294');}
.v132{offset-path:path('M112 58C152 58 152 126 192 126H258C292 126 280 58 294 58');}
.v133{animation-delay:calc(var(--p) * -0.9883);}
.v134{animation-delay:calc(var(--p) * -0.9767);}
.v135{animation-delay:calc(var(--p) * -0.9633);}
.v136{animation-delay:calc(var(--p) * -0.9517);}
.v137{animation-delay:calc(var(--p) * -0.9400);}
.v138{animation-delay:calc(var(--p) * -0.9033);}
.v139{animation-delay:calc(var(--p) * -0.8800);}
.v140{animation-delay:calc(var(--p) * -0.8683);}
.v141{animation-delay:calc(var(--p) * -0.8550);}
.v142{animation-delay:calc(var(--p) * -0.8317);}
.v143{animation-delay:calc(var(--p) * -0.8200);}
.v144{animation-delay:calc(var(--p) * -0.7950);}
.v145{animation-delay:calc(var(--p) * -0.6733);}
.v146{animation-delay:calc(var(--p) * -0.6633);}
.v147{animation-delay:calc(var(--p) * -0.6533);}
.v148{animation-delay:calc(var(--p) * -0.6433);}
.v149{animation-delay:calc(var(--p) * -0.6250);}
.v150{animation-delay:calc(var(--p) * -0.6150);}
.v151{animation-delay:calc(var(--p) * -0.6050);}
.v152{animation-delay:calc(var(--p) * -0.5950);}
.v153{animation-delay:calc(var(--p) * -0.5850);}
.v154{animation-delay:calc(var(--p) * -0.5750);}
.v155{animation-delay:calc(var(--p) * -0.5650);}
.v156{animation-delay:calc(var(--p) * -0.5550);}
.v157{animation-delay:calc(var(--p) * -0.5450);}
.v158{animation-delay:calc(var(--p) * -0.5350);}
.v159{animation-delay:calc(var(--p) * -0.5250);}
.v160{animation-delay:calc(var(--p) * -0.5067);}
.v161{animation-delay:calc(var(--p) * -0.4967);}
.v162{animation-delay:calc(var(--p) * -0.4867);}
.v163{animation-delay:calc(var(--p) * -0.4667);}
.v164{offset-path:path('M26 90H294');}
.v165{offset-path:path('M26 90H146 C196 90 202 138 248 138');}
.v166{offset-path:path('M26 90H146 C196 90 202 40 248 40');}
.v167{animation-delay:calc(var(--p) * -0.6167);}
.v168{animation-delay:calc(var(--p) * -0.6083);}
.v169{animation-delay:calc(var(--p) * -0.6000);}
.v170{animation-delay:calc(var(--p) * -0.5933);}
.v171{animation-delay:calc(var(--p) * -0.5767);}
.v172{animation-delay:calc(var(--p) * -0.5683);}
.v173{animation-delay:calc(var(--p) * -0.5600);}
.v174{animation-delay:calc(var(--p) * -0.5517);}
.v175{animation-delay:calc(var(--p) * -0.5367);}
.v176{animation-delay:calc(var(--p) * -0.5283);}
.v177{animation-delay:calc(var(--p) * -0.5200);}
.v178{animation-delay:calc(var(--p) * -0.5117);}
.v179{animation-delay:calc(var(--p) * -0.4883);}
.v180{animation-delay:calc(var(--p) * -0.4800);}
.v181{animation-delay:calc(var(--p) * -0.4717);}
.v182{animation-delay:calc(var(--p) * -0.4550);}
.v183{animation-delay:calc(var(--p) * -0.4483);}
.v184{animation-delay:calc(var(--p) * -0.4400);}
.v185{animation-delay:calc(var(--p) * -0.4317);}
.v186{animation-delay:calc(var(--p) * -0.4150);}
.v187{animation-delay:calc(var(--p) * -0.4067);}
.v188{animation-delay:calc(var(--p) * -0.3917);}
.v189{animation-delay:calc(var(--p) * -0.9800);}
.v190{animation-delay:calc(var(--p) * -0.9617);}
.v191{animation-delay:calc(var(--p) * -0.9967);}
.v192{animation-delay:calc(var(--p) * -0.9383);}
.v193{animation-delay:calc(var(--p) * -0.9183);}
.v194{animation-delay:calc(var(--p) * -0.9733);}
.v195{animation-delay:calc(var(--p) * -0.9550);}
.v196{animation-delay:calc(var(--p) * -0.8967);}
.v197{animation-delay:calc(var(--p) * -0.8767);}
.v198{offset-path:path('M26 36C96 36 118 90 176 90H294');}
.v199{offset-path:path('M26 90H176H294');}
.v200{offset-path:path('M26 144C96 144 118 90 176 90H294');}
.v201{animation-delay:calc(var(--p) * -0.4267);}
.v202{animation-delay:calc(var(--p) * -0.2150);}
.v203{animation-delay:calc(var(--p) * -0.0017);}
.v204{animation-delay:calc(var(--p) * -0.7883);}
.v205{animation-delay:calc(var(--p) * -0.1833);}
.v206{animation-delay:calc(var(--p) * -0.1733);}
.v207{animation-delay:calc(var(--p) * -0.1633);}
.v208{animation-delay:calc(var(--p) * -0.1533);}
.v209{animation-delay:calc(var(--p) * -0.1450);}
.v210{animation-delay:calc(var(--p) * -0.1350);}
.v211{animation-delay:calc(var(--p) * -0.1250);}
.v212{animation-delay:calc(var(--p) * -0.1150);}
.v213{animation-delay:calc(var(--p) * -0.1050);}
.v214{animation-delay:calc(var(--p) * -0.0950);}
.v215{animation-delay:calc(var(--p) * -0.0867);}
.v216{animation-delay:calc(var(--p) * -0.0767);}
.v217{animation-delay:calc(var(--p) * -0.0667);}
.v218{animation-delay:calc(var(--p) * 0.3383);}
.v219{animation-delay:calc(var(--p) * -0.9600);}
.v220{animation-delay:calc(var(--p) * -0.9267);}
.v221{animation-delay:calc(var(--p) * -0.9100);}
.v222{animation-delay:calc(var(--p) * -0.8600);}
.v223{animation-delay:calc(var(--p) * -0.8267);}
.v224{animation-delay:calc(var(--p) * -0.8100);}
.v225{animation-delay:calc(var(--p) * -0.7767);}
.v226{animation-delay:calc(var(--p) * -0.7600);}
.v227{animation-delay:calc(var(--p) * -0.7267);}
.v228{animation-delay:calc(var(--p) * -0.7100);}
.v229{animation-delay:calc(var(--p) * -0.9867);}
.v230{animation-delay:calc(var(--p) * -0.9700);}
.v231{animation-delay:calc(var(--p) * -0.9533);}
.v232{animation-delay:calc(var(--p) * -0.9367);}
.v233{animation-delay:calc(var(--p) * -0.9200);}
.v234{animation-delay:calc(var(--p) * -0.8867);}
.v235{animation-delay:calc(var(--p) * -0.8700);}
.v236{animation-delay:calc(var(--p) * -0.8533);}
.v237{animation-delay:calc(var(--p) * -0.8367);}
.v238{animation-delay:calc(var(--p) * -0.8033);}
.v239{animation-delay:calc(var(--p) * -0.7867);}
.v240{animation-delay:calc(var(--p) * -0.7700);}
.v241{animation-delay:calc(var(--p) * -0.7533);}
.v242{animation-delay:calc(var(--p) * -0.7367);}
.v243{animation-delay:calc(var(--p) * -0.7200);}
.v244{animation-delay:calc(var(--p) * -0.7033);}
.v245{animation-delay:calc(var(--p) * -0.9467);}
.v246{animation-delay:calc(var(--p) * -0.9300);}
.v247{animation-delay:calc(var(--p) * -0.9133);}
.v248{animation-delay:calc(var(--p) * -0.8633);}
.v249{animation-delay:calc(var(--p) * -0.8467);}
.v250{animation-delay:calc(var(--p) * -0.8300);}
.v251{animation-delay:calc(var(--p) * -0.8133);}
.v252{animation-delay:calc(var(--p) * -0.7967);}
.v253{animation-delay:calc(var(--p) * -0.7800);}
.v254{animation-delay:calc(var(--p) * -0.7633);}
.v255{animation-delay:calc(var(--p) * -0.7467);}
.v256{animation-delay:calc(var(--p) * -0.7300);}
.v257{animation-delay:calc(var(--p) * -0.7133);}
.v258{animation-delay:calc(var(--p) * -0.6967);}
.v259{animation-delay:calc(var(--p) * -0.6367);}
.v260{animation-delay:calc(var(--p) * -0.6233);}
.v261{animation-delay:calc(var(--p) * -0.6100);}
.v262{animation-delay:calc(var(--p) * -0.5967);}
.v263{animation-delay:calc(var(--p) * -0.5717);}
.v264{animation-delay:calc(var(--p) * -0.5583);}
.v265{animation-delay:calc(var(--p) * -0.5317);}
.v266{animation-delay:calc(var(--p) * -0.5183);}
.v267{animation-delay:calc(var(--p) * -0.5050);}
.v268{animation-delay:calc(var(--p) * -0.4917);}
.v269{animation-delay:calc(var(--p) * -0.4783);}
.v270{animation-delay:calc(var(--p) * -0.4650);}
.v271{animation-delay:calc(var(--p) * -0.4533);}
.v272{animation-delay:calc(var(--p) * -0.4133);}
.v273{animation-delay:calc(var(--p) * -0.9683);}
.v274{animation-delay:calc(var(--p) * -0.8900);}
.v275{animation-delay:calc(var(--p) * -0.7317);}
.v276{offset-path:path('M160 40 H60');animation-delay:calc(var(--p) * -0.0000);}
.v277{animation-delay:calc(var(--p) * -0.1183);}
.v278{animation-delay:calc(var(--p) * -0.0933);}
.v279{animation-delay:calc(var(--p) * -0.0400);}
.v280{animation-delay:calc(var(--p) * -0.0150);}
.v281{offset-path:path('M160 40 H260');animation-delay:calc(var(--p) * -0.1250);}
.v282{animation-delay:calc(var(--p) * -0.2433);}
.v283{animation-delay:calc(var(--p) * -0.2183);}
.v284{animation-delay:calc(var(--p) * -0.1917);}
.v285{animation-delay:calc(var(--p) * -0.1650);}
.v286{animation-delay:calc(var(--p) * -0.1400);}
.v287{animation-delay:calc(var(--p) * -0.1133);}
.v288{animation-delay:calc(var(--p) * -0.0600);}
.v289{animation-delay:calc(var(--p) * -0.0350);}
.v290{animation-delay:calc(var(--p) * -0.0083);}
.v291{animation-delay:calc(var(--p) * -0.9817);}
.v292{offset-path:path('M160 73 H60');animation-delay:calc(var(--p) * -0.2500);}
.v293{animation-delay:calc(var(--p) * -0.3683);}
.v294{animation-delay:calc(var(--p) * -0.3433);}
.v295{animation-delay:calc(var(--p) * -0.3167);}
.v296{animation-delay:calc(var(--p) * -0.2900);}
.v297{animation-delay:calc(var(--p) * -0.2650);}
.v298{animation-delay:calc(var(--p) * -0.2383);}
.v299{animation-delay:calc(var(--p) * -0.2117);}
.v300{animation-delay:calc(var(--p) * -0.1850);}
.v301{animation-delay:calc(var(--p) * -0.1600);}
.v302{animation-delay:calc(var(--p) * -0.1333);}
.v303{animation-delay:calc(var(--p) * -0.1067);}
.v304{animation-delay:calc(var(--p) * -0.0817);}
.v305{offset-path:path('M160 73 H260');animation-delay:calc(var(--p) * -0.3750);}
.v306{animation-delay:calc(var(--p) * -0.4933);}
.v307{animation-delay:calc(var(--p) * -0.4683);}
.v308{animation-delay:calc(var(--p) * -0.4417);}
.v309{animation-delay:calc(var(--p) * -0.3900);}
.v310{animation-delay:calc(var(--p) * -0.3633);}
.v311{animation-delay:calc(var(--p) * -0.3367);}
.v312{animation-delay:calc(var(--p) * -0.3100);}
.v313{animation-delay:calc(var(--p) * -0.2850);}
.v314{animation-delay:calc(var(--p) * -0.2583);}
.v315{animation-delay:calc(var(--p) * -0.2317);}
.v316{animation-delay:calc(var(--p) * -0.2067);}
.v317{offset-path:path('M160 107 H60');animation-delay:calc(var(--p) * -0.5000);}
.v318{animation-delay:calc(var(--p) * -0.6183);}
.v319{animation-delay:calc(var(--p) * -0.5667);}
.v320{animation-delay:calc(var(--p) * -0.5400);}
.v321{animation-delay:calc(var(--p) * -0.5150);}
.v322{animation-delay:calc(var(--p) * -0.4617);}
.v323{animation-delay:calc(var(--p) * -0.4350);}
.v324{animation-delay:calc(var(--p) * -0.3567);}
.v325{animation-delay:calc(var(--p) * -0.3317);}
.v326{offset-path:path('M160 107 H260');animation-delay:calc(var(--p) * -0.6250);}
.v327{animation-delay:calc(var(--p) * -0.7183);}
.v328{animation-delay:calc(var(--p) * -0.6650);}
.v329{animation-delay:calc(var(--p) * -0.6400);}
.v330{animation-delay:calc(var(--p) * -0.6133);}
.v331{animation-delay:calc(var(--p) * -0.5867);}
.v332{animation-delay:calc(var(--p) * -0.5083);}
.v333{animation-delay:calc(var(--p) * -0.4817);}
.v334{animation-delay:calc(var(--p) * -0.4567);}
.v335{offset-path:path('M160 140 H60');animation-delay:calc(var(--p) * -0.7500);}
.v336{animation-delay:calc(var(--p) * -0.7900);}
.v337{animation-delay:calc(var(--p) * -0.7383);}
.v338{animation-delay:calc(var(--p) * -0.7117);}
.v339{animation-delay:calc(var(--p) * -0.6850);}
.v340{animation-delay:calc(var(--p) * -0.6600);}
.v341{animation-delay:calc(var(--p) * -0.6067);}
.v342{animation-delay:calc(var(--p) * -0.5817);}
.v343{offset-path:path('M160 140 H260');animation-delay:calc(var(--p) * -0.8750);}
.v344{transition-delay:.08s;}
.v345{transition-delay:.16s;}
.v346{transition-delay:.24s;}
.v347{transition-delay:.1s;}
.v348{display:block;}
.v349{color:var(--ink);font-size:1rem;}
.v350{margin-top:12px;}
/* the field no person sees: a script fills in everything it finds, and that
   is how we know it was a script */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
@keyframes fnNode{0%{background:var(--hairline-2);}3%{background:var(--lime);}
    34%{background:var(--lime);}44%,100%{background:var(--hairline-2);}}
@keyframes fnRun{0%{transform:scaleX(0);opacity:1;}30%{transform:scaleX(1);opacity:1;}
    88%{transform:scaleX(1);opacity:1;}96%,100%{transform:scaleX(1);opacity:0;}}
@keyframes fnOut{0%,26%{color:var(--ink-2);}31%{color:var(--lime);}
    62%{color:var(--lime);}72%,100%{color:var(--ink-2);}}
@keyframes cyWin{0%{transform:translateX(0);}100%{transform:translateX(1010px);}}
@keyframes cyFade{0%{opacity:0;}4%{opacity:1;}93%{opacity:1;}100%{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 devlit{0%,38%{stroke:var(--ink);stroke-opacity:.26;}44%{stroke:var(--lime);stroke-opacity:1;}60%{stroke:var(--lime);stroke-opacity:1;}70%,100%{stroke:var(--ink);stroke-opacity:.26;}}
@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 seed{0%{fill-opacity:.4;transform:scale(.6);}5%{fill-opacity:1;transform:scale(1.5);}14%{transform:scale(1);}88%{fill-opacity:1;}96%,100%{fill-opacity:.4;transform:scale(.6);}}
@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);}}
@keyframes outBack{0%{offset-distance:0%;opacity:0;}8%{opacity:1;}42%{offset-distance:100%;opacity:1;}54%{offset-distance:100%;opacity:1;}88%{offset-distance:0%;opacity:1;}96%,100%{offset-distance:0%;opacity:0;}}