/* A little car you can play with. Every car interaction starts with a click. */
.car-playground{position:relative;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-top:0}
.car-stage{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;flex:1;min-height:310px;margin:0 0 8px}
.stage-orbit{position:absolute;z-index:-1;inset:10% -2% 4%;border-radius:50%;background:radial-gradient(ellipse at 54% 68%,#e8ebeb55 0%,#f2f4f433 40%,transparent 68%);pointer-events:none;transition:background .5s}
.hero-car{display:block;width:106%;height:auto;max-width:none;margin-inline:-3%;overflow:visible;position:relative;z-index:1;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.hero-car .car-piece{pointer-events:none}
.hero-car .car-piece.car-occluder{pointer-events:visiblePainted}
.hero-car .car-action{cursor:pointer;pointer-events:all;outline:none;-webkit-tap-highlight-color:transparent}
.hero-car .car-action *{pointer-events:none}
.hero-car .car-action .action-hit{pointer-events:visibleFill;fill:transparent;stroke:transparent;stroke-width:0;vector-effect:non-scaling-stroke}
.hero-car .car-action:focus-visible .action-hit{stroke:var(--red);stroke-width:2;stroke-dasharray:4 4}
.hero-car .car-action .car-piece{pointer-events:none}
/* Panel and wiper transforms are SVG attributes, updated by one motion clock.
   Never apply a CSS transform/transition here: matrix decomposition moves hinges. */
.door-well,.hood-well,.trunk-well{opacity:1}
[data-reveal]{pointer-events:none}
.headlight-beams,.lamp-glow,.tail-glow{opacity:0;transition:opacity .35s ease;pointer-events:none}
.is-lights-on .headlight-beams,.is-lights-on .lamp-glow,.is-lights-on .tail-glow{opacity:1}
.hazard-glow{opacity:0;pointer-events:none}
.is-hazards-on .hazard-glow{animation:hazard-blink 1.05s steps(1,end) infinite}
#car-engine-motion{transform-box:view-box;transform-origin:310px 240px}
.is-engine-on #car-engine-motion{animation:engine-idle .16s ease-in-out infinite alternate}
.exhaust{opacity:0;pointer-events:none;transition:opacity .2s}
.is-engine-on .exhaust{opacity:1}
.exhaust-puff{opacity:0;transform-box:fill-box;transform-origin:center}
.is-engine-on .exhaust-puff{animation:exhaust-drift 2.2s ease-out infinite}
.is-engine-on .exhaust-puff:nth-child(2){animation-delay:.7s}
.is-engine-on .exhaust-puff:nth-child(3){animation-delay:1.4s}
#car-horn-motion{transform-box:view-box;transform-origin:310px 255px}
.is-honking #car-horn-motion{animation:horn-bounce .58s ease-out}
.horn-echo{opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:right center}
.is-honking .horn-echo{animation:horn-echo .58s ease-out}
.is-paused #car-engine-motion,.is-paused .exhaust-puff,.is-paused .hazard-glow{animation-play-state:paused}
.play-console{position:relative;z-index:2;width:min(100%,640px);align-self:center;padding:6px;margin:0;border:1px solid #e1e5dc;border-radius:12px;background:#fffefb;box-shadow:0 4px 12px #28302204}
.play-controls{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.play-control{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-width:0;height:44px;padding:4px 2px;border:0;border-radius:7px;background:transparent;color:#6e7768;transition:background .15s,color .15s;line-height:1}
.play-control svg{width:18px;height:18px;stroke-width:1.55;flex:none}
.play-control .control-label{font-size:11px;line-height:13px;font-weight:500;white-space:nowrap}
.play-control:active{background:#f0f2ea}
.play-control[aria-pressed=true]:not(.sound-toggle){background:#fbece5;color:#b84232}
.play-control[data-action=lights][aria-pressed=true]{background:#fff4d5;color:#7e5a13}
.play-control[data-action=engine][aria-pressed=true]{background:#eaf1e6;color:#42663f}
.play-control[data-action=hazards][aria-pressed=true]{background:#fff1db;color:#805313}
.play-control[data-action=sound],.play-control[data-action=reset]{color:#6e7768}
.play-control[data-action=sound]{border-left:1px solid #e7eae1;border-top-left-radius:0;border-bottom-left-radius:0}
.play-control.sound-toggle[aria-pressed=false]{color:#737c6e}
.sound-toggle[aria-pressed=true] .sound-off-icon,.sound-toggle[aria-pressed=false] .sound-on-icon{display:none}
.is-honking .play-control[data-action=horn]{background:#fbece5;color:#b84232}
.play-control:focus-visible{outline-width:2px;outline-offset:2px}
.no-script-note{font-size:11px;text-align:center;color:var(--muted)}
@keyframes engine-idle{0%{transform:translate(0,.18px) rotate(-.012deg)}100%{transform:translate(.08px,-.18px) rotate(.012deg)}}
@keyframes exhaust-drift{0%{opacity:0;transform:translate(0,0) scale(.45)}15%{opacity:.2}100%{opacity:0;transform:translate(66px,-25px) scale(1.9)}}
@keyframes hazard-blink{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes horn-bounce{0%,100%{transform:rotate(0deg)}18%{transform:translate(-1px,-1px) rotate(-.3deg)}34%{transform:rotate(.2deg)}52%{transform:rotate(-.18deg)}72%{transform:rotate(.09deg)}}
@keyframes horn-echo{0%{opacity:0;transform:scale(.8)}16%,45%{opacity:.8}100%{opacity:0;transform:scale(1.25)}}
@media(min-width:1600px){.car-stage{min-height:340px}}
@media(max-width:1120px) and (min-width:781px){.play-controls{grid-template-columns:repeat(5,minmax(0,1fr))}.play-console{width:min(100%,380px)}.car-stage{min-height:270px}}
@media(max-width:780px){.car-playground{max-width:650px;width:100%;margin:auto}.car-stage{min-height:0;flex:none}.hero-car{width:106%;margin-inline:-3%}}
@media(max-width:640px){.play-console{width:min(100%,380px);padding:5px}.play-controls{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.play-control[data-action=sound]{border-left:0;border-radius:7px}.car-stage{margin-bottom:8px}}
@media(max-width:520px){.car-playground{padding-top:2px}.hero-car{width:108%;margin-inline:-4%}.play-console{border-radius:10px}.hero{gap:22px}}
@media(max-width:360px){.play-control .control-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.is-engine-on #car-engine-motion,.is-honking #car-horn-motion{animation:none}.is-engine-on .exhaust-puff:first-child{opacity:.15;animation:none;transform:translate(15px,-5px)}.is-hazards-on .hazard-glow{animation:none;opacity:1}.is-honking .horn-echo{animation:none;opacity:.7}}

  

/* Fits the existing AvtoFinish hero without increasing its height. */
.hero .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero .wrap{position:relative}
.hero .car-playground{position:absolute;right:0;top:66px;width:42%;height:calc(100% - 70px);padding:0;display:flex;justify-content:flex-end;flex-direction:column;margin:0;max-width:550px;color:#fff;--red:#ff681c}
.hero .car-stage{min-height:0;flex:1;margin:0;display:flex;align-items:center;justify-content:center;overflow:visible}
.hero .hero-car{width:100%;max-height:100%;height:auto;margin:0;filter:drop-shadow(0 10px 7px #0007)}
.hero .stage-orbit{inset:25% 1% 8%;background:radial-gradient(ellipse,#8da7b71c,transparent 70%)}
.hero .play-console{position:relative;width:100%;padding:4px;margin:0 0 5px;border:1px solid #d8e2ed22;border-radius:9px;background:#0a1822c9;box-shadow:none;backdrop-filter:blur(9px)}
.hero .play-controls{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px}
.hero .play-control{height:31px;padding:3px 0;gap:0;border-radius:5px;background:none;color:#c3d1dd;border:0;min-width:0}
.hero .play-control svg{width:18px;height:18px}
.hero .play-control .control-label{display:none}
.hero .play-control:hover{color:#fff;background:#ffffff19}
.hero .play-control[data-action=sound]{border-left:1px solid #ffffff20;border-radius:0}
.hero .play-control[aria-pressed=true]:not(.sound-toggle){color:#ffac70;background:#b95b232e}
.hero .play-control[data-action=lights][aria-pressed=true]{color:#ffdf7b;background:#795c252e}
.hero .play-control[data-action=engine][aria-pressed=true]{color:#99e2b1;background:#2e6b433e}
.hero .play-control[data-action=hazards][aria-pressed=true]{color:#ffc27e;background:#7951254e}
.hero .play-control.sound-toggle{color:#bdcbd8}
.hero .play-control:focus-visible{outline:2px solid #ff8545;outline-offset:1px}
.hero .car-help{position:absolute;left:0;right:0;bottom:48px;text-align:center;font-size:10px;color:#e6edf4;pointer-events:none;text-shadow:0 1px 5px #000;margin:0;line-height:1.3}
.car-status{max-width:1280px;width:calc(100% - 12vw);margin:14px auto 4px;color:#596574;font:12px/1.5 Arial,sans-serif;display:flex;gap:14px;justify-content:space-between;align-items:center}
.car-status strong{font-weight:500;color:#b63c00}.car-status span{font-size:11px;color:#7b8795}
@media(min-width:1600px){.hero .car-playground{top:72px;height:calc(100% - 76px);width:43%}}
@media(min-width:701px) and (max-width:1000px){.hero .car-playground{width:42%;top:72px;height:calc(100% - 76px)}.hero .play-control svg{width:16px;height:16px}.hero .play-controls{gap:0}.hero .play-console{padding:3px}.hero .play-control{height:29px}.hero .car-help{bottom:44px;font-size:9px}}
@media(max-width:700px){.hero .car-playground{position:relative;top:auto;right:auto;height:170px;width:min(360px,100%);margin:5px auto 0;max-width:none}.hero .car-stage{min-height:0;margin:0}.hero .hero-car{width:91%;margin:0;max-height:132px}.hero .play-console{margin-bottom:0;padding:2px}.hero .play-control{height:31px}.hero .play-control svg{width:16px;height:16px}.hero .car-help{display:none}.hero .wrap{padding-bottom:12px}.car-status{width:calc(100% - 36px);display:block;margin-top:12px}.car-status span{display:block;margin-top:4px}}

/* A second, independent study. All layout changes stay inside the hero. */
.hero::before{background:linear-gradient(90deg,rgba(7,18,26,.96) 0%,rgba(7,18,26,.89) 33%,rgba(7,18,26,.3) 61%,rgba(7,18,26,.54) 100%)}
.hero::after{content:"";position:absolute;z-index:1;inset:0 0 0 49%;pointer-events:none;background:radial-gradient(ellipse at 62% 68%,#9d77472b 0%,#121c2180 47%,#08131bcc 100%);mask-image:linear-gradient(90deg,transparent,#000 28%);backdrop-filter:blur(2px)}
.hero .car-playground{top:68px;right:0;bottom:5px;height:auto;width:42%;max-width:550px;display:grid;grid-template-rows:minmax(0,1fr) 40px 18px;gap:0;justify-content:stretch;isolation:isolate}
.hero .car-stage{min-width:0;min-height:0;width:100%;height:100%;flex:none;align-items:flex-end;overflow:visible}
.hero .stage-orbit{inset:28% -7% -3%;border-radius:0;background:radial-gradient(ellipse at 51% 82%,#b28a4b2b 0%,#53453424 36%,transparent 70%);transform:skewY(-5deg)}
.hero .hero-car{width:100%;height:100%;max-height:none;max-width:100%;margin:0;filter:brightness(.83) contrast(1.1) sepia(.14);overflow:visible}
.hero .play-console{align-self:center;justify-self:center;width:278px;max-width:100%;height:40px;padding:0;margin:0;border:1px solid #e9d2ab1c;border-radius:10px;background:linear-gradient(180deg,#101c24c9,#0b151cc9);box-shadow:0 5px 14px #0002,inset 0 1px 0 #ffffff06;backdrop-filter:blur(10px)}
.hero .play-controls{height:100%;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;padding:0 3px;align-items:center}
.hero .play-control{height:36px;min-height:36px;width:100%;padding:0;border-radius:7px;color:#c5c6c4;transition:color .18s,background .18s}
.hero .play-control svg{width:18px;height:18px;stroke-width:1.5}
.hero .play-control:hover,.hero .play-control:focus-visible{background:#e7d6b712;color:#fff1db}
.hero .play-control[aria-pressed=true]:not(.sound-toggle){color:#ffb480;background:#ff824018}
.hero .more-control{border-left:1px solid #d8d9d71c;border-radius:0 7px 7px 0}
.hero .more-control[aria-expanded=true]{background:#e7d6b712;color:#ffb480}
.hero .more-controls{position:absolute;bottom:46px;right:0;width:238px;max-width:100%;height:46px;padding:3px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;align-items:center;border:1px solid #d6b99138;border-radius:10px;background:#0b171ff5;box-shadow:0 6px 18px #0006;backdrop-filter:blur(12px)}
.hero .more-controls::after{content:"";position:absolute;right:18px;bottom:-5px;width:8px;height:8px;background:#0b171f;border-right:1px solid #d6b99138;border-bottom:1px solid #d6b99138;transform:rotate(45deg)}
.hero .more-controls .play-control[data-action=sound]{border:0;border-radius:7px}
.hero .car-help{position:static;align-self:center;min-width:0;height:16px;line-height:16px;font-size:10px;letter-spacing:.1px;color:#b9bdba;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px #0009;display:block;margin:0;padding:0 4px;pointer-events:none}
.hero .car-help.is-feedback{color:#ffd5ac}
.hero .car-status{display:none}
@media(min-width:1600px){.hero .car-playground{top:69px;bottom:6px;height:auto;width:43%}.hero .play-console{width:294px}.hero .car-help{font-size:11px}}
@media(min-width:701px) and (max-width:1000px){.hero .car-playground{top:72px;bottom:5px;height:auto;width:42%}.hero .play-console{width:270px;padding:0}.hero .play-control{height:36px}.hero .play-control svg{width:17px;height:17px}.hero .car-help{font-size:9px}}
@media(max-width:700px){
 .hero::after{inset:200px 0 0 0;mask-image:linear-gradient(180deg,transparent,#000 28%);background:radial-gradient(ellipse at 60% 60%,#5b49313b,#09151bdb 78%)}
 .hero .car-playground{position:relative;top:auto;bottom:auto;right:auto;width:min(360px,100%);height:202px;margin:8px auto 0;grid-template-rows:minmax(0,1fr) 44px 20px}
 .hero .hero-car{width:100%;height:100%;max-height:none;max-width:100%;margin:0}
 .hero .play-console{height:44px;width:282px;margin:0;padding:0}
 .hero .play-control{height:42px;min-height:42px}
 .hero .more-controls{height:48px;bottom:50px}
 .hero .car-help{font-size:10px;line-height:18px;height:18px;display:block}
 .hero .wrap{padding-bottom:10px}
}
@media(prefers-reduced-motion:reduce){.hero .play-control{transition:none}}

/* Warm workshop: the floor and windows define the car's placement. */
.hero{height:clamp(310px,25vw,380px);background-color:#191510}
.hero .hero-background{object-fit:cover;object-position:center center;filter:none}
.hero::before{background:linear-gradient(90deg,rgba(5,10,12,.42),rgba(5,10,12,.14) 40%,transparent 65%)}
.hero::after{display:none}
.hero .car-playground{top:72px;bottom:3px;right:-2%;width:45%;max-width:550px}
.hero .stage-orbit{display:none}
.hero .hero-car{filter:brightness(.88) contrast(1.04) sepia(.23) saturate(.8)}
.hero .play-console{background:linear-gradient(180deg,#28241ee8,#181815ed);border-color:#e9c89430}
.hero .car-help{color:#e1ccb3;text-shadow:0 1px 3px #000}
@media(min-width:1600px){.hero .car-playground{top:88px;bottom:5px;width:47%}}
@media(min-width:701px) and (max-width:1000px){.hero .car-playground{top:88px;right:-3%;width:46%;bottom:3px}.hero .play-console{width:250px}}
@media(max-width:700px){
 .hero{height:auto;min-height:440px}
 .hero .hero-background{object-position:72% center}
 .hero::before{background:linear-gradient(180deg,#080d12a6,transparent 75%)}
 .hero .car-playground{position:relative;top:auto;right:auto;bottom:auto;width:min(360px,100%);height:202px;margin:14px auto 0}
}

/* Desktop controls sit beside the car, leaving the foreground floor free. */
@media(min-width:701px){
 .hero .car-playground{display:block;right:0;bottom:6px}
 .hero .car-stage{width:calc(100% - 52px);height:100%;padding-bottom:8px;box-sizing:border-box}
 .hero .play-console{position:absolute;right:0;top:12px;width:42px;height:226px;max-width:42px;border-radius:10px}
 .hero .play-controls{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(6,1fr);padding:3px;height:100%;box-sizing:border-box}
 .hero .play-control{height:35px;min-height:35px}
 .hero .more-control{border-left:0;border-top:1px solid #d8d9d71c;border-radius:0 0 7px 7px}
 .hero .more-controls{right:49px;bottom:0;width:226px;height:44px}
 .hero .more-controls::after{right:-5px;bottom:15px;transform:rotate(-45deg)}
 .hero .car-help{position:absolute;bottom:0;left:0;width:calc(100% - 55px);box-sizing:border-box;font-size:9px}
}

@media(min-width:701px){
 .hero .play-console{right:calc((min(1280px,88vw) - 100vw)/2 + 16px);top:12px}
 .hero .car-playground{bottom:0}
 .hero .car-stage{padding-bottom:0;transform:translateY(7px) scale(1.03);transform-origin:60% 100%}
 .hero .car-help{left:auto;right:calc((min(1280px,88vw) - 100vw)/2 + 68px);bottom:12px;width:190px;height:auto;min-height:16px;padding:5px 8px;border-radius:6px;background:#181815d9;white-space:normal;text-align:right;font-size:10px;line-height:14px}
}

/* A quiet shipping link in the header's existing top row. */
.delivery-link{border:0;border-radius:6px;min-height:40px;padding:6px 0;gap:8px;background:transparent;box-shadow:none}
.delivery-link>svg{width:28px;height:25px}
.delivery-link .shipping-copy strong{font-size:13px;font-weight:500;line-height:1.3}
.delivery-link:hover{background:transparent;color:#ffb480}
.delivery-link:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@media(max-width:700px){.delivery-link{min-height:40px;padding:6px 0;gap:7px}.delivery-link>svg{width:25px;height:23px}.delivery-link .shipping-copy strong{font-size:12px}}

/* Horizontal controls anchored to the hero's lower-right edge. */
@media(min-width:701px){
 .hero .play-console{top:auto;bottom:4px;right:calc((min(1280px,88vw) - 100vw)/2 + 16px);width:278px;max-width:278px;height:38px;border-radius:9px;background:linear-gradient(180deg,#28241ee8,#181815ed)}
 .hero .play-controls{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr;padding:1px 3px}
 .hero .play-control{height:34px;min-height:34px}
 .hero .more-control{border-top:0;border-left:1px solid #d8d9d71c;border-radius:0 7px 7px 0}
 .hero .car-help{right:calc((min(1280px,88vw) - 100vw)/2 + 16px);bottom:45px;width:278px;min-height:16px;padding:3px 6px;text-align:center;white-space:nowrap;font-size:10px;line-height:16px;background:#181815b8;border-radius:5px}
 .hero .more-controls{right:0;bottom:68px;width:238px;height:46px}
 .hero .more-controls::after{right:18px;bottom:-5px;transform:rotate(45deg)}
}

/* All ten actions remain visible in a compact, two-row panel. */
@media(min-width:701px){
 .hero .play-console{width:210px;max-width:210px;height:76px;bottom:6px}
 .hero .play-controls{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,1fr);padding:3px;gap:0}
 .hero .play-control{height:34px;min-height:34px}
 .hero .play-control svg{width:16px;height:16px}
 .hero .more-control{display:none}
 .hero .car-help{width:210px;bottom:85px;font-size:10px;background:#181815c9}
 .hero .car-stage{transform:translate(-80px,7px) scale(1.03)}
}
@media(max-width:700px){
 .hero .play-console{height:82px;width:250px}
 .hero .play-controls{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,1fr)}
 .hero .more-control{display:none}
 .hero .car-playground{height:244px;grid-template-rows:minmax(0,1fr) 82px 20px}
 .hero .play-control{height:38px;min-height:38px}
}

.hero .play-control{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.hero .play-control svg{width:21px;height:21px;flex-shrink:0}
.hero .play-control .control-label{display:block;font-size:8px;line-height:10px;letter-spacing:0;white-space:nowrap}
@media(min-width:701px){.hero .play-console{width:250px;max-width:250px;height:86px}.hero .play-control{height:39px;min-height:39px}.hero .car-help{width:250px;bottom:95px}}

/* Light, compact controls keep the car visible behind the interface. */
.hero .play-console{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
.hero .play-control{gap:1px;background:transparent;text-shadow:0 1px 3px #000;color:#f0e4d3}
.hero .play-control svg{width:17px;height:17px;filter:drop-shadow(0 1px 2px #0009)}
.hero .play-control .control-label{font-size:8px;line-height:10px}
.hero .play-control:hover,.hero .play-control:focus-visible{background:#181815a6}
@media(min-width:701px){
 .hero .play-console{width:210px;max-width:210px;height:66px;bottom:4px;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
 .hero .play-controls{padding:0;gap:0}
 .hero .play-control{height:32px;min-height:32px}
 .hero .car-help{width:210px;bottom:71px;padding:2px 0;background:transparent;font-size:9px;text-shadow:0 1px 4px #000}
}

/* Individual translucent keys preserve contrast without a solid panel. */
.hero .play-control{background:rgba(16,18,17,.58);border:1px solid rgba(245,225,194,.13);border-radius:5px;box-sizing:border-box;text-shadow:0 1px 2px #000;color:#f5eadb}
.hero .play-control svg{width:17.25px;height:17.25px}
.hero .play-control:hover,.hero .play-control:focus-visible{background:rgba(16,18,17,.82);border-color:rgba(255,180,128,.55)}
.hero .play-control[aria-pressed=true]{background:rgba(77,43,23,.78);border-color:rgba(255,180,128,.48);color:#ffcfaa}
@media(min-width:701px){.hero .play-controls{gap:3px;padding:0}.hero .play-control{height:31px;min-height:31px}.hero .play-console{height:65px}}

.hero .car-help{background:rgba(16,18,17,.58);border:1px solid rgba(245,225,194,.13);border-radius:5px;box-sizing:border-box;color:#f5eadb;text-shadow:0 1px 2px #000}
@media(min-width:701px){.hero .car-help{background:rgba(16,18,17,.58);padding:3px 5px}}

/* Soft condensation from the rear exhaust while the engine runs. */
.hero .exhaust{fill:#e6ddd0;filter:blur(.8px);pointer-events:none}
.hero.is-engine-on .exhaust-puff,.hero .is-engine-on .exhaust-puff{animation:workshop-exhaust 2.8s ease-out infinite}
.hero .is-engine-on .exhaust-puff:nth-child(2){animation-delay:.9s}
.hero .is-engine-on .exhaust-puff:nth-child(3){animation-delay:1.8s}
@keyframes workshop-exhaust{0%{opacity:0;transform:translate(0,0) scale(.5)}18%{opacity:.34}55%{opacity:.18}100%{opacity:0;transform:translate(48px,-19px) scale(2.7)}}
@media(prefers-reduced-motion:reduce){.hero .is-engine-on .exhaust-puff{animation:none;opacity:0}.hero .is-engine-on .exhaust-puff:first-child{opacity:.18;transform:translate(8px,-3px) scale(1.2)}}
.hero .is-paused .exhaust-puff{animation-play-state:paused}
.tire-smoke{pointer-events:none;fill:#e5e0d7;filter:blur(2px);opacity:0}
.is-burnout .tire-smoke{opacity:1}
.tire-smoke ellipse{opacity:0;transform-origin:478px 244px}
.is-burnout .tire-smoke ellipse{animation:tire-cloud 1.4s ease-out infinite}
@keyframes tire-cloud{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.45}100%{opacity:0;transform:translate(65px,-30px) scale(3)}}
@media(prefers-reduced-motion:reduce){.is-burnout .tire-smoke ellipse{animation:none}.is-burnout .tire-smoke ellipse:first-child{opacity:.2}}

.hero .burnout-hit:focus{outline:none}
.hero .burnout-hit:focus-visible{outline:none;stroke:#ffb480;stroke-width:1.5;stroke-dasharray:3 3}
.hero .tire-smoke{filter:blur(2.5px);fill:#e8e4dd}
.hero .is-burnout .tire-smoke ellipse{animation:tire-cloud-full 1.9s ease-out infinite}
@keyframes tire-cloud-full{0%{opacity:0;transform:translate(0,0) scale(.55)}15%{opacity:.62}45%{opacity:.4}100%{opacity:0;transform:translate(82px,-39px) scale(3.8)}}
@media(prefers-reduced-motion:reduce){.hero .is-burnout .tire-smoke ellipse{animation:none}.hero .is-burnout .tire-smoke ellipse:first-child{opacity:.25}}

.hero .fog-lamp{transition:fill .3s ease,filter .3s ease}
.hero .is-lights-on .fog-lamp{fill:#ffd438;stroke:#ffe997;filter:drop-shadow(0 0 2px #ffd126) drop-shadow(0 0 5px #ffbb3580)}

/* Keep the obsolete overflow button out of the ten-action grid. */
.hero .play-control.more-control{display:none!important}
.hero .more-controls[hidden]{display:none}
@media(max-width:700px){
 .hero .car-playground{height:258px;grid-template-rows:minmax(0,1fr) 22px 94px}
 .hero .car-stage{grid-row:1}
 .hero .car-help{grid-row:2;align-self:center;justify-self:center;width:250px;max-width:100%;height:20px;line-height:14px;padding:2px 5px;margin:0;font-size:9px}
 .hero .play-console{grid-row:3;height:94px;width:250px}
 .hero .play-controls{gap:3px;padding:2px}
 .hero .play-control{height:44px;min-height:44px}
}

/* Keep the desktop scene within the same gutters as the logo and copy. */
@media(min-width:1100px){
 .hero .car-playground{right:0;width:min(700px,55%);max-width:none;top:clamp(54px,4vw,80px);bottom:0}
 .hero .hero-car{height:auto;max-height:none}
 .hero .car-stage{align-items:flex-end}
 .hero .play-console{right:0;bottom:4px}
 .hero .car-help{right:0;bottom:71px}
}
@media(min-width:1920px){.hero .hero-background{width:1920px;max-width:none;left:50%;right:auto;transform:translateX(-50%);mask-image:linear-gradient(90deg,transparent calc(50% - 640px),#000 calc(50% - 520px),#000 calc(50% + 520px),transparent calc(50% + 640px))}}
