:root{--bg: #090d0c;--bg-panel: #121817;--text: #e6f2ee;--muted: #9db1a9;--line: #25322e;--lime: #93ff29;--lime-soft: #1e3214}*,*:before,*:after{box-sizing:border-box}html{width:100%;max-width:100%;overflow-x:hidden}body{width:100%;max-width:100%;min-width:0;margin:0;overflow-x:hidden;font-family:Segoe UI,SF Pro Display,sans-serif;color:var(--text);background:radial-gradient(circle at 15% 8%,#162019,#090d0c 38%),radial-gradient(circle at 85% 95%,#111a14,#090d0c 45%)}#root{width:100%;max-width:none!important;min-width:0;margin:0!important;padding:0!important;overflow-x:hidden;text-align:initial!important}.page{width:100%;max-width:760px;min-width:0;margin:0 auto;padding:.6rem;display:grid;gap:.55rem;overflow-x:clip}.hero,.panel,.cta,.grid,.controls-grid,.metric-grid,.metric-card,.ratio-table-wrap{min-width:0;max-width:100%}.hero h1{margin:0;line-height:1.05;font-size:clamp(1.65rem,7vw,2.8rem);overflow-wrap:anywhere}.logo-strip{order:0;display:flex;align-items:center;justify-content:space-between;padding:.15rem .15rem .1rem}.logo-mark{display:block;height:33px;width:auto;opacity:.92}.eyebrow{margin:0;color:var(--lime);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;overflow-wrap:anywhere}.sub{color:var(--muted);max-width:100%;white-space:normal;overflow-wrap:anywhere}.panel,.cta{width:100%;background:linear-gradient(145deg,#121817,#0e1312);border:1px solid var(--line);border-radius:12px;padding:.7rem}h2,h3{margin:0 0 .45rem;line-height:1.2;overflow-wrap:anywhere}.grid{display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr)}.controls-grid{grid-template-columns:minmax(0,1fr)}label{display:grid;min-width:0;gap:.4rem;font-size:.86rem;color:var(--muted)}input,select,button{width:100%;max-width:100%;min-width:0;font:inherit;font-size:16px;min-height:44px;border-radius:10px;border:1px solid #2f4039;background:#0d1210;color:var(--text);padding:.72rem .74rem}input:focus,select:focus,button:focus{outline:2px solid rgba(147,255,41,.35);outline-offset:2px}.metric-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.45rem}.metric-card{background:#0c1110;border:1px solid #1e2a26;border-radius:10px;padding:.55rem;overflow-wrap:anywhere}.metric-card p{margin:0;font-size:.8rem;color:var(--muted)}.metric-card strong{font-size:1.05rem;color:var(--lime)}.drive-svg{display:block;width:100%;max-width:100%;min-width:0;height:auto;border:1px solid #23302b;border-radius:10px;background:linear-gradient(to bottom,#0a0f0d,#0d1311)}.front,.rear{fill:transparent;stroke:#4a5d56;stroke-width:2}.selected{stroke:var(--lime);stroke-width:3}.chain{fill:none;stroke:#ff4d4d;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}.svg-label{fill:#bad3c8;font-size:12px}.svg-note{fill:#6f847b;font-size:11px}.warn{color:#ff9d9d;margin:.8rem 0 0;overflow-wrap:anywhere}.warnings ul{margin:0;padding-left:1rem}.warnings li{margin:.35rem 0;color:#d7e3de;overflow-wrap:anywhere}.ratio-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.2rem}.ratio-table{width:max-content;min-width:100%;border-collapse:collapse}.ratio-table th,.ratio-table td{border:1px solid #24312d;padding:.5rem .42rem;text-align:center;font-size:.84rem;white-space:nowrap}.ratio-table thead th{background:#0f1714;color:var(--lime);font-weight:700}.ratio-table tbody th{background:#0d1411;color:#cae2d8;font-weight:600}.ratio-table td{background:#0b100f;color:#dbe8e2}.ratio-selected{outline:2px solid var(--lime);outline-offset:-2px;color:var(--lime)!important;font-weight:700}.table-hint{margin:0 0 .55rem;color:var(--muted);font-size:.8rem}.cta{text-align:center}.cta h3{margin-top:0}.cta button{background:linear-gradient(180deg,#a8ff4f,#7ed61f);border:none;color:#0f1809;font-weight:700;cursor:pointer}@media (min-width: 480px){.page{padding:1rem;gap:1rem}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 760px){.grid,.controls-grid,.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.panel,.cta{border-radius:14px;padding:1rem}}.slider-stack{display:grid;gap:.65rem}.slider-control{display:grid;gap:.32rem}.slider-control>span{display:flex;justify-content:space-between;gap:1rem;color:var(--muted)}.slider-control strong{color:var(--lime);font-weight:700;white-space:nowrap}input[type=range]{width:100%;min-height:32px;padding:0;border:0;background:transparent;accent-color:var(--lime)}.slider-labels{display:flex;justify-content:space-between;gap:.35rem;overflow-x:auto;padding-bottom:.15rem;color:var(--muted);font-size:.72rem}.slider-labels span{flex:0 0 auto}.svg-metric-box{fill:#0c1110d1;stroke:#25322e;stroke-width:1}.svg-metric-text{fill:#e6f2ee;font-size:30px;font-weight:700}.svg-metrics{filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}.selected-label{fill:var(--lime);font-weight:700;font-size:17px}.pulley{fill:#0c1110;stroke:#6a7d75;stroke-width:2}.derailleur-arm{stroke:#42524b;stroke-width:6;stroke-linecap:round;opacity:.9}.derailleur-link{stroke:#586a63;stroke-width:5;stroke-linecap:round;opacity:.9}.derailleur-pivot{fill:#93ff29;stroke:#0d1210;stroke-width:1.2}.derailleur-pivot-secondary{fill:#d9ffae;stroke:#0d1210;stroke-width:1.1}.svg-small-note{fill:#91a49d;font-size:12px}.svg-debug-text{fill:#f2f7f5;font-size:10px;paint-order:stroke;stroke:#0a0f0d;stroke-width:2px}.debug-toggle{display:flex;align-items:center;gap:.5rem;color:#cdded8;font-size:.86rem}.debug-toggle input[type=checkbox]{width:16px;height:16px;min-height:16px;accent-color:var(--lime)}.collapsible-panel summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-size:1.1rem;font-weight:700;color:var(--text)}.collapsible-panel summary::-webkit-details-marker{display:none}.collapsible-panel .chevron{transition:transform .2s ease;color:var(--lime);font-size:.9rem}.collapsible-panel[open] .chevron{transform:rotate(180deg)}.collapsible-content{margin-top:.5rem}.section-units{order:2}.hero{order:1}.section-view{order:3}.section-cadence{order:4}.section-environment{order:5}.section-inputs{order:6}.section-metrics{order:7}.section-derailleur{order:8}.section-display-debug{order:9}.section-upper-debug{order:10}.section-ratios{order:11}.section-warnings{order:12}.cta{order:13}.unit-toggle{border:0;margin:0;padding:0;display:grid;gap:.55rem;grid-template-columns:repeat(2,minmax(0,1fr))}.unit-option{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:42px;border:1px solid #2f3b37;border-radius:10px;background:#121a18;color:#c8d6d0;font-weight:700}.unit-option input[type=radio]{width:16px;height:16px;min-height:16px;margin:0;accent-color:var(--lime)}.unit-option.active{border-color:var(--lime);color:var(--text);box-shadow:0 0 0 1px #88f9264f inset}.tune-grid{display:grid;gap:.4rem;grid-template-columns:repeat(2,minmax(0,1fr))}.radio-card{margin:0;padding:.35rem .45rem .4rem;border:1px solid #2b3934;border-radius:8px;min-width:0}.radio-card legend{font-size:.72rem;color:var(--muted);padding:0 .2rem}.radio-option{display:flex;align-items:center;gap:.35rem;color:#d5e3dd;font-size:.78rem}.radio-option input[type=radio]{width:14px;height:14px;min-height:14px;accent-color:var(--lime)}.mini-select{display:grid;gap:.2rem;font-size:.74rem;color:#c7d7d0;margin-top:.2rem}.mini-select select{min-height:30px;padding:.3rem .45rem;font-size:.78rem}@media (min-width: 760px){.tune-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.section-capture{order:12}.capture-actions{display:flex;gap:.6rem;margin-top:.55rem}.btn-linkish{background:transparent;border:1px solid #2a3833;color:var(--muted)}.btn-linkish:hover{border-color:#3a4a44;color:var(--text)}