/* Reserve room for the car name so it never covers the magazine banners. */
.studio-hero{--studio-heading-height:112px}
#studio-3d{top:var(--studio-heading-height)}
.studio-hero:after{top:var(--studio-heading-height)}
.mobile-ui .studio-hero{--studio-heading-height:96px}
@media(max-width:760px){.studio-hero{--studio-heading-height:128px}}
@media(orientation:portrait){.mobile-ui .studio-hero{--studio-heading-height:96px}}

/* The garage is the event hub; its sign buttons keep labels and large touch targets. */
.studio-hero{--garage-dock:86px;height:620px}
#studio-3d{bottom:var(--garage-dock)}
.studio-hero:after{bottom:var(--garage-dock)}
.studio-bottom{bottom:calc(var(--garage-dock) + 12px);pointer-events:none}
.garage-destinations{position:absolute;z-index:4;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:var(--garage-dock);background:#16262b;border-top:1px solid #697476}
.garage-destination{min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:7px 3px;background:linear-gradient(#304447,#213437);color:#edc88f;border-right:1px solid #546362;cursor:pointer;transition:background .15s,color .15s}
.garage-destination:last-child{border-right:0}
.garage-destination svg{width:39px;height:39px;flex-shrink:0}
.garage-destination span{font:700 14px/1.1 'Barlow Condensed',sans-serif;letter-spacing:.6px;text-align:center}
.garage-destination:hover{background:#385955;color:#fff0c9}
.garage-destination:focus-visible{outline:3px solid #ffdaa0;outline-offset:-4px;background:#385955}
.mobile-ui .studio-hero{--garage-dock:66px;height:100%}
.mobile-ui .garage-destination{padding:3px 1px;gap:1px}
.mobile-ui .garage-destination svg{width:30px;height:30px}
.mobile-ui .garage-destination span{font-size:11px;letter-spacing:0}
.mobile-ui .studio-bottom{bottom:calc(var(--garage-dock) + 6px)}
@media(max-width:760px){.studio-hero{height:500px}.garage-destination span{font-size:12px;letter-spacing:0}}
@media(orientation:portrait){.mobile-ui .studio{grid-template-rows:minmax(245px,48%) minmax(0,1fr)}.mobile-ui .studio-hero{--studio-heading-height:72px}.mobile-ui .studio-heading h2{font-size:24px;margin:4px 0 0}.mobile-ui .studio-heading p{display:none}.mobile-ui .studio-bottom{display:none}.mobile-ui .garage-destination span{max-width:62px}}
@media(orientation:landscape) and (max-height:550px){.mobile-ui .studio-hero{--studio-heading-height:69px;--garage-dock:58px}.mobile-ui .studio-heading{top:7px}.mobile-ui .studio-heading h2{font-size:22px;margin:3px 0 0}.mobile-ui .studio-heading p,.mobile-ui .studio-bottom{display:none}.mobile-ui .garage-destination svg{width:25px;height:25px}.mobile-ui .garage-destination span{font-size:10px}}

.studio-views{display:flex;gap:5px;align-items:center;top:83px;left:30px;right:auto;z-index:3;pointer-events:auto;letter-spacing:.6px}
.studio-views>span{margin-right:5px}
.studio-views button{padding:4px 7px;background:#344a4d;color:#e3c291;border:1px solid #69797a;font:700 11px 'Barlow Condensed',sans-serif;min-height:25px;cursor:pointer}
.studio-views button:hover,.studio-views button:focus-visible{background:#d8b579;color:#17292d}
@media(max-width:760px){.studio-views{top:92px;left:20px}}
.mobile-ui .studio-views{top:54px;left:15px;gap:4px}
.mobile-ui .studio-views>span{display:none}
.mobile-ui .studio-views button{font-size:10px;padding:3px 6px;min-height:27px}
@media(orientation:portrait){.mobile-ui .studio-hero{--studio-heading-height:87px}.mobile-ui .studio-views{top:52px}}
@media(orientation:landscape) and (max-height:550px){.mobile-ui .studio-hero{--studio-heading-height:81px}.mobile-ui .studio-views{top:49px}.mobile-ui .car-rev{font-size:9px;min-height:30px}}

/* Keep the maker credit separate from the inspection controls. */
.desktop-ui .studio-heading p{margin:5px 0 0;font-size:11px}
.desktop-ui .studio-views{top:104px}
.desktop-ui .studio-hero{--studio-heading-height:139px}
@media(max-width:760px){.desktop-ui .studio-views{top:104px}}
.mobile-ui .studio-hero{--studio-heading-height:104px}
.mobile-ui .studio-views{top:68px}
.mobile-ui .studio-heading h2{margin:4px 0 0;line-height:1.05}
.mobile-ui .studio-heading p{display:none}
@media(orientation:landscape) and (max-height:550px){.mobile-ui .studio-hero{--studio-heading-height:88px}.mobile-ui .studio-views{top:54px}}
.desktop-ui .studio-heading{top:20px;line-height:1}
.desktop-ui .studio-heading h2{font-size:36px;line-height:1;margin:6px 0 0}
.desktop-ui .studio-heading p{line-height:1.3;margin:6px 0 0}
.desktop-ui .studio-views{top:108px}
.desktop-ui .studio-hero{--studio-heading-height:143px}

/* An enamel stance selector with a knurled chrome knob. */
.setup-row{align-items:center;gap:14px}.setup-row>label{flex:1;min-width:0;width:auto;font-size:10px}.stance-control{flex:0 0 153px;text-align:center;background:linear-gradient(145deg,#15262a,#2c4142);border:1px solid #637473;border-radius:9px;padding:9px 5px;color:#e9ce9d;box-shadow:inset 0 0 0 3px #182a2d}.stance-caption{font:700 10px 'Barlow Condensed',sans-serif;letter-spacing:2px}.stance-dial{position:relative;height:104px;padding-top:34px}.stance-label{position:absolute;font:italic 700 16px Georgia,serif;color:#90a59e;text-shadow:0 1px 2px #001}.stance-cruise{top:24px;left:0;transform:rotate(-21deg)}.stance-slammed{top:7px;left:50%;transform:translateX(-50%)}.stance-raked{top:24px;right:0;transform:rotate(21deg)}.stance-knob{display:block;position:relative;margin:auto;width:67px;height:67px;border-radius:50%;border:3px solid #b9b9a6;background:repeating-conic-gradient(#405352 0deg 7deg,#bac0aa 7deg 10deg);box-shadow:0 4px 6px #0008;cursor:pointer;touch-action:manipulation}.stance-knob:before{content:'';position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#d5d6c1,#4a5c59 53%,#263c3a 65%);border:1px solid #eddec0}.stance-knob svg{position:absolute;inset:15px;width:31px;height:31px;stroke:#e5d7b6;fill:none;stroke-width:1.7}.stance-pointer{position:absolute;z-index:1;width:4px;height:13px;background:#f4ba65;border:1px solid #ffe5a4;left:calc(50% - 2px);top:8px;transform-origin:50% 22px;transition:transform .25s;box-shadow:0 0 3px #201d0b}.stance-control[data-stance=Cruiser] .stance-pointer{transform:rotate(-60deg)}.stance-control[data-stance=Raked] .stance-pointer{transform:rotate(60deg)}.stance-control[data-stance=Cruiser] .stance-cruise,.stance-control[data-stance=Slammed] .stance-slammed,.stance-control[data-stance=Raked] .stance-raked{color:#ffdf9c}.stance-current{display:block;font:italic 700 20px Georgia;color:#ffda97}.stance-control>small{display:block;font:600 8px 'Barlow Condensed';letter-spacing:1px;margin:5px 0 0;color:#a9beb0}.stance-knob:focus-visible{outline:3px solid #ffe2a8;outline-offset:5px}.studio-views{flex-wrap:wrap}.studio-views button[hidden]{display:none}.mobile-ui .studio-views button{min-height:30px}.mobile-ui .stance-control{flex-basis:145px}