@layer base,components,utilities;@layer base{:root{--color-bg: #0a0c0f;--color-surface: #111318;--color-surface-2: #181c23;--color-surface-3: #1e2330;--color-border: #232a35;--color-border-subtle:#1a2028;--color-text: #e8edf4;--color-text-2: #a0aab8;--color-text-3: #606a7a;--color-accent: #3b82f6;--color-accent-hover: #2563eb;--color-accent-muted: color-mix(in srgb, #3b82f6 12%, transparent);--color-green: #22c55e;--color-green-muted: color-mix(in srgb, #22c55e 12%, transparent);--color-red: #ef4444;--color-red-muted: color-mix(in srgb, #ef4444 12%, transparent);--color-amber: #f59e0b;--color-amber-muted: color-mix(in srgb, #f59e0b 12%, transparent);--bg: var(--color-bg);--bg-2: var(--color-surface-2);--surface: var(--color-surface);--surface-2: var(--color-surface-3);--border: var(--color-border);--text: var(--color-text);--muted: var(--color-text-2);--accent: var(--color-accent);--accent-2: var(--color-accent);--green: var(--color-green);--amber: var(--color-amber);--red: var(--color-red);--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;--text-xs: clamp(.688rem, .65rem + .19vw, .75rem);--text-sm: clamp(.8rem, .77rem + .15vw, .875rem);--text-base: clamp(.875rem, .84rem + .18vw, 1rem);--text-lg: clamp(1rem, .95rem + .25vw, 1.125rem);--text-xl: clamp(1.125rem, 1.05rem + .38vw, 1.375rem);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--radius: .75rem;--radius-sm: .5rem;--radius-lg: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0,0,0,.35);--shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.25);--ease-out: cubic-bezier(.16,1,.3,1);--dur-fast: .12s;--dur-norm: .2s;--maxw: 1040px;--topbar-h: 56px;--bottom-nav-h: 64px;color-scheme:dark}@media (prefers-color-scheme: light){:root{--color-bg: #f5f6f8;--color-surface: #ffffff;--color-surface-2: #f0f2f5;--color-surface-3: #e8eaee;--color-border: #e2e5ea;--color-border-subtle:#eef0f3;--color-text: #111318;--color-text-2: #4a5568;--color-text-3: #9aa3af;color-scheme:light}}*,*:before,*:after{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{height:100%}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-base);line-height:1.6}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-accent-hover)}button{font-family:inherit}code{font-family:var(--font-mono);font-size:.88em;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:1px 5px}}@layer components{.app{min-height:100%;display:flex;flex-direction:column}.topbar{position:sticky;inset-block-start:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:0 var(--space-5);height:var(--topbar-h);background:color-mix(in srgb,var(--color-surface) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block-end:1px solid var(--color-border);flex-shrink:0}.brand{font-weight:800;font-size:var(--text-lg);letter-spacing:-.03em;color:var(--color-text);display:flex;align-items:center;gap:6px}.brand span{color:var(--color-accent)}.nav-desktop{display:none;gap:var(--space-1)}.nav-desktop a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;color:var(--color-text-2);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}.nav-desktop a:hover{background:var(--color-surface-2);color:var(--color-text)}.nav-desktop a.active{background:var(--color-accent-muted);color:var(--color-accent)}@media (min-width: 700px){.nav-desktop{display:flex}.nav-bottom{display:none!important}.content{padding-bottom:var(--space-8)!important}}.content{flex:1;width:100%;max-width:var(--maxw);margin-inline:auto;padding:var(--space-5) var(--space-5) calc(var(--bottom-nav-h) + var(--space-8))}.nav-bottom{position:fixed;inset-block-end:0;inset-inline:0;z-index:20;display:flex;justify-content:space-around;background:color-mix(in srgb,var(--color-surface) 95%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block-start:1px solid var(--color-border);padding-block:var(--space-2);padding-bottom:max(var(--space-2),env(safe-area-inset-bottom))}.nav-bottom a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--color-text-3);font-size:10px;font-weight:500;padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-out);letter-spacing:.02em}.nav-bottom a.active{color:var(--color-accent)}.nav-bottom .ico{font-size:20px;line-height:1}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-4) var(--space-5);margin-block-end:var(--space-4);transition:border-color var(--dur-norm) var(--ease-out)}.card:has(>.route-card){padding:0}.route-card{cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.route-card:hover{transform:translateY(-2px);border-color:var(--color-accent)}h1.page{font-size:var(--text-xl);font-weight:700;margin:var(--space-1) 0 var(--space-5);letter-spacing:-.025em;color:var(--color-text)}.muted{color:var(--color-text-2)}.route-title{font-size:var(--text-lg);font-weight:700;margin:0}.row{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}.spacer{flex:1}.stat{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--color-text-2);font-size:var(--text-sm)}.pill{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:500;padding:2px 10px;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-2);background:var(--color-surface-2);white-space:nowrap;line-height:1.6}.pill.green{color:var(--color-green);border-color:color-mix(in srgb,var(--color-green) 35%,transparent);background:var(--color-green-muted)}.pill.amber{color:var(--color-amber);border-color:color-mix(in srgb,var(--color-amber) 35%,transparent);background:var(--color-amber-muted)}.pill.accent{color:var(--color-accent);border-color:color-mix(in srgb,var(--color-accent) 35%,transparent);background:var(--color-accent-muted)}.pill.free{color:var(--color-green);border-color:color-mix(in srgb,var(--color-green) 35%,transparent);background:var(--color-green-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-5);font-family:var(--font-sans);font-size:var(--text-base);font-weight:600;cursor:pointer;min-height:44px;width:100%;background:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);outline-offset:2px}.btn:focus-visible{outline:2px solid var(--color-accent)}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:hover:not(:disabled){background:var(--color-accent-hover)}.btn.secondary{background:transparent;border-color:var(--color-border);color:var(--color-text)}.btn.secondary:hover:not(:disabled){background:var(--color-surface-2);border-color:var(--color-surface-3)}.btn.ghost{background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text)}.btn.ghost:hover:not(:disabled){background:var(--color-surface-3)}.btn.auto{width:auto}input,select,textarea{width:100%;padding:var(--space-3) var(--space-4);margin-block:var(--space-1);border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-base);outline-offset:0;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 20%,transparent)}input::placeholder,textarea::placeholder{color:var(--color-text-3)}label{font-size:var(--text-sm);color:var(--color-text-2);font-weight:500}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23606a7a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-inline-end:var(--space-8);cursor:pointer}.error{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);background:var(--color-red-muted);border:1px solid color-mix(in srgb,var(--color-red) 30%,transparent);color:var(--color-red);font-size:var(--text-sm);margin-block-end:var(--space-4)}.center{display:flex;align-items:center;justify-content:center;min-height:50vh}.empty{text-align:center;color:var(--color-text-2);padding:var(--space-8) var(--space-5);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.spinner{width:28px;height:28px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width: 560px){.grid{grid-template-columns:1fr 1fr}}@media (min-width: 900px){.grid{grid-template-columns:repeat(3,1fr)}}.player-wrap{background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--color-border)}.player-stage{position:relative;width:100%;background:#000}.player-stage video{width:100%;display:block;max-height:60vh;object-fit:contain}.player-split video{max-height:30vh}.hud{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:#000;color:#fff;font-variant-numeric:tabular-nums;font-size:var(--text-sm)}.hud .marker{color:var(--color-amber);display:inline-flex;gap:6px;align-items:center}.scrub{width:100%;height:4px;cursor:pointer;accent-color:var(--color-accent);background:var(--color-surface-3);border:none;outline:none;padding:0;display:block}.view-btns{display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-surface);border-top:1px solid var(--color-border);flex-wrap:wrap}.view-btns button{min-height:36px;padding:var(--space-1) var(--space-3);font-size:var(--text-sm)}}@layer utilities{.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:linear-gradient(180deg,var(--bg),var(--bg-2));color:var(--text);-webkit-font-smoothing:antialiased}a{color:var(--accent-2);text-decoration:none}button{font-family:inherit}.app{min-height:100%;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#0b1f3ad9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.brand{font-weight:800;font-size:18px;letter-spacing:-.3px}.brand span{color:var(--accent-2)}.nav-desktop{display:none;gap:8px}.content{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:20px 20px 92px}.nav-bottom{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:space-around;background:#0f2748f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:8px 0 max(8px,env(safe-area-inset-bottom))}.nav-bottom a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:11px;padding:4px 16px;border-radius:10px}.nav-bottom a.active{color:var(--accent-2)}.nav-bottom .ico{font-size:20px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px}.route-card{cursor:pointer;transition:transform .08s ease,border-color .08s ease}.route-card:hover{transform:translateY(-2px);border-color:var(--accent)}.route-title{font-size:17px;font-weight:700;margin:0}.muted{color:var(--muted)}.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.spacer{flex:1}.stat{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:13px}.pill{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}.pill.green{color:var(--green);border-color:var(--green)}.pill.amber{color:var(--amber);border-color:var(--amber)}.pill.accent{color:var(--accent-2);border-color:var(--accent)}.pill.free{color:var(--green);border-color:var(--green)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;padding:13px 18px;font-size:15px;font-weight:600;cursor:pointer;min-height:48px;width:100%;background:var(--accent);color:#fff}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.secondary{background:transparent;border:1px solid var(--border);color:var(--text)}.btn.ghost{background:var(--surface-2)}.btn.auto{width:auto}input,select{width:100%;padding:12px 14px;margin:6px 0;border-radius:10px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);font-size:15px}label{font-size:13px;color:var(--muted)}.password-field{position:relative}.password-field input{padding-right:46px;display:block}.password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:none;border:none;border-radius:8px;color:var(--muted);cursor:pointer}.password-toggle:hover{color:var(--text);background:var(--surface-2)}.password-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.error{color:var(--red);font-size:14px;margin:8px 0}.center{display:flex;align-items:center;justify-content:center;min-height:50vh}.empty{text-align:center;color:var(--muted);padding:48px 16px}h1.page{font-size:24px;margin:4px 0 18px}.spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent-2);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.grid{display:grid;grid-template-columns:1fr;gap:14px}.player-wrap{background:#000;border-radius:var(--radius);overflow:hidden}.player-stage{position:relative;width:100%;background:#000}.player-stage video{width:100%;display:block;max-height:60vh;object-fit:contain}.player-split video{max-height:30vh}.player-all{display:grid;grid-template-columns:1fr;gap:2px}.player-all .pane-front{grid-column:1 / -1}.player-all video{max-height:42vh}.player-all .pane-map{min-height:220px;height:100%}.player-all .pane-map .leaflet-container{height:100%;border-radius:0}@media (min-width: 760px){.player-all{grid-template-columns:1fr 1fr}.player-all video{max-height:48vh}.player-all .pane-rear{max-height:32vh}.player-all .pane-map{min-height:32vh}}.player-controls{display:flex;align-items:center;gap:10px;padding:6px 12px 12px;flex-wrap:wrap}.follow-toggle{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:13px;cursor:pointer}.follow-toggle input{width:auto;margin:0}.route-marker{background:none;border:none}.route-marker-arrow{width:28px;height:28px;transform-origin:50% 50%;transition:transform .12s linear;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}.hud{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#000;color:#fff;font-variant-numeric:tabular-nums}.hud .marker{color:var(--amber);display:inline-flex;gap:6px;align-items:center}.scrub{width:100%}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1;min-width:64px;padding:9px;border-radius:10px;cursor:pointer;background:var(--surface-2);color:var(--text);border:1px solid var(--border);font-weight:600}.seg button.active{background:var(--accent);border-color:var(--accent)}.step-bar{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}.step-bar .step{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface)}.step-bar .step.active{color:var(--text);border-color:var(--accent)}.step-bar .step.done{color:var(--green);border-color:var(--green)}.step-bar .step-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--surface-2);font-size:11px;font-weight:700}.step-bar .step.active .step-num{background:var(--accent);color:#fff}.radio-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;cursor:pointer;border-top:1px solid var(--border)}.radio-row:first-of-type{border-top:none}.radio-row input{width:auto;margin:4px 0 0}.clip-list{list-style:none;margin:0;padding:0}.clip-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}.clip-index{flex:0 0 24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.clip-name{flex:1;font-size:13px;word-break:break-all}.clip-actions{display:flex;gap:4px}.clip-actions button{min-height:30px;padding:2px 10px}.clip-gap{font-size:12px;color:var(--muted);padding:4px 0 4px 34px}.clip-gap.large{color:var(--amber)}.next-banner{background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;margin-bottom:16px}.next-banner .label{font-size:12px;letter-spacing:1px;color:var(--muted)}.next-banner .instruction{font-size:24px;font-weight:700;margin:8px 0}.instr-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.instr-item.done{opacity:.45;text-decoration:line-through}.instr-item .ico{font-size:20px;width:28px;text-align:center}@media (min-width: 760px){.nav-desktop{display:flex}.nav-bottom{display:none}.content{padding:28px 24px 40px}.grid{grid-template-columns:1fr 1fr}.btn.auto{width:auto}.nav-desktop a{padding:8px 14px;border-radius:10px;color:var(--muted);font-weight:600}.nav-desktop a.active{color:var(--text);background:var(--surface)}}.leaflet-container{height:50vh;border-radius:var(--radius)}.landing{min-height:100vh;display:flex;flex-direction:column}.landing-hero{position:relative;padding:48px 24px 40px;overflow:hidden;color:#fff;background:radial-gradient(1200px 500px at 80% -10%,rgba(59,130,246,.35),transparent 60%),linear-gradient(160deg,#0b1f3a,#12325c 55%,#0a1830)}.landing-hero-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath d='M-20 340 C120 340 120 200 200 200 C280 200 280 60 420 60' fill='none' stroke='%233b82f6' stroke-width='2' stroke-opacity='0.25'/%3E%3Cpath d='M-20 380 C140 380 140 240 240 240 C340 240 340 100 460 100' fill='none' stroke='%2334d399' stroke-width='2' stroke-opacity='0.18'/%3E%3C/svg%3E");background-size:420px 420px;opacity:.9;pointer-events:none}.landing-hero-content{position:relative;max-width:560px;margin:0 auto}.landing-logo{display:block;border-radius:18px;box-shadow:0 8px 30px #0006}.landing-wordmark{font-size:clamp(2rem,6vw,2.75rem);font-weight:800;letter-spacing:-.03em;margin:16px 0 8px}.landing-wordmark span{color:#60a5fa}.landing-tagline{color:#cdd8e8;font-size:var(--text-lg);margin:0 0 16px;max-width:46ch}.landing-points{list-style:none;padding:0;margin:0;display:grid;gap:8px}.landing-points li{color:#e8edf4;font-size:var(--text-sm)}.landing-auth{flex:1;display:flex;justify-content:center;padding:28px 20px 48px}.landing-auth-inner{width:100%;max-width:400px}@media (min-width: 900px){.landing{flex-direction:row}.landing-hero{flex:1.1;display:flex;align-items:center;padding:64px}.landing-auth{flex:.9;align-items:center}}.tc-list{display:grid;grid-template-columns:1fr;gap:14px}@media (min-width: 640px){.tc-list{grid-template-columns:1fr 1fr}}@media (min-width: 960px){.tc-list{grid-template-columns:repeat(3,1fr)}}.tc-card{cursor:pointer;transition:transform .08s ease,border-color .08s ease}.tc-card:hover{transform:translateY(-2px);border-color:var(--accent)}.tc-card .tc-name{font-size:17px;font-weight:700;margin:0 0 2px}.tc-meta{color:var(--muted);font-size:13px}.tc-count{margin-top:10px}.instructor-byline{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border-radius:999px}.instructor-byline:hover .instructor-name{color:var(--accent-2)}.instructor-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--surface-2);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted)}.instructor-name{font-size:13px;font-weight:600;color:var(--text)}.verified-badge{color:var(--accent-2);font-size:13px}.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px}.toolbar input{margin:0}