:root{--bg-canvas: #FDFDFD;--bg-surface: #FFFFFF;--bg-elevated: #F9FAFB;--text-primary: #111827;--text-secondary: #4B5563;--text-muted: #9CA3AF;--border-soft: #F3F4F6;--border-strong: #E5E7EB;--accent-primary: #F97316;--accent-primary-hover: #EA580C;--accent-secondary: #0F766E;--success: #15803D;--warning: #B45309;--danger: #B91C1C;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 14px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .08)}.dark{--bg-canvas: #0F1115;--bg-surface: #1A1D24;--bg-elevated: #242830;--text-primary: #F3F4F6;--text-secondary: #9CA3AF;--text-muted: #6B7280;--border-soft: #2A2F3A;--border-strong: #3F4656;--accent-primary: #F97316;--accent-primary-hover: #FB923C;--accent-secondary: #2DD4BF}*{box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:var(--bg-canvas);color:var(--text-primary)}h1,h2,h3,h4,h5,h6,button{font-family:Outfit,sans-serif;letter-spacing:-.01em}.skip-link{position:absolute;left:8px;top:-48px;background:var(--accent-primary);color:#fff;padding:8px 12px;border-radius:var(--radius-sm);z-index:200}.skip-link:focus{top:8px}.focus-ring:focus-visible{outline:3px solid var(--accent-secondary);outline-offset:2px}.surface-card{background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.stat-chip{border:1px solid var(--border-strong);background:color-mix(in srgb,var(--bg-surface) 85%,var(--accent-primary) 15%);color:var(--text-secondary);border-radius:999px}.animate-progress{animation:progress-animation .5s ease-out forwards}@keyframes progress-animation{0%{width:0%}}.animate-slide-in{animation:slide-in-animation .5s cubic-bezier(.25,1,.5,1) forwards}@keyframes slide-in-animation{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .8s ease-out forwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.animate-fade-in-up{animation:fade-in-up .8s cubic-bezier(.16,1,.3,1) forwards}@keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.animate-pulse-subtle{animation:pulse-subtle 2s infinite cubic-bezier(.4,0,.6,1)}@keyframes pulse-subtle{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes confetti-fall{0%{transform:translateY(-10vh) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:0}}@keyframes drive-across{0%{transform:translate(-160px)}to{transform:translate(100vw)}}@keyframes landing-drive{0%{transform:translate(-240px)}to{transform:translate(100vw)}}@keyframes motorbike-drive{0%{transform:translate(-200px)}to{transform:translate(100vw)}}@keyframes trotro-bounce{0%,to{transform:translateY(0) rotate(.2deg)}20%{transform:translateY(-9px) rotate(-1deg)}45%{transform:translateY(3px) rotate(.6deg)}75%{transform:translateY(-5px) rotate(-.5deg)}}@keyframes car-wiggle{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(.5deg)}}@keyframes okada-rush{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}@keyframes walk-cycle{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes walk-leg-1{0%,to{transform:rotate(-20deg)}50%{transform:rotate(25deg)}}@keyframes walk-leg-2{0%,to{transform:rotate(25deg)}50%{transform:rotate(-20deg)}}@keyframes walk-arm-1{0%,to{transform:rotate(15deg)}50%{transform:rotate(-10deg)}}@keyframes walk-arm-2{0%,to{transform:rotate(-10deg)}50%{transform:rotate(15deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes wave{0%,to{transform:rotate(0)}50%{transform:rotate(-20deg)}}.capturing{padding:2rem!important;background-color:var(--bg-canvas)!important}.capturing>div{background-color:var(--bg-surface)!important;box-shadow:var(--shadow-sm)!important;border:1px solid var(--border-soft)!important}.capturing .animate-slide-in{animation:none!important;opacity:1!important;transform:none!important}.dark .road-line{stroke:#f3f4f633}
