:root{--ink:#132235;--muted:#607085;--line:#d7e0e8;--surface:#fff;--soft:#f4f7f9;--green:#16835f;--amber:#b56b0c;--red:#d84c4c;--cyan:#1684a7}
*{box-sizing:border-box}
body{margin:0;background:#edf2f5;color:var(--ink);font-family:Inter,system-ui,Arial,sans-serif}
.climb-app{width:min(1480px,calc(100% - 32px));margin:24px auto 60px}
.climb-header{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:28px 30px;border-radius:8px;background:#132235;color:#fff}
.climb-header h1{margin:4px 0 6px;font-size:clamp(1.7rem,3vw,2.6rem);font-weight:850;letter-spacing:0}
.climb-header p{margin:0;color:#c7d2dc}
.climb-kicker{color:#73d7bb;font-size:.74rem;font-weight:850;text-transform:uppercase;letter-spacing:.12em}
.course-panel,.rider-panel,.race-stage,.method-note{margin-top:18px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 12px 32px rgba(19,34,53,.07)}
.course-panel{padding:22px 24px}
.section-heading,.race-toolbar,.rider-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.section-heading>div:first-child,.race-toolbar>div:first-child{display:flex;align-items:center;gap:10px}
.section-heading h2,.race-toolbar h2{margin:0;font-size:1.12rem;font-weight:850}
.section-number{display:grid;width:31px;height:31px;place-items:center;border-radius:50%;background:#e5f3ee;color:var(--green);font-size:.72rem;font-weight:900}
.elevation-badge{padding:7px 10px;border-radius:6px;background:#fff1de;color:#8d5208;font-weight:800}
.course-grid{display:grid;grid-template-columns:1fr 1fr minmax(160px,.45fr);gap:24px;margin-top:20px}
.control-field{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.course-name-field{grid-column:1/-1;grid-template-columns:1fr}
.course-name-field input{grid-column:1/-1;max-width:620px}
.control-field span,.rider-controls label>span,.performance-control>span{color:var(--muted);font-size:.78rem;font-weight:750}
.control-field strong{color:var(--ink)}
.control-field input{grid-column:1/-1;width:100%;accent-color:var(--green)}
.compact-field{align-content:start}
.compact-field select{grid-column:1/-1}
.riders-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rider-panel{padding:22px;border-top:5px solid var(--rider)}
.rider-a{--rider:#d84c4c;--rider-soft:#fff0f0}.rider-b{--rider:#1684a7;--rider-soft:#eaf7fb}
.rider-swatch{width:15px;height:15px;border-radius:50%;background:var(--rider)}
.rider-name{width:min(260px,70%);border:0;border-bottom:1px solid transparent;background:transparent;color:var(--ink);font-size:1.05rem;font-weight:850}
.rider-name:focus{outline:0;border-color:var(--rider)}
.rider-rank{display:grid;width:31px;height:31px;place-items:center;border-radius:50%;background:var(--rider-soft);color:var(--rider);font-weight:900}
.rider-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.rider-controls label,.performance-control{display:grid;gap:6px}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;margin-top:16px;padding:3px;border-radius:7px;background:#e8edf1}
.mode-switch button{min-height:38px;border:0;border-radius:5px;background:transparent;color:#556578;font-weight:800}
.mode-switch button.active{background:#fff;color:var(--rider);box-shadow:0 2px 8px rgba(19,34,53,.1)}
.performance-control{margin-top:12px}
.rider-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.rider-metrics div{min-width:0;padding:10px;border-radius:6px;background:var(--rider-soft)}
.rider-metrics span{display:block;color:var(--muted);font-size:.68rem;text-transform:uppercase}
.rider-metrics strong{display:block;margin-top:2px;color:var(--rider);font-size:.96rem;white-space:nowrap}
.race-stage{overflow:hidden;background:#111c29;color:#fff}
.race-toolbar{padding:18px 22px;border-bottom:1px solid #334355}
.race-toolbar .section-number{background:#244358;color:#8fe1c9}
.race-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.share-status{min-width:86px;color:#8fe1c9;font-size:.78rem;font-weight:800}
.share-link-panel{padding:14px 22px;border-bottom:1px solid #334355;background:#172535}
.share-link-panel[hidden]{display:none}
.share-link-panel label{display:block;margin-bottom:7px;color:#c8d5df;font-size:.78rem;font-weight:800}
.share-link-panel input{font-size:.82rem}
.share-link-panel .btn{white-space:nowrap}
.race-canvas-wrap{position:relative;width:100%;aspect-ratio:16/6;min-height:310px;background:#bfe0eb}
#raceCanvas{display:block;width:100%;height:100%}
.countdown,.winner-banner{position:absolute;inset:0;display:none;place-items:center;text-align:center;pointer-events:none}
.countdown.show{display:grid;color:#fff;font-size:clamp(4rem,12vw,9rem);font-weight:950;text-shadow:0 4px 18px #000}
.winner-banner.show{display:grid;align-content:center;background:rgba(9,20,31,.76);color:#fff}
.winner-banner strong{font-size:clamp(1.8rem,5vw,4.5rem)}
.winner-banner span{font-size:1rem;color:#cce9df}
.live-race-grid{display:grid;grid-template-columns:1fr .7fr 1fr;gap:1px;background:#334355}
.live-rider,.race-clock{padding:16px 20px;background:#172535}
.live-rider>span,.race-clock>span{display:block;color:#9eafbd;font-size:.7rem;font-weight:800;text-transform:uppercase}
.live-rider strong,.race-clock strong{display:block;margin:3px 0;font-size:1.4rem}
.live-rider small,.race-clock small{color:#aebbc6}
.live-a strong{color:#ff7b7b}.live-b{text-align:right}.live-b strong{color:#56c3e5}.race-clock{text-align:center}
.final-results{padding:22px;background:#fff;color:var(--ink)}
.final-results[hidden]{display:none}
.final-results-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}
.result-kicker{color:var(--green);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.final-results h3{margin:3px 0 0;font-size:1.18rem;font-weight:850}
.result-winner{color:var(--green);font-size:1.15rem}
.result-gaps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.result-gaps>div{padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:#f6f8fa}
.result-gaps span,.result-gaps small{display:block;color:var(--muted);font-size:.7rem}
.result-gaps span{font-weight:800;text-transform:uppercase}
.result-gaps strong{display:block;margin:3px 0;color:var(--ink);font-size:1.5rem}
.result-table{width:100%;border-collapse:collapse}
.result-table th,.result-table td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left}
.result-table th{color:var(--muted);font-size:.7rem;text-transform:uppercase}
.result-table td{font-weight:750}
.place-badge{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;font-weight:900}
.place-badge.first{background:#fff0c7;color:#8b5b00}.place-badge.second{background:#e7edf1;color:#526170}
.method-note{padding:24px 26px;border-left:5px solid var(--amber)}
.method-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.method-unlock{min-height:auto;margin:0;padding:9px 12px 9px 2.8rem;border:1px solid var(--line);border-radius:6px;background:#f6f8fa}
.method-unlock label{color:var(--ink);font-size:.78rem;font-weight:800}
.method-unlock .form-check-input:checked{border-color:var(--green);background-color:var(--green)}
.method-kicker{color:#9b5b09;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.method-note h2{margin:4px 0 7px;font-size:1.25rem;font-weight:850}
.method-note p{margin:9px 0 0;color:var(--muted);font-size:.88rem;line-height:1.6}
.method-intro{max-width:960px}
.method-values{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}
.method-values>label{padding:13px 14px;border:1px solid var(--line);border-radius:6px;background:#f6f8fa}
.method-values span{display:block;color:var(--muted);font-size:.68rem;font-weight:750;text-transform:uppercase}
.physics-input{display:flex;align-items:center;gap:6px;margin-top:5px}
.physics-input input{width:100%;min-width:0;border:1px solid #b9c5cf;border-radius:5px;background:#fff;color:var(--ink);font-weight:800;padding:6px 7px}
.physics-input input:disabled{border-color:transparent;background:transparent;color:#536376;opacity:1;padding-left:0}
.physics-input b{color:var(--muted);font-size:.72rem;white-space:nowrap}
.method-note.is-unlocked{border-left-color:var(--green)}
.method-formula{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:6px;background:#132235;color:#fff}
.method-formula code{color:#8fe1c9;font-size:.86rem}
.seo-guide,.science-source,.sim-faq{margin-top:18px;padding:25px 26px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 12px 32px rgba(19,34,53,.07)}
.seo-guide h2,.science-source h2,.sim-faq h2{margin:4px 0 10px;font-size:1.3rem;font-weight:850}
.seo-guide>p,.science-source p{max-width:1040px;color:var(--muted);line-height:1.65}
.seo-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.seo-guide-grid article{padding:17px;border:1px solid var(--line);border-radius:6px;background:#f6f8fa}
.seo-guide-grid h3{margin:0 0 7px;font-size:.98rem;font-weight:850}
.seo-guide-grid p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.55}
.science-source{border-left:5px solid var(--cyan)}
.science-source a,.related-tools a{color:#176b8b;font-weight:800;text-decoration:none}.science-source a:hover,.related-tools a:hover{text-decoration:underline}
.faq-list{margin-top:16px;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;padding:15px 2px;color:var(--ink);font-weight:800}
.faq-list details p{margin:0;padding:0 2px 16px;color:var(--muted);line-height:1.6}
.related-tools{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;padding:14px 16px;border-radius:6px;background:#edf6f3}
@media(max-width:1000px){.method-values{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.seo-guide-grid{grid-template-columns:1fr}.climb-app{width:min(100% - 20px,720px);margin-top:12px}.climb-header{align-items:start;padding:22px}.course-grid,.riders-grid{grid-template-columns:1fr}.rider-controls{grid-template-columns:1fr 1fr}.rider-metrics{grid-template-columns:1fr 1fr}.race-toolbar{align-items:flex-start;flex-direction:column}.race-canvas-wrap{aspect-ratio:5/4;min-height:350px}.live-race-grid{grid-template-columns:1fr 1fr}.race-clock{grid-column:1/-1;grid-row:1}.live-b{text-align:right}.method-head{align-items:flex-start;flex-direction:column}.final-results-head{align-items:flex-start;flex-direction:column}.result-gaps{grid-template-columns:1fr}.method-values{grid-template-columns:1fr 1fr}.method-formula{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-width:480px){.climb-header{display:block}.climb-header .btn{margin-top:16px}.rider-controls{grid-template-columns:1fr}.race-actions .btn{flex:1}.live-rider,.race-clock{padding:13px}.live-rider strong,.race-clock strong{font-size:1.12rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.winner-banner,.countdown{transition:none!important}}