:root{font-family:ui-rounded,Trebuchet MS,system-ui,sans-serif;color:#264c50;background:#f6faf7;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:280px;padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px,env(safe-area-inset-left))}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}.toolbar{max-width:1220px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 0}.brand{font-size:12px;font-weight:800;letter-spacing:.16em}.brand span{color:#d79430;margin-left:6px}.control{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 18px;border:1px solid #d6e4dc;background:#fff;border-radius:18px;color:inherit;text-decoration:none;font-size:15px;font-weight:700;box-shadow:0 3px #e2eae4}.home>span:first-child{font-size:28px;line-height:24px}.sound-icon{font-size:24px;line-height:24px}.sound[aria-pressed=true]{background:#e4ece8}main{max-width:1220px;margin:auto}.intro{text-align:center;padding:22px 0 28px}.eyebrow{color:#557b6a;font-size:11px;font-weight:800;letter-spacing:.2em}h1{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.045em;margin:12px 0 10px;line-height:1.1}.intro p{margin:0;font-size:18px;color:#647e79}.playground{position:relative;isolation:isolate;padding:32px;border-radius:38px;background:#e5f2ee;border:1px solid #d5e8e0;overflow:hidden}.playground:after{content:"";position:absolute;z-index:-1;width:120%;height:110px;background:#d7e9da;border-radius:50% 50% 0 0;bottom:-65px;left:-10%}.cloud{position:absolute;z-index:-1;height:32px;width:140px;border-radius:50px;background:#ffffff80}.cloud-one{top:12px;left:7%}.cloud-two{bottom:12px;right:5%;width:210px}.vehicles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.vehicle{position:relative;min-width:0;border:2px solid #fff;border-radius:26px;padding:6px 10px 20px;background:#fffcf6;box-shadow:0 6px #c5dcd3;transition:border-color .12s,background-color .12s;-webkit-user-select:none;user-select:none}.vehicle:nth-child(4n+2){background:#f4f9ff}.vehicle:nth-child(4n+3){background:#fff8f0}.vehicle:nth-child(4n){background:#fff3ef}.vehicle-art{display:block;position:relative;width:100%;aspect-ratio:4 / 3;transform-origin:50% 85%}.vehicle img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.vehicle-name{display:block;font-size:16px;font-weight:800;padding-right:8px}.tap-note{position:absolute;right:12px;top:12px;display:grid;place-items:center;color:#537c70;background:#ffffffbc;border-radius:50%;width:27px;height:27px;font-size:16px}.vehicle.reacting{border-color:#438f7e;background:#e3f5dd}.vehicle.reacting .tap-note{background:#267d80;color:#fff}.lights{position:absolute;opacity:0;pointer-events:none;width:16%;height:9%;border-radius:50%;background:radial-gradient(ellipse,#fff7bb 10%,#ffd96bd9 45%,transparent 75%);filter:blur(2px)}.vehicle-police .lights{left:42%;top:29%}.vehicle-ambulance .lights{left:59%;top:26%}.vehicle-fire-truck .lights{left:64%;top:27%}button:focus-visible,a:focus-visible{outline:4px solid #276f78;outline-offset:5px}@media(hover:hover){.vehicle:hover{border-color:#91baac}.control:hover{background:#eef5f0}}footer{text-align:center;padding:25px 4px 20px;font-size:12px;color:#5f7770}.play-note{font-size:14px}.play-note>span{color:#bd8a2e;margin-right:6px}#audio-status:empty{display:none}#offline{margin:12px 0 0}@media(max-width:850px){.vehicles{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.playground{max-width:640px;margin:auto}}@media(max-width:480px){.toolbar{padding:16px 0}.brand{display:none}.intro{padding:18px 0 24px}.intro p{font-size:16px}.playground{padding:16px 12px 22px;border-radius:26px}.vehicles{gap:16px 12px}.vehicle{border-radius:20px;padding:4px 3px 16px}.vehicle-name{font-size:13px;padding:0}.tap-note{top:8px;right:8px;width:22px;height:22px;font-size:13px}.control{font-size:14px;padding:8px 14px}.play-note{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
