/* Shared design system for the ai.uquad.org genesis window + its feature pages.
   Extracted verbatim from the original self-contained index.html so the entry page
   is pixel-identical; every new page (journey, try-it, …) links this one file so the
   look stays consistent and the CSS is not duplicated per page. */
:root{
  --black:#030303; --panel:#090909; --panel-2:#0f0f0f; --panel-3:#141312;
  --ivory:#f4f0e8; --ivory-soft:#d9d3c8; --muted:#9c9a94;
  --faint:rgba(244,240,232,.15); --faint-2:rgba(244,240,232,.08); --line-strong:rgba(244,240,232,.24);
  --blue:#0f7dff; --blue-soft:#6eb2ff; --sage:#8fa17d; --copper:#b08a3c;
  --shadow:0 26px 90px rgba(0,0,0,.45); --radius:6px;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ivory); font-family:var(--sans);
  background:
    linear-gradient(90deg, rgba(244,240,232,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(244,240,232,.026) 1px, transparent 1px),
    linear-gradient(180deg,#000 0%, var(--black) 52%, #050505 100%);
  background-size:44px 44px,44px 44px,auto;
}
a{color:inherit;text-decoration:none}
.site{min-height:100vh;padding:22px}
.frame{
  max-width:1120px;margin:0 auto;border:1px solid var(--faint);border-radius:var(--radius);
  background:rgba(5,5,5,.9);box-shadow:var(--shadow);overflow:clip;
}
.header{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:16px 22px;border-bottom:1px solid var(--faint);position:sticky;top:0;z-index:10;
  backdrop-filter:blur(14px);background:rgba(3,3,3,.9);
}
.brand strong{display:block;font-size:17px}
.brand span{display:block;margin-top:5px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.nav a{border:1px solid transparent;color:var(--muted);padding:8px 9px;font-size:11px;text-transform:uppercase;border-radius:var(--radius)}
.nav a:hover,.nav a:focus-visible{color:var(--ivory);border-color:var(--line-strong);background:rgba(255,255,255,.04);outline:none}
.nav a.active{color:var(--ivory);border-color:var(--line-strong)}

.hero{text-align:center;padding:38px 20px 26px;border-bottom:1px solid var(--faint)}
.kicker{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.06em;margin:0;display:inline-flex;align-items:center;gap:9px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 0 rgba(143,161,125,.5);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(143,161,125,.5)}70%{box-shadow:0 0 0 8px rgba(143,161,125,0)}100%{box-shadow:0 0 0 0 rgba(143,161,125,0)}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
.page-title{margin:14px 0 0;font-size:clamp(30px,4.6vw,58px);line-height:1.0}
.page-title .blue{color:var(--blue)}
.subtitle{max-width:70ch;margin:18px auto 0;color:var(--ivory-soft);line-height:1.75;font-size:15px;text-wrap:balance}
.subtitle b{color:var(--ivory);font-weight:500}

.main{padding:28px 26px 46px}
.vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--faint-2);border:1px solid var(--faint);border-radius:var(--radius);overflow:hidden}
.vital{background:var(--panel-2);padding:15px 17px}
.vital .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.vital .v{font-family:var(--mono);font-size:21px;margin-top:6px;font-variant-numeric:tabular-nums}
.vital .v.state{color:var(--sage);display:inline-flex;align-items:center;gap:8px;font-size:15px}

.holding{font-family:var(--mono);font-size:13px;color:var(--muted);margin:16px 2px 12px;overflow-x:auto}
.holding:last-of-type{margin-bottom:36px}
.holding code{color:var(--ivory)}
a.jlink{color:var(--blue-soft);border-bottom:1px solid transparent}
a.jlink:hover,a.jlink:focus-visible{border-color:var(--blue-soft);outline:none}

h2{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;display:flex;align-items:baseline;gap:12px}
h2 .n{color:var(--blue)}
h2.reach .n{color:var(--copper)}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 18px;max-width:74ch;line-height:1.6}
.sub code{font-family:var(--mono);font-size:12px;color:var(--ivory-soft)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:13px;margin-bottom:8px}
.card{background:var(--panel);border:1px solid var(--faint);border-radius:var(--radius);padding:17px 18px 15px}
.card .name{font-size:14px;color:var(--ivory);font-weight:500}
.card .task{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.card .prog{font-family:var(--mono);font-size:15px;margin-top:13px;overflow-x:auto;white-space:pre;padding-bottom:2px}
.card .foot{margin-top:13px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:3px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.solved{border-color:rgba(15,125,255,.28);background:linear-gradient(rgba(15,125,255,.06),transparent 62%),var(--panel)}
.solved .prog{color:var(--blue-soft)}
.solved .chip{color:var(--sage);border:1px solid rgba(143,161,125,.4)}
.partial .prog{color:var(--muted)}
.partial .chip{color:var(--copper);border:1px solid rgba(176,138,60,.35)}
/* expandable cards -> the actual test cases behind the score */
details.card{cursor:pointer}
details.card>summary{list-style:none;display:block}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--radius)}
.hint{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
details[open] .hint{color:var(--ivory-soft)}
.cases{margin-top:14px;border-top:1px solid var(--faint);padding-top:10px;overflow-x:auto}
.cases table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.cases th{color:var(--muted);text-align:right;font-weight:400;padding:0 10px 7px;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.cases td{text-align:right;padding:3px 10px;color:var(--ivory-soft);border-top:1px solid var(--faint-2)}
.cases tr.fail td{color:var(--copper)}
.mark{margin-left:7px}
.mark.ok{color:var(--sage)}
.mark.no{color:var(--copper)}

.divider{height:1px;background:var(--faint);margin:40px 0}
.note{color:var(--muted);font-size:14px;max-width:72ch;line-height:1.7}
.note p{margin:0 0 12px}
.note b{color:var(--ivory);font-weight:500}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:16px 22px;border-top:1px solid var(--faint);color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.footer .fresh{color:var(--ivory-soft)}
.loading{padding:60px 22px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:13px}