/* Content determines pacing; narrow and short screens retain the same controls. */
.problem__pin { min-height: 0; padding-block: clamp(76px,8vw,112px) 64px; }
.problem__copy { grid-template-columns: minmax(0,1fr); gap: 20px; }
.problem__copy .display { font-size: clamp(30px,3.8vw,56px); }
.problem__result { max-width: none; margin: 0; }
.problem__board { height: 270px; margin-top: 8px; }
.problem__board .slate { display: none; }
.problem__board .note {
  width: min(16%,170px); height: 120px; aspect-ratio: auto;
  left: calc((var(--flow-index) + .5) * 20% - min(8%,85px));
  top: calc(50% - 60px); right: auto; bottom: auto;
  font-size: clamp(15px,1.5vw,19px); padding: 12px;
}
.problem__board .n1, .problem__board .n4 { top: calc(50% - 42px); }
.problem__board .n2 { top: calc(50% - 74px); }
.problem__board .note.is-connected { background: #e3fca0; }
.problem__board .knot__label { top: 0; }
.problem__board.is-static .note { left: calc((var(--flow-index) + .5) * 20%); top: 50%; }
.problem__board.is-static .flow-arrows { opacity: 1; }
.system__pin { min-height: 0; height: auto; padding-block: clamp(76px,8vw,112px) 64px; }
.system__track {
  width: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain;
  padding-top: 84px; padding-bottom: 28px; scrollbar-width: thin;
  padding-inline: max(var(--gutter),calc((100% - min(78vw,360px)) / 2));
  scrollbar-color: var(--lime) transparent; will-change: auto;
}
.system__track .svc { width: min(78vw,360px); scroll-snap-align: center; }
.system__track article.svc:nth-of-type(even) { margin-top: 0; }
.system .wire, .system__progress { display: none; }
.system__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.system__controls > span { display: grid; gap: 4px; text-align: center; }
.system__controls b { font: 12px var(--f-mono); color: var(--lime); }
.system__controls small { font-size: 11px; color: var(--muted); }
.system__controls button { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 1px solid var(--line); border-radius: 50%; color: var(--lime); background: #19191d; font-size: 24px; touch-action: manipulation; }
.system__controls button:disabled { opacity: .3; cursor: default; }
.system__controls button:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.system__meaning { margin-top: 18px; }
.system__track:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.shop__copy > .display { grid-row: 2; }
.shop__copy > .btn { grid-row: 3; }
.shop__copy > .partners { grid-row: 3; align-self: center; }
@media (max-width: 900px) {
  .problem__pin { padding-block: 72px 48px; }
  .problem__copy .display { font-size: clamp(28px,5.4vw,44px); }
  .problem .d-line--apart { white-space: normal; }
  .problem__board { height: 440px; margin-top: 24px; }
  .problem__board .note { width: min(220px,72%); height: 64px; left: calc(50% - min(110px,36%)); top: calc((var(--flow-index) + .5) * 20% - 32px); font-size: 15px; padding: 8px 12px; }
  .problem__board .n1, .problem__board .n4 { left: calc(50% - min(110px,36%) + 12px); }
  .problem__board .n2 { left: calc(50% - min(110px,36%) - 12px); }
  .problem__board.is-static .note { left: 50%; top: calc((var(--flow-index) + .5) * 20%); }
  .problem__board .knot__label { top: -20px; font-size: 20px; }
  .note.is-connected > span { gap: 3px; }
  .system__head { grid-template-columns: minmax(0,1fr); }
  .system__sub { max-width: 40ch; }
  .shop__copy > .btn { margin-top: 24px; }
}
@media (max-width: 600px) {
  .problem__copy .display { font-size: clamp(25px,6.6vw,36px); }
  .problem__result { font-size: 16px; }
  .manifest .bust { max-width: min(460px,76svh); }
}