/* The fonts are served from here (SIL OFL, licences in fonts/). Geist Mono is one variable file for
   every weight, with its arrows in a second, tiny one; Martian Mono only ever appears at 800,
   semi-expanded, so only that instance is shipped. */
@font-face{font-family:"Geist Mono";font-weight:100 900;font-display:swap;src:url(fonts/geist-mono.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-weight:100 900;font-display:swap;src:url(fonts/geist-mono-arrows.woff2) format("woff2");
  unicode-range:U+00D7,U+2026,U+2190-2193,U+2197,U+2713}
@font-face{font-family:"Martian Mono";font-weight:800;font-stretch:112.5%;font-display:swap;src:url(fonts/martian-mono-800-semi-expanded.woff2) format("woff2")}
/* --spring is replaced at load with a linear() curve sampled from a damped spring */
:root{--fg:#ECEAF5;--dim:#8A879A;--vio:#9D8CFF;--spring:cubic-bezier(.2,.8,.2,1);--spring-soft:ease-out}
html,body{margin:0;height:100%;background:#000;color:var(--fg);overflow:hidden}
body{font:14px/1.5 "Geist Mono",ui-monospace,monospace}
/* sized to the visible viewport, as field.js draws it: on a phone 100vh also counts the address bar,
   which stretched the field under the page */
#field{position:fixed;inset:0;width:100%;height:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--vio);outline-offset:4px}

.top,.under,main{opacity:0;transition:opacity .6s var(--spring-soft),filter .5s var(--spring)}
a,.under h2{transition:color .35s var(--spring),text-shadow .5s var(--spring)}
/* a file held over the page: the interface brightens with the field */
body.drop .top,body.drop .under{filter:saturate(1.15) brightness(1.08)}
body.drop .under h2{color:#fff;text-shadow:0 0 18px rgba(157,140,255,.35)}
body.ui .top,body.ui .under,body.ui main{opacity:1}
body.ui .under{transition-delay:.15s}
/* moving between pages: the old content fades out fast, the new one starts hidden and fades in */
body.leaving main,body.leaving .under{opacity:0;transition:opacity .24s ease;transition-delay:0s}
body.entering main,body.entering .under{opacity:0!important;transition:none!important}

.top{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:20px;padding:22px 32px;z-index:2}
.brand{display:flex;align-items:center;gap:10px;font-weight:500}
.brand .tld{color:var(--dim)}
.mk{display:block;width:15px;height:15px}
.top nav{display:flex;gap:26px;margin-left:auto;color:var(--dim)}
[data-box]{padding:14px 26px;display:inline-block}
.top nav a:hover,.top nav a[aria-current]{color:var(--fg)}

.under{position:fixed;left:50%;transform:translateX(-50%);width:min(680px,92vw);text-align:center}
.under h2{font-size:22px;font-weight:500;margin:0;letter-spacing:-.015em;min-height:1.45em}
.under .or{margin:10px 0 0;color:var(--dim);font-size:15px}
.under .or a{color:var(--vio);border-bottom:1px dashed currentColor;padding-bottom:1px}
.under .or a:hover{color:var(--fg)}
.under .tag{margin:30px auto 0;color:#6f6b82;font-size:13px;max-width:52ch}
/* what's left of today's free decompiles, and the wall once they're gone */
.under .quota{margin:14px auto 0;color:#4f4b66;font-size:12px;min-height:1.5em}
.under .walled{display:none}
body.wall .under .or:not(.walled){display:none}
body.wall .under .walled{display:block;animation:rise .45s var(--spring-soft)}
body.wall .under .quota{color:var(--vio)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
body.busy .under,body.busy .top{opacity:0;pointer-events:none;transition-delay:0s;transition-duration:.45s}
/* what is happening to the dropped file, shown just above the box */
.status{position:fixed;left:50%;transform:translate(-50%,-100%);font-size:16px;white-space:nowrap;
        opacity:0;transition:opacity .4s var(--spring-soft)}
.status.on{opacity:1}
.status .pct{color:var(--vio);margin-left:14px}
/* the logo box is clickable too: it opens the file picker */
.stage{position:fixed;cursor:pointer}
body.viewing .stage,body.busy .stage{pointer-events:none}
body.viewing .under,body.viewing .top{opacity:0;pointer-events:none;transition-delay:0s;transition-duration:.45s}
.under p{text-wrap:balance}
@media (hover:none){.under .or.mouse{display:none}}
/* Phones: the links fold behind "menu" and open as one row under the top bar, in a single box,
   while the page behind them dims. */
.menu{display:none;font:inherit;color:var(--dim);background:none;border:0;cursor:pointer;transition:color .35s var(--spring)}
.menu:hover,body.menu-open .menu{color:var(--fg)}
@media (max-width:640px){
  .top{padding:16px 18px}
  .menu{display:inline-block;margin-left:auto;padding:12px 22px}
  .top nav{position:fixed;top:72px;left:18px;right:18px;justify-content:space-between;gap:0;margin:0;padding:8px 12px;font-size:13px;
           opacity:0;visibility:hidden;transition:opacity .3s var(--spring-soft),visibility 0s .3s}
  .top nav a[data-box]{padding:10px 8px}
  body.menu-open .top nav{opacity:1;visibility:visible;transition-delay:.08s,0s}
  body.menu-open main,body.menu-open .under,body.menu-open .stage{opacity:.12;transition:opacity .3s var(--spring-soft);pointer-events:none}
}

/* the viewer: the label's box, opened to fill the screen around the decompiled output */
/* (minmax(0,…) everywhere: a long line of code scrolls inside its pane instead of widening the viewer) */
.viewer{position:fixed;display:none;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);opacity:0;transition:opacity .32s var(--spring-soft)}
.viewer.show{opacity:1}
.vbar{display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap;padding:24px 34px 6px;font-size:13px}
.vbar .fname{font-weight:500}
.vbar .vsize{color:var(--dim)}
.vact{margin-left:auto;display:flex;gap:36px;color:var(--dim)}
.vact a:hover{color:var(--fg)}
.panes{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:0 40px;padding:10px 34px 26px;min-height:0}
.pane{display:flex;flex-direction:column;min-height:0}
.pane h3{font-size:12px;font-weight:400;color:#57536c;margin:0 0 10px}
.pane pre{margin:0;overflow:auto;font:12.5px/1.7 "Geist Mono",ui-monospace,monospace;flex:1;min-height:0;
          scrollbar-width:thin;scrollbar-color:#2a2740 transparent}
.vbc{color:#625c80}
/* the source in the site's violets: keywords violet, values pale violet, strings orchid, the names
   of called and declared functions brightest, types muted, comments dim */
.vsrc{color:#cfcbe0}
.vsrc .ln{display:inline-block;width:var(--ln,4ch);color:#3a3750;user-select:none;text-indent:0}
.vsrc .kw{color:#a99bff}
.vsrc .num,.vsrc .con{color:#c4b9ff}
.vsrc .str{color:#e3b5f2}
.vsrc .fn{color:#f6f4ff}
.vsrc .ty{color:#8a82b6}
.vsrc .com{color:#5c5873}
.vsrc .mark{background:rgba(157,140,255,.09)}
.vsrc .mark .ln{color:var(--vio)}
.vsrc .note{color:var(--vio)}
.vsrc .wrap{display:block;white-space:pre-wrap}
.vsrc .rows{display:block}
.vsrc .rows.far{content-visibility:auto;contain-intrinsic-height:auto calc(var(--n) * 1.7em)}
/* what the decompile came back as, beside the file name */
.verdict{display:flex;gap:12px;align-items:baseline}
.verdict span:last-child{color:var(--dim)}
.verdict.v-decompiled-unverified b{color:#F3F1FF;font-weight:500}
.verdict.v-marked b{color:var(--vio);font-weight:500}
.verdict.v-refused b{color:#ff9db0;font-weight:500}
.pane{min-width:0}
@media (max-width:760px){.panes{grid-template-columns:minmax(0,1fr)}.pane.bc{display:none}}
/* Phones: the bar is the file, then the verdict, then the actions on a row of their own; the code
   keeps its lines whole and scrolls sideways, except marker comments, which wrap. */
@media (max-width:640px){
  .vbar{padding:18px 20px 4px;gap:6px 18px}
  .vbar .verdict{flex-basis:100%;flex-wrap:wrap;gap:4px 12px}
  .vact{margin-left:0;flex-basis:100%;gap:26px;padding-top:8px}
  .panes{padding:8px 20px 18px}
  .pane pre{font-size:12px}
}

/* ---- reading pages ----
   The page scrolls inside <main>, over the fixed field; its top edge fades out under the top bar. */
main{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;z-index:1;
     -webkit-mask-image:linear-gradient(to bottom,transparent 60px,#000 118px);mask-image:linear-gradient(to bottom,transparent 60px,#000 118px);
     scrollbar-width:thin;scrollbar-color:#2a2740 transparent}
@media (prefers-reduced-motion:no-preference){main{scroll-behavior:smooth}}
/* the room below the text lets even the last section scroll up to where the contents list reads it */
.doc{display:grid;grid-template-columns:180px minmax(0,700px);gap:72px;justify-content:center;padding:132px 40px 70vh}
.toc{position:sticky;top:180px;align-self:start;display:flex;flex-direction:column;gap:10px;font-size:13px;color:#5f5b75}
.toc a::before{content:'#';display:inline-block;width:2ch;color:transparent;transition:color .3s var(--spring)}
.toc a:hover{color:var(--fg)}
.toc a.on{color:var(--fg)}
.toc a.on::before{color:var(--vio)}
/* reading pages are quieter than home: the title is set in the label's face, as plain text */
.page-title{font:800 46px/1.1 "Martian Mono",ui-monospace,monospace;font-stretch:semi-expanded;letter-spacing:-.03em;margin:0 0 26px}
.lede{font-size:16px;line-height:1.75;color:#d8d5e4;margin:0;max-width:58ch}
article h2{font-size:19px;font-weight:500;letter-spacing:-.01em;margin:84px 0 18px;scroll-margin-top:120px}
article h2::before{content:'# ';color:var(--vio)}
article p{font-size:14px;line-height:1.85;color:#aaa6bc;margin:0 0 16px;max-width:64ch}
article code{color:#c4b9ff;font-size:.95em}
/* links inside prose read as links: violet, with a dotted rule under them */
article p a:not([class]),article td a:not([class]){color:var(--vio);border-bottom:1px dotted #4a4470;transition:color .35s var(--spring),border-color .35s var(--spring)}
article p a:not([class]):hover,article td a:not([class]):hover{color:var(--fg);border-color:var(--fg)}
article a code{color:inherit}
.endpoint{font-size:16px;color:var(--fg);margin:0 0 18px;overflow-wrap:anywhere}
.endpoint .m{color:var(--vio);margin-right:1ch}
/* code sits in a box the field draws; the padding keeps the box's lines clear of it */
.code{display:block;position:relative;padding:24px 28px;margin:20px 0 26px}
.code pre{margin:0;font:13px/1.75 "Geist Mono",ui-monospace,monospace;color:#d9d6e6;white-space:pre;overflow-x:auto;scrollbar-width:none}
.code .copy{position:absolute;top:10px;right:14px;font-size:12px;color:var(--dim)}
.code .copy:hover{color:var(--fg)}
.code .k{color:#a99bff}.code .s{color:#f1edff}.code .c{color:#5c5873}.code .n{color:#c4b9ff}
.code pre{tab-size:4}
/* tabs: the chosen one is underlined in violet; the panes stack, only the chosen one in flow */
.code .tabbar{display:flex;flex-wrap:wrap;gap:6px 20px;margin:-8px 64px 16px 0;font-size:12px}
.code .tabbar button{all:unset;cursor:pointer;color:var(--dim);padding-bottom:3px;border-bottom:1px dotted transparent;
  transition:color .3s var(--spring),border-color .3s var(--spring)}
.code .tabbar button:hover{color:var(--fg)}
.code .tabbar button[aria-selected=true]{color:var(--fg);border-color:var(--vio)}
.code .tabbar button:focus-visible{outline:1px dotted var(--vio);outline-offset:3px}
.code [role=tablist]{display:flex;flex-wrap:wrap;gap:6px 20px}
/* A shell command's box also picks the system (right of the tabs, in violet, so it doesn't read as
   another tab). It fades while a tab without a command shows. Only the system's spelling is shown. */
.code .os{display:flex;gap:16px;margin-left:auto;transition:opacity .3s var(--spring-soft),visibility 0s}
.code:not(.shell) .os{opacity:0;visibility:hidden;transition:opacity .2s var(--spring-soft),visibility 0s .2s}
.code .os button{color:#57536c}
.code .os button:hover{color:var(--fg)}
.code .os button[aria-pressed=true]{color:var(--vio)}
html[data-os=windows] .code .nix,html:not([data-os=windows]) .code .win{display:none}
.code .nix,.code .win{animation:osin .35s var(--spring-soft)}
@keyframes osin{from{opacity:0}}
.code .tabpanes{position:relative;transition:height .5s var(--spring-crit)}
.code .tabpanes pre{transition:opacity .32s var(--spring-soft),visibility 0s}
.code .tabpanes pre:not(.on){position:absolute;inset:0 0 auto 0;opacity:0;visibility:hidden;transition:opacity .2s var(--spring-soft),visibility 0s .2s}
article .cap{font-size:12.5px;color:#6f6b82;margin:26px 0 -8px}
table.ref{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:13.5px}
table.ref th{font-weight:400;color:#57536c;text-align:left;padding:0 18px 10px 0;font-size:12px}
table.ref td{padding:14px 18px 14px 0;border-top:1px dotted #2c2944;vertical-align:top;color:#aaa6bc;line-height:1.7}
table.ref td:first-child{color:var(--fg);white-space:nowrap}
table.ref td.d{color:#6f6b82;white-space:nowrap}
.v-ok{color:#F3F1FF}.v-mark{color:var(--vio)}.v-ref{color:#7d7894}
table.ref td.yes{color:#F3F1FF}
/* The footer sits in the room below the text, low enough that the last section can still scroll up
   to where the contents list reads it. */
.doc{padding-bottom:0}
.foot{grid-column:1/-1;margin-top:max(140px,calc(70vh - 230px));padding:36px 0 60px;border-top:1px dotted #2c2944;
      display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px;font-size:13px;color:#6f6b82}
.foot .brand{color:var(--fg)}
.foot p{margin:16px 0 0;max-width:36ch;line-height:1.7}
.foot h3{font-size:12px;font-weight:400;color:#4f4b66;margin:2px 0 14px}
.foot nav{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.foot a:hover{color:var(--fg)}
.foot .fine{grid-column:1/-1;margin:20px 0 0;font-size:12px;color:#3f3b52}
@media (max-width:900px){.doc{grid-template-columns:minmax(0,1fr);gap:0;padding:112px 22px 0}.toc{display:none}
  .foot{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;margin-top:140px}.foot>div:first-child{grid-column:1/-1}}
/* Phones: a reference table's rows stack, the name and its type on one line and what it does under
   them, rather than squeezing the prose into a column a few words wide. */
@media (max-width:640px){
  table.ref.stack thead{display:none}
  table.ref.stack tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:14px 0;border-top:1px dotted #2c2944}
  table.ref.stack td{display:block;border:0;padding:0}
  table.ref.stack td:last-child{flex-basis:100%}
  .code{padding:20px 18px}
  .code pre{font-size:12px}
  .code .os{flex-basis:100%;margin-left:0}
  .lede{font-size:15px}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}.foot>nav:last-of-type{grid-column:1/-1}
}

/* ---- the changelog ----
   Each release is a title, its version and a short dashed list. Above them, the activity: days as
   squares on the logo's ramp (dark violet to near white), an empty day a dot like the field's. */
.nb{white-space:nowrap}
.log ul{margin:0;padding:0;list-style:none}
.log li{position:relative;padding-left:2.4ch;font-size:14px;line-height:1.85;color:#aaa6bc;margin:0 0 10px;max-width:64ch}
.log li::before{content:'-';position:absolute;left:0;color:var(--vio)}
.log li b{color:var(--fg);font-weight:500}
.log li a{color:var(--vio);border-bottom:1px dotted #4a4470;transition:color .35s var(--spring),border-color .35s var(--spring)}
.log li a:hover{color:var(--fg);border-color:var(--fg)}
.log .ver{margin:-8px 0 20px;font-size:12.5px}
.log .ver a{color:#6f6b82;border:0;transition:color .3s var(--spring)}
.log .ver a:hover{color:var(--fg)}
.act{display:block;margin:22px 0 10px;padding:24px 28px 20px;font-size:11px;color:#57536c}
.act-grid{display:grid;grid-template-columns:3.6ch repeat(var(--weeks,53),minmax(0,1fr));gap:3px;align-items:center}
.act-grid .mo{grid-row:1;white-space:nowrap;line-height:1;padding-bottom:5px}
.act-grid .wd{grid-column:1;line-height:1}
.act i{display:block;aspect-ratio:1;background:linear-gradient(#2c2944,#2c2944) center/2px 2px no-repeat;
       transition:outline-color .25s var(--spring)}
.act i.l1{background:#5348a2}.act i.l2{background:#8c7dea}.act i.l3{background:#c1b6ff}.act i.l4{background:#f3f1ff}
.act-grid i:hover{outline:1px solid #6f6b82;outline-offset:1px}
.act-grid i.rel{outline:1px solid var(--vio);outline-offset:1px;cursor:pointer}
.act-grid i.rel:hover{outline-color:var(--fg)}
.act-grid.in i{animation:cell .7s var(--spring-crit) calc(.15s + var(--w)*10ms) both}
@keyframes cell{from{opacity:0;transform:scale(.3)}}
@media (prefers-reduced-motion:reduce){.act-grid.in i{animation:none}}
.act figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:16px;font-size:12px}
.act-say{color:var(--dim);font-variant-numeric:tabular-nums}
.act-key{display:flex;align-items:center;gap:3px}
.act-key i{width:9px;margin:0 1px}.act-key i:first-of-type{margin-left:7px}.act-key i:last-of-type{margin-right:7px}
@media (max-width:640px){.act{padding:20px 16px 16px}}

/* ---- one column, no contents list ---- */
.doc.solo{grid-template-columns:minmax(0,700px)}
/* buttons are text in a box the field draws, like the links in the top bar */
.btn{display:inline-block;padding:16px 34px;font:500 15px "Geist Mono",ui-monospace,monospace;color:var(--fg);
     background:none;border:0;cursor:pointer;transition:color .3s var(--spring)}
.actions{display:flex;align-items:center;gap:28px;margin:36px 0 34px}
.note{font-size:13px;line-height:1.7;color:#7d7894;max-width:60ch;margin:0 0 16px}
/* ---- without WebGL 2 ----
   No field: the label is set as text in the label's face, and boxes are dotted outlines. */
body.nogl [data-box],body.nogl .viewer{outline:1px dotted #3a3656;outline-offset:-1px;transition:outline-color .35s var(--spring)}
body.nogl [data-box]:hover,body.nogl [data-box][aria-current],body.nogl [data-box][data-primary]{outline-color:#6d5fc4}
body.nogl #nav[hidden],body.nogl:not(.menu-open) #nav{outline:0}
body.nogl.menu-open #nav{outline:1px dotted #3a3656}
body.nogl h1.sr{position:fixed;left:50%;top:33vh;top:33svh;transform:translate(-50%,-50%);width:auto;height:auto;overflow:visible;clip-path:none;
  margin:0;padding:.32em .62em;white-space:nowrap;font:800 min(8.4vw,110px)/1 "Martian Mono",ui-monospace,monospace;font-stretch:semi-expanded;
  letter-spacing:-.02em;outline:1px dotted #3a3656;transition:opacity .45s var(--spring-soft),outline-color .35s var(--spring)}
body.nogl.drop h1.sr{outline-color:var(--vio)}
body.nogl.busy h1.sr,body.nogl.viewing h1.sr{opacity:0}
body.nogl .stage{left:50%;top:33vh;top:33svh;transform:translate(-50%,-50%);width:min(84vw,1000px);height:min(15vw,190px)}
body.nogl .under{top:calc(33vh + min(8.4vw,110px)*.82 + 44px);top:calc(33svh + min(8.4vw,110px)*.82 + 44px)}
body.nogl .status{top:33vh;top:33svh;transform:translate(-50%,-50%)}
/* the home label, set as type where the field cleared room for its letters (field.js places,
   uncovers and fades it); clicks go through to the box under it. It is filled on the logo's ramp,
   violet into near white, and glows violet: a drop-shadow, since a text-shadow would paint over a
   gradient fill. */
h1.sr.shown{position:fixed;margin:0;width:auto;height:auto;overflow:visible;white-space:nowrap;text-align:center;
  font-family:"Martian Mono",ui-monospace,monospace;font-weight:800;font-stretch:semi-expanded;
  color:transparent;background:linear-gradient(100deg,#8c7dea,#c1b6ff 40%,#f3f1ff 78%);-webkit-background-clip:text;background-clip:text;
  --glow:drop-shadow(0 0 .08em rgba(193,182,255,.45)) drop-shadow(0 0 .35em rgba(157,140,255,.35));
  filter:var(--glow);pointer-events:none;opacity:0;transition:filter .3s var(--spring-soft)}
h1.sr.shown .tld{color:var(--dim)}
body.menu-open h1.sr.shown{filter:opacity(.12) var(--glow)}
/* the link-preview frame: the label and what it does, nothing to click */
body.og .top,body.og .under .or,body.og .under .quota{display:none}
body.og .under .tag{margin-top:16px;font-size:14px}
body.og h1.sr{position:fixed;transform:translate(-50%,-50%);width:auto;height:auto;overflow:visible;clip-path:none;margin:0;
  white-space:nowrap;font-family:"Martian Mono",ui-monospace,monospace;font-weight:800;font-stretch:semi-expanded;line-height:1;color:#F3F1FF}
/* the 404 page: the title alone in the middle of the screen */
.doc.lost{min-height:100vh;min-height:100svh;box-sizing:border-box;align-content:center;padding-top:0}
.doc.lost .page-title{font-size:min(28vw,180px);margin-bottom:18px}
.doc.lost .actions{gap:48px}