.gear-tool { font-family: "Inter", -apple-system, sans-serif; font-size: .87rem; }
.gear-tool fieldset { border: 1px solid #ddd; border-radius: 5px; padding: 1rem; margin: 1rem 0; min-width: 0; }
.gear-tool legend, .gear-tool summary { font-weight: 600; }
.gear-family-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.gear-type { position: relative; display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: .35rem; text-align: center; border: 1px solid #aaa; border-radius: 3px; cursor: pointer; font-size: clamp(.64rem, 2.5vw, .87rem); overflow-wrap: anywhere; }
.gear-type:has(input:checked) { background: #245e89; border-color: #245e89; color: #fff; }
.gear-type:has(input:focus-visible) { outline: 2px solid #245e89; outline-offset: 3px; }
.gear-type:has(input:disabled) { opacity: .5; cursor: wait; }
.gear-tool .gear-type input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; clip-path: inset(50%); overflow: hidden; }
.gear-pair-toggle { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; }
.gear-tool .gear-pair-toggle input { width: auto; padding: 0; }
.gear-view-label { display: flex; align-items: center; gap: .6rem; margin: .6rem 0; }
.gear-tool .gear-view-label select { width: auto; }
.gear-tool input, .gear-tool select, .gear-tool textarea { font: inherit; width: 100%; padding: .5rem .6rem; border: 1px solid #aaa; border-radius: 3px; background: #fff; color: #1a1a1a; }
.gear-tool textarea { min-height: 8rem; font-family: "Hack", monospace; font-size: .75rem; resize: vertical; }
.gear-tool input:focus-visible, .gear-tool select:focus-visible, .gear-tool textarea:focus-visible, .gear-tool button:focus-visible, .gear-tool a:focus-visible { outline: 2px solid #245e89; outline-offset: 3px; }
.gear-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
.gear-input-label { display: flex; flex-direction: column; gap: .25rem; }
.gear-field { display: flex; flex-direction: column; gap: .25rem; }
.gear-field small, .gear-note { color: #555; font-size: .76rem; font-weight: 400; line-height: 1.5; }
.gear-field small { margin-top: .1rem; }
.gear-field-wide { grid-column: 1 / -1; }
.gear-note { margin: .6rem 0; }
.gear-tool details { margin: 1rem 0; }
.gear-tool summary { cursor: pointer; margin-bottom: .8rem; }
.gear-actions { display: flex; gap: .55rem; flex-wrap: wrap; margin: 1.2rem 0; }
.gear-tool button, .gear-button { font: inherit; display: inline-block; background: #eee; border: 1px solid #bbb; color: #222; padding: .55rem .8rem; border-radius: 3px; cursor: pointer; line-height: 1.4; text-decoration: none; }
.gear-tool button[type="submit"], .gear-button { color: #fff; background: #245e89; border-color: #245e89; }
.gear-tool button:disabled { opacity: .5; cursor: wait; }
.gear-tool [hidden] { display: none !important; }
#gear-status { min-height: 1.6em; margin: .8rem 0; }
#gear-status[data-error="true"] { color: #9c251c; }
.gear-preview { position: relative; height: 360px; border: 1px solid #d9dfe3; border-radius: 5px; background: #f2f5f7; overflow: hidden; }
#gear-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#gear-canvas:active { cursor: grabbing; }
#gear-preview-note { position: absolute; bottom: .4rem; margin: 0; padding: 0 .6rem; width: 100%; text-align: center; font-size: .7rem; color: #52616d; pointer-events: none; }
.gear-download { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin: .8rem 0 1.5rem; }
#gear-stats { font-size: .75rem; color: #555; }
@media (max-width: 420px) { .gear-fields { grid-template-columns: minmax(0, 1fr); } .gear-preview { height: 290px; } }

.gear-tool details.gear-illustration { margin: .2rem 0 .4rem; font-size: .72rem; }
.gear-tool .gear-illustration summary { color: #245e89; font-weight: 400; margin: 0; }
.gear-illustration figure { margin: .5rem 0 0; padding: .5rem; border: 1px solid #d9dfe3; border-radius: 4px; }
.gear-illustration img { width: 100%; height: auto; display: block; border-radius: 2px; }
.gear-example-values { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; text-align: center; color: #333; margin-bottom: .3rem; font-variant-numeric: tabular-nums; }
.gear-illustration figcaption { color: #555; font-size: .72rem; line-height: 1.5; margin-top: .4rem; }

.gear-profile-help { min-width: 0; font-size: .78rem; color: #444; line-height: 1.55; padding: .8rem; border: 1px solid #d9dfe3; border-radius: 4px; }
.gear-profile-help p { margin: .5rem 0; }
.gear-profile-choice { display: grid; gap: .3rem; font-weight: 600; }
.gear-profile-help pre { margin: .6rem 0; max-width: 100%; overflow-x: auto; padding: .6rem; border-radius: 3px; background: #f2f5f7; line-height: 1.5; }
.gear-profile-help code { font-size: .72rem; }
.gear-profile-help dt { margin-top: .6rem; font-weight: 600; overflow-wrap: anywhere; }
.gear-profile-help dd { margin: .15rem 0 .6rem; }
.gear-profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0; }
.gear-profile-family-note { border-left: 2px solid #aebfcb; padding-left: .6rem; }

.gear-tool input.gear-adjusted { border-color: #a67318; box-shadow: inset 0 0 0 1px #a67318; }
#gear-adjustments { color: #76520d; }