.mobile-intro-toggle, .mobile-intro-grip { display: none; }
.mobile-slide-body { display: contents; }
@media (max-width: 700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  .shell {
    --mobile-intro-height: 70dvh;
    --mobile-open-progress: 1;
    display: grid;
    grid-template-rows: var(--mobile-intro-height) minmax(0, 1fr);
    height: calc(100dvh - 50px);
    min-height: 0;
    overflow: hidden;
    transition: grid-template-rows 320ms cubic-bezier(.22,.8,.2,1);
  }
  .shell.expanded { --mobile-intro-height: 24px; --mobile-open-progress: 0; }
  .shell.mobile-intro-dragging { transition: none; }
  .shell .intro, .shell.expanded .intro {
    position: relative;
    inset: auto;
    width: 100%; height: 100%; min-height: 0;
    transform: none;
    border-radius: 20px 20px 0 0;
    transition: none;
    touch-action: none;
    overscroll-behavior: contain;
  }
  .shell .intro::before { background-position: center 40%; }
  .shell .intro .brand, .shell.expanded .intro .brand {
    visibility: visible;
    top: 10px; left: 20px; height: 32px;
    font-size: calc(17px * var(--pg-ts,1)); gap: 9px; pointer-events: none;
  }
  .shell .intro .brand .logo { width: 28px; height: 28px; border-radius: 8px; font-size: calc(20px * var(--pg-ts,1)); }
  .shell .intro .slides, .shell.expanded .intro .slides {
    height: 70dvh;
    visibility: visible;
    opacity: var(--mobile-open-progress);
    transition: transform .4s cubic-bezier(.22,.8,.2,1), opacity 180ms ease;
    touch-action: none;
  }
  .shell .intro .slides * { touch-action: none; }
  .shell .intro .slide, .shell .intro .slide.refined {
    padding: 64px 24px 80px;
    display: block;
    overflow: hidden;
  }
  .mobile-slide-body {
    display: flex; flex-direction: column;
    justify-content: safe center;
    height: 100%; min-height: 0;
    overflow: hidden auto;
    scrollbar-width: thin;
    scrollbar-color: #ffffff60 transparent;
    overscroll-behavior: contain;
    padding-right: 2px;
  }
  .mobile-slide-body > * { flex-shrink: 0; }
  .shell .intro .mobile-slide-body.mobile-scrollable,
  .shell .intro .mobile-slide-body.mobile-scrollable * { touch-action: pan-y pinch-zoom; }
  .shell .intro .slide h1 { font-size: clamp(25px, 7vw, 29px); line-height: 1.2; margin: 0 0 16px; }
  .shell .intro .slide p { font-size: calc(12px * var(--pg-ts,1)); line-height: 1.65; }
  .shell .intro .slide .primary { min-height: 44px; padding: 12px 16px; font-size: calc(14px * var(--pg-ts,1)); margin-top: 4px; }
  .shell .intro .slide small { margin-top: 10px; }
  .shell .intro .slide-heading { margin-bottom: 16px; }
  .shell .intro .slide-heading h2 { font-size: calc(23px * var(--pg-ts,1)); line-height: 1.25; }
  .shell .intro .slide-heading p { margin-top: 10px; }
  .shell .intro .slide-footnote { margin-top: 14px; font-size: calc(10px * var(--pg-ts,1)); }
  .shell .intro .faq-surface { max-height: none; overflow: visible; padding-right: 0; }
  .shell .intro .faq-surface summary { padding: 15px 0; }
  .shell .intro .closing-art { transform: scale(.75); transform-origin: left center; margin: -12px 0 -10px; }
  .shell .intro .closing-footer { margin-top: 18px; }
  .shell .intro .slider-nav, .shell.expanded .intro .slider-nav {
    left: 20px; right: 20px; bottom: 22px;
    gap: 14px; visibility: visible;
    opacity: var(--mobile-open-progress);
    transition: opacity 180ms ease;
  }
  .shell .intro .slider-nav .arrows { gap: 4px; }
  .shell .intro .slider-nav .arrows button { width: 44px; height: 44px; }
  .shell .intro #intro-progress { height: 44px; flex-basis: 100px; }
  .shell .intro #intro-progress::before, .shell .intro #intro-progress > i { top: 21px; }
  .mobile-intro-toggle {
    display: grid; place-items: center;
    position: absolute; z-index: 5; right: 10px; top: 4px;
    width: 44px; height: 44px;
    color: white; border-radius: 12px; background: #ffffff0b;
    touch-action: none;
  }
  .mobile-intro-toggle svg { width: 19px; height: 19px; transition: transform 250ms ease; }
  .expanded .mobile-intro-toggle svg { transform: rotate(180deg); }
  .shell.expanded .intro .brand { opacity: 0; }
  .shell.expanded .mobile-intro-toggle { inset: 0; width: 100%; height: 24px; border-radius: 0; background: transparent; }
  .shell.expanded .mobile-intro-toggle svg { display: none; }
  .shell.expanded .mobile-intro-toggle::after { content: ''; width: 38px; height: 3px; border-radius: 3px; background: #ffffff9c; }
  .mobile-intro-grip {
    display: grid; place-items: center;
    position: absolute; z-index: 4; bottom: 0; left: 0; right: 0;
    height: 26px; width: 100%; color: white; touch-action: none;
    opacity: var(--mobile-open-progress);
  }
  .mobile-intro-grip::after { content: ''; width: 36px; height: 3px; border-radius: 4px; background: #ffffff70; }
  .shell.expanded .intro .slides, .shell.expanded .intro .slider-nav,
  .shell.expanded .mobile-intro-grip { pointer-events: none; }
  .shell.mobile-intro-dragging .slides, .shell.mobile-intro-dragging .slider-nav { transition: none; }
  .shell .dashboard, .shell.expanded .dashboard {
    position: relative;
    inset: auto;
    min-height: 0; min-width: 0; width: 100%;
    padding: 12px 18px 24px !important;
    overflow: hidden auto;
    overscroll-behavior-y: contain;
    transition: none;
    background: #fff;
    border-radius: 0 0 20px 20px;
  }
  .shell .dashboard .dashboard-fixed-header { top: -12px; margin: 0 0 18px; padding-top: 4px; }
  .shell:not(.expanded) .dashboard { touch-action: none; }
  .shell .dashboard .touch-open { display: none; }
  .shell .dashboard .topbar { justify-content: flex-end; min-height: 40px; margin-bottom: 4px; }
  .shell .dashboard #nav-brand { display: none; }
  .shell .dashboard .nav-trigger-group { display: none; }
  .shell .dashboard .toplinks { width: 100%; justify-content: space-between; gap: 4px; }
  .shell .dashboard .toplinks > button { min-height: 40px; }
  .shell .dashboard .toplinks > button[data-info] { font-size: calc(12px * var(--pg-ts,1)); }
  .shell .dashboard .search { gap: 8px; padding-bottom: 4px; }
  .shell .dashboard .search input { min-height: 40px; min-width: 0; font-size: calc(16px * var(--pg-ts,1)); }
  .shell .dashboard .search .menu { flex: 0 0 36px; min-height: 40px; }
  .shell .dashboard .panel-head h2 { font-size: calc(25px * var(--pg-ts,1)); }
  .dark .shell .dashboard { background: #191c22; }
}