/* Language controls remain at the edge of the playing surface. */
.locale-trigger{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:7px 11px;border:1px solid #dce5ec;border-radius:16px;color:#486173;font-family:inherit;font-weight:600;font-size:12px;line-height:1.1;background:rgba(255,255,255,.82);cursor:pointer;box-shadow:0 4px 16px #263d4b09;flex-shrink:0;transition:background .18s,transform .18s}
.locale-trigger:hover{background:#fff;transform:translateY(-1px)}
.locale-page{position:fixed;right:max(14px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:70;backdrop-filter:blur(18px)}
.locale-panel{margin-inline-start:auto;min-height:36px;padding:6px 9px;border-radius:12px}
.workspace-panel-heading:has(.locale-panel)>strong{flex:initial;min-width:0}
.locale-dialog{position:fixed;margin:auto;padding:22px;border:1px solid #fff;border-radius:28px;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;color:#293b4e;background:rgba(248,251,253,.98);box-shadow:0 24px 90px #19314029;box-sizing:border-box;animation:locale-appear .2s ease-out}
.locale-dialog::backdrop{background:#1d344b25;backdrop-filter:blur(5px)}
.locale-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.locale-dialog h2{font-size:19px;letter-spacing:-.5px;margin:0}
.locale-dialog header .icon-button{width:40px;height:40px;flex-shrink:0}
.locale-options{display:grid;gap:7px}
.locale-options>button{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 12px;text-align:left;border:1px solid transparent;border-radius:16px;background:#fff;color:#334d61;cursor:pointer;font:inherit;transition:background .18s,border-color .18s,transform .18s}
.locale-options>button:hover{background:#edf5f7;transform:translateX(2px)}
.locale-options>button[aria-pressed=true]{background:#e7f6f2;border-color:#acdace;color:#0c7c69}
.locale-code{font-size:12px;font-weight:700;letter-spacing:.04em;background:#eef3f7;border-radius:10px;padding:8px}
.locale-check{margin-inline-start:auto;opacity:0;font-size:18px}.locale-options>button[aria-pressed=true] .locale-check{opacity:1}
.notation-description{display:grid;gap:3px}.notation-description strong{font-size:14px}.notation-description small{font-size:12px;color:#637e8b}.notation-flag{font-size:23px}
.locale-hint{font-size:12px;color:#667e8b;margin:14px 0 0}
.note-display-control{display:flex;align-items:center;gap:7px}
.note-display-control .label-selector{min-width:0;flex:1}
.note-language-trigger{display:none;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:40px;padding:5px 7px;border:1px solid #dbe6ed;border-radius:13px;color:#587184;background:#ffffffcb;cursor:pointer;flex-shrink:0}
body[data-note-labels=names] .note-language-trigger{display:inline-flex;animation:notation-arrive .45s ease-out}
.note-language-trigger span{font-size:18px}.note-language-trigger small{font-size:10px;font-weight:650}
.note-language-trigger:hover{background:#eff8f5}
@keyframes locale-appear{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes notation-arrive{0%{opacity:0;transform:scale(.85) rotate(-8deg)}65%{transform:scale(1.06) rotate(3deg)}100%{opacity:1;transform:none}}
@media(max-width:600px){.locale-trigger{min-height:40px}.workspace-panel-heading{gap:7px}.locale-panel{padding:6px 8px;min-width:56px}.locale-panel svg{width:15px}.workspace-panel-heading>strong{font-size:18px}.note-language-trigger small{display:none}.label-selector button{padding-left:7px;padding-right:7px}}
@media(orientation:landscape) and (max-height:600px){.locale-page{right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top))}.locale-dialog{padding:14px 20px}.locale-options>button{min-height:45px;padding:7px 10px}.locale-dialog header{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.locale-dialog,body[data-note-labels=names] .note-language-trigger{animation:none}.locale-trigger,.locale-options>button{transition:none}}
#instrument-view.controls-open>.locale-page{visibility:hidden}
.label-selector:has(.note-names-segment){grid-template-columns:minmax(max-content,1.2fr) repeat(calc(var(--label-count,3) - 1),minmax(0,1fr));width:100%;direction:ltr}
.label-selector:has(.note-names-segment) .selection-thumb{display:none}
.note-names-segment{display:flex;align-items:center;justify-content:center;gap:1px;min-width:0;border-radius:9px;transition:background .2s,box-shadow .2s}
.label-selector .note-names-segment:has([aria-checked=true]),.label-selector:has(.note-names-segment)>button[aria-checked=true]{background:white;box-shadow:0 2px 6px #47607519}
.label-selector .note-names-segment .note-language-trigger{display:none;min-width:30px;min-height:34px;padding:3px;margin-inline-end:3px;border:0;border-radius:8px;background:transparent;flex:none}
body[data-note-labels=names] .label-selector .note-language-trigger{display:inline-flex}
.label-selector .note-language-trigger small{display:none}
.note-names-segment>[data-label-mode]{flex:1;padding-inline:6px}
.label-selector .note-language-trigger:hover{background:#dbeeea}
@media(max-width:600px){.workspace-panel-heading>strong{font-size:15px;line-height:1.2}.workspace-panel-heading .locale-panel{min-width:48px;padding:6px}.workspace-panel-heading .locale-panel svg{display:none}}
/* Menus follow the reader; instruments, wheel geometry and musical timelines
   keep their physical left/right and first-to-last order in every language. */
.workspace,#instrument-view,#stage-canvas,#pan-layer,#connections,#photo-overlay,
#wheel-dock,.rotation-controls,.octave-row,.note-palette,.inspire-grid,
.arp-progression,.loop-parts,input[type=range]{direction:ltr}
html[dir=rtl] #control-panel,html[dir=rtl] dialog,html[dir=rtl] .workspace-panel-heading,
html[dir=rtl] .wheel-label,html[dir=rtl] .workspace-popover{direction:rtl}
html[dir=rtl] .section-label,html[dir=rtl] .locale-options>button,
html[dir=rtl] .field-label,html[dir=rtl] .create-path{ text-align:start }
html[dir=rtl] .section-chevron{margin-inline-start:auto;margin-inline-end:0}
html[dir=rtl] input[type=text],html[dir=rtl] input:not([type]),
html[dir=rtl] [translate=no]{unicode-bidi:plaintext}
.note-pitch,.note-number,.palette-note,.chord-symbol,.arp-degree{direction:ltr;unicode-bidi:isolate}
body[data-note-notation=fa] .note-pitch{direction:rtl;letter-spacing:normal}
html:lang(fa) body{font-family:Tahoma,"Segoe UI",system-ui,sans-serif}
html:lang(fa) :is(h1,h2,h3,.eyebrow,.section-label,.wheel-label,button){letter-spacing:normal}
html:is(:lang(zh),:lang(ja)) :is(h1,h2,h3,.eyebrow,button){letter-spacing:normal}
html:is(:lang(zh),:lang(ja)) .section-label{line-height:1.5}
.locale-options strong,.notation-description{min-width:0;overflow-wrap:anywhere}
.workspace-panel-heading>strong{overflow-wrap:anywhere}
html[dir=rtl] .locale-options>button:hover{transform:translateX(-2px)}
@media(prefers-reduced-motion:reduce){html[dir=rtl] .locale-options>button:hover{transform:none}}
/* A separate, tactile notation button, even inside the Names segment. */
.label-selector .note-names-segment .note-language-trigger{min-width:40px;min-height:36px;margin:2px 3px;padding:4px 6px;border:1px solid #a9cabc;border-radius:10px;background:linear-gradient(145deg,#fff,#e5f3ed);box-shadow:0 2px 5px #315d4b13,inset 0 1px 0 #fff}
.label-selector .note-language-trigger>span{display:inline-block;transform-origin:50% 80%;animation:notation-flag-wave 7s ease-in-out infinite}
.label-selector .note-language-trigger:hover,.label-selector .note-language-trigger:focus-visible{background:#dcefe6;border-color:#6ea78e;box-shadow:0 0 0 3px #bfded24f;outline-offset:2px}
@keyframes notation-flag-wave{0%,70%,100%{transform:none}76%{transform:rotate(-9deg) translateY(-1px)}83%{transform:rotate(8deg) translateY(-1px)}90%{transform:rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.label-selector .note-language-trigger>span{animation:none}}