*{box-sizing:border-box}
html{background:#fff;color:#111;color-scheme:light;height:100%;overflow:hidden;overscroll-behavior:none}
body{margin:0;position:fixed;inset:0;overflow:hidden;font-family:Arial,Helvetica,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:none}
button,a{touch-action:manipulation}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:1px solid #9a7100;outline-offset:5px}
header{position:fixed;z-index:5;top:max(15px,env(safe-area-inset-top));left:50%;transform:translateX(-50%)}
.brand{display:block;width:205px;height:70px}
.wordmark{position:relative;width:100%;height:100%;filter:brightness(0)}
.source-wordmark{position:absolute;width:100%;height:100%;object-fit:contain;padding:2% 6%;pointer-events:none}
.wordmark canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.ready canvas{opacity:1}
.ready .source-wordmark{visibility:hidden}
h1,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px}
main{position:absolute;inset:0;overflow:hidden;perspective:none}
.scene{position:absolute;left:50%;top:45%;width:min(100vw,150svh);aspect-ratio:1.5;transform:translate(-50%,-50%);user-select:none;-webkit-user-select:none}
.artwork{position:absolute;inset:0;transform-origin:50% 55%}
.car-render{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.door-interior,.door-panel,.door-outer,.brake-light,.front-lights{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.door-interior{opacity:0;clip-path:polygon(51.5% 48%,59.5% 41%,66% 44%,66% 61%,56.7% 69%,53.5% 64%)}
.door-panel{opacity:0;clip-path:polygon(65.2% 51.5%,65.6% 46.4%,68.1% 44.9%,70.1% 46.2%,73% 49%,75.9% 52.1%,78.5% 52.2%,78.1% 54.7%,77.1% 56.5%,78% 62%,77% 68.4%,75.8% 72.9%,72% 69%,67.1% 63.1%,65.2% 57%);transform-origin:65.6% 51.6%}
.brake-light{opacity:0;transition:opacity .09s ease-out}
.front-lights{opacity:0}
.brakes-on .brake-light{opacity:1}
.alarming .brake-light,.alarming .front-lights{animation:alarmBlink .44s steps(1) infinite}
.object-hit{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;touch-action:none;appearance:none;-webkit-appearance:none}
.body-hit{inset:0;clip-path:polygon(18% 55%,24% 50%,34% 40%,46% 27%,57% 26%,73% 33%,77% 50%,66% 57%,59% 74%,48% 86%,26% 83%,20% 70%)}
.door-hit{left:53%;top:43%;width:13.5%;height:26%;clip-path:polygon(0 44%,58% 0,100% 10%,100% 72%,24% 100%);z-index:2}
.door-open .door-hit{left:58%;top:43%;width:14%;height:26%;clip-path:polygon(15% 30%,70% 0,100% 28%,85% 100%,0 88%)}
.brake-hit{left:22%;top:59%;width:27%;height:23%;clip-path:polygon(2% 0,18% 19.2%,52% 42.1%,84% 52.5%,100% 37.7%,100% 56.2%,82% 71%,45% 59.1%,8% 34.7%,0% 14.8%);z-index:2}
#stars,#star-targets{position:absolute;left:32%;top:4%;width:40%;height:32%;pointer-events:none}
#star-targets{z-index:3}
.star-target{left:0;top:0;pointer-events:auto;clip-path:polygon(50% 0%,62% 34%,100% 38%,71% 62%,80% 100%,50% 79%,20% 100%,29% 62%,0% 38%,38% 34%)}
#loose-wheel{position:absolute;left:0;top:0;z-index:4;display:block;border:0;padding:0;background:transparent;touch-action:none;cursor:grab;will-change:transform;user-select:none;-webkit-user-select:none;isolation:isolate}
#loose-wheel img{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 2px 1.5px #0003)}
#loose-wheel.held{cursor:grabbing}
footer{position:fixed;z-index:5;bottom:max(24px,env(safe-area-inset-bottom));right:28px;pointer-events:none}
#reset{border:0;background:transparent;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;color:#aaa;pointer-events:auto;transition:color .2s}
#reset:hover{color:#111}
@keyframes alarmBlink{0%,50%{opacity:1}
25%,75%{opacity:0}
}
@media(max-width:600px){header{top:max(14px,env(safe-area-inset-top))}
.brand{width:175px;height:62px}
.scene{width:154vw;top:47%}
footer{right:16px;bottom:max(18px,env(safe-area-inset-bottom))}
}
@media(max-height:500px) and (orientation:landscape){.brand{width:150px;height:50px}
header{top:4px}
.scene{width:135svh;top:51%}
footer{bottom:8px}
}
@media(prefers-reduced-motion:reduce){.artwork,.door-panel{will-change:auto}
.brake-light{transition:none}
.alarming .brake-light,.alarming .front-lights{animation:none;opacity:1}
}

#camera-world{position:absolute;inset:0}

.door-outer{opacity:0;clip-path:polygon(55.7% 53.9%,57.7% 49.6%,61% 45.3%,64.7% 43.8%,65.6% 47.8%,65.5% 56%,63.8% 61.1%,59.2% 67.1%,57.6% 69.1%,56.7% 67.5%,56% 61%);transform-origin:65.6% 51.6%}

.door-moving .door-panel,.door-moving .door-outer{will-change:transform,opacity}

#universe{outline:none}

#universe:focus-visible{outline:1px solid #9a7100;outline-offset:-4px}

@media(prefers-reduced-motion:reduce){.door-moving .door-panel,.door-moving .door-outer{will-change:auto}
}
