@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
.gear-teeth-grid label[hidden]{display:none!important}
.type-switch{grid-template-columns:repeat(3,1fr)!important}.type-switch button{min-width:0;padding-inline:5px!important}.type-switch button .setting-info{margin-left:3px}
.sidebar label,.sidebar button,.speed,.zoom-controls{position:relative}.setting-info{position:static;width:16px;height:16px;display:inline-grid;place-items:center;margin-left:5px;border:1px solid #8e9088;border-radius:50%;background:#fbfaf6;color:#555;font:700 9px/1 "DM Sans",sans-serif;text-transform:none;letter-spacing:0;vertical-align:middle;cursor:help;z-index:20}.setting-info::after{display:none!important}.setting-info:focus{outline:2px solid #c95f31;outline-offset:2px}.presets button b .setting-info{margin-top:-1px}.speed>span{display:inline-flex;align-items:center}.zoom-controls>.setting-info{flex:0 0 16px;margin:0 5px}.zoom-controls{overflow:visible!important}.info-tooltip{position:fixed;width:min(240px,calc(100vw - 20px));padding:11px 13px;border:1px solid #777b75;border-radius:10px;background:#686c66;color:#fff;font:400 11px/1.5 "DM Sans",sans-serif;text-align:left;box-shadow:0 12px 28px #0003;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .14s,transform .14s,visibility .14s;pointer-events:none;z-index:10000}.info-tooltip.visible{opacity:1;visibility:visible;transform:translateY(0)}
#preview{touch-action:none;cursor:grab}#preview g[id^="gear"],#preview #crank,#preview #sectorDriver{cursor:grab}#preview #rackMover,#preview #sectorRack{cursor:ew-resize}#preview.dragging,#preview.panning{cursor:grabbing;user-select:none}#preview.dragging g[id^="gear"],#preview.dragging #crank,#preview.dragging #sectorDriver,#preview.dragging #rackMover,#preview.dragging #sectorRack{cursor:grabbing}
@media(min-width:851px){body{height:100vh;overflow:hidden}.app-shell{height:calc(100vh - 78px);min-height:0}.sidebar{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.workspace{height:100%;overflow-y:auto;overscroll-behavior:contain}}
.toggle-row{display:flex;align-items:center;gap:8px;color:#20231f;font-size:11px}.toggle-row input{width:15px;height:15px;margin:0;accent-color:#20231f}.crank-options[hidden]{display:none}.mini-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 15px}.mini-presets button{height:30px;border:1px solid #d7d2c5;background:transparent;border-radius:3px;font:600 9px inherit;color:#666;cursor:pointer}.mini-presets button.active{border-color:#20231f;background:#ebe7de;color:#20231f}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}.check-grid label{display:flex;align-items:center;gap:7px;margin:0;font-size:10px;color:#555}.check-grid input{width:14px;height:14px;margin:0;accent-color:#20231f}.help-dialog{width:min(620px,calc(100vw - 32px));max-height:85vh;border:1px solid #bdb7aa;border-radius:4px;padding:34px 38px;background:#fbfaf6;color:#20231f;box-shadow:0 24px 80px #0004}.help-dialog::backdrop{background:#292b27aa}.help-dialog h2{font:600 25px Manrope;margin:8px 35px 20px 0}.help-dialog h3{font:600 13px Manrope;margin:22px 0 5px}.help-dialog p{font-size:12px;line-height:1.65;color:#64665f;margin:0}.dialog-close{position:absolute;right:16px;top:14px;width:32px;height:32px;border:1px solid #d7d2c5;background:transparent;border-radius:50%;font-size:20px;cursor:pointer}@media(max-width:550px){.help-dialog{padding:28px 22px}.check-grid{grid-template-columns:1fr}}
.legend .drive,.legend .driven{background:#111!important}.legend .pitch{border-color:#111!important}
.zoom-controls{margin-left:auto;display:flex;align-items:center;border:1px solid #d7d2c5;border-radius:3px;overflow:hidden;background:#fbfaf6}.zoom-controls button{height:28px;min-width:29px;padding:0 8px;border:0;border-right:1px solid #d7d2c5;background:transparent;color:#20231f;font:600 12px inherit;cursor:pointer}.zoom-controls button:hover{background:#eeeae1}.zoom-controls output{min-width:48px;text-align:center;font-size:10px;color:#777970}.zoom-controls+.speed{margin-left:0!important}@media(max-width:650px){.canvas-toolbar .speed{display:none}.zoom-controls{margin-left:auto}}
:root{--ink:#20231f;--muted:#777970;--paper:#f3f0e8;--card:#fbfaf6;--line:#d7d2c5;--orange:#c95f31;--orange-dark:#a64722;--teal:#447b74;--sage:#dce3d8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;background:#f8f6f0}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font:700 18px Manrope;letter-spacing:.08em}.brand small{display:block;font-size:8px;letter-spacing:.2em;color:var(--muted);margin-top:2px}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;font-size:23px}.top-actions{display:flex;gap:10px}.btn,.icon-btn{height:40px;border:1px solid var(--ink);background:transparent;padding:0 18px;border-radius:3px;font:600 13px inherit;cursor:pointer}.icon-btn{width:40px;padding:0;font-size:20px}.btn.primary{background:var(--ink);color:white}.btn:hover,.icon-btn:hover{transform:translateY(-1px)}.app-shell{display:grid;grid-template-columns:380px minmax(0,1fr);min-height:calc(100vh - 78px)}.sidebar{padding:36px 32px;border-right:1px solid var(--line);background:#f8f6f0;overflow:auto}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--orange)}h1{font:600 29px/1.15 Manrope;margin:10px 0}.intro{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 22px}.type-switch{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);padding:4px;background:#ebe7de;border-radius:4px}.type-switch button{border:0;background:transparent;padding:11px 8px;font:600 12px inherit;color:var(--muted);cursor:pointer}.type-switch button.active{background:var(--card);box-shadow:0 1px 4px #0002;color:var(--ink)}.type-switch span{margin-right:6px}.panel{border-top:1px solid var(--line);padding-top:21px;margin-top:25px}.section-head{display:flex;align-items:center;gap:11px;margin-bottom:15px}.section-head h2{font:600 15px Manrope;margin:0}.step{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--line);border-radius:50%;font-size:9px;color:var(--muted)}.presets{display:grid;gap:7px}.presets button{text-align:left;border:1px solid var(--line);border-radius:3px;background:transparent;padding:10px 13px;cursor:pointer}.presets button b,.presets button small{display:block}.presets button b{font:600 12px inherit}.presets button small{font-size:10px;color:var(--muted);margin-top:2px}.presets button.active{border-color:var(--orange);background:#fff7f1}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{font-size:10px;color:var(--muted);font-weight:600;display:block;margin-bottom:14px}input,select{width:100%;height:35px;border:1px solid var(--line);background:var(--card);border-radius:3px;margin-top:7px;padding:0 9px;color:var(--ink);font:500 12px inherit}input[type=range]{height:4px;padding:0;accent-color:var(--orange)}label output{float:right;color:var(--ink)}.input-unit{position:relative;display:block}.input-unit input{padding-right:30px}.input-unit i{position:absolute;right:9px;top:18px;font-style:normal;font-size:10px}.note{display:flex;gap:12px;background:var(--sage);border:0;padding:14px;margin-top:16px}.note b{font-size:11px}.note p{font-size:10px;line-height:1.45;margin:3px 0;color:#596058}.workspace{padding:35px 42px;min-width:0}.workspace-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.workspace-head h2{font:600 24px Manrope;margin:6px 0 0}.status{font-size:11px;color:var(--muted)}.status span{display:inline-block;width:7px;height:7px;background:#5b8c68;border-radius:50%;margin-right:7px}.canvas-card{background:var(--card);border:1px solid var(--line);box-shadow:0 12px 30px #3933280b}.canvas-toolbar{height:52px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 17px;gap:11px;font-size:11px;color:var(--muted)}.play{width:29px;height:29px;border-radius:50%;border:0;background:var(--orange);color:white;cursor:pointer}.speed{margin-left:auto;display:flex;align-items:center;gap:11px}.speed input{width:95px;margin:0}.preview-wrap{height:min(58vh,570px);min-height:390px;position:relative;background-image:linear-gradient(#ddd8cb55 1px,transparent 1px),linear-gradient(90deg,#ddd8cb55 1px,transparent 1px);background-size:24px 24px;overflow:hidden}.preview-wrap svg{width:100%;height:100%}.dimension-card{position:absolute;right:18px;bottom:17px;background:#fbfaf6e8;border:1px solid var(--line);padding:8px 12px}.dimension-card span{display:block;font-size:8px;color:var(--muted);letter-spacing:.1em}.dimension-card b{font:600 13px Manrope}.legend{display:flex;gap:25px;height:45px;align-items:center;padding:0 18px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.legend i{display:inline-block;width:15px;height:3px;margin-right:6px;vertical-align:middle}.drive{background:var(--orange)}.driven{background:var(--teal)}.pitch{border-top:1px dashed var(--muted)}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-top:0;background:#f8f6f0}.summary-grid div{padding:15px 18px;border-right:1px solid var(--line)}.summary-grid div:last-child{border:0}.summary-grid span{display:block;font-size:8px;letter-spacing:.12em;color:var(--muted)}.summary-grid b{font:600 13px Manrope;margin-top:4px;display:block}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:white;padding:10px 16px;border-radius:3px;font-size:12px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:850px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:0}.workspace{padding:28px 18px}.topbar{padding:0 16px}.btn{padding:0 10px}.btn.secondary{display:none}.summary-grid{grid-template-columns:1fr 1fr}.summary-grid div:nth-child(2){border-right:0}.summary-grid div{border-bottom:1px solid var(--line)}}