/* https://drosophila.io/chrome/site.css - THE SITE'S HEADER AND FOOTER, ON EVERY PAGE (with site.js). Edit here only:
   built once from the terminal's own header (deploy/chrome_build.py); a page keeps nothing of it but its line. */
header.v2,footer.lf{--ink:#050505;--paper:#e9e4d6;--dim:#8a887f;--faint:#2a2a27;--line:#1a1a18;--lime:#c6ff00;--red:#ff5a4d;--rose:#ff8fb1}
header.v2{box-sizing:border-box;background:#050505;color:var(--paper);font:15px/1.55 "Fraunces",Georgia,serif;font-variation-settings:"opsz" 14;text-align:left}
header.v2 *,footer.lf *{box-sizing:border-box}
footer.lf{border-top:1px solid #23251f;margin-top:60px;padding-top:14px;font:11px/1.8 "JetBrains Mono",monospace;color:var(--dim);letter-spacing:.08em;box-sizing:border-box;background:#050505;text-align:left}
footer.lf a{color:var(--lime)}
.site-foot{background:#050505;padding-top:24px}.site-foot>.lfwrap{max-width:1708px;margin:0 auto;padding:0 clamp(16px,4vw,56px) 28px}.site-foot footer.lf{margin-top:0}
header.v2{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:6px 14px;padding:18px 28px 12px;border-bottom:1px solid var(--line)}
header.v2 .wordmark{font-size:34px;font-weight:300;letter-spacing:.42em;line-height:1;color:#fff;font-variation-settings:"opsz" 144}
header.v2 .wordmark b{font-weight:600;color:var(--lime)}
header.v2 .tag{font-size:14px;font-style:normal;color:var(--dim);font-weight:300;padding-bottom:4px;min-width:0;padding-left:2px}
header.v2 #st .l2::before{content:" · "}
header.one #st .l1{min-width:var(--l1w,0px);text-align:left}
header.v2 #st #ear{text-align:center;text-align-last:auto;vertical-align:middle}
header.v2 .tag em{color:var(--paper);font-style:normal}
header.v2 #status{grid-column:3;justify-self:end;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);display:flex;gap:8px;align-items:center;padding-bottom:5px;white-space:nowrap}
header.v2 #status .pill{display:inline-flex;align-items:center;gap:7px}
header.v2 #status .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);animation:pulse 2.4s ease-in-out infinite}
header.v2 #status .dot.busy{background:var(--amber);box-shadow:0 0 12px var(--amber);animation-duration:.6s}
header.v2 #status .dot.off{background:var(--red);box-shadow:none;animation:none}
@keyframes pulse{50%{opacity:.35}}
header.v2 .ear{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--dim);border:1px solid var(--faint);padding:3px 8px;margin-left:0;cursor:pointer}
header.v2 .ear:hover{color:var(--paper)}
header.v2 .ear.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
header.v2 .follow{text-decoration:none;border-color:var(--faint);color:var(--paper)}
header.v2 .follow .mk{width:1.25em;height:1.25em;fill:currentColor;vertical-align:-.25em}
header.v2 #status .ear{box-sizing:border-box;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
header.v2 .follow:hover{border-color:var(--lime);color:var(--lime)}
header.v2 .follow.play{background:var(--lime);color:var(--ink);border-color:var(--lime);font-weight:600}
header.v2 .follow.play:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
header.v2 #eyebtn{background:var(--red);border-color:var(--red);color:var(--ink);font-weight:700}
header.v2 #eyebtn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
header.v2 #bodybtn{background:#ffd14d;border-color:#ffd14d;color:var(--ink);font-weight:700}
header.v2 #readbtn{background:#7394ff;border-color:#7394ff;color:var(--ink);font-weight:700}
header.v2 #bodybtn:hover,header.v2 #readbtn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
header.v2 #sites .here{background:transparent;cursor:default}
header.v2 #bodybtn.here,header.v2 #bodybtn.here:hover{background:transparent;color:#ffd14d;border-color:#ffd14d}
header.v2 #readbtn.here,header.v2 #readbtn.here:hover{background:transparent;color:#7394ff;border-color:#7394ff}
header.v2 #eyebtn.here,header.v2 #eyebtn.here:hover{background:transparent;color:var(--red);border-color:var(--red)}
header.v2 #herbtn.here,header.v2 #herbtn.here:hover{background:transparent;color:#ff8fb1;border-color:#ff8fb1}
header.v2 #atlasbtn.here,header.v2 #atlasbtn.here:hover{background:transparent;color:#42cfd0;border-color:#42cfd0}
header.v2 #play.here,header.v2 #play.here:hover,header.v2 #about.here,header.v2 #about.here:hover,header.v2 #tokbtn.here,header.v2 #tokbtn.here:hover{background:transparent;color:var(--lime);border-color:var(--lime)}
header.v2 #herbtn{background:#ff8fb1;border-color:#ff8fb1;color:var(--ink);font-weight:700}
header.v2 #herbtn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
footer.lf{border:1px solid #2a2c25;border-radius:14px;background:#070706}
footer.lf .prompt{font-family:"JetBrains Mono",monospace;color:var(--lime);font-size:13px}
footer.lf input{min-width:0;flex:1 1 auto;background:transparent;border:0;color:#fff;font:400 14px "JetBrains Mono",monospace;outline:0;caret-color:var(--lime)}
footer.lf input::placeholder{color:var(--dim)}
footer.lf small{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
@media (max-width:900px){
header.v2{grid-template-columns:1fr;gap:8px;padding:14px 18px 12px}
header.v2 .wordmark{font-size:clamp(20px,6.6vw,28px);letter-spacing:.32em}
header.v2 .tag{grid-column:auto!important;grid-row:auto!important;font-size:13px;white-space:normal;padding:0}
header.v2 #status{grid-column:auto!important;justify-self:start!important;white-space:normal;flex-wrap:wrap;gap:8px;padding-bottom:0}
header.v2 .ear,header.v2 .follow{font-size:9px;padding:4px 5px;letter-spacing:.05em}
header.v2 #status{column-gap:6px}
footer.lf,header.v2 #cmdbar{font-size:11px}
}
header.v2{grid-template-columns:auto minmax(0,1fr) auto minmax(250px,calc(var(--bw,96px) * 5 + 24px));align-items:center;column-gap:22px;row-gap:8px}
header.v2 .wordmark{grid-column:1;grid-row:1}
header.v2 .tag{grid-column:2;grid-row:1;white-space:nowrap;overflow:hidden;line-height:1.45;padding:0 0 0 2px}
header.v2 .tag.row{grid-column:1 / -1;grid-row:2;white-space:nowrap}
header.v2 #status{grid-column:3;grid-row:1;display:grid;grid-template-columns:7px auto;grid-template-rows:24px 24px;column-gap:8px;row-gap:6px;align-items:center;padding:0;justify-self:end}
header.v2 #status .pill,header.v2 #st{display:contents}
header.v2 #status .dot{grid-column:1;grid-row:1}
header.v2 #st .l1{grid-column:2;grid-row:1;white-space:nowrap}
header.v2 #st .l2{grid-column:2;grid-row:2;white-space:nowrap}
header.v2 #st .l2::before{content:none}
header.v2 #sites{grid-column:4;grid-row:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:24px;gap:6px}
header.v2 #sites .follow,header.v2 #sites #ear{box-sizing:border-box;height:24px;min-width:0;margin:0;padding:0 4px;white-space:nowrap;display:flex;align-items:center;justify-content:center;text-align:center}
header.v2 #sites .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:0}
header.v2 #atlasbtn{background:#42cfd0;border-color:#42cfd0;color:var(--ink);font-weight:700}
header.v2 #atlasbtn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
@media (max-width:1060px){
header.v2{grid-template-columns:minmax(0,1fr);row-gap:10px}
header.v2 .wordmark,header.v2 .tag,header.v2 #status,header.v2 #sites{grid-column:1;grid-row:auto}
header.v2 .tag,header.v2 .tag.row{white-space:normal}
header.v2 .tag br{display:none}
header.v2 #status{justify-self:stretch;grid-template-columns:7px minmax(0,1fr)}
header.v2 #sites{grid-template-columns:auto repeat(4,minmax(0,1fr));gap:8px}
header.v2 #sites #livebtn{display:grid;place-items:center}
header.v2 #sites #livebtn>span,header.v2 #sites #livebtn::after{grid-area:1/1}
header.v2 #sites #livebtn::after{content:"hear the fly";visibility:hidden;white-space:nowrap}
header.v2 #sites .pair{gap:8px}
header.v2 #sites .pair .follow{padding:0 1px;letter-spacing:.04em}
}
footer.lf .soc{display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px;vertical-align:middle}
footer.lf .soc a{display:inline-flex;align-items:center}
footer.lf .soc svg{width:16px;height:16px;fill:currentColor;margin:0}
footer.lf .lfp,footer.lf .lfm{white-space:nowrap}
@media (max-width:700px){
footer.lf{padding-left:10px;padding-right:10px;padding-bottom:14px;font-size:10px;letter-spacing:0}
footer.lf .lfr a{font-size:11.5px;letter-spacing:0}
footer.lf .soc{gap:14px}
footer.lf .soc svg{width:18px;height:18px}
footer.lf .lfr{display:flex;flex-wrap:wrap;align-items:center;row-gap:7px}
footer.lf .lfa{order:1}
footer.lf .lfp{order:2}
footer.lf .lfm{order:3;flex-basis:100%}
footer.lf .lfm .lfs{display:none}
footer.lf .lfl{white-space:nowrap;font-size:min(10px,calc((100vw - 56px) / 32.6))}   /* the name on one line on any phone (32.4 em wide; the page's gutters, the box's border and padding) */
footer.lf .soc{order:4;flex-basis:100%}
}
header.v2 .legal main a,header.v2 .legal footer a{color:var(--lime)}
footer.lf .legal footer.lf{border-top:1px solid #23251f;margin-top:60px;padding-top:14px;font:11px/1.8 "JetBrains Mono",monospace;color:var(--dim);letter-spacing:.08em}
footer.lf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 24px}
footer.lf .lfr{text-align:right;margin-left:auto}
footer.lf{padding:14px 14px}
@media (max-width:700px){
footer.lf .lfr{text-align:left;margin-left:0}
}
@media (max-width:700px){
footer.lf,footer.lf .legal footer.lf{padding-left:10px;padding-right:10px;padding-bottom:14px;font-size:10px;letter-spacing:0}
}
/* the page you are on: its box stays where it always is, outlined in its colour, not a link */
header.v2 #sites .here{background:transparent;cursor:default}
header.v2 #bodybtn.here{color:#ffd14d;border-color:#ffd14d}header.v2 #readbtn.here{color:#7394ff;border-color:#7394ff}
header.v2 #eyebtn.here{color:var(--red);border-color:var(--red)}header.v2 #herbtn.here{color:#ff8fb1;border-color:#ff8fb1}
header.v2 #atlasbtn.here{color:#42cfd0;border-color:#42cfd0}
header.v2 #play.here,header.v2 #about.here,header.v2 #tokbtn.here{color:var(--lime);border-color:var(--lime)}
header.v2 #sites .here:hover{background:transparent}
/* the terminal's own voice (data-voice="ear"): its box, dimmed while the voice gets ready */
header.v2 #ear{min-width:var(--bw,104px);text-align:center}
header.v2 #ear.wait{opacity:.5;cursor:default}
header.v2 #ear:not(.on){color:var(--paper)}
header.v2 #ear:not(.on):hover{border-color:var(--lime);color:var(--lime)}
header.v2 #st #ear{text-align:center;text-align-last:auto;vertical-align:middle}
@media (max-width:900px){header.v2 #ear{min-width:0}}
/* (the stamp in every page's link is this file's and site.js's hash: deploy/chrome_build.py) */
/* UP: back to the top from anywhere down a page (site.js puts it on every page that has the site's footer) */
#toTop{position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:20;width:56px;height:92px;display:block;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .2s,transform .25s}
#toTop.on{opacity:1;transform:none;pointer-events:auto}
#toTop:hover,#toTop:focus-visible{transform:translateY(-5px);outline:none}
#toTop .arr{position:absolute;left:4px;bottom:0;width:48px;height:64px;fill:#c6ff00;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
#toTop img{position:absolute;left:50%;top:0;width:40px;transform:translateX(-50%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.55));transition:transform .25s}
#toTop:hover img,#toTop:focus-visible img{transform:translate(-50%,-4px)}
/* the voice's box never changes size, whatever it says: "listening", "hear it fire" - an unseen "hear the fly" under its
   words holds its width, so on a phone (where the first column is as wide as its box) no box moves (the user, 14 Oct) */
@media (max-width:1060px){header.v2 #sites #ear{flex-direction:column}header.v2 #sites #ear::after{content:"hear the fly";display:block;height:0;overflow:hidden;visibility:hidden}}