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

/* Handheld view geometry and safe areas */
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { align-items: flex-start; padding: calc(var(--space-8) + env(safe-area-inset-top)) calc(var(--space-8) + env(safe-area-inset-right)) calc(var(--space-8) + env(safe-area-inset-bottom)) calc(var(--space-8) + env(safe-area-inset-left)); }
  .device-wrap { min-width: 0; }
  .device { padding: 6px; border-radius: var(--radius-24); box-shadow: 0 12px 35px var(--color-0005),0 0 0 1px var(--color-08080b); }
  .screen { aspect-ratio: auto; min-height: 0; max-height: none; height: calc(100svh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 18px; }
  .carplay-viewport { width: 100%; height: 100%; border-radius: 18px; transform: none; font-size: var(--type-16); }
  .content { width: auto; height: 100%; min-width: 0; min-height: 0; }
  .view { min-width: 0; min-height: 0; }
  .sidebar { width: 60px; flex-basis: 60px; padding: 14px 0 var(--space-12); }
  .status time { font-size: 17px; }
  .dock { top: 50%; left: 8px; gap: var(--space-12); transform: translateY(-50%); }
  .dock-button { width: 44px; height: 44px; display: grid; place-items: center; }
  .dock .app-icon { width: 39px; height: 39px; }
  .dock-button[aria-current=true]::after { inset: -2px; border-width: 2px; border-radius: var(--radius-12); }
  .home-button { left: 8px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; }
  .under-device { display: block; text-align: center; padding: 6px 0 0; line-height: 16px; font-size: 11px; }
  .under-device>span { display: block; }
  .under-links { justify-content: center; }
  .under-links button { font-size: var(--type-12); }
  .home-view { padding: var(--space-16) 10px 0; }
  .app-grid { flex: 1; min-height: 0; min-width: 0; height: auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; grid-auto-rows: 104px; align-content: start; gap: 10px var(--space-8); padding: 2px 2px var(--space-8); scrollbar-width: thin; }
  .app-button { min-width: 0; min-height: 96px; gap: var(--space-8); }
  .app-label { max-width: 100%; height: auto; min-height: 24px; font-size: var(--type-12); line-height: 18px; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-dots { height: 44px; flex: 0 0 44px; gap: 0; margin: 0; }
  .page-dot { width: 44px; height: 44px; min-width: 44px; min-height: 44px; background: var(--color-transparent); display: grid; place-items: center; border-radius: 10px; }
  .page-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ffffff70); }
  .page-dot.active { background: var(--color-transparent); }
  .page-dot.active::after { background: var(--color-fff); }
  .page-dot:hover { box-shadow: none; background: var(--color-ffffff0d); }
  .scroll, .music-player, .music-playlists, .pm-inbox-list, .pm-thread { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .app-header { grid-template-columns: 58px minmax(0,1fr) auto; height: 56px; flex-basis: 56px; gap: var(--space-4); padding: 0 10px; font-size: 18px; letter-spacing: -.3px; }
  .app-header>span { min-width: 0; }
  .back { min-height: 44px; font-size: var(--type-14); padding: 0; gap: 3px; }
  .back>span { font-size: 27px; }
  .header-action { min-width: 0; font-size: 13px; max-width: 76px; }
  .header-action a { display: flex; align-items: center; min-height: 44px; }
  .tabs { height: 56px; flex-basis: 56px; padding: 6px var(--space-8); gap: var(--space-4); }
  .tabs button { min-width: 0; min-height: 44px; padding: var(--space-8) var(--space-4); font-size: 13px; white-space: nowrap; }
  .list { padding: 10px; }
  .list-row { min-width: 0; padding: var(--space-12); gap: 10px; min-height: 88px; }
  .list-row .row-title { font-size: 17px; line-height: 22px; white-space: normal; overflow-wrap: anywhere; }
  .list-row .row-sub { font-size: 13px; line-height: 18px; white-space: normal; overflow-wrap: anywhere; }
  .detail { padding: var(--space-20) var(--space-16) 28px; }
  .detail h1 { font-size: 25px; line-height: 1.15; letter-spacing: -.7px; overflow-wrap: anywhere; }
  .detail h2 { font-size: 21px; }
  .detail p, .detail ul { font-size: var(--type-16); line-height: 1.55; }
  .detail p.lead { font-size: 17px; line-height: 1.5; }
  .experience-title { min-width: 0; flex-wrap: wrap; }
  .experience-title>div { min-width: 0; flex: 1 1 145px; }
  .blue-button { min-height: 44px; max-width: 100%; text-align: center; }
  .pill { max-width: 100%; overflow-wrap: anywhere; }
  .contact-top { padding: var(--space-20) 14px; flex-wrap: wrap; gap: var(--space-12); }
  .contact-top>div:last-child { min-width: 0; flex: 1 1 130px; }
  .contact-top h1 { font-size: 22px; overflow-wrap: anywhere; }
  .contact-actions { padding: 14px 10px; gap: 6px; }
  .contact-actions a, .contact-actions button { min-width: 0; min-height: 72px; padding: var(--space-12) var(--space-4); font-size: var(--type-12); }
  .contact-field { padding: var(--space-16) 14px; overflow-wrap: anywhere; }
  .setting-row { width: 100%; padding: 14px var(--space-12); gap: 10px; min-height: 64px; font-size: 15px; }
  .setting-row>span:first-child { min-width: 0; flex: 1; }
  .toggle { position: relative; width: 53px; height: 44px; padding: 9px 3px; flex: none; background: var(--color-transparent); }
  .toggle::before { content: ""; position: absolute; inset: 6px 0; background: var(--color-55555d); border-radius: var(--radius-16); }
  .toggle[aria-checked=true] { background: var(--color-transparent); }
  .toggle[aria-checked=true]::before { background: var(--color-30d158); }
  .toggle i { position: relative; z-index: 1; }
  .setting-row:has(.speed-options) { flex-wrap: wrap; }
  .dashboard-view { padding: var(--space-8); grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(130px,1fr) 64px 166px; gap: var(--space-8); overflow-y: auto; }
  .dash-map { min-width: 0; min-height: 130px; }
  .dash-destinations { padding: var(--space-4); min-width: 0; }
  .dash-destinations button { min-width: 0; min-height: 44px; flex-direction: row; gap: 6px; padding: 0; }
  .dash-destinations button strong { font-size: var(--type-14); line-height: 18px; }
  .shortcut-icon, .shortcut-icon.work { width: 32px; height: 32px; }
  .shortcut-icon img { width: 90px; height: 90px; transform: scale(.3555555556); }
  .dash-music { padding: 10px var(--space-12); display: grid; grid-template-rows: minmax(0,1fr) 3px 44px; gap: var(--space-8); min-width: 0; align-items: center; }
  .dash-now { position: static; width: 100%; margin: 0; display: grid; grid-template-columns: 50px minmax(0,1fr); grid-template-rows: 1fr 1fr; column-gap: 10px; align-items: center; text-align: left; min-width: 0; height: 100%; }
  .dash-now .app-icon { grid-column: 1; grid-row: 1/3; width: 50px; height: 50px; border-radius: var(--radius-8); margin: 0; --native-scale: .2777777778; }
  .dash-now strong { grid-column: 2; grid-row: 1; text-align: left; font-size: var(--type-16); line-height: 20px; align-self: end; min-width: 0; }
  .dash-now>span:last-child { grid-column: 2; grid-row: 2; text-align: left; font-size: 13px; line-height: 18px; margin: 2px 0 0; align-self: start; min-width: 0; }
  .dash-seek { position: static; width: 100%; height: 3px; }
  .dash-music .transport { position: static; width: 100%; height: 44px; margin: 0; gap: 0; justify-content: space-around; }
  .dash-music .transport button, .music-player .transport button { width: 48px; height: 44px; min-width: 48px; min-height: 44px; }
  .dash-map .drive-guidance { left: 8px; right: auto; top: 8px; max-width: calc(100% - 16px); padding: 9px 10px; gap: var(--space-8); }
  .dash-map .drive-guidance>div { min-width: 0; }
  .dash-map .drive-guidance strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash-map .drive-guidance span:not(.direction-glyph) { font-size: var(--type-12); }
  .dash-trip { left: 8px; right: 8px; bottom: 22px; padding: 7px; }
  .drive-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-4); }
  .drive-metrics strong { font-size: var(--type-14); line-height: 19px; letter-spacing: -.3px; }
  .drive-metrics span { font-size: 10px; line-height: 13px; }
  .destinations-button { top: 8px; left: 8px; right: 8px; height: 44px; min-height: 44px; padding: var(--space-8) var(--space-12); font-size: 17px; }
  .parked-card, .road-map-view .drive-guidance { top: 68px; left: 8px; right: 60px; width: auto; min-width: 0; max-width: none; padding: 10px; gap: var(--space-8); }
  .road-map-view .drive-guidance>div { min-width: 0; flex: 1; }
  .road-map-view .drive-guidance strong { font-size: var(--type-16); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .road-map-view .drive-guidance span:not(.direction-glyph) { font-size: var(--type-12); line-height: 16px; margin-top: 2px; }
  .road-map-view .direction-glyph { min-width: 25px; }
  .map-controls { top: 68px; right: 8px; bottom: auto; width: 44px; height: auto; display: flex; flex-direction: column; gap: var(--space-8); }
  .map-heading-control, .map-zoom-control, .map-overview-control { position: static; width: 44px; flex: none; }
  .map-heading-control, .map-zoom-control { height: 88px; }
  .map-heading-control button, .map-zoom-control button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .map-overview-control { height: 44px; min-width: 44px; min-height: 44px; }
  .road-map-view .trip-panel { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 10px; border-radius: var(--radius-16); }
  .trip-title { gap: var(--space-8); margin-bottom: 6px; min-width: 0; }
  .trip-title>div { min-width: 0; flex: 1; }
  .trip-title strong { display: block; font-size: var(--type-16); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .trip-title small { font-size: 10px; line-height: 14px; margin-bottom: 2px; }
  .trip-title button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: none; }
  .trip-progress { height: 3px; margin: 7px 0 var(--space-4); }
  .trip-bottom { gap: var(--space-4); min-width: 0; font-size: 11px; align-items: center; }
  .trip-bottom>span { flex: 1; min-width: 0; }
  .trip-bottom button { min-width: 44px; min-height: 44px; font-size: var(--type-12); padding: var(--space-4); }
  .favorites-panel { inset: 8px; width: calc(100% - 16px); min-width: 0; padding-bottom: var(--space-8); }
  .favorites-heading { padding: 10px var(--space-12) 6px; gap: var(--space-8); min-width: 0; }
  .favorites-heading h2 { font-size: var(--type-24); }
  .favorites-heading>button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .favorites-tabs { flex: none; gap: var(--space-4); margin: 0 10px; padding: 0 0 var(--space-8); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .favorites-tabs button { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: var(--space-8) 11px; font-size: var(--type-12); white-space: nowrap; }
  .favorite-row { min-height: 80px; padding: var(--space-12) 3px; gap: 10px; min-width: 0; }
  .favorite-row .row-copy strong { font-size: var(--type-16); line-height: 21px; overflow-wrap: anywhere; }
  .favorite-row .row-copy>span { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
  .music-player { padding: 18px var(--space-16) var(--space-24); gap: var(--space-16); align-items: center; justify-content: flex-start; }
  .album { width: min(170px,100%); max-width: 170px; }
  .player-info h1 { font-size: 23px; line-height: 28px; letter-spacing: -.5px; }
  .player-info p { font-size: var(--type-16); line-height: 21px; overflow-wrap: anywhere; }
  .music-player .transport { gap: var(--space-16); margin: 14px 0 6px; justify-content: center; }
  .seek { height: 32px; margin: 0; accent-color: var(--text); }
  .seek-labels { font-size: var(--type-12); margin-top: 0; }
  .volume-label { gap: 10px; margin-top: 10px; font-size: 13px; }
  .volume-label input { height: 32px; accent-color: var(--text); }
  .music-search input { font-size: var(--type-16); min-height: 44px; }
  .music-playlists { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 14px 10px var(--space-20); gap: 18px 10px; }
  .playlist-card { padding: var(--space-4) 2px var(--space-8); }
  .playlist-art { width: 100%; max-width: 170px; }
  .playlist-card>strong { font-size: 15px; line-height: 20px; margin-top: var(--space-8); }
  .playlist-toolbar { grid-template-columns: 56px minmax(0,1fr); padding: var(--space-12) 10px; gap: var(--space-8) 10px; }
  .playlist-cover { width: 56px; height: 56px; }
  .playlist-count { font-size: 13px; }
  .playlist-controls { gap: var(--space-4); }
  .playlist-controls button { min-width: 44px; min-height: 44px; height: 44px; font-size: var(--type-12); padding: 6px var(--space-8); gap: 5px; }
  .pm-pinned { display: flex; overflow-x: auto; flex: none; gap: 10px; padding: var(--space-8) 10px 14px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .pm-pinned-contact { flex: 0 0 68px; min-height: 88px; padding: 2px 3px 6px; }
  .pm-pinned-avatar { width: 50px; height: 50px; }
  .pm-pinned-name { font-size: var(--type-12); max-width: 68px; }
  .pm-conversation { display: grid; grid-template-columns: 42px minmax(0,1fr) 12px; gap: 3px 9px; padding: var(--space-12) 3px; min-height: 100px; }
  .pm-conversation>.pm-avatar { grid-column: 1; grid-row: 1/3; width: 42px; height: 42px; align-self: start; margin-top: 2px; }
  .pm-conversation-copy { grid-column: 2; grid-row: 1; min-width: 0; }
  .pm-conversation-date { grid-column: 2; grid-row: 2; width: auto; font-size: 11px; line-height: 16px; text-align: left; }
  .pm-chevron { grid-column: 3; grid-row: 1/3; font-size: var(--type-24); }
  .pm-conversation-copy strong { font-size: var(--type-16); }
  .pm-conversation-role { white-space: normal; line-height: 17px; }
  .pm-thread-contact h1, .pm-thread-contact p { overflow-wrap: anywhere; }
  .pm-thread-actions button { min-height: 44px; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
  .toast { font-size: var(--type-14); max-width: calc(100% - 20px); }
  .device-wrap:fullscreen { padding: calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); }
  .device-wrap:fullscreen .device { width: 100%; align-self: stretch; }
  .device-wrap:fullscreen .screen { min-height: 0; max-height: none; height: calc(100svh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
@media(min-width:600px) and (max-width:900px) {
  .app-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 112px; }
  .music-playlists { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width:900px) and (max-height:650px) and (orientation:portrait) {
  .road-map-view .map-controls { top: 60px; left: 8px; right: 8px; width: auto; flex-direction: row; justify-content: center; gap: 0; }
  .map-heading-control, .map-zoom-control { display: flex; width: 88px; height: 44px; border-radius: 0; }
  .map-heading-control { border-radius: 22px 0 0 22px; }
  .map-zoom-control { border-radius: 0 22px 22px 0; }
  .map-heading-control button+button, .map-zoom-control button+button { border-top: 0; border-left: 1px solid var(--map-separator); }
  .map-overview-control { border-radius: 0; }
  .road-map-view .drive-guidance, .parked-card { top: 112px; left: 8px; right: 8px; }
}
@media(max-width:1100px) and (max-height:550px) and (orientation:landscape) {
  body { padding: calc(6px + env(safe-area-inset-top)) calc(var(--space-8) + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(var(--space-8) + env(safe-area-inset-left)); }
  .screen { height: calc(100svh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .under-device { display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 0 var(--space-4); font-size: 11px; gap: var(--space-8); }
  .under-links { gap: 6px; }
  .under-links button { padding: 0 6px; font-size: var(--type-12); }
  .sidebar { width: 60px; flex-basis: 60px; height: 100%; min-height: 0; display: grid; grid-template-rows: 44px minmax(0,1fr) 44px; align-items: stretch; justify-items: center; gap: 3px; padding: 6px 0; overflow: hidden; }
  .status { position: static; top: auto; left: auto; display: block; width: 100%; height: 44px; min-height: 0; }
  .status time { position: static; display: block; width: 100%; font-size: 17px; line-height: 24px; }
  .status-bottom { position: static; display: flex; width: 100%; height: 14px; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-4) 0 0; }
  .dock { position: static; top: auto; left: auto; transform: none; flex: none; align-self: stretch; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 2px var(--space-8); gap: 3px; justify-content: flex-start; align-items: center; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; }
  .dock::-webkit-scrollbar { display: none; }
  .dock-button { flex: 0 0 44px; }
  .dock-button:first-child { margin-top: auto; }
  .dock-button:last-child { margin-bottom: auto; }
  .home-button { position: static; left: auto; bottom: auto; transform: none; flex: none; align-self: center; justify-self: center; margin: 0; width: 44px; height: 44px; }
  .home-view { padding: 10px 10px 0; }
  .app-grid { grid-template-columns: repeat(5,minmax(0,1fr)); grid-auto-rows: 100px; gap: var(--space-8); }
  .app-button { min-height: 96px; }
  .dashboard-view { grid-template-columns: minmax(0,1.4fr) minmax(220px,1fr); grid-template-rows: 64px minmax(150px,1fr); gap: var(--space-8); }
  .dash-map { grid-column: 1; grid-row: 1/3; }
  .dash-destinations { grid-column: 2; grid-row: 1; }
  .dash-music { grid-column: 2; grid-row: 2; }
  .music-player { display: grid; grid-template-columns: minmax(100px,28%) minmax(0,1fr); padding: var(--space-12) var(--space-20); gap: var(--space-20); align-items: center; }
  .album { width: 100%; max-width: 170px; justify-self: center; }
  .player-info { text-align: left; }
  .player-info h1 { font-size: var(--type-20); line-height: 24px; }
  .player-info p { font-size: var(--type-14); line-height: 18px; }
  .music-player .transport { justify-content: flex-start; margin: var(--space-8) 0 0; gap: var(--space-20); }
  .volume-label { margin-top: 0; }
  .music-playlists { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .playlist-art { max-width: 145px; }
  .destinations-button { right: auto; width: 200px; }
  .road-map-view .drive-guidance, .parked-card { top: 8px; left: 224px; right: auto; width: min(240px,calc(100% - 240px)); min-width: 0; max-width: none; padding: var(--space-8) 10px; }
  .road-map-view .trip-panel { left: 8px; right: auto; bottom: 8px; width: min(380px,calc(100% - 260px)); padding: var(--space-8); }
  .trip-title { margin-bottom: 2px; }
  .trip-title small { display: none; }
  .trip-progress { margin: var(--space-4) 0; }
  .road-map-view .map-controls { top: auto; left: auto; right: 8px; bottom: 8px; width: 236px; flex-direction: row; gap: var(--space-8); }
  .map-heading-control, .map-zoom-control { display: flex; width: 88px; height: 44px; border-radius: 22px; }
  .map-heading-control button+button, .map-zoom-control button+button { border-top: 0; border-left: 1px solid var(--map-separator); }
  .map-overview-control { height: 44px; }
  .favorites-panel { inset: 8px; width: calc(100% - 16px); }
  .favorites-heading { padding-top: 6px; padding-bottom: 2px; }
  .favorites-tabs { padding-bottom: var(--space-4); }
}

/* Visibility and playlist state constraints */
.page-dots[hidden], .orientation-notice[hidden], .destinations-button[hidden] { display: none!important; }
.orientation-notice { position: absolute; z-index: 1000; top: 10px; left: 50%; transform: translate3d(-50%,var(--notice-drag-y,0px),0); width: min(420px,calc(100% - 24px)); display: flex; gap: 10px; align-items: center; padding: var(--space-12) var(--space-12) var(--space-12) var(--space-16); border-radius: 18px; background: var(--color-rgba-17ffe21a); color: var(--color-fff); box-shadow: 0 6px 28px var(--color-0005); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); pointer-events: auto; touch-action: none; user-select: none; will-change: transform; font-size: var(--type-14); text-align: left; }
.orientation-notice>img { width: 44px; height: 44px; flex: none; }
.orientation-notice>div { min-width: 0; flex: 1; }
.orientation-notice .notice-sender { display: block; font-size: 10px; font-weight: 600; letter-spacing: .7px; opacity: .6; margin-bottom: var(--space-4); }
.orientation-notice strong { display: block; font-size: var(--type-16); line-height: 20px; font-weight: 600; }
.orientation-notice p { font-size: 13px; line-height: 18px; margin: 2px 0 0; color: inherit; opacity: .75; }
.light .orientation-notice { background: var(--color-rgba-25b1f0bc); color: var(--color-1c1c1e); box-shadow: 0 6px 26px var(--color-0003); }
.orientation-notice.notice-reduced { animation: none; }
.notice-dismiss { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: none; padding: 0; display: grid; place-items: center; color: inherit; opacity: .55; border-radius: 50%; }
.notice-dismiss:hover { opacity: 1; }
.notice-dismiss:focus-visible { outline: 2px solid var(--color-007aff); outline-offset: -3px; }
.device-wrap:fullscreen { overflow-y: auto; align-items: stretch; flex-direction: column; }
.device-wrap:fullscreen>.device { flex: none; }
@media(prefers-reduced-motion:reduce) {
  .orientation-notice { animation: none; }
}

/* Music Back and Now Playing controls */
.header-action .now-playing-shortcut { display: grid; place-items: center; width: 72px; height: 72px; padding: var(--space-4); border-radius: var(--radius-16); }
.now-playing-shortcut img { display: block; width: 64px; height: 64px; max-width: none; pointer-events: none; }
.now-playing-shortcut:hover { opacity: .72; }
.now-playing-shortcut:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .header-action .now-playing-shortcut { width: 44px; height: 44px; padding: 6px; border-radius: 10px; }
  .now-playing-shortcut img { width: 32px; height: 32px; }
  .now-playing-shortcut:focus-visible { outline-width: 2px; }
}
.native-icon>.native-art.padded-art { width: 225.8823529412px; height: 225.8823529412px; transform: scale(var(--native-scale,1)) translate(-22.9411764706px,-22.9411764706px); }
.favorites-heading>[data-close-favorites] { display: grid; place-items: center; flex: none; padding: 0; line-height: 0; background: var(--color-transparent); }
.favorites-heading>[data-close-favorites]:is(:active,:focus-visible) { background: var(--map-separator); }
@media(hover:hover) {
  .favorites-heading>[data-close-favorites]:hover { background: var(--map-separator); }
}
.favorites-heading>[data-close-favorites] svg { width: 28px; height: 28px; }
.destination-symbol svg { fill: currentColor; }
.map-favorite-symbol { width: 72px; height: 72px; display: grid; place-items: center; flex: none; border-radius: 19px; color: var(--color-fff); }
.destinations-button .map-favorite-symbol svg { width: 48px; height: 48px; fill: currentColor; }
.shortcut-icon.poi-shortcut { display: grid; place-items: center; color: var(--color-fff); border-radius: var(--radius-24); }
.shortcut-icon.poi-shortcut svg { width: 54px; height: 54px; fill: currentColor; }
.shortcut-icon.resume-shortcut { background: var(--color-transparent); border-radius: 0; }
.resume-shortcut>.app-icon { width: 90px; height: 90px; --native-scale: .5; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .favorites-heading>[data-close-favorites] svg { width: 21px; height: 21px; }
  .map-favorite-symbol { width: 28px; height: 28px; border-radius: var(--radius-8); }
  .destinations-button .map-favorite-symbol svg { width: 21px; height: 21px; }
  .shortcut-icon.poi-shortcut { border-radius: 9px; }
  .shortcut-icon.poi-shortcut svg { width: 24px; height: 24px; }
  .shortcut-icon.resume-shortcut { width: 33px; height: 33px; }
  .resume-shortcut>.app-icon { width: 33px; height: 33px; --native-scale: .1833333333; }
}

/* Portfolio identity and footer frame */
.portfolio-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-24); }
.portfolio-identity { min-width: 0; }
.portfolio-identity h1 { margin: 0; font-size: var(--type-24); line-height: 1.25; font-weight: 600; letter-spacing: -.45px; color: var(--page-identity); }
.portfolio-identity p { margin: 5px 0 0; font-size: var(--type-14); line-height: 20px; font-weight: 400; letter-spacing: 0; color: var(--page-secondary); }
.portfolio-resume { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: var(--type-14); line-height: 20px; font-weight: 500; color: var(--color-b9b9c4); }
.portfolio-resume:hover { color: var(--color-fff); }
.portfolio-resume:focus-visible { outline: 2px solid var(--color-9dc9ff); outline-offset: 5px; border-radius: 3px; }
.under-device { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 0; }
.under-links { gap: var(--space-20); }
.under-links button { font-size: var(--type-12); color: var(--color-8e8e99); }
.device-wrap:fullscreen>.portfolio-header { display: none; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .portfolio-header { gap: var(--space-16); margin-bottom: 18px; }
  .screen { height: calc(100svh - 154px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - 154px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .under-device { padding-top: 6px; }
  .under-links { gap: var(--space-8); height: 44px; }
  .under-links button { min-width: 44px; min-height: 44px; padding: 0 9px; }
}
@media(max-width:480px) {
  .portfolio-header { gap: var(--space-12); }
  .portfolio-identity h1 { font-size: 22px; }
  .portfolio-identity p { font-size: 13px; }
  .portfolio-resume { font-size: 13px; }
}
@media(max-width:1100px) and (max-height:550px) and (orientation:landscape) {
  .portfolio-header { margin-bottom: 6px; }
  .portfolio-identity h1 { font-size: var(--type-24); line-height: 28px; }
  .portfolio-identity p { margin-top: 0; font-size: 13px; line-height: 16px; }
  .screen { min-height: 0; height: calc(100svh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .under-device { flex-wrap: nowrap; min-height: 44px; padding-top: 0; }
  .device-wrap:fullscreen .screen { height: calc(100svh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

/* Native-style map navigation and destination sheets */
.app-button .app-label { background: var(--color-rgba-a9ba4e61); color: var(--color-fff); text-shadow: none; backdrop-filter: blur(64px); transition: background .16s ease,color .16s ease; }
.light .app-button .app-label { background: var(--color-rgba-92472286); color: var(--color-1c1c1e); }
.app-button:is(:active,:focus-visible) .app-label { background: var(--color-fff); color: var(--color-000); }
@media(hover:hover) {
  .app-button:hover .app-label { background: var(--color-f2f2f7); color: var(--color-000); }
}
.road-map-view { --route-card-width: 530px; --route-inset: 24px; --map-bubble-radius: 28px; }
.road-map-view .drive-guidance, .road-map-view .trip-panel, .road-map-view .parked-card, .road-map-view .route-options { left: var(--route-inset); right: auto; width: var(--route-card-width); min-width: 0; max-width: calc(100% - 140px); border-radius: var(--map-bubble-radius); }
.road-map-view .drive-guidance { top: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding: 30px var(--space-32); pointer-events: none; }
.maneuver-heading { display: flex; align-items: center; gap: var(--space-24); min-width: 0; }
.road-map-view .maneuver-heading [data-drive-turn-distance] { margin: 0; font-size: 64px; line-height: 1.04; font-weight: 650; letter-spacing: -1.8px; color: var(--map-label); }
.road-map-view .direction-glyph { display: grid; place-items: center; min-width: 64px; flex: none; }
.road-map-view .direction-glyph svg { width: 64px; height: 64px; }
.road-map-view .maneuver-copy [data-drive-instruction] { font-size: 36px; line-height: 1.16; letter-spacing: -.6px; font-weight: 550; overflow-wrap: anywhere; }
.maneuver-copy [data-drive-road]:empty { display: none; }
.road-map-view.parked .drive-guidance { display: none; }
.road-map-view .parked-card { top: 24px; padding: 26px var(--space-32); }
.road-map-view .parked-card strong { font-size: 36px; line-height: 1.16; }
.road-map-view .parked-card span { font-size: 25px; margin-top: var(--space-8); }
.road-map-view .trip-panel { bottom: 24px; padding: 25px 28px; display: flex; align-items: center; gap: 18px; min-height: 126px; }
.road-map-view.parked .trip-panel, .road-map-view.parked .route-options { display: none; }
.road-map-view .drive-metrics { flex: 1; min-width: 0; display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 14px; }
.road-map-view .drive-metrics strong { font-size: 38px; line-height: 1.12; font-weight: 550; letter-spacing: -1.2px; white-space: nowrap; }
.road-map-view .drive-metrics span { font-size: 23px; line-height: 1.15; margin-top: 6px; color: var(--map-secondary); }
.route-options-toggle { display: grid; place-items: center; flex: none; width: 62px; height: 62px; border-radius: 50%; padding: 0; color: var(--map-label); background: var(--map-separator); }
.route-options-toggle svg { width: 35px; height: 35px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .24s ease; }
.route-options-toggle[aria-expanded=true] svg { transform: rotate(180deg); }
.route-options-toggle:focus-visible, .route-option:focus-visible { outline: 3px solid var(--map-control); outline-offset: 4px; }
.route-options { position: absolute; z-index: 440; bottom: 168px; padding: var(--space-16) var(--space-20) var(--space-20); background: var(--map-surface); color: var(--map-label); box-shadow: var(--map-shadow); backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px); max-height: calc(100% - 192px); overflow: auto; animation: none; will-change: transform,opacity; overscroll-behavior: contain; }
.route-options[hidden] { display: none; }
.route-grabber { height: 6px; width: 55px; border-radius: 6px; margin: 0 auto var(--space-20); background: var(--map-secondary); opacity: .45; }
.route-option { display: flex; align-items: center; gap: 22px; padding: var(--space-20) var(--space-24); width: 100%; min-height: 82px; border-radius: 22px; font-size: 34px; line-height: 1.15; text-align: left; background: var(--color-ffffff12); color: var(--map-label); margin-top: var(--space-12); }
.light .route-option { background: var(--color-e5e5ea); }
.route-option:not(.end-route):is(:hover,:active) { background: var(--color-ffffff24); }
.light .route-option:not(.end-route):is(:hover,:active) { background: var(--color-d1d1d6); }
.route-action-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.route-action-icon svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.add-stop-icon { color: var(--color-0a84ff); }
.share-eta-icon { color: var(--color-30d158); }
.route-option.end-route { justify-content: center; background: var(--color-ff453a); color: var(--color-white); font-weight: 550; border-radius: 44px; }
.route-option.end-route:is(:hover,:active) { background: var(--color-ff3b30); }
.route-itinerary { font-size: 22px; line-height: 1.3; color: var(--map-secondary); padding: var(--space-16) 5px 0; }
.route-itinerary[hidden] { display: none; }
.routing-status { position: absolute; z-index: 460; top: 24px; left: 50%; transform: translateX(-50%); padding: 18px 26px; border-radius: 50px; font-size: 28px; background: var(--map-surface); color: var(--map-label); box-shadow: var(--map-shadow); backdrop-filter: blur(30px); }
.routing-status[hidden] { display: none; }
.road-map-view .destinations-button { top: auto; left: auto; right: 126px; bottom: 24px; width: 84px; height: 84px; padding: 0; display: flex; justify-content: center; gap: 0; border-radius: 50%; font-size: 0; }
.road-map-view .destinations-button .map-favorite-symbol { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; flex: none; color: var(--color-white); }
.road-map-view .destinations-button .map-favorite-symbol svg { width: 42px; height: 42px; }
.road-map-view.parked .destinations-button { left: 24px; right: auto; width: 530px; height: 108px; justify-content: flex-start; gap: 22px; padding: var(--space-20) 30px; font-size: 36px; border-radius: 28px; }
.road-map-view .destinations-button[hidden] { display: none; }
.map-controls { right: 24px; top: 24px; bottom: 24px; width: 72px; }
.map-heading-control, .map-overview-control, .map-zoom-control { width: 72px; border-radius: 36px; }
.map-heading-control { height: 160px; }
.map-heading-control button, .map-zoom-control button { width: 72px; height: 80px; }
.map-overview-control { top: 320px; height: 72px; }
.map-zoom-control { top: auto; bottom: 0; height: 160px; }
.compass-symbol { width: 32px; height: 45px; mask-image: url('assets/kit/native-map-heading.svg'); mask-size: contain; }
.perspective-symbol { width: 42px; height: 29px; mask-image: url('assets/kit/native-map-3d.svg'); mask-size: contain; }
.overview-symbol { width: 38px; height: 38px; mask-image: url('assets/kit/native-map-overview.svg'); mask-size: contain; }
.plus-symbol { width: 32px; height: 32px; mask-image: url('assets/kit/native-map-plus.svg'); }
.minus-symbol { width: 32px; height: 32px; mask-image: url('assets/kit/native-map-minus.svg'); mask-size: contain; }
.speed-limit { position: absolute; top: 184px; width: 72px; min-height: 96px; border: 3px solid var(--color-111); border-radius: 10px; background: var(--color-white); color: var(--color-111); text-align: center; padding: 7px 3px; font-family: var(--font-system-2); box-shadow: 0 2px 8px var(--color-0002); }
.speed-limit[hidden] { display: none; }
.speed-limit span { display: block; font-size: var(--type-14); font-weight: 700; line-height: 1.05; }
.speed-limit strong { display: block; font-size: 39px; font-weight: 600; line-height: 1.1; }
.favorite-row[data-highlighted-place=true] { background: var(--color-007aff0d); }
.dash-map .drive-guidance { display: flex; flex-direction: row; gap: var(--space-20); align-items: center; }
.dash-map .maneuver-heading { gap: 0; flex: none; }
.dash-map .maneuver-heading [data-drive-turn-distance] { display: none; }
.dash-map .maneuver-copy { min-width: 0; }
.dash-map .maneuver-copy [data-drive-instruction] { font-size: 32px; line-height: 1.2; white-space: normal; }
.dash-map.parked .maneuver-copy [data-drive-instruction] { white-space: nowrap; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .road-map-view { --route-card-width: 220px; --route-inset: 10px; --map-bubble-radius: 17px; }
  .road-map-view .drive-guidance { top: 10px; padding: var(--space-16); gap: var(--space-12); }
  .road-map-view .maneuver-heading { gap: 14px; }
  .road-map-view .maneuver-heading [data-drive-turn-distance] { font-size: 31px; line-height: 1.05; letter-spacing: -.7px; }
  .road-map-view .direction-glyph { min-width: 34px; }
  .road-map-view .direction-glyph svg { width: 34px; height: 34px; }
  .road-map-view .maneuver-copy [data-drive-instruction] { font-size: var(--type-20); line-height: 1.14; white-space: normal; letter-spacing: -.3px; }
  .road-map-view .parked-card { top: 10px; padding: 15px var(--space-16); }
  .road-map-view .parked-card strong { font-size: 21px; }
  .road-map-view .parked-card span { font-size: 13px; margin-top: 5px; }
  .road-map-view .trip-panel { bottom: 10px; min-height: 71px; padding: 13px var(--space-12); gap: var(--space-8); }
  .road-map-view .drive-metrics { gap: 7px; }
  .road-map-view .drive-metrics strong { font-size: 18px; letter-spacing: -.5px; }
  .road-map-view .drive-metrics span { font-size: 10px; margin-top: var(--space-4); }
  .route-options-toggle { position: relative; width: 44px; height: 44px; background: var(--color-transparent); }
  .route-options-toggle::before { content: ""; position: absolute; width: 31px; height: 31px; border-radius: 50%; background: var(--map-separator); }
  .route-options-toggle svg { position: relative; width: 19px; height: 19px; stroke-width: 3; }
  .route-options { bottom: 91px; padding: 11px var(--space-12) var(--space-12); max-height: calc(100% - 111px); }
  .route-grabber { height: 4px; width: 35px; margin-bottom: 10px; }
  .route-option { padding: 13px; gap: 13px; min-height: 48px; font-size: 19px; border-radius: 14px; margin-top: var(--space-8); }
  .route-action-icon { width: 24px; height: 24px; }
  .route-action-icon svg { width: 23px; height: 23px; }
  .route-itinerary { font-size: var(--type-12); padding: 11px 1px 0; }
  .routing-status { top: 10px; padding: 10px var(--space-16); font-size: 15px; }
  .road-map-view .destinations-button { bottom: 10px; right: 70px; width: 44px; height: 44px; }
  .road-map-view .destinations-button .map-favorite-symbol { width: 29px; height: 29px; }
  .road-map-view .destinations-button .map-favorite-symbol svg { width: 26px; height: 26px; }
  .road-map-view.parked .destinations-button { left: 10px; right: auto; bottom: 10px; width: 220px; height: 59px; padding: var(--space-12) var(--space-16); gap: 13px; font-size: var(--type-20); border-radius: 17px; }
  .road-map-view .map-controls { display: block; left: auto; top: 10px; right: 10px; bottom: 10px; width: 44px; height: auto; }
  .road-map-view .map-heading-control, .road-map-view .map-zoom-control, .road-map-view .map-overview-control { position: absolute; display: block; right: 0; left: auto; width: 44px; border-radius: 22px; flex: none; }
  .road-map-view .map-heading-control, .road-map-view .map-zoom-control { height: 96px; }
  .road-map-view .map-heading-control button, .road-map-view .map-zoom-control button { width: 44px; height: 48px; min-width: 44px; min-height: 44px; flex: none; }
  .road-map-view .map-heading-control { top: 0; bottom: auto; }
  .road-map-view .map-overview-control { top: calc(50% - 22px); bottom: auto; height: 44px; }
  .road-map-view .map-zoom-control { top: auto; bottom: 0; }
  .compass-symbol { width: 18px; height: 28px; }
  .perspective-symbol { width: 25px; height: 18px; }
  .overview-symbol { width: 23px; height: 23px; }
  .plus-symbol, .minus-symbol { width: 20px; height: 20px; }
  .speed-limit { top: 110px; width: 44px; min-height: 60px; border-width: 2px; border-radius: 6px; padding: var(--space-4) 2px; }
  .speed-limit span { font-size: 8px; }
  .speed-limit strong { font-size: var(--type-24); }
  .dash-map .drive-guidance { gap: 9px; }
  .dash-map .maneuver-copy [data-drive-instruction] { font-size: 15px; line-height: 1.2; }
}
@media(max-width:900px) and (orientation:portrait) {
  .road-map-view { --route-card-width: calc(100% - 72px); }
  .road-map-view.parked .destinations-button { width: calc(100% - 72px); }
  .road-map-view .drive-guidance, .road-map-view .trip-panel, .road-map-view .parked-card, .road-map-view .route-options { max-width: calc(100% - 72px); }
  .road-map-view .destinations-button:not([hidden]) { right: 65px; bottom: 112px; }
  .road-map-view.parked .destinations-button:not([hidden]) { right: auto; bottom: 10px; }
  .road-map-view .trip-panel, .road-map-view .route-options { width: calc(100% - 20px); max-width: calc(100% - 20px); }
  .road-map-view .drive-metrics strong { font-size: 17px; }
  .road-map-view .map-zoom-control { bottom: 92px; }
}
@media(max-height:550px) and (orientation:landscape) and (max-width:1100px) {
  .road-map-view .map-heading-control { height: 44px; overflow: visible; background: var(--color-transparent); box-shadow: none; backdrop-filter: none; }
  .road-map-view .map-heading-control button { position: absolute; top: 0; left: 0; height: 44px; border: 0; border-radius: 50%; background: var(--map-surface); box-shadow: var(--map-shadow); }
  .road-map-view .map-heading-control button+button { left: -52px; border: 0; }
  .road-map-view .speed-limit { top: 58px; }
  .road-map-view .map-overview-control { top: 100px; }
  .road-map-view .map-zoom-control { height: 88px; }
  .road-map-view .map-zoom-control button { height: 44px; }
  .road-map-view .drive-metrics strong { font-size: 17px; }
}
@media(max-height:650px) and (orientation:portrait) and (max-width:900px) {
  .road-map-view .map-overview-control { top: 110px; }
  .road-map-view .speed-limit { top: 56px; }
  .road-map-view .map-zoom-control { height: 88px; }
  .road-map-view .map-zoom-control button { height: 44px; }
}
@media(max-height:450px) and (orientation:portrait) and (max-width:900px) {
  .road-map-view .speed-limit { display: none; }
}
.road-map-view .map-overview-control { display: grid; place-items: center; padding: 0; }
.road-map-view .map-controls .kit-map-symbol { margin: 0; }
.road-map-view .map-controls [hidden] { display: none!important; }
.road-map-view.navigating .map-heading-control { height: 72px; border-radius: 50%; }
.road-map-view.navigating .map-heading-control button { height: 72px; border: 0; border-radius: 50%; }
.road-map-view.navigating .speed-limit { top: 96px; }
.map-zoom-control button:first-child { border-radius: 36px 36px 0 0; }
.map-zoom-control button:last-child { border-radius: 0 0 36px 36px; }
.route-grabber { cursor: grab; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .road-map-view.navigating .map-heading-control { height: 44px; }
  .road-map-view.navigating .map-heading-control button { height: 44px; min-height: 44px; }
  .road-map-view.navigating .speed-limit { top: 56px; }
  .road-map-view .map-zoom-control button:first-child { border-radius: 22px 22px 0 0; }
  .road-map-view .map-zoom-control button:last-child { border-radius: 0 0 22px 22px; }
}
@media(max-width:900px) and (orientation:portrait) {
  .road-map-view.parked .map-zoom-control { bottom: 0; }
}
.route-preview { position: absolute; z-index: 445; top: var(--route-inset); left: var(--route-inset); width: var(--route-card-width); max-width: calc(100% - 140px); max-height: calc(100% - 48px); overflow: auto; padding: 26px; border-radius: 36px; background: var(--color-242428d9); color: var(--map-label); box-shadow: var(--map-shadow); backdrop-filter: blur(40px) saturate(135%); -webkit-backdrop-filter: blur(40px) saturate(135%); overscroll-behavior: contain; will-change: transform,opacity; }
.light .route-preview { background: var(--color-f5f5f7d9); }
.route-preview[hidden], .route-preview [hidden] { display: none!important; }
.preview-heading { display: flex; align-items: center; gap: var(--space-20); min-width: 0; margin-bottom: var(--space-24); }
.preview-heading h2 { min-width: 0; margin: 0; font-size: 36px; line-height: 1.12; letter-spacing: -.6px; font-weight: 600; overflow-wrap: anywhere; }
.preview-back { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; padding: 0; background: var(--color-ffffff26); color: var(--map-label); }
.light .preview-back { background: var(--color-3c3c431a); }
.preview-back svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.preview-mode { display: block; margin: -10px 0 18px; color: var(--map-secondary); font-size: var(--type-24); }
.preview-route-card { display: flex; align-items: center; gap: 22px; min-height: 164px; padding: 26px; border-radius: 28px; background: var(--color-ffffff14); }
.light .preview-route-card { background: var(--color-ffffffc9); }
.preview-route-copy { flex: 1; min-width: 0; }
.preview-duration { display: block; font-size: 48px; font-weight: 600; letter-spacing: -1px; line-height: 1.1; }
.preview-arrival { display: block; font-size: var(--type-24); line-height: 1.3; margin-top: var(--space-8); color: var(--map-secondary); }
.preview-status { margin: 0; font-size: 26px; line-height: 1.3; overflow-wrap: anywhere; }
.preview-go { display: grid; place-items: center; flex: none; min-width: 90px; min-height: 90px; padding: var(--space-16); border-radius: var(--radius-24); background: var(--color-34c759); color: var(--color-fff); font-size: 38px; line-height: 1; font-weight: 600; letter-spacing: -.5px; }
.preview-go:not(:disabled):is(:hover,:active) { background: var(--color-28b34d); }
.preview-go:disabled { opacity: .35; }
.preview-retry { margin-top: var(--space-16); padding: var(--space-12) 18px; border-radius: 18px; background: var(--color-007aff14); color: var(--color-0a84ff); font-size: var(--type-24); font-weight: 550; }
.light .preview-retry { color: var(--color-007aff); }
.preview-back:focus-visible, .preview-go:focus-visible, .preview-retry:focus-visible { outline: 3px solid var(--map-control); outline-offset: 4px; }
.preview-place { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-24) var(--space-4) 2px; }
.preview-place-symbol { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; color: var(--color-fff); }
.preview-place-symbol svg { width: 28px; height: 28px; }
.preview-place p { margin: 0; font-size: 23px; line-height: 1.3; color: var(--map-secondary); overflow-wrap: anywhere; }
.road-map-view.route-previewing .drive-guidance, .road-map-view.route-previewing .parked-card, .road-map-view.route-previewing .trip-panel, .road-map-view.route-previewing .route-options { visibility: hidden; pointer-events: none; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .road-map-view .route-preview { width: 270px; max-width: calc(100% - 72px); max-height: calc(100% - 20px); padding: 14px; border-radius: var(--radius-24); }
  .preview-heading { gap: 10px; margin-bottom: 14px; }
  .preview-heading h2 { font-size: 21px; line-height: 1.15; letter-spacing: -.3px; }
  .preview-back { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .preview-back svg { width: 23px; height: 23px; }
  .preview-mode { margin: -4px 0 11px; font-size: 13px; }
  .preview-route-card { gap: var(--space-12); min-height: 102px; padding: 14px; border-radius: 18px; flex-wrap: wrap; }
  .preview-route-copy { flex-basis: 0; }
  .preview-duration { font-size: 28px; letter-spacing: -.6px; }
  .preview-arrival { font-size: 13px; margin-top: 6px; }
  .preview-status { font-size: var(--type-16); }
  .preview-go { min-width: 58px; min-height: 58px; padding: var(--space-12); border-radius: 17px; font-size: 25px; }
  .preview-retry { min-height: 44px; margin-top: var(--space-8); padding: 9px var(--space-12); font-size: 15px; border-radius: var(--radius-12); }
  .preview-place { gap: 10px; padding: 15px 1px 1px; }
  .preview-place-symbol { width: 29px; height: 29px; }
  .preview-place-symbol svg { width: 21px; height: 21px; }
  .preview-place p { font-size: var(--type-12); }
  .road-map-view.route-previewing .map-zoom-control { bottom: 0; }
}
@media(max-width:380px) and (orientation:portrait) {
  .preview-route-copy { flex-basis: 100%; }
  .preview-go { width: 100%; min-height: 48px; }
}
@media(max-width:1100px) and (max-height:550px) and (orientation:landscape) {
  .road-map-view .map-overview-control { left: -52px; right: auto; top: 48px; }
  .road-map-view .speed-limit { left: -104px; right: auto; top: 0; }
  .road-map-view.navigating .speed-limit { left: -52px; top: 0; }
}

/* Centered navigation hit areas */
.app-header { --header-rail: 190px; grid-template-columns: var(--header-rail) minmax(0,1fr) var(--header-rail); column-gap: var(--space-12); align-items: center; }
.app-header>.header-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.app-header>.header-action { min-width: 0; max-width: 100%; justify-self: end; }
.app-header .back { display: inline-flex; align-items: center; justify-content: center; justify-self: start; flex: none; gap: var(--space-8); min-width: 72px; min-height: 72px; margin: 0; padding: 0 var(--space-16); border-radius: 999px; background: var(--color-transparent); color: var(--blue); font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap; transition: background-color .16s ease; }
.app-header .back-chevron { display: block; flex: none; width: 24px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.app-header .back-label { display: block; font: inherit; line-height: 1; letter-spacing: inherit; }
.app-header .back:is(:active,:focus-visible) { background: var(--map-separator); }
.screen .app-header .back:not(:disabled):active { transform: none; }
.app-header .back:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media(hover:hover) {
  .app-header .back:hover { background: var(--map-separator); }
}
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .app-header { --header-rail: 76px; column-gap: var(--space-4); }
  .app-header .back { gap: 5px; min-width: 44px; min-height: 44px; padding: 0 9px; font-size: 15px; }
  .app-header .back-chevron { width: 12px; height: 20px; }
  .app-header .back:focus-visible { outline-width: 2px; }
}
@media(max-width:480px) and (orientation:portrait) {
  .app-header { --header-rail: 44px; }
  .app-header:has(.header-action a) { --header-rail: 68px; padding-inline: var(--space-8); }
  .app-header .back { width: 44px; padding: 0; }
  .app-header .back-label { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .app-header .back { transition: none; }
}
.screen.reduced .app-header .back { transition: none; }

/* Project links follow the same trailing column as the message bubbles. */
.pm-project-link { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); max-width: 1370px; margin: 0 0 var(--space-24) auto; }
.pm-project-link .pm-project-link-button { min-height: 72px; max-width: 100%; white-space: normal; text-align: left; }
.pm-project-link-label { font-size: var(--type-20); line-height: 25px; color: var(--color-32536c); overflow-wrap: anywhere; }
.pm-project-link .pm-project-link-button:focus-visible { outline: 4px solid var(--color-075d98); outline-offset: 4px; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .pm-project-link { max-width: 100%; margin-bottom: 14px; }
  .pm-project-link-label { font-size: var(--type-12); line-height: 16px; }
  .pm-project-link .pm-project-link-button { min-height: 44px; padding: 10px 14px; font-size: 15px; line-height: 20px; border-radius: 10px; }
  .pm-project-link .pm-project-link-button:focus-visible { outline-width: 3px; outline-offset: 2px; }
}

/* Native and CSS fullscreen layout */
html.carplay-expanded, html.carplay-expanded body { overflow: hidden; }
.device-wrap.fullscreen-expanded { position: fixed; inset: 0; z-index: 1000; width: 100%; max-width: none; height: 100%; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-20); background: var(--color-0e0e12); overflow: auto; overscroll-behavior: contain; }
.device-wrap.fullscreen-expanded>.portfolio-header { display: none; }
.device-wrap.fullscreen-expanded .device { width: min(100%,calc((100svh - 100px)*1920/720)); width: min(100%,calc((100dvh - 100px)*1920/720)); flex: none; align-self: center; }
.device-wrap.fullscreen-expanded .screen { min-height: 0; max-height: none; height: auto; aspect-ratio: 1920/720; }
.device-wrap.fullscreen-expanded .under-device { width: min(100%,calc((100svh - 100px)*1920/720)); width: min(100%,calc((100dvh - 100px)*1920/720)); flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 var(--space-4); }
.device-wrap.fullscreen-expanded .under-links { height: 44px; align-items: center; }
.device-wrap.fullscreen-expanded #fullscreen { min-height: 44px; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .device-wrap.fullscreen-expanded { padding: calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); overflow: hidden; }
  .device-wrap.fullscreen-expanded .device { display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0; flex: 1; align-self: stretch; }
  .device-wrap.fullscreen-expanded .screen { flex: 1; min-height: 0; max-height: none; height: auto; aspect-ratio: auto; }
  .device-wrap.fullscreen-expanded .under-device { width: 100%; flex-wrap: nowrap; gap: var(--space-8); padding: 0 var(--space-4); }
  .device-wrap.fullscreen-expanded .under-links { gap: 6px; }
  .device-wrap.fullscreen-expanded .under-links button { padding: 0 6px; }
}

/* Native document reader */
.resume-reader { padding: 30px 40px 46px; color: var(--text); font-size: 27px; line-height: 1.5; }
.resume-sheet { max-width: 1440px; margin: 0 auto; padding: 34px 42px; border: 1px solid var(--line); border-radius: var(--radius-20); background: var(--raised); }
.resume-identity h1 { margin: 0 0 14px; font-size: 48px; line-height: 1.15; letter-spacing: -.8px; }
.resume-contact-links { display: flex; flex-wrap: wrap; gap: var(--space-8) 22px; font-size: var(--type-24); }
.resume-contact-links a { display: inline-block; padding-block: 3px; color: var(--blue); overflow-wrap: anywhere; }
.resume-contact-links a:hover { text-decoration: underline; }
.resume-section { margin-top: 34px; }
.resume-section h2 { margin: 0 0 var(--space-20); padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 33px; line-height: 1.2; letter-spacing: -.35px; }
.resume-entry + .resume-entry { margin-top: 27px; }
.resume-entry-heading, .resume-entry-context { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 25px; }
.resume-entry-heading h3 { margin: 0; font-size: 29px; line-height: 1.3; }
.resume-entry-heading > span, .resume-entry-context > span { flex-shrink: 0; font-size: var(--type-24); }
.resume-entry-context p { margin: 5px 0; }
.resume-entry ul { margin: var(--space-12) 0 0; padding-left: 30px; }
.resume-entry li + li { margin-top: 7px; }
.resume-coursework { margin: 10px 0 0; }
.resume-skills { margin: 0; }
.resume-skills > div { margin-top: var(--space-12); }
.resume-skills dt { display: inline; font-weight: 600; }
.resume-skills dt::after { content: ': '; }
.resume-skills dd { display: inline; margin: 0; }
@media (max-width: 900px), (max-width: 1100px) and (max-height: 550px) {
  .resume-reader { padding: 14px var(--space-16) 28px; font-size: var(--type-16); }
  .resume-sheet { padding: var(--space-20); border-radius: 14px; }
  .resume-identity h1 { margin-bottom: 10px; font-size: 28px; }
  .resume-contact-links { gap: var(--space-4) 15px; font-size: 15px; }
  .resume-contact-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .resume-section { margin-top: 25px; }
  .resume-section h2 { margin-bottom: 15px; font-size: 21px; }
  .resume-entry-heading, .resume-entry-context { flex-wrap: wrap; gap: 2px 14px; }
  .resume-entry-heading h3 { font-size: 18px; }
  .resume-entry-heading > span, .resume-entry-context > span { font-size: 15px; }
  .resume-entry + .resume-entry { margin-top: 22px; }
  .resume-entry ul { padding-left: 22px; }
}

/* Basemap loading and parked markers */
.ajit-map-loading { position: absolute; inset: 0; z-index: 810; overflow: hidden; pointer-events: none; background: var(--color-e9eee5); opacity: 1; transition: opacity 200ms ease; }
.ajit-drive-dark .ajit-map-loading { background: var(--color-222b2e); }
.ajit-map-loading.is-ready { opacity: 0; }
.ajit-map-loading-canvas { display: block; width: 100%; height: 100%; }
.ajit-map-loading-label { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 6px var(--space-12); border-radius: var(--radius-20); background: var(--color-rgba-3283c513); color: var(--color-444c44); font: 500 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ajit-drive-dark .ajit-map-loading-label { background: var(--color-20272cef); color: var(--color-e3ebe7); }
.ajit-drive-surface .leaflet-tile-pane { filter: contrast(1.08) saturate(.96); }
.ajit-drive-dark .leaflet-tile-pane { filter: contrast(1.06) brightness(1.12); }
.ajit-leaflet-pin { display: grid; place-items: center; }
.reduced .ajit-map-loading, .reduced .ajit-drive-heading, .reduced .ajit-map-pin { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ajit-map-loading { transition: none; }
}
@media (pointer: coarse) {
  .ajit-drive-surface .ajit-vector-pin { display: grid; place-items: center; width: 44px; height: 44px; }
}

/* Hover, scroll cues and touch targets */
.screen { --row-feedback: var(--color-rgba-0d923d38); --row-resting: var(--color-454545); --segment-track: var(--color-202022); --segment-selected: var(--color-2c2c2e); }
.screen.light { --row-feedback: var(--color-rgba-e709c7eb); --row-resting: var(--color-fff); --segment-track: var(--color-e5e5ea); --segment-selected: var(--color-fff); }
.screen .list-row, .screen .list-row:is(:hover,:focus-visible,:active) { background: var(--row-resting); color: var(--text); box-shadow: none; }
.screen .list-row:is(:hover,:focus-visible,:active) .row-sub { color: var(--secondary); }
.screen :is(.pm-conversation,.pm-pinned-contact,.favorite-row), .screen :is(.pm-conversation,.pm-pinned-contact,.favorite-row):is(:hover,:focus-visible,:active) { background: var(--color-transparent); box-shadow: none; }
.screen :is(.list-row,.pm-conversation,.pm-pinned-contact,.favorite-row):focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.screen :is(.list-row,.pm-conversation,.pm-pinned-contact,.favorite-row):not(:disabled):active { box-shadow: inset 0 0 0 100vmax var(--row-feedback); transform: none; }
@media(hover:hover) and (pointer:fine) {
  .screen :is(.list-row,.pm-conversation,.pm-pinned-contact,.favorite-row):hover { box-shadow: inset 0 0 0 100vmax var(--row-feedback); }
}
.screen .app-view .tabs { background: var(--surface); }
.screen .app-view .tabs button { background: var(--segment-track); color: var(--text); font-weight: 500; }
.screen .app-view .tabs button.selected { background: var(--segment-selected); color: var(--color-fff); font-weight: 600; box-shadow: 0 1px 4px var(--color-0002); }
.screen.light .app-view .tabs button.selected { color: var(--color-1c1c1e); }
.portfolio-scroll-cue { position: absolute; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .16s ease; background: linear-gradient(to bottom,var(--color-transparent),var(--surface)); border-radius: 0 0 12px 12px; }
.portfolio-scroll-cue[data-visible=true] { opacity: .96; }
.portfolio-scroll-cue--messages { background: linear-gradient(to bottom,var(--color-b2c8dc00),var(--color-b2c8dc)); }
.screen [data-scroll-region]:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.screen :where(button,input[type=range],input[type=checkbox],[role=button]) { min-width: calc(24px / var(--viewport-scale,1)); min-height: calc(24px / var(--viewport-scale,1)); }
.screen :where(.blue-button,.contact-actions a,.header-action a) { min-height: calc(24px / var(--viewport-scale,1)); }
.under-device :is(button,a) { min-width: 24px; min-height: 24px; }
.under-device button { display: inline-flex; align-items: center; justify-content: center; }
#screen .ajit-drive-surface :is(.leaflet-control-attribution,.maplibregl-ctrl-attrib,.ajit-offline-attribution) { font-size: calc(10px / var(--viewport-scale,1)); line-height: 1.4; padding: calc(3px / var(--viewport-scale,1)) calc(6px / var(--viewport-scale,1)); border-radius: calc(6px / var(--viewport-scale,1)); background: var(--color-rgba-e5951b75); color: var(--color-46544d); max-width: 100%; white-space: normal; }
#screen .ajit-drive-dark :is(.leaflet-control-attribution,.maplibregl-ctrl-attrib,.ajit-offline-attribution) { background: var(--color-rgba-1641550b); color: var(--color-d9e2e5); }
#screen .ajit-drive-surface :is(.leaflet-control-attribution,.maplibregl-ctrl-attrib,.ajit-offline-attribution) a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px), (pointer:coarse) {
  .screen :where(button,input[type=range],input[type=checkbox],[role=button]) { min-width: calc(44px / var(--viewport-scale,1)); min-height: calc(44px / var(--viewport-scale,1)); }
  .screen :where(.blue-button,.contact-actions a,.header-action a) { min-height: calc(44px / var(--viewport-scale,1)); }
  .under-device :is(button,a) { min-width: 44px; min-height: 44px; }
  .screen .app-view .tabs { height: 60px; flex-basis: 60px; padding-top: 6px; padding-bottom: 6px; }
  .screen .app-view .tabs button { min-height: 44px; padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .screen .toggle { position: relative; min-height: 32px; }
  .screen .toggle::after { content: ""; position: absolute; inset: -6px 0; min-height: 44px; }
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-scroll-cue { transition: none; }
}
.screen.reduced .portfolio-scroll-cue { transition: none; }

/* Only present in the initial document; the first app render replaces it. */
.startup-loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--wallpaper); color: var(--color-fff); }
.startup-loading>div { display: flex; align-items: center; gap: var(--space-16); padding: 22px 30px; border-radius: var(--radius-24); background: var(--color-242428d9); }
.startup-loading strong { font-size: 28px; font-weight: 500; }
.startup-spinner { display: block; width: 28px; height: 28px; border: 3px solid var(--color-ffffff30); border-top-color: var(--color-fff); border-radius: 50%; animation: startup-spin .8s linear infinite; }
@keyframes startup-spin { to { transform: rotate(360deg); } }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .startup-loading>div { gap: var(--space-12); padding: 14px var(--space-20); border-radius: var(--radius-16); }
  .startup-loading strong { font-size: 18px; }
  .startup-spinner { width: 22px; height: 22px; }
}
@media(prefers-reduced-motion:reduce) { .startup-spinner { animation: none; } }
.screen.reduced .startup-spinner { animation: none; }

/* Arrival stays on the map until the visitor chooses their next action. */
.arrival-actions { position: absolute; z-index: 440; left: var(--route-inset,24px); bottom: var(--route-inset,24px); width: var(--route-card-width,530px); max-width: calc(100% - 140px); padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-12); border-radius: var(--map-bubble-radius,28px); background: var(--map-surface); color: var(--map-label); box-shadow: var(--map-shadow); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.arrival-actions[hidden], .arrival-actions [hidden] { display: none!important; }
.arrival-actions button { min-height: 92px; padding: var(--space-16) var(--space-24); border-radius: var(--radius-16); font-size: 36px; line-height: 1.2; font-weight: 600; color: var(--color-fff); }
.arrival-actions .arrival-pause { background: var(--color-ff453a); }
.arrival-actions .arrival-pause:is(:hover,:active) { background: var(--color-ff3b30); }
.arrival-actions .arrival-next { background: var(--color-30d158); }
.arrival-actions .arrival-next:is(:hover,:active) { background: var(--color-34c759); }
.road-map-view.arrived .drive-guidance { gap: var(--space-16); }
.road-map-view.arrived .maneuver-heading [data-drive-turn-distance] { font-size: 56px; letter-spacing: -.8px; }
.arrived .maneuver-copy [data-drive-instruction], .road-map-view.arrived .trip-panel { display: none; }
.arrived .maneuver-copy [data-drive-road] { margin: 0; overflow-wrap: anywhere; }
.dash-map .arrival-actions { left: 20px; right: 20px; bottom: 20px; width: auto; max-width: none; padding: var(--space-12); gap: var(--space-8); border-radius: 22px; }
.dash-map .arrival-actions button { min-height: 56px; padding: var(--space-12) var(--space-16); font-size: 27px; border-radius: var(--radius-12); }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .arrival-actions { max-width: calc(100% - 72px); padding: var(--space-12); gap: var(--space-8); }
  .arrival-actions button { min-height: 48px; padding: var(--space-12); font-size: 20px; border-radius: 10px; }
  .road-map-view.arrived .drive-guidance { gap: var(--space-8); }
  .road-map-view.arrived .maneuver-heading [data-drive-turn-distance] { font-size: 28px; letter-spacing: -.4px; }
  .dash-map .arrival-actions { left: 8px; right: 8px; bottom: 8px; padding: 6px; gap: 5px; border-radius: 13px; }
  .dash-map .arrival-actions button { min-height: 44px; padding: 7px; font-size: 14px; border-radius: 8px; }
}

.appearance-check { color: var(--blue); font-size: 1.15em; }
.appearance-check[hidden] { display: none; }
.road-map-view.arrived .destinations-button { display: none; }