/* Source-order-preserving components bundle. */

/* Dashboard, drive controls and music surfaces */
:root { --wallpaper: radial-gradient(ellipse at 130% 0%,var(--color-2098b4) 0%,var(--color-2a768f) 34%,var(--color-transparent) 35%),radial-gradient(ellipse at 110% 85%,var(--color-5e549e) 0%,var(--color-transparent) 40%),linear-gradient(33deg,var(--color-330006) 10%,var(--color-820322) 48%,var(--color-d9153d) 60%,var(--color-4ebcd2) 61%,var(--color-42748f) 80%); }
body { background: var(--color-101012); }
.device-wrap { width: min(1440px,100%); }
.device { padding: var(--space-12); border-radius: 27px; background: linear-gradient(145deg,var(--color-39393f),var(--color-111115) 23%,var(--color-16161a) 77%,var(--color-35353b)); }
.screen { min-height: 380px; background-size: cover; background-position: center; }
.sidebar { width: 7.03125%; flex-basis: 7.03125%; padding: var(--space-12) 0; backdrop-filter: blur(30px); }
.status { font-size: 18px; }
.status time { font-size: clamp(19px,1.8vw,27px); }
.status-bottom { font-size: var(--type-16); }
.battery { margin-top: var(--space-8); }
.dock { gap: 13px; justify-content: center; }
.dock-button { width: 64px; height: 64px; padding: 0; }
.dock .app-icon { width: 100%; height: 100%; border-radius: 15px; }
.home-button { width: 65px; height: 43px; padding: var(--space-8) 0; }
.home-glyph { grid-template-columns: repeat(4,1fr); width: 46px; height: 26px; gap: var(--space-4); }
.home-glyph i { border-radius: 3px; }
.dashboard-glyph { width: 46px; height: 26px; }
.home-view { padding: 3.36% 2.98% 10px 5.04%; }
.app-grid { grid-template-columns: repeat(5,1fr); gap: var(--space-20) 26px; }
.app-button { font-size: clamp(16px,1.88vw,27px); gap: 10px; text-shadow: none; }
.app-label { padding: 3px 10px var(--space-4); border-radius: var(--radius-8); backdrop-filter: blur(24px); }
.app-icon { width: clamp(78px,9.05vw,135px); height: clamp(78px,9.05vw,135px); border-radius: 22.22%; }
.app-icon.now { background: var(--color-fff); color: var(--color-f43d66); }
.app-icon.now svg { fill: currentColor; }
.experience-icon { background: linear-gradient(155deg,color-mix(in srgb,var(--company-color),var(--color-fff) 15%),var(--company-color)); position: relative; }
.experience-icon b { font-size: 48px; z-index: 1; }
.experience-icon i { position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%,var(--color-ffffff17) 0%,var(--color-fff0) 70%); }
.page-dots { margin-top: var(--space-4); height: 22px; gap: var(--space-12); }
.page-dot { width: 10px; height: 10px; }
.dashboard-view { padding: 14px; grid-template-columns: 1.38fr 1fr; grid-template-rows: 31% 1fr; gap: 14px; }
.dash-map { border-radius: 18px; cursor: default; isolation: isolate; }
.road-map { width: 100%; height: 100%; position: absolute; inset: 0; background: var(--color-303536); z-index: 0; }
.dash-destinations, .dash-music { backdrop-filter: blur(35px); border-radius: 18px; color: var(--color-fff); }
.dash-destinations { padding: 10px var(--space-16); }
.dash-destinations button { display: flex; flex-direction: column; justify-content: center; gap: 6px; font-size: 21px; font-weight: 500; border-radius: var(--radius-12); }
.shortcut-icon { height: 45px; width: 45px; background: var(--color-17abcf); color: var(--color-fff); border-radius: 50%; display: grid; place-items: center; font-size: 31px; font-weight: 500; }
.shortcut-icon.work { background: var(--color-ca795b); font-size: 26px; }
.dash-music { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-16) var(--space-20); }
.dash-now { min-width: 0; max-width: 100%; gap: 6px; }
.dash-now .app-icon { height: 64px; width: 64px; border-radius: 6px; }
.dash-now strong { font-size: clamp(18px,1.75vw,25px); text-align: center; }
.dash-now>span:last-child { font-size: 19px; color: var(--color-b3acb4); text-align: center; }
.dash-listen { font-size: 19px; font-weight: 500; padding: 10px 25px; margin: 10px 0; background: var(--color-ffffff1f); border-radius: 10px; }
.dash-apps { font-size: var(--type-14); color: var(--color-ddd3db); margin-top: 9px; padding: var(--space-8); }
.dash-music .transport { margin: 10px 0 0; gap: var(--space-20); }
.dash-music .transport button { height: 45px; width: 45px; }
.dash-music .transport svg { height: 34px; width: 34px; }
.dash-map-open { padding: 0; text-align: left; pointer-events: auto; }
.drive-guidance { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 401; background: var(--color-232526ed); color: var(--color-fff); border-radius: 15px; display: flex; align-items: center; padding: 14px 18px; gap: var(--space-16); pointer-events: none; box-shadow: 0 3px 12px var(--color-0003); backdrop-filter: blur(12px); }
.drive-guidance strong { display: block; font-size: 23px; }
.drive-guidance span:not(.direction-glyph) { display: block; font-size: 17px; color: var(--color-bfc0c4); margin-top: 5px; }
.direction-glyph { font-size: 39px; line-height: 1; font-weight: 400; min-width: 32px; }
.dash-map .drive-guidance { top: 10px; left: 10px; right: auto; width: max-content; max-width: calc(100% - 20px); padding: 10px 14px; gap: var(--space-12); }
.dash-map .drive-guidance strong { font-size: var(--type-20); }
.dash-map .drive-guidance span:not(.direction-glyph) { font-size: var(--type-14); }
.dash-trip { position: absolute; left: 10px; right: 10px; bottom: 24px; z-index: 401; background: var(--color-232526ed); color: var(--color-fff); border-radius: 14px; padding: 10px; pointer-events: none; }
.drive-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-12); }
.drive-metrics>div { text-align: center; }
.drive-metrics strong { display: block; font-size: 23px; letter-spacing: -.6px; font-weight: 600; white-space: nowrap; }
.drive-metrics span { display: block; color: var(--color-a9aaae); font-size: 13px; margin-top: 3px; }
.road-map-view { background: var(--color-303536); isolation: isolate; }
.road-map-view .drive-guidance { right: auto; min-width: 310px; max-width: calc(100% - 160px); }
.destinations-button { position: absolute; top: 14px; right: 14px; z-index: 401; background: var(--color-232526ed); border-radius: var(--radius-12); padding: var(--space-16) 18px; font-size: 19px; box-shadow: 0 3px 12px var(--color-0003); color: var(--color-fff); }
.road-toolbar { position: absolute; right: 14px; top: 90px; z-index: 401; display: flex; flex-direction: column; background: var(--color-232526ed); color: var(--color-fff); border-radius: 13px; padding: 3px; box-shadow: 0 3px 12px var(--color-0003); }
.road-toolbar button { width: 46px; height: 42px; font-size: 28px; border-radius: 9px; }
.trip-panel { position: absolute; z-index: 401; bottom: 25px; left: 14px; width: 330px; background: var(--color-232526f0); color: var(--color-fff); border-radius: 18px; padding: 14px var(--space-16); box-shadow: 0 3px 12px var(--color-0003); backdrop-filter: blur(15px); }
.trip-title { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-16); }
.trip-title>div { flex: 1; min-width: 0; }
.trip-title small { font-size: 11px; color: var(--color-a9aaae); display: block; margin-bottom: var(--space-4); }
.trip-title strong { font-size: var(--type-20); font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-title button { height: 38px; width: 38px; background: var(--color-ffffff18); border-radius: 50%; font-size: var(--type-20); }
.trip-progress { height: 4px; background: var(--color-fff2); border-radius: var(--radius-4); overflow: hidden; margin: 14px 0 10px; }
.trip-progress i { display: block; height: 100%; background: var(--color-0a84ff); width: 0; transition: width .1s linear; }
.trip-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--type-12); color: var(--color-b6b7bb); }
.trip-bottom button { font-size: 13px; color: var(--color-5aafff); }
.app-header { height: 62px; flex-basis: 62px; padding: 0 var(--space-24); font-size: 22px; }
.back { font-size: var(--type-20); gap: 5px; }
.back>span { font-size: 35px; line-height: .7; }
.header-action { font-size: 18px; }
.list-row { padding: 17px var(--space-4); gap: 15px; }
.list-row .app-icon { width: 52px; height: 52px; border-radius: var(--radius-12); flex-shrink: 0; }
.list-row .experience-icon b { font-size: 22px; letter-spacing: -.7px; }
.row-title { font-size: 21px; }
.row-sub { font-size: var(--type-16); }
.chevron-text { font-size: 31px; color: var(--secondary); }
.detail { padding: 26px var(--space-32); }
.detail h1 { font-size: 33px; }
.detail p { font-size: 19px; }
.detail p.lead { font-size: 21px; }
.detail ul { font-size: 18px; }
.experience-title { display: flex; gap: var(--space-20); align-items: center; }
.experience-title .app-icon { height: 80px; width: 80px; border-radius: 18px; flex-shrink: 0; }
.experience-title .experience-icon b { font-size: 32px; }
.resume-document { flex: 1; background: var(--color-d7d7db); }
.resume-document object { width: 100%; height: 100%; display: block; }
.destination-symbol { height: 50px; width: 50px; background: var(--color-e77a3433); color: var(--color-fa9e66); font-size: 30px; flex-shrink: 0; }
.destination-symbol.Outdoors { background: var(--color-30d15822); color: var(--color-68db8f); }
.destination-symbol.Cards { background: var(--color-bf5af222); color: var(--color-ca84ee); }
.destination-symbol.Sweets { background: var(--color-ff6f9a22); color: var(--color-ffa0b5); }
.destination-tag { font-size: var(--type-12); margin-top: 6px; color: var(--blue); }
.source-link { color: var(--blue); font-size: 17px; }
.stop-tabs { flex-basis: 53px; padding: 6px var(--space-16); gap: 5px; }
.stop-tabs button { font-size: 18px; padding: 7px var(--space-4); }
.music-search { padding: var(--space-12) var(--space-24); border-bottom: 1px solid var(--line); }
.music-search input { width: 100%; border: 0; border-radius: 10px; background: var(--raised); color: var(--text); font: inherit; font-size: 18px; padding: 10px 14px; }
.music-player { padding: var(--space-24) var(--space-32); gap: 28px; }
.album { max-width: 250px; width: 100%; border-radius: 14px; overflow: hidden; background: linear-gradient(145deg,var(--color-e6375d),var(--color-9d234b)); }
.album img { width: 100%; height: 100%; object-fit: cover; }
.player-info h1 { font-size: 30px; }
.transport { gap: var(--space-24); }
.transport button { height: 55px; width: 55px; }
.volume-label { display: flex; gap: 15px; font-size: 15px; align-items: center; color: var(--secondary); margin-top: 17px; }
.volume-label input { min-width: 0; flex: 1; }
.apple-player-bar { display: flex; align-items: center; padding: 9px 13px; gap: var(--space-12); }
.apple-player-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-14); }
.apple-player-bar button { height: 24px; width: 30px; background: var(--color-fff1); border-radius: 7px; font-size: 19px; }
.apple-player-note { font-size: 11px; color: var(--color-b7b7bf); padding: 0 13px 9px; }
.light .dash-destinations, .light .dash-music { background: var(--color-rgba-4c47ac34); color: var(--color-fff); }
.light .sidebar { background: var(--color-rgba-8c3cd2a1); }
.under-device { font-size: var(--type-12); }
.connection { font-size: var(--type-12); }
.connection .connected { color: var(--color-8d8d98); }
.device-wrap:fullscreen { background: var(--color-101012); justify-content: center; width: 100%; }
.device-wrap:fullscreen .device { width: 100%; }
.device-wrap:fullscreen .screen { max-height: calc(100svh - 100px); }
@media(max-width:1000px) and (min-width:681px) {
  body { padding: var(--space-16); }
  .screen { min-height: 370px; }
  .home-view { padding: 25px 22px var(--space-8); }
  .app-grid { gap: 17px var(--space-12); }
  .app-icon { width: 83px; height: 83px; }
  .app-button { font-size: 17px; }
  .sidebar { width: 70px; flex-basis: 70px; }
  .dock-button { height: 48px; width: 48px; }
  .home-button { width: 50px; }
  .dash-music { padding: 10px; }
  .dash-now .app-icon { height: 48px; width: 48px; }
  .dash-now>span:last-child { font-size: 15px; }
  .dash-listen { font-size: var(--type-16); padding: 7px 18px; margin: 5px 0; }
  .dash-apps { font-size: var(--type-12); margin: 2px 0; }
  .drive-metrics strong { font-size: 19px; }
  .dash-map .drive-guidance strong { font-size: 17px; }
}
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .screen { max-height: 830px; }
  .battery { width: 22px; height: 10px; }
  .home-button { width: 42px; }
  .home-view { padding: var(--space-24) 18px var(--space-12); }
  .app-grid { grid-template-columns: repeat(2,1fr); gap: 10px 13px; }
  .app-button { gap: 6px; }
  .experience-icon b { font-size: 30px; }
  .page-dots { margin-top: 13px; }
  .dashboard-view { grid-template-rows: 1.8fr .65fr 1.1fr; }
  .dash-destinations { padding: 7px; }
  .dash-destinations button { gap: 9px; font-size: 17px; }
  .shortcut-icon { height: 35px; width: 35px; font-size: 26px; }
  .shortcut-icon.work { font-size: 22px; }
  .dash-music { padding: 11px; }
  .dash-now strong { font-size: 18px; }
  .dash-now>span:last-child { font-size: var(--type-14); }
  .dash-listen { padding: 6px 19px; margin: 7px 0 0; }
  .dash-apps { font-size: 11px; margin: 3px 0 0; padding: 5px; }
  .dash-map .drive-guidance { padding: var(--space-8) 10px; }
  .direction-glyph { font-size: 30px; min-width: 23px; }
  .drive-metrics { gap: 7px; }
  .drive-metrics span { font-size: 11px; }
  .road-map-view .drive-guidance { left: 10px; padding: var(--space-12); font-size: 17px; }
  .drive-guidance strong { font-size: 18px; }
  .drive-guidance span:not(.direction-glyph) { font-size: var(--type-14); }
  .destinations-button { padding: var(--space-12); }
  .road-toolbar { top: 160px; }
  .trip-panel { bottom: 25px; padding: var(--space-12); }
  .trip-title strong { font-size: 17px; }
  .trip-title { margin-bottom: var(--space-12); }
  .trip-bottom { font-size: 10px; }
  .trip-bottom button { font-size: 11px; }
  .app-header { font-size: 17px; grid-template-columns: 1fr auto 1fr; }
  .list { padding: 0 14px; }
  .list-row { padding: var(--space-16) 0; }
  .list-row .app-icon { width: 40px; height: 40px; }
  .tabs { flex-basis: 51px; }
  .stop-tabs button { font-size: var(--type-12); }
  .experience-title .app-icon { border-radius: 13px; }
  .pills { gap: 6px; }
  .music-player { overflow: auto; }
  .transport { justify-content: center; gap: 21px; }
  .transport button { width: 42px; height: 42px; }
  .transport svg { width: 33px; height: 33px; }
  .music-search input { padding: 9px; }
  .connection { padding: 0 6px 10px; }
  .under-device { font-size: 10px; padding: var(--space-12) 5px 0; }
  .under-device button { font-size: 10px; }
  .under-links { gap: 13px; }
}
@media(max-height:550px) and (min-width:681px) {
  body { padding: 10px 15px; }
  .connection { padding-bottom: 7px; }
  .device { padding: 7px; }
  .screen { height: calc(100svh - 75px); min-height: 300px; aspect-ratio: auto; }
  .home-view { padding: var(--space-20) 28px 5px; }
  .app-icon { width: 77px; height: 77px; }
  .app-button { font-size: var(--type-16); }
  .app-grid { gap: var(--space-12); }
  .page-dots { height: 16px; }
  .under-device { padding-top: var(--space-8); }
  .dash-now .app-icon { height: 43px; width: 43px; }
  .dash-listen { padding: 7px 18px; margin: 6px 0; }
  .dash-apps { padding: var(--space-4); margin: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .view, .app-icon { animation: none; transition: none; }
  .trip-progress i { transition: none; }
}
.song-art img { object-fit: cover; }
.apple-track-link { display: block; margin-bottom: var(--space-16); font-size: var(--type-14); }
.screen { aspect-ratio: 1363/673; min-height: 460px; border-radius: 22px; }
.sidebar { width: 9.9%; flex-basis: 9.9%; background: var(--color-rgba-323008a5); backdrop-filter: blur(32px); }
.home-view { padding: 4.3% 5.4% 14px 5.6%; }
.app-grid { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,1fr); gap: var(--space-24) 45px; }
.app-button { font-size: clamp(18px,2.35vw,32px); gap: var(--space-12); }
.app-icon { width: clamp(90px,12.3vw,172px); height: clamp(90px,12.3vw,172px); }
.app-label { max-width: 100%; background: var(--color-rgba-323008a5); backdrop-filter: blur(32px); padding: var(--space-4) var(--space-12); }
.app-button:focus-visible .app-icon { box-shadow: 0 0 0 4px var(--color-fff); }
.dock-button { width: 68px; height: 68px; }
.status time { font-size: clamp(22px,2.1vw,30px); }
.page-dots { margin-top: var(--space-12); }
.dash-destinations button strong { font-size: 21px; }
.shortcut-icon svg { height: 27px; width: 27px; fill: currentColor; }
.destinations-button { display: flex; align-items: center; gap: var(--space-8); }
.destinations-button svg { height: 23px; width: 23px; fill: currentColor; }
.parked-card { display: none; position: absolute; top: 18px; left: 18px; z-index: 401; background: var(--color-2c2c2eeb); color: var(--color-fff); backdrop-filter: blur(25px); padding: 14px var(--space-20); border-radius: 17px; box-shadow: 0 4px 20px var(--color-0002); }
.parked-card strong { display: block; font-size: var(--type-24); font-weight: 600; }
.parked-card span { display: block; font-size: var(--type-16); color: var(--color-ffffff98); margin-top: var(--space-4); }
.parked .parked-card { display: block; }
.parked .trip-panel, .parked .dash-trip { display: none; }
.dash-map.parked .direction-glyph { font-size: 29px; }
.dash-map.parked .drive-guidance { max-width: calc(100% - 20px); }
.favorites-panel { position: absolute; inset: 14px auto 14px 14px; width: min(465px,53%); z-index: 450; background: var(--color-rgba-109d5f46); backdrop-filter: blur(62px); border: 1px solid var(--color-ffffff10); box-shadow: 0 12px 30px var(--color-0003); border-radius: var(--radius-24); display: flex; flex-direction: column; color: var(--color-fff); overflow: hidden; animation: favorite-in .18s ease-out; }
.favorites-heading { padding: var(--space-20) var(--space-20) 14px; display: flex; align-items: center; justify-content: space-between; }
.favorites-heading h2 { margin: 0; font-size: 30px; }
.favorites-heading p { margin: var(--space-4) 0 0; font-size: var(--type-16); color: var(--color-ffffff83); }
.favorites-heading>button { height: 34px; width: 34px; background: var(--color-ffffff13); font-size: 27px; color: var(--color-b8b8be); line-height: 1; }
.favorites-tabs { display: flex; padding: 0 14px 14px; }
.favorites-tabs button { flex: 1; min-width: 0; border-radius: 10px; padding: 9px var(--space-4); font-size: var(--type-14); font-weight: 590; color: var(--color-aaaab0); }
.favorites-tabs button[aria-pressed=true] { background: var(--color-32ade6); }
.favorites-list { overflow: auto; padding: 0 14px var(--space-12); overscroll-behavior: contain; }
.favorite-row { display: flex; align-items: center; width: 100%; text-align: left; gap: var(--space-12); border-radius: var(--radius-12); background: var(--color-454545); padding: var(--space-12); margin-bottom: var(--space-8); min-height: 83px; }
.favorite-row .row-copy { flex: 1; min-width: 0; }
.favorite-row .row-copy strong { display: block; font-size: 21px; line-height: 1.25; font-weight: 600; }
.favorite-row .row-copy>span { display: block; font-size: 15px; color: var(--color-ffffff76); margin-top: 3px; }
.favorite-row small { display: block; font-size: 11px; color: var(--color-ffffff76); margin-top: 5px; }
.favorite-row .chevron-text { font-size: 28px; color: var(--color-999); }
.favorite-row:focus-visible, .favorite-row:hover { background: var(--color-32ade6); }
.favorite-row:focus-visible { outline-offset: -3px; }
.favorite-row:hover .row-copy>span, .favorite-row:hover small, .favorite-row:hover .chevron-text { color: var(--color-ffffffba); }
.favorites-footer { padding: 10px 18px 14px; font-size: var(--type-12); color: var(--color-ffffff70); text-align: center; border-top: 1px solid var(--color-ffffff0b); }
.music-player { align-items: start; grid-template-columns: minmax(160px,30%) minmax(0,1fr); gap: 30px; }
.album { max-width: 280px; }
.music-search input { border-radius: 14px; }
.song-art { background: var(--color-353538); }
@keyframes favorite-in {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}
@media(min-width:681px) and (max-width:1000px) {
  .screen { min-height: 445px; }
  .sidebar { width: 85px; flex-basis: 85px; }
  .home-view { padding: 27px 28px var(--space-12); }
  .app-grid { gap: 18px 26px; }
  .app-icon { width: 105px; height: 105px; }
  .app-button { font-size: 21px; }
  .dock-button { width: 53px; height: 53px; }
  .dash-destinations button strong { font-size: 18px; }
  .favorites-panel { width: 52%; }
  .favorite-row { min-height: 75px; padding: 9px; }
  .favorite-row .row-copy strong { font-size: 18px; }
  .favorite-row .row-copy>span { font-size: 13px; }
  .music-player { padding: var(--space-24); gap: 22px; }
  .player-info h1 { font-size: 26px; }
}
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .screen { min-height: 630px; }
  .dock-button { width: 39px; height: 39px; }
  .home-view { padding: var(--space-24) 15px 10px; }
  .app-grid { grid-template-rows: repeat(4,1fr); gap: var(--space-12) var(--space-8); }
  .app-icon { width: 76px; height: 76px; }
  .app-label { padding: 3px 7px; border-radius: 7px; }
  .page-dots { margin-top: 10px; }
  .parked-card { top: 64px; padding: var(--space-12) 14px; }
  .parked-card strong { font-size: 19px; }
  .favorites-panel { border-radius: 19px; }
  .favorites-heading { padding: 17px var(--space-16) var(--space-12); }
  .favorites-heading h2 { font-size: 25px; }
  .favorites-heading p { font-size: var(--type-14); }
  .favorites-tabs { gap: 2px; }
  .favorites-list { padding: 0 10px 10px; }
  .favorite-row { gap: 9px; }
  .music-player { padding: 18px; }
  .dash-trip { bottom: 24px; }
}
@media(max-height:550px) and (min-width:681px) {
  .screen { min-height: 320px; }
  .home-view { padding: 18px var(--space-32) 5px; }
  .app-icon { width: 85px; height: 85px; }
  .app-button { font-size: 18px; }
  .app-grid { gap: var(--space-12) 30px; }
  .music-player { padding: var(--space-12) var(--space-24); gap: var(--space-24); }
  .favorites-heading { padding: var(--space-12) var(--space-16); }
  .favorites-heading h2 { font-size: 23px; }
  .favorites-heading p { display: none; }
  .favorites-tabs { padding-bottom: 9px; }
  .favorite-row { min-height: 75px; padding: 9px; }
  .favorites-footer { padding: 7px var(--space-12); }
}
@media(prefers-reduced-motion:reduce) {
  .favorites-panel { animation: none; }
}

/* Native CarPlay geometry and app components */
:root { --kit-accent: var(--color-64d2ff); }
body { padding: 28px var(--space-24); background: var(--color-0d0d10); }
.device-wrap { width: min(1540px,100%); }
.device { padding: 10px; border-radius: 29px; }
.screen { height: auto; min-height: 0; aspect-ratio: 1920/720; border-radius: var(--radius-20); background: var(--wallpaper); display: block; }
.carplay-viewport { position: absolute; top: 0; left: 0; width: 1920px; height: 720px; display: flex; transform-origin: top left; font-size: 36px; overflow: hidden; }
.content { height: 720px; flex: 1; width: 1785px; min-width: 0; }
.sidebar { width: 135px; flex: 0 0 135px; padding: 21px 0 36px; background: var(--color-rgba-8c3cd2a1); backdrop-filter: blur(50px); }
.status { font-size: 36px; line-height: 43px; letter-spacing: 1.44px; }
.status-bottom { font-size: 36px; margin-top: 9px; gap: 9px; line-height: 43px; letter-spacing: .36px; }
.signal { gap: var(--space-4); transform: none; }
.signal i { border-radius: 2px; }
.signal i:nth-child(1) { height: 12px; }
.signal i:nth-child(2) { height: 18px; }
.signal i:nth-child(3) { height: 25px; }
.signal i:nth-child(4) { height: 32px; }
.battery { display: none; }
.dock { position: absolute; top: 206px; left: 24px; gap: var(--space-24); padding: 0; flex: 0; justify-content: start; }
.dock-button { width: 87px; height: 87px; border-radius: 19px; }
.dock .app-icon { width: 87px; height: 87px; border-radius: 19px; }
.dock-button[aria-current=true] { box-shadow: 0 0 0 6px var(--kit-accent); outline: 8px solid var(--color-transparent); outline-offset: 6px; }
.home-button { position: absolute; left: 23px; bottom: 36px; width: 90px; height: 45px; padding: 0; border-radius: 9px; }
.home-glyph { width: 90px; height: 45px; grid-template-columns: repeat(4,18px); grid-template-rows: repeat(2,18px); gap: 9px 6px; }
.home-glyph i { border-radius: var(--radius-4); }
.dashboard-glyph { width: 90px; height: 45px; display: grid; grid-template-columns: 48px 34px; grid-template-rows: repeat(3,11px); gap: 6px var(--space-8); }
.dashboard-glyph i:first-child { grid-row: 1/4; }
.dashboard-glyph i { border-radius: 3px; }
.home-view { padding: 0; position: relative; }
.app-grid { position: absolute; top: 60px; left: 147px; right: 150px; height: 551px; display: grid; grid-template-columns: repeat(5,180px); grid-template-rows: repeat(2,251px); justify-content: space-between; gap: 49px 0; }
.app-button { width: 180px; height: 251px; font-size: 36px; line-height: 47.5px; gap: 15px; justify-content: start; align-items: center; letter-spacing: 0; }
.app-icon { width: 180px; height: 180px; border-radius: 40px; box-shadow: none; overflow: hidden; display: grid; place-items: center; flex-shrink: 0; }
.app-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.app-label { height: 56px; max-width: 310px; flex-shrink: 0; padding: var(--space-4) 14px; border-radius: var(--radius-12); line-height: 47.5px; font-size: 36px; font-weight: 400; white-space: nowrap; background: var(--color-rgba-8c3cd2a1); backdrop-filter: blur(50px); overflow: hidden; text-overflow: ellipsis; }
.app-button:hover .app-icon { filter: brightness(1.06); transform: none; }
.app-button:focus-visible { outline: none; }
.app-button:focus-visible .app-icon { box-shadow: 0 0 0 5px var(--kit-accent); }
.app-button:focus-visible .app-label { color: var(--color-000); background: var(--color-fff); }
.experience-icon { background: var(--company-color); }
.experience-icon b { font-size: 65px; letter-spacing: -2px; font-weight: 600; }
.experience-icon i { display: none; }
.page-dots { position: absolute; top: 668px; left: 50%; transform: translateX(-50%); height: 23px; margin: 0; gap: 30px; }
.page-dot { height: 23px; width: 23px; }
.dashboard-view { padding: var(--space-24); display: grid; grid-template-columns: 993px 720px; grid-template-rows: 208px 440px; gap: var(--space-24); }
.dash-map { border-radius: 27px; grid-row: 1/3; position: relative; overflow: hidden; }
.dash-destinations, .dash-music { border-radius: 27px; background: var(--color-rgba-4c47ac34); backdrop-filter: blur(57px); padding: 0; position: relative; }
.dash-destinations { display: grid; grid-template-columns: 1fr 1fr; }
.dash-destinations button { gap: var(--space-12); justify-content: start; padding-top: 39px; border-radius: var(--radius-20); }
.dash-destinations button strong { font-size: 36px; font-weight: 500; line-height: 43px; }
.shortcut-icon { height: 90px; width: 90px; font-size: 62px; background: var(--color-65d0de); }
.shortcut-icon.work { font-size: 53px; background: var(--color-cc896f); }
.shortcut-icon svg { height: 48px; width: 48px; }
.dash-music { overflow: hidden; display: block; }
.dash-now { position: absolute; top: 24px; left: 35px; right: 35px; display: flex; flex-direction: column; align-items: center; gap: 0; max-width: none; width: 650px; }
.dash-now .app-icon { width: 129px; height: 129px; border-radius: var(--radius-8); flex-shrink: 0; margin-bottom: var(--space-20); }
.dash-now strong { font-size: 39px; font-weight: 600; line-height: 47px; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dash-now>span:last-child { font-size: 36px; color: var(--color-ffffff70); line-height: 43px; margin-top: var(--space-20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.dash-seek { position: absolute; top: 300px; left: 46px; right: 38px; height: 9px; border-radius: 18px; overflow: hidden; background: var(--color-ffffff14); }
.dash-seek i { display: block; background: var(--color-ffffffb0); height: 100%; width: 0; }
.dash-music .transport { position: absolute; top: 326px; left: 85px; width: 550px; height: 96px; margin: 0; justify-content: space-between; gap: 0; }
.transport { display: flex; gap: 50px; align-items: center; justify-content: start; }
.transport button, .dash-music .transport button { width: 120px; height: 96px; border-radius: var(--radius-20); display: grid; place-items: center; }
.transport svg, .dash-music .transport svg { height: 65px; width: 65px; fill: currentColor; }
.transport button:active { background: var(--color-ffffff16); }
.dash-playback-note { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: var(--type-16); color: var(--color-ffffff7a); line-height: 19px; }
.dash-listen { position: absolute; bottom: 55px; left: 120px; right: 120px; font-size: 30px; padding: 15px; margin: 0; border-radius: var(--radius-16); }
.dash-apps { display: none; }
.drive-guidance { top: 24px; left: 24px; right: 24px; gap: var(--space-24); padding: var(--space-24) 30px; border-radius: 27px; background: var(--color-1e1e1e); box-shadow: 0 4px 30px var(--color-0003); }
.drive-guidance strong { font-size: 40px; line-height: 1.2; font-weight: 600; }
.drive-guidance span:not(.direction-glyph) { font-size: 28px; line-height: 1.3; margin-top: 7px; }
.direction-glyph { font-size: 60px; min-width: 50px; }
.dash-map .drive-guidance { left: 20px; right: auto; top: 20px; max-width: calc(100% - 40px); padding: var(--space-20) 25px; }
.dash-map .drive-guidance strong { font-size: 34px; }
.dash-map .drive-guidance span:not(.direction-glyph) { font-size: 25px; }
.dash-map.parked .drive-guidance { max-width: calc(100% - 40px); right: auto; }
.dash-map.parked .direction-glyph { font-size: 48px; }
.dash-trip { left: 20px; right: 20px; bottom: 40px; padding: 18px; border-radius: var(--radius-24); }
.drive-metrics { gap: var(--space-24); }
.drive-metrics strong { font-size: 38px; line-height: 46px; }
.drive-metrics span { font-size: 22px; margin-top: 5px; }
.road-map-view .drive-guidance { min-width: 450px; max-width: calc(100% - 145px); }
.destinations-button { top: auto; bottom: 24px; left: 24px; right: auto; width: 639px; height: 132px; padding: var(--space-32) 44px; gap: var(--space-24); border-radius: 27px; font-size: 48px; font-weight: 500; background: var(--color-1e1e1e); box-shadow: 0 4px 30px var(--color-0003); }
.destinations-button svg { height: 54px; width: 54px; }
.road-toolbar { top: 24px; right: 24px; width: 84px; border-radius: 42px; padding: 0; overflow: hidden; background: var(--color-1e1e1e); color: var(--color-64d2ff); }
.road-toolbar button { height: 88px; width: 84px; font-size: 47px; line-height: 1; border-radius: 0; }
.road-toolbar button+button { border-top: 1px solid var(--color-ffffff12); }
.parked-card { top: 24px; left: 24px; right: auto; padding: 25px var(--space-32); border-radius: 27px; background: var(--color-1e1e1e); }
.parked-card strong { font-size: 42px; }
.parked-card span { font-size: 28px; margin-top: var(--space-8); }
.trip-panel { left: 24px; bottom: 190px; width: 639px; padding: 26px 30px; border-radius: 27px; background: var(--color-1e1e1e); }
.trip-title { gap: var(--space-20); margin-bottom: 22px; }
.trip-title small { font-size: var(--type-20); letter-spacing: 1px; margin-bottom: var(--space-8); }
.trip-title strong { font-size: 36px; }
.trip-title button { height: 65px; width: 65px; font-size: 34px; }
.trip-progress { height: 8px; margin: var(--space-20) 0 15px; }
.trip-bottom { font-size: 22px; gap: var(--space-16); }
.trip-bottom button { font-size: var(--type-24); }
.favorites-panel { top: 24px; left: 24px; bottom: 182px; width: 639px; border-radius: 27px; background: var(--color-1e1e1e); border: 0; backdrop-filter: blur(30px); box-shadow: 0 4px 30px var(--color-0003); }
.favorites-heading { padding: 28px 30px var(--space-16); }
.favorites-heading h2 { font-size: 46px; font-weight: 600; letter-spacing: 0; }
.favorites-heading p { display: none; }
.favorites-heading>button { width: 50px; height: 50px; font-size: 38px; }
.favorites-tabs { padding: 0 var(--space-24) 18px; gap: 6px; }
.favorites-tabs button { font-size: 23px; border-radius: 14px; padding: var(--space-12) 6px; }
.favorites-tabs button[aria-pressed=true] { background: var(--color-333337); color: var(--color-64d2ff); }
.favorite-row { min-height: 118px; padding: var(--space-16); gap: 18px; margin-bottom: 10px; border-radius: 18px; background: var(--color-2c2c2e); }
.favorite-row .row-copy strong { font-size: 32px; }
.favorite-row .row-copy>span { font-size: var(--type-24); }
.favorite-row small { font-size: 19px; }
.favorite-row .destination-symbol { width: 70px; height: 70px; font-size: 42px; }
.favorite-row .chevron-text { font-size: 44px; }
.favorite-row:hover, .favorite-row:focus-visible { background: var(--color-454545); }
.favorites-footer { font-size: var(--type-20); padding: 13px 25px 18px; }
.destination-symbol { height: 80px; width: 80px; font-size: 48px; }
.destination-tag { font-size: 21px; }
.app-header { height: 96px; flex-basis: 96px; padding: 0 36px; font-size: 40px; line-height: 48px; background: var(--surface); }
.back { font-size: 34px; gap: var(--space-8); }
.back>span { font-size: 58px; }
.header-action { font-size: 30px; }
.app-view { font-size: 36px; }
.list { padding: 18px 30px; }
.list-row { min-height: 132px; padding: 18px var(--space-24); border: 0; border-radius: var(--radius-24); background: var(--color-454545); gap: 28px; margin-bottom: var(--space-12); color: var(--color-fff); }
.list-row:hover { background: var(--color-555558); }
.list-row .app-icon { width: 88px; height: 88px; border-radius: 19px; }
.list-row .experience-icon b { font-size: 36px; letter-spacing: -1px; }
.row-title { font-size: 36px; font-weight: 400; line-height: 1.2; }
.row-sub { font-size: 28px; line-height: 1.3; color: var(--color-ffffff76); margin-top: 7px; }
.chevron-text { font-size: 48px; }
.section-note { font-size: 23px; line-height: 1.4; padding: 18px 35px; color: var(--secondary); }
.tabs { height: 100px; flex-basis: 100px; padding: var(--space-12) 30px; gap: 18px; }
.tabs button { font-size: 33px; padding: 14px 18px; border-radius: 15px; }
.tabs button.selected { color: var(--color-64d2ff); background: var(--color-353538); }
.detail { padding: 35px 48px; }
.detail h1 { font-size: 54px; line-height: 1.16; }
.detail h2 { font-size: 38px; margin: 35px 0 18px; }
.detail p { font-size: 33px; line-height: 1.5; }
.detail p.lead { font-size: 38px; line-height: 1.45; }
.detail ul { font-size: 32px; line-height: 1.5; }
.detail li { margin-bottom: var(--space-16); }
.detail-label { font-size: 25px; line-height: 1.5; }
.experience-title { gap: 30px; }
.experience-title .app-icon { width: 135px; height: 135px; border-radius: 30px; }
.experience-title .experience-icon b { font-size: 48px; }
.pills { gap: 13px; margin: 30px 0; }
.pill { padding: 10px var(--space-20); border-radius: 30px; font-size: 25px; }
.blue-button { font-size: 30px; padding: var(--space-20) 28px; border-radius: 18px; }
.source-link { font-size: 27px; }
.resume-document { min-height: 0; }
.contact-top { padding: 36px 48px; gap: 30px; }
.contact-avatar { height: 110px; width: 110px; font-size: 48px; }
.contact-top h1 { font-size: 48px; }
.contact-top p { font-size: 30px; }
.contact-actions { padding: 25px 48px; gap: var(--space-24); }
.contact-actions a, .contact-actions button { font-size: 29px; padding: var(--space-20); border-radius: 18px; }
.contact-actions svg { height: 42px; width: 42px; }
.contact-field { font-size: 33px; padding: 28px 48px; }
.contact-field small { font-size: 25px; }
.music-search { padding: 18px 30px; }
.music-search input { font-size: 33px; padding: 17px var(--space-24); border-radius: var(--radius-20); }
.music-player { display: grid; grid-template-columns: 470px minmax(0,1fr); padding: 45px 60px; gap: 70px; overflow: auto; align-items: center; min-height: 0; }
.album { width: 470px; max-width: 470px; border-radius: var(--radius-24); align-self: center; }
.player-info { width: 100%; }
.player-info h1 { font-size: 54px; line-height: 1.15; }
.player-info p { font-size: 35px; line-height: 1.3; }
.music-player .transport { margin: 25px 0; gap: 45px; }
.seek { height: 10px; width: 100%; margin-top: 15px; accent-color: var(--color-fff); cursor: pointer; }
.seek-labels { font-size: 25px; margin-top: var(--space-12); }
.volume-label { font-size: 26px; gap: var(--space-20); margin-top: var(--space-24); }
.volume-label input { accent-color: var(--color-fff); height: 10px; }
.music-empty { padding: 42px; min-height: 260px; }
.music-empty .app-icon { width: 129px; height: 129px; margin-bottom: var(--space-20); }
.music-empty h2 { font-size: 43px; }
.music-empty p { font-size: 29px; line-height: 1.45; max-width: 1000px; }
.apple-player-bar { padding: 15px 18px; gap: var(--space-20); }
.apple-player-bar span { font-size: 23px; }
.apple-player-bar button { width: 42px; height: 40px; font-size: 27px; border-radius: 9px; }
.apple-player-note { font-size: 17px; padding: 0 18px 13px; line-height: 1.4; }
.settings-body { padding: 28px 40px; }
.setting-label { font-size: 25px; margin: 22px 6px var(--space-16); }
.setting-row { font-size: 35px; padding: 28px 30px; gap: 25px; }
.setting-row.appearance-choice { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.setting-row span:last-child { font-size: 28px; }
.setting-group { border-radius: var(--radius-24); overflow: hidden; }
.toggle { width: 84px; height: 51px; padding: 5px; border-radius: 30px; }
.toggle i { width: 41px; height: 41px; }
.toggle[aria-checked=true] i { transform: translateX(33px); }
.wallpapers { gap: 18px; }
.wallpaper-option { height: 115px; border-radius: 18px; }
.toast { font-size: 27px; padding: var(--space-20) 30px; bottom: 30px; }
.device-wrap:fullscreen .screen { height: auto; max-height: none; aspect-ratio: 1920/720; }
.device-wrap:fullscreen { display: flex; padding: var(--space-20); }
.device-wrap:fullscreen .device { width: min(100%,calc((100svh - 100px)*1920/720)); align-self: center; }
.light .list-row { background: var(--color-fff); color: var(--color-1c1c1e); }
.light .row-sub { color: var(--color-6e6e73); }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  body { padding: var(--space-12) var(--space-8); }
  .device { border-radius: 22px; }
  .screen { min-height: 640px; height: calc(100svh - 100px); max-height: 840px; }
  .carplay-viewport { font-size: 18px; }
  .sidebar { width: 59px; flex-basis: 59px; padding: 15px 0; }
  .status-bottom { font-size: 11px; line-height: 14px; }
  .signal i:nth-child(1) { height: 3px; }
  .signal i:nth-child(2) { height: 5px; }
  .signal i:nth-child(3) { height: 8px; }
  .signal i:nth-child(4) { height: 11px; }
  .dock { top: 30%; left: 10px; gap: 15px; }
  .dock-button, .dock .app-icon { width: 39px; height: 39px; border-radius: 9px; }
  .dock-button[aria-current=true] { box-shadow: 0 0 0 2px var(--kit-accent); }
  .home-button { bottom: 22px; width: 39px; height: 30px; }
  .home-glyph { width: 33px; height: 21px; grid-template-columns: repeat(4,6px); grid-template-rows: repeat(2,7px); gap: 3px; }
  .home-glyph i { border-radius: 2px; }
  .dashboard-glyph { width: 33px; height: 21px; grid-template-columns: 17px 13px; grid-template-rows: repeat(3,5px); gap: 3px 3px; }
  .dashboard-glyph i { border-radius: 2px; }
  .home-view { padding: var(--space-20) 15px var(--space-12); display: flex; flex-direction: column; }
  .app-grid { position: static; grid-template-rows: repeat(5,1fr); justify-content: normal; }
  .app-button { width: 100%; height: auto; align-self: center; font-size: var(--type-14); line-height: 18px; gap: 7px; justify-content: center; }
  .app-icon { width: 66px; height: 66px; border-radius: 15px; }
  .experience-icon b { font-size: 28px; letter-spacing: -1px; }
  .app-label { font-size: 13px; height: 24px; border-radius: 6px; backdrop-filter: blur(20px); }
  .page-dots { position: static; transform: none; margin-top: var(--space-12); justify-content: center; height: 18px; gap: 10px; }
  .page-dot { height: 8px; width: 8px; }
  .dashboard-view { padding: 9px; grid-template-columns: 1fr; grid-template-rows: 1.6fr .55fr 1.1fr; gap: 9px; }
  .dash-map { grid-row: auto; }
  .dash-destinations, .dash-music { border-radius: 17px; }
  .dash-destinations button { justify-content: center; }
  .dash-destinations button strong { font-size: var(--type-16); line-height: 20px; }
  .shortcut-icon { width: 33px; height: 33px; font-size: 25px; }
  .shortcut-icon.work { font-size: 23px; }
  .dash-now { width: auto; margin: 11px var(--space-12) 0; gap: 0; }
  .dash-now .app-icon { width: 44px; height: 44px; margin-bottom: 6px; border-radius: 5px; }
  .dash-now strong { font-size: 17px; }
  .dash-now>span:last-child { line-height: 17px; margin-top: 3px; }
  .dash-seek { top: auto; bottom: 48px; left: 15px; right: 15px; }
  .dash-music .transport { top: auto; bottom: 12px; left: calc(50% - 75px); width: 150px; height: 34px; }
  .transport button, .dash-music .transport button { width: 40px; height: 34px; border-radius: 7px; }
  .transport svg, .dash-music .transport svg { height: 25px; width: 25px; }
  .dash-playback-note { bottom: 0; font-size: 8px; line-height: 11px; }
  .dash-listen { bottom: 18px; left: 30px; right: 30px; padding: var(--space-8); font-size: 15px; }
  .drive-guidance { padding: var(--space-12); gap: var(--space-12); border-radius: 15px; left: 10px; top: 10px; right: 10px; }
  .drive-guidance strong { font-size: var(--type-20); }
  .drive-guidance span:not(.direction-glyph) { font-size: 13px; margin-top: var(--space-4); }
  .direction-glyph { font-size: 31px; min-width: 25px; }
  .dash-map .drive-guidance { padding: 9px var(--space-12); left: 10px; right: auto; top: 10px; max-width: calc(100% - 20px); gap: 10px; border-radius: 13px; }
  .dash-map .drive-guidance strong { font-size: var(--type-16); }
  .dash-map.parked .direction-glyph { font-size: 25px; }
  .dash-map.parked .drive-guidance { max-width: calc(100% - 20px); }
  .dash-trip { left: 10px; right: 10px; padding: var(--space-8); border-radius: var(--radius-12); }
  .drive-metrics { gap: var(--space-8); }
  .drive-metrics strong { font-size: 18px; line-height: 22px; }
  .road-map-view .drive-guidance { top: 65px; min-width: 0; max-width: none; right: 10px; }
  .destinations-button { top: 10px; bottom: auto; left: 10px; right: 10px; width: auto; height: 45px; padding: 10px 14px; font-size: 19px; gap: 10px; border-radius: 13px; }
  .destinations-button svg { height: 23px; width: 23px; }
  .road-toolbar { top: 165px; right: 10px; width: 44px; border-radius: 22px; }
  .road-toolbar button { height: 43px; width: 44px; font-size: 25px; }
  .parked-card { top: 68px; left: 10px; right: 65px; padding: 13px; border-radius: 15px; }
  .parked-card strong { font-size: var(--type-20); }
  .parked-card span { font-size: 13px; margin-top: var(--space-4); }
  .trip-panel { left: 10px; right: 10px; bottom: 26px; width: auto; padding: 15px; border-radius: 17px; }
  .trip-title { gap: 10px; margin-bottom: 14px; }
  .trip-title small { margin-bottom: 5px; }
  .trip-title strong { font-size: 19px; }
  .trip-title button { width: 37px; height: 37px; font-size: 19px; }
  .trip-progress { height: 4px; margin: 14px 0 11px; }
  .trip-bottom { gap: 10px; }
  .trip-bottom button { font-size: 13px; }
  .favorites-panel { inset: 10px; width: calc(100% - 20px); border-radius: 17px; }
  .favorites-heading { padding: 17px var(--space-16) 13px; }
  .favorites-heading h2 { font-size: 26px; }
  .favorites-heading>button { height: 32px; width: 32px; font-size: 25px; }
  .favorites-tabs { padding: 0 10px var(--space-12); gap: 3px; }
  .favorites-tabs button { font-size: 11px; padding: var(--space-8) 3px; border-radius: 9px; }
  .favorite-row { padding: 10px; border-radius: var(--radius-12); margin-bottom: var(--space-8); }
  .favorite-row .row-copy strong { font-size: 17px; }
  .favorite-row .row-copy>span { margin-top: 3px; }
  .favorite-row small { font-size: 10px; }
  .favorite-row .destination-symbol { width: 40px; height: 40px; font-size: 25px; }
  .favorite-row .chevron-text { font-size: 28px; }
  .favorites-footer { font-size: 10px; padding: 10px 13px var(--space-12); }
  .destination-symbol { width: 40px; height: 40px; font-size: var(--type-24); }
  .destination-tag { font-size: 10px; }
  .app-header { height: 54px; flex-basis: 54px; padding: 0 13px; line-height: 22px; }
  .back { font-size: 15px; gap: 5px; }
  .back>span { font-size: 29px; }
  .header-action { font-size: var(--type-14); }
  .app-view { font-size: 18px; }
  .list { padding: 10px 13px; }
  .list-row { min-height: 86px; padding: 13px; gap: 11px; border-radius: var(--radius-12); margin-bottom: 9px; }
  .list-row .app-icon { width: 43px; height: 43px; border-radius: 10px; }
  .list-row .experience-icon b { font-size: var(--type-20); }
  .row-title { font-size: 17px; }
  .row-sub { font-size: 13px; line-height: 1.4; margin-top: var(--space-4); }
  .chevron-text { font-size: 28px; }
  .section-note { font-size: var(--type-12); padding: var(--space-12) 17px; }
  .tabs { height: 52px; flex-basis: 52px; padding: 7px var(--space-12); gap: 5px; }
  .tabs button { font-size: var(--type-14); padding: var(--space-8) 5px; border-radius: var(--radius-8); }
  .detail { padding: 23px 19px; }
  .detail h1 { font-size: 27px; }
  .detail h2 { font-size: 22px; margin: var(--space-24) 0 11px; }
  .detail p, .detail ul { line-height: 1.5; }
  .detail p.lead { font-size: 18px; }
  .detail li { margin-bottom: 10px; }
  .detail-label { font-size: 13px; }
  .experience-title { gap: var(--space-12); align-items: start; }
  .experience-title .app-icon { height: 49px; width: 49px; border-radius: var(--radius-12); }
  .experience-title .experience-icon b { font-size: 21px; }
  .pills { gap: 7px; margin: 19px 0; }
  .pill { font-size: var(--type-12); padding: 6px 9px; }
  .blue-button { font-size: var(--type-16); padding: var(--space-12) var(--space-16); border-radius: 10px; }
  .source-link { font-size: 15px; }
  .contact-top { padding: var(--space-24) 17px; gap: 13px; }
  .contact-avatar { height: 58px; width: 58px; font-size: var(--type-24); }
  .contact-top h1 { font-size: 23px; }
  .contact-top p { font-size: 15px; }
  .contact-actions { padding: 18px var(--space-16); gap: 7px; }
  .contact-actions a, .contact-actions button { font-size: 13px; padding: var(--space-12) 9px; border-radius: 10px; }
  .contact-actions svg { height: 27px; width: 27px; }
  .contact-field { padding: 18px; font-size: var(--type-16); }
  .contact-field small { font-size: var(--type-12); }
  .music-search { padding: 9px 15px; }
  .music-search input { font-size: 15px; padding: 10px 13px; border-radius: var(--radius-12); }
  .music-player { display: flex; flex-direction: column; justify-content: start; padding: 21px; gap: 18px; }
  .album { width: 150px; max-width: 150px; border-radius: 14px; flex-shrink: 0; }
  .player-info { width: 100%; text-align: center; }
  .player-info h1 { font-size: var(--type-24); }
  .music-player .transport { margin: 15px 0; gap: var(--space-20); }
  .music-player .transport button { width: 42px; height: 42px; }
  .music-player .transport svg { height: 33px; width: 33px; }
  .seek { height: 6px; margin-top: 10px; }
  .seek-labels { margin-top: 7px; }
  .volume-label { font-size: var(--type-14); gap: 15px; margin-top: 17px; }
  .volume-label input { height: 6px; }
  .music-empty { min-height: 240px; padding: var(--space-24) var(--space-20); }
  .music-empty .app-icon { width: 80px; height: 80px; }
  .music-empty h2 { font-size: 25px; }
  .music-empty p { font-size: var(--type-16); }
  .apple-player-bar { padding: var(--space-8) 10px; gap: 10px; }
  .apple-player-bar span { font-size: 11px; }
  .apple-player-bar button { width: 30px; height: 24px; font-size: 19px; border-radius: 7px; }
  .apple-player-note { font-size: 10px; padding: 0 13px 9px; }
  .settings-body { padding: var(--space-16); }
  .setting-label { font-size: var(--type-14); margin: 15px 6px 10px; }
  .setting-row { font-size: var(--type-16); padding: 17px 14px; gap: 14px; }
  .setting-row span:last-child { font-size: var(--type-14); }
  .setting-group { border-radius: 13px; }
  .toggle { height: 32px; padding: 3px; border-radius: 22px; }
  .toggle i { width: 26px; height: 26px; }
  .toggle[aria-checked=true] i { transform: translateX(21px); }
  .wallpaper-option { height: 77px; border-radius: 13px; }
  .toast { padding: 13px 18px; bottom: 20px; }
  .device-wrap:fullscreen .screen { height: calc(100svh - 70px); aspect-ratio: auto; }
}
@media(prefers-reduced-motion:reduce) {
  .view, .favorites-panel { animation: none; transition: none; }
}

/* Experience conversations and pinned contacts */
.app-view:has(>.pm-inbox), .app-view:has(>.pm-thread) { background: linear-gradient(132deg,var(--color-c6e9e8) 0%,var(--color-c7e2e4) 42%,var(--color-a7bad9) 100%); color: var(--color-111c23); }
.app-view:has(>.pm-inbox)>.app-header, .app-view:has(>.pm-thread)>.app-header { background: var(--color-transparent); border-bottom: 0; color: var(--color-101b20); }
.app-view:has(>.pm-inbox)>.app-header .back, .app-view:has(>.pm-thread)>.app-header .back, .app-view:has(>.pm-inbox)>.app-header .header-action, .app-view:has(>.pm-thread)>.app-header .header-action { color: var(--color-075d98); }
.pm-inbox, .pm-thread { flex: 1; min-height: 0; font-family: var(--font-system-3); letter-spacing: -.5px; }
.pm-inbox { display: flex; flex-direction: column; overflow: hidden; }
.pm-pinned { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-24); padding: 17px 74px 29px; flex-shrink: 0; }
.pm-pinned-contact { display: flex; align-items: center; flex-direction: column; gap: 15px; min-width: 0; padding: 0 10px var(--space-12); border-radius: 25px; color: inherit; text-align: center; transition: background .15s,transform .15s; }
.pm-pinned-contact:hover { background: var(--color-ffffff2c); }
.pm-pinned-contact:focus-visible, .pm-conversation:focus-visible, .pm-thread-actions button:focus-visible { outline: 5px solid var(--color-007aff); outline-offset: 5px; }
.pm-pinned-avatar { width: 132px; height: 132px; display: block; }
.pm-avatar { display: block; flex-shrink: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; box-shadow: 0 1px 3px var(--color-0c355316),inset 0 0 0 1px var(--color-ffffff3a); }
.pm-avatar .app-icon { height: 100%; width: 100%; border-radius: 50%; box-shadow: none; }
.pm-avatar .experience-icon b { font-size: 52px; font-weight: 500; letter-spacing: -1.2px; }
.pm-avatar .app-icon svg { width: 60%; height: 60%; }
.pm-avatar .app-icon img { height: 100%; width: 100%; object-fit: cover; display: block; }
.pm-pinned-name { display: block; max-width: 100%; font-size: 34px; line-height: 41px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-inbox-list { flex: 1; min-height: 0; overflow: auto; padding: 0 62px 30px; scrollbar-color: var(--color-35577c62) var(--color-transparent); overscroll-behavior: contain; }
.pm-inbox-list:focus-visible, .pm-thread:focus-visible { outline: 3px solid var(--color-007aff); outline-offset: -4px; }
.pm-conversations { list-style: none; padding: 0; margin: 0; }
.pm-conversations>li { position: relative; }
.pm-conversations>li+li:before { content: ""; position: absolute; left: 122px; right: 49px; top: 0; height: 1px; background: var(--color-24456422); pointer-events: none; }
.pm-conversation { display: flex; align-items: center; gap: 26px; width: 100%; min-height: 152px; padding: var(--space-24) 15px; text-align: left; color: inherit; border-radius: var(--radius-20); }
.pm-conversation:hover { background: var(--color-ffffff26); }
.pm-conversation>.pm-avatar { width: 88px; height: 88px; }
.pm-conversation>.pm-avatar .experience-icon b { font-size: 38px; letter-spacing: -1px; }
.pm-conversation-copy { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; flex: 1; }
.pm-conversation-copy strong { font-size: 38px; line-height: 44px; font-weight: 500; letter-spacing: -.7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-conversation-role { font-size: 29px; line-height: 35px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-conversation-preview { font-size: 26px; line-height: 33px; color: var(--color-26465ee0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-conversation-date { width: 273px; flex-shrink: 0; font-size: 27px; line-height: 34px; color: var(--color-25466acc); text-align: right; letter-spacing: -.25px; }
.pm-chevron { font-size: 58px; line-height: 64px; font-weight: 300; color: var(--color-436083a3); flex-shrink: 0; margin-left: 5px; }
.pm-thread { overflow: auto; padding: 18px 63px 37px; scrollbar-color: var(--color-35577c62) var(--color-transparent); overscroll-behavior: contain; }
.pm-thread-contact { display: flex; align-items: center; gap: 22px; max-width: 1450px; margin: 0 auto 31px; padding-bottom: 25px; border-bottom: 1px solid var(--color-24456425); }
.pm-thread-contact>.pm-avatar { width: 82px; height: 82px; }
.pm-thread-contact>.pm-avatar .experience-icon b { font-size: 34px; }
.pm-thread-contact>div { min-width: 0; }
.pm-thread-contact h1 { font-size: 33px; line-height: 40px; margin: 0 0 var(--space-4); font-weight: 600; letter-spacing: -.5px; }
.pm-thread-contact p { font-size: 27px; line-height: 34px; margin: 0 0 5px; color: var(--color-183b50); }
.pm-thread-contact span:not(.pm-avatar):not(.app-icon) { font-size: 23px; line-height: 29px; color: var(--color-32536c); }
.pm-message-group { margin-left: auto; max-width: 1370px; }
.pm-speaker { display: block; text-align: right; font-size: var(--type-24); line-height: 30px; margin: 0 var(--space-16) 9px; color: var(--color-36566b); }
.pm-bubbles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: end; gap: 15px; }
.pm-message { position: relative; background: var(--color-087aff); color: var(--color-fff); border-radius: 28px; max-width: 100%; padding: 22px 29px; box-shadow: 0 2px 4px var(--color-2454b510); }
.pm-message:last-child { border-bottom-right-radius: 8px; }
.pm-message p { margin: 0; font-size: 31px; line-height: 41px; font-weight: 400; letter-spacing: -.25px; overflow-wrap: anywhere; }
.pm-thread-skills { display: flex; flex-wrap: wrap; justify-content: end; gap: 10px; max-width: 1370px; margin: 23px 0 0 auto; }
.pm-thread-skills span { font-size: 23px; line-height: 29px; background: var(--color-ffffff50); color: var(--color-234b68); padding: 9px 15px; border-radius: 18px; }
.pm-thread-actions { display: flex; justify-content: end; margin: 18px 0 0; padding-right: 3px; }
.pm-thread-actions button { padding: var(--space-12) 17px; font-size: 27px; line-height: 33px; border-radius: var(--radius-16); color: var(--color-075c96); background: var(--color-ffffff25); }
.pm-thread-actions button:hover { background: var(--color-ffffff55); }
.pm-thread-actions button span { font-size: 35px; margin-left: 9px; }
.pm-empty { padding: 60px 50px; text-align: center; color: var(--color-183b50); }
.pm-empty h2 { font-size: 37px; margin: 0 0 15px; }
.pm-empty p { font-size: 29px; line-height: 1.4; margin: 0; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .pm-inbox, .pm-thread { letter-spacing: -.2px; }
  .pm-pinned { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-12) 5px; padding: 10px 10px var(--space-16); }
  .pm-pinned-contact { gap: 5px; border-radius: var(--radius-12); }
  .pm-pinned-avatar { width: 56px; height: 56px; }
  .pm-avatar .experience-icon b { font-size: 22px; letter-spacing: -.5px; }
  .pm-pinned-name { font-size: 13px; line-height: 17px; }
  .pm-inbox-list { padding: 0 10px 17px; }
  .pm-conversations>li+li:before { left: 59px; right: 8px; }
  .pm-conversation { gap: 10px; min-height: 96px; padding: 14px 3px; border-radius: 10px; align-items: center; }
  .pm-conversation>.pm-avatar { width: 45px; height: 45px; }
  .pm-conversation>.pm-avatar .experience-icon b { font-size: 19px; }
  .pm-conversation-copy { gap: 2px; }
  .pm-conversation-copy strong { font-size: 17px; line-height: 21px; letter-spacing: -.25px; }
  .pm-conversation-role { font-size: var(--type-12); line-height: 16px; }
  .pm-conversation-preview { font-size: var(--type-12); line-height: 16px; }
  .pm-conversation-date { line-height: 15px; width: 62px; letter-spacing: 0; }
  .pm-chevron { font-size: 25px; line-height: 30px; margin-left: 0; }
  .pm-pinned-contact:focus-visible, .pm-conversation:focus-visible, .pm-thread-actions button:focus-visible { outline-width: 3px; outline-offset: 2px; }
  .pm-thread { padding: 14px var(--space-12) 25px; }
  .pm-thread-contact { gap: 10px; margin-bottom: 18px; padding-bottom: 14px; align-items: start; }
  .pm-thread-contact>.pm-avatar { width: 43px; height: 43px; }
  .pm-thread-contact>.pm-avatar .experience-icon b { font-size: 18px; }
  .pm-thread-contact h1 { font-size: 17px; line-height: 22px; margin-bottom: 3px; }
  .pm-thread-contact p { font-size: 13px; line-height: 18px; margin-bottom: var(--space-4); }
  .pm-thread-contact span:not(.pm-avatar):not(.app-icon) { font-size: 11px; line-height: 16px; }
  .pm-message-group { max-width: 100%; }
  .pm-speaker { font-size: var(--type-12); line-height: 16px; margin: 0 7px 6px; }
  .pm-bubbles { gap: 10px; }
  .pm-message { padding: var(--space-12) 15px; max-width: 95%; border-radius: 18px; }
  .pm-message:last-child { border-bottom-right-radius: 5px; }
  .pm-message p { font-size: 15px; line-height: 21px; letter-spacing: 0; }
  .pm-thread-skills { gap: 6px; margin-top: 15px; }
  .pm-thread-skills span { font-size: 11px; line-height: 15px; padding: 5px var(--space-8); border-radius: 10px; }
  .pm-thread-actions { margin-top: var(--space-12); padding-right: 0; }
  .pm-thread-actions button { padding: var(--space-8) 10px; font-size: var(--type-14); line-height: 19px; border-radius: 10px; }
  .pm-thread-actions button span { font-size: 18px; margin-left: var(--space-4); }
  .pm-empty { padding: 40px var(--space-20); }
  .pm-empty h2 { font-size: 23px; }
  .pm-empty p { font-size: var(--type-16); }
}
@media(prefers-reduced-motion:reduce) {
  .pm-pinned-contact, .pm-conversation, .pm-thread-actions button { transition: none!important; scroll-behavior: auto!important; }
}
.screen.reduced .pm-pinned-contact, .screen.reduced .pm-conversation, .screen.reduced .pm-thread-actions button { transition: none!important; }

/* Header and gesture refinements */
.shortcut-icon, .shortcut-icon.work { background: var(--color-transparent); font-size: 0; display: block; flex: none; }
.shortcut-icon img { display: block; }
.dash-destinations button { align-items: center; }
.destinations-button img { display: block; width: 54px; height: 54px; flex: none; }
.music-search { flex: none; }
.music-player .player-info { min-width: 0; }
.favorites-list { flex: 1; min-height: 0; }
.favorites-panel { padding-bottom: var(--space-24); }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .shortcut-icon img { width: 40px; height: 40px; }
  .dash-destinations button { padding-top: 0; }
  .destinations-button img { width: 24px; height: 24px; }
  .favorites-panel { padding-bottom: var(--space-12); }
}

/* Music library and playlist components */
.music-playlists { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-ffffff30) var(--color-transparent); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; gap: 30px 42px; padding: var(--space-24) 48px 34px; }
.playlist-card { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: start; padding: 10px var(--space-16) var(--space-16); border-radius: var(--radius-24); color: var(--text,var(--color-fff)); text-align: center; background: var(--color-transparent); transition: background .15s ease,opacity .15s ease; }
.playlist-card:hover { background: var(--color-ffffff09); }
.playlist-card:focus-visible { outline: 5px solid var(--kit-accent,var(--color-64d2ff)); outline-offset: 2px; background: var(--color-ffffff0d); }
.playlist-art, .playlist-cover { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); aspect-ratio: 1; background: var(--raised,var(--color-2c2c2e)); overflow: hidden; border-radius: 18px; isolation: isolate; }
.playlist-art { width: 288px; max-width: 100%; flex-shrink: 0; }
.playlist-art img, .playlist-cover img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.playlist-art img:only-child, .playlist-cover img:only-child { grid-column: 1/-1; grid-row: 1/-1; }
.playlist-art img:first-child:nth-last-child(2), .playlist-art img:first-child:nth-last-child(2)~img, .playlist-cover img:first-child:nth-last-child(2), .playlist-cover img:first-child:nth-last-child(2)~img { grid-row: 1/-1; }
.playlist-art img:first-child:nth-last-child(3), .playlist-cover img:first-child:nth-last-child(3) { grid-row: 1/-1; }
.playlist-card>strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; margin-top: 17px; font-size: 32px; line-height: 36px; font-weight: 600; overflow-wrap: anywhere; }
.playlist-card>span:not(.playlist-art) { margin-top: var(--space-8); font-size: 28px; line-height: 34px; color: var(--secondary,var(--color-9c9ca5)); }
.playlist-toolbar { display: flex; align-items: center; gap: 30px; flex-shrink: 0; padding: var(--space-24) 40px; border-bottom: 1px solid var(--line,var(--color-3a3a3c)); }
.playlist-cover { width: 128px; height: 128px; flex: 0 0 128px; border-radius: 14px; }
.playlist-cover>.playlist-art { width: 100%; height: 100%; grid-column: 1/-1; grid-row: 1/-1; border-radius: inherit; }
.playlist-count { min-width: 0; font-size: 30px; line-height: 1.3; color: var(--secondary,var(--color-9c9ca5)); }
.playlist-controls { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.playlist-controls button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-12); height: 72px; min-width: 148px; padding: var(--space-16) 27px; border-radius: var(--radius-16); background: var(--raised,var(--color-2c2c2e)); color: var(--text,var(--color-fff)); font-size: 30px; line-height: 36px; font-weight: 500; white-space: nowrap; transition: background .15s ease,opacity .15s ease; }
.playlist-controls button:first-child { background: var(--kit-accent,var(--color-64d2ff)); color: var(--color-101015); }
.playlist-controls button svg { display: block; width: 30px; height: 30px; flex-shrink: 0; fill: currentColor; }
.playlist-controls button:focus-visible { outline: 4px solid var(--kit-accent,var(--color-64d2ff)); outline-offset: 5px; }
.playlist-controls button:first-child:focus-visible { outline-color: var(--text,var(--color-fff)); }
.playlist-controls button:hover { filter: brightness(1.08); }
.playlist-controls button:disabled { filter: none; cursor: default; }
.light .playlist-card:hover { background: var(--color-0a84ff08); }
.light .playlist-card:focus-visible { background: var(--color-0a84ff0c); }
.light .music-playlists { scrollbar-color: var(--color-00000030) var(--color-transparent); }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .app-header { grid-template-columns: 50px minmax(0,1fr) 50px; }
  .music-playlists { gap: var(--space-20) 10px; padding: 14px 11px 22px; }
  .playlist-card { padding: 5px 3px 10px; border-radius: var(--radius-12); }
  .playlist-card:focus-visible { outline-width: 2px; outline-offset: 1px; }
  .playlist-art { width: clamp(90px,25vw,150px); max-width: 100%; border-radius: 10px; }
  .playlist-card>strong { margin-top: 9px; line-height: 19px; }
  .playlist-card>span:not(.playlist-art) { margin-top: 5px; font-size: var(--type-12); line-height: 16px; }
  .playlist-toolbar { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 10px 13px; padding: 14px 13px; }
  .playlist-cover { grid-column: 1; grid-row: 1/3; width: 72px; height: 72px; border-radius: 10px; }
  .playlist-toolbar>:not(.playlist-cover) { grid-column: 2; min-width: 0; }
  .playlist-count { font-size: var(--type-14); line-height: 19px; }
  .playlist-controls { margin-left: 0; gap: 7px; flex-wrap: wrap; }
  .playlist-controls button { height: 36px; min-width: 0; padding: var(--space-8) 10px; border-radius: var(--radius-8); gap: 6px; line-height: 16px; }
  .playlist-controls button svg { width: 15px; height: 15px; }
  .playlist-controls button:focus-visible { outline-width: 2px; outline-offset: 3px; }
}
@media(prefers-reduced-motion:reduce) {
  .playlist-card, .playlist-controls button { transition: none; }
}
.screen.reduced .playlist-card, .screen.reduced .playlist-controls button { transition: none; }

/* Native icon and control artwork */
:root { --wallpaper: url("assets/carplay-wallpaper.webp") center / cover no-repeat; }
.screen { border-radius: calc(38px * var(--viewport-scale,1)); }
.carplay-viewport { border-radius: 38px; }
.home-view, .list, .dash-music { font-family: var(--font-system-4); }
.app-icon.native-icon { background: var(--color-transparent); border-radius: 0; overflow: visible; box-shadow: none; }
.native-icon>.native-art { position: absolute; left: 0; top: 0; display: block; width: 180px; height: 180px; max-width: none; transform-origin: 0 0; transform: scale(var(--native-scale,1)); object-fit: contain; }
.list-row .native-icon { --native-scale: .4888888889; }
.experience-title .native-icon { --native-scale: .75; }
.dash-now .native-icon, .music-empty .native-icon { --native-scale: .7166666667; }
.native-tray>.native-art { width: 87px; height: 87px; }
.dock-button .app-icon.native-icon>.native-art { width: 100%; height: 100%; transform: none; }
/* Supplied 256px square icons have a 222px visible footprint at (17,19).
   Fill the dock tile with that artwork, at either viewport size. */
.dock-button .app-icon.native-icon>.native-art.padded-art { width: 115.3153153153%; height: 115.3153153153%; left: -7.6576576577%; top: -8.5585585586%; transform: none; }
.sidebar { position: relative; }
.status { position: absolute; top: 21px; left: 0; width: 135px; height: 94px; font-family: var(--font-system); }
.status time { position: absolute; left: 27px; top: 0; width: 81px; font-size: 36px; font-weight: 600; line-height: 43px; letter-spacing: 1.44px; text-align: center; }
.status-bottom { position: absolute; top: 51px; left: 0; width: 100%; height: 43px; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }
.signal { position: static; flex: none; width: 51px; height: 32px; gap: 5px; align-items: end; }
.signal i { width: 9px; border-radius: 3px; }
.carrier { position: static; flex: none; width: auto; font-size: 36px; font-weight: 400; line-height: 43px; letter-spacing: .36px; white-space: nowrap; }
.dock-button { position: relative; }
.dock-button[aria-current=true] { box-shadow: none; outline: none; }
.dock-button[aria-current=true]::after { content: ""; position: absolute; inset: -12px; border: 6px solid var(--kit-accent); border-radius: 30px; pointer-events: none; }
.home-button { left: 22px; }
.kit-toggle { display: block; position: relative; width: 90px; height: 45px; }
.kit-toggle img { display: block; width: 90px; height: 45px; max-width: none; transform-origin: 0 0; }
.dash-map { border-radius: 26px; }
.dash-destinations button { gap: 9px; }
.dash-destinations button:first-child>* { transform: translateX(9px); }
.dash-destinations button:last-child>* { transform: translateX(-7px); }
.shortcut-icon, .shortcut-icon.work { width: 90px; height: 90px; position: relative; }
.shortcut-icon img { position: absolute; left: 0; top: 0; width: 90px; height: 90px; max-width: none; transform-origin: 0 0; }
.dash-now { padding: 0; }
.kit-control { display: block; position: relative; width: 120px; height: 96px; pointer-events: none; }
.kit-control-ink { position: absolute; left: 0; top: 0; display: block; width: 120px; height: 96px; background: currentColor; mask-image: var(--control-glyph); mask-size: 120px 96px; mask-position: center; mask-repeat: no-repeat; -webkit-mask-image: var(--control-glyph); -webkit-mask-size: 120px 96px; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; transform-origin: 0 0; }
.transport button .kit-control .kit-pause-art { position: absolute; left: 0; top: 0; display: block; width: 120px; height: 96px; fill: currentColor; transform-origin: 0 0; }
.transport button:has(.kit-control) { padding: 0; border-radius: 18px; }
.transport button:has(.kit-control):is(:hover,:focus-visible,:active) { background: var(--color-transparent); }
.transport button:has(.kit-control):focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.kit-map-pin { display: block; position: relative; flex: none; width: 23px; height: 63.2103271484375px; }
.destinations-button .kit-map-pin img { position: absolute; left: 0; top: 0; display: block; width: 23px; height: 63.2103271484375px; max-width: none; transform-origin: 0 0; }
@media(min-width:901px) and (min-height:551px), (min-width:1101px) {
  .list { padding: 18px 84px; }
  .list-row { height: 132px; min-height: 132px; max-height: 132px; padding: 22px; gap: 7px; margin-bottom: 6px; }
  .list-row .app-icon { border-radius: 18px; }
  .list-row .row-copy { transform: translateY(1px); }
  .list-row .row-title { font-size: 47px; line-height: 56px; letter-spacing: -.47px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .list-row .row-sub { font-size: 36px; line-height: 43px; margin-top: 5px; color: var(--color-rgba-fcd0a258); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .list-row:is(:hover,:focus-visible) { background: var(--kit-accent); color: var(--color-000); outline: none; }
  .list-row:is(:hover,:focus-visible) .row-sub { color: var(--color-rgba-2004ad74); }
  .light .list-row .row-sub { color: var(--color-6e6e73); }
  .light .list-row:is(:hover,:focus-visible) { background: var(--kit-accent); color: var(--color-000); }
  .light .list-row:is(:hover,:focus-visible) .row-sub { color: var(--color-rgba-2004ad74); }
}
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .screen, .carplay-viewport { border-radius: var(--radius-20); }
  .native-icon { --native-scale: .3666666667; }
  .list-row .native-icon { --native-scale: .2388888889; }
  .experience-title .native-icon { --native-scale: .2722222222; }
  .dash-now .native-icon { --native-scale: .2444444444; }
  .music-empty .native-icon { --native-scale: .4444444444; }
  .native-tray { --native-scale: .4482758621; }
  .status { position: relative; top: auto; left: auto; width: 100%; height: auto; font-size: 19px; line-height: 24px; letter-spacing: -.2px; }
  .status time { position: static; width: auto; font-size: 19px; line-height: 24px; letter-spacing: -.2px; }
  .status-bottom { position: relative; top: auto; left: auto; width: 100%; height: 14px; display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: 6px; }
  .signal { position: static; width: auto; height: 11px; gap: 2px; }
  .signal i { width: 2px; border-radius: 1px; }
  .carrier { position: static; width: auto; font-size: 11px; line-height: 14px; letter-spacing: .11px; }
  .dock-button[aria-current=true]::after { inset: -5.379310345px; border-width: 2.689655172px; border-radius: 13.448275862px; }
  .home-button { left: 10px; }
  .kit-toggle { width: 33px; height: 16.5px; }
  .kit-toggle img { transform: scale(.3666666667); }
  .dash-map { border-radius: 17px; }
  .dash-destinations button { gap: var(--space-8); }
  .dash-destinations button:nth-child(n)>* { transform: none; }
  .shortcut-icon, .shortcut-icon.work { width: 40px; height: 40px; }
  .shortcut-icon img { transform: scale(.4444444444); }
  .kit-control { width: 40px; height: 32px; }
  .kit-control-ink, .transport button .kit-control .kit-pause-art { transform: scale(.3333333333); }
  .music-player .kit-control { width: 42px; height: 33.6px; }
  .music-player .kit-control-ink, .music-player .transport button .kit-control .kit-pause-art { transform: scale(.35); }
  .transport button:has(.kit-control) { border-radius: 6px; }
  .kit-map-pin { width: 9.66px; height: 26.5483374023px; }
  .destinations-button .kit-map-pin img { transform: scale(.42); }
}

/* Press feedback, status and map markers */
.screen button { transition: transform .18s cubic-bezier(.2,.8,.2,1),background .18s ease,opacity .18s ease; }
.screen button:not(:disabled):active { transform: scale(.97); }
.screen .transport button:not(:disabled):hover { opacity: .7; }
.screen .transport button:not(:disabled):active { transform: scale(.91); opacity: .55; }
.view, .view-refresh { animation: none; opacity: 1; transform: none; }
.app-view { isolation: isolate; }
.content:has(>.app-view) { background-color: var(--surface); }
.content:has(>.road-map-view), .road-map-view, .road-map { background-color: var(--map-canvas); }
.app-view>:is(.app-header,.scroll,.tabs,.music-search,.music-player,.settings-body,.pm-inbox,.pm-thread), .home-view>.app-grid { animation: carplay-content-enter .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes carplay-content-enter {
  from { transform: translateY(3px); }
  to { transform: translateY(0); }
}
@media(prefers-reduced-motion:reduce) {
  .screen button, .view, .view-refresh, .app-view>:is(.app-header,.scroll,.tabs,.music-search,.music-player,.settings-body,.pm-inbox,.pm-thread), .home-view>.app-grid { animation: none!important; transition: none!important; }
  .screen button:not(:disabled):active, .screen .transport button:not(:disabled):active { transform: none; }
}
.screen.reduced button:not(:disabled):active { transform: none; }
.screen { --map-canvas: var(--color-303536); --map-surface: var(--color-1e1e1e); --map-label: var(--color-fff); --map-secondary: var(--color-ffffff8f); --map-separator: var(--color-ffffff1f); --map-control: var(--color-64d2ff); --map-shadow: 0 4px 30px var(--color-0003); }
.screen.light { --blue: var(--color-007aff); --surface: var(--color-f2f2f7); --raised: var(--color-fff); --text: var(--color-1c1c1e); --secondary: var(--color-8e8e93); --line: var(--color-3c3c432e); --map-canvas: var(--color-f2f2ee); --map-surface: var(--color-fffffff5); --map-label: var(--color-1c1c1e); --map-secondary: var(--color-8e8e93); --map-separator: var(--color-3c3c432e); --map-control: var(--color-007aff); --map-shadow: 0 4px 30px var(--color-00000024); }
.light .sidebar { background: var(--color-rgba-a598af3f); color: var(--color-1c1c1e); }
.light .signal i { background: var(--color-1c1c1e); }
.light .app-label { background: var(--color-rgba-2052c774); color: var(--color-1c1c1e); text-shadow: none; }
.light .kit-toggle { background: var(--color-1c1c1e); mask-image: var(--toggle-image); mask-size: 90px 45px; mask-repeat: no-repeat; mask-position: center; }
.light .kit-toggle img { opacity: 0; }
.light .dash-destinations, .light .dash-music { background: var(--color-rgba-5e4070d6); color: var(--color-1c1c1e); }
.light .dash-now>span:last-child { color: var(--color-8e8e93); }
.light .dash-seek { background: var(--color-3c3c431f); }
.light .dash-seek i { background: var(--color-1c1c1e); }
.light .setting-label { color: var(--color-8e8e93); }
.light .music-search input { background: var(--color-e8e8ed); color: var(--color-1c1c1e); border: 0; }
.parked-card, .drive-guidance, .destinations-button, .trip-panel, .dash-trip, .favorites-panel { background: var(--map-surface); color: var(--map-label); box-shadow: var(--map-shadow); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.parked-card span, .drive-guidance span:not(.direction-glyph), .drive-metrics span, .trip-title small, .trip-bottom>span { color: var(--map-secondary); }
.trip-title button, .trip-bottom button { color: var(--map-control); }
.trip-progress { background: var(--map-separator); }
.trip-progress i { background: var(--map-control); }
.destinations-button { letter-spacing: -.48px; }
.destinations-button:hover { background: var(--map-surface); }
.light .kit-map-pin { background: var(--color-007aff); mask: url("assets/kit/map-destinations.svg") center / 23px 63.2103271484px no-repeat; }
.light .kit-map-pin img { opacity: 0; }
#favorites-layer { position: absolute; inset: 0; pointer-events: none; z-index: 450; }
#favorites-layer>.favorites-panel { pointer-events: auto; }
.favorites-heading h2 { letter-spacing: -.6px; }
.favorites-heading>button { color: var(--map-secondary); background: var(--map-separator); border-radius: 50%; }
.favorites-tabs { gap: var(--space-4); border-bottom: 1px solid var(--map-separator); margin: 0 var(--space-24); padding: 0 0 var(--space-16); }
.favorites-tabs button { color: var(--map-secondary); background: var(--color-transparent); border-radius: var(--radius-12); font-weight: 500; }
.favorites-tabs button[aria-pressed=true] { background: var(--map-control); color: var(--color-fff); }
.favorites-list { padding: 0 var(--space-24) var(--space-16); scrollbar-color: var(--map-separator) var(--color-transparent); }
.favorite-row { background: var(--color-transparent); color: var(--map-label); border-radius: 0; margin-bottom: 0; border-bottom: 1px solid var(--map-separator); padding: var(--space-20) var(--space-8); gap: 22px; }
.favorite-row:last-child { border-bottom: 0; }
.favorite-row:hover, .favorite-row:focus-visible { background: var(--color-007aff12); outline: none; border-radius: var(--radius-12); }
.favorite-row .row-copy>span, .favorite-row .chevron-text, .favorite-row:is(:hover,:focus-visible) .row-copy>span, .favorite-row:is(:hover,:focus-visible) .chevron-text { color: var(--map-secondary); }
.destination-symbol { border-radius: 50%; display: grid; place-items: center; color: var(--color-white); background: var(--color-007aff); }
.destination-symbol.Food { background: var(--color-ff9500); }
.destination-symbol.Activities { background: var(--color-ff2d55); }
.destination-symbol.Outdoors { background: var(--color-34c759); }
.destination-symbol.Hobbies { background: var(--color-af52de); }
.destination-symbol:is(.Food,.Activities,.Outdoors,.Hobbies) { color: var(--color-fff); }
.destination-symbol svg { display: block; width: 43px; height: 43px; fill: none; }
.map-controls { position: absolute; right: 25px; bottom: 25px; width: 84px; pointer-events: none; z-index: 420; }
.map-heading-control, .map-zoom-control, .map-overview-control { position: absolute; width: 84px; background: var(--map-surface); color: var(--map-control); border-radius: 42px; overflow: hidden; box-shadow: var(--map-shadow); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); pointer-events: auto; }
.map-heading-control { top: 0; height: 199px; }
.map-overview-control { top: 294px; height: 84px; padding: 0; }
.map-zoom-control { top: 472px; height: 199px; }
.map-heading-control button, .map-zoom-control button { width: 84px; height: 99.5px; display: grid; place-items: center; padding: 0; color: var(--map-control); border-radius: 0; }
.map-heading-control button+button, .map-zoom-control button+button { border-top: 1px solid var(--map-separator); }
.map-controls button:focus-visible { outline: 4px solid var(--map-control); outline-offset: -4px; }
.map-controls button:is(:hover,:active) { background: var(--color-007aff12); }
.map-heading-control button[aria-pressed=true] { background: var(--color-007aff1c); }
.kit-map-symbol { display: block; flex: none; background: var(--map-control); mask-repeat: no-repeat; mask-position: center; mask-size: 100% 100%; }
.compass-symbol { width: 30px; height: 55px; mask-image: url("assets/kit/map-heading-glyph.svg"); }
.perspective-symbol { width: 51.4049987793px; height: 33.3515625px; mask-image: url("assets/kit/map-3d-glyph.svg"); }
.overview-symbol { width: 84px; height: 84px; mask-image: url("assets/kit/map-overview-glyph.svg"); }
.plus-symbol { width: 36px; height: 36px; mask-image: url("assets/kit/map-plus-glyph.svg"); }
.minus-symbol { width: 36px; height: 4.000002861px; mask-image: url("assets/kit/map-minus-glyph.svg"); }
.ajit-drive-car { background: var(--color-transparent); border: 0; box-shadow: none; }
.ajit-location-dot { display: none; width: 30px; height: 30px; background: var(--color-007aff); border: 5px solid var(--color-white); border-radius: 50%; box-shadow: 0 0 0 7px var(--color-007aff1c),0 1px 5px var(--color-0003); }
.is-parked .ajit-location-dot { display: block; }
.is-parked .ajit-drive-heading { display: none; }
.direction-glyph svg { display: block; width: 60px; height: 60px; }
.dash-map .direction-glyph svg { width: 48px; height: 48px; }
.trip-title button { display: grid; place-items: center; padding: 0; }
.trip-title button svg { width: 32px; height: 32px; fill: currentColor; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .light .kit-toggle { mask-size: 33px 16.5px; }
  .light .kit-map-pin { mask-size: 9.66px 26.5483374023px; }
  .road-map-view .drive-guidance, .road-map-view .trip-panel { right: 65px; }
  .direction-glyph svg { width: 31px; height: 31px; }
  .dash-map .direction-glyph svg { width: 25px; height: 25px; }
  .trip-title button svg { width: 21px; height: 21px; }
  .map-controls { right: 10px; bottom: 26px; }
  .map-heading-control, .map-zoom-control, .map-overview-control { border-radius: 22px; }
  .map-heading-control, .map-zoom-control { height: 104px; }
  .map-heading-control button, .map-zoom-control button { height: 52px; }
  .map-overview-control { top: calc(50% - 22px); }
  .map-zoom-control { top: auto; bottom: 0; }
  .compass-symbol { width: 15.7142857143px; height: 28.8095238095px; }
  .perspective-symbol { width: 26.926427932px; height: 17.4698660714px; }
  .overview-symbol { width: 44px; height: 44px; }
  .plus-symbol { width: 18.8571428571px; height: 18.8571428571px; }
  .minus-symbol { width: 18.8571428571px; height: 2.095239594px; }
  .map-controls button:focus-visible { outline-width: 2px; outline-offset: -2px; }
  .favorites-tabs { margin: 0 var(--space-12); padding-bottom: var(--space-12); }
  .favorites-list { padding: 0 10px var(--space-12); }
  .favorite-row { gap: var(--space-12); padding: 14px 3px; }
  .favorite-row:hover, .favorite-row:focus-visible { border-radius: 9px; }
  .destination-symbol svg { width: 24px; height: 24px; }
}