/* Keep the native Socket scene, with a compact layout and usable touch targets. */
@media (max-width: 899px) {
  html { scroll-padding-top: 84px; }
  .nav { width: 100%; max-width: 100vw; height: 68px; gap: 8px; padding-inline: 16px; }
  .nav-links { display: none; }
  .nav-status { display: none; }
  .nav .brand { flex: 0 0 auto; }
  .nav-app { min-height: 44px; padding: 10px 13px; gap: 8px; font-size: 12px; }
  .nav-app .nav-app-label, .nav-app .nav-app-arrow { display: inline; }
  .nav-app .nav-app-label { transform: none; }
  #sound-toggle, .menu-button { width: 44px; height: 44px; flex: 0 0 44px; }
  .menu-button { display: block; }
  .menu-button span { left: 13px; top: 17px; }
  .menu-button span + span { top: 24px; }
  .nav.dark .menu-button { color: var(--plate); background: #151514dc; border-color: #f4f3ef30; }
  .nav-sheet { top: 74px; left: 12px; right: 12px; }
  .nav-sheet a, .nav-sheet button { min-height: 48px; font-size: 16px; }

  .button, .close-dialog, .console-tabs button, .client-switch button,
  .port-flow-pick button, .port-flow-navigation button { min-height: 44px; }
  .hero-state .text-button, .hero-state #inspect-tool { pointer-events: auto; min-height: 44px; }
  .plug-tag { min-height: 44px; }
  .text-button, .config-details summary { min-height: 44px; }
  .config-details summary { display: flex; align-items: center; }
  .console-section, .console-shell, .result-area { min-width: 0; max-width: 100%; }
  .result-area { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .result-table { min-width: 640px; font-size: 14px; }
  .result-table th { font-size: 11px; }
  .result-table td { padding: 15px 8px; }
  .result-table .token-name { min-width: 180px; }
  .token-name small { display: block; margin-top: 3px; font-size: 11px; }
  .token-image { width: 34px; height: 34px; flex: 0 0 34px; }
  .metric-grid { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { min-width: 0; }
  .metric small { font-size: 11px; }
  .metric strong { font-size: clamp(20px, 5.5vw, 26px); overflow-wrap: anywhere; }
  .mint-code { font-size: 12px; line-height: 1.65; }
  .token-links { flex-wrap: wrap; gap: 6px 18px; }
  .token-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  .pad-row { gap: 12px; }
  .pad-row strong { font-size: 22px; }
  .pad-row small { display: block; font-size: 12px; }
  #query-input, .endpoint-row input, .query-options select { font-size: 16px; }
  .query-options select { min-height: 44px; padding-inline: 6px; }
  .query-options label { display: flex; align-items: center; font-size: 11px; }
  .query-options p { font-size: 13px; line-height: 1.5; }
  #raw-result { font-size: 12px; }

  .port-architecture { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 30px; padding-block: 74px; }
  .port-architecture-copy > p { max-width: 36em; font-size: 17px; }
  .port-architecture-count { margin-top: 32px; }
  .port-architecture-device { width: 100%; max-width: 620px; margin-inline: auto; }
  .port-architecture-tool { font-size: 12px; }
  .port-instrument { min-width: 0; }
  .port-instruments .mono { font-size: 11px !important; }
  .port-instrument-footer > span, .port-board-column > small { font-size: 11px !important; }

  .port-flow-pick { gap: 8px; }
  .port-flow-pick button { padding: 10px 12px; font-size: 13px; }
  .port-flow-navigation { gap: 14px 12px; }
  .port-flow-navigation button { font-size: 12px; }
  .port-flow-navigation button span { font-size: 11px; }
  .port-flow-details { min-height: 0; }
  .port-flow-details li[data-active="true"] { position: relative; inset: auto; }
  .port-flow-details p { font-size: 16px; }
  .port-flow-command, .port-flow-kicker { font-size: 11px; }
  .port-flow-receipt { transform: none; max-width: min(100%, 440px); }
  .port-flow-receipt-head, .port-flow-receipt dl > div, .port-flow-stamp { font-size: 12px; }
  .port-flow-receipt dl > div { grid-template-columns: 83px minmax(0, 1fr); }
  .port-flow-receipt dl > div[data-visible="true"] { max-height: 160px; }
  .port-flow-receipt-note { font-size: 11px; }

  dialog { width: min(650px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 22px; overflow-y: auto; overscroll-behavior: contain; }
  .dialog-head { margin-bottom: 20px; }
  .dialog-head .mono, .endpoint-label { font-size: 11px; }
  .close-dialog { width: 44px; flex: 0 0 44px; padding: 0; }
  .client-switch { gap: 4px; margin-block: 20px; }
  .client-switch button { padding: 9px 12px; font-size: 13px; }
  .endpoint-row { align-items: center; gap: 8px; }
  .endpoint-row input { min-height: 44px; }
  .endpoint-row .text-button { flex: 0 0 auto; font-size: 13px; }
  .connect-steps { font-size: 15px; line-height: 1.55; }
  .connect-note { font-size: 13px !important; }
  .config-details summary { font-size: 14px; }
  .config-details pre { font-size: 12px; padding: 14px; }
  .config-details > div { flex-wrap: wrap; gap: 4px 20px; }
  .config-details .text-button { font-size: 13px; }
  .dialog-bottom { flex-wrap: wrap; gap: 12px; margin-top: 18px; padding-top: 18px; }
  .dialog-bottom .mono { font-size: 11px; }
  .dialog-bottom .button { font-size: 13px; padding: 11px 16px; }
  .docs-list p { font-size: 15px; }
  .docs-source { font-size: 13px !important; }
  .port-docs-head .close-dialog { width: 44px; height: 44px; flex-basis: 44px; }
  .port-docs-layout { height: min(calc(92svh - 81px), 970px); }
  .port-docs-toc a { display: flex; align-items: center; min-height: 44px; font-size: 13px; }
  .port-docs-dialog pre, .port-docs-dialog code { font-size: 12px; }
  .port-docs-endpoint > code { font-size: 12px; }
  .port-docs-endpoint > .text-button, .port-docs-code .text-button { min-height: 44px; font-size: 13px; }
}

@media (max-width: 759px) {
  :root { --gutter: 18px; }
  .nav .brand { font-size: 30px; }
  .hero { height: 920px; min-height: 0; }
  .hero-copy { width: 100%; padding: 96px var(--gutter) 0; }
  .hero h1 { font-size: clamp(43px, 12.5vw, 56px); line-height: .96; white-space: nowrap; }
  .hero-copy > p { max-width: 460px; font-size: 15px; line-height: 1.5; margin-top: 18px; }
  .hero-copy > .hero-endline { font-size: 14px; margin-top: 8px; }
  .hero-actions { gap: 8px; margin-top: 18px; }
  .hero-actions .button { min-height: 44px; padding: 11px 13px; font-size: 13px; gap: 8px; }
  .hero-hint { font-size: 11px; margin-top: 14px; line-height: 1.5; }
  .hero-socket-anchor { left: 50%; top: 480px; width: clamp(144px, 44vw, 200px); height: clamp(144px, 44vw, 200px); transform: translateX(-50%); }
  .hero-plugs-anchor { top: 690px; left: 10%; width: 80%; height: 170px; }
  .hero-state { top: auto; bottom: 28px; left: var(--gutter); right: var(--gutter); width: auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
  .hero-state .state-eyebrow, .hero-state > p, .hero-state .state-tools, .hero-state .state-activity { display: none; }
  .hero-state h2 { font-size: 18px; line-height: 1.2; min-width: 0; gap: 8px; }
  .hero-state .text-button { margin: 0 0 0 auto; font-size: 12px; gap: 6px; flex: 0 0 auto; }
  .hero-bottom { display: none; }
  .plug-tag { min-height: 44px; padding: 8px 10px; font-size: 11px; gap: 6px; }
  .intro-word { top: 17%; font-size: 66px; }
  .intro-caption { top: 25%; font-size: 11px; }

  .port-flow-pin { padding-top: 78px; padding-bottom: 54px; }
  .port-flow-head h2 { font-size: clamp(36px, 9.5vw, 52px); }
  .port-flow-graphic { display: block; height: 228px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .port-flow-schematic { width: 900px; min-width: 900px; max-height: none; height: 225px; }
  .port-flow-stage { min-width: 0; margin-top: 28px; }
  .port-flow-details h3 { font-size: 28px; }
  .port-flow-foot { margin-top: 26px; }

  .port-architecture, .port-instruments { padding-block: 65px; }
  .port-architecture h2, .port-instruments h2 { font-size: clamp(39px, 10.5vw, 54px); }
  .port-architecture-labels { position: relative; inset: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 8px; margin-top: 14px; }
  .port-architecture-tool { min-height: 44px; border-top: 1px solid var(--line); padding: 10px 6px; justify-content: space-between; font-size: 13px; }
  .port-instruments-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .port-instrument { padding: 22px; }
  .port-instrument-title > strong { font-size: 24px; }
  .port-instrument > p { font-size: 16px; }
  .port-coin-scope { min-height: 315px; }
  .port-coin-face { left: 78px; }
  .port-coin-rail { width: 71px; }
  .port-coin-rail > span { font-size: 11px !important; }
  .port-board-scope { margin-inline: 0; gap: 12px; }
  .port-board-column > span { font-size: 11px !important; }
  .port-board-slots { padding-inline: 10px; }
  .port-instrument-bundle, .port-instrument-board { min-height: 330px; }

  .console-section { padding-top: 0; padding-bottom: 64px; }
  .section-head { margin-bottom: 28px; }
  .section-head h2 { font-size: 42px; }
  .section-head > p { font-size: 16px; }
  .console-head { gap: 12px; padding: 17px 16px; }
  .console-head .mono { font-size: 11px; }
  .console-head > span:last-child { font-size: 10px; text-align: right; }
  .console-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 14px 12px 0; }
  .console-tabs button { font-size: 13px; padding: 9px 8px; }
  #query-form { padding: 24px 16px 0; }
  .query-label { font-size: 11px; line-height: 1.6; }
  .query-input-row { gap: 8px; padding-block: 10px; }
  #query-input { font-size: 17px; flex-basis: calc(100% - 32px); padding-block: 10px; }
  .query-input-row .button { margin: 3px 0 4px 26px; padding: 11px 17px; font-size: 13px; }
  .query-options { align-items: flex-start; flex-wrap: wrap; gap: 6px 14px; }
  .query-options p { max-width: 100%; flex: 1 1 180px; }
  .result-area { padding: 20px 16px; }
  .console-footer { padding: 14px 16px; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
  .console-footer .mono { font-size: 11px; line-height: 1.7; max-width: 100%; overflow-wrap: anywhere; }
  .console-footer button { font-size: 13px; }
  .empty-result .mono { font-size: 11px; }
  .bundle-verdict { font-size: 24px; line-height: 1.2; }
  .signal-reading p { font-size: 16px; }
  .bundle-note { font-size: 14px; }
  .boundaries-section { padding-bottom: 65px; }
  .boundary-copy > p { font-size: 21px; }
  .closing { padding-block: 68px 54px; }
  .closing h2 { font-size: clamp(40px, 11vw, 52px); }
  .closing-path { font-size: 10px; gap: 7px; }
  .closing-path i { width: 15px; }
  footer .mono { font-size: 11px; }
  footer .text-button { font-size: 14px; }
  footer > .mono:last-child { font-size: 11px; }
  dialog { padding: 20px; }
  dialog h2 { font-size: 34px; }
  .port-docs-layout { height: calc(94svh - 71px); }
  .port-docs-toc { gap: 3px 14px; }
  .port-docs-dialog h2 { font-size: 36px !important; }
  .port-docs-dialog p { font-size: 15px; }
  .port-docs-scroll { padding-inline: 18px; }
  .port-docs-section .port-docs-label { font-size: 11px; }
}

@media (max-width: 374px) {
  :root { --gutter: 16px; }
  .nav { padding-inline: 12px; gap: 6px; }
  .nav-app .nav-app-label { display: none; }
  .nav-app::before { content: "Connect"; }
  .nav-app { padding-inline: 12px; }
  .hero-actions .button { padding-inline: 11px; font-size: 12px; }
  .hero-plugs-anchor { left: 13%; width: 74%; }
  .plug-tag { font-size: 10px; padding-inline: 9px; }
  .hero-state h2 { font-size: 17px; }
  .hero-state .text-button { font-size: 11px; }
  .port-instrument { padding: 19px; }
  .port-instrument-title > strong { font-size: 22px; }
  .client-switch button { padding-inline: 10px; font-size: 12px; }
  dialog h2 { font-size: 31px; }
}

@media (max-width: 759px) and (max-height: 760px) {
  .hero { height: 860px; }
  .hero-socket-anchor { top: 454px; }
  .hero-plugs-anchor { top: 623px; }
}