@media (min-width: 601px) {
  #mobile-app { display: none !important; }
}

@media (max-width: 600px) {
  :root {
    --mobile-system-bottom: max(44px, env(safe-area-inset-bottom, 0px));
    --mobile-coral: #f43d4d;
    --mobile-coral-light: #ff7a78;
    --mobile-cream: #f5efeb;
    --mobile-muted: #aaa0a4;
  }

  html:has(#mobile-app) { background: #09080a; }
  body.mobile-experience { height: 100dvh; overflow: hidden; background: #09080a; }
  body.mobile-experience > :not(#mobile-app):not(dialog):not(.feedback-dialog) { display: none !important; }
  body.mobile-experience #voice-search-button { display: none !important; }

  #mobile-app {
    position: fixed;
    z-index: 100;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 82%, #42151b55 0, transparent 34%),
      radial-gradient(circle at 90% 8%, #26344b2e 0, transparent 35%),
      linear-gradient(180deg, #100e11 0%, #0b090c 64%, #110c10 100%);
    color: var(--mobile-cream);
    isolation: isolate;
  }
  #mobile-app::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .3;
    pointer-events: none;
    background-image: linear-gradient(#ffffff05 1px, transparent 1px);
    background-size: 100% 8px;
    mask-image: linear-gradient(to bottom, #000, transparent 65%);
  }
  .m-interface { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; }
  .m-app-ready .m-interface { opacity: 1; }

  .m-launch {
    position: absolute;
    z-index: 40;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: linear-gradient(180deg, #100e11, #0b090c 72%, #110c10);
    transition: opacity 360ms ease;
  }
  .m-launch.is-complete { opacity: 0; }
  .m-launch-logo {
    position: relative;
    display: grid;
    grid-template-columns: 58px auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    width: min(86vw, 370px);
    opacity: 0;
    transform: scale(.78);
    filter: blur(7px);
    animation: m-logo-arrive 780ms cubic-bezier(.16,.82,.29,1) 120ms forwards;
  }
  .m-launch-popcorn { grid-row: 1 / 3; width: 58px; height: 68px; }
  .m-launch-words { display: flex; align-items: baseline; gap: 8px; font: 900 40px/.9 var(--condensed); letter-spacing: -.8px; white-space: nowrap; }
  .m-launch-words .m-to { color: var(--mobile-coral); }
  .m-launch-lower { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 9px; }
  .m-launch-tagline { color: #d1c5c7; font-size: 8px; letter-spacing: 1.8px; white-space: nowrap; }
  .m-launch-guide { color: #efb6a2; font: 800 15px/1 var(--condensed); letter-spacing: 3px; white-space: nowrap; }
  .m-launch-piece { will-change: transform, opacity, filter; }
  .m-launch.is-breaking .m-what { animation: m-exit-what 740ms cubic-bezier(.4,0,.2,1) forwards; }
  .m-launch.is-breaking .m-to { animation: m-exit-to 680ms cubic-bezier(.4,0,.2,1) 40ms forwards; }
  .m-launch.is-breaking .m-watch { animation: m-exit-watch 800ms cubic-bezier(.4,0,.2,1) 20ms forwards; }
  .m-launch.is-breaking .m-launch-tagline { animation: m-exit-tag 700ms cubic-bezier(.4,0,.2,1) 70ms forwards; }
  .m-launch.is-breaking .m-launch-guide { animation: m-exit-guide 720ms cubic-bezier(.4,0,.2,1) 90ms forwards; }
  .m-launch.is-breaking .m-launch-popcorn { opacity: 0; }

  .m-utility {
    position: absolute;
    z-index: 12;
    top: max(18px, calc(env(safe-area-inset-top, 0px) + 14px));
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mobile-muted);
    opacity: .78;
  }
  .m-help { left: max(13px, calc(env(safe-area-inset-left, 0px) + 11px)); }
  .m-settings { right: max(13px, calc(env(safe-area-inset-right, 0px) + 11px)); }
  .m-utility svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

  .m-stage { position: absolute; inset: 0; }
  .m-home { position: absolute; inset: max(84px, calc(env(safe-area-inset-top, 0px) + 78px)) 0 190px; display: grid; place-items: center; padding: 12px 22px 78px; }
  .m-prompt {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: min(48dvh, 410px);
    min-height: 290px;
    padding: 42px 30px 54px;
    border: 1px solid #403039;
    border-radius: 34px;
    background: linear-gradient(145deg, #211a1f, #171317 75%);
    box-shadow: 0 28px 70px #0009, inset 0 1px 0 #ffffff0a;
  }
  .m-prompt::before { content: ""; position: absolute; inset: 12px; border: 1px solid #ffffff08; border-radius: 25px; }
  .m-prompt::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -68px;
    width: 66px;
    height: 90px;
    background: linear-gradient(145deg, #1a1519 45%, #211a1f 46%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
    filter: drop-shadow(0 10px 10px #0007);
  }
  .m-prompt p { position: relative; z-index: 1; max-width: 320px; margin: 0; text-align: center; font: 400 clamp(38px,10.4vw,48px)/1.06 var(--serif); letter-spacing: -1.5px; text-wrap: balance; }
  .m-prompt strong { color: var(--mobile-coral-light); font-weight: 400; }

  .m-results { position: absolute; inset: 0; }
  .m-result-card {
    position: absolute;
    z-index: 2;
    inset: max(72px, calc(env(safe-area-inset-top, 0px) + 68px)) 12px calc(var(--mobile-system-bottom) + 18px);
    overflow: hidden;
    border: 1px solid #584049;
    border-radius: 32px;
    background: #161216;
    box-shadow: 0 30px 80px #000c;
    isolation: isolate;
    touch-action: none;
    user-select: none;
  }
  .m-result-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, #0b090dcc 0%, transparent 17%, transparent 42%, #0d0a0e96 61%, #0b090ded 77%, #0a080bec 100%),
      linear-gradient(90deg, #09070a38, transparent 42%, #09070a20);
  }
  .m-result-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: saturate(.9) contrast(1.02); }
  .m-result-network { position: absolute; z-index: 3; top: 25px; left: 25px; max-width: 64%; overflow: hidden; color: var(--network-color, #ff3543); font: 900 22px/1 var(--condensed); letter-spacing: -.5px; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 10px #000; }
  .m-result-position { position: absolute; z-index: 3; top: 27px; right: 25px; color: #eee5e8; font-size: 13px; font-weight: 650; letter-spacing: .08em; text-shadow: 0 2px 10px #000; }
  .m-result-copy { position: absolute; z-index: 3; left: 25px; right: 25px; bottom: 156px; text-shadow: 0 2px 18px #000; }
  .m-result-eyebrow { margin: 0 0 9px; color: #fac2b6; font-size: 12px; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
  .m-result-title { max-width: 340px; margin: 0 0 10px; font: 400 clamp(43px,11vw,56px)/.98 var(--serif); letter-spacing: -2.4px; text-wrap: balance; }
  .m-result-meta, .m-result-genres { margin: 0; color: #eee5e8; font-size: 16px; line-height: 1.42; }
  .m-result-genres { margin-top: 5px; color: #cbbec3; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-result-card.is-entering { animation: m-card-enter 220ms cubic-bezier(.2,.75,.25,1); }
  .m-result-card.is-loading .m-result-copy, .m-result-card.is-loading .m-result-network, .m-result-card.is-loading .m-result-position { opacity: .25; }

  .m-state-message { position: absolute; z-index: 3; inset: 95px 24px 205px; display: grid; place-items: center; color: #d6cbd0; text-align: center; font-size: 16px; line-height: 1.55; }

  .m-primary-nav { position: absolute; z-index: 8; left: 14px; right: 14px; bottom: calc(var(--mobile-system-bottom) + 20px); height: 102px; display: grid; grid-template-columns: 1fr 132px 1fr; align-items: center; justify-items: center; pointer-events: none; }
  .m-primary-nav button, .m-voice { pointer-events: auto; }
  .m-primary-nav button {
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    padding: 0;
    border: 8px solid #2c1117;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff5963, #c91e31);
    color: white;
    box-shadow: 0 14px 30px #000a, inset 0 1px 1px #ffffff52;
  }
  .m-primary-nav button[aria-pressed="true"] { filter: brightness(1.12); box-shadow: 0 0 0 3px #ff9a9550, 0 14px 30px #000a; }
  .m-primary-nav .m-nav-spacer { grid-column: 2; }
  .m-primary-nav .m-upcoming { grid-column: 3; }
  .m-primary-nav svg { width: 44px; height: 44px; fill: none; stroke: white; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .m-primary-nav .m-flame { width: 48px; height: 48px; fill: white; stroke: none; }
  .m-voice {
    position: absolute;
    z-index: 9;
    left: 50%;
    bottom: calc(var(--mobile-system-bottom) + 92px);
    width: 124px;
    height: 124px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #2c1117;
    box-shadow: 0 18px 38px #000b;
    transform: translateX(-50%);
  }
  .m-voice::before, .m-voice::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
  .m-voice::before { inset: 7px; border: 2px solid #a92b3899; box-shadow: 0 0 0 9px #8f25312d, 0 0 0 18px #72232b1f; }
  .m-voice::after { inset: 19px; background: linear-gradient(145deg, #ff5963, #c91e31); box-shadow: inset 0 1px 1px #ffffff52, 0 8px 22px #0008; }
  .m-voice svg { position: absolute; z-index: 2; inset: 0; width: 40px; height: 40px; margin: auto; fill: none; stroke: white; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .m-voice.is-listening::before { animation: m-voice-ring 1.35s ease-out infinite; }
  .m-voice.is-listening { filter: brightness(1.08); }

  .m-popcorn-home {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: calc(var(--mobile-system-bottom) + 3px);
    display: grid;
    width: 44px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateX(-50%);
  }
  .m-popcorn-home svg { width: 35px; height: 42px; filter: drop-shadow(0 4px 7px #000b); }

  .m-overlay {
    position: absolute;
    z-index: 30;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #08070a80;
    backdrop-filter: blur(3px);
  }
  .m-overlay[hidden] { display: none; }
  .m-overlay-card { width: min(100%, 340px); padding: 27px 25px 24px; border: 1px solid #624650; border-radius: 24px; background: #1b161af2; box-shadow: 0 24px 70px #000c, inset 0 1px 0 #ffffff0b; }
  .m-overlay-card h2 { margin: 0 0 21px; font: 400 29px/1.08 var(--serif); letter-spacing: -.6px; text-align: center; }
  .m-gesture-line { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 13px; min-height: 58px; color: #ddd2d6; font-size: 15px; line-height: 1.35; }
  .m-gesture-line + .m-gesture-line { border-top: 1px solid #ffffff10; }
  .m-gesture-mark { color: var(--mobile-coral-light); font-size: 27px; line-height: 1; text-align: center; }
  .m-confirm { width: 100%; min-height: 52px; margin-top: 19px; border: 0; border-radius: 14px; background: var(--mobile-coral); color: white; font-size: 16px; font-weight: 750; box-shadow: 0 10px 24px #0007; }
  .m-about-logo { display: block; width: min(100%, 285px); height: auto; margin: 4px auto 22px; }
  .m-about-copy { margin: 0; color: #cbbfc4; font-size: 15px; line-height: 1.6; text-align: center; }

  .m-detail { position: absolute; z-index: 18; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: #100d10; scrollbar-width: none; }
  .m-detail::-webkit-scrollbar { display: none; }
  .m-detail-open :is(.m-utility,.m-primary-nav,.m-voice,.m-popcorn-home) { display: none; }
  .m-detail-hero { position: relative; min-height: 58dvh; padding: max(94px, calc(env(safe-area-inset-top, 0px) + 86px)) 24px 34px; display: flex; align-items: end; isolation: isolate; }
  .m-detail-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .m-detail-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #0806083b, #100d10 96%); }
  .m-detail-hero h2 { margin: 7px 0 9px; font: 400 clamp(40px,12vw,56px)/1 var(--serif); letter-spacing: -2px; }
  .m-detail-body { padding: 0 24px calc(var(--mobile-system-bottom) + 35px); }
  .m-detail-summary { margin: 0 0 24px; color: #d4c9ce; font-size: 16px; line-height: 1.7; }
  .m-detail-watch-title { margin: 25px 0 13px; color: #d9cdd2; font-size: 12px; letter-spacing: .17em; text-transform: uppercase; }
  .m-detail-legend { display: flex; flex-wrap: wrap; gap: 9px 13px; margin-bottom: 17px; color: #b9adb2; font-size: 11px; }
  .m-detail-legend span, .m-watch-link small { display: inline-flex; align-items: center; gap: 6px; }
  .m-tier-dot { width: 10px; height: 10px; border: 1px solid #151017; border-radius: 50%; box-shadow: 0 0 0 1px #ffffff55; flex: 0 0 10px; }
  .m-tier-dot.free { background: #4fc67a; }.m-tier-dot.ads { background: #559be3; }.m-tier-dot.subscription { background: #9a72d7; }.m-tier-dot.purchase { background: #f15d69; }
  .m-watch-links { display: grid; gap: 10px; }
  .m-watch-link { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; min-height: 66px; padding: 10px 14px; border: 1px solid #55404a; border-radius: 13px; background: #211a1f; }
  .m-watch-link img { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; background: #fff; }
  .m-watch-link strong { display: block; font-size: 15px; line-height: 1.2; }.m-watch-link small { margin-top: 5px; color: #c9bcc2; font-size: 12px; }
  .m-watch-link b { font-size: 22px; font-weight: 400; }
  .m-detail-close, .m-detail-share { position: fixed; z-index: 20; top: max(18px, calc(env(safe-area-inset-top, 0px) + 14px)); display: grid; width: 52px; height: 52px; place-items: center; padding: 0; border: 1px solid #725a65; border-radius: 50%; background: #171217dc; color: white; backdrop-filter: blur(12px); }
  .m-detail-close { right: 16px; font-size: 31px; line-height: 1; }.m-detail-share { right: 80px; }
  .m-detail-share svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .m-system-home { position: absolute; z-index: 50; left: 50%; bottom: 12px; width: 134px; height: 5px; border-radius: 5px; background: #f3eff1; opacity: .88; transform: translateX(-50%); pointer-events: none; }
  @supports (padding: env(safe-area-inset-bottom)) { .m-system-home { display: none; } }

  @keyframes m-logo-arrive { to { opacity: 1; transform: scale(1); filter: blur(0); } }
  @keyframes m-exit-what { to { opacity: 0; transform: translate(-85px,-48px) rotate(-5deg); filter: blur(4px); } }
  @keyframes m-exit-to { to { opacity: 0; transform: translate(8px,-82px) scale(.85); filter: blur(5px); } }
  @keyframes m-exit-watch { to { opacity: 0; transform: translate(96px,-28px) rotate(4deg); filter: blur(4px); } }
  @keyframes m-exit-tag { to { opacity: 0; transform: translate(-42px,58px); filter: blur(4px); } }
  @keyframes m-exit-guide { to { opacity: 0; transform: translate(72px,62px) rotate(4deg); filter: blur(4px); } }
  @keyframes m-card-enter { from { opacity: .5; transform: scale(.975); } to { opacity: 1; transform: none; } }
  @keyframes m-voice-ring { 0% { opacity: .8; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.65); } }

  @media (max-height: 740px) {
    .m-home { bottom: 164px; padding-bottom: 60px; }
    .m-prompt { height: 42dvh; min-height: 240px; }
    .m-result-copy { bottom: 142px; }
    .m-result-title { font-size: 39px; }
    .m-primary-nav { bottom: calc(var(--mobile-system-bottom) + 10px); }
    .m-voice { bottom: calc(var(--mobile-system-bottom) + 77px); width: 112px; height: 112px; }
    .m-primary-nav button { width: 86px; height: 86px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .m-launch { display: none; }
    .m-interface { opacity: 1; }
    .m-launch-logo, .m-launch-piece, .m-result-card, .m-voice::before { animation: none !important; transition: none !important; }
  }
}