/* Command Identifier: a Swiss grid in Ceplin's deck palette. Dark first,
   two accents (Ceplin's green, the deck's orange for problems), the deck's
   icons. Space Grotesk and IBM Plex Mono (OFL-1.1, fonts/), served from here. */

@font-face{font-family:"Space Grotesk";font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk.woff2?v=abdd3626f0) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2?v=abdd3626f0) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2?v=abdd3626f0) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600.woff2?v=abdd3626f0) format("woff2")}

:root{
  --bg:#171717; --panel:#1d1d1d; --panel2:#232323; --code:#111111;
  --ink:#ffffff; --dim:#b8b8b8; --faint:#8a8a8a; --rule:#2b2b2b; --rule2:#3a3a3a;
  --green:#89f06c; --green-ink:#89f06c; --orange:#eb6c3a; --on-accent:#171717;
  --act-bg:#89f06c; --act-ink:#171717; --act-icon:#171717;
  --i-flag:url(icons/flag.png?v=abdd3626f0); --i-eye:url(icons/eye.png?v=abdd3626f0); --i-person:url(icons/person.png?v=abdd3626f0); --i-x:url(icons/x.png?v=abdd3626f0);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f4f2; --panel:#ffffff; --panel2:#f7f7f5; --code:#f4f4f2;
  --ink:#171717; --dim:#4a4a4a; --faint:#6e6e6e; --rule:#e4e4e1; --rule2:#cfcfcb;
  --green-ink:#2f7a1f; --act-bg:#171717; --act-ink:#ffffff; --act-icon:#89f06c; --orange:#c9531f;
  --i-flag:url(icons/flag-dark.png?v=abdd3626f0); --i-eye:url(icons/eye-dark.png?v=abdd3626f0); --i-person:url(icons/person-dark.png?v=abdd3626f0); --i-x:url(icons/x-dark.png?v=abdd3626f0);
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f4f4f2; --panel:#ffffff; --panel2:#f7f7f5; --code:#f4f4f2;
    --ink:#171717; --dim:#4a4a4a; --faint:#6e6e6e; --rule:#e4e4e1; --rule2:#cfcfcb;
    --green-ink:#2f7a1f; --act-bg:#171717; --act-ink:#ffffff; --act-icon:#89f06c; --orange:#c9531f;
    --i-flag:url(icons/flag-dark.png?v=abdd3626f0); --i-eye:url(icons/eye-dark.png?v=abdd3626f0); --i-person:url(icons/person-dark.png?v=abdd3626f0); --i-x:url(icons/x-dark.png?v=abdd3626f0);
    color-scheme:light;
  }
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.55 "Space Grotesk",ui-sans-serif,system-ui,sans-serif;
     -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
code,pre,textarea,kbd,.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--green)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.g{max-width:1240px;margin:0 auto;padding:0 32px}
button{font:inherit;color:inherit}

/* the deck's icons */
.ic{display:inline-block;width:20px;height:20px;flex:none;background:center/contain no-repeat;vertical-align:middle}
.ic-flag{background-image:var(--i-flag)} .ic-eye{background-image:var(--i-eye)} .ic-person{background-image:var(--i-person)}
.ic-x{background-image:var(--i-x)} .ic-warning{background-image:url(icons/warning.png?v=abdd3626f0)} .ic-exclaim{background-image:url(icons/exclaim.png?v=abdd3626f0)}
.ic-plus{background-image:url(icons/plus.png?v=abdd3626f0)}

/* ---- top --------------------------------------------------------------- */
.top{display:flex;align-items:center;gap:14px;height:58px;border-bottom:3px solid var(--ink)}
.brand{display:flex;white-space:nowrap;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.01em;text-decoration:none}
.brand .mark{height:24px;width:24px;color:var(--ink)}
.brand .mark .tile{fill:currentColor}
.top nav{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:13.5px}
.top nav a{color:var(--dim);text-decoration:none;white-space:nowrap}
.top nav a:hover{color:var(--ink)}
.top nav .ext{color:var(--ink)}
.theme{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--rule2);background:none;color:var(--dim);cursor:pointer}
.theme:hover{color:var(--ink)}

/* ---- hero -------------------------------------------------------------- */
.hero{padding:56px 0 28px}
h1{margin:0;font-size:44px;line-height:1.02;letter-spacing:-.035em;font-weight:700}
/* the promise, under the question and quieter than it */
.strap{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13.5px;color:var(--dim)}
.strap .ic{width:16px;height:16px;opacity:.85}

/* ---- the input --------------------------------------------------------- */
.inp{border:1px solid var(--rule2);background:var(--panel)}
.toolbar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rule)}
.seg{display:flex;border:1px solid var(--rule2);overflow-x:auto;scrollbar-width:none}
.seg button,.seg select{padding:4px 11px;font-size:12.5px;color:var(--dim);background:none;border:0;border-right:1px solid var(--rule2);cursor:pointer;white-space:nowrap}
.seg .net{display:flex}
.seg select{appearance:none;border-right:0;padding-right:22px;background:linear-gradient(45deg,transparent 50%,var(--faint) 50%) right 10px top 50%/5px 5px no-repeat,linear-gradient(-45deg,transparent 50%,var(--faint) 50%) right 6px top 50%/5px 5px no-repeat}
.seg select option{background:var(--panel);color:var(--ink)}
.seg button:hover,.seg select:hover{color:var(--ink)}
.seg [aria-checked="true"],.seg [aria-checked="true"]:hover,.seg select.on,.seg select.on:hover{background-color:var(--act-bg);color:var(--act-ink);font-weight:600}
.keys{margin-left:auto;font-size:12px;color:var(--faint);white-space:nowrap}
kbd{font-size:11px;border:1px solid var(--rule2);padding:1px 5px;color:var(--dim)}
.editor{display:grid;grid-template-columns:36px 1fr auto}
.ln{padding:14px 0;text-align:center;font:12.5px/1.65 "IBM Plex Mono",monospace;color:var(--faint);border-right:1px solid var(--rule);background:var(--panel2);white-space:pre}
.area{position:relative;min-width:0}
.hl,textarea{margin:0;padding:14px 16px;font:14px/1.65 "IBM Plex Mono",monospace;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;border:0;letter-spacing:0}
.hl{position:absolute;inset:0;pointer-events:none;color:var(--ink);overflow:hidden}
textarea{position:relative;display:block;width:100%;min-height:128px;resize:vertical;background:transparent;color:transparent;caret-color:var(--ink)}
textarea::placeholder{color:var(--faint)}
textarea:focus{outline:none}
/* the box shows where the keyboard is: the textarea draws no outline */
.area:focus-within{box-shadow:inset 0 0 0 2px var(--green-ink)}
textarea::selection{background:rgba(137,240,108,.25);color:transparent}
.run{position:relative;min-width:216px;font-variant-numeric:tabular-nums;padding:0 24px 0 20px;background:var(--act-bg);color:var(--act-ink);font-weight:700;font-size:15px;border:0;border-left:1px solid var(--rule2);cursor:pointer}
/* At rest the button reads ">>> Identify". While a command loads, the
   chevrons glide to the middle and light in turn, "Identify" drops away and
   what is under way fades in beneath them; done, it all glides back. */
.run>*{position:absolute;left:50%;top:50%;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s}
.run .chev{width:36px;height:14px;fill:none;stroke:var(--act-icon);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transform:translate(calc(-50% - 36px),-50%)}
.run .lbl{transform:translate(calc(-50% + 23px),-50%);white-space:nowrap}
.run small{transform:translate(-50%,calc(-50% + 18px));opacity:0;font-size:11.5px;font-weight:500;white-space:nowrap}
.run.busy .chev{transform:translate(-50%,calc(-50% - 10px))}
.run.busy .lbl{transform:translate(calc(-50% + 23px),calc(-50% + 10px));opacity:0}
.run.busy small{transform:translate(-50%,calc(-50% + 11px));opacity:.85}
/* the label and the status never show at once: the one leaving fades first */
.run .lbl,.run small{transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .1s}
.run .lbl,.run.busy small{transition-delay:.1s}
.run.busy .lbl,.run small{transition-delay:0s}
.run.busy .chev path{animation:chev .54s step-end infinite}
/* done: "Identified" pops in, the chevrons stepped a little left for the longer word */
.run.done .chev{transform:translate(calc(-50% - 41px),-50%)}
.run.done .lbl{transform:translate(calc(-50% + 23px),-50%);animation:pop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translate(calc(-50% + 23px),calc(-50% + 6px))}}
.run .chev path:nth-child(2){animation-delay:.18s}
.run .chev path:nth-child(3){animation-delay:.36s}
@keyframes chev{0%{opacity:1}33.4%{opacity:.25}100%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.run.busy .chev path{opacity:1}}
.run:hover{opacity:.9}
.run:disabled{cursor:progress}

/* the bar at the foot of the box: fills with a download, slides while the engine works */
.prog{position:relative;height:3px;background:var(--rule);overflow:hidden}
.prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--green-ink);transition:width .25s}
.prog.ind i{width:28%;animation:slide 1.1s ease-in-out infinite;transition:none}
@keyframes slide{from{left:-28%}to{left:100%}}
@media (prefers-reduced-motion:reduce){.prog.ind i{left:0;width:100%;opacity:.5}}
.ex{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--faint);align-items:center}
.ex button{color:var(--faint);border:1px solid var(--rule);background:none;padding:2px 9px;cursor:pointer}
.ex button:hover{color:var(--ink);border-color:var(--faint)}

/* syntax: two accents */
.t-prog{color:var(--ink);font-weight:600}.t-flag{color:var(--green-ink)}.t-val{color:var(--orange)}.t-dim{color:var(--faint)}
.t-cmd{color:var(--green-ink)}.t-str{color:var(--orange)}.t-punc{color:var(--faint)}
.c-art{color:var(--orange)}.c-verb{color:var(--ink)}.c-field{color:var(--green-ink)}.c-brace{color:var(--faint)}

.status{margin:16px 0 0;padding:10px 14px;border:1px solid var(--rule2);background:var(--panel);color:var(--dim);font-size:13.5px}
.status.error{border-color:var(--orange);color:var(--orange)}
.status.loading{display:flex;align-items:center}
.res.stale{opacity:.35;transition:opacity .2s;pointer-events:none}

/* ---- results ----------------------------------------------------------- */
.res{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;padding:18px 0 8px;align-items:start}
.res.one{grid-template-columns:minmax(0,1fr)}
.res>div{min-width:0}
.ph .only-s{display:none}
.pan{border:1px solid var(--rule2);background:var(--panel);margin-bottom:16px}
.ph{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--rule)}
.ph .n{font:500 11.5px "IBM Plex Mono",monospace;color:var(--faint)}
.ph h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.005em}
.ph .meta{margin-left:auto;font-size:12px;color:var(--faint);text-align:right}
.pb{padding:4px 14px 10px}
.row{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;gap:0 18px;padding:8px 0;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0}
.row>code{font-size:13px;white-space:nowrap}
.row>code.ind{padding-left:14px}
.row>span{color:var(--ink)}
.s{display:inline-block;margin-left:6px;font:500 10.5px "IBM Plex Mono",monospace;color:var(--faint);border:1px solid var(--rule2);padding:0 5px;vertical-align:1px;white-space:nowrap}
.summary{display:flex;gap:16px;align-items:baseline;padding:12px 14px}
.summary .bin{font:600 18px "IBM Plex Mono",monospace;white-space:nowrap}
.summary p{margin:0;color:var(--dim)}
.caveat{padding:0 14px 12px;margin:0;font-size:12.5px;color:var(--orange)}
.decoded{margin:10px 0 6px;padding:11px 13px;background:var(--code);border-left:3px solid var(--green);font:13.5px/1.6 "IBM Plex Mono",monospace;white-space:pre-wrap;word-break:break-all}
.decoded+.decoded{border-left-color:var(--rule2)}
.sub{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin:12px 0 0}
.procs{margin:0;padding:6px 0 4px 1.3em;font-size:13.5px}
.procs li{padding:3px 0}
.procs b{font:600 13px "IBM Plex Mono",monospace;margin-right:10px}
.procs code{font-size:12.5px;color:var(--dim);word-break:break-all}
.verdict{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;padding:14px}
.big{font:700 40px/1 "Space Grotesk",sans-serif;letter-spacing:-.03em;color:var(--orange);text-transform:capitalize}
/* orange only for high and critical; medium in the text colour, low quieter */
.sev-mid .big{color:var(--ink)}
.sev-lo .big{color:var(--dim)}
.sev-mid .meter i.on{background:var(--dim)}
.sev-lo .meter i.on{background:var(--faint)}
.sev-mid .ph .ic,.sev-lo .ph .ic,.sev-calm .ph .ic{filter:grayscale(1);opacity:.6}
/* a section with no results steps back */
.pan.empty .ph h2,.pan.empty .ph .n{color:var(--faint)}
.pan.empty .ph .ic{filter:grayscale(1);opacity:.4}
.pan.empty .none{color:var(--faint)}
.big.none{color:var(--faint);font-size:30px}
.verdict .vt{font-size:13px;color:var(--dim)}
.meter{grid-column:1/3;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:8px}
.meter i{height:5px;background:var(--rule2)}
.meter i.on{background:var(--orange)}
.meter-l{grid-column:1/3;display:flex;justify-content:space-between;font:10.5px "IBM Plex Mono",monospace;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.verdict .link{grid-column:1/3;justify-self:start;margin-top:10px;font-size:12.5px;color:var(--dim);background:none;border:1px solid var(--rule2);padding:3px 10px;cursor:pointer}
.verdict .link:hover{color:var(--ink)}
.rule{padding:9px 0;border-bottom:1px solid var(--rule)}
.rule:last-child{border-bottom:0}
.lv{display:inline-block;font:600 10.5px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;margin-right:6px;vertical-align:1px}
.lv.critical,.lv.high{background:var(--orange);color:var(--on-accent)}
.lv.medium{border:1px solid var(--dim);color:var(--ink);padding:0 5px}
.lv.low,.lv.informational{border:1px solid var(--rule2);color:var(--dim);padding:0 5px}
.rule a{text-decoration-color:var(--rule2)}
.rule .by{display:block;color:var(--faint);font-size:12px;margin-top:2px}
details.maybe{padding:10px 0 4px;font-size:12.5px;color:var(--dim)}
details.maybe summary{cursor:pointer}
details.maybe .rule{font-size:13.5px}
.abuse{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 4px}
.abuse span{font-size:12.5px;border:1px solid var(--orange);color:var(--orange);padding:1px 8px}
.abuse a{font-size:12.5px;color:var(--dim)}
.tech{display:flex;gap:10px;align-items:baseline;padding:7px 0;font-size:13.5px}
.tech a{font:500 12.5px "IBM Plex Mono",monospace;border:1px solid var(--rule2);padding:0 5px;text-decoration:none;white-space:nowrap}
.tech a:hover{border-color:var(--green)}
.none{color:var(--dim);font-size:13.5px;margin:10px 0}
.ioc{display:flex;align-items:baseline;gap:10px;padding:7px 0;font:13px "IBM Plex Mono",monospace;color:var(--orange);word-break:break-all}
.ioc .k{color:var(--faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;width:34px;flex:none}
.note{font-size:12px;color:var(--faint);margin:6px 0 0}
.next .item{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule)}
.next .item:last-child{border-bottom:0}
.next code{flex:1;min-width:0;font-size:12.5px;line-height:1.55;word-break:break-all}
.next .what{display:block;font-family:"Space Grotesk",sans-serif;font-size:12px;color:var(--faint);margin-top:2px}
.cp{flex:none;font-size:12px;color:var(--dim);border:1px solid var(--rule2);background:var(--panel2);padding:2px 9px;cursor:pointer}
.cp:hover{color:var(--ink)}
.next .intro{font-size:13px;color:var(--dim);margin:8px 0 2px}
.miss{border:1px solid var(--rule2);background:var(--panel);padding:16px 18px;margin-top:18px}
.miss h2{margin:0 0 6px;font-size:17px}
.miss p{margin:0 0 4px;color:var(--dim)}
.resbar{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.resbar .took{margin-right:auto;font-size:12.5px;color:var(--faint)}
.btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);background:var(--panel);border:1px solid var(--rule2);padding:5px 12px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--faint)}
.btn.primary{background:var(--act-bg);border-color:var(--act-bg);color:var(--act-ink);font-weight:600}
.btn.primary:hover{opacity:.9}

/* ---- the corner panel: the identifier loading in the background ------ */
.toast{position:fixed;right:20px;bottom:20px;z-index:20;display:flex;flex-direction:column;gap:10px;width:272px;padding:12px 14px;
  background:var(--panel);border:1px solid var(--rule2);box-shadow:0 10px 30px rgba(0,0,0,.28);transition:opacity .3s,transform .3s}
.toast.out{opacity:0;transform:translateY(10px)}
.trow{display:flex;align-items:center;gap:14px}
.trow>div{flex:1;min-width:0}
.board{display:block;width:100%;max-width:240px;margin:0 auto;aspect-ratio:16/10;border:1px solid var(--rule);cursor:pointer;touch-action:manipulation}
.board:focus{outline:none;border-color:var(--green-ink)}
.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:240px;margin:0 auto}
.pads button{padding:8px 0;font-size:15px;color:var(--ink);background:var(--panel2);border:1px solid var(--rule2);cursor:pointer}
.tclose{flex:none;align-self:flex-start;width:26px;height:26px;font-size:16px;line-height:1;color:var(--dim);background:none;border:1px solid var(--rule2);cursor:pointer}
.tclose:hover{color:var(--ink)}
.toast b{display:block;font-size:13.5px;font-weight:600}
.toast span{display:block;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.toast .chev{flex:none;width:30px;height:12px;fill:none;stroke:var(--green-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.toast.busy .chev path{animation:chev .54s step-end infinite}
.toast .chev path:nth-child(2){animation-delay:.18s}
.toast .chev path:nth-child(3){animation-delay:.36s}
.tbar{position:relative;height:3px;margin-top:8px;background:var(--rule);overflow:hidden}
.tbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--green-ink);transition:width .25s}
.tbar.ind i{width:28%;animation:slide 1.1s ease-in-out infinite;transition:none}
@media (prefers-reduced-motion:reduce){.toast.busy .chev path{opacity:1}.tbar.ind i{left:0;width:100%;opacity:.5}}

/* ---- report an issue --------------------------------------------------- */
.report{margin:26px 0 0;scroll-margin-top:16px}
.report .rclose{margin-left:12px;padding:2px 10px;font-size:12.5px}
.report .lead{margin:10px 0 4px;color:var(--dim);font-size:13.5px;max-width:820px}
.rgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 24px;padding-bottom:6px}
.report label,.report .label{display:block;margin:12px 0 5px;font-size:12.5px;color:var(--dim)}
.report select,.report textarea{width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:var(--code);border:1px solid var(--rule2);padding:7px 9px;border-radius:0}
.report textarea{resize:vertical;min-height:96px}
.report select:focus,.report textarea:focus{outline:none;border-color:var(--green)}
.report .chk{display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.report .chk input{margin:2px 0 0;accent-color:var(--green)}
.report .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.rprev{margin:0;padding:10px 12px;background:var(--code);border:1px solid var(--rule);font-size:12px;line-height:1.55;color:var(--dim);white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto}

/* ---- about, footer ----------------------------------------------------- */
/* below the box, what it reads, kept quiet: the box is what the page is for */
.about{margin:88px 0 26px}
.about .pan{background:none;border:0;border-top:1px solid var(--rule)}
.about .ph{padding:14px 0 4px;border:0;background:none}
.about .ph h2{font:600 11px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.about .grid>div:nth-child(n){padding:10px 24px 10px 0;border:0}
.about .grid h3{font-size:13px;font-weight:600;color:var(--dim)}
.about .grid p{font-size:12.5px;color:var(--faint);line-height:1.55}
.grid{display:grid;grid-template-columns:repeat(4,1fr)}
.grid div{padding:14px;border-right:1px solid var(--rule)}
.grid div:last-child{border-right:0}
.grid h3{margin:0 0 4px;font-size:14px}
.grid p{margin:0;color:var(--dim);font-size:13px}
.grid code{font-size:12px}
.more{color:var(--faint);font-size:12.5px;line-height:1.6;max-width:860px;margin-top:22px}
.more a{color:var(--dim)}
.foot{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;border-top:3px solid var(--ink);padding:12px 0 30px;font-size:12.5px;color:var(--faint)}
.foot b{color:var(--ink);font-weight:500}
.foot .ic{width:14px;height:14px;margin:0 5px 0 2px;vertical-align:-2px}
.foot a{color:var(--faint)}
.foot .links{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
.foot .credits{flex-basis:100%;margin:6px 0 0;font-size:11.5px;line-height:1.6}
/* the identifier's page ends in a paragraph, not a panel: room before the footer */
.foot.home{margin-top:72px}
.foot .ceplin{display:flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none}
.foot .ceplin .mark{height:17px;width:auto}
.foot .ceplin .word{height:15px;width:auto;position:relative;top:2px} /* its box holds the p's tail: the letters sit on the head's middle */

/* ---- program pages and their index ----------------------------------- */
.ppage{max-width:980px;padding:22px 0 30px}
.crumbs{margin:0 0 10px;font-size:12.5px;color:var(--faint)}
.crumbs a{color:var(--faint)}
.ppage h1{font:600 38px/1.1 "IBM Plex Mono",monospace;letter-spacing:-.02em;word-break:break-all}
.ppage .lead{margin:12px 0 10px;font-size:16px;color:var(--dim);max-width:780px}
.facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 20px;font-size:13.5px;color:var(--dim)}
.facts b{color:var(--ink);font-weight:600}
.try{margin:0 0 22px}
.try label{display:block;font-size:13px;color:var(--dim);margin-bottom:6px}
.trybox{display:grid;grid-template-columns:1fr auto;border:1px solid var(--rule2);background:var(--panel)}
.trybox textarea{border:0;padding:11px 13px;background:transparent;color:var(--ink);font:13.5px/1.6 "IBM Plex Mono",monospace;resize:vertical;min-height:52px}
.trybox textarea:focus{outline:none}
.trybox:focus-within{border-color:var(--green-ink)}
.trybox .btn{border-radius:0;padding:0 22px;font-size:14px}
.try .note{margin-top:6px}
.use{padding:10px 0 8px;border-bottom:1px solid var(--rule)}
.use:last-of-type{border-bottom:0}
.uh{margin:0 0 4px;font-size:14px}
.uh b{font-weight:600;margin-right:4px}
.tid{font:500 12px "IBM Plex Mono",monospace;border:1px solid var(--rule2);padding:0 5px;text-decoration:none;margin-right:4px}
.via{margin:0 0 4px;font-size:13px;color:var(--dim)}
.via code{font-size:12.5px;color:var(--ink)}
.exl{padding:9px 0;border-bottom:1px solid var(--rule)}
.exl:last-child{border-bottom:0}
.exl p{margin:0 0 4px;font-size:13.5px;color:var(--dim)}
.exl div{display:flex;gap:10px;align-items:flex-start}
.exl code{flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere}
.exl .cp{text-decoration:none}
/* the identifier's reading of an example, written in when the site is built */
.exl .exn{display:block;margin:6px 0 0;padding:0 0 0 12px;border-left:2px solid var(--rule2)}
.exl .exn .row{display:grid;padding:5px 0;font-size:13px}
.exl .exn code{flex:none}
.exl .exn .vd{margin:5px 0 0;font-size:12.5px;color:var(--faint)}
.exl .exn .vd.hit{color:var(--ink)}
.exl .exn .vd a{text-decoration-color:var(--rule2)}
/* is it the real program: version info and known copies */
.fk{color:var(--dim);font-size:13px}
.row .fk + span code{font-size:13px}
h3.sub{font:600 13px "IBM Plex Mono",monospace;letter-spacing:.02em;margin:16px 0 4px;color:var(--ink)}
.copy{padding:7px 0;border-bottom:1px solid var(--rule)}
.copy:last-of-type{border-bottom:0}
.copy p{margin:0 0 3px;font-size:13px;color:var(--dim)}
.copy b{color:var(--ink);font-weight:600}
.copy .hash{display:block;font-size:12px;overflow-wrap:anywhere;color:var(--ink)}
/* documented commands, each read by the identifier */
.dcmd{padding:11px 0 9px;border-bottom:1px solid var(--rule)}
.dcmd:last-of-type{border-bottom:0}
.dcmd .dd{margin:0 0 6px;font-size:13.5px;color:var(--dim)}
.dcmd .dd p,.dcmd .dd ul,.dcmd .dd ol{margin:0 0 5px}
.dcmd .dd ul,.dcmd .dd ol{padding-left:20px}
.dcmd .dd pre{margin:0 0 6px;padding:6px 9px;background:var(--panel2);border:1px solid var(--rule)}
.dcmd .dd code{font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.dcmd .dl{display:flex;gap:10px;align-items:flex-start}
.dcmd pre{flex:1;min-width:0;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.dcmd pre code{font-size:13px}
.dcmd .cp{text-decoration:none}
.dcmd p.alt{margin:6px 0 2px;font-size:12.5px;color:var(--dim)}
.dcmd pre.alt code{font-size:12.5px}
.dcmd .vd{margin:7px 0 0;font-size:12.5px;color:var(--faint)}
.dcmd .vd.hit{color:var(--ink)}
.dcmd .vd a{text-decoration-color:var(--rule2)}
.vd .by{color:var(--faint)}
details.opts{padding:8px 0 4px}
details.opts summary{cursor:pointer;font-size:13.5px;color:var(--dim);margin-bottom:6px}
.related{margin:26px 0 0}
.related h2{font-size:16px;margin:0 0 6px}
.related p{margin:0;font-size:13.5px;line-height:1.9;color:var(--faint)}
.related a{font-family:"IBM Plex Mono",monospace;font-size:12.5px}
.plist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;padding:8px 14px 12px}
.plist a{display:block;padding:6px 0;border-bottom:1px solid var(--rule);text-decoration:none;min-width:0}
.plist code{display:block;font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.plist span{display:block;font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plist a:hover code{color:var(--green-ink)}

/* ---- sources page ------------------------------------------------------ */
.doc{max-width:820px;padding:28px 0 40px}
.doc h1{font-size:34px;margin-bottom:12px}
.doc h2{font-size:18px;margin:30px 0 6px;padding-top:12px;border-top:1px solid var(--rule)}
.doc p,.doc dd,.doc li{color:var(--dim)}
.doc li{margin:5px 0}
.doc ol,.doc ul{padding-left:1.3em}
.doc dl{margin:0}
.doc dt{font-weight:600;margin-top:14px}
.doc dd{margin:2px 0 0}
.doc code{font-size:12.5px}
.vtab{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0 0}
.vtab th{text-align:left;font-weight:500;font-size:12px;color:var(--faint);padding:6px 10px 6px 0;border-bottom:1px solid var(--rule2)}
.vtab td{padding:6px 10px 6px 0;border-bottom:1px solid var(--rule);color:var(--dim);vertical-align:top}
.vtab td:first-child{color:var(--ink)}
.vtab code{font-size:12px}

/* ---- narrow ------------------------------------------------------------ */
@media (max-width:980px){
  .res{grid-template-columns:minmax(0,1fr)}
  .ph .only-s{display:inline-block;margin:0 0 0 6px}
  .grid{grid-template-columns:1fr 1fr}
  .grid div:nth-child(2){border-right:0}
  .grid div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
@media (max-width:700px){
  .g{padding:0 14px}
  .hide-s,.keys{display:none}
  .top nav{gap:14px}
  .brand{font-size:15.5px}
  .seg{flex-wrap:wrap;gap:4px;border:0}
  .seg button,.seg .net{border:1px solid var(--rule2)}
  .hero{padding:28px 0 18px}
  .about{margin-top:56px}
  h1{font-size:31px}
  .editor{grid-template-columns:1fr}
  .ln{display:none}
  .run{min-height:60px;border-left:0;border-top:1px solid var(--rule2)}
  .summary{flex-direction:column;gap:4px}
  .row{grid-template-columns:1fr;gap:2px}
  .row>code{white-space:normal;word-break:break-all}
  .grid{grid-template-columns:1fr}
  .rgrid{grid-template-columns:minmax(0,1fr)}
  .ppage h1{font-size:28px}
  .plist{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .trybox{grid-template-columns:1fr}
  .trybox .btn{padding:10px}
  .toast{left:12px;right:12px;bottom:12px;width:auto}
  .resbar .took{flex-basis:100%}
  .vtab th:nth-child(3),.vtab td:nth-child(3){display:none}
  .grid div{border-right:0;border-bottom:1px solid var(--rule)}
}
/* the narrowest phones: the name, the Ceplin link and the theme button are
   wider than the screen, which pushed the button off it and zoomed the page
   out; the footer links to Ceplin too */
@media (max-width:380px){
  .top .ext{display:none}
}