:root {
  --void:#020617;
  --deep:#04122a;
  --panel:#071a36;
  --line:#16325c;
  --gold:#e2c36a;
  --gold2:#f4e4a6;
  --cyan:#7ee0f2;
  --ink:#eaf3ff;
  --mute:#8aa4c4;
  --leak:#8b1e2d;
  --ok:#0f6a4d;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Calibri, "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 500px at 10% -10%, #0a2a5c 0%, transparent 55%),
    radial-gradient(900px 400px at 100% 0%, #12305a 0%, transparent 50%),
    var(--void);
  min-height: 100vh;
}
a { color: var(--gold); font-weight: 700; text-decoration: none; }
header.top {
  position: sticky; top: 0; z-index: 12;
  backdrop-filter: blur(14px);
  background: rgba(2,6,23,.9);
  border-bottom: 1px solid var(--line);
  padding: .75rem 1.1rem .55rem;
}
.brand { letter-spacing: .16em; font-size: .7rem; color: var(--cyan); font-weight: 700; }
header.top h1 { margin: .15rem 0 .55rem; font-size: 1.22rem; color: var(--gold); }
.tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.tabs a, .tabs button {
  background: #061428; color: var(--ink); border: 1px solid var(--line);
  padding: .55rem .85rem; font-weight: 800; font-size: .82rem; cursor: pointer;
  font-family: inherit;
}
.tabs a.on, .tabs button.on { background: var(--gold); color: #071018; border-color: var(--gold); }
.sharebox { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .45rem; }
.sharebox input {
  background: #020617; color: var(--gold2); border: 1px solid var(--line);
  padding: .55rem .7rem; min-width: min(100%, 22rem); font-size: .82rem;
}
button.gold, a.btn {
  background: linear-gradient(#f0d78a,#c9a227); color: #071018; font-weight: 800;
  border: 0; padding: .65rem 1rem; cursor: pointer; font-family: inherit;
}
.wrap { max-width: 74rem; margin: 0 auto; padding: 1rem 1rem 4rem; }
section.panel { display: none; }
section.panel.show { display: block; }
.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; margin-bottom: 1rem;
}
.card {
  background: linear-gradient(180deg, #0a2148, #061530);
  border: 1px solid var(--line); padding: 1.15rem 1.2rem;
}
.card h2 { margin: 0 0 .5rem; color: var(--gold2); font-size: 1.55rem; line-height: 1.2; }
.card p, .note { color: var(--mute); font-size: 1.02rem; line-height: 1.5; }
.voice {
  border: 1px solid #3dce8e;
  background: linear-gradient(90deg, #0b2a4a, #123d2a 55%, #0b2a4a);
  padding: 1rem 1.1rem; font-size: 1.12rem; font-weight: 700; color: #d8ffe9; margin: 1rem 0;
}
.glass {
  min-height: 14rem; border: 1px solid var(--gold); background:
    radial-gradient(120px 80px at 50% 40%, #1a4a6a 0%, #020617 70%);
  display: grid; place-items: center; text-align: center; padding: 1rem; position: relative; overflow: hidden;
  box-shadow: inset 0 0 40px rgba(226,195,106,.12);
}
.glass .tip {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  color: var(--gold2); font-size: 1.05rem; letter-spacing: .04em;
}
.glass .gone { opacity: 0; transition: opacity .8s; }
.glass .meta { color: var(--cyan); font-size: .78rem; letter-spacing: .14em; margin-bottom: .4rem; }
.takes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 1rem 0; }
.takes > div {
  background: var(--panel); border: 1px solid var(--line); padding: 1rem .9rem; min-height: 7.6rem;
}
.takes .taco { border-color: #3d6a88; }
.takes .wow { background: linear-gradient(180deg, #e2c36a, #b8902a); color: #071018; }
.takes b { display: block; font-size: .68rem; letter-spacing: .12em; color: var(--cyan); margin-bottom: .35rem; }
.takes .wow b { color: #3a2a00; }
.takes .n { font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.takes p { margin: .35rem 0 0; font-size: .82rem; color: var(--mute); }
.takes .wow p { color: #3a2a00; }
.sliders { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
label.slide { display: block; background: rgba(7,26,54,.9); border: 1px solid var(--line); padding: .7rem .75rem; }
label.slide span { display: flex; justify-content: space-between; font-size: .75rem; color: var(--cyan); margin-bottom: .3rem; }
label.slide strong { color: var(--gold); }
input[type=range] { width: 100%; accent-color: var(--gold); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: .8rem; }
th, td { border: 1px solid var(--line); padding: .5rem .55rem; }
th { background: #0b1e40; color: var(--gold); text-align: left; font-size: .72rem; letter-spacing: .1em; }
td.n { text-align: right; white-space: nowrap; }
td.pos { color: #9be7c4; }
tr.hl td { background: var(--ok); color: #fff; font-weight: 800; }
tr.leak td { background: var(--leak); color: #fff; }
tr.taco td { background: #12344d; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.two > div { padding: 1rem; background: var(--panel); }
.two > div + div { border-left: 1px solid var(--line); }
.two h3 { margin: 0 0 .5rem; color: var(--gold); font-size: .72rem; letter-spacing: .12em; }
.two.canvas-row .wrong {
  background: linear-gradient(180deg, #3a1212, #1a0808);
}
.two.canvas-row .wrong h3 { color: #f0c0a0; }
canvas {
  width: 100%; height: auto; image-rendering: pixelated;
  border: 1px solid var(--gold); background: #04122a; display: block;
}
.wrong canvas { border-color: #e8a090; background: #2a0c0c; }
.readout { font-size: .88rem; margin-top: .6rem; min-height: 4.2rem; color: var(--mute); }
.wrong .readout { color: #ddd; }
pre {
  border: 1px solid var(--line); padding: .85rem; overflow: auto; font-size: .82rem;
  background: #020617; color: var(--gold2);
}
.row { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.q { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.q div { border: 1px solid var(--line); padding: .85rem; background: #071a36; }
.q b { display: block; color: var(--gold); letter-spacing: .1em; font-size: .7rem; margin-bottom: .35rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.chip { border: 1px solid var(--line); background: #061428; color: var(--ink); padding: .55rem .85rem; cursor: pointer; font-weight: 700; }
.chip.on { background: var(--gold); color: #071018; border-color: var(--gold); }
.warn { background: #3a1212; color: #f4efe4; padding: .75rem .9rem; font-weight: 700; }
footer.desk { color: var(--mute); font-size: .8rem; margin-top: 1.6rem; }
@media (max-width: 900px) {
  .hero, .takes, .sliders, .q, .two { grid-template-columns: 1fr; }
  .two > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .sharebox input { min-width: 0; width: 100%; }
}