:root {
  color-scheme:light;
  --paper:#f7f7f2;
  --ink:#24352f;
  --muted:#61726b;
  --line:#dce2d8;
  --blue:#285cda;
  --orange:#c75c25;
  --green:#24664c;
  --pale:#edf1e7;
  font-family:"Avenir Next","PingFang TC","Microsoft JhengHei",sans-serif;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  user-select:none;
  -webkit-user-select:none
}
button,input,select {
  font:inherit
}
button,select {
  cursor:pointer
}
button {
  color:inherit;
  border:0;
  background:none;
  touch-action:manipulation
}
button:disabled {
  opacity:.3;
  cursor:default
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {
  outline:3px solid #df9b32;
  outline-offset:4px
}
button:active:not(:disabled) {
  transform:scale(.95)
}
button {
  transition:background .2s,color .2s,transform .18s
}
a {
  color:inherit;
  text-decoration:none
}
h1,h2,p {
  margin:0
}
h2 {
  font-size:16px;
  font-weight:600
}
small {
  font-size:12px
}
.math,.basis,.matrix,.ket,.brand-mark {
  font-family:"STIX Two Math","Cambria Math","Times New Roman",serif
}
.lab {
  height:100dvh;
  min-height:850px;
  max-width:1880px;
  margin:auto;
  padding:0 38px;
  display:grid;
  grid-template-rows:62px 90px 76px minmax(310px,1fr) 194px 68px;
  overflow:hidden
}
.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:20px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:17px;
  font-weight:700;
  letter-spacing:.04em
}
.brand-mark {
  font-size:35px;
  font-style:italic;
  color:var(--green);
  line-height:1
}
.brand small {
  display:block;
  font-size:9px;
  letter-spacing:.23em;
  font-weight:500;
  margin-top:3px
}
.header-note {
  font-size:13px;
  letter-spacing:.1em;
  color:var(--muted)
}
.header-tools {
  display:flex;
  align-items:center;
  gap:8px
}
.geometry-entry {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:4px 8px;
  color:var(--green);
  font-size:12px;
  white-space:nowrap
}
@media(max-width:460px) {
  .header {gap:6px}
  .header .geometry-entry {padding:4px;font-size:11px}
  .header .brand small {letter-spacing:.12em}
}
.text-button {
  font-size:13px;
  min-height:40px;
  padding:8px 12px;
  border-radius:6px
}
.text-button:hover,.icon-button:hover:not(:disabled) {
  background:var(--pale)
}
.icon-button {
  min-width:44px;
  min-height:44px;
  font-size:25px;
  border-radius:50%;
  display:inline-grid;
  place-items:center
}
.intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.eyebrow {
  font-size:11px;
  color:var(--green);
  letter-spacing:.15em;
  margin-bottom:5px;
  font-weight:600
}
h1 {
  font-size:clamp(26px,2.65vw,42px);
  letter-spacing:-.035em;
  font-weight:600
}
.intro p {
  font-size:15px;
  line-height:1.65;
  max-width:410px;
  color:var(--muted)
}
.circuit {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:8px 10%;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.circuit:before {
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  height:1px;
  background:#cad4c7
}
.gate {
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:52px
}
.gate-symbol {
  display:grid;
  place-items:center;
  background:var(--paper);
  border:1px solid #ccd5c7;
  border-radius:10px;
  font:25px "Times New Roman",serif;
  min-width:49px;
  height:48px;
  transition:all .35s
}
.gate-label {
  position:absolute;
  font-size:10px;
  top:51px;
  color:var(--muted);
  white-space:nowrap;
  letter-spacing:.03em
}
.gate.active .gate-symbol {
  color:white;
  background:var(--green);
  border-color:var(--green);
  box-shadow:0 5px 14px #2e563820;
  transform:translateY(-3px)
}
.gate.completed .gate-symbol {
  border-color:#9fb69c
}
.gate:hover .gate-symbol {
  box-shadow:0 0 0 4px #c9d5bd44
}
.gate.measure-gate .gate-symbol {
  border-style:dashed;
  color:var(--muted);
  font-size:18px;
  min-width:44px
}
.gate.measure-gate.enabled .gate-symbol {
  color:var(--green);
  border-style:solid;
  background:#e6eddf
}
.gate.measure-gate.active .gate-symbol {
  color:white;
  background:var(--green)
}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(350px,1fr);
  min-height:0
}
.visual {
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:16px 26px 8px 0;
  position:relative
}
.section-heading {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:25px
}
.section-heading h2 {
  font-size:14px;
  letter-spacing:.025em
}
.visual-key {
  display:flex;
  align-items:center;
  font-size:12px;
  gap:6px;
  color:var(--muted)
}
.dot {
  width:6px;
  height:6px;
  border-radius:50%;
  display:inline-block
}
.dot.orange {
  margin-left:9px
}
.blue {
  background:var(--blue)
}
.orange {
  background:var(--orange)
}
.subtle {
  margin-left:auto;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap
}
.scene-wrap {
  position:relative;
  flex:1;
  min-height:138px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column
}
#scene {
  width:100%;
  height:100%;
  max-height:320px;
  min-height:132px;
  overflow:visible
}
.scene-caption {
  font-size:12px;
  color:var(--muted);
  text-align:center;
  position:absolute;
  bottom:2px;
  left:0;
  right:0;
  line-height:1.4;
  pointer-events:none
}
.state-strip {
  display:flex;
  gap:14px;
  align-items:center;
  min-height:48px;
  margin-top:7px;
  padding:3px 0;
  border-top:1px solid var(--line)
}
.state-label {
  font:23px "Times New Roman",serif;
  white-space:nowrap
}
.ket {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:clamp(18px,1.6vw,25px);
  flex:1;
  white-space:nowrap
}
.ket-term .basis {
  margin-left:5px
}
.plus {
  font-size:18px;
  color:var(--muted)
}
.color-0 {
  color:var(--blue)
}
.color-1 {
  color:var(--orange)
}
.density-panel {
  position:absolute;
  bottom:108px;
  right:26px;
  background:#fffef9;
  border:1px solid var(--line);
  box-shadow:0 10px 32px #24352f1c;
  padding:18px;
  z-index:3;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:20px;
  border-radius:10px
}
.density-panel[hidden] {
  display:none
}
.phase-control {
  padding:5px 0 9px
}
.phase-heading {
  display:flex;
  align-items:center;
  gap:12px
}
.phase-heading label {
  font-size:14px
}
.phase-heading .math {
  font-size:22px
}
.phase-heading output {
  font-size:25px;
  letter-spacing:-.04em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
  min-width:65px
}
.presets {
  margin-left:auto;
  display:flex;
  gap:7px
}
.presets button {
  border-radius:4px;
  padding:4px 10px;
  min-height:32px;
  font-size:12px;
  background:var(--pale)
}
.presets button[aria-pressed=true] {
  color:white;
  background:var(--green)
}
input[type=range] {
  width:100%;
  margin:8px 0 0;
  height:24px;
  accent-color:var(--green);
  cursor:ew-resize;
  background:transparent
}
input[type=range]::-webkit-slider-runnable-track {
  height:3px;
  background:linear-gradient(90deg,#dbe6d2,#38734a,#dbe6d2);
  border-radius:4px
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  margin-top:-6px;
  width:17px;
  height:17px
}
.range-labels {
  display:flex;
  justify-content:space-between;
  font:12px "Times New Roman",serif;
  color:var(--muted);
  padding:0 4px
}
.explanation {
  border-left:1px solid var(--line);
  padding:16px 0 10px 27px;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:auto;
  scrollbar-width:thin
}
.event-label {
  margin-left:auto;
  font-size:10px;
  color:var(--green);
  font-family:monospace;
  letter-spacing:.02em
}
.derivation {
  flex:1;
  padding:12px 0 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:120px
}
.derivation h3 {
  font-size:23px;
  font-weight:500;
  margin:0 0 8px;
  letter-spacing:-.03em
}
.derivation p {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin-top:8px
}
.equation {
  display:flex;
  align-items:center;
  gap:12px;
  font:23px "Times New Roman",serif;
  flex-wrap:wrap;
  min-height:64px
}
.matrix {
  display:inline-flex;
  vertical-align:middle;
  position:relative;
  flex-direction:column;
  gap:8px;
  padding:6px 12px;
  flex-shrink:0;
  font-size:19px;
  white-space:nowrap;
  min-width:36px
}
.matrix:before,.matrix:after {
  position:absolute;
  top:0;
  bottom:0;
  content:"";
  width:6px;
  border-top:1.5px solid;
  border-bottom:1.5px solid
}
.matrix:before {
  left:0;
  border-left:1.5px solid
}
.matrix:after {
  right:0;
  border-right:1.5px solid
}
.matrix-row {
  display:flex;
  gap:20px;
  justify-content:space-around
}
.matrix-row span {
  min-width:18px;
  text-align:center
}
.matrix.numeric {
  font-size:17px
}
.derivation .result-line {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-size:16px
}
.derivation .term {
  border-radius:4px;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  background:#e6ebf8;
  color:var(--blue);
  font:17px "Times New Roman",serif
}
.derivation .term[data-component="1"] {
  background:#f4e8df;
  color:var(--orange)
}
.formula-symbolic {
  font:19px "Times New Roman",serif;
  margin:10px 0 0;
  line-height:1.6
}
.fraction {
  display:inline-flex;
  flex-direction:column;
  text-align:center;
  vertical-align:middle;
  font-size:.8em;
  line-height:1.35;
  margin:0 3px
}
.fraction>span:first-child {
  border-bottom:1px solid;
  padding:0 4px
}
.mixed-symbol {
  font-size:35px
}
.measurement {
  border-top:1px solid var(--line);
  padding:10px 0;
  flex-shrink:0
}
.switch-label {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:14px;
  min-height:42px
}
.switch-label>span:first-child {
  flex:1
}
.switch-label small {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:4px
}
.switch-label input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.switch {
  width:43px;
  height:26px;
  border-radius:20px;
  background:#d4ddcf;
  position:relative;
  transition:background .25s
}
.switch:after {
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:18px;
  height:18px;
  background:white;
  border-radius:50%;
  box-shadow:0 1px 4px #0002;
  transition:transform .25s
}
.switch-label input:checked+.switch {
  background:var(--green)
}
.switch-label input:checked+.switch:after {
  transform:translateX(17px)
}
.switch-label input:focus-visible+.switch {
  outline:3px solid #df9b32;
  outline-offset:4px
}
.branches {
  padding-top:8px
}
.segmented {
  display:flex;
  background:var(--pale);
  padding:3px;
  border-radius:7px
}
.segmented button {
  flex:1;
  min-height:34px;
  border-radius:5px;
  font-size:12px
}
.segmented button[aria-pressed=true] {
  background:white;
  box-shadow:0 1px 5px #24352f15;
  color:var(--green)
}
.branches p {
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  margin-top:7px
}
.probabilities {
  padding-top:9px;
  border-top:1px solid var(--line);
  flex-shrink:0
}
.probability-top {
  display:flex;
  justify-content:space-between;
  margin-bottom:7px;
  font-size:12px
}
.theory-label {
  color:var(--muted);
  font-size:11px
}
.prob-row {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:27px
}
.prob-row>.basis {
  font-size:22px
}
.bar-track {
  height:6px;
  flex:1;
  background:#e5e9e1;
  border-radius:10px;
  overflow:hidden
}
.bar-track i {
  display:block;
  height:100%;
  width:0;
  transition:width .45s cubic-bezier(.22,1,.36,1);
  border-radius:10px
}
.prob-row strong {
  width:57px;
  text-align:right;
  font-size:15px;
  font-weight:500;
  font-variant-numeric:tabular-nums
}
.sampling {
  border-top:1px solid var(--line);
  padding:12px 0 4px;
  min-width:0
}
.sample-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px
}
.sample-heading h2 {
  font-size:16px;
  font-weight:500
}
.sample-heading p {
  color:var(--muted);
  font-size:11px;
  margin-top:4px
}
.sample-actions {
  display:flex;
  gap:10px;
  align-items:center
}
.primary-button {
  background:var(--green);
  color:white;
  padding:10px 17px;
  min-height:44px;
  border-radius:7px;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:20px;
  white-space:nowrap
}
.primary-button:hover {
  background:#174732
}
.primary-button span {
  font-size:20px
}
.sample-body {
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:30px;
  align-items:center;
  height:126px
}
#samples {
  width:100%;
  height:100%;
  overflow:visible
}
.sample-stats {
  border-left:1px solid var(--line);
  padding-left:24px;
  font-variant-numeric:tabular-nums
}
.sample-counter {
  display:flex;
  align-items:baseline;
  gap:8px
}
.sample-counter strong {
  font-size:31px;
  font-weight:500;
  letter-spacing:-.04em
}
.sample-counter>span {
  color:var(--muted);
  font-size:12px
}
.counts {
  display:flex;
  gap:22px;
  font-size:12px;
  margin:3px 0
}
.counts b {
  font-size:16px;
  margin-left:8px;
  font-weight:500
}
#sample-status {
  font-size:11px;
  color:var(--muted);
  margin-top:6px
}
#seed-label {
  font-size:9px;
  color:var(--muted);
  margin-top:4px;
  font-family:monospace
}
.transport {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  gap:12px
}
.transport-left,.transport-right {
  display:flex;
  align-items:center;
  gap:14px;
  flex:1;
  font-size:12px
}
.transport-right {
  justify-content:flex-end
}
.input-choice {
  display:flex;
  align-items:center;
  gap:5px
}
.transport select {
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
  padding:6px;
  border-radius:5px;
  min-height:36px;
  font-size:14px
}
.playback {
  display:flex;
  align-items:center;
  gap:16px
}
.play-button {
  width:45px;
  height:45px;
  border-radius:50%;
  background:var(--ink);
  color:white;
  font-size:17px
}
.play-button:hover {
  background:var(--green)
}
#step-count {
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  min-width:36px
}
.shortcut {
  font-size:10px;
  color:var(--muted)
}
.toast {
  position:fixed;
  bottom:82px;
  left:50%;
  transform:translate(-50%,12px);
  opacity:0;
  pointer-events:none;
  background:var(--ink);
  color:white;
  padding:12px 20px;
  border-radius:8px;
  font-size:13px;
  box-shadow:0 8px 28px #0002;
  transition:all .25s;
  z-index:20;
  max-width:90vw
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.mobile-tabs {
  display:none
}
#scene text,#samples text {
  font-family:"Avenir Next","PingFang TC",sans-serif
}
.sample-cell {
  transition:fill .22s
}
.reduced .bar-track i {
  transition-duration:.12s
}
.reduced .gate.active .gate-symbol {
  transform:none
}
svg .component-glow {
  transition:opacity .3s
}
::selection {
  background:transparent
}
@media(min-height:1000px) and (min-width:901px) {
  .lab {
    grid-template-rows:68px 110px 84px minmax(400px,1fr) 220px 78px
  }
  .sample-body {
    height:144px
  }
  .section-heading h2 {
    font-size:16px
  }
  .derivation h3 {
    font-size:27px
  }
  .derivation p {
    font-size:16px
  }
  .scene-caption {
    font-size:14px
  }
  .switch-label {
    font-size:16px
  }
  .state-strip {
    min-height:60px
  }
  .phase-control {
    padding-bottom:18px
  }
}
@media(max-width:1100px) and (min-width:901px) {
  .lab {
    padding:0 22px
  }
  .workspace {
    grid-template-columns:minmax(0,1.2fr) minmax(340px,1fr)
  }
  .visual {
    padding-right:20px
  }
  .explanation {
    padding-left:20px
  }
  .visual-key {
    font-size:10px
  }
  .subtle {
    font-size:9px
  }
  .ket {
    font-size:18px
  }
  .header-note {
    display:none
  }
  .equation {
    gap:7px;
    font-size:20px
  }
  .matrix {
    font-size:17px
  }
  .shortcut {
    display:none
  }
}
@media(max-width:900px) {
  .lab {
    padding:0 18px;
    min-height:790px;
    height:100dvh;
    grid-template-rows:54px 80px 70px 36px minmax(275px,1fr) 172px 65px
  }
  .header-note {
    display:none
  }
  .brand {
    font-size:14px;
    gap:8px
  }
  .brand small {
    font-size:8px
  }
  .brand-mark {
    font-size:30px
  }
  .header-tools {
    gap:0
  }
  .header .text-button {
    font-size:12px;
    padding:4px
  }
  .header-tools .icon-button {
    min-width:36px;
    font-size:23px
  }
  .intro {
    gap:10px
  }
  .intro h1 {
    font-size:28px
  }
  .eyebrow {
    font-size:10px
  }
  .intro p {
    font-size:11px;
    max-width:140px
  }
  .circuit {
    padding:3px 0 12px
  }
  .circuit:before {
    left:8%;
    right:8%
  }
  .gate-symbol {
    height:40px;
    min-width:42px;
    font-size:23px;
    border-radius:8px
  }
  .gate.measure-gate .gate-symbol {
    min-width:37px
  }
  .gate-label {
    top:48px;
    font-size:8px
  }
  .gate {
    min-height:43px
  }
  .workspace {
    display:block;
    position:relative;
    min-height:0
  }
  .visual {
    height:100%;
    padding:6px 0 2px
  }
  .explanation {
    height:100%;
    padding:8px 0;
    display:none;
    border-left:0;
    overflow:auto
  }
  .lab[data-view=math] .visual {
    display:none
  }
  .lab[data-view=math] .explanation {
    display:flex
  }
  .mobile-tabs {
    display:flex;
    align-items:center;
    gap:20px;
    border-bottom:1px solid var(--line)
  }
  .mobile-tabs button {
    height:36px;
    font-size:12px;
    border-bottom:2px solid transparent;
    padding:0 3px
  }
  .mobile-tabs button[aria-selected=true] {
    border-color:var(--green);
    color:var(--green)
  }
  .mobile-tabs .mobile-measure {
    margin-left:auto;
    font-size:11px;
    padding:0 5px
  }
  .section-heading {
    min-height:22px;
    gap:10px
  }
  .section-heading h2 {
    font-size:12px
  }
  .visual-key {
    font-size:10px
  }
  .subtle {
    font-size:9px
  }
  .scene-caption {
    font-size:10px;
    bottom:0
  }
  .scene-wrap {
    min-height:112px
  }
  #scene {
    min-height:112px;
    max-height:240px
  }
  .state-strip {
    min-height:39px;
    gap:6px;
    margin-top:3px
  }
  .state-label {
    font-size:19px
  }
  .ket {
    font-size:18px;
    gap:4px
  }
  .state-strip .text-button {
    padding:5px;
    font-size:11px;
    min-height:32px
  }
  .phase-control {
    padding:0 0 4px
  }
  .phase-heading label {
    font-size:12px
  }
  .phase-heading output {
    font-size:24px;
    min-width:55px
  }
  .presets {
    gap:3px
  }
  .presets button {
    min-height:30px;
    padding:3px 7px;
    font-size:11px
  }
  .range-labels {
    font-size:11px
  }
  input[type=range] {
    margin:4px 0 0;
    height:23px
  }
  .sampling {
    padding:10px 0 3px
  }
  .sample-heading {
    gap:7px
  }
  .sample-heading h2 {
    font-size:13px;
    letter-spacing:-.02em
  }
  .sample-heading p {
    font-size:9px;
    max-width:180px;
    line-height:1.5
  }
  .sample-actions {
    gap:1px
  }
  .primary-button {
    min-height:40px;
    font-size:12px;
    padding:8px 11px;
    gap:7px
  }
  .primary-button span {
    font-size:16px
  }
  .sample-actions .icon-button {
    min-width:34px;
    font-size:22px
  }
  .sample-body {
    height:111px;
    grid-template-columns:minmax(0,1fr) 70px;
    gap:10px
  }
  .sample-stats {
    padding-left:10px
  }
  .sample-counter {
    gap:3px
  }
  .sample-counter strong {
    font-size:25px
  }
  .sample-counter>span {
    font-size:8px
  }
  .counts {
    gap:8px;
    font-size:9px
  }
  .counts b {
    font-size:12px;
    margin-left:3px
  }
  #sample-status {
    font-size:9px;
    line-height:1.4
  }
  #seed-label {
    font-size:7px;
    overflow-wrap:anywhere
  }
  .transport {
    gap:8px
  }
  .transport-left,.transport-right {
    gap:3px;
    font-size:10px
  }
  .transport-left .text-button {
    font-size:9px;
    padding:4px;
    min-height:36px
  }
  .transport select {
    font-size:13px;
    padding:3px;
    max-width:60px
  }
  .playback {
    gap:4px
  }
  .play-button {
    width:38px;
    height:38px;
    font-size:14px
  }
  .playback .icon-button {
    min-width:33px;
    min-height:42px;
    font-size:23px
  }
  #step-count {
    display:none
  }
  .shortcut {
    display:none
  }
  .input-choice {
    gap:3px
  }
  .transport-right label {
    display:flex;
    align-items:center;
    gap:3px
  }
  .derivation {
    padding:7px 0;
    min-height:100px
  }
  .derivation h3 {
    font-size:21px;
    margin-bottom:5px
  }
  .derivation p {
    font-size:12px;
    margin-top:5px
  }
  .equation {
    font-size:21px;
    gap:9px;
    min-height:56px
  }
  .matrix {
    font-size:18px;
    gap:6px;
    padding:4px 10px
  }
  .matrix.numeric {
    font-size:15px
  }
  .derivation .result-line {
    margin-top:6px
  }
  .derivation .term {
    font-size:15px;
    min-height:30px
  }
  .measurement {
    padding:5px 0
  }
  .switch-label {
    min-height:37px;
    font-size:12px
  }
  .switch-label small {
    font-size:9px
  }
  .probabilities {
    padding-top:5px
  }
  .probability-top {
    font-size:10px;
    margin-bottom:3px
  }
  .prob-row {
    min-height:23px
  }
  .prob-row>.basis {
    font-size:20px
  }
  .prob-row strong {
    font-size:13px
  }
  .branches {
    padding-top:4px
  }
  .branches p {
    font-size:10px;
    margin-top:4px
  }
  .segmented button {
    min-height:30px;
    font-size:11px
  }
  .density-panel {
    right:0;
    bottom:88px;
    font-size:12px;
    padding:12px
  }
  .formula-symbolic {
    font-size:17px;
    margin-top:5px
  }
}
@media(max-width:480px) {
  .lab {
    padding:0 14px
  }
  .intro p {
    max-width:118px;
    font-size:10px
  }
  .intro h1 {
    font-size:27px
  }
  .ket {
    font-size:16px
  }
  .transport-left .text-button {
    max-width:35px;
    line-height:1.3
  }
  .state-strip {
    gap:5px
  }
  .visual-key {
    gap:4px
  }
  .section-heading {
    gap:8px
  }
  .subtle {
    font-size:8px
  }
  .sample-counter>span {
    display:none
  }
}
@media(max-height:790px) {
  .lab {
    height:auto;
    min-height:790px
  }
  .transport {
    position:sticky;
    bottom:0;
    background:var(--paper);
    z-index:5
  }
}
@media(prefers-reduced-motion:reduce) {
  button,.switch,.switch:after,.toast,.sample-cell {
    transition-duration:.1s
  }
}
.scene-caption {
  position:static;
  min-height:22px;
  padding:3px 0;
  flex-shrink:0
}
@media(min-width:901px) and (max-height:849px) {
  .lab {
    height:100dvh;
    min-height:0;
    grid-template-rows:50px 74px 64px minmax(245px,1fr) 156px 58px
  }
  .header .brand-mark {
    font-size:30px
  }
  .intro h1 {
    font-size:30px
  }
  .intro p {
    font-size:13px
  }
  .visual {
    padding-top:10px
  }
  .explanation {
    padding-top:10px
  }
  .derivation {
    padding:7px 0;
    min-height:100px
  }
  .derivation h3 {
    font-size:21px
  }
  .derivation p {
    font-size:12px;
    line-height:1.6
  }
  .equation {
    min-height:48px;
    font-size:20px
  }
  .matrix {
    font-size:17px;
    gap:6px
  }
  .result-line .matrix {
    font-size:16px
  }
  .derivation .result-line {
    margin-top:6px
  }
  .derivation .term {
    min-height:30px;
    font-size:15px
  }
  .measurement {
    padding:6px 0
  }
  .probabilities {
    padding-top:6px
  }
  .sample-body {
    height:96px
  }
  .sample-heading h2 {
    font-size:14px
  }
  .sample-heading p {
    font-size:10px
  }
  .sample-actions .primary-button {
    min-height:38px;
    padding:7px 14px
  }
  .sampling {
    padding-top:8px
  }
  .scene-caption {
    font-size:10px
  }
  .phase-control {
    padding-bottom:3px
  }
  .state-strip {
    min-height:42px
  }
  .phase-heading output {
    font-size:23px
  }
  .phase-control input {
    margin-top:2px
  }
  .section-heading {
    min-height:21px
  }
  .state-strip .text-button {
    min-height:32px
  }
  .sample-counter strong {
    font-size:27px
  }
}
@media(max-width:900px) {
  .scene-caption {
    min-height:18px;
    font-size:9px;
    padding:2px 0
  }
  .scene-wrap {
    min-height:105px
  }
  #scene {
    min-height:95px
  }
}
/* Explicit grid rows prevent intrinsic SVG height from expanding into the next section. */
.workspace {
  grid-template-rows:minmax(0,1fr)
}
.visual {
  min-height:0;
  display:grid;
  grid-template-rows:25px minmax(0,1fr) 48px 100px
}
.scene-wrap {
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) 22px;
  justify-items:center
}
#scene {
  display:block;
  min-height:0;
  max-height:none;
  height:100%;
  width:100%
}
.scene-caption {
  align-self:center;
  min-height:0
}
.explanation {
  min-height:0
}
.sample-body {
  min-height:0;
  grid-template-rows:minmax(0,1fr)
}
#samples {
  min-height:0;
  display:block
}
@media(min-width:901px) and (min-height:850px) and (max-height:999px) {
  .lab {
    grid-template-rows:56px 82px 66px minmax(0,1fr) 168px 64px
  }
  .sample-body {
    height:105px
  }
}
@media(min-width:901px) and (max-height:849px) {
  .visual {
    grid-template-rows:21px minmax(0,1fr) 42px 87px
  }
}
@media(max-width:900px) {
  .visual {
    display:grid;
    grid-template-rows:22px minmax(0,1fr) 39px 83px
  }
  .scene-wrap {
    min-height:0;
    grid-template-rows:minmax(0,1fr) 18px
  }
  #scene {
    min-height:0
  }
  .sample-body {
    height:105px
  }
}
.ket {
  flex-wrap:wrap;
  row-gap:0;
  min-width:0
}
.ket-term {
  white-space:nowrap
}
.visual {
  grid-template-rows:25px minmax(0,1fr) auto 100px
}
@media(min-width:901px) and (max-height:849px) {
  .visual {
    grid-template-rows:21px minmax(0,1fr) auto 87px
  }
}
@media(max-width:900px) {
  .visual {
    grid-template-rows:22px minmax(0,1fr) auto 83px
  }
  .state-strip {
    min-height:39px
  }
  .state-label {
    font-size:17px
  }
  .ket {
    font-size:15px
  }
}
@media(max-width:900px) {
  #scene text {
    font-size:23px
  }
  #scene .amplitude-value {
    font-size:29px
  }
  .transport-left .text-button {
    max-width:none;
    font-size:10px;
    white-space:nowrap;
    padding:4px
  }
  .header-tools .icon-button {
    min-width:38px
  }
}
@media(max-width:900px) {
  .presets button {
    min-height:40px
  }
  .phase-heading {
    min-height:40px
  }
  .playback .icon-button {
    min-width:42px;
    min-height:44px
  }
}
.derivation {
  overflow:auto;
  scrollbar-width:thin;
  justify-content:flex-start
}