:root {
  --navy: #061b35;
  --navy-2: #0b2947;
  --cream: #f6ebce;
  --coral: #ff654d;
  --cyan: #2db9da;
  --yellow: #ffc64b;
  --muted: #a8bfd1;
  --ink: #031426;
  --green: #72dfb3;
  --display: "Avenir Next", "Futura", "Trebuchet MS", sans-serif;
  --body: "Avenir Next", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 90% 10%, rgb(45 185 218 / 13%), transparent 28%),
    radial-gradient(circle at 10% 80%, rgb(255 101 77 / 10%), transparent 32%),
    var(--navy);
  color: var(--cream);
  font-family: var(--body);
}

a { color: inherit; }
button, input, textarea, select { font: inherit; }

button {
  touch-action: manipulation;
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.lab-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
}

.lab-nav {
  display: flex;
  padding: 22px 0;
  align-items: center;
  justify-content: space-between;
}

.lab-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 800;
}

.lab-nav a:hover { color: var(--cyan); }

.lab-language {
  display: flex;
  gap: 8px;
}

.lab-language a {
  padding: 7px 11px;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 99px;
}

.lab-language a.is-active {
  background: var(--cyan);
  color: var(--ink);
}

.lab-hero {
  padding: 50px 0 42px;
}

.lab-kicker {
  margin: 0 0 15px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lab-hero h1, .experiment-header h1 {
  max-width: 960px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(52px, 7vw, 100px);
  letter-spacing: -.055em;
  line-height: .96;
}

.lab-hero > p:last-child, .experiment-header > p:last-child {
  max-width: 820px;
  margin: 25px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.5;
}

.simulation-note {
  margin: 24px 0 0;
  padding: 15px 18px;
  border-left: 4px solid var(--yellow);
  border-radius: 0 10px 10px 0;
  background: rgb(255 198 75 / 8%);
  color: var(--cream);
  line-height: 1.4;
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 30px 0 90px;
}

.lab-card {
  display: flex;
  min-height: 260px;
  padding: 28px;
  flex-direction: column;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 20px;
  background: rgb(255 255 255 / 6%);
  text-decoration: none;
  transition: transform 170ms ease, border-color 170ms ease;
}

.lab-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
}

.lab-card span {
  color: var(--yellow);
  font-weight: 1000;
}

.lab-card h2 {
  margin: 30px 0 14px;
  font-size: clamp(25px, 2.6vw, 38px);
}

.lab-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.lab-card b {
  margin-top: auto;
  padding-top: 25px;
  color: var(--cyan);
}

.experiment-header {
  padding: 38px 0 28px;
}

.experiment-header h1 {
  font-size: clamp(45px, 6vw, 82px);
}

.experiment-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 24px;
  padding-bottom: 70px;
}

.control-panel, .result-panel, .prompt-panel, .proof-steps {
  padding: 25px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 20px;
  background: rgb(255 255 255 / 6%);
}

.control-panel h2, .result-panel h2, .prompt-panel h2, .proof-steps h2 {
  margin: 0 0 20px;
  font-size: 24px;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.field label {
  color: var(--muted);
  font-weight: 800;
}

.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 11px;
  background: #031426;
  color: var(--cream);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.45;
}

.run-button, .copy-button, .secondary-button, .reveal-button {
  width: 100%;
  padding: 14px 19px;
  border: 0;
  border-radius: 11px;
  background: var(--coral);
  color: var(--ink);
  cursor: pointer;
  font-weight: 1000;
}

.copy-button {
  margin-top: 12px;
  background: var(--cyan);
}

.secondary-button {
  border: 1px solid rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 8%);
  color: var(--cream);
}

.reveal-button {
  border: 1px solid var(--yellow);
  background: transparent;
  color: var(--yellow);
}

.run-button:hover, .copy-button:hover, .secondary-button:hover, .reveal-button:hover {
  filter: brightness(1.12);
}

.button-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.terminal {
  min-height: 260px;
  padding: 18px;
  overflow: auto;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 14px;
  background: #02111f;
  color: var(--cream);
  font: 14px/1.55 "SFMono-Regular", Consolas, monospace;
}

.terminal p { margin: 0 0 7px; }
.terminal .plan { color: #bcecff; }
.terminal .run { color: var(--cream); }
.terminal .fail { color: #ff8a78; }
.terminal .diagnosis { color: var(--yellow); }
.terminal .pass { color: var(--green); }
.terminal .result { color: var(--yellow); font-weight: 900; }

.formula-result {
  display: block;
  width: 100%;
  margin-top: 15px;
  padding: 17px;
  border: 2px solid var(--yellow);
  border-radius: 12px;
  background: rgb(255 198 75 / 7%);
  font-size: clamp(18px, 1.8vw, 27px);
  font-weight: 900;
}

.equivalence-note,
.evidence-panel {
  margin-top: 15px;
  padding: 15px 17px;
  border-radius: 12px;
  line-height: 1.5;
}

.equivalence-note {
  border: 1px solid rgb(45 185 218 / 55%);
  background: rgb(45 185 218 / 8%);
  font-family: "SFMono-Regular", Consolas, monospace;
}

.evidence-panel {
  border-left: 4px solid var(--cyan);
  background: rgb(255 255 255 / 5%);
}

.evidence-panel p {
  margin: 0;
}

.evidence-panel p + p {
  margin-top: 10px;
}

.evidence-panel strong {
  color: var(--yellow);
}

.prompt-panel {
  grid-column: 1 / -1;
}

.prompt-output {
  width: 100%;
  min-height: 135px;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 12px;
  background: #031426;
  color: var(--cream);
  font: 15px/1.5 "SFMono-Regular", Consolas, monospace;
  resize: vertical;
}

.proof-steps {
  display: grid;
  gap: 10px;
}

.proof-option {
  display: flex;
  padding: 13px;
  gap: 12px;
  align-items: center;
  border-radius: 10px;
  background: rgb(255 255 255 / 5%);
  cursor: pointer;
}

.proof-option:has(input:checked) {
  outline: 2px solid var(--cyan);
  background: rgb(45 185 218 / 10%);
}

.check-option {
  display: flex;
  margin: 6px 0 18px;
  padding: 13px;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 10px;
  background: rgb(255 255 255 / 5%);
  color: var(--cream);
  cursor: pointer;
  line-height: 1.4;
}

.check-option input {
  margin-top: 3px;
}

.noscript-message {
  width: min(760px, calc(100% - 36px));
  margin: 10vh auto;
  padding: 28px;
  border: 2px solid var(--yellow);
  border-radius: 18px;
  background: var(--navy-2);
  color: var(--cream);
  font: 18px/1.55 var(--body);
}

.noscript-message h1 {
  margin-top: 0;
  font-family: var(--display);
}

.noscript-message a {
  color: var(--cyan);
  font-weight: 800;
}

.lab-footer {
  display: flex;
  padding: 28px 0 36px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgb(255 255 255 / 12%);
  color: var(--muted);
  font-size: 12px;
}

.lab-footer a { color: var(--cyan); }

@media (max-width: 820px) {
  .lab-grid, .experiment-layout { grid-template-columns: 1fr; }
  .prompt-panel { grid-column: auto; }
  .button-group { grid-template-columns: 1fr; }
  .lab-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}