.flex-workbench{margin-top:28px;border:1px solid #d8ded1;background:#f6f5ef;border-radius:18px;padding:24px}.flex-workbench h3{font-size:22px;margin:0 0 18px;color:#243f31}.flex-settings{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}.flex-workbench label{font-size:13px}.flex-settings input,.flex-settings select{display:block;width:100%;font:inherit;min-height:44px;padding:10px;margin-top:6px;border:1px solid #cbd0c6;border-radius:9px;background:#fff}.flex-workbench .small{font-size:12px;line-height:1.65;color:#5e6d61}.flex-actions{display:flex;gap:10px;flex-wrap:wrap}.flex-actions button{padding:12px 16px;border:0;border-radius:10px;color:#fff;background:#243f31;font:inherit;font-size:13px;min-height:44px;cursor:pointer}.flex-actions button:disabled{opacity:.5;cursor:wait}.flex-canvas{height:360px;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at center,#fff,#e4e6dd);touch-action:none}.flex-canvas canvas{display:block;width:100%;height:100%}.flex-controls{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:14px 0}.flex-controls label{display:flex;align-items:center;gap:8px}.flex-controls input[type=checkbox]{width:18px;height:18px;min-height:0;margin:0}.flex-controls input[type=range]{width:140px;min-height:32px;padding:0;margin:0}.flex-workbench [data-status]{font-size:13px;min-height:24px}.flex-workbench [hidden]{display:none!important}.flex-workbench [data-downloads] a{display:inline-block;margin-top:12px}
/* Individual housings with visible joints replace the old continuous tray. */
.clicker-letter-grid{background:none;border:none;box-shadow:none;padding:16px 22px;gap:22px}.clicker-model{background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--body) 80%,#333) 0px,var(--body) 2px,var(--body) 4px);box-shadow:0 9px 0 color-mix(in srgb,var(--body) 70%,#333),0 13px 12px #0002;transform:none}.clicker-model:nth-child(even){transform:none}.clicker-joint{position:absolute;right:-29px;top:27px;width:34px;height:24px;pointer-events:none;color:var(--body);filter:drop-shadow(0 2px 0 color-mix(in srgb,var(--body) 65%,#333))}.clicker-joint svg{display:block;width:100%;height:100%;overflow:visible}.clicker-model:last-child .clicker-joint{display:none}.clicker-model:first-child:before{content:'';position:absolute;left:-17px;top:31px;width:16px;height:16px;border:4px solid var(--body);border-radius:50%}
@media(max-width:650px){.flex-settings{grid-template-columns:1fr}.flex-workbench{padding:18px}.flex-canvas{height:280px}.flex-actions button{flex:1 1 140px}.flex-controls{gap:12px}}

.clicker-model{border-radius:18px}.clicker-model .clicker-key{border-radius:15px}

.flex-print-help{margin-top:18px;font-size:13px;line-height:1.7}.flex-print-help summary{cursor:pointer;font-weight:600}.flex-print-help li{margin:8px 0}.flex-actions button:focus-visible,.flex-print-help summary:focus-visible{outline:3px solid #a77735;outline-offset:3px}

.clicker-preview-heading{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.clicker-sound{border:1px solid #aebaae;border-radius:24px;padding:10px 16px;min-height:44px;background:#fff;color:#243f31;cursor:pointer;font:inherit;font-size:13px}.clicker-sound[aria-pressed=true]{background:#243f31;color:#fff}.clicker-preview-area h3{font-size:clamp(22px,4vw,34px);margin:22px 0 4px;overflow-wrap:anywhere}.clicker-examples{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}.clicker-examples>span{width:100%;font-size:13px;color:#5b675e}.clicker-examples button{display:flex;flex-direction:column;gap:4px;border:1px solid #cbd0c6;border-radius:12px;background:#fff;padding:12px 20px;min-height:60px;color:#243f31;font:700 16px monospace;cursor:pointer}.clicker-examples small{font:400 11px system-ui;color:#5b675e}.clicker-examples button[aria-pressed=true]{border-color:#243f31;box-shadow:0 0 0 1px #243f31;background:#edf3eb}.clicker-model .clicker-key{font-family:monospace;text-shadow:0 1px 0 color-mix(in srgb,var(--body) 75%,#000),0 2px 0 color-mix(in srgb,var(--body) 65%,#000),0 3px 3px #0003}.clicker-examples button:focus-visible,.clicker-sound:focus-visible{outline:3px solid #a77735;outline-offset:3px}@media(prefers-reduced-motion:reduce){.clicker-key{transition:none}}
.clicker-live-stage{width:100%;margin-top:12px}.clicker-live-stage .flex-canvas{height:390px}.clicker-key-demo{width:100%;margin-top:12px}.clicker-key-demo summary{cursor:pointer;font-size:13px;color:#243f31;padding:12px}.clicker-preview-area .viewer-status{margin:12px 0 0}.clicker-preview-area .preview-toolbar{justify-content:center}@media(min-width:1000px){.clicker-layout{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);align-items:start}#clickerForm{max-width:none}}@media(max-width:650px){.clicker-live-stage .flex-canvas{height:300px}.clicker-preview-area{padding:20px 12px}}

.clicker-model .clicker-key{font-size:32px;font-weight:900;border-radius:17px}.clicker-model{border-radius:20px}

/* Fixed continuous custom keyboard case. */
.clicker-letter-grid{background:var(--body);border:2px solid var(--body);border-radius:14px;padding:8px;gap:6px;box-shadow:0 8px 0 color-mix(in srgb,var(--body) 75%,#000)}
.clicker-model,.clicker-model:nth-child(even){transform:none;box-shadow:none;background:var(--body)}
.clicker-joint,.clicker-model:first-child:before{display:none}