/* Compact, device-specific compositions; all values remain real controls. */
body .studio .device-card:has(> .native-device-layout){width:auto;min-width:0;max-width:none;flex:0 0 auto;overflow:hidden}
body .studio .native-device-layout{box-sizing:border-box;width:var(--device-layout-width);height:var(--device-body-height,137px);min-height:var(--device-body-height,137px);padding:4px;background:var(--live-surface);display:flex;flex-direction:column;gap:3px;overflow:hidden}
body .studio .native-device-layout *{box-sizing:border-box}
body .studio .native-device-sections{display:flex;align-items:stretch;flex:1;min-height:0;gap:0;overflow:auto;scrollbar-width:thin}
body .studio .native-device-section{flex:1;min-width:44px;padding:0 4px;border-left:1px solid var(--live-highlight)}
body .studio .native-device-section:first-child{border-left:0;padding-left:0}
body .studio .native-device-section:last-child{padding-right:0}
body .studio .native-device-section h4{font-size:8px;line-height:11px;min-height:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;text-align:center;color:var(--live-muted);margin:0 0 3px}
body .studio .native-section-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 4px;align-items:start}
body .studio .native-section-controls>label{min-width:0;max-width:100%;width:100%;margin:0;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--live-muted);font-size:8px;line-height:10px}
body .studio .native-section-controls>label>span:first-child{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
body .studio .native-section-controls .device-value{height:13px;min-height:13px;font-size:8px;line-height:11px;display:flex;width:100%;align-items:center;justify-content:center;gap:1px;min-width:0;max-width:100%}
body .studio .native-section-controls .device-value-editor{height:13px;padding:0;min-width:0;font-size:8px;line-height:11px;flex:0 1 auto;width:var(--device-readout-width,3ch);text-align:right}
body .studio .native-section-controls .device-enum{grid-column:1/-1}
body .studio .native-section-controls .device-enum select{height:16px;min-height:16px;font-size:8px;line-height:12px;width:100%;min-width:0;padding:0 1px;border:1px solid var(--live-frame);border-radius:0;background-color:var(--live-field);color:var(--live-text)}
body .studio .native-device-display{flex:0 0 61px;min-height:0;position:relative;background:var(--live-display);border:1px solid var(--live-frame);padding:2px 3px 10px}
body .studio .native-device-display svg{display:block;width:100%;height:100%;overflow:hidden}
body .studio .native-display-grid{stroke:var(--live-spectrum-grid);stroke-width:.4;fill:none}
body .studio .native-display-curve{stroke:var(--live-curve);stroke-width:1.2;fill:none;vector-effect:non-scaling-stroke}
body .studio .native-display-axis{position:absolute;bottom:0;left:4px;right:4px;font-size:7px;line-height:9px;white-space:nowrap;color:var(--live-muted);text-align:center;overflow:hidden}
body .studio .native-has-display .native-section-controls{display:flex;flex-wrap:wrap;justify-content:center}
body .studio .native-has-display .native-section-controls>label{flex:1 1 26px;width:26px}
body .studio .native-has-display .native-section-controls .device-enum{flex:1 1 100%;width:100%}
body .studio .native-layout-utility .native-device-sections{flex-wrap:wrap;overflow:hidden}
body .studio .native-layout-utility .native-device-section{flex:1 1 48%;min-width:0}
body .studio .native-layout-utility .native-device-section:last-child{flex-basis:100%;padding-top:3px;border-left:0;border-top:1px solid var(--live-highlight)}
body .studio .native-layout-utility .native-section-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
body .studio .native-layout-utility .native-device-section:nth-child(2) .native-section-controls{grid-template-columns:1fr}
body .studio .native-layout-multiband-dynamics .native-device-section{flex:1}
body .studio .native-layout-multiband-dynamics .native-device-section:last-child{flex:0 0 45px}
body .studio .native-layout-multiband-dynamics .native-device-section h4{color:var(--live-text);border-bottom:1px solid var(--live-highlight);padding-bottom:3px}
body .studio .native-layout-multiband-dynamics .native-device-section:last-child .native-section-controls,
body .studio .native-layout-pedal .native-section-controls,
body .studio .native-layout-eq-three .native-section-controls{grid-template-columns:1fr}
body .studio .native-layout-eq-three .native-device-section:last-child{flex:1.5}
body .studio .native-layout-midi-monitor .native-device-section{display:flex;align-items:start;flex-direction:column}
body .studio .native-layout-midi-monitor .native-section-controls{width:100%}
body .studio .native-layout-midi-effect-rack .native-device-sections{border:1px solid var(--live-frame);background:var(--live-surface-area)}
body .studio .native-rack-empty{margin:auto;color:var(--live-muted);font-size:9px}
/* Enum-bearing sections reserve the lower rows rather than clipping the last
   parameter. The graph remains a compact overview, as in Live's narrow cards. */
body .studio :is(.native-layout-auto-filter,.native-layout-saturator,.native-layout-phaser-flanger,.native-layout-chorus-ensemble,.native-layout-resonators) .native-device-display{flex-basis:43px}
body .studio :is(.native-layout-auto-filter,.native-layout-saturator,.native-layout-phaser-flanger,.native-layout-chorus-ensemble,.native-layout-resonators) .device-enum>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body .studio .native-layout-saturator .native-device-section:nth-child(2){flex:1.45}
body .studio .native-layout-auto-filter .native-device-section:first-child{flex:1.5}
body .studio .native-layout-phaser-flanger .native-device-section:first-child{flex:1.5}
body .studio .native-layout-resonators .native-device-section:nth-child(2){flex:1.5}
body .studio .native-section-controls .knob-control{--knob-face-size:20px;--knob-color:var(--live-curve);width:22px;height:22px;flex:0 0 22px}

body .studio .native-layout-gate .native-device-section:nth-child(2){flex:2}
/* Reserve actual label width inside the affected section, retaining each card's
   intrinsic width and the full accessible parameter names. */
body .studio .native-layout-phaser-flanger .native-device-section:nth-child(2){flex:1.1}
body .studio .native-layout-drum-buss .native-device-section:nth-child(2){flex:1.2}
body .studio .native-layout-align-delay .native-device-section:last-child{flex:1.25}
body .studio .native-layout-roar .native-device-section:last-child{flex:1.4}
body .studio .native-layout-max-midi-effect .native-device-section:nth-child(2){flex:1.1}
body .studio .native-layout-pitch .native-device-section:last-child .native-section-controls,
body .studio .native-layout-mpe-control .native-device-section:last-child .native-section-controls{grid-template-columns:1fr}

/* The two reference faces follow the supplied native screenshot's proportions,
   using the web engine's actual parameter set rather than decorative controls. */
body .studio .native-device-layout.native-reference-face{display:grid;height:var(--device-body-height,137px);min-height:var(--device-body-height,137px);padding:2px;gap:1px;overflow:hidden}
body .studio .native-reference-face label{display:flex;flex-direction:column;align-items:center;min-width:0;margin:0;padding:0;font-size:8px;line-height:9px;gap:0;color:var(--live-muted)}
body .studio .native-reference-face label>span:first-child{font-size:8px;line-height:9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .studio .native-reference-face .device-value{display:flex;width:100%;max-width:100%;height:12px;min-height:12px;align-items:center;justify-content:center;gap:0;font-size:8px;line-height:11px}
body .studio .native-reference-face .device-value-editor{font-size:8px;line-height:11px;height:12px;min-width:0;max-width:100%;padding:0;flex:0 1 auto;width:var(--device-readout-width,3ch)}
body .studio .native-reference-face .device-value-unit{font-size:8px;line-height:11px}
body .studio .native-reference-face .knob-control{--knob-color:var(--live-curve);width:20px;height:20px;flex:0 0 20px;padding:1px}
body .studio .native-reference-face .knob-control{--knob-face-size:18px}
body .studio .native-device-layout.native-reference-face .knob-control>i{left:calc(50% - .5px);top:2px;height:6px;transform-origin:50% 8px}
body .studio .native-reference-face .device-enum select{border:1px solid var(--live-frame);border-radius:0;width:100%;height:14px;min-height:14px;padding:0 1px;font-size:8px;line-height:12px;background-color:var(--live-field);color:var(--live-text)}
body .studio .native-reference-face .device-enum>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body .studio .native-reference-face .native-device-display{margin:0;min-height:0;height:auto;padding:2px;flex-basis:auto}
body .studio .native-reference-face .native-display-axis{display:none}
body .studio .native-saturator-face{grid-template-rows:14px 64px 15px minmax(0,1fr)}
body .studio .native-saturator-selectors{display:grid;grid-template-columns:minmax(0,1fr) 50px;gap:3px;min-height:0}
body .studio .native-saturator-selectors .device-enum:first-child select{background:var(--live-curve);color:var(--live-on-text)}
body .studio .native-saturator-color{display:grid;grid-template-columns:1fr 1fr;gap:3px;align-items:center;min-height:0}
body .studio .native-saturator-color label{display:flex;flex-direction:row;gap:1px;overflow:hidden}
body .studio .native-saturator-color label>span:first-child{flex:0 0 auto;max-width:26px}
body .studio .native-saturator-color .knob-control,body .studio .native-saturator-color input[data-knob]{display:none}
body .studio .native-saturator-color .device-value{flex:1;min-width:0}
body .studio .native-saturator-output{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;align-items:end;min-height:0}
body .studio .native-auto-filter-face{grid-template-columns:50px minmax(0,1fr) 47px;gap:2px}
body .studio .native-filter-frequency{display:flex;flex-direction:column;justify-content:space-between;min-height:0;padding:1px 2px}
body .studio .native-filter-frequency .knob-control{width:28px;height:28px;flex-basis:28px}
body .studio .native-reference-face .native-filter-frequency .knob-control{--knob-face-size:26px}
body .studio .native-device-layout.native-reference-face .native-filter-frequency .knob-control>i{left:calc(50% - .5px);top:3px;height:9px;transform-origin:50% 11px}
body .studio .native-filter-main{display:grid;grid-template-columns:90px minmax(0,1fr);grid-template-rows:86px minmax(0,1fr);gap:1px 3px;min-width:0;min-height:0}
body .studio .native-filter-type{min-width:0;min-height:0;max-width:100px}
body .studio .native-filter-type .device-enum{display:block;width:100%}
body .studio .native-filter-modulation{display:flex;align-items:end;justify-content:flex-start;gap:10px;min-height:0}
body .studio .native-filter-modulation>label{width:48px}
body .studio .native-filter-output{display:flex;align-items:end;justify-content:center;border-left:1px solid var(--live-frame);padding-left:2px;min-height:0}
body .studio .native-filter-output>label{width:100%;min-width:0}
body .studio .native-auto-filter-face .native-filter-main>.native-device-display{grid-column:1/-1}
body .studio .native-auto-filter-face .native-filter-type{grid-column:1;grid-row:2;align-self:start}
body .studio .native-auto-filter-face .native-filter-modulation{grid-column:2;grid-row:2}

/* Pitch has a primary dial in the Live 12 figure; the existing fine/bend
   controls remain separate because their web meanings are different. */
body .studio .native-layout-pitch .device-knob:has([data-param="coarse"]) .knob-control { width:31px; height:31px; flex-basis:31px; --knob-face-size:29px; }