/* Autolith: black ink, off-white paper, green accents and one-bit figures. */

@font-face{font-family:"TNR";src:url("../fonts/times-new-roman-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"TNR";src:url("../fonts/times-new-roman-bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"TNR";src:url("../fonts/times-new-roman-italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"TNR";src:url("../fonts/times-new-roman-bold-italic.woff2") format("woff2");font-style:italic;font-weight:700;font-display:swap}
@font-face{font-family:"CMUT";src:url("../fonts/cmu-typewriter-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"CMUT";src:url("../fonts/cmu-typewriter-bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"CMUT";src:url("../fonts/cmu-typewriter-italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}

/* --------------------------------------------------------------- tokens */

:root{
  --ink:#000000;
  --paper:#fffefa;
  --fg:#000000;
  --bg:#fffefa;

  /* Common Lisp green. #3fb68b is the brand value; #15795f is the form
     Hiisi uses on a light ground, which is the whole of this page. */
  --green:#3fb68b;
  --green-ink:#15795f;

  --serif:"TNR",Times,"Nimbus Roman No9 L","Liberation Serif",serif;
  --mono:"CMUT","CMU Typewriter Text","Courier New",Courier,monospace;

  --gut:clamp(20px,5vw,64px);
  --wide:1320px;
  --read:66ch;

  --band-y:clamp(6rem,14vh,11rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.02,.25,1);

  --dither:radial-gradient(var(--ink) 1px,transparent 1px);
}

.inverted{--fg:#fffefa;--bg:#000000;--dither:radial-gradient(#fffefa 1px,transparent 1px)}

*,*::before,*::after{box-sizing:border-box}

html{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.52;
  color:var(--ink);
  background:var(--paper);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
@media (min-width:1500px){html{font-size:18px}}

body{margin:0;background:var(--paper);overflow-x:clip}
::selection{background:var(--ink);color:var(--paper)}
.inverted ::selection{background:var(--paper);color:var(--ink)}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}

img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,figcaption,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
code{font-family:var(--mono);font-size:.92em;letter-spacing:0}

/* ----------------------------------------------------------- primitives */

.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut)}
.band{position:relative;isolation:isolate;padding-block:var(--band-y);background:var(--bg);color:var(--fg)}
.band--flush{padding-block:0}

.display{font-family:var(--serif);font-weight:700;letter-spacing:-.026em;line-height:1.0;text-wrap:balance}
.display em{font-style:italic;font-weight:700}
.d1{font-size:clamp(2.6rem,5.9vw,5.4rem);line-height:.95}
.d2{font-size:clamp(1.95rem,4vw,3.4rem);line-height:1.0}
.d3{font-size:clamp(1.32rem,2.1vw,1.8rem);line-height:1.1;letter-spacing:-.018em}

.lede{font-size:clamp(1.1rem,1.35vw,1.3rem);line-height:1.45;max-width:56ch}
.prose{max-width:var(--read)}
.prose+.prose{margin-top:.9em}
.prose em,.italic{font-style:italic}
/* the apparatus voice: captions, notes, asides. italic, never grey */
.note{font-style:italic;font-size:.95rem;line-height:1.45}
.tryit__foot{margin-top:1.1rem}
.tag{font-family:var(--mono);font-size:.76rem;line-height:1.4}

.lede-block{display:grid;gap:clamp(.9rem,2vw,1.4rem);max-width:62ch;margin-bottom:clamp(2.6rem,6vh,4.2rem)}
.stack-2{display:grid;gap:1rem}
.stack-3{display:grid;gap:clamp(1rem,2vw,1.5rem);align-content:start}

.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,4.5rem)}
.two--wide{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
.two--viz{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:center}
.two--install{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start}
@media (max-width:900px){
  .two,.two--wide,.two--viz,.two--install{grid-template-columns:1fr}
  .two--viz .figure{order:2}
}

/* ------------------------------------------------------------ the window
   The signature object: a 1px frame, a black titlebar naming the thing, and
   a dithered band offset behind it as the only depth cue in the system. */

.win{position:relative;background:var(--bg);border:1px solid var(--fg)}
.win__bar{
  background:var(--fg);color:var(--bg);
  font-family:var(--mono);font-size:.78rem;font-weight:700;line-height:1.2;
  min-height:28px;display:flex;align-items:center;padding:.4em .8em;
}
.win__body{padding:clamp(.9rem,2vw,1.3rem)}

.shadowband::after{
  content:"";position:absolute;inset:15px -15px -15px 15px;z-index:-1;pointer-events:none;
  background-image:var(--dither);background-size:3px 3px;
  opacity:0;transform:translate(-9px,-9px);
  transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s;
}
.shadowband.in::after,.in .shadowband::after{opacity:1;transform:none}
@media (max-width:620px){.shadowband::after{inset:10px -10px -10px 10px}}

/* figures are numbered in prose, the way the house numbers plates */
.figure{display:grid;gap:.9rem}
.figure figcaption{font-style:italic;font-size:.9rem;line-height:1.4;max-width:52ch}
.figure figcaption b{font-weight:700;font-style:italic}

/* the sanctioned use of colour: a 9px square beside a word */
.mark{display:inline-block;width:9px;height:9px;margin-right:.65em;translate:0 -1px;background:var(--green-ink)}

/* -------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.88rem;font-weight:700;
  min-height:46px;padding:.65em 1.5em;
  border:1px solid var(--fg);color:var(--fg);background:var(--bg);
  text-decoration:none;white-space:nowrap;
  transition:background-color .22s var(--ease),color .22s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--fg);color:var(--bg)}
.btn:active{translate:0 1px}
.btn--primary{background:var(--fg);color:var(--bg)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--bg);color:var(--fg)}

/* the link signature: italic and underlined, in running text only */
.ulink{font-style:italic;text-decoration:underline;text-underline-offset:2px}
.ulink--b{font-weight:700}

/* -------------------------------------------------------------- reveals */

.js [data-rv]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*80ms)}
.js [data-rv].in{opacity:1;transform:none}
.js [data-rv="fade"]{transform:none}
.lineclip{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.js .lineclip>span{display:block;transform:translateY(108%);transition:transform 1s var(--ease-io);transition-delay:calc(var(--d,0)*85ms)}
.in .lineclip>span,.lineclip.in>span{transform:none}

/* ------------------------------------------------------------------ nav
   A letterhead, not app chrome. It shares the substrate and carries no rule
   beneath it. */

.nav{position:fixed;inset:0 0 auto 0;z-index:60;color:var(--ink);transition:background-color .3s var(--ease)}
.nav.is-stuck{background:var(--paper)}
.nav.is-ink{color:var(--paper)}
.nav.is-stuck.is-ink{background:var(--ink)}
.nav__in{display:flex;align-items:center;gap:1.5rem;height:var(--navh,76px);transition:height .3s var(--ease)}
.nav.is-stuck .nav__in{--navh:62px}
.brand{text-decoration:none;flex:none;
  font-family:var(--serif);font-weight:700;font-size:1.22rem;letter-spacing:-.022em;line-height:1}
.nav__links{display:flex;gap:.1rem;margin-left:auto;align-items:center}
.nav__links a{
  font-family:var(--mono);font-size:.79rem;text-decoration:none;padding:.9em .65em;
  text-decoration-thickness:1px;text-underline-offset:4px;
}
.nav__links a:hover{text-decoration:underline}
.nav__links a.is-active{font-weight:700;text-decoration:underline}
.nav__cta{
  margin-left:.9rem;border:1px solid currentColor;padding:.55em 1.1em!important;font-weight:700;
  transition:background-color .22s var(--ease),color .22s var(--ease);
}
.nav__cta:hover{text-decoration:none!important;background:currentColor}
.nav:not(.is-ink) .nav__cta:hover span{color:var(--paper)}
.nav.is-ink .nav__cta:hover span{color:var(--ink)}
.nav__burger{display:none;margin-left:auto;width:46px;height:46px;position:relative}
.nav__burger i{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.nav__burger i:nth-child(1){top:18px}
.nav__burger i:nth-child(2){bottom:18px}
body.menu-open .nav__burger i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
body.menu-open .nav__burger i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:55;background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:6rem var(--gut) 3rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-io);pointer-events:none;
}
body.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu a{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,8vw,3rem);line-height:1.22;text-decoration:none;display:block;opacity:0;transform:translateY(16px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
body.menu-open .menu a{opacity:1;transform:none;transition-delay:calc(var(--d)*55ms + 150ms)}
.menu__foot{margin-top:2.5rem;display:flex;gap:1.4rem;flex-wrap:wrap}
.menu__foot a{font-family:var(--mono);font-size:.86rem;font-weight:400}
@media (max-width:1040px){.nav__links{display:none}.nav__burger{display:block}}
@media (min-width:1041px){.menu{display:none}}

/* ----------------------------------------------------------------- hero
   Off-white, at full strength, with the slab of source standing in it. */

.hero{position:relative;min-height:100svh;display:flex;align-items:center;background:var(--paper);overflow:hidden}
#monolith{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1s ease}
#monolith.ready{opacity:1}
.hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(7rem,14vh,9rem) clamp(3rem,8vh,5rem)}
.hero__copy{max-width:min(100%,790px)}
.hero h1{max-width:none}
.hero__name{font-family:var(--serif);font-weight:700;
  font-size:clamp(3.3rem,8.2vw,6.8rem);line-height:.9;letter-spacing:-.038em}
.hero__claim{margin-top:clamp(.75rem,1.8vh,1.3rem);font-size:clamp(1.42rem,2.9vw,2.45rem);
  line-height:1.06;max-width:23ch}
.hero__lede{margin-top:clamp(1.3rem,3vh,2rem);max-width:44ch;font-size:clamp(1.08rem,1.3vw,1.28rem);line-height:1.45}
.hero__install{margin-top:clamp(1.6rem,3.4vh,2.4rem);display:grid;gap:0;max-width:min(100%,620px)}
.hero__install .tabs{border-bottom:0}
.hero__install .install{border-top-width:1px}
.hero__acts{margin-top:clamp(1.3rem,2.6vh,1.9rem);display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.hero__plat{font-style:italic;font-size:.95rem;line-height:1.4;max-width:34ch}
/* narrow screens give the block its own room under the type */
@media (max-width:899px){
  .hero{min-height:auto}
  .hero__in{padding-block:clamp(6rem,13vh,8rem) 336px}
}

/* ------------------------------------------------------------ code text
   Monochrome Algol highlighting. Weight and slope carry the syntax. */

.code{border:1px solid var(--fg);background:var(--bg);padding:clamp(.9rem,2vw,1.3rem)}
.code pre,.shellblock{margin:0;font-family:var(--mono);font-size:clamp(.78rem,1vw,.88rem);line-height:1.6;letter-spacing:0;white-space:pre;overflow-x:auto}
.code .kw{font-weight:700}
.code .cm{font-style:italic}
.code__cap{font-family:var(--mono);font-size:.76rem;margin-bottom:.7rem}

.shellblock{border:1px solid var(--fg);padding:clamp(.9rem,2vw,1.3rem);background:var(--bg);line-height:1.85}
.shellblock .p,.shellblock .c,.code .p,.code .c{user-select:none;color:var(--green-ink)}
.shellblock b{font-weight:700}

/* ------------------------------------------------------------- one image */

.imagebox__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.imagebox__grid i{
  padding:.95rem .6rem;font-family:var(--mono);font-style:normal;font-size:.72rem;
  text-align:center;line-height:1.4;min-height:4rem;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--fg);border-bottom:1px solid var(--fg);
  transition:background-color .3s,color .3s;
}
.imagebox__grid i:nth-child(3n){border-right:0}
.imagebox__grid i:nth-last-child(-n+3){border-bottom:0}
.imagebox__grid i.lit{background:var(--fg);color:var(--bg)}
@media (max-width:520px){
  .imagebox__grid{grid-template-columns:repeat(2,1fr)}
  .imagebox__grid i:nth-child(3n){border-right:1px solid var(--fg)}
  .imagebox__grid i:nth-child(2n){border-right:0}
  .imagebox__grid i:nth-last-child(-n+3){border-bottom:1px solid var(--fg)}
  .imagebox__grid i:nth-last-child(-n+1){border-bottom:0}
}

.clusters{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,4.5rem);margin-top:clamp(3.5rem,8vh,5.5rem)}
@media (max-width:820px){.clusters{grid-template-columns:1fr;gap:2.6rem}}
.cluster__t{font-family:var(--mono);font-size:.8rem;font-weight:700;margin-bottom:1.5rem}
.cluster dl{display:grid;gap:1.5rem}
.cluster dt{font-family:var(--serif);font-weight:700;font-size:clamp(1.18rem,1.7vw,1.45rem);letter-spacing:-.014em;line-height:1.14}
.cluster dd{margin-top:.3rem;max-width:40ch;font-size:.99rem;line-height:1.48}

/* ------------------------------------------------------- property sheet
   No row rules. Alignment and spacing carry the pairing. */

.sheet{display:grid;grid-template-columns:minmax(6rem,max-content) minmax(0,1fr);gap:.55rem 1.5rem}
.sheet>div{display:contents}
.sheet dt{font-family:var(--mono);font-size:.76rem;padding-top:.22em}
.sheet dd{font-size:.99rem;line-height:1.45}
.sheet dd b{font-weight:700}
@media (max-width:600px){
  .sheet{grid-template-columns:1fr;gap:.1rem}
  .sheet dd{margin-bottom:.85rem}
}

/* --------------------------------------------------------- repl / sugar */

.scrub{position:relative}
.scrub__sticky{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.sugar{display:grid;gap:clamp(1.8rem,5vh,3.2rem);width:100%}
.sugar__stage{position:relative;font-family:var(--mono);font-size:clamp(.8rem,2.6vw,2.2rem);line-height:1.8}
.sugar__glyphs{position:relative;display:block;height:1.8em}
.sugar__glyphs b{position:absolute;top:0;left:0;font-weight:400;white-space:pre;will-change:transform,opacity;transition:opacity .26s linear}
.sugar__glyphs b.kw{font-weight:700}
.sugar__glyphs b.st{font-style:italic}
.sugar__caption{position:relative;min-height:4.4em;max-width:54ch}
.sugar__caption span{position:absolute;top:0;left:0;right:0;font-style:italic;font-size:1.05rem;line-height:1.45;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.sugar__caption span.on{opacity:1;transform:none}
@media (max-height:640px){.scrub__sticky{align-items:flex-start;padding-top:6rem}}
.repl__after{padding-bottom:var(--band-y)}

/* ------------------------------------------------------------- try it */

.tryit{display:grid;gap:clamp(.9rem,1.8vw,1.3rem);padding-bottom:clamp(3rem,7vh,5rem)}
.tryit__intro{max-width:56ch}
.tryit__box{max-width:min(100%,920px)}
.tryit__in{display:flex;align-items:center;gap:.6rem;padding:.9rem clamp(.85rem,1.6vw,1.15rem);border-bottom:1px solid var(--fg)}
.tryit__caret{font-family:var(--mono);font-weight:700;flex:none;color:var(--green-ink)}
.tryit__in input{flex:1;min-width:0;font-family:var(--mono);font-size:clamp(.85rem,1.15vw,1rem);color:var(--fg);background:none;border:0;padding:0;line-height:1.6}
.tryit__in input::placeholder{color:var(--fg);font-style:italic;opacity:1}
.tryit__in input:focus{outline:none}
.tryit__in:focus-within{box-shadow:inset 0 0 0 2px var(--fg)}
.tryit__out{display:block;font-family:var(--mono);font-size:clamp(.82rem,1.1vw,1rem);line-height:1.7;padding:clamp(.9rem,1.7vw,1.2rem);white-space:pre-wrap;word-break:break-word;min-height:3.4em}
.tryit__out .kw{font-weight:700}
.tryit__out .st{font-style:italic}
.tryit__out .dimmed{font-style:italic}
.tryit__out .fresh{background:var(--fg);color:var(--bg)}
.tryit__note{font-style:italic;font-size:.95rem}

/* --------------------------------------------------- mutation sequence */

.figpair{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
.figpair+.figpair{margin-top:clamp(3.5rem,8vh,6rem)}
.figpair--flip .figure{order:2}
@media (max-width:900px){
  .figpair{grid-template-columns:1fr;gap:1.8rem}
  .figpair--flip .figure{order:0}
}

}

/* --------------------------------------------------------- rlm fan-out */

.rlm__viz{position:relative;width:100%;aspect-ratio:1/.84;min-height:290px}
.rlm__viz svg{width:100%;height:100%;overflow:visible}
.rlm__viz .edge{fill:none;stroke:var(--fg);stroke-width:1;stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);transition:stroke-dashoffset .8s var(--ease-io)}
.rlm__viz .edge.on{stroke-dashoffset:0}
.rlm__viz .edge.dash.on{stroke-dasharray:4 4!important;stroke-dashoffset:0}
.rlm__viz .caps{opacity:0;transition:opacity .7s var(--ease)}
.rlm__viz .caps.on{opacity:1}
.rlm__viz .caps text{font-family:var(--mono);fill:var(--fg)}
.rlm__viz .node{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.35);transition:opacity .5s var(--ease),transform .55s var(--ease)}
.rlm__viz .node.on{opacity:1;transform:none}
.rlm__viz .node text{font-family:var(--mono);fill:var(--fg)}
.rlm__viz .node .big{font-weight:700}
.rlm__viz .corpus rect{fill:none;stroke:var(--fg);stroke-width:1}
.rlm__viz .root circle{fill:var(--fg);stroke:var(--fg)}
.rlm__viz .root text{fill:var(--bg);font-weight:700}
.rlm__viz .frame circle{fill:var(--bg);stroke:var(--fg);stroke-width:1.2;transition:fill .4s var(--ease)}
.rlm__viz .frame.ret circle{fill:var(--fg)}
.rlm__viz .leaf circle{fill:var(--bg);stroke:var(--fg);stroke-width:1;transition:fill .38s var(--ease)}
.rlm__viz .leaf.lit circle{fill:var(--fg)}
@media (max-width:900px){.rlm__viz .caps{display:none}.rlm__viz{aspect-ratio:1/.72;min-height:240px}}

/* -------------------------------------------------------------- figures */

.fig{position:relative;width:100%}
.fig svg{width:100%;height:auto;overflow:visible;color:var(--fg)}
.fig .edge{fill:none;stroke:var(--fg);stroke-width:1;stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset .7s var(--ease-io)}
.fig .edge.on{stroke-dashoffset:0}
.fig .edge.dash.on{stroke-dasharray:4 4!important;stroke-dashoffset:0}
.fig .node{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.fig .node.on{opacity:1;transform:none}
.fig .node rect{fill:var(--bg);stroke:var(--fg);stroke-width:1}
.fig .node text{font-family:var(--mono);fill:var(--fg)}
.fig .solid rect{fill:var(--fg)}
.fig .solid text{fill:var(--bg);font-weight:700}
.fig .edgelabel text{font-style:italic}
.fig .bare text{font-style:italic}

/* ---------------------------------------------------------------- demos
   A flush compound row of tabs. The active one inverts, atomically. */

.tabs{display:flex;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;border:1px solid var(--fg)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  font-family:var(--mono);font-size:.79rem;font-weight:700;padding:.7em 1.15em;white-space:nowrap;
  border-right:1px solid var(--fg);min-height:44px;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.tabs button:last-child{border-right:0}
.tabs button:hover{background:var(--fg);color:var(--bg)}
.tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.tabs button i{font-style:italic;font-weight:400;margin-left:.55em;font-size:.9em}
@media (max-width:720px){.tabs button i{display:none}}

.demo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.6rem,3.2vw,2.8rem);padding-top:clamp(1.6rem,3.5vh,2.6rem)}
@media (max-width:900px){.demo{grid-template-columns:1fr}}
.demo[hidden]{display:none}
/* the recording is the one place a second surface is legal: the screen is
   the artifact, so it keeps its own true black */
.player{position:relative;background:#000;border:1px solid var(--fg);aspect-ratio:16/10;overflow:hidden}
.player__poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;background:#000;z-index:2;transition:opacity .4s}
.player__poster pre{font-family:var(--mono);font-size:clamp(.42rem,1vw,.62rem);color:#fffefa;line-height:1.25;margin:0}
.player__poster.gone{opacity:0;pointer-events:none}
.player__load{border:1px solid #fffefa;color:#fffefa;background:#000;padding:.7em 1.3em;font-family:var(--mono);font-weight:700;font-size:.8rem;min-height:46px;transition:background-color .2s,color .2s}
.player__load:hover{background:#fffefa;color:#000}
.demo__meta{align-self:start}

/* ---------------------------------------------------------------- bento
   The gaps are the rules. One pixel of ink shows between the cells, so the
   grid draws itself and no cell needs to know where it sits. */

.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--fg);border:1px solid var(--fg)}
.cell{background:var(--bg);padding:clamp(1.3rem,2.5vw,2rem);display:flex;flex-direction:column;gap:.6rem;transition:background-color .3s var(--ease),color .3s var(--ease)}
.cell h3{font-family:var(--serif);font-weight:700;font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.12;letter-spacing:-.014em}
.cell p{font-size:.96rem;line-height:1.48}
.cell--3{grid-column:span 3}
.cell--4{grid-column:span 4}
.cell--6{grid-column:span 6}
/* atomic inversion: the primary store reads as the selected object */
.cell h3,.cell p{color:inherit}
.cell--solid{background:var(--ink);color:var(--paper)}
.cell:hover{background:var(--ink);color:var(--paper)}
.cell--solid:hover{background:var(--paper);color:var(--ink)}
@media (max-width:940px){.cell--3,.cell--4{grid-column:span 6}.cell--6{grid-column:span 12}}
@media (max-width:600px){.cell--3,.cell--4,.cell--6{grid-column:span 12}}
.bento__foot{margin-top:clamp(1.8rem,3.5vh,2.6rem);max-width:70ch;font-style:italic}

/* ------------------------------------------------------ definition list
   Term on the left in mono, the substance on the right. No row rules. */

.deflist{display:grid;gap:clamp(1.5rem,3vh,2.2rem)}
.deflist>div{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:.5rem clamp(1.5rem,4vw,3.5rem);align-items:baseline}
.deflist dt{font-family:var(--serif);font-weight:700;font-size:clamp(1.12rem,1.6vw,1.35rem);letter-spacing:-.014em;line-height:1.16}
.deflist dd{max-width:60ch;line-height:1.5;font-size:.99rem}
.deflist--two{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4.5vw,4.5rem)}
.deflist--two>div{grid-template-columns:1fr;gap:.3rem}
.deflist--two dt{font-family:var(--mono);font-size:.92rem;font-weight:700;letter-spacing:0}
@media (max-width:900px){
  .deflist>div{grid-template-columns:1fr;gap:.35rem}
  .deflist--two{grid-template-columns:1fr}
}

.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chips li{font-family:var(--mono);font-size:.76rem;border:1px solid var(--fg);padding:.42em .8em}

.warn--foot{margin-top:clamp(2rem,4.5vh,3.2rem);max-width:66ch}

/* -------------------------------------------------------------- install */

.panel[hidden]{display:none}
.panel{padding-top:clamp(1.3rem,2.6vh,2rem)}
.panel__note{margin-top:.95rem;font-style:italic;font-size:.97rem}
.install__auth{margin-top:clamp(1.8rem,3.5vh,2.6rem)}

.install{display:flex;border:1px solid var(--fg);font-family:var(--mono);max-width:100%}
.install[hidden],.demo[hidden],.panel[hidden]{display:none}
.install code{flex:1;min-width:0;padding:.85em 1em;font-size:clamp(.72rem,1vw,.84rem);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.install code::-webkit-scrollbar{display:none}
.install__copy{flex:none;padding:0 1.1em;border-left:1px solid var(--fg);font-size:.78rem;font-weight:700;transition:background-color .2s,color .2s}
.install__copy:hover{background:var(--fg);color:var(--bg)}

.warn{max-width:52ch;font-size:.97rem;line-height:1.5}

/* ---------------------------------------------------------------- swell
   The page does not change colour, it dithers into it. One bit, in motion. */

/* ------------------------------------------------------------- plates
   Figures between sections. A plate is an object, not a rule: it sits in the
   room two bands already leave and adds nothing to it. It carries no caption
   because it is not evidence of anything. */
.plate{position:relative;z-index:1;
  width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut);
  margin-block:calc(var(--band-y) * -.46);
  display:flex;justify-content:center}
.plate__c{display:block;width:clamp(196px,27vw,340px);aspect-ratio:8/5;
  image-rendering:pixelated;background:var(--paper)}
@media (max-width:720px){
  .plate{margin-block:calc(var(--band-y) * -.3)}
}

/* --------------------------------------------------------- marginalia
   Small figures out in the gutter, tracking the edge of the text column.
   They appear only where there is room for them to be beside the page
   rather than in it. */
.marg{--mw:clamp(70px,5.6vw,112px);
  display:none;position:absolute;top:var(--mt,28%);
  width:var(--mw);aspect-ratio:1;
  image-rendering:pixelated;pointer-events:none}
.marg--tall{aspect-ratio:1/2.9}
/* centred in the gutter: halfway between the text column and the page edge */
@media (min-width:1440px){
  .marg{display:block}
  .marg--l{right:calc(75% + 298px - var(--mw) / 2)}
  .marg--r{left:calc(75% + 298px - var(--mw) / 2)}
}

.swell{position:relative;height:clamp(210px,30vh,400px);background:var(--paper);overflow:hidden;line-height:0}
.swell canvas{width:100%;height:100%;display:block;image-rendering:pixelated}

/* ---------------------------------------------------------------- close
   One inversion, at the floor of the page. */

.foot{position:relative;isolation:isolate;margin-top:-1px;--dither:radial-gradient(#fffefa 1px,transparent 1px);background:var(--ink);color:var(--paper);padding-block:clamp(4.5rem,11vh,8rem) 2.5rem}
.close{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding-bottom:clamp(4rem,10vh,6.5rem)}
@media (max-width:820px){.close{grid-template-columns:1fr;gap:2rem}}
.win--paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.win--paper .win__bar{background:var(--ink);color:var(--paper)}
.mascot{max-width:300px;width:100%}
.mascot img{width:100%;height:auto;display:block}
.close__copy{display:grid;gap:clamp(1.5rem,3vh,2.4rem)}
.close__copy h2{max-width:22ch}
.foot .btn{border-color:var(--paper);color:var(--paper);background:var(--ink)}
.foot .btn:hover,.foot .btn:focus-visible{background:var(--paper);color:var(--ink)}
.foot .btn--primary{background:var(--paper);color:var(--ink)}
.foot .btn--primary:hover,.foot .btn--primary:focus-visible{background:var(--ink);color:var(--paper)}

.foot__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.8rem,4vw,3rem);padding-bottom:clamp(2.6rem,6vh,3.8rem)}
@media (max-width:700px){.foot__grid{grid-template-columns:1fr 1fr}}
.foot h3{font-family:var(--mono);font-size:.78rem;font-weight:700;margin-bottom:1.1rem}
.foot li{margin-bottom:.5rem}
.foot li a{font-size:.99rem;font-style:italic;text-decoration:underline;text-underline-offset:2px}
.foot__bottom{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.76rem}
.lslock{display:block;flex:none}
.lslock svg{display:block;width:clamp(116px,13vw,158px);height:auto;fill:var(--paper)}
.lslock svg .ls-l{fill:var(--green)}

/* ------------------------------------------------------------ utilities */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:12px;z-index:99;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:.5em .9em;transform:translateY(-250%);font-family:var(--mono);font-size:.78rem}
.skip:focus{transform:none}

/* static capture mode */
.still [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
.still .lineclip>span{transform:none!important;transition:none!important}
.still .ladder li,.still .recovery,.still .shadowband::after{opacity:1!important;transform:none!important}
.still #monolith{opacity:1!important;transition:none!important}
.still .rlm__viz .edge,.still .rlm__viz .node,.still .rlm__viz .caps,
.still .fig .edge,.still .fig .node{transition:none!important}
.still .sugar__caption span,.still .sugar__glyphs b{transition:none!important}
.still .tryit__out .fresh{background:none;color:inherit}
html.still{scroll-behavior:auto}

.nav.is-ink .brand svg{fill:var(--green)}
.foot .mark{background:var(--green)}

/* Progressive enhancement and motion preferences. */
.player__mount{position:absolute;inset:0}
body.menu-open{overflow:hidden}
html:not(.js) [data-tabpanel][hidden]{display:block!important}
html:not(.js) .tabs,html:not(.js) .nav__burger,html:not(.js) .install__copy,html:not(.js) .player__load{display:none}
html:not(.js) .nav{position:static}
html:not(.js) .nav__in{height:auto;min-height:76px;flex-wrap:wrap;padding-block:1rem}
html:not(.js) .nav__links{display:flex;flex-wrap:wrap}
html:not(.js) .hero{padding-top:2rem}
html:not(.js) .sugar__glyphs{display:none}
:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.still *, .still *::before, .still *::after{animation:none!important;transition:none!important}
.two>*{min-width:0}
.code pre{max-width:100%}
.stack-2,.stack-3,.lede-block{grid-template-columns:minmax(0,1fr)}
.hero__install{grid-template-columns:minmax(0,1fr)}
html:not(.js) .hero{min-height:0;padding-block:2rem;align-items:start}
html:not(.js) .plate,html:not(.js) .swell,html:not(.js) #monolith{display:none}