/* Compact family surface: native Sine Language field, sigils and dial geometry. */
.sl-player{--sl-field:#191c27;--sl-grid:#303545;--sl-cyan:#8bbdd9;--sl-purple:#ad97d3;--sl-text:#e5e6f0;--sl-dim:#a9b1c7;display:grid;grid-template-columns:128px minmax(0,1fr) 230px;gap:16px;padding:16px;background:linear-gradient(125deg,#19202def,#202236f5);border:1px solid #58637f;border-radius:6px;color:var(--sl-text);font:12px/1.5 Inter,Arial,sans-serif;max-width:1180px;scroll-margin-top:105px}
.sl-identity{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:18px;padding:9px 15px 0 0;border-right:1px solid #3e465e;text-align:center}
.sl-stacked-logo{width:110px;display:flex;flex-direction:column;align-items:center;gap:2px}
.sl-stacked-logo img{display:block;object-fit:contain;width:100%;height:auto}
.sl-stacked-logo img:nth-child(2){width:65%}.sl-stacked-logo img:first-child{margin-bottom:7px}
.sl-identity>span,.sl-identity>output{font:8px/1.7 'JetBrains Mono',monospace;letter-spacing:.05em;color:var(--sl-dim)}
.sl-identity .listen-button{padding:10px 8px;min-height:42px;width:100%;font-size:11px;margin:0;gap:8px;justify-content:center}
.sl-identity>output{color:var(--mint)}
.sl-harmonics{min-width:0;padding-top:3px}
.sl-editor-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;min-height:32px}
.sl-editor-top>span,.sl-field-caption,.sl-tuning>summary,.sl-player-footer,.sl-octave>span{font:8px/1.6 'JetBrains Mono',monospace;color:var(--sl-dim);letter-spacing:.04em}
.sl-editor-top>span{color:var(--sl-cyan);white-space:nowrap}
.sl-editor-top .wave-presets{display:flex;justify-content:flex-end;gap:3px;flex-wrap:wrap;margin:0}
.sl-editor-top .wave-presets button{font:9px Inter,sans-serif;padding:5px;border:1px solid transparent;background:transparent;border-radius:2px;white-space:nowrap}
.sl-editor-top .wave-presets button[aria-pressed=true]{background:#303952;border-color:#5d6b8d;color:#e8e7f3}
.sl-harmonic-field{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--sl-field);padding:0 4px;cursor:crosshair}
.sl-harmonic-cell{min-width:0;display:grid;grid-template-rows:46px 145px 22px 34px;position:relative;text-align:center;color:var(--sl-cyan)}
.sl-harmonic-cell[data-bank=b]{color:var(--sl-purple)}
.sl-harmonic-cell>label{font:9px/22px 'JetBrains Mono',monospace;color:var(--sl-dim)}
.sl-harmonic-cell>label span{color:var(--sl-dim);opacity:.7;font-size:7px;margin-left:4px}
.sl-draw-track{position:relative;background:repeating-linear-gradient(to top,transparent 0 calc(25% - .5px),#49506566 calc(25% - .5px) 25%),var(--sl-grid);overflow:hidden}
.sl-base-level{position:absolute;left:0;right:0;bottom:0;height:var(--level);background:linear-gradient(to bottom,currentColor,color-mix(in srgb,currentColor 50%,transparent));border-top:1.5px solid #edf6ff}
.sl-motion-mark{position:absolute;left:0;right:0;bottom:var(--motion-level);height:2px;background:#eeedf6;opacity:.9;transform:translateY(1px)}
.sl-harmonic-cell[data-motion=false] .sl-motion-mark{display:none}
.sl-harmonic-cell[data-motion=true] .sl-draw-track::after{content:"";position:absolute;top:3px;left:calc(50% - 1px);height:2px;width:2px;background:#eeedf6;border-radius:50%}
.sl-harmonic-cell input{position:absolute;left:0;top:46px;height:145px;width:100%;opacity:0;pointer-events:none;touch-action:none;margin:0}
.sl-harmonic-cell:focus-within .sl-draw-track{outline:1px solid var(--mint);outline-offset:2px}
.sl-harmonic-cell>output{font:8px/22px 'JetBrains Mono',monospace;color:var(--sl-dim)}
.sl-field-caption{display:flex;justify-content:space-between;gap:15px;margin:7px 3px 0;font-size:6px}
.sl-scope{margin:9px 0 0;background:#141a26;overflow:hidden;height:70px}
.sl-scope #wave-graph{display:block;width:100%;height:100%}.sl-scope .wave-grid{stroke:#7682a91c;stroke-width:.5;fill:none}
.sl-tuning{margin-top:10px;border-top:1px solid #3b445c;padding-top:8px}
.sl-tuning>summary{cursor:pointer;color:#c5c6da;min-height:27px;list-style:revert}
.sl-tuning>summary>span{float:right;color:var(--sl-dim);font-size:6px;margin-top:2px}
.sl-bank-shapes{display:flex;gap:15px;margin:10px 0 13px}
.sl-bank-shapes label{display:flex;align-items:center;gap:8px;color:var(--sl-dim);font:8px 'JetBrains Mono',monospace}
.sl-player select{border:1px solid #47546e;background:#20293c;color:#dce0ed;border-radius:2px;padding:4px;font:10px Inter,sans-serif;max-width:100%}
#sl-assignments{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.sl-assignment{display:flex;flex-direction:column;gap:6px;align-items:stretch;color:var(--sl-dim);font:8px 'JetBrains Mono',monospace;text-align:center}
.sl-assignment button{font:8px 'JetBrains Mono',monospace;min-height:25px;padding:4px 0;border:1px solid #3c4760;border-radius:2px;background:transparent;color:var(--sl-dim)}
.sl-assignment button[aria-pressed=true]{color:#d1bdea;background:#5d477d35;border-color:#8f7cae}
.sl-character{align-self:start;padding:7px 5px 0;border:1px solid #464d65;background:#262a3b66;border-radius:3px}
.sl-panel-title{font:11px/1.7 Inter,sans-serif;text-align:center;border-bottom:1px solid #424b63;padding-bottom:5px;margin:0 4px 10px;letter-spacing:.03em}
.sl-knobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 0;justify-items:center}
.sl-knob{position:relative;display:flex;flex-direction:column;align-items:center;width:70px;color:#ae9acd;user-select:none;-webkit-user-select:none;text-align:center}
.sl-knob:nth-child(3){color:#8bbdd9}.sl-knob:nth-child(4){color:#d6ba89}.sl-knob:nth-child(5){color:#bad9d8}
.sl-knob>span:first-child{font:10px Inter,sans-serif;color:#c7c6d8;margin-bottom:0}
.knob-face{display:block;width:70px;height:70px;margin:-1px 0 -3px}.knob-face svg{width:100%;height:100%;display:block;overflow:visible}
.dial-shadow{fill:#e5e6f014}.dial-body{fill:#202636}.dial-rim{fill:none;stroke:#66738c;stroke-width:.8}.dial-lip{fill:none;stroke:currentColor;stroke-width:.65;opacity:.35}.dial-track{fill:none;stroke:#64728d;stroke-width:1.1;opacity:.45}.dial-amount{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.9}.dial-sigil{fill:none;stroke:currentColor;stroke-width:1;stroke-linejoin:round;opacity:.95}.dial-tip{fill:currentColor}.dial-stops{fill:#8b94aa;opacity:.48}
.sl-knob input{position:absolute;top:14px;left:0;width:70px;height:70px;opacity:0;margin:0;cursor:ns-resize;touch-action:none}
.sl-knob:focus-within .dial-rim,.sl-knob[data-dragging=true] .dial-rim{stroke:#d9efe8;stroke-width:1.2}
.sl-knob>output{font:10px/1.6 'JetBrains Mono',monospace;color:var(--sl-text);min-height:16px}
.sl-octave{border-top:1px solid #424b63;margin:16px 5px 0;padding:11px 0 10px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.sl-octave>div{display:flex;gap:2px}.sl-octave button{border:1px solid #434a62;background:#1a2030;color:var(--sl-dim);font:9px 'JetBrains Mono',monospace;padding:4px 7px}.sl-octave button[aria-pressed=true]{background:#8cadd529;border-color:#97b0c1;color:#d7e7ed}
.sl-player-footer{grid-column:2/-1;display:flex;justify-content:space-between;gap:25px;font-size:8px;padding-top:1px;letter-spacing:0}
.sl-player-footer p{margin:0!important;color:var(--sl-dim)!important;font:inherit!important;max-width:none!important}.sl-player-footer #player-help{max-width:270px!important;text-align:right;color:#9aa3ba!important}
.sl-player .mini-keyboard-wrap{grid-column:1/-1;padding-top:7px}.sl-player .mini-keyboard{height:95px;margin-top:10px}.sl-player .piano-key.white{background:linear-gradient(90deg,#bec5d3,#d1d3df 40%,#b8bfce);border-radius:0 0 3px 3px}.sl-player .piano-key.black{background:linear-gradient(90deg,#111827,#252c41,#111827);border-radius:0 0 3px 3px}
.sl-player .keyboard-caption{font-size:6px}.sl-player input:focus-visible{outline:none}
@media(max-width:1100px){.sl-player{grid-template-columns:105px minmax(0,1fr) 210px;gap:12px;padding:13px}.sl-stacked-logo{width:86px}.sl-knob{width:64px}.knob-face,.sl-knob input{width:64px;height:64px}.sl-harmonic-field{gap:4px}.sl-editor-top{display:block}.sl-editor-top .wave-presets{justify-content:flex-start;margin-top:7px}.sl-character{padding-left:3px;padding-right:3px}}
@media(max-width:900px){.sl-player{grid-template-columns:100px minmax(0,1fr)}.sl-character{grid-column:2;margin-top:-5px}.sl-knobs{grid-template-columns:repeat(5,minmax(0,1fr))}.sl-octave{margin-top:9px;justify-content:flex-end;gap:15px}.sl-panel-title{font-size:10px;margin-bottom:8px}.sl-player-footer{display:block}.sl-player-footer #player-help{max-width:none!important;text-align:left;margin-top:6px!important}.sl-identity{grid-row:1/3}.sl-character{width:100%}.sl-knob{width:60px}.knob-face,.sl-knob input{width:60px;height:60px}}
@media(max-width:600px){.sl-player{grid-template-columns:minmax(0,1fr);gap:14px;padding:13px 11px;margin-left:0;margin-right:0}.sl-identity{grid-row:auto;flex-direction:row;justify-content:space-between;gap:14px;border-right:0;border-bottom:1px solid #3c455d;padding:0 0 13px}.sl-stacked-logo{width:86px;display:block;flex-shrink:0}.sl-stacked-logo img{display:none}.sl-stacked-logo img:first-child{display:block;margin:0}.sl-identity>span{display:none}.sl-identity .listen-button{width:auto;padding:9px 12px}.sl-identity>output{font-size:7px}.sl-character{grid-column:auto;margin:0}.sl-player-footer{grid-column:auto}.sl-editor-top>span{font-size:8px}.sl-editor-top .wave-presets button{padding:6px;font-size:10px}.sl-harmonic-cell{grid-template-rows:46px 130px 22px 38px}.sl-harmonic-cell input{top:46px;height:130px}.sl-harmonic-field{gap:4px;padding:0 2px}.sl-harmonic-cell>label{font-size:8px;line-height:24px}.sl-harmonic-cell>label span{display:none}.sl-field-caption{font-size:5px;gap:7px}.sl-knobs{gap:0}.sl-knob{width:56px}.knob-face,.sl-knob input{width:56px;height:56px}.sl-knob>span:first-child{font-size:9px}.sl-knob>output{font-size:8px}.sl-player .mini-keyboard{height:90px}.sl-player .piano-key span{display:none}.sl-bank-shapes{gap:12px}.sl-bank-shapes label{font-size:7px;gap:4px}.sl-assignment{font-size:7px}.sl-assignment select{font-size:9px;padding:3px 1px}.sl-tuning>summary{font-size:9px}}

@media(max-width:600px){#sl-assignments{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:12px}.sl-assignment{font-size:9px}.sl-assignment button{min-height:35px;font-size:10px}.sl-assignment select{padding:7px 4px;font-size:11px}}

/* Per-slot tuning and Motion belong to the harmonic field, always in view. */
.sl-harmonic-cell>.sl-slot-caption{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;padding:0 0 5px;font:8px/13px 'JetBrains Mono',monospace}
.sl-harmonic-cell>.sl-slot-caption>span{display:block;margin:0;font-size:8px;opacity:.85;line-height:13px}
.sl-player .sl-slot-caption select{width:100%;height:25px;min-width:0;font:10px Inter,sans-serif;padding:3px 4px;color:#e1e3ef;background:#242e43;border-color:#4c5874}
.sl-slot-motion{display:flex;justify-content:center;align-items:center;gap:7px;width:100%;margin:0;border:1px solid #49536b;border-radius:2px;color:#a9b1c7;background:#22293b;font:9px/1.2 Inter,sans-serif;cursor:pointer;touch-action:manipulation}
.sl-slot-motion b{font:8px 'JetBrains Mono',monospace;color:#a9b1c7}
.sl-slot-motion[aria-pressed=true]{background:#51426e55;border-color:#a58ac9;color:#e6d5fa}
.sl-slot-motion[aria-pressed=true] b{color:#eee4ff}
.sl-slot-motion:focus-visible,.sl-slot-caption select:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media(max-width:600px){.sl-player .sl-slot-caption select{font-size:10px;padding:3px 1px}.sl-slot-motion{flex-direction:column;gap:2px;font-size:7px}.sl-slot-motion b{font-size:7px}}