@media (max-width: 1024px) {
  .site-sidebar {
    position: fixed;
    height: 100vh;
    transform: translateX(-100%);
    box-shadow: 20px 0 48px rgba(0, 0, 0, 0.4);
  }

  body:not(.sidebar-collapsed) .site-sidebar {
    transform: translateX(0);
    width: var(--sidebar-width);
  }

  .sidebar-mobile-head {
    display: flex;
  }

  .workspace {
    width: 100vw;
  }

  .workspace-header {
    padding: 0 24px;
  }

  .view-stack {
    padding: 28px 24px 40px;
  }

  .overview-hero,
  .platform-categories,
  .support-grid,
  .overview-grid,
  .save-layout,
  .status-main-grid,
  .api-docs-layout,
  .doc-grid,
  .api-detail-grid,
  .endpoint-grid,
  .result-meta-grid,
  .action-stack-new {
    grid-template-columns: 1fr;
  }

  .hero-proof-grid,
  .mini-grid,
  .status-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .save-sidebar,
  .api-docs-index {
    position: static;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(2.2rem, 12vw, 4rem);
    max-width: none;
    letter-spacing: -0.06em;
  }

  .panel-shell {
    padding: 22px !important;
  }

  .hero-actions,
  .action-bar,
  .mode-switch {
    display: grid;
    grid-auto-flow: row;
    width: 100%;
  }

  .mode-switch {
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 0;
  }

  .mode-button {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--panel-line);
    background: #090909;
  }

  .hero-proof-grid,
  .mini-grid,
  .status-cards,
  .doc-row,
  .overview-endpoint-row,
  .architecture-item {
    grid-template-columns: 1fr;
  }

  .doc-row,
  .overview-endpoint-row {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .workspace-header,
  .view-stack {
    padding-left: 16px;
    padding-right: 16px;
  }

  .panel-shell {
    padding: 16px !important;
  }

  .hero-label {
    font-size: 0.68rem;
    padding: 6px 12px;
  }

  .mini-grid,
  .result-meta-grid,
  .action-stack-new,
  .status-cards,
  .hero-proof-grid {
    grid-template-columns: 1fr !important;
  }

  .result-art-new {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }

  .result-info-new h3 {
    font-size: 1.15rem;
  }

  .primary-button,
  .ghost-button {
    width: 100%;
  }

  .status-header,
  .result-header-new,
  .result-brand-new {
    flex-direction: column;
    align-items: flex-start;
  }

  pre, code {
    word-break: break-all;
    white-space: pre-wrap;
  }
}

@media (max-width: 980px) {
  .hero-category-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .hero-category-buttons {
    grid-template-columns: 1fr;
  }

  .category-button {
    min-height: 112px;
    padding: 16px;
  }
}

@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sidebar-note-card,
  .sidebar-chip-row,
  .scroll-brace {
    display: none;
  }
}