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

/* Portrait connected screen and landscape car display */
#mobile-connected { display: none; position: fixed; inset: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; isolation: isolate; background: var(--color-161b35); color: var(--color-fff); font-family: var(--font-system-5); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#mobile-connected::before, #mobile-connected::after { content: ''; position: fixed; inset: -24px; pointer-events: none; z-index: -1; }
#mobile-connected::before { background: url('assets/carplay-wallpaper.webp') center / cover no-repeat; filter: blur(22px); opacity: .8; }
#mobile-connected::after { inset: 0; background: linear-gradient(180deg, var(--color-13162c63), var(--color-080d226e) 42%, var(--color-080d22a3)); }
.mobile-connected-inner { min-height: 100%; max-width: 520px; margin-inline: auto; padding: calc(36px + env(safe-area-inset-top)) calc(var(--space-24) + env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) calc(var(--space-24) + env(safe-area-inset-left)); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-24); text-align: center; }
.mobile-phone-clock p { margin: 0 0 var(--space-4); font-size: 19px; font-weight: 500; line-height: 1.3; }
.mobile-phone-clock time { display: block; font-size: clamp(76px, 23vw, 106px); line-height: 1.04; font-weight: 300; letter-spacing: -5px; font-variant-numeric: tabular-nums; }
.mobile-connected-status { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin: 0 0 22px; font-size: var(--type-14); font-weight: 500; line-height: 20px; }
.mobile-connected-status svg { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mobile-connected-identity h1 { margin: 0 0 6px; font-size: 27px; font-weight: 600; line-height: 1.2; letter-spacing: -.45px; }
.mobile-connected-title { margin: 0; font-size: var(--type-14); line-height: 21px; }
.mobile-connected-rotate svg { display: block; width: 66px; height: 66px; margin: 0 auto var(--space-12); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mobile-rotate-phone { transform-origin: 32px 32px; animation: mobile-rotate-guidance 6s ease-in-out infinite; }
.mobile-connected-rotate p { margin: 0; font-size: var(--type-16); line-height: 23px; font-weight: 500; }
.mobile-connected-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); width: 100%; max-width: 340px; }
.mobile-connected-actions a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 74px; padding: var(--space-12) var(--space-4); border: 1px solid var(--color-ffffff24); border-radius: var(--radius-20); background: var(--color-ffffff16); color: var(--color-fff); font-size: var(--type-14); font-weight: 500; line-height: 18px; touch-action: manipulation; transition: transform .15s ease, background-color .15s ease; }
.mobile-connected-actions svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mobile-connected-actions a:active { transform: scale(.96); background: var(--color-ffffff2e); }
.mobile-connected-actions a:focus-visible { outline: 3px solid var(--color-fff); outline-offset: 4px; box-shadow: 0 0 0 7px var(--color-153c68); }
html.phone-portrait body, html.phone-landscape body { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; padding: 0; display: block; overflow: hidden; }
html.phone-portrait .device-wrap { display: none; }
html.phone-portrait #mobile-connected { display: block; }
@media (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  html:not(.mobile-orientation-ready) body { padding: 0; overflow: hidden; }
  html:not(.mobile-orientation-ready) .device-wrap { display: none; }
  html:not(.mobile-orientation-ready) #mobile-connected { display: block; }
}
@media (max-height: 720px) {
  .mobile-connected-inner { padding-top: calc(25px + env(safe-area-inset-top)); padding-bottom: calc(var(--space-20) + env(safe-area-inset-bottom)); gap: 18px; }
  .mobile-phone-clock time { font-size: 78px; }
  .mobile-connected-status { margin-bottom: 15px; }
  .mobile-connected-rotate svg { width: 58px; height: 58px; margin-bottom: 7px; }
  .mobile-connected-actions a { min-height: 66px; padding-block: 9px; }
}
html.phone-landscape .device-wrap, html.phone-landscape .device-wrap.fullscreen-expanded { position: fixed; inset: 0; width: 100vw; width: 100dvw; max-width: none; height: 100vh; height: 100dvh; padding: 0; margin: 0; display: block; background: var(--color-080d22); overflow: hidden; }
html.phone-landscape .device-wrap > .portfolio-header, html.phone-landscape .device-wrap > .under-device, html.phone-landscape #orientation-notice { display: none; }
html.phone-landscape .device-wrap .device { width: 100%; height: 100%; min-height: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border: 0; border-radius: 0; box-shadow: none; background: none; }
html.phone-landscape .device-wrap .screen { width: 100%; height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; border-radius: 0; }
html.phone-landscape .screen::after { border-radius: 0; box-shadow: none; }
html.phone-landscape .carplay-viewport { width: 100%; height: 100%; border-radius: 0; }
html.phone-landscape .sidebar { width: 60px; flex-basis: 60px; height: 100%; min-height: 0; display: grid; grid-template-rows: 44px minmax(0, 1fr) 44px; gap: 3px; padding: 6px 0; overflow: hidden; }
html.phone-landscape .status { position: static; width: 100%; height: 44px; }
html.phone-landscape .status time { position: static; display: block; width: 100%; font-size: 17px; line-height: 24px; }
html.phone-landscape .status-bottom { position: static; width: 100%; height: 14px; margin: 2px 0 0; gap: var(--space-4); }
html.phone-landscape .dock { position: static; transform: none; align-self: stretch; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 var(--space-8); gap: 3px; justify-content: center; align-items: center; overflow: hidden; }
html.phone-landscape .dock-button, html.phone-landscape .home-button { position: relative; inset: auto; transform: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: none; margin: 0; align-self: center; justify-self: center; }
html.phone-landscape :is(button, a) { touch-action: manipulation; }
html.phone-landscape .content, html.phone-landscape .view { min-height: 0; min-width: 0; overflow: hidden; }
html.phone-landscape :is(.scroll, .pm-inbox-list, .pm-thread, .music-player, .music-playlists) { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.phone-landscape .home-view { padding: var(--space-8) var(--space-12); }
html.phone-landscape .app-grid { flex: 1; min-height: 0; height: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; align-content: stretch; gap: 6px var(--space-8); padding: 0; overflow: hidden; }
html.phone-landscape .app-button { min-height: 44px; min-width: 44px; gap: 6px; padding: var(--space-4); }
html.phone-landscape .app-button .app-icon { width: 60px; height: 60px; --native-scale: .3333333333; }
html.phone-landscape .app-label { min-height: 21px; max-width: 100%; padding: 2px 5px; font-size: 13px; line-height: 17px; }
html.phone-landscape .app-button:hover .app-icon { filter: none; transform: none; }
html.phone-landscape .app-button:active .app-icon { transform: scale(.96); opacity: .84; }
html.phone-landscape .app-header { --header-rail: 76px; height: 44px; min-height: 44px; flex-basis: 44px; padding: 0 10px; font-size: 17px; }
html.phone-landscape .app-header .back { height: 44px; min-height: 44px; gap: var(--space-4); padding-inline: 6px; font-size: var(--type-14); }
html.phone-landscape .app-header .header-action { font-size: 13px; }
html.phone-landscape .tabs { height: 52px; flex-basis: 52px; padding: var(--space-4) var(--space-8); }
html.phone-landscape .list { padding: var(--space-8) 10px var(--space-16); }
html.phone-landscape .list-row { height: auto; min-height: 68px; max-height: none; padding: var(--space-8) 10px; margin-bottom: 6px; gap: 10px; border-radius: var(--radius-12); }
html.phone-landscape .list-row .app-icon { width: 44px; height: 44px; --native-scale: .2444444444; }
html.phone-landscape .list-row .experience-icon b { font-size: 18px; }
html.phone-landscape .list-row .row-title { font-size: var(--type-16); line-height: 20px; }
html.phone-landscape .list-row .row-sub { margin-top: 3px; font-size: 13px; line-height: 17px; }
html.phone-landscape .dashboard-view { padding: var(--space-8); grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); grid-template-rows: 60px minmax(0, 1fr); gap: var(--space-8); overflow: hidden; }
html.phone-landscape .dash-map, html.phone-landscape .dash-music { min-height: 0; }
html.phone-landscape .pm-pinned { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); flex: 0 0 64px; height: 64px; gap: var(--space-8); padding: var(--space-4) var(--space-12) var(--space-8); overflow: hidden; }
html.phone-landscape .pm-pinned-contact { min-height: 52px; padding: 0 3px; gap: var(--space-4); }
html.phone-landscape .pm-pinned-avatar { width: 34px; height: 34px; }
html.phone-landscape .pm-pinned-name { max-width: 100%; font-size: 10px; line-height: 14px; }
html.phone-landscape .pm-pinned-avatar .experience-icon b { font-size: 15px; }
html.phone-landscape .pm-inbox-list { padding: 0 var(--space-12) var(--space-12); }
html.phone-landscape .pm-conversation { display: grid; grid-template-columns: 40px minmax(0, 1fr) 94px 12px; grid-template-rows: auto; gap: 10px; min-height: 72px; padding: 9px 3px; }
html.phone-landscape .pm-conversation > .pm-avatar { grid-column: 1; grid-row: 1; width: 40px; height: 40px; align-self: center; margin: 0; }
html.phone-landscape .pm-conversation-copy { grid-column: 2; grid-row: 1; gap: 1px; }
html.phone-landscape .pm-conversation-copy strong { font-size: 15px; line-height: 18px; }
html.phone-landscape .pm-conversation-role, html.phone-landscape .pm-conversation-preview { font-size: var(--type-12); line-height: 16px; white-space: nowrap; }
html.phone-landscape .pm-conversation-date { grid-column: 3; grid-row: 1; width: auto; text-align: right; font-size: 11px; line-height: 15px; }
html.phone-landscape .pm-chevron { grid-column: 4; grid-row: 1; }
html.phone-landscape .pm-thread { padding: var(--space-8) var(--space-16) 22px; }
html.phone-landscape .pm-thread-contact { min-height: 52px; margin-bottom: var(--space-8); padding-bottom: var(--space-8); gap: 10px; }
html.phone-landscape .pm-thread-contact > .pm-avatar { width: 44px; height: 44px; }
html.phone-landscape .pm-thread-contact h1 { margin: 0 0 2px; font-size: var(--type-16); line-height: 19px; }
html.phone-landscape .pm-thread-contact p { margin: 0 0 2px; font-size: var(--type-12); line-height: 16px; }
html.phone-landscape .pm-thread-contact span:not(.pm-avatar):not(.app-icon) { font-size: 11px; line-height: 14px; }
html.phone-landscape .pm-project-link { min-height: 44px; gap: 6px var(--space-12); margin-bottom: var(--space-8); }
html.phone-landscape .pm-project-link .pm-project-link-button { min-height: 44px; padding: var(--space-8) var(--space-12); font-size: var(--type-14); }
html.phone-landscape .pm-speaker { font-size: 11px; line-height: 14px; margin-bottom: var(--space-4); }
html.phone-landscape .pm-bubbles { gap: var(--space-8); }
html.phone-landscape .pm-message { padding: var(--space-8) var(--space-12); max-width: 95%; border-radius: var(--radius-16); }
html.phone-landscape .pm-message p { font-size: var(--type-14); line-height: 19px; }
html.phone-landscape .pm-thread-skills { margin-top: var(--space-12); }
html.phone-landscape .music-player { padding: 10px var(--space-20); }
html.phone-connecting .screen { animation: mobile-carplay-connect 600ms cubic-bezier(.22, .8, .24, 1) both; }
@keyframes mobile-carplay-connect {
  from { opacity: .3; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes mobile-rotate-guidance {
  0%, 20%, 80%, 100% { transform: rotate(0); }
  40%, 60% { transform: rotate(-90deg); }
}
html.mobile-motion-reduced .mobile-rotate-phone, html.mobile-motion-reduced.phone-connecting .screen { animation: none; }
html.mobile-motion-reduced .mobile-connected-actions a { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .mobile-rotate-phone, html.phone-connecting .screen { animation: none; }
  .mobile-connected-actions a { transition: none; }
}

/* Accessible semantics, focus, contrast and motion */
:root { --focus-light: var(--color-ffffff); --focus-dark: var(--color-000000); --accessible-link-light: var(--color-0063cc); --accessible-link-dark: var(--color-86c0ff); --accessible-secondary-light: var(--color-5c5c64); --accessible-secondary-dark: var(--color-c0c0c8); --accessible-message-blue: var(--color-0063d4); --accessible-green: var(--color-167333); --accessible-red: var(--color-b92b24); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app-grid { list-style: none; margin: 0; }
.app-grid-item { display: contents; }
@media (min-width: 901px) and (min-height: 551px), (min-width: 1101px) {
  .app-grid { padding: 0; }
}
#mobile-connected::after { background: linear-gradient(180deg, var(--color-0c1020b3), var(--color-080d22bd) 50%, var(--color-080d22cc)); }
.screen .app-button .app-label { background: var(--color-606064); color: var(--color-ffffff); backdrop-filter: none; -webkit-backdrop-filter: none; }
.screen.light .app-button .app-label { background: var(--color-d1d1d6); color: var(--color-1c1c1e); }
.screen .app-button:focus-visible .app-label { background: var(--color-ffffff); color: var(--color-000000); }
.screen { --secondary: var(--accessible-secondary-dark); --blue: var(--accessible-link-dark); --map-secondary: var(--accessible-secondary-dark); --map-control: var(--accessible-link-dark); --focus-size: calc(2px / var(--viewport-scale, 1)); --focus-inset: calc(4px / var(--viewport-scale, 1)); }
.screen.light { --secondary: var(--accessible-secondary-light); --blue: var(--accessible-link-light); --map-secondary: var(--accessible-secondary-light); --map-control: var(--accessible-link-light); }
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus-light); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-dark), 0 0 0 4px var(--focus-light); }
.screen :is(button, a, input, select, textarea, [tabindex]):focus-visible, .screen .transport button:has(.kit-control):focus-visible { outline: var(--focus-size) solid var(--focus-light); outline-offset: var(--focus-size); box-shadow: 0 0 0 var(--focus-size) var(--focus-dark), 0 0 0 var(--focus-inset) var(--focus-light); }
.screen :is(.list-row, .pm-conversation, .pm-pinned-contact, .favorite-row, [data-scroll-region], .setting-row):focus-visible { outline: var(--focus-size) solid var(--focus-light); outline-offset: calc(-1 * var(--focus-size)); box-shadow: inset 0 0 0 var(--focus-inset) var(--focus-dark); }
.screen .app-button:focus-visible .app-icon { box-shadow: 0 0 0 var(--focus-size) var(--focus-dark), 0 0 0 var(--focus-inset) var(--focus-light); }
.screen .experience-icon { background: var(--company-color); }
.screen .experience-icon b { color: var(--company-ink, var(--color-ffffff)); }
.screen .experience-icon i { background: none; }
.screen.light .list-row .row-sub, .screen .list-row .row-sub, .screen .setting-label, .screen .dash-now > span:last-child { color: var(--secondary); }
.screen .dash-destinations, .screen .dash-music { background: var(--color-26262b); }
.screen.light .dash-destinations, .screen.light .dash-music { background: var(--color-fafafc); }
.screen .music-search input::placeholder { color: var(--secondary); opacity: 1; }
.screen .pm-message { background: var(--accessible-message-blue); }
.screen .pm-project-link-label, .screen .pm-thread-contact span:not(.pm-avatar):not(.app-icon), .screen .pm-speaker, .screen .pm-conversation-preview, .screen .pm-conversation-date, .screen .pm-chevron { color: var(--color-24405b); }
.screen .pm-thread-skills span { background: var(--color-e3eef6); color: var(--color-234b68); }
.screen .pm-thread-actions button { background: var(--color-e3eef6); color: var(--color-075c96); }
.screen .pm-project-link-button { background: var(--accessible-message-blue); color: var(--color-ffffff); }
.screen .blue-button { background: var(--accessible-message-blue); color: var(--color-ffffff); }
.screen .preview-go { background: var(--color-30d158); color: var(--color-ffffff); }
.screen .preview-go:not(:disabled):is(:hover, :active) { background: var(--color-34c759); }
.screen .route-option.end-route { background: var(--color-ff453a); color: var(--color-ffffff); }
.screen .route-option.end-route:is(:hover, :active) { background: var(--color-ff3b30); }
.screen .preview-retry { color: var(--blue); }
.screen .favorites-tabs button { color: var(--map-secondary); }
.screen .favorites-tabs button[aria-pressed=true] { background: var(--accessible-message-blue); color: var(--color-ffffff); }
.screen .route-option .add-stop-icon { color: var(--map-control); }
.screen .route-option .share-eta-icon { color: var(--color-79de99); }
.screen.light .route-option .share-eta-icon { color: var(--accessible-green); }
.screen .route-preview { background: var(--color-242428); }
.screen.light .route-preview { background: var(--color-f5f5f7); }
.screen label.setting-row { position: relative; cursor: pointer; }
.screen .setting-switch { appearance: none; -webkit-appearance: none; position: relative; display: block; flex: none; margin: 0; width: 53px; height: 44px; min-height: max(44px, calc(24px / var(--viewport-scale, 1))); min-width: max(53px, calc(24px / var(--viewport-scale, 1))); border: 0; border-radius: 10px; background: var(--color-transparent); cursor: pointer; }
.screen .setting-switch::before { content: ''; position: absolute; left: calc(50% - 26.5px); top: calc(50% - 16px); width: 53px; height: 32px; border: 2px solid var(--color-77777f); border-radius: 999px; background: var(--color-55555d); }
.screen .setting-switch::after { content: ''; position: absolute; left: calc(50% - 23.5px); top: calc(50% - 13px); width: 26px; height: 26px; border-radius: 50%; background: var(--color-ffffff); box-shadow: 0 1px 4px var(--color-0004); transition: transform .2s ease; }
.screen .setting-switch:checked::before { background: var(--accessible-green); border-color: var(--accessible-green); }
.screen .setting-switch:checked::after { transform: translateX(21px); }
.screen.light .setting-switch::before { border-color: var(--color-6c6c74); }
.screen.light .setting-switch:checked::before { border-color: var(--accessible-green); }
@media (pointer: coarse) {
  .screen .setting-switch { min-height: calc(44px / var(--viewport-scale, 1)); min-width: max(53px, calc(44px / var(--viewport-scale, 1))); }
}
html.portfolio-reduced-motion *, html.portfolio-reduced-motion *::before, html.portfolio-reduced-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  :is(button, a, input, select, textarea, [tabindex]):focus-visible, .screen :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid Highlight; outline-offset: 3px; box-shadow: none; }
}

/* Recruiter fast path, default appearance and frame sizing */
html:not(.phone-portrait):not(.phone-landscape) body { padding: var(--space-20) var(--space-24); min-height: 100vh; min-height: 100dvh; justify-content: center; align-items: center; }
.device-wrap { width: min(1400px,calc(100vw - 48px),calc((100dvh - 190px)*2.666667)); max-width: 1400px; }
.portfolio-header { margin-bottom: var(--space-20); }
.under-device { gap: var(--space-20); }
.under-device>.footer-fast-path { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; }
.portfolio-resume, .classic-view { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-e0e0e8); font-size: var(--type-14); font-weight: 500; }
.classic-view:hover, .portfolio-resume:hover { color: var(--color-fff); }
.screen .app-button .app-label { background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--color-fff); text-shadow: 0 1px 5px var(--color-000c); }
.screen.light .app-button .app-label { background: none; color: var(--color-fff); }
.screen .view:has(>.scroll.list) .row-sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#screen:not(.light) .app-view:has(>.pm-inbox), #screen:not(.light) .app-view:has(>.pm-thread) { background: var(--color-15171c); color: var(--color-f5f5f7); }
#screen:not(.light) :is(.pm-thread,.pm-inbox) :is(h1,p,strong,.pm-pinned-name,.pm-conversation-role) { color: inherit; }
#screen:not(.light) .app-view:has(>.pm-inbox)>.app-header, #screen:not(.light) .app-view:has(>.pm-thread)>.app-header { color: var(--color-f5f5f7); }
#screen:not(.light) .app-view:has(>.pm-inbox) .back, #screen:not(.light) .app-view:has(>.pm-thread) .back { color: var(--color-86c0ff); }
#screen:not(.light) :is(.pm-speaker,.pm-conversation-preview,.pm-conversation-date,.pm-chevron,.pm-project-link-label,.pm-thread-contact span:not(.pm-avatar):not(.app-icon)) { color: var(--color-c0c0c8); }
#screen:not(.light) .pm-thread-contact { border-color: var(--color-ffffff24); }
#screen:not(.light) .pm-conversations>li+li:before { background: var(--color-ffffff24); }
#screen:not(.light) .pm-thread-skills span { background: var(--color-32343c); color: var(--color-fff); }
#screen:not(.light) .portfolio-scroll-cue--messages { background: linear-gradient(to bottom,var(--color-15171c00),var(--color-15171c)); }
.recruiter-note { position: absolute; z-index: 200; top: 24px; left: 50%; transform: translateX(-50%); translate: 0 var(--welcome-drag-y,0px); opacity: var(--welcome-drag-opacity,1); width: min(900px,calc(100% - 80px)); display: flex; gap: var(--space-20); align-items: center; padding: var(--space-20) 28px; border: 1px solid var(--color-ffffff30); border-radius: var(--radius-24); background: var(--color-242428f5); color: var(--color-fff); text-align: left; box-shadow: 0 12px 30px var(--color-0004); touch-action: pan-x; user-select: none; transition: translate .22s cubic-bezier(.2,.8,.2,1),opacity .22s ease; animation: welcome-slide .35s cubic-bezier(.2,.8,.2,1); }
.recruiter-note.is-dragging { transition: none; }
.screen .recruiter-note { touch-action: none; }
.recruiter-note.is-leaving { animation: none; translate: 0 calc(-100% - 32px); opacity: 0; pointer-events: none; }
.screen button.recruiter-note:active { transform: translateX(-50%); }
.recruiter-note[hidden] { display: none; }
.recruiter-note img { width: 64px; height: 64px; flex: none; }
.recruiter-note small { display: block; color: var(--color-c0c0c8); font-size: 18px; margin-bottom: 3px; }
.recruiter-note span { font-size: 28px; line-height: 1.35; }
.mobile-classic-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--color-fff); font-size: var(--type-14); text-decoration: underline; text-underline-offset: 4px; }
@keyframes welcome-slide {
  from { opacity: 0; transform: translate(-50%,-30px); }
  to { opacity: 1; transform: translate(-50%,0); }
}
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .device-wrap { width: 100%; max-width: none; }
  .recruiter-note { top: 8px; width: min(450px,calc(100% - 32px)); gap: var(--space-12); padding: 10px 14px; border-radius: var(--radius-16); }
  .recruiter-note img { width: 36px; height: 36px; }
  .recruiter-note small { font-size: 10px; }
  .recruiter-note span { font-size: 13px; }
}
@media(pointer:coarse) and (max-height:740px) and (orientation:portrait) {
  .mobile-connected-inner { gap: var(--space-16); padding-top: calc(var(--space-24) + env(safe-area-inset-top)); padding-bottom: calc(var(--space-20) + env(safe-area-inset-bottom)); }
  .mobile-phone-clock time { font-size: 80px; }
  .mobile-connected-status { margin-bottom: 14px; }
  .mobile-connected-rotate svg { width: 48px; height: 48px; margin-bottom: var(--space-8); }
}
@media(prefers-reduced-motion:reduce) {
  .recruiter-note { animation: none; transition: none; }
}
.screen.reduced .recruiter-note { animation: none; transition: none; }

/* The project link is the final outgoing message, aligned with its thread. */
.pm-project-message .pm-project-link { max-width: 100%; margin: 0; align-items: flex-start; }
.screen .pm-project-message .pm-project-link-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: var(--color-transparent); color: var(--color-fff); font-size: 31px; line-height: 41px; font-weight: 600; }
#screen .pm-project-message .pm-project-link-label { color: var(--color-fff); font-size: 23px; line-height: 29px; opacity: .85; }
.screen .pm-project-message .pm-project-link-button:hover { text-decoration: underline; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .screen .pm-project-message .pm-project-link-button { padding: 0; font-size: 15px; line-height: 21px; border-radius: 0; }
  #screen .pm-project-message .pm-project-link-label { font-size: 11px; line-height: 16px; }
}
.screen .app-button:focus-visible .app-label, .screen.light .app-button:focus-visible .app-label { background: none; color: var(--color-fff); }

/* Current month and experience timeline */
.calendar-overview { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); padding: 18px 36px; flex: none; border-bottom: 1px solid var(--line); }
.calendar-overview strong, .calendar-overview span { display: block; }
.calendar-overview strong { font-size: 34px; line-height: 1.2; }
.calendar-overview span { margin-top: 5px; font-size: var(--type-24); color: var(--secondary); }
.calendar-overview button { padding: var(--space-12) var(--space-20); border-radius: var(--radius-16); color: var(--blue); background: var(--raised); font-size: 27px; }
.calendar-timeline-scroll { --calendar-label-width: 310px; --calendar-month-width: 70px; position: relative; padding: 0 0 var(--space-16); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
html.phone-landscape .calendar-timeline-scroll { overflow: auto; }
.calendar-timeline-sheet { position: relative; width: calc(var(--calendar-label-width) + var(--calendar-month-count) * var(--calendar-month-width)); min-height: 100%; }
.calendar-axis, .calendar-role-row { display: grid; grid-template-columns: var(--calendar-label-width) repeat(var(--calendar-month-count), var(--calendar-month-width)); align-items: center; }
.calendar-axis { position: sticky; top: 0; z-index: 3; height: 62px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 21px; line-height: 1.1; }
.calendar-axis-label { position: sticky; left: 0; z-index: 4; height: 100%; padding: 18px var(--space-20); background: var(--surface); color: var(--secondary); }
.calendar-month-cell { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); border-left: 1px solid var(--line); }
.calendar-month-cell small { font-size: 18px; color: var(--secondary); }
.calendar-month-cell[data-year-start=true] { font-weight: 600; }
.calendar-role-rows { list-style: none; margin: 0; padding: 0; }
.calendar-role-row { min-height: 94px; padding-block: var(--space-12); border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to right, var(--color-transparent) 0, var(--color-transparent) calc(var(--calendar-month-width) - 1px), var(--line) calc(var(--calendar-month-width) - 1px), var(--line) var(--calendar-month-width)); background-position-x: var(--calendar-label-width); }
.calendar-role-label { position: sticky; left: 0; z-index: 2; grid-column: 1; grid-row: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: var(--space-12); padding: 0 18px; background: var(--surface); }
.calendar-role-avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; font-size: 19px; font-weight: 600; }
.calendar-role-label > span:last-child { min-width: 0; }
.calendar-role-label strong, .calendar-role-label small { display: block; }
.calendar-role-label strong { font-size: 23px; line-height: 1.2; overflow-wrap: anywhere; }
.calendar-role-label small { margin-top: 5px; font-size: 19px; line-height: 1.3; color: var(--secondary); }
.calendar-role-bar { grid-row: 1; justify-self: stretch; position: relative; z-index: 1; min-height: 62px; min-width: 44px; margin-inline: 3px; padding: var(--space-12); border: 1px solid var(--color-transparent); border-radius: 15px; text-align: left; font-size: 23px; line-height: 1.25; box-shadow: 0 2px 5px var(--color-0002); }
.calendar-role-bar span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-role-bar[data-approximate=true] { border: 2px dashed currentColor; }
.calendar-role-bar:active { opacity: .82; }
.calendar-today-rule { position: absolute; z-index: 1; top: 62px; bottom: 0; left: calc(var(--calendar-label-width) + var(--calendar-today-position) * var(--calendar-month-width)); width: 2px; background: var(--blue); pointer-events: none; }
@media (max-width: 900px), (max-width: 1100px) and (max-height: 550px) {
  .calendar-overview { min-height: 44px; padding: 5px 14px; gap: var(--space-12); }
  .calendar-overview strong { font-size: var(--type-16); }
  .calendar-overview span { margin-top: 2px; font-size: 11px; }
  .calendar-overview button { min-height: 44px; min-width: 44px; padding: 6px var(--space-12); border-radius: 10px; font-size: var(--type-14); }
  .calendar-timeline-scroll { --calendar-label-width: 180px; --calendar-month-width: 54px; }
  .calendar-axis { height: 36px; font-size: var(--type-12); }
  .calendar-axis-label { padding: 10px var(--space-12); }
  .calendar-month-cell { gap: 2px; }
  .calendar-month-cell small { font-size: 10px; }
  .calendar-role-row { min-height: 60px; padding-block: 7px; }
  .calendar-role-label { gap: var(--space-8); padding: 0 10px; }
  .calendar-role-avatar { width: 32px; height: 32px; font-size: 13px; }
  .calendar-role-label strong { font-size: 13px; line-height: 16px; }
  .calendar-role-label small { margin-top: 2px; font-size: 10px; line-height: 13px; }
  .calendar-role-bar { min-height: 44px; padding: 7px 9px; border-radius: 10px; font-size: 13px; }
  .calendar-today-rule { top: 36px; }
}

/* Wallpaper picker and preview gradients */
:root { --wallpaper-original: url("assets/carplay-wallpaper.webp") center / cover no-repeat; --wallpaper-iris: radial-gradient(ellipse at 10% 100%,var(--color-45368c),var(--color-transparent) 65%),linear-gradient(135deg,var(--color-172039),var(--color-70426b)); --wallpaper-ember: radial-gradient(ellipse at 0% 100%,var(--color-865130),var(--color-transparent) 65%),linear-gradient(135deg,var(--color-40283c),var(--color-382536)); --wallpaper-midnight: radial-gradient(ellipse at 0% 100%,var(--color-344767),var(--color-transparent) 70%),linear-gradient(145deg,var(--color-070f1b),var(--color-1f2844)); --wallpaper-coast: radial-gradient(ellipse at 0% 100%,var(--color-276d72),var(--color-transparent) 65%),linear-gradient(145deg,var(--color-133849),var(--color-26365a)); }
.wallpaper-picker { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; }
.wallpaper-swatch { min-height: 104px; padding: var(--space-8); border: 2px solid var(--color-transparent); border-radius: 18px; background: var(--raised); display: flex; flex-direction: column; gap: 10px; align-items: center; font-size: 25px; }
.wallpaper-swatch i { width: 100%; height: 68px; border-radius: var(--radius-12); background: var(--swatch); }
.wallpaper-swatch[aria-pressed=true] { border-color: var(--blue); }
.wallpaper-swatch:active { opacity: .8; }
@media(max-width:900px), (max-width:1100px) and (max-height:550px) {
  .wallpaper-picker { gap: var(--space-8); }
  .wallpaper-swatch { min-height: 70px; padding: 5px; gap: 5px; font-size: 11px; border-radius: 10px; }
  .wallpaper-swatch i { height: 40px; border-radius: 6px; }
}

/* Typing states and experience quick replies */
.pm-thread .conversation-pending-fact { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: normal; border: 0; }
.pm-message.conversation-last-visible { border-bottom-right-radius: 8px; }
.pm-message-group { position: relative; }
.conversation-replies { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 18px 0 0; }
.conversation-replies button { display: inline-flex; align-items: center; justify-content: center; min-height: calc(44px / var(--viewport-scale, 1)); min-width: calc(44px / var(--viewport-scale, 1)); padding: var(--space-12) 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--text); font-size: var(--type-24); line-height: 1.3; touch-action: manipulation; }
.conversation-replies button[hidden] { display: none; }
.conversation-replies button[aria-disabled=true] { opacity: .72; }
.conversation-replies button[aria-busy=true] { opacity: .8; }
.conversation-replies button:not([aria-disabled=true]):active { transform: scale(.97); }
.conversation-typing { position: absolute; top: 6px; right: 85px; display: flex; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 19px; pointer-events: none; }
.conversation-typing[hidden] { display: none; }
.conversation-typing i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); animation: conversation-typing-dot .8s ease-in-out infinite; }
.conversation-typing i:nth-child(2) { animation-delay: .12s; }
.conversation-typing i:nth-child(3) { animation-delay: .24s; }
.conversation-new-message { animation: conversation-fact-arrives 240ms cubic-bezier(.22, .8, .24, 1) both; }
@keyframes conversation-typing-dot {
  0%, 70%, 100% { transform: translateY(0); opacity: .6; }
  35% { transform: translateY(-3px); opacity: 1; }
}
@keyframes conversation-fact-arrives {
  from { transform: translateY(4px); opacity: .9; }
  to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 900px), (max-width: 1100px) and (max-height: 550px) {
  .conversation-replies { margin-top: var(--space-12); gap: 6px; }
  .conversation-replies button { min-height: 44px; min-width: 44px; padding: var(--space-8) var(--space-12); font-size: 13px; line-height: 18px; }
  .conversation-typing { top: 0; right: 42px; gap: 3px; width: 25px; height: 14px; }
  .conversation-typing i { width: 4px; height: 4px; }
  .pm-message.conversation-last-visible { border-bottom-right-radius: 5px; }
}
.conversation-motion-reduced .conversation-pending-fact, .screen.reduced .pm-thread .conversation-pending-fact { position: static; width: auto; height: auto; padding: revert-layer; margin: revert-layer; overflow: visible; clip: auto; clip-path: none; border: revert-layer; }
.conversation-motion-reduced .conversation-new-message, .conversation-motion-reduced .conversation-typing i, .screen.reduced .conversation-new-message, .screen.reduced .conversation-typing i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .conversation-new-message, .conversation-typing i { animation: none; }
}

/* Map engine markers, panes and attribution */
.ajit-drive-surface { position: relative; width: 100%; height: 100%; min-height: 100px; isolation: isolate; background: var(--color-e8ede5); overflow: hidden; }
.ajit-drive-surface .leaflet-container { background: var(--color-e8ede5); font-family: var(--font-system-3); font-size: var(--type-12); }
.ajit-drive-surface .leaflet-pane { z-index: 200; }
.ajit-drive-surface .leaflet-tile-pane { z-index: 200; }
.ajit-drive-surface .leaflet-overlay-pane { z-index: 400; }
.ajit-drive-surface .leaflet-shadow-pane { z-index: 500; }
.ajit-drive-surface .leaflet-marker-pane { z-index: 600; }
.ajit-drive-surface .leaflet-tooltip-pane { z-index: 650; }
.ajit-drive-surface .leaflet-popup-pane { z-index: 700; }
.ajit-drive-surface .leaflet-control { z-index: 800; }
.ajit-drive-surface .leaflet-control-attribution { background: var(--color-rgba-2e0a8e37); font-size: 10px; color: var(--color-526057); border-radius: 5px 0 0 0; padding: 2px 6px; line-height: 1.35; }
.ajit-drive-surface .leaflet-control-attribution a { color: var(--color-526057); }
.ajit-drive-surface .leaflet-tooltip { border: 0; border-radius: 10px; padding: var(--space-8) 11px; background: var(--color-rgba-50f2dfb0); box-shadow: 0 3px 12px var(--color-0002); color: var(--color-1e2820); font-weight: 600; }
.ajit-map-pin { width: 32px; height: 32px; display: grid; place-items: center; background: var(--pin-color); color: var(--color-fff); border: 2px solid var(--color-white); border-radius: 50%; box-shadow: 0 2px 7px var(--color-0004); transition: transform .15s; }
.ajit-map-pin:hover { transform: scale(1.12); }
.ajit-map-pin svg { width: 21px; height: 21px; }
.ajit-drive-car { display: grid; place-items: center; width: 56px; height: 56px; background: var(--color-transparent); border: 0; border-radius: 50%; }
.ajit-drive-heading { display: block; width: 56px; height: 56px; transition: transform .12s linear; }
.ajit-drive-heading svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px var(--color-0003)); }
.ajit-drive-fallback { width: 100%; height: 100%; display: block; touch-action: none; }
.ajit-offline-attribution { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 2px 6px; background: var(--color-f5f8f6da); border-radius: 5px 0 0 0; font: 10px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: var(--color-526057); }
.ajit-offline-attribution a { color: inherit; }
.ajit-drive-dark { background: var(--color-222b2e); }
.ajit-drive-dark .leaflet-container { background: var(--color-222b2e); }
.ajit-drive-dark .leaflet-control-attribution { background: var(--color-20272cdd); color: var(--color-c9d5d8); }
.ajit-drive-dark .leaflet-control-attribution a { color: var(--color-c9d5d8); }
.ajit-drive-surface .maplibregl-map { font-family: var(--font-system-3); background: var(--color-e8ede5); }
.ajit-drive-surface .maplibregl-canvas { outline: none; }
.ajit-drive-surface .maplibregl-control-container { pointer-events: none; }
.ajit-drive-surface .maplibregl-ctrl-attrib { pointer-events: auto; background: var(--color-rgba-523cee8e); color: var(--color-526057); font-size: 10px; line-height: 1.35; padding: 2px 6px; border-radius: 5px 0 0 0; }
.ajit-drive-surface .maplibregl-ctrl-attrib a { color: inherit; }
.ajit-drive-surface .maplibregl-ctrl-bottom-right { right: 0; bottom: 0; }
.ajit-drive-surface .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0; }
.ajit-drive-dark .maplibregl-map { background: var(--color-222b2e); }
.ajit-drive-dark .maplibregl-ctrl-attrib { background: var(--color-20272cdd); color: var(--color-c9d5d8); }
.ajit-vector-pin { padding: 0; border: 0; background: none; cursor: pointer; display: block; width: 36px; height: 36px; font: inherit; }
.ajit-vector-pin:focus-visible { outline: 3px solid var(--color-007aff); outline-offset: 3px; border-radius: 50%; }
.ajit-vector-car { pointer-events: none; }
@media(prefers-reduced-motion:reduce) {
  .ajit-drive-heading, .ajit-map-pin { transition: none; }
}

/* Official Apple Music preview credit */
.music-credit { flex: none; margin: 0; padding: 6px 30px; font-size: var(--type-20); line-height: 1.4; color: var(--secondary); }
@media (max-width:900px), (max-width:1100px) and (max-height:550px) {
  .music-credit { padding: var(--space-4) 14px; font-size: var(--type-12); line-height: 16px; }
}

/* The surrounding page follows the same effective appearance as CarPlay. */
html[data-theme="light"] body { background: var(--page-background-color); }
html[data-theme="light"] .device { box-shadow: var(--page-shadow); }
.device { color: var(--color-fff); }
.portfolio-identity h1, .portfolio-identity p, .under-device :is(a,button) { transition: background-color .3s ease,color .3s ease; }
html[data-theme="light"] .under-device, html[data-theme="light"] .under-device :is(a,button) { color: var(--page-secondary); }
html[data-theme="light"] .under-device :is(a,button):hover { color: var(--page-text); }
html[data-theme="light"] .device-wrap.fullscreen-expanded { background: var(--page-background-color); }
html[data-theme="light"] :is(.recruiter-note,.orientation-notice,.toast) { background: var(--color-f2f2f7); color: var(--page-text); border-color: var(--color-00000024); box-shadow: 0 6px 26px var(--color-0003); }
html[data-theme="light"] :is(.recruiter-note small,.orientation-notice .notice-sender) { color: var(--page-secondary); opacity: 1; }
html[data-reduce-motion="true"] body, html[data-reduce-motion="true"] .portfolio-identity :is(h1,p), html[data-reduce-motion="true"] .under-device :is(a,button) { transition: none; }
@media(prefers-reduced-motion:reduce) {
  body, .portfolio-identity :is(h1,p), .under-device :is(a,button) { transition: none; }
}