.string-neck-caption{font-size:13px;font-weight:700;color:var(--text-muted,#aab9cd);margin:10px 0 5px}
.string-neck-scroll{overflow-x:auto;direction:ltr;border:1px solid var(--border,#455367);border-radius:10px;background:var(--panel-2,#1f2937);overscroll-behavior-x:contain}
.string-instrument-neck{display:block;width:100%;height:auto;cursor:pointer;touch-action:pan-x pan-y;user-select:none}
.string-instrument-neck:focus-visible{outline:2px solid #78b9ff;outline-offset:-3px}
.string-neck-hint{font-size:11px;color:var(--text-muted,#aab9cd);margin-top:5px}
.string-instrument-picker{display:flex;justify-content:center;gap:5px;margin:4px 0}
.string-instrument-picker button{display:grid;justify-items:center;gap:2px;min-width:0;flex:1;max-width:100px;padding:3px 5px;border:1px solid var(--border,#455367);border-radius:8px;background:var(--panel-2,#1f2937);color:var(--text,#dce4ef);cursor:pointer}
.string-instrument-picker button[aria-pressed=true]{border-color:#78b9ff;background:color-mix(in srgb,#78b9ff 18%,var(--panel,#17202d));box-shadow:inset 0 0 0 1px #78b9ff}
.string-instrument-picker img{width:34px;height:34px;object-fit:contain}
.string-instrument-picker span{font-size:10px;line-height:1.2;text-align:center}
.string-sound-tools{display:flex;align-items:center;gap:8px;position:relative}
.string-play{padding:7px 16px;border-radius:8px;background:#00b887;color:#072e27;font-weight:700;white-space:nowrap;cursor:pointer}
#root>div{height:100dvh;min-height:0!important;padding:14px 24px!important;gap:8px!important}
#root>div>header{margin:0!important}
#root>div>header h1{font-size:clamp(22px,3vw,36px)!important;margin:0!important}
#root>div>header p,#root>div>.text-center{display:none!important}
#root>div>.flex-1{gap:8px!important;min-height:0}
#string-workbench{flex:1;min-height:0;gap:4px;padding:12px!important;overflow:visible!important}
#string-workbench>div:first-child{gap:8px!important;margin-bottom:4px!important}
#string-workbench>div:first-child>div{gap:8px!important;flex-wrap:wrap;font-size:12px!important}
#string-motion{height:auto!important;flex:1;min-height:50px}
#string-workbench .string-instrument-neck{max-height:29dvh;width:100%;height:auto}
.string-neck-caption{margin:4px 0 2px;font-size:12px}
.string-neck-hint{margin-top:2px;font-size:10px}
#root canvas{max-height:100%;width:100%;height:100%}
#root>div>.flex-1>div:last-child:not(#string-workbench){flex:0 0 100px;min-height:0;gap:8px!important;display:flex!important}
#root>div>.flex-1>div:last-child:not(#string-workbench)>div{height:100%;flex:1;min-width:0;margin:0!important}
#root>div>.flex-1>div:last-child:not(#string-workbench)>div:has(.string-sound-tools){display:none!important}
@media(max-width:767px){
 #root>div{padding:58px 10px 10px!important}
 #root>div>header h1{font-size:22px!important}
 #root>div>header svg{width:26px;height:26px}
 #string-workbench{padding:8px!important}
 #string-workbench>div:first-child{flex-direction:column!important}
 #root>div>.flex-1>div:last-child:not(#string-workbench){flex-basis:75px}
 .string-instrument-neck{max-width:100%}
 .string-instrument-picker img{width:27px;height:27px}
 .string-instrument-picker span{display:none}
}
@media(max-height:550px){
 #root>div{padding:8px 56px!important;gap:4px!important}
 #root>div>header h1{font-size:20px!important}
 #root>div>header svg{width:22px;height:22px}
 #string-workbench{padding:5px!important}
 #string-workbench>div:first-child{flex-direction:row!important}
 #string-workbench>div:first-child button{padding:4px 8px!important;font-size:11px!important}
 #root>div>.flex-1>div:last-child:not(#string-workbench){flex-basis:55px}
 .string-neck-hint{display:none}
 .string-instrument-picker img{width:24px;height:24px}
 .string-instrument-picker span{display:none}
}