/* Juggling - the whole stylesheet.  No external font, no external anything. */
:root{
  --bg:#15171c; --bg2:#1b1e24; --panel:#21252d; --line:#323844; --line2:#3d4553;
  --ink:#e7eaf0; --dim:#a4adbd; --faint:#78839a;
  --good:#66c98a; --bad:#e8756c; --warn:#e6c04a; --accent:#7fb3e8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
/* [hidden] is defeated by any class that sets display, so the class is spelled out here and
   wins with !important.  An invisible panel that still eats clicks is a classic fault. */
[hidden],.is-hidden{display:none !important}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--panel);padding:8px 12px;border-radius:6px;z-index:9}
main{max-width:1080px;margin:0 auto;padding:0 16px 56px}
.top{max-width:1080px;margin:0 auto;padding:20px 16px 10px}
h1{margin:0;font-size:30px;letter-spacing:-0.01em}
.tag{margin:6px 0 0;color:var(--dim);max-width:62ch}
h2{font-size:19px;margin:26px 0 8px;border-bottom:1px solid var(--line);padding-bottom:6px}
h3{font-size:15px;margin:18px 0 6px;color:var(--dim)}
p{margin:8px 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.94em;
  background:#0f1116;border:1px solid var(--line);border-radius:4px;padding:0 4px}
a{color:var(--accent)}
.small{font-size:13px;color:var(--faint)}

.stage-wrap{position:relative;margin:8px 0 12px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#0f1116}
#scene{display:block;width:100%;height:min(62vh,560px);min-height:280px}
.glfail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;color:var(--warn);background:#0f1116}
.hud{display:flex;flex-wrap:wrap;gap:2px 0;background:var(--bg2);border-top:1px solid var(--line)}
.hu{flex:1 1 90px;padding:7px 10px;border-right:1px solid var(--line);min-width:90px}
.hu:last-child{border-right:0}
.hu b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
.hu i{display:block;font-style:normal;font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.hu.warn b{color:var(--warn)}

.entry{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.entry label{font-size:13px;color:var(--dim)}
#ss{flex:1 1 220px;min-width:160px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:19px;padding:9px 11px;background:#0f1116;color:var(--ink);
  border:1px solid var(--line2);border-radius:7px}
#ss:focus{outline:2px solid var(--accent);outline-offset:1px}
.status{flex:1 1 100%;margin:2px 0 0;font-size:14px;color:var(--dim)}
.status.good{color:var(--good)}
.status.bad{color:var(--bad)}
.detail{flex:1 1 100%}

button,select,input[type=text]{font:inherit;color:var(--ink);background:var(--panel);
  border:1px solid var(--line2);border-radius:7px;padding:7px 12px;cursor:pointer}
button:hover,select:hover{border-color:var(--faint)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
input[type=text]{cursor:text}
.seg.on{background:var(--accent);color:#10141a;border-color:var(--accent);font-weight:600}
.tabs{display:flex;gap:6px;margin:22px 0 0;flex-wrap:wrap}
.tab{border-radius:7px 7px 0 0;border-bottom-color:transparent}
.tab.on{background:var(--bg2);border-color:var(--line);border-bottom-color:var(--bg2);font-weight:600}
.panel{border:1px solid var(--line);border-radius:0 8px 8px 8px;padding:14px 16px 22px;background:var(--bg2)}
.controls{display:flex;flex-direction:column;gap:8px}
.ctlrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ctlrow label{font-size:13px;color:var(--dim)}
.ctlrow output{font-variant-numeric:tabular-nums;font-size:13px;color:var(--dim);min-width:80px}
input[type=range]{accent-color:var(--accent);max-width:190px;flex:1 1 120px}
.chk{display:flex;align-items:center;gap:5px;cursor:pointer}

.gamebox{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#1a1d24}
.scoreline{font-size:15px;margin:8px 0 4px}
.scoreline b{font-variant-numeric:tabular-nums;font-size:18px}
.goalwhat{color:var(--faint);font-size:13px}

.catalogue{margin-top:4px}
.grp{margin:16px 0 6px}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.plist li{display:flex;flex-direction:column;gap:2px}
.pbtn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px}
.pname{flex:1 1 auto}
.pss{font-size:13px;color:var(--accent);background:#0f1116;border-color:var(--line)}
.pn{font-variant-numeric:tabular-nums;color:var(--faint);font-size:13px;min-width:1.4em;text-align:right}
.tagline{font-size:12px;color:var(--faint);padding:0 2px 2px}

.tbl{width:100%;border-collapse:collapse;margin:8px 0;font-size:14px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:5px 8px;border-bottom:1px solid var(--line)}
.tbl th{color:var(--dim);font-weight:600;width:34%}
.tbl thead th{width:auto}
.tbl .good{color:var(--good)}
.tbl .bad{color:var(--bad)}
.good{color:var(--good)}
.bad{color:var(--bad)}
.warn{color:var(--warn)}

.tally{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.tag{display:inline-block;font-size:11px;letter-spacing:.04em;padding:2px 7px;border-radius:999px;
  border:1px solid var(--line2);color:var(--dim);white-space:nowrap}
.tag.DOCUMENTED{color:var(--good);border-color:#2f5c41}
.tag.qualified{color:var(--warn);border-color:#5c4f22}
.tag.DERIVED{color:var(--accent);border-color:#2e4a68}
.tag.MEASURED{color:#c79ae8;border-color:#4b3560}
.tag.CALIBRATED{color:#7fd7d2;border-color:#2c5754}
.tag.RECONSTRUCTED{color:var(--faint)}
.tag.total{color:var(--ink)}
.provwrap{max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.prov td{font-size:13px}
.prov .tagcell{width:130px}
.prov .srccell{width:44px;color:var(--faint);font-size:12px}
.srcs{font-size:13px;margin:6px 0}
.srcs dt{color:var(--accent);font-weight:600;margin-top:8px}
.srcs dd{margin:2px 0 0 0;color:var(--dim)}

ul{margin:8px 0;padding-left:20px}
li{margin:5px 0}
ol{margin:8px 0;padding-left:22px}
footer{max-width:1080px;margin:0 auto;padding:18px 16px 40px;color:var(--faint);font-size:13px;
  border-top:1px solid var(--line)}
@media (max-width:620px){
  h1{font-size:24px}
  #scene{height:44vh}
  .plist{grid-template-columns:1fr}
  .prov .tagcell{width:100px}
}
/* the header tagline shares its class name with the provenance pills above; undo the pill styling
   there, or its nowrap pushes the page sideways on a phone */
.top .tag{display:block;white-space:normal;font-size:inherit;letter-spacing:normal;padding:0;border:0;
  border-radius:0;color:var(--dim)}
/* tapping a half of the picture throws in "Throw it yourself"; no double-tap zoom delay on it */
#scene{touch-action:manipulation}