:root {
  --orynos-viewport-height: 100dvh;
  --orynos-touch-ease: cubic-bezier(.22, 1, .36, 1);
}

html:has(body.orynos-shell) {
  scroll-padding-block: 24px calc(116px + env(safe-area-inset-bottom, 0px));
}

body.orynos-shell :is(input, textarea, select, summary, button, [tabindex]):focus-visible {
  outline-offset: 4px;
}

body.orynos-shell :is(input, textarea, select, [contenteditable="true"]) {
  scroll-margin-block: 100px calc(120px + env(safe-area-inset-bottom, 0px));
}

body.orynos-shell :is(.dock-menu, .account-menu-links) {
  max-height: min(520px, calc(var(--orynos-viewport-height) - 138px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.orynos-shell :is(.admin-table, .studio-table-scroll, .learn-table-scroll, .error-wrap, .table-scroll) {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--o-accent, #7951ba) transparent;
  -webkit-overflow-scrolling: touch;
}

body.orynos-shell :is(.segmented-control, .ap-tabs, .code-tabs) {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scroll-padding-inline: 5px;
}

body.orynos-shell .orynos-touch-enter {
  animation: orynos-touch-enter 360ms var(--orynos-touch-ease) both;
}

@keyframes orynos-touch-enter {
  from { opacity: .72; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  body.orynos-shell :is(.btn, .ap-button, .ap-platform-button, .daw-primary, .docs-button, .admin-main button) {
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 180ms ease, translate 160ms var(--orynos-touch-ease) !important;
  }

  body.orynos-shell :is(.btn, .ap-button, .ap-platform-button, .daw-primary, .docs-button, .admin-main button):active:not(:disabled) {
    translate: 0 1px;
  }

  body.orynos-shell :is(.render-mode-option, .style-card, .ap-layout-choice, .ap-palette-button) {
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
  }

  body.orynos-shell .learn-guide-row .learn-row-arrow {
    transition: translate 200ms var(--orynos-touch-ease);
  }

  body.orynos-shell .learn-guide-row:is(:hover, :focus-visible) .learn-row-arrow {
    translate: 3px -3px;
  }
}

@media (max-width: 900px), (any-pointer: coarse) {
  html body.orynos-shell.orynos-shell.orynos-shell.orynos-shell .orynos-masthead {
    padding-inline: max(22px, env(safe-area-inset-left, 0px)) max(22px, env(safe-area-inset-right, 0px)) !important;
  }

  html body.orynos-shell.orynos-shell :is(.btn, .mini-btn, .seg-btn, .docs-button, .copy-button, .code-tab, .cat-btn, .ap-button, .ap-icon-button, .ap-platform-button, .ap-text-button, .admin-main button, .theme-toggle, .dock-account, .stem-toggle, .stem-mute, .stem-solo, .stem-main .expand, .stem-main .stem-remove) {
    min-height: 44px !important;
    touch-action: manipulation;
  }

  html body.orynos-shell.orynos-shell :is(.mini-btn, .ap-icon-button, .stem-toggle, .stem-mute, .stem-solo, .stem-main .expand, .stem-main .stem-remove) {
    min-width: 44px;
  }

  html body.orynos-shell.orynos-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]):not([type="file"]), textarea, select) {
    font-size: 16px !important;
    min-height: 44px !important;
    max-width: 100%;
  }

  html body.orynos-shell.orynos-shell :is(input[type="range"], .admin-toggle, .admin-engine-option, .orynos-switch-control) {
    min-height: 44px;
  }

  html body.orynos-shell.orynos-shell :is(.dock-menu a, .account-menu-links a, .account-menu-links button, .mix-details > summary, .credit-store > summary, .ai-model-picker > summary, .docs-mobile-toc > summary, .plugin-release-info > summary, .daw-release > details > summary) {
    min-height: 44px;
    box-sizing: border-box;
    align-content: center;
    touch-action: manipulation;
  }

  html body.orynos-shell.orynos-shell .orynos-dock {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100% - max(24px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))) !important;
  }

  html.orynos-keyboard-open body.orynos-shell .orynos-dock {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  body.orynos-shell :is(.ap-tabs, .code-tabs, .segmented-control) {
    overflow-x: auto !important;
    overflow-y: visible;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
  }

  body.orynos-shell :is(.ap-tabs, .code-tabs, .segmented-control) > :is(button, label) {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  html body.orynos-shell .ap-tabs button {
    min-height: 48px;
    padding-inline: 11px;
    white-space: nowrap;
  }

  html body.orynos-shell .ap-link-actions button {
    min-width: 44px;
    min-height: 44px;
  }

  html body.orynos-shell .ap-link-top {
    flex-wrap: wrap;
  }

  html body.orynos-shell .ap-link-actions {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  html body.orynos-shell .ap-crop-pan .ap-button {
    min-width: 44px;
    min-height: 44px;
  }

  html body.orynos-shell :is(.toolbar-actions, .upload-actions, .mastering-studio-actions, .mastering-plan-actions, .admin-save-row, .docs-actions) {
    flex-wrap: wrap;
    min-width: 0;
    gap: 10px;
  }

  body.orynos-shell :is(.ai-model-option strong, .ai-model-option span, .stem-title, .stem-name, .ref-name, .summary-title, .ap-link-title, .ap-publish-state, .daw-hash, .plugin-release-info code) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.orynos-shell :is(.render-mode-options, .model-control-row, .mix-intent-grid, .style-grid, .ai-master-controls, .ap-workspace-grid, .docs-content, .learn-body) {
    min-width: 0;
  }

  html body.orynos-shell.orynos-shell .render-mode-option {
    min-height: 110px;
    touch-action: manipulation;
  }

  html body.orynos-shell .page-help .help-actions a,
  html body.orynos-shell.page-help .help-actions a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  html body.orynos-shell :is(.learn-breadcrumbs, .learn-byline, .admin-editor-heading, .exy-footer-links) {
    flex-wrap: wrap;
  }

  html body.orynos-shell .exy-footer {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 600px) {
  html body.orynos-shell.orynos-shell.orynos-shell.orynos-shell .orynos-masthead {
    height: auto !important;
    min-height: calc(68px + env(safe-area-inset-top, 0px)) !important;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)) !important;
    gap: 8px;
  }

  html body.orynos-shell .masthead-tools {
    gap: 5px;
    min-width: 0;
    flex-shrink: 0;
  }

  html body.orynos-shell .orynos-wordmark {
    gap: 7px;
    font-size: 13px;
    min-width: 0;
  }

  html body.orynos-shell .orynos-wordmark img {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  html body.orynos-shell .orynos-masthead .theme-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    font-size: 0;
  }

  html body.orynos-shell .orynos-masthead .theme-toggle::after {
    content: "◐";
    font: 24px/1 system-ui, sans-serif;
  }

  html[data-theme="dark"] body.orynos-shell .orynos-masthead .theme-toggle::after {
    content: "◑";
  }

  html body.orynos-shell .orynos-masthead .dock-account {
    width: 44px;
    height: 44px;
  }

  html body.orynos-shell .masthead-credit:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-height: 44px;
    max-width: 64px;
    font-size: 9px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  html body.orynos-shell .masthead-credit strong {
    font-size: 11px;
    margin: 0;
    font-variant-numeric: tabular-nums;
  }

  html body.orynos-shell .dock-item {
    width: clamp(47px, 14vw, 60px);
    min-height: 53px;
  }

  html body.orynos-shell .dock-more {
    position: static;
  }

  html body.orynos-shell .dock-menu {
    width: min(330px, calc(100vw - 36px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    right: auto;
    left: 50%;
    translate: -50% 0;
    padding: 9px;
    gap: 3px;
  }

  html body.orynos-shell .dock-menu a {
    padding: 11px;
    line-height: 1.35;
  }

  html body.orynos-shell .account-menu-links {
    top: 50px;
    max-width: calc(100vw - 32px);
  }

  html body.orynos-shell.page-mix #stepper {
    gap: 4px !important;
  }

  html body.orynos-shell.page-mix #stepper .step {
    min-height: 48px;
    min-width: 0;
    padding-inline: 5px;
    font-size: 10px;
    white-space: normal;
    line-height: 1.4;
  }

  html body.orynos-shell.page-mix :is(.toolbar-actions, .upload-actions) > .btn {
    flex: 1 1 auto;
  }

  html[data-theme] body.page-mix.orynos-shell.orynos-shell.orynos-shell .stem-main {
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    gap: 8px;
  }

  html[data-theme] body.page-mix.orynos-shell.orynos-shell.orynos-shell .stem-main :is(.stem-ident, .stem-category) {
    grid-column: 1 / -1;
  }

  html[data-theme] body.page-mix.orynos-shell.orynos-shell.orynos-shell .stem-main :is(.mini-btn, .expand, .stem-remove) {
    width: 100%;
  }

  html body.orynos-shell .admin-main .admin-toggle {
    min-height: 44px;
  }

  html body.orynos-shell .ap-publish-actions .ap-button {
    min-height: 44px;
  }

  html body.orynos-shell .ap-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body.orynos-shell :is(.ap-media-content .ap-button, .ap-media-content .ap-text-button) {
    width: 100%;
    justify-content: center;
  }

  html body.orynos-shell :is(.ai-destination select, .studio-feedback textarea, .help-field textarea) {
    width: 100%;
  }

  html body.orynos-shell .daw-hash code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  html body.orynos-shell .orynos-wordmark {
    gap: 5px;
    font-size: 12px;
  }

  html body.orynos-shell .masthead-credit:not([hidden]) {
    max-width: 54px;
  }

  html body.orynos-shell .masthead-tools {
    gap: 3px;
  }

  html body.orynos-shell .ap-media-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html body.orynos-shell .ap-link-actions {
    width: 100%;
  }

  html body.orynos-shell .ap-color-field {
    flex-wrap: wrap;
  }
}

@media (orientation: landscape) and (max-width: 1100px) {
  html body.orynos-shell.orynos-shell.orynos-shell.orynos-shell :is(.studio-page, .human-home, .admin-main, .daw-page, .plugin-page),
  html body.orynos-shell.orynos-shell.orynos-shell.orynos-shell.page-mastering .main-content > .main-scroll,
  html body.orynos-shell.orynos-shell.orynos-shell.orynos-shell.page-mix main.main > .shell {
    padding-left: max(clamp(22px, 4vw, 72px), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(clamp(22px, 4vw, 72px), env(safe-area-inset-right, 0px)) !important;
  }

  html body.orynos-shell.orynos-shell.orynos-shell.orynos-shell :is(.ap-builder, .docs-shell, .docs-topbar-inner, .learn-page, .help-page, .mobile-app-page, .packs-main, .share-page, .legal-wrap),
  html body.orynos-shell.orynos-shell.orynos-shell.orynos-shell .suite-page > main.shell {
    max-width: calc(100% - 2 * max(22px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))) !important;
    margin-inline: auto !important;
  }
}

@media (max-height: 500px) and (orientation: landscape) and (max-width: 1100px) {
  html body.orynos-shell .orynos-dock {
    bottom: calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 4px 7px;
  }

  html body.orynos-shell .dock-item {
    min-height: 44px;
    gap: 2px;
  }

  html body.orynos-shell .dock-menu {
    bottom: 61px;
    max-height: calc(var(--orynos-viewport-height) - 90px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.orynos-shell .orynos-touch-enter {
    animation: none;
    translate: none;
  }

  body.orynos-shell :is(.btn, .ap-button, .ap-platform-button, .daw-primary, .docs-button, .admin-main button, .render-mode-option, .style-card, .ap-layout-choice, .ap-palette-button, .learn-row-arrow) {
    transition: none !important;
  }
}