/* Snake-in-the-box: small playable cubes and published high-dimensional paths. */
.snake-section { border-top: 1px solid var(--ink); background: #fff; }
.snake-section .experiment-heading h2 { white-space: normal; }
.snake-intro { max-width: 46rem; margin: 1.6rem auto 0; font-size: 1.18rem; line-height: 1.6; }
.snake-lab { margin-top: 2rem; scroll-margin-top: 6rem; background: #fff; }
.snake-demo-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.6rem 1.8rem; border-bottom: 1px solid var(--line); }
.snake-demo-heading .control-label { margin: 0 0 .6rem; }
.snake-demo-heading h3 { margin: 0; font-size: clamp(1.5rem,2.6vw,2.2rem); font-weight: 500; letter-spacing: -.04em; }
.snake-demo-heading a { font: .72rem/1.6 var(--mono); text-underline-offset: 4px; }
.snake-grid { display: grid; grid-template-columns: 17rem minmax(0,1fr); }
.snake-controls { padding: 1.5rem; border-right: 1px solid var(--line); background: #fbfaf7; }
.snake-controls > label { display: block; margin-bottom: .6rem; }
.snake-controls select { width: 100%; padding: .75rem; color: var(--ink); background: white; border: 1px solid var(--ink); border-radius: 0; font: .9rem var(--mono); }
.snake-controls p { font-size: .88rem; line-height: 1.6; }
.snake-score { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: 1.8rem 0 1.2rem; }
.snake-score span { display: block; min-height: 2rem; font: .63rem/1.5 var(--mono); }
.snake-score strong { display: block; font: 2.5rem/1.2 var(--mono); letter-spacing: -.07em; }
.snake-score > div:first-child strong { color: #b94300; }
.snake-moves { display: flex; flex-wrap: wrap; gap: .4rem; }
.snake-lab button { min-height: 2.75rem; padding: .55rem .7rem; border: 1px solid var(--ink); background: white; cursor: pointer; font: .78rem/1.4 var(--mono); }
.snake-lab button:hover { background: var(--orange-soft); }
.snake-lab button:disabled { opacity: .4; cursor: default; }
.snake-moves button[aria-disabled="true"] { color: #777; border-color: #ccc; background: #f0efec; text-decoration: line-through; }
.snake-lab :is(button, select, input, textarea, a):focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.snake-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.snake-actions button { flex: 1; }
.snake-lab .snake-primary { color: #fff; background: var(--ink); }
.snake-lab .snake-primary:hover { background: var(--deep-blue); }
.snake-lab .snake-milestone { width: 100%; margin-top: .6rem; text-align: left; background: var(--orange-soft); }
.snake-lab .snake-show-optimal { width: 100%; margin-top: .6rem; color: #fff; background: var(--orange); border-color: var(--orange); }
.snake-lab .snake-show-optimal:hover { color: var(--ink); background: var(--orange-soft); border-color: var(--ink); }
.snake-controls .snake-status { min-height: 4.2rem; padding-top: .85rem; border-top: 1px solid var(--line); color: var(--deep-blue); }
.snake-stage { min-width: 0; padding: 1.5rem 1.5rem 1rem; background: radial-gradient(ellipse at 50% 50%,#f8f6f0,white 75%); }
.snake-stage .stage-topline { gap: 1rem; flex-wrap: wrap; line-height: 1.5; }
#snake-graph { display: block; width: 100%; height: auto; margin: 1rem 0; overflow: visible; }
.snake-edge path { fill: none; stroke-linecap: round; pointer-events: none; }
.snake-edge-halo { stroke: #fff; stroke-width: 6; }
.snake-edge-line { stroke: #a1adb0; stroke-width: 1.8; }
.snake-edge.is-adjacent .snake-edge-line { stroke: #245da0; stroke-width: 3.5; }
.snake-edge.is-available .snake-edge-line { stroke: #007580; stroke-width: 4; }
.snake-edge.is-adjacent .snake-edge-halo { stroke-width: 8; }
.snake-path { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.snake-conflict { fill: none; stroke: var(--off-red); stroke-width: 3; stroke-dasharray: 6 5; }
.snake-node { cursor: pointer; }
.snake-node .hit { fill: transparent; }
.snake-node .dot { fill: #e2e3de; stroke: white; stroke-width: 2; }
.snake-node text { font: 12px var(--mono); fill: #62717a; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.snake-node .cross { display: none; stroke: #8b8983; stroke-width: 1.5; pointer-events: none; }
.snake-node.is-blocked .dot { fill: #efeeeb; }
.snake-node.is-blocked .cross { display: block; }
.snake-node.is-path .dot { fill: var(--orange); }
.snake-node.is-head .dot { fill: var(--ink); stroke: var(--orange); stroke-width: 4; }
.snake-node.is-legal .dot { fill: #fff; stroke: #007580; stroke-width: 3; }
.snake-node.is-legal text { fill: #005560; font-weight: 700; }
.snake-node.is-neighbor .dot { stroke: #245da0; stroke-width: 3; }
.snake-node.is-neighbor.is-legal .dot { stroke: #007580; }
.snake-node.is-inspected .dot { stroke: var(--ink); stroke-width: 4; }
.snake-node.is-head .dot { stroke: var(--orange); }
.snake-node:focus { outline: none; }
.snake-node:focus .dot,.snake-node:hover .dot { stroke: var(--ink); stroke-width: 4; }
.snake-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem 1.3rem; font: .7rem var(--mono); }
.snake-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.snake-legend i { display: inline-flex; align-items: center; justify-content: center; width: .7rem; height: .7rem; border-radius: 50%; font-style: normal; }
.legend-path { background: var(--orange); }
.legend-legal { border: 2px solid #007580; }
.legend-blocked { color: #777; }
.snake-legend .legend-adjacent { width: 1.1rem; height: 3px; border-radius: 0; background: #245da0; }
.snake-neighbors { margin: 1.2rem 0 0; padding: .8rem; text-align: center; background: #edf4f7; font: .78rem/1.6 var(--mono); }
#snake-target-progress { display: block; width: 100%; height: .55rem; border: 0; accent-color: #bf4c00; }
#snake-target-progress::-webkit-progress-bar { background: #e2dfd7; }
#snake-target-progress::-webkit-progress-value { background: #bf4c00; }
#snake-target-progress::-moz-progress-bar { background: #bf4c00; }
.snake-controls .snake-target-note { font-size: .76rem; margin: .65rem 0 1.2rem; }
.snake-target-note a { display: block; margin-top: .3rem; text-underline-offset: 3px; }
.snake-available { padding: .7rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.snake-moves button { flex: 1 1 40%; white-space: nowrap; }
.snake-lab.is-solved .snake-status { color: #006557; font-weight: 600; }
.snake-lab.is-solved #snake-target { color: #006557; }
.snake-inspect { min-height: 2.8rem; margin: 1rem auto 0; text-align: center; font: .8rem/1.6 var(--mono); }
.snake-sequence { padding: 1rem 1.5rem; border-top: 1px solid var(--line); }
.snake-sequence summary { cursor: pointer; font: .8rem var(--mono); }
.snake-sequence label { display: block; margin: 1rem 0 .5rem; font-size: .85rem; line-height: 1.5; }
.snake-sequence textarea { width: 100%; padding: .8rem; resize: vertical; border: 1px solid var(--line); background: var(--warm); color: var(--ink); font: .8rem/1.7 var(--mono); }
.snake-gain { color: #a53e00; }
.snake-controls .snake-source-note { font-size: .76rem; }
.snake-source-note a { text-underline-offset: 3px; }
#snake-record-canvas { width: 100%; aspect-ratio: 820 / 420; display: block; }
.snake-coordinate { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; font: .65rem var(--mono); }
.snake-coordinate strong { font-size: 1.1rem; letter-spacing: .12em; }
.snake-scrubber { margin: 1.3rem 0 .4rem; }
.snake-scrubber label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font: .75rem var(--mono); }
.snake-scrubber input { width: 100%; margin: .8rem 0 0; accent-color: #b94300; cursor: pointer; min-height: 28px; }
.snake-progress-track { position: relative; height: 9px; margin: 0 8px; }
.snake-progress-track span { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.snake-scrubber small { display: block; text-align: right; font: .65rem var(--mono); }
.snake-ribbon-panel { padding: 1.3rem 1.5rem; border-top: 1px solid var(--line); }
.snake-ribbon-panel .stage-topline { flex-wrap: wrap; gap: .7rem; line-height: 1.5; }
#snake-ribbon { display: block; width: 100%; height: 170px; margin: 1rem 0; cursor: crosshair; }
.snake-axis-legend { display: flex; flex-wrap: wrap; gap: .7rem; font: .7rem var(--mono); }
.snake-axis-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.snake-axis-legend i { width: .7rem; height: .7rem; background: var(--axis-color); }
@media (max-width: 850px) {
  .snake-grid { grid-template-columns: 14rem minmax(0,1fr); }
  .snake-controls,.snake-stage { padding: 1rem; }
  .snake-demo-heading { align-items: flex-start; flex-direction: column; }
  .snake-section .project-links { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .snake-grid { grid-template-columns: 1fr; }
  .snake-controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .snake-score { margin: 1rem 0; }
  .snake-score span { min-height: auto; margin-bottom: .3rem; }
  .snake-controls .snake-status { min-height: 0; margin-bottom: 0; }
  .snake-demo-heading { padding: 1.2rem; }
  .snake-coordinate strong { font-size: .9rem; }
  .snake-stage .stage-topline,.snake-ribbon-panel .stage-topline { font-size: .6rem; }
  .snake-inspect { font-size: .7rem; }
  #snake-graph { margin-top: 1.5rem; }
}