/* Exact source artwork, unmodified. App crop: x14 y86 width679 height1398.
   All positions below are measured in that coordinate space. Native phone
   bezel/status/navigation chrome is excluded; no duplicate OS interface. */
.app-shell { transform: none; width: 100%; max-width: 430px; }
.app-shell:has(.reference-home:not([hidden])) { min-height: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.reference-home { position: relative; width: 100%; aspect-ratio: 679 / 1398; min-height: 0; padding: 0; overflow: hidden; container-type: inline-size; }
.reference-art { position: absolute; width: 104.123711%; max-width: none; height: auto; left: -2.061856%; top: -6.151645%; pointer-events: none; user-select: none; }
.reference-hit { display: block; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.reference-hit:focus-visible { outline: 2px solid #167eaf; outline-offset: -2px; }
.reference-hit:active { background: rgba(255,255,255,.18); }
.reference-moods { position: absolute; left: 3.82916%; top: 28.96996%; width: 92.63623%; height: 8.22604%; display: grid; grid-template-columns: repeat(5,1fr); gap: 2.15%; }
.reference-moods .mood-card { min-width: 0; width: 100%; height: 100%; border-radius: 20%; transform: none; }
.reference-moods .is-selected { box-shadow: inset 0 0 0 1.5px rgba(22,153,212,.55); }
.reference-start { position: absolute; left: 22.53314%; top: 38.69814%; width: 54.93373%; height: 6.08011%; border-radius: 999px; }
.reference-see-all { position: absolute; left: 83%; top: 47.92561%; width: 14%; height: 3.2%; }
.reference-experiences { position: absolute; left: 3.82916%; top: 51.71674%; width: 98%; height: 12.23176%; display: grid; grid-template-columns: repeat(3,1fr); gap: 2%; }
.reference-experiences button { border-radius: 10%; }
.reference-hear, .reference-feel { position: absolute; top: 66.09442%; width: 45.21355%; height: 6.72389%; border-radius: 8%; }
.reference-hear { left: 3.82916%; }
.reference-feel { left: 51.54639%; }
.reference-home .reference-switch { position: absolute; left: 68.4%; top: 34%; width: 16.3%; height: 31%; border-radius: 999px; background: #bdcad9; box-shadow: 0 0 0 2px #eaf4fb; }
.reference-home .reference-switch i { position: absolute; height: 86%; aspect-ratio: 1; top: 7%; left: 5%; border-radius: 50%; background: white; box-shadow: 0 1px 3px #69829b44; }
.reference-home .reference-switch.is-on { background: linear-gradient(90deg,#22c4ef,#078ee2); }
.reference-home .reference-feel .reference-switch.is-on { background: linear-gradient(90deg,#e285f3,#bf59e0); }
.reference-home .reference-switch.is-on i { left: auto; right: 5%; }
.reference-device-settings { width: 100%; height: 100%; border-radius: inherit; }
.reference-device .reference-switch { border: 0; padding: 0; cursor: pointer; }
.reference-device .reference-switch::after { content: ''; position: absolute; inset: -10px -5px; }
.reference-journey { position: absolute; left: 3.82916%; top: 73.96280%; width: 92.34168%; height: 6.00858%; border-radius: 8%; }
.reference-home #journeySummary { position: absolute; left: 3%; top: 53%; width: 45%; height: 30%; text-align: left; white-space: nowrap; background: #e8f2fc; color: #617b97; font: 400 2.21cqw/1.5 Arial,sans-serif; }
.reference-home .home-resume { position: absolute; left: 22%; top: 45.7%; width: 58%; height: 2.6%; padding: 0; border-radius: 12px; font-size: 1.65cqw; color: #345f85; background: #e9f8ffe8; }
.app-shell:has(.reference-home:not([hidden])) .topbar { position: absolute; inset: 0 0 auto; height: 6%; padding: 0; background: none; backdrop-filter: none; box-shadow: none; border: 0; }
.app-shell:has(.reference-home:not([hidden])) .topbar button { position: absolute; padding: 0; margin: 0; background: transparent; box-shadow: none; border: 0; border-radius: 50%; height: 100%; }
.app-shell:has(.reference-home:not([hidden])) #menuButton { left: 3.8%; width: 9.5%; }
.app-shell:has(.reference-home:not([hidden])) #profileButton { right: 3.8%; width: 9.5%; }
.app-shell:has(.reference-home:not([hidden])) .brand-button { left: 29%; width: 43%; }
.app-shell:has(.reference-home:not([hidden])) .topbar button > * { opacity: 0; }
.app-shell:has(.reference-home:not([hidden])) .bottom-nav { position: absolute; inset: auto 0 0; width: 100%; height: 7.44%; padding: 0 2%; margin: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; box-shadow: none; }
.app-shell:has(.reference-home:not([hidden])) .bottom-nav button { background: none; box-shadow: none; border: 0; }
.app-shell:has(.reference-home:not([hidden])) .bottom-nav button > * { opacity: 0; }
.app-shell:has(.reference-home:not([hidden])) main { min-height: 0; }
@media (min-width: 431px) { .app-shell { width: 393px; } }