/* Geometry and assets from the uploaded CarPlay UI Kit, in its native 1920 × 720 coordinate space. */
:root{--wallpaper:url("assets/carplay-wallpaper.png") center / cover no-repeat}
.screen{border-radius:calc(38px * var(--viewport-scale,1))}
.carplay-viewport{border-radius:38px}
.home-view,.list,.dash-music{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif}

/* SVG dimensions stay intrinsic; containers scale whole exported assets uniformly. */
.app-icon.native-icon{background:transparent;border-radius:0;overflow:visible;box-shadow:none}
.native-icon>.native-art{position:absolute;left:0;top:0;display:block;width:180px;height:180px;max-width:none;transform-origin:0 0;transform:scale(var(--native-scale,1));object-fit:contain}
.list-row .native-icon{--native-scale:.4888888889}
.experience-title .native-icon{--native-scale:.75}
.dash-now .native-icon,.music-empty .native-icon{--native-scale:.7166666667}
.native-tray>.native-art{width:87px;height:87px}

/* The tray's original glyphs, focus frame, and carrier geometry. */
.sidebar{position:relative}
.status{position:absolute;top:21px;left:0;width:135px;height:94px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif}
.status time{position:absolute;left:27px;top:0;width:81px;font-size:36px;font-weight:600;line-height:43px;letter-spacing:1.44px;text-align:center}
.status-bottom{position:absolute;top:51px;left:2px;width:131px;height:43px;display:block;margin:0}
.signal{position:absolute;left:0;top:5px;width:51px;height:32px;gap:5px;align-items:end}
.signal i{width:9px;border-radius:3px}
.carrier{position:absolute;left:61px;top:0;width:47px;font-size:36px;font-weight:400;line-height:43px;letter-spacing:.36px}
.carrier sup{position:absolute;left:54px;top:8px;width:16px;font-size:27px;font-weight:600;line-height:32px;letter-spacing:.27px}
.dock-button{position:relative}
.dock-button[aria-current=true]{box-shadow:none;outline:none}
.dock-button[aria-current=true]::after{content:"";position:absolute;inset:-12px;border:6px solid var(--kit-accent);border-radius:30px;pointer-events:none}
.home-button{left:22px}
.kit-toggle{display:block;position:relative;width:90px;height:45px}
.kit-toggle img{display:block;width:90px;height:45px;max-width:none;transform-origin:0 0}

/* Native dashboard shortcut positions and music controls. */
.dash-map{border-radius:26px}
.dash-destinations button{gap:9px}
.dash-destinations button:first-child>*{transform:translateX(9px)}
.dash-destinations button:last-child>*{transform:translateX(-7px)}
.shortcut-icon,.shortcut-icon.work{width:90px;height:90px;position:relative}
.shortcut-icon img{position:absolute;left:0;top:0;width:90px;height:90px;max-width:none;transform-origin:0 0}
.dash-now{padding:0}
.kit-control{display:block;position:relative;width:120px;height:96px;pointer-events:none}
.kit-control-ink{position:absolute;left:0;top:0;display:block;width:120px;height:96px;background:currentColor;mask-image:var(--control-glyph);mask-size:120px 96px;mask-position:center;mask-repeat:no-repeat;-webkit-mask-image:var(--control-glyph);-webkit-mask-size:120px 96px;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;transform-origin:0 0}
.transport button .kit-control .kit-pause-art{position:absolute;left:0;top:0;display:block;width:120px;height:96px;fill:currentColor;transform-origin:0 0}
.transport button:has(.kit-control){padding:0;border-radius:18px}
.transport button:has(.kit-control):is(:hover,:focus-visible,:active){background:transparent}
.transport button:has(.kit-control):focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.kit-map-pin{display:block;position:relative;flex:none;width:23px;height:63.2103271484375px}
.destinations-button .kit-map-pin img{position:absolute;left:0;top:0;display:block;width:23px;height:63.2103271484375px;max-width:none;transform-origin:0 0}

/* The kit's reusable 1617 × 132 list component, with real portfolio and music data. */
@media(min-width:681px){
 .list{padding:18px 84px}
 .list-row{height:132px;min-height:132px;max-height:132px;padding:22px;gap:7px;margin-bottom:6px}
 .list-row .app-icon{border-radius:18px}
 .list-row .row-copy{transform:translateY(1px)}
 .list-row .row-title{font-size:47px;line-height:56px;letter-spacing:-.47px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .list-row .row-sub{font-size:36px;line-height:43px;margin-top:5px;color:rgba(255,255,255,.46);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .list-row:is(:hover,:focus-visible){background:var(--kit-accent);color:#000;outline:none}
 .list-row:is(:hover,:focus-visible) .row-sub{color:rgba(0,0,0,.56)}
 .light .list-row .row-sub{color:#6e6e73}
 .light .list-row:is(:hover,:focus-visible){background:var(--kit-accent);color:#000}
 .light .list-row:is(:hover,:focus-visible) .row-sub{color:rgba(0,0,0,.56)}
}
@media(max-width:680px){
 .screen,.carplay-viewport{border-radius:20px}
 .native-icon{--native-scale:.3666666667}
 .list-row .native-icon{--native-scale:.2388888889}
 .experience-title .native-icon{--native-scale:.2722222222}
 .dash-now .native-icon{--native-scale:.2444444444}
 .music-empty .native-icon{--native-scale:.4444444444}
 .native-tray{--native-scale:.4482758621}
 .status{position:relative;top:auto;left:auto;width:100%;height:auto;font-size:19px;line-height:24px;letter-spacing:-.2px}
 .status time{position:static;width:auto;font-size:19px;line-height:24px;letter-spacing:-.2px}
 .status-bottom{position:relative;top:auto;left:auto;width:100%;height:14px;display:flex;align-items:center;justify-content:center;gap:4px;margin-top:6px}
 .signal{position:static;width:auto;height:11px;gap:2px}
 .signal i{width:2px;border-radius:1px}
 .carrier{position:static;width:auto;font-size:11px;line-height:14px;letter-spacing:.11px}
 .carrier sup{position:relative;left:auto;top:-2px;width:auto;font-size:8px;line-height:10px;margin-left:1px;letter-spacing:.08px}
 .dock-button[aria-current=true]::after{inset:-5.379310345px;border-width:2.689655172px;border-radius:13.448275862px}
 .home-button{left:10px}
 .kit-toggle{width:33px;height:16.5px}
 .kit-toggle img{transform:scale(.3666666667)}
 .dash-map{border-radius:17px}
 .dash-destinations button{gap:8px}
 .dash-destinations button>*{transform:none!important}
 .shortcut-icon,.shortcut-icon.work{width:40px;height:40px}
 .shortcut-icon img{width:90px;height:90px;transform:scale(.4444444444)}
 .kit-control{width:40px;height:32px}
 .kit-control-ink,.transport button .kit-control .kit-pause-art{transform:scale(.3333333333)}
 .music-player .kit-control{width:42px;height:33.6px}
 .music-player .kit-control-ink,.music-player .transport button .kit-control .kit-pause-art{transform:scale(.35)}
 .transport button:has(.kit-control){border-radius:6px}
 .kit-map-pin{width:9.66px;height:26.5483374023px}
 .destinations-button .kit-map-pin img{transform:scale(.42)}
}