*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}:root{--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", "Fira Code", "Menlo", monospace;--bg: #f5f5f7;--bg-elevated: #ffffff;--surface: #ffffff;--surface-2: #f5f5f7;--surface-3: #e8e8ed;--border: rgba(0, 0, 0, .08);--border-strong: rgba(0, 0, 0, .16);--separator: rgba(0, 0, 0, .06);--text: #1d1d1f;--text-secondary: #6e6e73;--text-tertiary: #aeaeb2;--text-on-accent: #ffffff;--accent: #34a853;--accent-2: #1a8a3a;--accent-light: #e6f4ea;--danger: #ff3b30;--danger-light: #fff1f0;--warning: #ff9500;--warning-light: #fff8ec;--success: #34c759;--success-light: #edfaf1;--info: #007aff;--info-light: #f0f6ff;--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--radius-xl: 22px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0,0,0,.04);--shadow-sm: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);--shadow: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);--shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);--shadow-xl: 0 20px 60px rgba(0,0,0,.16), 0 4px 12px rgba(0,0,0,.08);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--ease: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .15s;--duration: .25s;--max-w: 680px;--max-w-wide: 960px;--header-h: 52px;--header-bg: rgba(255,255,255,.82);--overlay-bg: rgba(0,0,0,.4);--map-land: #d5e8c4;--map-border: #a8c89a;--map-water: #cce5f5;--map-route: rgba(200,60,0,.55);--grade-inactive: #d0d0cc;--chip-animal-bg: #f0e8f0;--chip-animal-text: #6a2d6a;--chart-grid-outer: rgba(0,0,0,.03);--chart-data-fill: rgba(0,129,58,.14);--chart-data-stroke: #1a8a3a}@media(prefers-color-scheme:dark){:root{--bg: #000000;--bg-elevated: #1c1c1e;--surface: #1c1c1e;--surface-2: #2c2c2e;--surface-3: #3a3a3c;--border: rgba(255,255,255,.1);--border-strong: rgba(255,255,255,.18);--separator: rgba(255,255,255,.06);--text: #f5f5f7;--text-secondary: #98989d;--text-tertiary: #636366;--accent: #30d158;--accent-2: #25a244;--accent-light: #0d2b16;--danger: #ff453a;--danger-light: #2a0f0e;--warning: #ff9f0a;--warning-light: #2a1e00;--success: #30d158;--success-light: #0d2b16;--info: #0a84ff;--info-light: #001535;--shadow-xs: 0 1px 2px rgba(0,0,0,.4);--shadow-sm: 0 2px 8px rgba(0,0,0,.5);--shadow: 0 4px 16px rgba(0,0,0,.6);--shadow-lg: 0 8px 32px rgba(0,0,0,.7);--shadow-xl: 0 20px 60px rgba(0,0,0,.8);--header-bg: rgba(28,28,30,.85);--overlay-bg: rgba(0,0,0,.6);--map-land: #1e2d1c;--map-border: #2e4030;--map-water: #0e2030;--map-route: rgba(255,100,50,.65);--grade-inactive: #3a3a3c;--chip-animal-bg: #271727;--chip-animal-text: #c898c8;--chart-grid-outer: rgba(255,255,255,.04);--chart-data-fill: rgba(48,209,88,.18);--chart-data-stroke: #30d158}}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;min-height:100dvh;overflow-x:hidden}#root{display:flex;flex-direction:column;min-height:100dvh}h1,h2,h3,h4,h5,h6{font-family:var(--font);letter-spacing:-.022em;line-height:1.2}a{color:var(--accent);text-decoration:none;transition:opacity var(--duration-fast) var(--ease)}a:hover{opacity:.75}img{max-width:100%;display:block}button,input,select,textarea{font-family:var(--font);font-size:1rem}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.page-wrap{flex:1;width:100%;max-width:var(--max-w);margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-16)}.page-wrap--wide{max-width:var(--max-w-wide)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:var(--radius-full)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:639px){nav[aria-label="Main navigation"]{display:none!important}}@media(min-width:640px){.mobile-only,[aria-label="Open menu"]{display:none!important}}