/* SOL055: selected carrier 1536x1024. Inner plane corners measured by the
   image role: (422,285), (1192,285), (1192,714), (421,714).
   Native screen maps x=421.5..1192, y=285..714 without stretching the photograph.
   Smaller viewports move the camera crop closer while keeping a physical bezel. */
#aios .hmi20 .cockpit-product { aspect-ratio:2; overflow:hidden; border-radius:28px; }
#aios .hmi20 .cockpit-hardware { display:block; position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; border-radius:0; }
#aios .hmi20 .hmi-live-screen { position:absolute; left:27.44140625%; top:20.44270833%; width:50.16276042%; height:auto; aspect-ratio:770.5/429; margin:0; padding:16px; border:0; border-radius:8px; }
@media (max-width:900px) {
 #aios .hmi20 .cockpit-product { aspect-ratio:1.8; }
 #aios .hmi20 .cockpit-hardware { inset:auto; left:-26.48150552%; top:-40.86930565%; width:147.51979234%; height:auto; aspect-ratio:3/2; object-fit:contain; }
 #aios .hmi20 .hmi-live-screen { left:14%; top:8.4%; width:74%; padding:12px; }
 #aios .hmi20 .screen-homebar { margin-bottom:8px; gap:8px; }
 #aios .hmi20 .hmi-assistant { padding-top:8px; }
 #aios .hmi20 .hmi20-navigation { gap:8px; }
 #aios .hmi20 .hmi20-destination { inset:auto 8px 8px; padding:8px; gap:8px; }
 #aios .hmi20 .hmi20-nav-side>div { padding:28px 12px 12px; }
 #aios .hmi20 .hmi20-content { grid-template-rows:minmax(0,1fr) 28px; gap:8px; }
 #aios .hmi20 .hmi20-music { padding:12px; }
 #aios .hmi20 .hmi20-music-copy { gap:4px; }
 #aios .hmi20 .hmi20-music-copy>strong { font-size:22px; }
 #aios .hmi20 .hmi20-music-meta { display:none; }
 #aios .hmi20 .hmi20-explore>div { background:linear-gradient(transparent,#101710de 30%); }
 #aios .hmi20 .hmi20-route-summary { padding:4px 8px; gap:8px; }
 #aios .hmi20 .hmi20-route-summary .icon { height:16px; width:16px; }
}
@media (max-width:620px) {
 #aios .hmi20 .cockpit-product { aspect-ratio:1/.67; border-radius:18px; }
 #aios .hmi20 .cockpit-hardware { inset:auto; left:-46.32835821%; top:-42.79082201%; width:183.40298507%; height:auto; aspect-ratio:3/2; object-fit:contain; }
 #aios .hmi20 .hmi-live-screen { left:4%; top:8%; width:92%; padding:8px; border-radius:5px; }
 #aios .hmi20 .screen-homebar { align-items:center; margin-bottom:6px; gap:6px; line-height:1.4; }
 #aios .hmi20 .screen-homebar>span:first-child { gap:6px; }
 #aios .hmi20 .screen-homebar>span:last-child { max-width:none; white-space:nowrap; }
 #aios .hmi20 .screen-homebar .icon { width:16px; height:16px; }
 #aios .hmi20 .hmi20-navigation { grid-template-columns:1.9fr 1fr; grid-template-rows:minmax(0,1fr); gap:6px; }
 #aios .hmi20 .hmi20-map,#aios .hmi20 .hmi20-nav-side,#aios .hmi20 .hmi20-music,#aios .hmi20 .hmi20-explore { border-radius:6px; }
 #aios .hmi20 .hmi20-destination { padding:6px 8px; gap:6px; border-radius:6px; }
 #aios .hmi20 .hmi20-destination .icon { width:18px; height:18px; }
 #aios .hmi20 .hmi20-destination span { display:none; }
 #aios .hmi20 .hmi20-nav-side { display:block; }
 #aios .hmi20 .hmi20-nav-side>div { position:absolute; inset:auto 0 0; padding:20px 8px 8px; color:#fff; background:linear-gradient(transparent,#070b10e0 30%); }
 #aios .hmi20 .hmi20-nav-side span { color:#fff; font-size:16px; line-height:1.4; }
 #aios .hmi20 .hmi20-nav-side strong { font-size:16px; line-height:1.4; margin-top:4px; }
 #aios .hmi20 .hmi20-content { grid-template-columns:1.2fr 1fr; grid-template-rows:minmax(0,1fr) 24px; gap:6px; }
 #aios .hmi20 .hmi20-music { padding:10px; }
 #aios .hmi20 .hmi20-music-copy { gap:4px; }
 #aios .hmi20 .hmi20-music-copy>span { font-size:16px; line-height:1.4; }
 #aios .hmi20 .hmi20-music-copy>strong { font-size:16px; line-height:1.4; max-width:none; }
 #aios .hmi20 .hmi20-music-meta { display:none; }
 #aios .hmi20 .hmi20-record { width:144px; height:144px; right:-40px; top:-46px; }
 #aios .hmi20 .hmi20-explore>div { padding:18px 8px 8px; }
 #aios .hmi20 .hmi20-explore strong,#aios .hmi20 .hmi20-explore span { line-height:1.4; }
 #aios .hmi20 .hmi20-route-summary { font-size:16px; line-height:1.4; padding:2px 6px; border-radius:4px; gap:6px; }
 #aios .hmi20 .hmi-assistant { padding-top:6px; line-height:1.4; gap:8px; }
 #aios .hmi20 .hmi-assistant>span:first-child { gap:6px; }
 #aios .hmi20 .hmi-assistant .icon { width:18px; height:18px; }
}