
:root{--bg:#101516;--panel:#191f20;--line:#303839;--text:#ecede5;--muted:#929f9e;--accent:#f6a65a;--cyan:#73c6c5;--input:#111718}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}button,a,input,select,summary{outline-offset:4px}button,a,summary{ -webkit-tap-highlight-color:transparent}a{color:inherit}header{height:94px;max-width:1440px;padding:0 56px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;font-size:19px;line-height:1.1;letter-spacing:-.7px}.brandmark{width:39px;height:39px;border:1px solid var(--accent);color:var(--accent);font-weight:700;display:grid;place-items:center;font-size:27px}.brandproduct{display:block;font-size:12px;color:var(--muted);margin-top:5px;letter-spacing:2px;text-transform:uppercase}.topmeta{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}.live-dot{height:6px;width:6px;border-radius:50%;background:var(--cyan)}.version{border:1px solid var(--line);padding:2px 8px;margin-left:12px;font-family:monospace}main{max-width:1440px;margin:auto;padding:52px 56px 0}.intro{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:39px}.eyebrow,.step-label,.foot-label{font:10px/1.5 Consolas,monospace;letter-spacing:1.8px;color:var(--muted)}h1{font-weight:450;font-size:clamp(40px,4.5vw,64px);line-height:1.04;letter-spacing:-2.5px;margin:18px 0}h1 span{color:var(--accent)}.intro p{color:var(--muted);font-size:14px;line-height:1.7;margin:0}.intro-note{display:flex;flex-direction:column;max-width:300px;border-left:1px solid var(--line);padding-left:22px;margin-bottom:4px;gap:5px}.note-number{font-size:31px;letter-spacing:-1px}.intro-note>span+span{font-size:12px}.intro-note small{color:var(--muted);font-size:11px}.workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:3px}.settings{padding:23px}.panel-heading{display:flex;align-items:center;justify-content:space-between;min-height:26px;margin-bottom:23px}.text-button{border:0;background:none;color:var(--muted);font-size:11px;cursor:pointer;padding:4px}.text-button:hover{color:var(--text)}.field-label{display:flex;justify-content:space-between;font-size:12px;margin:18px 0 7px}.field-label span,label>span{color:var(--muted);font:11px Consolas,monospace}input,select{width:100%;height:42px;border:1px solid var(--line);border-radius:3px;background:var(--input);color:var(--text);padding:8px 12px;color-scheme:dark}input:focus,select:focus{border-color:var(--accent);outline:1px solid var(--accent)}input{font-variant-numeric:tabular-nums}select{font-size:12px}.type-description{margin:17px 0 20px;display:flex;align-items:center;gap:10px;padding-bottom:17px;border-bottom:1px solid var(--line)}.type-icon{font-size:27px;color:var(--accent)}.type-description strong{font-size:11px;font-weight:500;display:block}.type-description small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.wheel-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 12px;margin:23px 0}.grid-title{display:flex;align-items:center;gap:7px;font-size:11px}.swatch{height:6px;width:6px;border-radius:50%;display:inline-block}.pinion{background:var(--accent)}.wheel{background:var(--cyan)}.wheel-grid label{font-size:10px;color:#bdc6c2}.wheel-grid label>span{float:right}.wheel-grid input{margin-top:6px;height:39px;font-size:14px}.single .wheel-only{display:none}.single .wheel-grid{grid-template-columns:1fr}.profile{border-top:1px solid var(--line);padding:13px 0 16px}.profile summary{font-size:11px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.profile summary::-webkit-details-marker{display:none}.profile summary span{color:var(--muted)}.profile p{font-size:11px;color:var(--muted);line-height:1.7}.profile dl{font-size:10px;margin:13px 0}.profile dl div{display:flex;justify-content:space-between;margin:5px 0}.profile dd{margin:0;color:var(--text)}.profile dt{color:var(--muted)}.primary{width:100%;border:0;border-radius:3px;background:var(--accent);color:#211a13;padding:13px 14px;display:flex;justify-content:space-between;cursor:pointer;font-size:12px;font-weight:650}.primary:hover{background:#ffc085}.primary:disabled{opacity:.55;cursor:wait}#status{color:var(--muted);font-size:10px;margin-top:10px;line-height:1.6;min-height:18px}#status.error{color:#ffad9e}.viewer-panel{overflow:hidden}.viewer-panel>.panel-heading{padding:16px 22px;margin:0;border-bottom:1px solid var(--line)}.viewer-tools{display:flex;gap:5px}.viewer-tools button{border:1px solid var(--line);height:29px;min-width:29px;padding:0 7px;color:#b4bdb8;background:transparent;cursor:pointer;font:11px Consolas,monospace}.viewer-tools button:hover,.viewer-tools button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.viewport{height:415px;position:relative;background:radial-gradient(ellipse at 52% 45%,#253132 0%,#121a1c 75%);overflow:hidden}.viewport:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.14;background-image:radial-gradient(#9eacab 1px,transparent 1px);background-size:24px 24px}canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.empty{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:2;pointer-events:none}.empty svg{width:108px;fill:none;stroke:#597474;stroke-width:1.1;opacity:.75}.empty h2{font-size:17px;font-weight:400;margin:20px 0 5px}.empty p{font-size:11px;color:var(--muted);margin:0}.empty[hidden]{display:none}.axis-label,.viewer-hint,.model-badge{position:absolute;color:#829593;z-index:2;font:10px Consolas,monospace;pointer-events:none}.axis-label{bottom:21px;left:20px;color:var(--accent)}.axis-label span{color:var(--cyan);margin:0 10px}.viewer-hint{bottom:21px;right:18px;font:10px 'Segoe UI',sans-serif}.model-badge{top:18px;left:20px;padding:5px 9px;border:1px solid #3d5352;color:#b0cdca;background:#172526b3}.metrics{display:grid;grid-template-columns:1.15fr 1fr 1.2fr;gap:10px;padding:21px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.metrics>div+div{border-left:1px solid var(--line);padding-left:16px}.metrics span{font-size:10px;color:var(--muted);display:block}.metrics strong{font:26px/1.5 Consolas,monospace;font-weight:400;display:block;margin-top:6px}.metrics small{font-size:12px;color:var(--muted)}.export{padding:24px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}.export h2{font-size:16px;font-weight:500;margin:7px 0}.export p{font-size:10px;color:var(--muted);max-width:310px;margin:0;line-height:1.7}.download-actions{min-width:176px;text-align:center}.download{display:flex;justify-content:space-between;gap:18px;align-items:center;border:1px solid var(--accent);border-radius:3px;color:var(--accent);text-decoration:none;padding:11px 13px;font-size:11px}.download:hover{background:#f6a65a15}.disabled{opacity:.35;pointer-events:none}.json-link{display:block;color:var(--muted);font-size:10px;margin-top:9px;text-decoration:none}.footnotes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;padding:35px 0 38px}.footnotes p{font-size:11px;color:var(--muted);line-height:1.8;margin:8px 0}.foot-label{font-size:9px}footer{max-width:1328px;padding:20px 0 30px;margin:0 auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;color:#72827f}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent)}@media(min-width:1450px){.viewport{height:460px}.workspace{grid-template-columns:340px minmax(0,1fr)}}@media(max-width:1050px){header{padding:0 28px}main{padding:36px 28px 0}.workspace{grid-template-columns:290px minmax(0,1fr)}.intro-note{max-width:230px}.metrics{padding:17px 15px}.metrics span{font-size:9px}.metrics>div+div{padding-left:10px}.export{align-items:start;flex-direction:column}.download-actions{width:100%;display:flex;gap:15px;align-items:center}.json-link{margin:0}.viewer-hint{display:none}footer{margin:0 28px}.viewport{height:420px}}@media(max-width:740px){header{height:76px;padding:0 20px}.topmeta{font-size:0}.version{font-size:11px}.intro-note{display:none}main{padding:30px 16px 0}.intro{padding-bottom:25px}h1{font-size:45px}.workspace{grid-template-columns:1fr;gap:16px}.settings{padding:20px}.settings .wheel-grid{gap:13px 20px}.viewer-panel .viewport{height:360px}.metrics strong{font-size:23px}.export{flex-direction:row;align-items:center;gap:12px}.export h2{font-size:14px}.download-actions{display:block;width:auto;min-width:150px}.json-link{margin-top:8px}.footnotes{grid-template-columns:1fr;gap:13px;padding:26px 5px}.footnotes p{margin-bottom:0}footer{margin:0 20px;font-size:9px}.viewer-hint{display:block;font-size:8px;bottom:12px}.axis-label{bottom:32px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}


.rack-only{display:none}.rack .rack-only{display:block}.rack .pair-only{display:none}

.helix-only{display:none}.helical .helix-only{display:block}.helix-fields{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}.help-note{font-size:10px;color:var(--muted);line-height:1.6}.recipe-actions{display:flex;justify-content:space-between;gap:5px;border-top:1px solid var(--line);padding:10px 0;margin-top:12px}.recipe-actions .text-button{font-size:10px}.dimensions{padding:15px 20px;border-top:1px solid var(--line);font-size:11px;line-height:1.8;color:var(--muted);font-variant-numeric:tabular-nums}.field-label>#moduleLabel{font:inherit;color:var(--text)}

.ring-only,.mechanism-only{display:none}.internal .ring-only,.mechanism .mechanism-only{display:block}.internal .pair-only,.internal-single .pinion-only,.mechanism #legacyParameters{display:none}.internal-single .wheel-grid{grid-template-columns:1fr}.mechanism-only label{display:block;margin:14px 0 0;font-size:11px;color:var(--muted)}.mechanism-only label input,.mechanism-only label select{margin-top:6px}.component-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.mechanism-summary{border-top:1px solid var(--line);padding:12px 20px;font-size:11px;font-variant-numeric:tabular-nums}.mechanism-summary p{margin:7px 0}.mechanism-summary .help-note{margin-top:14px}.mechanism-summary[hidden]{display:none}@media(min-width:721px){.viewer-panel{position:relative;top:auto;align-self:start}}

.planetary-only{display:none}.planetary .planetary-only{display:block}.planetary #legacyParameters{display:none}.planetary-only label{display:block;font-size:11px;color:var(--muted);margin:12px 0 0}.planetary-only label input,.planetary-only label select{margin-top:6px}.planetary-only .step-label{margin:22px 0 0}.planetary-playback{padding:12px 20px;border-bottom:1px solid var(--line)}.planetary-playback[hidden]{display:none}.playback-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0}.playback-row>label{flex:1;font-size:10px;color:var(--muted);min-width:130px}.playback-row select{margin-top:5px;height:34px}.playback-row .check-label{display:flex;gap:7px;align-items:center}.check-label input{width:14px;height:14px;padding:0;accent-color:var(--accent)}#simTime{font:11px Consolas,monospace;color:var(--muted)}.planetary-only .error{color:var(--accent)}

.transmission-only{display:none}.transmission .transmission-only{display:block}.transmission #legacyParameters{display:none}.transmission-only>label{display:block;margin:12px 0;font-size:11px;color:var(--muted)}.transmission-only>p{font-size:11px;color:var(--muted)}.transmission-only .recipe-actions{flex-wrap:wrap}.transmission-only .error{color:var(--accent)}

.stage-diagram{display:grid;gap:6px;margin:14px 0;padding:8px;border:1px solid var(--line)}.stage-diagram button{text-align:left;padding:8px;border-left:2px solid transparent;white-space:normal}.stage-diagram button.selected{border-color:var(--accent);color:var(--text);background:var(--input)}

.design-tabs{display:flex;gap:2px;padding:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}.design-tabs button{flex:1;border:1px solid transparent;background:transparent;color:var(--muted);padding:10px;font-size:12px;border-radius:3px;cursor:pointer}.design-tabs button[aria-selected=true]{color:var(--accent);border-color:var(--line);background:var(--input)}#design-quick,#design-scheme{padding:15px}#quickScene{display:block;width:100%;height:440px;touch-action:none;background:#101a1c;border-radius:4px}#live-preview.invalid canvas{opacity:.25}.quick-tools{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:12px}#schemeDrawing{overflow:auto;max-height:620px}#schemeDrawing svg{display:block;width:100%;min-width:600px}#design-exact[hidden],#design-quick[hidden],#design-scheme[hidden]{display:none}@media(max-width:740px){#quickScene{height:350px}.design-tabs button{font-size:11px;padding:8px}.quick-tools{flex-wrap:wrap}}
#quickScene{position:relative;inset:auto;z-index:auto}#design-exact>.panel-heading{padding:16px 22px;margin:0;border-bottom:1px solid var(--line)}

.studio-scene{position:relative}.studio-scene #quickOverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.studio-scene text{fill:#f4e5bd;font:11px Arial;paint-order:stroke;stroke:#101a1c;stroke-width:2px}.studio-scene path{fill:none;stroke:#f6a65a;stroke-width:2px}.studio-controls{border-top:1px solid var(--line);padding-top:12px}.studio-controls button,.studio-controls select,.studio-controls input{font:11px Arial}.studio-controls button{background:var(--input);border:1px solid var(--line);color:var(--text);border-radius:3px;padding:7px;cursor:pointer}.studio-controls button:disabled{opacity:.35;cursor:default}.studio-play,.studio-checks{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}.studio-controls label{display:block;color:var(--muted);font-size:11px}.studio-play label{max-width:115px}.studio-play input[type=number]{width:70px}.studio-controls input[type=checkbox]{width:14px;height:14px;display:inline;vertical-align:middle;accent-color:var(--accent)}.studio-time{display:flex!important;align-items:center;gap:12px}.studio-time input{flex:1;min-width:80px}.studio-time output{min-width:75px}.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.studio-controls details{margin-top:14px}.studio-controls summary{cursor:pointer;font-size:12px;color:var(--accent)}.studio-controls details>label{margin-top:12px}.studio-controls input[type=range]{padding:0;height:25px;accent-color:var(--accent)}#schemeDrawing [data-stage]{cursor:pointer}#schemeDrawing .studio-selected>rect{stroke:#ffcc44;stroke-width:3}#schemeDrawing [data-stage]:focus{outline:none}#schemeDrawing [data-stage]:focus>rect{stroke:#ffcc44;stroke-width:3}@media(max-width:740px){.studio-grid{grid-template-columns:1fr}.studio-time{flex-wrap:wrap}.studio-scene text{font-size:10px}}

.project-library{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}.project-library summary{font-size:13px;cursor:pointer;color:var(--accent)}.project-library>label{display:block;font-size:11px;color:var(--muted);margin:12px 0}.project-library button{padding:7px;background:var(--input);color:var(--text);border:1px solid var(--line);font-size:10px;cursor:pointer}.project-library button:disabled{opacity:.4}.project-diff{overflow:auto;max-height:320px;font-size:10px}.project-diff table{border-collapse:collapse}.project-diff td{border:1px solid var(--line);padding:6px;max-width:160px;overflow-wrap:anywhere}

.scene-ports>div{display:flex;align-items:center;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding:10px 0}.scene-ports>div>span{min-width:100px;font-size:11px}.scene-ports button[draggable=true]{border-color:#427d7c;cursor:grab}.scene-ports button[draggable=true]:active{cursor:grabbing}
.scene-ports.dragging [data-drop-stage]{border:1px dashed var(--accent);background:#273737}
