:root{
  color-scheme:dark;
  font-synthesis:none;
  --field:#0d0b18;
  --field-soft:#171329;
  --ink:#f6f2ff;
  --ink-muted:#c9c0e5;
  --ink-faint:#8d83b2;
  --rule:#4d46728c;
  --grid:#302a4e;
  --spine:#4d4672;
  --accent:#b59bff;
  --summary:#67d7c4;
  --warm:#f2a65a;
  --alert:#e57fa6;
  --panel:#171329;
  --plate:#12101fd9;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--field);color:var(--ink)}
body{
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(circle at 50% 0%, #b59bff14, transparent 42%),
    radial-gradient(circle at 12% 88%, #67d7c40d, transparent 28%),
    linear-gradient(160deg, var(--field-soft), var(--field) 48%, #07060f);
  min-height:100svh;
}
a{color:inherit;text-decoration:none}
button{color:inherit;font:inherit;background:0 0;border:0;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{
  width:min(1220px, calc(100% - 40px));
  margin:0 auto;
  padding:clamp(28px,5vw,64px) 0 clamp(64px,10vw,120px);
}
.mast{
  display:grid;
  gap:16px;
  margin-bottom:clamp(28px,5vw,48px);
  max-width:740px;
}
.kicker{
  color:var(--ink-faint);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;
}
.mast h1{
  margin:0;
  font-weight:500;
  font-size:clamp(42px,7vw,72px);
  letter-spacing:-.035em;
  line-height:.95;
}
.mast h1 em{
  font-style:normal;
  color:var(--accent);
}
.lede{
  margin:0;
  color:var(--ink-muted);
  font-size:clamp(16px,2.1vw,19px);
  line-height:1.45;
  max-width:54ch;
}
.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  color:var(--ink-faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.meta-row span{display:inline-flex;align-items:center;gap:8px}
.meta-row i{
  width:6px;height:6px;border-radius:50%;
  background:var(--summary);
  box-shadow:0 0 10px color-mix(in srgb, var(--summary) 55%, transparent);
}
.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 16px;
  margin:0 0 clamp(22px,3.5vw,34px);
}
.toolbar .hint{
  color:var(--ink-faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.toolbar .hint a{color:var(--ink-muted)}
.toolbar .hint a:hover{color:var(--accent)}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:16px;
}
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
  padding:18px 18px 16px;
  border:1px solid var(--rule);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 42%),
    color-mix(in srgb, var(--panel) 88%, transparent);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .24s, transform .24s, box-shadow .24s;
  isolation:isolate;
}
.card:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--warm) 12%, transparent), transparent 34%),
    radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--summary) 8%, transparent), transparent 32%);
  opacity:.65;
  pointer-events:none;
  z-index:-1;
}
.card:hover, .card:focus-within{
  border-color:color-mix(in srgb, var(--accent) 60%, var(--rule));
  transform:translateY(-2px);
  box-shadow:0 18px 40px #00000055;
}
.card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.study-no, .version{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.study-no{color:var(--ink-faint)}
.version{color:var(--accent);letter-spacing:.1em}
.card h2{
  margin:0;
  font-size:clamp(24px,2.6vw,30px);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.02;
}
.claim{
  margin:0;
  color:var(--ink-muted);
  font-size:15px;
  line-height:1.35;
}
.invariant{
  display:grid;
  gap:4px;
  margin:2px 0 2px;
  padding-top:10px;
  border-top:1px solid var(--rule);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.invariant div{display:flex;gap:10px;align-items:baseline}
.invariant dt{color:var(--ink-faint);margin:0;min-width:52px;flex:none}
.invariant dd{margin:0;color:var(--ink)}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.tags span, .cost{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--rule);
  border-radius:999px;
  padding:5px 8px;
  color:var(--ink-faint);
}
.tags .domain{
  color:var(--ink-muted);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--rule));
}
.tags .is-on{
  color:var(--ink);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--rule));
}
.cost{
  color:var(--warm);
  border-color:color-mix(in srgb, var(--warm) 45%, var(--rule));
  width:fit-content;
}
.specimen{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:10px;
  align-items:stretch;
  margin-top:4px;
}
.specimen .orb,
.specimen .plate{
  border:1px solid var(--rule);
  background:var(--plate);
  border-radius:10px;
  min-height:132px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.specimen svg{width:100%;height:auto;display:block}
.plate-cap{
  color:var(--ink-faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:8px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:right;
  margin-top:2px;
}
.card-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--rule);
  color:var(--ink-faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.go{color:var(--accent)}
.card:hover .go{color:var(--summary)}
.note{
  margin-top:clamp(40px,6vw,64px);
  max-width:72ch;
  color:var(--ink-faint);
  font-size:13px;
  line-height:1.55;
}
.note strong{color:var(--ink-muted);font-weight:500}
.note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  color:var(--accent);
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .wrap{width:min(100% - 28px, 1220px)}
  .specimen{grid-template-columns:1fr 1fr}
}
  .specimen{display:block!important;padding:10px 0;min-height:180px}.specimen svg{width:100%;height:auto;display:block}.plate-cap{font-size:11px;line-height:1.45;min-height:42px;letter-spacing:.02em}.tags{gap:7px}.invariant,.card-top{font-size:11px}.card-foot{font-size:11px}.hint{font-size:12px;letter-spacing:.02em}.card:focus-visible{outline:2px solid var(--summary)!important}.card:focus:not(:focus-visible){outline:none}.lede{max-width:52ch}.question{font-size:14px;line-height:1.45;color:var(--summary);margin:0}.plate-cap{font-size:11px;line-height:1.45;letter-spacing:.02em}.specimen{display:block;padding:10px 0}.specimen svg{width:100%;height:auto}.tags{min-height:48px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:700px){.grid{grid-template-columns:1fr}}

.pixelated{image-rendering:pixelated}

/* Shared, lazily loaded computed specimens. */
.specimen img{display:block;width:100%;height:auto}
.card.is-selected{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover,.card:focus-within{transform:none}}