@media (max-width: 980px) {
    main { grid-template-columns: 1fr; }
    .side-resizer { display: none; }
    .side { border-left: 0; border-top: 1px solid var(--line); }
  }

@media (max-width: 700px) {
  header.bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px 14px;
  }
  .brand {
    min-width: 0;
  }
  .brand-sub {
    display: none;
  }
  .controls {
    display: contents;
  }
  .language-control {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
    justify-self: end;
  }
  .mode-ctrl {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .mode-ctrl .seg {
    width: 100%;
  }
  .mode-ctrl .seg button {
    flex: 1 1 0;
    min-width: 0;
  }
  .config-control {
    grid-row: 3;
  }
  .practice-action {
    grid-row: 4;
  }
  .stage {
    padding: 16px 12px 8px;
  }
  .lesson {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    margin-bottom: 16px;
  }
  .lesson-select-wrap,
  .lesson-select-button,
  .lesson-compare-control,
  .compare-select-wrap,
  .compare-select-button {
    width: 100%;
  }
  .lesson-compare-control {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }
  .lesson-toggle {
    justify-self: start;
  }
  .lesson-collapsible {
    max-height: none;
  }
  .board-wrap {
    padding: 16px 0 12px;
    overflow: hidden;
  }
  .board-wrap::after {
    content: "";
    position: absolute;
    top: 74px;
    right: 0;
    bottom: 12px;
    width: 34px;
    pointer-events: none;
    background: linear-gradient(to left, var(--panel), rgb(255 255 255 / 0));
  }
  .board-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 0 14px 12px;
    margin-bottom: 14px;
  }
  .board-hint {
    max-width: 100%;
  }
  .board-scroll-hint {
    display: block;
  }
  .practice-guide {
    grid-template-columns: 1fr;
  }
  .disks {
    gap: 16px;
    padding: 0 14px 14px;
    scroll-padding-inline: 14px;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--line-2) transparent;
    scrollbar-width: thin;
  }
  .disk {
    scroll-snap-align: start;
  }
  .connect-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }
  .connect-actions {
    flex-wrap: wrap;
  }
  .connect-actions .btn {
    flex: 1 1 150px;
  }
  .test-actions .btn {
    flex: 1 1 140px;
  }
  .test-action-finish {
    margin-left: 0;
  }
  .palette-head {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .palette-head .btn {
    align-self: flex-start;
  }
  footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 430px) {
  .config-control {
    width: 100%;
    justify-content: space-between;
  }
  .stepper {
    flex: 0 0 auto;
  }
  .practice-action {
    width: 100%;
  }
}