:root { color-scheme: dark; --bg: #141110; --ink: #dfd3bf; --orange: #ff742e; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
.world { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 50% 60%,#4a2d1b22,transparent 58%); }
h1 { margin: 0; position: absolute; top: 1svh; left: 0; right: 0; z-index: 0; text-align: center; font: 500 clamp(140px,22vw,330px)/1.2 'Manrope',Arial,sans-serif; letter-spacing: -.075em; color: #8c7b68; pointer-events: none; }
.rider-stage { position: absolute; top: 53%; left: 50%; z-index: 1; transform: translate(-50%,-50%); width: min(1280px,110vw); height: min(90svh,900px); border: 0; padding: 0; background: none; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rider-stage:focus-visible { outline: 1px solid var(--orange); outline-offset: -30px; }
.rider-float { display: block; position: absolute; inset: 0; animation: rider-bob 1.3s ease-in-out infinite; filter: drop-shadow(0 18px 15px #0005); }
.rider-image,.rider-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rider-canvas { opacity: 0; }
.renderer-ready .rider-canvas { opacity: 1; }
.renderer-ready .rider-image { visibility: hidden; }
.spark-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.asset-notice { position: absolute; left: 10%; right: 10%; top: 45%; padding: 20px; text-align: center; font: 13px/1.8 'Manrope',Arial,sans-serif; color: var(--ink); }
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after { animation: none !important; }
@keyframes rider-bob { 0%,100% { transform: translateY(0) rotate(-.3deg); } 50% { transform: translateY(-7px) rotate(.4deg); } }
@media (max-width:760px) { h1 { top: 5svh; font-size: clamp(120px,35vw,230px); } .rider-stage { top: 54%; width: 170vw; height: 72svh; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; } }
