/* Mycelium: a specimen workbench. All colors retain the original forest palette. */
:root {
  color-scheme:dark;
  --bg:#171b18;
  --panel:#1e241f;
  --canvas:#111713;
  --line:#394238;
  --faint:#a1ad9d;
  --text:#edeedf;
  --accent:#c2d392;
  --moss:#a0b57d;
  --amber:#d8b378;
  --blue:#8bb6c2;
  --error:#e9a489;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Avenir Next","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-family:var(--sans);
  font-size:14px;
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
button,input,select {
  font:inherit;
  color:inherit;
}
button,a,summary,input,select {
  -webkit-tap-highlight-color:transparent;
}
a {
  color:inherit;
  text-decoration:none;
}
a:hover {
  color:var(--accent);
}
button {
  cursor:pointer;
  border:1px solid var(--line);
  background:transparent;
  transition:background .16s,color .16s,border-color .16s;
}
button:hover:not(:disabled) {
  background:#30392c;
  border-color:#839368;
}
button:active:not(:disabled) {
  background:#3a4533;
}
button:disabled {
  opacity:.38;
  cursor:not-allowed;
}
button.active {
  color:var(--accent);
  border-color:var(--accent);
  background:#293224;
}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}
button,summary {
  touch-action:manipulation;
}
[hidden] {
  display:none!important;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:99;
  background:var(--accent);
  color:var(--bg);
  padding:14px;
  transform:translateY(-150%);
}
.skip-link:focus {
  transform:none;
}
h1,h2,h3,p {
  margin-top:0;
}
em {
  font-weight:400;
  color:var(--accent);
}
h1,h2 {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.045em;
}
h3 {
  font-size:15px;
  font-weight:500;
}
p {
  line-height:1.7;
}
abbr[title] {
  text-decoration:none;
  cursor:help;
}
.micro-label,.eyebrow,.index-label {
  font-family:var(--mono);
  font-weight:400;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.6;
}
.eyebrow {
  color:var(--accent);
  margin-bottom:24px;
}
.micro-label,.index-label {
  color:var(--faint);
}

/* Navigation is a sequence of experiments, not four skins on the same panel. */
.site-header {
  max-width:1600px;
  min-height:86px;
  margin:auto;
  padding:16px 48px;
  display:flex;
  align-items:center;
  gap:40px;
  border-bottom:1px solid var(--line);
}
.identity {
  display:flex;
  align-items:center;
  gap:12px;
  font:34px/1 var(--serif);
  letter-spacing:-1.4px;
}
.identity img {
  width:32px;
  height:32px;
}
.identity small {
  display:block;
  font:9px/1.5 var(--mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--faint);
  margin-top:7px;
}
.primary-nav {
  display:flex;
  align-items:center;
  gap:32px;
  margin-left:auto;
  font-size:13px;
}
.primary-nav button {
  border:0;
  padding:12px 0;
}
.primary-nav a {
  padding:12px 0;
}
.primary-nav span {
  margin-left:8px;
  color:var(--faint);
}
.runtime-status {
  display:flex;
  align-items:center;
  gap:8px;
  font:10px var(--mono);
  color:var(--accent);
  border-left:1px solid var(--line);
  padding-left:24px;
  min-width:137px;
}
.status-dot,.live-label i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  display:inline-block;
  flex:none;
}
.status-dot.loading {
  background:var(--amber);
  animation:breathe 1.8s ease-in-out infinite;
}
.status-dot.error {
  background:var(--error);
}
main {
  max-width:1600px;
  margin:auto;
  padding:0 48px;
}
.mode-tabs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);
}
.mode-tabs button {
  display:flex;
  gap:16px;
  align-items:center;
  text-align:left;
  position:relative;
  border:0;
  padding:19px 24px;
  color:var(--faint);
  background:none;
  font-size:16px;
}
.mode-tabs button:first-child {
  padding-left:0;
}
.mode-tabs button:not(:last-child):after {
  content:"";
  position:absolute;
  right:0;
  height:30px;
  width:1px;
  background:var(--line);
}
.mode-tabs button:before {
  content:"";
  position:absolute;
  bottom:-1px;
  left:24px;
  right:24px;
  height:2px;
  background:transparent;
}
.mode-tabs button:first-child:before {
  left:0;
}
.mode-tabs button.active {
  background:none;
  color:var(--text);
}
.mode-tabs button.active:before {
  background:var(--accent);
}
.mode-tabs button:hover:not(:disabled) {
  background:#1d241c;
}
.mode-number {
  font:11px var(--mono);
  color:var(--moss);
}
.mode-tabs small {
  display:block;
  font-size:11px;
  color:var(--faint);
  margin-top:5px;
}
.mode-arrow {
  margin-left:auto;
  font-size:21px;
  opacity:0;
  color:var(--accent);
}
.mode-tabs .active .mode-arrow {
  opacity:1;
}

/* The first viewport is the application: a protocol beside a living specimen. */
.laboratory {
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  column-gap:64px;
  row-gap:36px;
  padding-top:30px;
  align-items:start;
}
.experiment-sidebar {
  grid-column:1;
  grid-row:1/span 2;
  min-width:0;
}
.protocol {
  grid-column:1;
  grid-row:1;
}
.protocol h1 {
  font-size:70px;
  line-height:.99;
  margin:0 0 25px;
}
.protocol-copy {
  color:#b6c0af;
  font-size:14px;
  max-width:31em;
  margin-bottom:30px;
}
.specimen-controls {
  margin-top:25px;
  border-block:1px solid var(--line);
}
.specimen-controls>summary {
  min-height:48px;
  font-size:12px;
  padding:14px 0;
}
.specimen-fields {
  padding:8px 0 18px;
}
.specimen-fields>.section-title {
  display:none;
}
.section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.section-title>span:first-child {
  font:11px var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.pattern-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin:0 0 20px;
}
.pattern-button {
  padding:11px 8px 9px;
  border-radius:2px;
  position:relative;
}
.pattern-button canvas {
  display:block;
  width:46px;
  height:46px;
  image-rendering:pixelated;
  margin:0 auto 8px;
}
.pattern-button span {
  display:block;
  font:11px var(--mono);
  text-transform:capitalize;
}
.pattern-button.active:after {
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  background:var(--accent);
  top:7px;
  right:7px;
}
.field-label {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:#c3cdbc;
  margin:15px 0 8px;
}
.field-label span {
  font-size:10px;
  color:var(--faint);
}
select,input[type=number] {
  width:100%;
  border:1px solid #4b5744;
  background:#1e261d;
  padding:12px;
  color:var(--text);
  border-radius:2px;
  min-height:44px;
  font-size:13px;
}
select {
  cursor:pointer;
}
select option {
  color:var(--text);
  background:var(--panel);
}
input[type=number] {
  font-family:var(--mono);
  max-width:170px;
}
.protocol-note {
  display:flex;
  gap:12px;
  border-left:1px solid var(--moss);
  margin:25px 0 12px;
  padding:0 0 0 15px;
  color:var(--faint);
  font-size:12px;
  line-height:1.7;
}
.protocol-note>span {
  color:var(--accent);
  font-size:18px;
}
.protocol-note p {
  margin:0;
}
.text-button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  border:0;
  font-size:12px;
  min-height:44px;
  padding:9px 0;
  color:var(--accent);
}
.text-button:hover:not(:disabled) {
  background:none;
  color:var(--text);
}
.culture-stage {
  grid-column:2;
  grid-row:1;
  min-width:0;
}
.stage-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 0 16px;
  border-bottom:1px solid var(--line);
}
.live-label {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--accent);
  font:11px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.specimen-stage {
  position:relative;
  background:var(--canvas);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.stage-annotation {
  position:absolute;
  left:22px;
  top:22px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font:10px var(--mono);
  color:#85907e;
  z-index:1;
}
.stage-annotation .micro-label {
  font-size:9px;
  color:#85907e;
}
.reference {
  position:absolute;
  top:16px;
  right:22px;
  display:flex;
  gap:12px;
  align-items:center;
  z-index:1;
}
.reference canvas {
  width:46px;
  height:46px;
  image-rendering:pixelated;
  padding:4px;
  border:1px solid var(--line);
}
.reference strong {
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:22px;
  margin-top:3px;
  text-transform:capitalize;
}
.reference .micro-label {
  font-size:8px;
}
.canvases {
  position:relative;
  min-height:0;
  padding:60px 28px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
}
.culture {
  width:min(100%,400px);
  min-width:0;
  position:relative;
}
.dish {
  position:relative;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid #34412f;
  border-radius:50%;
  margin:0 auto;
  width:100%;
}
.dish:before {
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid #222f22;
  border-radius:50%;
  pointer-events:none;
}
.canvas-frame {
  position:relative;
  width:72%;
  aspect-ratio:1;
  background:repeating-conic-gradient(#172018 0% 25%,#19231a 0% 50%) 0 0 / 6.25% 6.25%;
  outline:1px solid #34412f;
}
.canvas-frame:after {
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid #34412f;
  pointer-events:none;
  clip-path:polygon(0 0,12px 0,12px 1px,1px 1px,1px 12px,0 12px,0 0,100% 0,100% 12px,calc(100% - 1px) 12px,calc(100% - 1px) 1px,calc(100% - 12px) 1px,calc(100% - 12px) 0,100% 0,100% 100%,calc(100% - 12px) 100%,calc(100% - 12px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 12px),100% calc(100% - 12px),100% 100%,0 100%,0 calc(100% - 12px),1px calc(100% - 12px),1px calc(100% - 1px),12px calc(100% - 1px),12px 100%,0 100%);
}
.canvas-frame canvas {
  display:block;
  width:100%;
  height:100%;
  image-rendering:pixelated;
  touch-action:none;
  cursor:crosshair;
}
.dish-tick {
  position:absolute;
  background:#788b63;
  pointer-events:none;
}
.tick-top,.tick-bottom {
  width:1px;
  height:12px;
  left:50%;
}
.tick-top {
  top:-6px;
}
.tick-bottom {
  bottom:-6px;
}
.tick-left,.tick-right {
  height:1px;
  width:12px;
  top:50%;
}
.tick-left {
  left:-6px;
}
.tick-right {
  right:-6px;
}
.canvas-axis {
  display:flex;
  justify-content:space-between;
  width:72%;
  margin:14px auto 0;
  font:9px var(--mono);
  color:#8a9a7d;
}
.brush-cursor {
  position:absolute;
  border:1px solid #e1edbc;
  background:#dfedaa0d;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:2;
}
.branch-metrics {
  font:10px/1.5 var(--mono);
  text-align:center;
  color:var(--faint);
  margin:14px 0 0;
}
.action-record {
  font:10px/1.7 var(--mono);
  color:var(--accent);
  border-top:1px solid var(--line);
  padding-top:14px;
  margin:14px 0 0;
}
.branch-label {
  font:10px/1.7 var(--mono);
  color:var(--accent);
  text-align:center;
  margin:0 0 24px;
  min-height:34px;
}
.culture-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 22px;
  padding:16px 0 18px;
  border-top:1px solid #263324;
}
.culture-caption p {
  font-size:11px;
  margin:0;
  color:var(--faint);
  max-width:80%;
}
.state-indicator {
  font:10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--accent);
}
.transport-bar {
  display:flex;
  gap:22px;
  align-items:center;
  padding:17px 0;
  border-bottom:1px solid var(--line);
}
.transport {
  display:flex;
  gap:8px;
}
.primary-button {
  min-width:138px;
  min-height:46px;
  background:var(--accent);
  border-color:var(--accent);
  color:#1d2917;
  padding:12px 21px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:14px;
  font-weight:500;
}
.primary-button:hover:not(:disabled) {
  background:#d8e5b7;
  color:#1d2917;
  border-color:#d8e5b7;
}
.icon-button {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:none;
  font-size:23px;
  color:var(--accent);
}
.step-readout {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-left:auto;
}
.step-readout .micro-label {
  font-size:9px;
}
.step-readout strong {
  font:24px/1 var(--mono);
  font-weight:400;
  letter-spacing:-.04em;
}
.transport-bar>.text-button {
  margin-left:10px;
  font-size:11px;
}
.metric-list {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0;
  padding:23px 0 0;
  gap:15px;
}
.metric-list>div {
  padding-right:12px;
  border-right:1px solid var(--line);
  min-width:0;
}
.metric-list>div:last-child {
  border:0;
  padding-right:0;
}
.metric-list dt {
  font-size:10px;
  color:var(--faint);
  margin-bottom:9px;
  line-height:1.6;
}
.metric-list dd {
  margin:0;
  color:var(--text);
  font:26px/1.1 var(--mono);
  letter-spacing:-.06em;
}
.metric-list>div>span {
  display:block;
  font-size:9px;
  color:var(--faint);
  margin-top:9px;
}

/* Progressively disclosed controls retain the full experimental surface. */
.toolbox {
  margin-top:26px;
  align-self:start;
}
.tool-section {
  border-top:1px solid var(--line);
}
.tool-section:last-child {
  border-bottom:1px solid var(--line);
}
summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:57px;
  padding:17px 0;
  font-size:14px;
  line-height:1.4;
}
summary::-webkit-details-marker {
  display:none;
}
summary .index-label {
  display:inline-block;
  width:30px;
  font-size:10px;
  color:var(--moss);
}
summary:hover {
  color:var(--accent);
}
.disclosure {
  font:22px var(--sans);
  color:var(--moss);
  transition:transform .2s;
}
details[open]>summary .disclosure {
  transform:rotate(45deg);
}
details[open]>summary {
  color:var(--accent);
}
.tool-content {
  padding:0 0 22px;
}
.tool-content>.field-label:first-child {
  margin-top:0;
}
.help {
  font-size:11px;
  line-height:1.75;
  color:var(--faint);
  margin:10px 0 14px;
}
.brush-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.brush-options button {
  padding:10px;
  font-size:12px;
  text-align:left;
  min-height:42px;
}
.range-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:19px 0 8px;
  font-size:12px;
}
.range-label output {
  font:11px var(--mono);
  color:var(--accent);
  white-space:nowrap;
}
input[type=range] {
  display:block;
  width:100%;
  accent-color:var(--accent);
  height:24px;
  margin:4px 0;
  cursor:pointer;
}
.preset-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.preset-actions button {
  font-size:11px;
  text-align:left;
  padding:10px;
  min-height:42px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.preset-actions #seed-center {
  grid-column:1/-1;
  color:var(--accent);
}
.preset-actions #clear {
  color:var(--amber);
}
.secondary-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:44px;
  padding:12px 14px;
  border:1px solid #819267;
  color:var(--accent);
  font-size:12px;
}
.secondary-button:hover {
  background:#2b3625;
  color:var(--text);
}
#fork {
  width:100%;
  margin-top:18px;
}
.performance {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  padding-top:16px;
  gap:15px;
  font-size:11px;
  color:var(--faint);
}
.performance strong {
  display:block;
  color:var(--accent);
  font:11px var(--mono);
  margin-top:8px;
}
.checkpoint-card {
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:18px;
}
.checkpoint-card strong {
  display:block;
  font-size:13px;
  font-weight:400;
  margin:10px 0;
}
.checkpoint-card code {
  font:10px var(--mono);
  color:var(--faint);
  display:block;
  overflow-wrap:anywhere;
}
.color-scale {
  display:flex;
  align-items:center;
  gap:8px;
  font:10px var(--mono);
  color:var(--faint);
  margin-top:12px;
}
.color-scale i {
  flex:1;
  height:5px;
  background:linear-gradient(to right,#7193c8,#181b20);
}
.color-scale i:last-of-type {
  background:linear-gradient(to right,#181b20,#c9d990);
}

/* Measured traces: generous labels, stable axes, and exact sample inspection. */
.curve-panel {
  grid-column:2;
  grid-row:2;
  min-width:0;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.curve-panel h2 {
  font-size:33px;
  line-height:1.1;
  margin:0;
}
.chart-legend {
  display:flex;
  gap:20px;
  font:10px var(--mono);
  color:var(--faint);
}
.chart-legend span:before {
  content:"";
  width:16px;
  height:2px;
  display:inline-block;
  background:var(--accent);
  margin:0 7px 3px 0;
}
.chart-legend .legend-b:before {
  background:var(--blue);
}
.chart-wrap {
  position:relative;
  height:180px;
  margin-top:22px;
}
.chart-wrap canvas {
  display:block;
  width:100%;
  height:100%;
}
.chart-foot {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font:9px/1.7 var(--mono);
  color:var(--faint);
  text-transform:uppercase;
  letter-spacing:.04em;
  padding-top:10px;
}
.chart-empty {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--faint);
  font-size:12px;
  padding:30px;
  text-align:center;
}
.chart-tooltip {
  position:absolute;
  top:6px;
  max-width:210px;
  padding:10px 12px;
  border:1px solid #74835f;
  background:#20291e;
  color:var(--text);
  font:10px/1.7 var(--mono);
  pointer-events:none;
  z-index:2;
  white-space:pre-line;
}
.difference-panel {
  margin-top:55px;
  padding:32px;
  border:1px solid #4a5b40;
  background:#1c231b;
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:28px;
  margin-bottom:30px;
}
.section-heading h2 {
  font-size:42px;
  margin:0;
  line-height:1.1;
}
.section-heading .eyebrow {
  margin-bottom:12px;
}
.section-heading>span {
  text-align:right;
  font-size:10px;
  max-width:300px;
}
.difference-content {
  display:grid;
  grid-template-columns:180px 180px 1fr;
  gap:32px;
  align-items:center;
}
.difference-content figure {
  margin:0;
}
.difference-content canvas {
  width:100%;
  height:auto;
  aspect-ratio:1;
  image-rendering:pixelated;
  background:var(--canvas);
  border:1px solid var(--line);
}
.difference-content figcaption {
  font-size:10px;
  color:var(--faint);
  line-height:1.8;
  margin-top:12px;
}
.difference-content figcaption strong {
  display:block;
  color:var(--text);
  font-size:13px;
  font-weight:400;
}
.difference-content p {
  max-width:500px;
}
.divergence-plot {
  margin-top:35px;
  padding-top:25px;
  border-top:1px solid var(--line);
}
.divergence-plot h3 {
  margin:0;
}
.divergence-plot .chart-wrap {
  height:150px;
}

/* The notebook is a deliberate second section, with provenance close at hand. */
.notebook {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:80px;
  padding:60px 0;
  margin-top:64px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  scroll-margin-top:30px;
}
.notebook h2 {
  font-size:45px;
  line-height:1.12;
  margin:0 0 25px;
}
.notebook-intro>p:last-child {
  font-size:13px;
  max-width:370px;
  color:var(--faint);
  margin-bottom:0;
}
.export-group {
  display:flex;
  justify-content:space-between;
  gap:25px;
  border-bottom:1px solid var(--line);
  padding:0 0 24px;
  margin-bottom:24px;
  align-items:center;
}
.export-group h3 {
  margin:0;
}
.export-group .help {
  margin:7px 0 0;
  font-size:11px;
  max-width:220px;
}
.export-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.export-actions button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:42px;
  padding:10px 13px;
  font-size:11px;
  color:var(--accent);
}
.export-group:first-child .export-actions {
  flex-direction:column;
  flex:none;
}
.notebook-tools>.tool-section {
  border-top:0;
}
.diagnostic-result {
  max-height:320px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:11px/1.7 var(--mono);
  padding:16px;
  border:1px solid var(--line);
  background:var(--canvas);
  color:var(--accent);
}
footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  padding:35px 0 42px;
  font-size:11px;
  color:var(--faint);
}
footer p {
  margin:0;
  line-height:1.9;
}
.footer-brand {
  font:30px/1 var(--serif);
  color:var(--text);
  letter-spacing:-1px;
}
.footer-brand span {
  display:block;
  margin-top:12px;
  font:9px var(--mono);
  letter-spacing:.03em;
  color:var(--faint);
}
footer>a:last-child {
  color:var(--accent);
}

/* Dialogs are readable research pages with native focus containment. */
dialog {
  width:min(1040px,calc(100vw - 48px));
  max-height:90dvh;
  margin:auto;
  padding:40px 48px;
  background:#1e251e;
  color:var(--text);
  border:1px solid #667651;
  border-radius:2px;
  box-shadow:0 28px 110px #0008;
  overscroll-behavior:contain;
}
dialog::backdrop {
  background:#080e0bca;
  backdrop-filter:blur(5px);
}
body:has(dialog[open]) {
  overflow:hidden;
}
.dialog-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:25px;
}
.dialog-heading .icon-button {
  position:sticky;
  top:0;
  background:var(--panel);
  z-index:2;
}
.dialog-heading h2 {
  font-size:56px;
  line-height:1.02;
  margin:0 0 24px;
}
.dialog-heading .eyebrow {
  margin-bottom:20px;
}
.dialog-intro {
  font-size:14px;
  color:#c1cbb9;
  max-width:710px;
}
.results-overview {
  margin-top:30px;
}
.results-description {
  font-size:12px;
  color:var(--faint);
}
.results-scroll-hint {
  display:none;
}
.results-facts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 0;
  margin:25px 0;
  gap:20px;
}
.results-facts dt {
  font:10px var(--mono);
  color:var(--faint);
  margin-bottom:10px;
}
.results-facts dd {
  margin:0;
  font:26px var(--mono);
  color:var(--accent);
}
.results-table-wrap {
  overflow:auto;
  margin:30px 0;
}
.results-table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  min-width:590px;
  font-size:12px;
}
.results-table caption {
  text-align:left;
  font:12px/1.8 var(--sans);
  color:var(--faint);
  padding-bottom:15px;
}
.results-table th,.results-table td {
  padding:18px 15px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.results-table th:first-child,.results-table td:first-child {
  padding-left:0;
}
.results-table thead th {
  font-weight:400;
  font-size:11px;
}
.result-column-title {
  display:block;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.08em;
  font:10px var(--mono);
}
.result-column-note {
  display:block;
  font-size:10px;
  color:var(--faint);
  margin-top:8px;
  max-width:180px;
}
.result-model strong {
  display:block;
  font:22px var(--serif);
  text-transform:capitalize;
  margin-bottom:6px;
}
.result-model-meta {
  display:block;
  font:11px/1.7 var(--sans);
  color:#bfccb3;
}
.result-model-id {
  display:block;
  font:9px/1.7 var(--mono);
  color:var(--faint);
  margin-top:5px;
}
.result-score {
  min-width:110px;
}
.result-fraction {
  font:22px var(--mono);
  font-weight:400;
  color:var(--accent);
}
.result-score[data-outcome=failed] .result-fraction {
  color:var(--amber);
}
.result-score[data-outcome=mixed] .result-fraction {
  color:var(--blue);
}
.result-meter {
  display:block;
  width:100%;
  max-width:130px;
  height:6px;
  margin:12px 0 9px;
  appearance:none;
  background:#37422f;
  border:0;
}
.result-meter::-webkit-meter-bar {
  background:#37422f;
  border:0;
  border-radius:0;
}
.result-meter::-webkit-meter-optimum-value {
  background:var(--accent);
}
.result-meter::-moz-meter-bar {
  background:var(--accent);
}
.result-outcome,.result-note {
  display:block;
  font-size:10px;
  line-height:1.65;
  color:var(--faint);
  max-width:180px;
}
.result-note {
  color:var(--amber);
  margin-top:7px;
}
.results-warning {
  padding:22px 24px;
  border-left:2px solid var(--amber);
  background:#2a2c20;
  margin:30px 0;
}
.results-warning h3 {
  color:#e2c48f;
}
.results-warning ul {
  padding-left:17px;
  color:#c7c8ae;
  font-size:12px;
  line-height:1.85;
  margin-bottom:0;
}
.results-warning li+li {
  margin-top:8px;
}
.results-sources {
  margin:35px 0;
}
.results-sources>p {
  font-size:12px;
  color:var(--faint);
}
.result-card {
  border-top:1px solid var(--line);
}
.result-card summary {
  font-size:12px;
  min-height:52px;
}
.result-card summary:after {
  content:"+";
  color:var(--accent);
}
.result-card[open] summary:after {
  content:"−";
}
.result-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 15px;
}
.result-links a,dialog p a {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:4px;
}
.result-links a {
  font-size:11px;
}
.result-raw {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:11px/1.8 var(--mono);
  max-height:360px;
  overflow:auto;
  background:var(--canvas);
  padding:20px;
  color:var(--faint);
}
.result-context {
  font-size:12px;
  color:var(--faint);
}
dialog>.secondary-button {
  display:inline-flex;
}
.rule-diagram {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  border-block:1px solid var(--line);
  padding:30px 0;
  margin:30px 0;
}
.rule-diagram strong {
  font:44px var(--serif);
  color:var(--accent);
  display:block;
}
.rule-diagram span {
  font:10px var(--mono);
  color:var(--faint);
  display:block;
  margin-top:10px;
}
.rule-diagram b {
  font-size:18px;
  color:var(--moss);
  font-weight:400;
}
.about-methods {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin:35px 0;
}
.about-methods h3 {
  font:35px var(--serif);
  margin:16px 0;
  color:var(--accent);
}
.about-methods p,dialog>p {
  font-size:13px;
  color:#b6c2ab;
}
.guide-note {
  border-left:1px solid var(--accent);
  padding-left:22px;
  margin:30px 0;
}
.guide-note p {
  font-size:13px;
  color:var(--faint);
}
dialog .research-credit {
  font-size:11px;
  line-height:1.8;
  margin-top:28px;
  color:var(--faint);
}

/* Loading, failure, and motion retain the same composition. */
.loading-overlay {
  position:absolute;
  inset:0;
  background:#111713f5;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:35px;
}
.loading-overlay strong {
  font:32px/1.2 var(--serif);
  max-width:340px;
  letter-spacing:-.03em;
}
.loading-overlay p {
  font-size:12px;
  color:var(--faint);
  max-width:350px;
  margin:15px 0;
}
.loading-glyph {
  width:50px;
  height:50px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  margin-bottom:32px;
  transform:rotate(45deg);
}
.loading-glyph i {
  border:1px solid var(--accent);
  animation:breathe 1.8s infinite;
}
.loading-glyph i:nth-child(2) {
  animation-delay:.2s;
}
.loading-glyph i:nth-child(3) {
  animation-delay:.4s;
}
.loading-glyph i:nth-child(4) {
  animation-delay:.6s;
}
.notice {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  max-width:min(640px,calc(100vw - 32px));
  width:max-content;
  background:var(--accent);
  color:#233019;
  padding:15px 22px;
  font-size:13px;
  line-height:1.6;
  box-shadow:0 10px 40px #0006;
  border-radius:2px;
}
.skeleton {
  color:var(--faint);
  font-size:12px;
  grid-column:1/-1;
  min-height:98px;
  display:flex;
  align-items:center;
}
.laboratory[data-changing=true] .protocol h1 {
  animation:arrive .25s ease-out;
}
.protocol h1 em {
  display:inline-block;
}
body[data-mode=compare] .canvases,body[data-paired=true] .canvases {
  min-height:440px;
  padding-top:100px;
  gap:28px;
}
body[data-mode=compare] .culture,body[data-paired=true] .culture {
  width:calc(50% - 14px);
}
body[data-paired=true] #canvas-a {
  cursor:default;
}
body[data-paired=true] .culture:first-child .branch-label {
  color:var(--accent);
}
body[data-paired=true] .culture:last-child .branch-label {
  color:var(--blue);
}
@keyframes breathe {
  0%,100% {
    opacity:.35;
  }
  50% {
    opacity:1;
  }
}
@keyframes arrive {
  from {
    opacity:.45;
    transform:translateY(6px);
  }
  to {
    opacity:1;
    transform:none;
  }
}
@media(min-width:1450px) {
  .laboratory {
    grid-template-columns:330px minmax(0,1fr);
    column-gap:80px;
    padding-top:52px;
  }
  .protocol h1 {
    font-size:82px;
  }
  .culture {
    width:min(100%,490px);
  }
  .canvases {
    min-height:0;
  }
  .protocol-copy {
    font-size:15px;
  }
  .pattern-button canvas {
    width:52px;
    height:52px;
  }
}
@media(max-width:1200px) {
  .site-header,main {
    padding-left:32px;
    padding-right:32px;
  }
  .site-header {
    gap:24px;
  }
  .primary-nav {
    gap:23px;
  }
  .runtime-status {
    padding-left:18px;
    min-width:0;
  }
  .identity {
    font-size:30px;
  }
  .laboratory {
    grid-template-columns:260px minmax(0,1fr);
    column-gap:36px;
  }
  .protocol h1 {
    font-size:63px;
  }
  .canvases {
    min-height:0;
    padding-inline:22px;
    padding-top:80px;
  }
  .stage-heading .micro-label {
    font-size:9px;
  }
  .metric-list dd {
    font-size:22px;
  }
  .transport-bar {
    gap:12px;
  }
  .primary-button {
    min-width:115px;
    padding-inline:16px;
  }
  .step-readout .micro-label {
    font-size:8px;
  }
  .transport-bar>.text-button {
    gap:8px;
    margin:0;
  }
  .notebook {
    gap:45px;
  }
  .notebook h2 {
    font-size:39px;
  }
  .export-group {
    align-items:flex-start;
  }
  .difference-content {
    grid-template-columns:150px 150px 1fr;
    gap:25px;
  }
}
@media(max-width:980px) {
  .site-header {
    flex-wrap:wrap;
    gap:16px;
    min-height:92px;
    padding-top:22px;
    padding-bottom:22px;
  }
  .identity {
    margin-right:auto;
  }
  .primary-nav {
    gap:24px;
    order:3;
    width:100%;
    justify-content:flex-end;
    border-top:1px solid var(--line);
    padding-top:7px;
  }
  .runtime-status {
    border:0;
  }
  .mode-tabs button {
    padding:19px 16px;
    gap:10px;
  }
  .mode-tabs small {
    display:none;
  }
  .laboratory {
    grid-template-columns:1fr 1fr;
    gap:32px;
    padding-top:32px;
  }
  .experiment-sidebar {
    display:contents;
  }
  .protocol {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 40px;
  }
  .protocol .eyebrow {
    grid-column:1;
    margin-bottom:18px;
  }
  .protocol h1 {
    grid-column:1;
    font-size:68px;
  }
  .protocol-copy {
    grid-column:1;
    margin-bottom:0;
  }
  .specimen-controls {
    grid-column:2;
    grid-row:1/4;
    margin:0;
  }
  .protocol-note {
    grid-column:2;
    grid-row:4;
    margin:15px 0 0;
  }
  .protocol>.text-button {
    grid-column:1;
    grid-row:4;
    justify-self:start;
  }
  .culture-stage {
    grid-column:1/-1;
    grid-row:2;
    display:flex;
    flex-direction:column;
  }
  .transport-bar {
    order:-1;
    margin-bottom:16px;
    padding-top:0;
  }
  .canvases {
    min-height:0;
  }
  .culture {
    width:min(100%,460px);
  }
  .toolbox {
    grid-column:1;
    grid-row:3;
    margin-top:0;
  }
  .curve-panel {
    grid-column:2;
    grid-row:3;
  }
  .curve-panel h2 {
    font-size:29px;
  }
  .chart-wrap {
    height:210px;
  }
  .metric-list dd {
    font-size:28px;
  }
  .metric-list dt {
    font-size:11px;
  }
  .metric-list>div>span {
    font-size:10px;
  }
  .transport-bar {
    gap:24px;
  }
  .primary-button {
    min-width:155px;
  }
  .step-readout {
    flex-direction:row;
    align-items:center;
    gap:15px;
  }
  .transport-bar>.text-button {
    margin-left:15px;
  }
  .notebook {
    gap:35px;
    grid-template-columns:1fr 1.15fr;
  }
  .notebook h2 {
    font-size:35px;
  }
  .export-group {
    display:block;
  }
  .export-actions {
    margin-top:13px;
  }
  .export-group:first-child .export-actions {
    flex-direction:row;
  }
  .difference-content {
    grid-template-columns:1fr 1fr 1.7fr;
    gap:20px;
  }
  .section-heading {
    display:block;
  }
  .section-heading>span {
    display:block;
    margin-top:16px;
    text-align:left;
  }
  .section-heading h2 {
    font-size:38px;
  }
  body[data-mode=compare] .canvases,body[data-paired=true] .canvases {
    min-height:430px;
  }
  .branch-label {
    font-size:9px;
  }
}
@media(max-width:600px) {
  html {
    scroll-padding-top:12px;
  }
  .site-header,main {
    padding-left:20px;
    padding-right:20px;
  }
  .site-header {
    min-height:80px;
    padding-top:20px;
    padding-bottom:9px;
    gap:16px;
  }
  .identity {
    font-size:29px;
    gap:9px;
  }
  .identity img {
    width:28px;
    height:28px;
  }
  .identity small {
    font-size:7px;
    letter-spacing:.09em;
  }
  .runtime-status {
    padding:0;
    font-size:8px;
    gap:5px;
  }
  .status-dot {
    width:5px;
    height:5px;
  }
  .primary-nav {
    justify-content:space-between;
    padding-top:5px;
    gap:10px;
    font-size:11px;
  }
  .primary-nav span {
    margin-left:3px;
  }
  .mode-tabs button {
    padding:15px 5px;
    gap:6px;
    font-size:12px;
    justify-content:center;
  }
  .mode-tabs button:first-child {
    padding-left:0;
  }
  .mode-tabs button:last-child {
    padding-right:0;
  }
  .mode-number {
    font-size:8px;
  }
  .mode-arrow {
    display:none;
  }
  .mode-tabs button:before {
    left:6px;
    right:6px;
  }
  .mode-tabs button:not(:last-child):after {
    height:18px;
  }
  .laboratory {
    display:flex;
    flex-direction:column;
    gap:20px;
    padding-top:28px;
  }
  .experiment-sidebar {
    display:contents;
  }
  .protocol {
    display:contents;
  }
  .protocol>.eyebrow {
    order:0;
  }
  .protocol>h1 {
    order:1;
  }
  .protocol>.protocol-copy {
    order:2;
  }
  .protocol>.specimen-controls {
    order:5;
    width:100%;
  }
  .protocol>.protocol-note {
    order:4;
    width:100%;
  }
  .protocol>.text-button {
    order:8;
  }
  .culture-stage {
    order:3;
  }
  .toolbox {
    order:6;
  }
  .curve-panel {
    order:7;
  }
  .protocol .eyebrow {
    font-size:9px;
    margin-bottom:-5px;
  }
  .protocol h1 {
    font-size:54px;
    line-height:1.02;
    margin-bottom:0;
  }
  .protocol h1 br {
    display:initial;
  }
  .protocol-copy {
    font-size:13px;
    line-height:1.7;
  }
  .specimen-controls {
    grid-column:1;
    grid-row:auto;
    margin-top:25px;
  }
  .specimen-controls .section-title {
    margin-bottom:10px;
  }
  .section-title>span:first-child {
    font-size:10px;
  }
  .pattern-list {
    gap:8px;
    margin-bottom:16px;
  }
  .pattern-button {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:9px 6px;
    min-height:55px;
  }
  .pattern-button canvas {
    width:30px;
    height:30px;
    margin:0;
  }
  .pattern-button span {
    font-size:10px;
  }
  .field-label {
    font-size:11px;
    margin:12px 0 7px;
  }
  select {
    font-size:13px;
    padding:11px;
    min-height:44px;
  }
  .protocol-note {
    grid-column:1;
    grid-row:auto;
    margin-top:17px;
    font-size:11px;
  }
  .protocol>.text-button {
    grid-column:1;
    grid-row:auto;
    min-height:36px;
    margin-top:3px;
    font-size:11px;
  }
  .culture-stage {
    width:100%;
    display:flex;
    flex-direction:column;
  }
  .stage-heading {
    padding-bottom:14px;
    gap:8px;
  }
  .stage-heading .micro-label {
    font-size:8px;
    letter-spacing:0;
  }
  .live-label {
    font-size:9px;
    gap:6px;
  }
  .transport-bar {
    order:-1;
    margin-bottom:16px;
    padding-top:0;
    gap:10px;
  }
  .transport {
    gap:5px;
  }
  .primary-button {
    min-width:90px;
    min-height:44px;
    font-size:13px;
    padding:10px 12px;
    gap:10px;
  }
  .icon-button {
    width:42px;
    height:44px;
    font-size:22px;
  }
  .step-readout {
    display:flex;
    flex-direction:column;
    gap:5px;
    align-items:flex-end;
    margin-left:auto;
  }
  .step-readout .micro-label {
    font-size:7px;
    letter-spacing:0;
    max-width:55px;
    text-align:right;
  }
  .step-readout strong {
    font-size:20px;
  }
  .transport-bar>.text-button {
    font-size:9px;
    gap:4px;
    padding:9px 0;
    margin-left:0;
    max-width:35px;
    line-height:1.5;
  }
  .transport-bar>.text-button span {
    display:none;
  }
  .canvases {
    min-height:0;
    padding:80px 17px 15px;
    gap:16px;
  }
  .culture {
    width:100%;
    max-width:360px;
  }
  .stage-annotation {
    left:14px;
    top:19px;
    font-size:8px;
    gap:5px;
  }
  .stage-annotation .micro-label {
    font-size:8px;
  }
  .reference {
    top:14px;
    right:14px;
    gap:8px;
  }
  .reference canvas {
    width:38px;
    height:38px;
  }
  .reference strong {
    font-size:19px;
  }
  .reference .micro-label {
    font-size:7px;
  }
  .dish:before {
    inset:6px;
  }
  .canvas-axis {
    font-size:7px;
    margin-top:13px;
  }
  .culture-caption {
    margin-inline:14px;
    padding-top:14px;
    padding-bottom:15px;
    gap:12px;
  }
  .culture-caption p {
    font-size:10px;
    max-width:76%;
  }
  .state-indicator {
    font-size:8px;
  }
  .metric-list {
    padding-top:20px;
    gap:18px 14px;
    grid-template-columns:repeat(2,1fr);
  }
  .metric-list>div {
    border-right:0;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    border-bottom:1px solid var(--line);
    padding:0 0 14px;
    column-gap:8px;
  }
  .metric-list>div:last-child {
    border-bottom:1px solid var(--line);
    padding-bottom:14px;
  }
  .metric-list dt {
    font-size:9px;
    margin-bottom:0;
    grid-column:1;
    line-height:1.5;
  }
  .metric-list dd {
    font-size:21px;
    grid-column:2;
    grid-row:1/3;
  }
  .metric-list>div>span {
    font-size:8px;
    grid-column:1;
    margin-top:4px;
  }
  .toolbox {
    width:100%;
  }
  .tool-section summary {
    font-size:14px;
    min-height:55px;
  }
  .tool-content .help {
    font-size:12px;
  }
  .field-label,.range-label {
    font-size:12px;
  }
  .brush-options {
    grid-template-columns:repeat(4,1fr);
  }
  .brush-options button {
    padding:10px 4px;
    text-align:center;
    font-size:11px;
    min-height:44px;
  }
  .preset-actions button {
    font-size:12px;
    min-height:44px;
  }
  .checkpoint-card {
    margin-top:16px;
    padding-top:18px;
  }
  .curve-panel {
    width:100%;
    padding-top:27px;
  }
  .curve-panel h2 {
    font-size:34px;
  }
  .chart-wrap {
    height:190px;
  }
  .chart-foot {
    font-size:8px;
    gap:20px;
  }
  .curve-panel>.help {
    font-size:12px;
  }
  .notebook {
    display:block;
    margin-top:40px;
    padding:36px 0;
  }
  .notebook h2 {
    font-size:38px;
    line-height:1.13;
  }
  .notebook .eyebrow {
    font-size:9px;
    margin-bottom:18px;
  }
  .notebook-intro>p:last-child {
    font-size:12px;
  }
  .notebook-tools {
    margin-top:30px;
  }
  .export-group {
    display:flex;
    align-items:center;
    gap:15px;
  }
  .export-group h3 {
    font-size:13px;
  }
  .export-group .help {
    font-size:11px;
    max-width:175px;
  }
  .export-actions {
    gap:6px;
    margin:0;
  }
  .export-actions button {
    font-size:11px;
    gap:8px;
    padding:10px;
    min-height:44px;
  }
  .export-group:first-child .export-actions {
    flex-direction:column;
  }
  .notebook .tool-content>.export-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .diagnostic-result {
    font-size:10px;
  }
  .difference-panel {
    padding:22px 18px;
    margin-top:35px;
  }
  .section-heading h2 {
    font-size:34px;
  }
  .section-heading .eyebrow {
    font-size:9px;
  }
  .section-heading>span {
    font-size:9px;
    line-height:1.8;
  }
  .difference-content {
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .difference-content>div {
    grid-column:1/-1;
  }
  .difference-content>div p {
    font-size:12px;
  }
  .difference-content figcaption {
    font-size:9px;
  }
  .difference-content figcaption strong {
    font-size:12px;
  }
  .difference-content>div p:last-child {
    margin-bottom:0;
  }
  .divergence-plot {
    margin-top:24px;
  }
  .divergence-plot .section-title {
    display:block;
  }
  .divergence-plot .chart-legend {
    margin-top:13px;
  }
  .divergence-plot .chart-wrap {
    height:150px;
  }
  .branch-label {
    font-size:10px;
    margin-bottom:15px;
    min-height:46px;
  }
  body[data-mode=compare] .canvases,body[data-paired=true] .canvases {
    padding:85px 14px 18px;
    min-height:0;
    gap:16px;
  }
  body[data-mode=compare] .culture,body[data-paired=true] .culture {
    width:calc(50% - 8px);
  }
  body[data-mode=compare] .canvas-axis,body[data-paired=true] .canvas-axis {
    width:95%;
    font-size:8px;
  }
  .loading-overlay {
    padding:25px 18px;
  }
  .loading-overlay strong {
    font-size:26px;
  }
  .loading-glyph {
    width:36px;
    height:36px;
    margin-bottom:25px;
  }
  .loading-overlay p {
    font-size:11px;
  }
  footer {
    flex-wrap:wrap;
    gap:24px;
    padding:30px 0;
    font-size:10px;
  }
  .footer-brand {
    font-size:29px;
  }
  footer p {
    max-width:175px;
    font-size:9px;
  }
  footer>a:last-child {
    width:100%;
    padding-top:18px;
    border-top:1px solid var(--line);
  }
  dialog {
    width:calc(100vw - 20px);
    max-height:94dvh;
    padding:26px 22px;
  }
  .dialog-heading h2 {
    font-size:39px;
    line-height:1.06;
  }
  .dialog-heading {
    gap:12px;
  }
  .dialog-heading .eyebrow {
    font-size:8px;
    line-height:1.7;
    margin-bottom:18px;
  }
  .dialog-heading .icon-button {
    width:36px;
    height:38px;
    font-size:22px;
  }
  .dialog-intro {
    font-size:12px!important;
  }
  .results-facts {
    gap:12px;
  }
  .results-facts dt {
    font-size:8px;
    line-height:1.6;
  }
  .results-facts dd {
    font-size:22px;
  }
  .results-scroll-hint {
    display:block;
    color:var(--accent);
    font-size:11px;
  }
  .results-table {
    min-width:570px;
  }
  .results-warning {
    padding:18px;
  }
  .results-warning ul {
    font-size:11px;
  }
  .result-card summary {
    font-size:11px;
  }
  .rule-diagram {
    gap:8px;
    padding:22px 0;
  }
  .rule-diagram strong {
    font-size:31px;
  }
  .rule-diagram span {
    font-size:8px;
    line-height:1.6;
    max-width:62px;
  }
  .rule-diagram b {
    font-size:12px;
  }
  .about-methods {
    grid-template-columns:1fr;
    gap:20px;
  }
  .about-methods section {
    border-bottom:1px solid var(--line);
    padding-bottom:12px;
  }
  .about-methods h3 {
    font-size:31px;
    margin:10px 0;
  }
  .about-methods p {
    font-size:12px;
  }
  .guide-note {
    padding-left:17px;
  }
  .guide-note p {
    font-size:12px;
  }
  .notice {
    bottom:15px;
    font-size:12px;
    padding:12px 16px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}