:root {
  color-scheme: dark;
  --ink: #fffdf7;
  --muted: rgba(255, 253, 247, 0.62);
  --faint: rgba(255, 253, 247, 0.13);
  --panel: rgba(255, 253, 247, 0.035);
  --deep: #061613;
  --teal: #6bcdbf;
  --blue: #71b7d8;
  --amber: #f0b18b;
  --red: #ef8b7d;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { background: var(--deep); }

body {
  margin: 0;
  background:
    radial-gradient(circle at 82% 8%, rgba(107, 205, 191, 0.1), transparent 27rem),
    linear-gradient(180deg, #071b17, var(--deep));
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
}

button,
input { font: inherit; }

button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.demo-shell {
  width: min(1380px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 5.2rem) 0 3rem;
}

.demo-heading { max-width: 1050px; }

.eyebrow,
.card-heading p,
.condition-description > p:first-child,
.identity-card > div:first-child p,
.poset-card > div:first-child p {
  margin: 0 0 0.6rem;
  color: var(--amber);
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

h1,
h2,
p { margin-top: 0; }

h1 {
  max-width: 1000px;
  margin-bottom: 1.2rem;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 5vw, 4.9rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.lede {
  max-width: 940px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  line-height: 1.75;
}

.control-deck {
  display: grid;
  grid-template-columns: minmax(230px, 0.34fr) minmax(0, 0.66fr);
  gap: 1rem;
  margin-top: 2.2rem;
}

.probability-control,
.preset-control {
  min-width: 0;
  margin: 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--faint);
  background: var(--panel);
}

.probability-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.7rem 1rem;
}

.probability-control span,
.preset-control legend {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.probability-control strong {
  color: var(--teal);
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 400;
}

.probability-control input { grid-column: 1 / -1; width: 100%; accent-color: var(--teal); }
.preset-control legend { padding: 0 0.35rem; }
.preset-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }

.preset-buttons button {
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 253, 247, 0.16);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.preset-buttons button:hover { border-color: rgba(240, 177, 139, 0.58); color: var(--ink); }
.preset-buttons button[aria-pressed="true"] { border-color: var(--amber); background: rgba(240, 177, 139, 0.1); color: var(--ink); }

.laboratory {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(320px, 0.66fr);
  gap: 1rem;
  margin-top: 1rem;
}

.lattice-card,
.readout-card,
.identity-card,
.poset-card,
.exact-table-wrap {
  border: 1px solid var(--faint);
  background: rgba(255, 253, 247, 0.026);
}

.lattice-card { min-width: 0; padding: clamp(1rem, 2.5vw, 1.8rem); }

.card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.card-heading h2,
.condition-description h2,
.identity-card h2,
.poset-card h2 {
  margin-bottom: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}

.legend { display: flex; flex-wrap: wrap; gap: 0.8rem; color: var(--muted); font-size: 0.73rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.38rem; }
.key { display: inline-block; width: 13px; height: 13px; background: #18322d; }
.key-f { border: 2px solid var(--blue); }
.key-b { border: 1px solid var(--amber); background: repeating-linear-gradient(45deg, #18322d 0 3px, var(--amber) 3px 4px); }
.key-both { border: 2px solid var(--blue); background: repeating-linear-gradient(45deg, rgba(107,205,191,.55) 0 3px, var(--amber) 3px 4px); }

#lattice { display: block; width: 100%; min-height: 390px; margin-top: 0.8rem; overflow: visible; }
.lattice-edge { stroke: rgba(255, 253, 247, 0.12); stroke-width: 1.2; }
.outcome-node circle { fill: #18322d; stroke: rgba(255, 253, 247, 0.27); stroke-width: 1.4; transition: r 180ms ease, fill 180ms ease, stroke 180ms ease; }
.outcome-node.in-f circle { stroke: var(--blue); stroke-width: 3; }
.outcome-node.in-b circle { fill: url(#condition-hatch); }
.outcome-node.in-both circle { fill: rgba(107, 205, 191, 0.52); stroke: var(--blue); stroke-width: 3; filter: url(#soft-glow); }
.outcome-node text { fill: rgba(255, 253, 247, 0.9); font-family: var(--mono); font-size: 13px; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(6, 22, 19, 0.9); stroke-width: 3px; stroke-linejoin: round; }
.rank-label { fill: rgba(255, 253, 247, 0.34); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.mass-note { margin: 0.7rem 0 0; color: rgba(255, 253, 247, 0.45); font-size: 0.75rem; }

.readout-card { padding: clamp(1.1rem, 2.6vw, 1.8rem); }
.condition-description { min-height: 148px; padding-bottom: 1.2rem; border-bottom: 1px solid var(--faint); }
.condition-description > p:last-child { margin: 0.9rem 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.7; }
.probability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 1rem 0 0; border-top: 1px solid var(--faint); border-left: 1px solid var(--faint); }
.probability-grid > div { padding: 0.9rem; border-right: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.probability-grid dt { color: var(--muted); font-family: var(--mono); font-size: 0.69rem; }
.probability-grid dd { margin: 0.22rem 0 0; font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); }
.probability-grid .featured { background: rgba(107, 205, 191, 0.08); }
.probability-grid .featured dd { color: var(--teal); }
.surplus-panel { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--faint); }
.surplus-panel > span { color: var(--amber); font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; }
.surplus-panel strong { display: block; margin-top: 0.35rem; font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
.surplus-panel strong b { color: var(--teal); font-weight: 400; }
.surplus-panel p { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.72rem; }

.transfer-status { display: flex; gap: 0.8rem; align-items: center; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(107, 205, 191, 0.38); background: rgba(107, 205, 191, 0.07); }
.transfer-status.negative { border-color: rgba(239, 139, 125, 0.48); background: rgba(239, 139, 125, 0.08); }
.transfer-status.equal { border-color: rgba(113, 183, 216, 0.42); background: rgba(113, 183, 216, 0.07); }
.status-mark { display: grid; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; color: var(--teal); place-items: center; }
.negative .status-mark { color: var(--red); }
.equal .status-mark { color: var(--blue); }
.transfer-status strong { font-size: 0.87rem; font-weight: 600; }
.transfer-status p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.76rem; }

.identity-card,
.poset-card { display: grid; grid-template-columns: minmax(240px, 0.36fr) minmax(0, 0.64fr); gap: 2rem; margin-top: 1rem; padding: clamp(1.2rem, 3vw, 2rem); }
.identity-flow { display: grid; grid-template-columns: auto 30px minmax(200px, 1fr) 30px minmax(190px, .8fr); align-items: center; gap: 0.6rem; }
.identity-flow span,
.identity-flow strong { padding: 0.9rem 1rem; border: 1px solid var(--faint); font-family: var(--serif); font-size: 1.05rem; font-weight: 400; text-align: center; }
.identity-flow strong { border-color: rgba(107, 205, 191, 0.45); color: var(--teal); background: rgba(107, 205, 191, 0.06); }
.identity-flow i,
.poset-flow > i { color: var(--amber); font-style: normal; text-align: center; }
.poset-flow { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: stretch; gap: 0.6rem; }
.poset-flow article { padding: 1rem; border: 1px solid var(--faint); }
.poset-flow article span { color: var(--amber); font-family: var(--mono); font-size: 0.61rem; text-transform: uppercase; letter-spacing: .07em; }
.poset-flow article strong { display: block; margin-top: .55rem; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }
.poset-flow article p { margin: .7rem 0 0; color: var(--muted); font-size: .78rem; }

.exact-table-wrap { margin-top: 1rem; }
.exact-table-wrap summary { padding: 1rem 1.2rem; color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.table-scroll { overflow-x: auto; border-top: 1px solid var(--faint); }
table { width: 100%; border-collapse: collapse; font-size: .78rem; }
th, td { padding: .65rem .8rem; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
th { color: var(--amber); font-family: var(--mono); font-weight: 400; }
td { color: var(--muted); }

@media (max-width: 980px) {
  .laboratory,
  .identity-card,
  .poset-card { grid-template-columns: 1fr; }
  .condition-description { min-height: 0; }
  .identity-flow { grid-template-columns: 1fr; }
  .identity-flow i { transform: rotate(90deg); }
}

@media (max-width: 720px) {
  .demo-shell { width: min(100% - 1rem, 1380px); padding-top: 1.5rem; }
  .control-deck { grid-template-columns: 1fr; }
  .preset-buttons { grid-template-columns: 1fr; }
  .card-heading { display: grid; }
  #lattice { min-height: 310px; }
  .poset-flow { grid-template-columns: 1fr; }
  .poset-flow > i { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}