:root{--ink:#1e293b;--muted:#526174;--line:#bac5d1;--panel:#f5f7fa;--accent:#1f4e79;--selected:#e2eef8;--warn:#853c0c;--radius:10px}
*{box-sizing:border-box}body{margin:0;background:white;color:var(--ink);font:16px/1.45 Arial,Helvetica,sans-serif}h1{font-size:1.65rem;margin:0 0 6px}h2{font-size:1.16rem;margin:0 0 12px;color:var(--accent)}h3{font-size:1rem;margin:14px 0 8px}p{margin:8px 0}button,input,select{font:inherit}button,select,input{min-height:44px;max-width:100%}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);padding:9px 12px}button:hover:not(:disabled){background:var(--panel)}button:disabled{cursor:default;color:#69778a;background:#f1f3f6}button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}:focus-visible{outline:3px solid #0b67bd;outline-offset:3px}input,select{width:100%;padding:9px 10px;border:1px solid #8796a8;border-radius:6px;color:var(--ink);background:white;min-width:0}input[aria-invalid=true]{border:2px solid #ad241b}label{display:block;font-weight:700;margin:12px 0 5px}.small,.hint{font-size:.875rem;color:var(--muted)}.hint{margin-top:5px}.error{font-size:.9rem;color:#a12219;margin-top:5px}.error:empty{display:none}.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.actions>*{flex:1}.full{width:100%}.card{border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-width:0;background:#fff}details{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}summary{cursor:pointer;font-weight:700;min-height:44px;display:list-item;padding:10px 2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:fixed;top:-100px;left:8px;z-index:20;background:white;padding:12px}.skip:focus{top:8px}[hidden]{display:none!important}
header{border-bottom:1px solid var(--line);background:white}.bar{max-width:1240px;margin:auto;padding:12px 20px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}.brand{font-weight:700;color:var(--accent)}.brand small{display:block;font-size:.8rem;color:var(--muted);font-weight:400}.utilities{display:flex;gap:8px;align-items:center}.utilities select{width:auto}nav{display:flex;gap:6px}nav button[aria-pressed=true]{background:var(--selected);border:2px solid var(--accent);font-weight:700}main{max-width:1240px;margin:auto;padding:22px 20px 40px}.intro{color:var(--muted);margin:0 0 18px}.layout{display:grid;grid-template-columns:minmax(255px,1fr) minmax(340px,1.55fr) minmax(260px,1fr);grid-template-areas:'setup drive results' 'advanced gears results';gap:16px;align-items:start}.drive{grid-area:drive}.results{grid-area:results}.setup{grid-area:setup}.gears{grid-area:gears}.advanced{grid-area:advanced}.metrics{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 12px;margin:0;font-variant-numeric:tabular-nums}.metrics dt{align-self:center}.metrics dd{font-weight:700;text-align:right;margin:0;align-self:center}.metrics.headline{grid-template-columns:1fr;gap:2px}.headline dd{text-align:left;font-size:1.6rem;margin-bottom:12px}.headline dt{font-size:.94rem}.notice{font-size:.9rem;padding:10px 0;border-top:1px solid var(--line);color:var(--warn)}.notice:empty{display:none}.selection{font-weight:700;text-align:center;margin:12px 0}.diagram{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:8px}.diagram svg{width:100%;height:auto;display:block}.diagram text{font:16px Arial;fill:var(--ink)}.gear-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}.gearbtn{padding:4px;min-width:44px;min-height:44px;border:1px solid #8494a8;border-radius:50%;font-size:.9rem}.gearbtn[aria-pressed=true]{border:3px solid var(--accent);background:var(--selected);font-weight:700}.shiftgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.gearlist{height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:6px;margin-top:10px;scrollbar-gutter:stable}.gearrow{width:100%;border:none;border-bottom:1px solid #d8dfe6;border-radius:0;display:grid;grid-template-columns:55px 67px 1fr 1fr;gap:8px;text-align:left;padding:10px 8px;font-size:.88rem;align-items:center;min-height:56px}.gearrow[aria-pressed=true]{background:var(--selected);box-shadow:inset 4px 0 var(--accent);font-weight:700}.gearrow small{display:block;font-size:.74rem;color:var(--muted)}.gearrow:focus-visible{outline-offset:-3px}.static-row{cursor:default}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.single{max-width:920px;margin:auto}.compare-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.compare-table th,.compare-table td{border-bottom:1px solid var(--line);padding:12px 8px;text-align:right}.compare-table th:first-child{text-align:left;font-weight:400;width:52%}.compare-table thead th:first-child{font-weight:700}.range-track{position:relative;height:18px;background:#edf0f4;border-radius:5px;margin:12px 0}.range-segment{position:absolute;height:100%;background:var(--accent);border-radius:5px}.range-scale{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted)}.range-caption{font-size:.88rem}.status{min-height:24px;margin:12px 0 0;color:var(--accent);font-size:.9rem}.status:empty{min-height:0;margin:0}dialog{color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:22px;width:min(760px,calc(100% - 24px));max-height:90dvh;overflow:auto}dialog::backdrop{background:#13223385}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-top h2{margin:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.form-span{grid-column:1/-1}.review{margin-top:28px;color:var(--muted);font-size:.9rem}.review li{margin:7px 0}.zoom-frame{margin-top:16px}.zoom-frame svg{min-height:260px}.zoom-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.zoom-tools button{min-width:48px}
@media(max-width:1050px){.layout{grid-template-columns:1fr 1.3fr;grid-template-areas:'setup drive' 'results gears' 'advanced gears'}.headline{grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important}.headline dd{font-size:1.1rem;text-align:right;margin:0}}
@media(max-width:720px){.bar{padding:12px;gap:10px}.brand{flex:1}.utilities{gap:5px}.utilities select{max-width:108px}nav{order:3;width:100%}nav button{flex:1;font-size:.9rem;padding:9px 6px}main{padding:18px 12px 32px}.layout{display:flex;flex-direction:column;gap:12px}.layout>.card{width:100%}.card{padding:13px}.compare-grid,.form-grid{grid-template-columns:1fr}.form-span{grid-column:auto}.gearrow{grid-template-columns:50px 58px 1fr 1fr;gap:5px;font-size:.82rem;padding:10px 7px}.compare-table{font-size:.88rem}.compare-table th,.compare-table td{padding:10px 4px}.compare-table th:first-child{width:45%}dialog{padding:16px}.shiftgrid button{font-size:.9rem}.headline dd{font-size:1.08rem}.gearlist{height:280px}.range-scale{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.cadence-guidance{margin:12px 0;padding:12px;border:1px solid #b77734;border-radius:7px;background:#fff8e8;color:#713800;font-size:.92rem}.cadence-guidance.strong{border:2px solid #a12d20;background:#fff2ef;color:#8a241b;font-weight:700}.cadence-guidance p{margin:3px 0}.scenario-selectors{margin:10px 0 16px}.scenario-selectors label{font-size:.9rem}.comparison-note{margin-top:14px}.cadence-guidance small{font-weight:400}.headline #cadenceResult{color:#616161}

/* v0.6.1: a single teaching flow with a compact setup bar. */
main{max-width:1120px}.layout{grid-template-columns:minmax(0,1.45fr) minmax(290px,1fr);grid-template-areas:'setup setup' 'drive results' 'conditions conditions' 'gears gears' 'advanced advanced';gap:18px}
.setup{background:#f5f7fa;border:0}.ride-toolbar{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:28px}.setup-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;align-content:start}.setup-choice label{grid-column:1/-1}.setup-choice button{width:auto}.ride-toolbar label{margin-top:0}.speed-choice{display:grid;grid-template-columns:minmax(110px,1fr) auto;gap:10px;align-items:end}.speed-choice button{width:auto;background:transparent;font-size:.86rem}.drive{border:0;padding:4px 0}.drive h2{margin-top:5px}.diagram{background:#f7f9fc;border:0}.results{background:#f5f8fc;border:0;padding:22px}.headline{display:grid!important;grid-template-columns:1fr!important;gap:2px!important}.headline dd{font-size:1.8rem!important;text-align:left!important;margin:0 0 15px!important}.headline dd small{display:block;font-weight:400;font-size:.82rem;color:var(--muted)}.why{font-size:1rem;margin:15px 0 18px;color:#1f4e79}.secondary-results{border-top:1px solid #cbd5e1;padding-top:15px;gap:8px;font-size:.9rem}.cadence-guidance{padding:9px;margin:10px 0;font-size:.9rem}.conditions{grid-area:conditions;border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 0 0}.conditions h2{font-size:1rem;margin-bottom:0}.conditions-fields{display:grid;grid-template-columns:1fr 2fr;gap:20px;max-width:760px}.conditions-fields label{font-size:.9rem}.conditions .hint{font-size:.82rem}.conditions .row{gap:20px}.gears,.advanced{border:0;padding:0}.gears>details,.advanced>details{margin-top:0}.advanced{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.selection{margin:10px 0;font-size:.95rem}.secondary-shifts button{font-size:.8rem;padding:6px}.secondary-shifts{gap:6px}#zoomDiagram{width:auto;font-size:.85rem;border:0;text-decoration:underline;padding-left:0}.gear-buttons{margin-bottom:8px}.single{max-width:1000px}.compare-grid{margin-bottom:20px}.compare-grid .card{background:#f5f7fa;border:0}.compare-grid h2{margin-bottom:9px}.compare-grid .actions>*{flex:0 0 auto}.single>section.card{margin-bottom:20px}.combined-scroll{overflow-x:auto;max-width:100%}.combined-table{width:100%;min-width:650px;border-collapse:collapse;font-size:.84rem;font-variant-numeric:tabular-nums}.combined-table th,.combined-table td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--line)}.combined-table thead{background:#eef3f8}.combined-table td:nth-child(4),.combined-table th:nth-child(4){border-left:2px solid var(--line)}.combined-table .chosen{background:#e2eef8;font-weight:700}.combined-table small{display:block;font-size:.75rem}.compare-table th:first-child{width:44%}.compare-table thead th{font-size:.88rem}.compare-table th,.compare-table td{padding:11px 8px}#compareConditions{margin-bottom:12px}
@media(max-width:720px){.layout{display:flex;gap:16px}.ride-toolbar{display:block}.speed-choice{margin-top:16px;grid-template-columns:1fr auto}.setup{padding:14px}.results{padding:18px}.drive{padding:0}.headline dd{font-size:1.6rem!important}.conditions-fields{grid-template-columns:1fr;gap:0}.conditions .row{gap:14px}.advanced{display:block!important}.compare-grid{gap:12px}.compare-grid .card{padding:14px}.scenario-selectors{display:block}.compare-table thead th{font-size:.78rem}.compare-table th:first-child{width:40%}.compare-table th,.compare-table td{padding:10px 4px}.conditions>h2{margin-bottom:0}.secondary-shifts button{font-size:.76rem}.bar{gap:10px}.brand small{font-size:.72rem}}

/* v0.7 additions preserve the existing teaching hierarchy. */
.speed-choice .slider-wrap{grid-column:1/-1}.slider-wrap input{padding:0;min-height:44px}.slider-wrap label{margin:0}.link-button{border:0;background:transparent;text-decoration:underline;font-size:.85rem;padding:7px 0}.setup-choice #findSetup{grid-column:1/-1;justify-self:start}.centered{text-align:center}.check-label{display:flex;gap:10px;align-items:center;font-size:.9rem;font-weight:400}.check-label input{width:22px;flex:0 0 22px;min-height:44px}.badge{display:inline-block;font-size:.82rem;color:#244c37;background:#e6f1e9;border:1px solid #aac7b3;border-radius:6px;padding:6px 9px;margin-top:10px}.state-label{font-size:.84rem;color:#526174}.target-context{border-top:1px solid var(--line);margin-top:14px}.climb-inputs,.climb-results{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:20px;background:#f5f7fa;border:0}.climb-results{grid-template-columns:1fr 1fr;margin:20px 0}.climb-results strong{font-size:1.7rem}.climb-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.9rem}.climb-table th,.climb-table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:right}.climb-table th:first-child{text-align:left;max-width:330px}.climb-table small{display:block;font-weight:400;color:var(--muted);font-size:.78rem}.climb-table caption{text-align:left;font-weight:bold;padding:15px 0}.climb-table thead{background:#edf3f8}.climb-table tbody tr:first-child{background:#f2f6fa}textarea{width:100%;font:inherit;overflow-wrap:anywhere}.crank-spin{transform-origin:135px 142px}.wheel-spin{transform-origin:433px 142px}.pedaling .crank-spin{animation:rotation var(--crank-seconds) linear infinite}.rolling .wheel-spin{animation:rotation var(--wheel-seconds) linear infinite}.pedaling .chain-flow{animation:chainmotion var(--chain-seconds) linear infinite}.derailleur{transition:transform .35s ease}@keyframes rotation{to{transform:rotate(360deg)}}@keyframes chainmotion{to{stroke-dashoffset:-20}}.review{border-top:1px solid var(--line)}button[aria-pressed=true]{border-color:var(--accent)}#climbError:empty{display:none}
@media(max-width:720px){.utilities{width:100%;justify-content:flex-start;flex-wrap:wrap}nav{flex-wrap:wrap}nav button{min-width:90px}.climb-inputs,.climb-results{grid-template-columns:1fr;gap:12px}.climb-inputs label{margin-top:0}.brand{font-size:.92rem}.speed-choice{grid-template-columns:minmax(0,1fr) auto}.single>section.card{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.crank-spin,.wheel-spin,.chain-flow{animation:none!important}.derailleur{transition:none}}