@media (max-width: 767px) {
  body.mobile-mode { -webkit-tap-highlight-color: transparent; }
  body.mobile-mode :is(button, a[href], [role="button"], summary, input, select, textarea, label[for]) {
    -webkit-tap-highlight-color: transparent;
  }
  body.mobile-mode button { -webkit-appearance: none; appearance: none; }
  body.mobile-mode :is(button, a[href], [role="button"], summary):focus { outline: none; box-shadow: none; }
  html[data-mobile-input="keyboard"] body.mobile-mode :is(button, a[href], [role="button"], summary):focus-visible,
  html[data-mobile-input="keyboard"] body.mobile-mode button:focus-visible :is(.mobile-experiment-header-text, .mobile-menu__label > span, .mobile-menu__number, .mobile-next-phase__labels > span, .mobile-about__arrow > span) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  html[data-mobile-input="keyboard"] body.mobile-mode :is(.mobile-brand, .mobile-menu-toggle):focus-visible .mobile-experiment-header-text {
    text-underline-offset: 1px;
  }
  body.mobile-mode #mobile-portfolio :is(button, a[href], [role="button"], summary):is(:active, .is-tap-highlighted) {
    color: inherit;
    opacity: .45;
    text-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.7);
  }
  html[data-mobile-header-experiment="blend"][data-mobile-experiment-menu-open="false"] #mobile-portfolio:not([data-mobile-menu-modal]) :is(.mobile-brand, .mobile-menu-toggle):is(:active, .is-tap-highlighted) {
    text-shadow: none;
  }
  body.mobile-mode #mobile-portfolio .mobile-next-phase__control:is(:active, .is-tap-highlighted) { animation: none; }
  body.mobile-mode #mobile-portfolio .mobile-about__arrow:is(:active, .is-tap-highlighted) > span {
    opacity: 1;
    animation-play-state: paused;
    text-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.7);
  }

  .mobile-header__slot { min-height: calc(62px + env(safe-area-inset-top)); }
  .mobile-menu-layer {
    position: fixed;
    display: none;
    inset: 0;
    z-index: 1000;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    overflow: hidden;
    color: #111;
    background: #fff;
  }
  .mobile-menu-layer[open] { display: flex; flex-direction: column; }
  .mobile-menu-layer[data-menu-theme="dark"] { color: #fff; background: #000; color-scheme: dark; }
  html[data-mobile-menu-canvas="dark"],
  html[data-mobile-menu-canvas="dark"] body.mobile-mode { background: #000; }
  html[data-mobile-menu-canvas="light"],
  html[data-mobile-menu-canvas="light"] body.mobile-mode { background: #fff; }
  html[data-mobile-menu-canvas="hero"],
  html[data-mobile-menu-canvas="hero"] body.mobile-mode { background: #070509; }
  .mobile-menu-layer::backdrop { background: transparent; }
  .mobile-menu-layer .mobile-header__bar { flex: 0 0 auto; width: 100%; }
  .mobile-menu-layer .mobile-brand { visibility: visible; opacity: 1; transform: none; }
  .mobile-menu-layer[open] #mobile-menu {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 24px 18px max(32px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    color: inherit;
    background: transparent;
  }
  .mobile-menu-layer #mobile-menu ol {
    min-height: 100%;
    align-content: start;
    gap: 24px;
  }
  .mobile-menu-layer #mobile-menu .mobile-menu__chapter {
    position: relative;
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    min-height: 46px;
    align-items: start;
    padding: 4px 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.12;
    opacity: .9;
    transition: opacity 120ms ease-out, text-shadow 160ms ease-out;
  }
  .mobile-menu-layer .mobile-menu__label { gap: 1px; }
  .mobile-menu-layer .mobile-menu__text-clip { display: block; overflow: hidden; padding: 2px 0; margin: -2px 0; }
  .mobile-menu-layer .mobile-menu__text-body { display: block; }
  .mobile-menu-layer .mobile-menu__label > span[lang="en"],
  .mobile-menu-layer .mobile-menu__label > span:last-child { font-size: inherit; }
  .mobile-menu-layer #mobile-menu .mobile-menu__chapter[aria-current="page"] { font-weight: 400; opacity: 1; }
  .mobile-menu-layer .mobile-menu__chapter[aria-current="page"]::after { content: "↗"; justify-self: end; align-self: center; font-size: 16px; line-height: 1; }
  .mobile-menu-layer .mobile-menu__number { opacity: 1; font-size: inherit; padding-top: 0; }
  .mobile-menu-layer[data-closing] #mobile-menu { pointer-events: none; }
  .mobile-menu-layer:is([data-closing], [data-handoff]) { touch-action: none; }
}