.mobile-device-note { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1100px), (max-device-width: 600px), (max-device-height: 600px) {
  html.mobile-background-active {
    isolation: isolate;
    background-image: none !important;
    background-color: var(--mobile-background-color, #0d1117) !important;
  }
  html.mobile-background-active::before {
    content: '';
    position: fixed;
    /* Pin to the viewport edges: independent of root zoom, rotation and
       history restoration. The negative bottom covers the collapsed toolbar. */
    inset: 0;
    bottom: min(0px, calc(100svh - 100lvh));
    width: auto;
    height: auto;
    z-index: -1;
    pointer-events: none;
    background-image: var(--mobile-background-image);
    background-color: var(--mobile-background-color, #0d1117);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    /* Keep the image on its own compositor layer. No oversized padding/crop. */
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  html.mobile-background-active body {
    background-image: none !important;
    background-color: transparent !important;
  }
  .mobile-device-note {
    display: block;
    box-sizing: border-box;
    width: fit-content;
    max-width: min(92%, 460px);
    margin: 8px auto 16px;
    padding: 10px 14px;
    border: 1px solid #ae3946;
    border-radius: 10px;
    background: repeating-linear-gradient(135deg, #ffffff06 0 1px, transparent 1px 7px), radial-gradient(ellipse at top, #353039, #09090c 80%);
    box-shadow: 0 3px 12px #0005;
    color: #f7f7f7;
    font: 15px/1.4 'Roboto', Arial, sans-serif;
    text-align: center;
  }
  .mobile-device-note strong { color: #fff; font-weight: 700; }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1100px), (max-device-width: 600px), (max-device-height: 600px) { .mobile-device-note span { display: block; text-wrap: balance; color: #f7f7f7; font: inherit; } .mobile-device-note span + span { margin-top: 4px; } }
/* Android app: the note links to the full website in the browser. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1100px), (max-device-width: 600px), (max-device-height: 600px) { .koe-app-browser-note a { display: inline-block; margin-top: 8px; padding: 0.35em 1em; border-radius: 8px; background: #ae3946; color: #fff; font-weight: 700; text-decoration: none; } }