/* ---------- Mobile ---------- */
  @media (max-width: 720px) {
    :root { --pad-x: 14px; }
    header { padding: 14px var(--pad-x) 10px; }
    .brand .subtitle { display: none; }
    .brand h1 { font-size: 16px; }
    .search-dialog {
      margin: 16px;
      max-width: calc(100vw - 32px);
      max-height: calc(100dvh - 32px);
    }
    .search-popup-panel { max-height: calc(100dvh - 32px); }
    .search-toggle { width: 36px; height: 36px; }
    .ll-node { min-width: 46px; height: 46px; font-size: 15px; padding: 0 8px; }
    .ll-arrow { font-size: 22px; }
    .ll-null { font-size: 18px; }
    .ll-container { padding: 44px 12px 16px; gap: 24px; }
    .dll-node { min-width: 46px; height: 46px; font-size: 15px; padding: 0 8px; }
    .dll-arrow { font-size: 22px; }
    .dll-null { font-size: 18px; }
    .dll-container { padding: 50px 12px 16px; gap: 24px; }
    .dsu-svg { min-height: 280px; }
    .tree-row { gap: 10px; }
    .tree-row.tree-row-stack { flex-direction: column; }
    .tree-queue-panel { padding: 10px 12px 14px; gap: 10px; }
    .tree-queue-item { min-width: 36px; padding: 6px 9px; font-size: 13px; }
    .tree-stack-panel { padding: 10px 14px 12px; }
    .tree-stack-item { min-width: 44px; padding: 6px 10px; font-size: 13px; }
    .sm-cell { width: 28px; height: 36px; font-size: 14px; }
    .sm-table-cell { width: 24px; height: 24px; font-size: 11px; }
    .sm-table-rowlabel { width: 50px; font-size: 9.5px; }
    .mode-card { min-height: 200px; padding: 26px 22px 22px; }
    .mode-name { font-size: 18px; }
    .arch-controls, .cv-controls { gap: 8px; padding: 10px; flex-wrap: wrap; }
    .arch-flow-dropdown { min-width: 120px; font-size: 11px; }
    .cv-speed-wrap { display: none; }
    .arch-stage { padding: 12px; }
    .arch-narration { padding: 12px; }
    .arch-narration-text { font-size: 13px; }
    .arch-speed-wrap { display: none; }
    .pattern-info { flex-direction: column; gap: 12px; padding: 12px; }
    .pattern-stage { padding: 12px; }
    .pattern-code-panel.open { max-height: 280px; }
    .code-soon-card { padding: 24px 18px; }
    .code-soon-features { grid-template-columns: 1fr; }
    .code-soon-card h2 { font-size: 22px; }
    .graph-svg { min-height: 280px; }
    .graph-floating-node { width: 42px; height: 42px; font-size: 14px; }
    .controls {
      padding: 10px;
      gap: 0;
      flex-direction: column;
      align-items: stretch;
    }
    .controls button { padding: 9px 12px; font-size: 13px; }
    .controls .group-label { display: none; }
    .divider { display: none; }
    .speed-wrap { padding: 4px 10px; }
    input[type="range"] { width: 100%; flex: 1; }

    /* Primary stays visible at the top of the controls bar */
    .controls-primary {
      order: 0;
      width: 100%;
      flex-wrap: wrap;
      gap: 6px;
    }
    .controls-secondary {
      order: 1;
      width: 100%;
      flex-direction: row;
      align-items: stretch;
      gap: 8px;
    }
    .controls-secondary input[type="text"] { width: 100%; flex: 1 1 100%; }
    .controls-primary .speed-wrap { width: 100%; }
    .legend { gap: 10px; font-size: 11px; padding: 4px 8px; }
    .canvas { padding: 14px 8px; min-height: 340px; }
    .stage { margin-top: auto; }
    .slot-index { font-size: 10.5px; padding: 2px 0; }
    .pointer .badge { padding: 3px 9px 3px 3px; }
    .pointer .badge .letter { min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; }
    .pointer .badge .num { font-size: 12px; }
    .pointer .badge::after { border-left-width: 6px; border-right-width: 6px; border-top-width: 7px; }
    .status { padding: 10px 12px; }
    .status-meta .chip { font-size: 10.5px; padding: 3px 8px; }
    .step-text { font-size: 12.5px; }

    /* Code panel as inline section that extends the page */
    .workspace { flex-direction: column; min-height: 0; }
    main { min-height: 0; }
    .code-panel {
      position: static;
      width: 100% !important;
      flex: 0 0 auto;
      height: 0;
      overflow: hidden;
      transform: none;
      transition: opacity 0.25s ease;
      opacity: 0;
      border-left: none;
      border-top: 1px solid var(--panel-border);
      border-radius: 0;
      box-shadow: none;
      background: linear-gradient(180deg, rgba(15,23,42,0.85), rgba(10,14,26,0.9));
    }
    #screen-viz.code-open { overflow-y: auto; }
    .code-open .workspace { flex: 0 0 auto; }
    .code-open main {
      flex: 0 0 auto;
      min-height: max(380px, calc(100dvh - 240px));
    }
    .code-open .code-panel { height: auto; overflow: hidden; opacity: 1; }
    .code-open .code-body { overflow-x: auto; overflow-y: visible; }
    .code-tab { padding: 6px 12px; font-size: 12px; min-height: 34px; }
    .code-pre { font-size: 12.5px; padding: 12px 14px; }
  }

  @media (max-width: 480px) {
    header .badge { font-size: 11px; padding: 5px 9px; }
    .brand .logo { width: 34px; height: 34px; }
    .brand h1 { font-size: 15px; }
    .controls button { padding: 8px 10px; font-size: 12.5px; min-height: 38px; }
    .canvas { padding: 12px 6px; }
    .modal-dialog { max-width: calc(100vw - 24px); }
    .modal-panel { max-height: 94vh; border-radius: 14px; }
    .modal-header { padding: 14px 16px 10px; }
    .modal-body { padding: 12px 16px 16px; }
    .op-row .field { flex: 1 1 100%; }
    .op-row .op-btn { width: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }