:root{color-scheme:dark;--bg:#0b0f16;--panel:#131923;--line:#28303d;--muted:#8e9aad;--text:#e7ebf1;--green:#a7ef75;--mono:Consolas,'Courier New',monospace;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button,select{color:inherit}button,a,summary,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.36}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}button,select{border:1px solid var(--line);background:#1a2230}svg{width:24px;height:24px;flex-shrink:0}h1,h2,h3,p{margin:0}h2,h3{font-weight:600}.mono{font-family:var(--mono)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip-link{position:fixed;top:-100px;left:20px;padding:12px;background:var(--green);color:#111;z-index:99}.skip-link:focus{top:10px}.workspace{min-height:740px;height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 75% 0%,#19252455,transparent 42%),var(--bg)}.topbar{height:78px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;font-size:24px;font-weight:750;letter-spacing:-1px;gap:10px}.brand-icon{display:grid;place-items:center;background:var(--green);color:#152015;width:42px;height:42px;border-radius:12px;transform:rotate(-7deg)}.brand-icon svg{width:30px;height:30px}.brand-accent{color:var(--green)}.brand small{display:block;font-size:8px;letter-spacing:2px;color:var(--muted);margin-top:5px;font-weight:500}.topbar-right{display:flex;gap:30px;align-items:center}.local{font-size:12px;color:#b9c4b8;display:flex;gap:8px;align-items:center}.local svg{width:17px;color:var(--green)}.language{font:11px var(--mono);border:1px solid var(--line);padding:9px 12px;border-radius:7px;color:#bac4d2}.app-layout{display:flex;flex:1;min-height:0}.sidebar{width:170px;flex-shrink:0;border-right:1px solid var(--line);padding:32px 14px 20px;display:flex;flex-direction:column}.nav-caption{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#727e91;padding-left:14px;margin-bottom:23px}.sidebar nav{display:grid;gap:8px}.nav-item{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:8px;font-size:13px;min-height:52px}.nav-item svg{width:21px}.nav-item.active{background:#a7ef7510;color:var(--green);border:1px solid #a7ef7528}.nav-item i{width:5px;height:5px;border-radius:50%;background:var(--green);margin-left:auto}.upcoming{color:#7f8a9b}.upcoming small{display:block;font-size:9px;line-height:1.6;color:#818b9d}.sidebar-bottom{margin-top:auto;font:8px var(--mono);color:#9ba5b4;line-height:2}.sidebar-bottom small{display:block;font-family:Segoe UI,sans-serif;font-size:10px;color:#7e899a}.online-dot{display:inline-block;background:var(--green);width:5px;height:5px;border-radius:50%;margin-right:6px}.tester{min-width:0;max-width:1800px;width:100%;margin:0 auto;min-height:0;align-self:stretch;display:flex;flex-direction:column;padding:24px 28px 12px;gap:16px}.page-heading{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.eyebrow{font:9px var(--mono);letter-spacing:2.2px;color:var(--green);margin-bottom:8px}h1{font-size:32px;letter-spacing:-1.2px;font-weight:650;display:flex;align-items:center;gap:14px}.version{font:10px var(--mono);letter-spacing:0;color:#788499;border:1px solid var(--line);padding:4px 7px;border-radius:5px}.subtitle{font-size:12px;margin-top:7px;color:var(--muted)}.icon-button{border-radius:8px;width:36px;height:36px;font-size:25px;color:#9ba6b8}.device-bar{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:10px;background:#151c25;padding:12px 16px;min-height:64px;flex-shrink:0}.status-orb{width:10px;height:10px;border:2px solid #9dabb9;border-radius:50%;box-shadow:0 0 0 5px #96a5b60b;flex-shrink:0}.status-orb.connected{background:var(--green);border-color:var(--green);box-shadow:0 0 14px #a7ef7540}.device-info{display:flex;flex-direction:column;gap:5px;min-width:0}.device-info strong{font-size:12px;font-weight:600}.device-info>span{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-select{margin-left:auto;max-width:34%;flex-shrink:0}.device-select select{width:100%;text-overflow:ellipsis;font-size:10px;border-radius:6px;padding:8px;background:#0e141d;color:#9cabbc}.dashboard{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:16px;flex:1;min-height:0}.panel{border:1px solid var(--line);background:linear-gradient(130deg,#161d29,#111720);border-radius:12px;overflow:hidden;min-width:0}.panel-heading{height:45px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #252d3a}.panel-heading h2{font-size:10px;text-transform:uppercase;letter-spacing:1.7px;color:#adb7c7}.live-indicator{display:flex;align-items:center;gap:5px;font:8px var(--mono);letter-spacing:1px;color:var(--muted)}.live-indicator span{width:4px;height:4px;border-radius:100%;background:var(--green)}.chip{font:9px var(--mono);color:#8593a8;border:1px solid var(--line);padding:3px 6px;border-radius:4px}.controller-panel{display:flex;flex-direction:column}.controller-stage{min-height:160px;flex:1;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,#709d9110,transparent 68%);padding:4px 16px 22px}.controller-stage:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#73839625 .8px,transparent .8px);background-size:20px 20px;mask-image:radial-gradient(ellipse,black,transparent 70%)}.controller{width:100%;height:100%;max-height:360px;position:relative;z-index:1;overflow:visible}.controller-stage>p{position:absolute;bottom:8px;font:8px var(--mono);color:#8492a6;letter-spacing:1.5px;text-align:center;max-width:95%}.pad-button{fill:#1a2130;stroke:#59667b;stroke-width:1.4;transition:fill 60ms,stroke 60ms}.pad-button text{font:600 14px Segoe UI,sans-serif;text-anchor:middle;stroke:none;fill:#aeb9cb}.pad-button.active{fill:#a7ef75;stroke:#d6ffb8;filter:drop-shadow(0 0 5px #a7ef7560)}.pad-button.active text{fill:#192818}.pad-button.face.a text{fill:#a7ef75}.pad-button.face.b text{fill:#f6919c}.pad-button.face.x text{fill:#88baff}.pad-button.face.y text{fill:#edd488}.pad-button.face.active text{fill:#192818}.stick-shell circle{fill:#0c121d;stroke:#445067;stroke-width:2}.stick-cap circle{fill:#2c3546;stroke:#627088}.stick-cap .stick-ring{fill:none;stroke:#414d64}.stick-cap.active circle{fill:var(--green)}.shoulder text{font-size:12px}.controller-brand{font:7px var(--mono);letter-spacing:2px;fill:#929eb2;text-anchor:middle}.button-section{padding:10px 18px 13px;border-top:1px solid #252d3a;flex-shrink:0}.mini-heading{display:flex;align-items:center;justify-content:space-between;color:#a8b4c6;font-size:10px;margin-bottom:10px}.mini-heading h3{font-size:10px}.mini-heading>.mono{font-size:9px;color:#7c8ba0}.button-grid{display:flex;flex-wrap:wrap;gap:5px;min-height:27px;max-height:64px;overflow:auto}.button-chip{font:9px var(--mono);padding:6px 5px;border:1px solid #344052;border-radius:4px;min-width:25px;text-align:center;color:#9aa8bd}.button-chip.seen{border-color:#709855;color:#b0d69b}.button-chip.active{background:var(--green);color:#182512;border-color:var(--green)}.empty-values{font-size:11px;color:#8390a4;align-self:center}.panel-footer{display:flex;align-items:center;gap:4px;font-size:9px;color:#8897ac;height:31px;flex-shrink:0;background:#0d131d;padding:0 18px}.panel-footer .mono{margin-left:auto}.analytics-panel{display:flex;flex-direction:column}.sticks{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 18px 12px;flex:1;min-height:0}.stick-card{min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:center}.stick-plot{position:relative;margin:0 auto;aspect-ratio:1;width:100%;max-width:160px;min-height:65px;flex:none;border:1px solid #405067;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 24%,#73859919 24.5% 25%,transparent 25.5% 49%);overflow:hidden}.stick-plot:before,.stick-plot:after{content:'';position:absolute;background:#3b485d}.stick-plot:before{height:1px;width:100%;top:50%}.stick-plot:after{width:1px;height:100%;left:50%}.reference-circle{position:absolute;left:50%;top:50%;width:10%;height:10%;border:1px solid #a7ef7540;border-radius:50%;transform:translate(-50%,-50%);background:#a7ef7512}.stick-dot{position:absolute;width:7px;height:7px;top:50%;left:50%;transform:translate(-50%,-50%);background:#8290a4;border-radius:50%;z-index:2}.has-pad .stick-dot{background:var(--green);box-shadow:0 0 10px #a7ef7550}.coordinates{display:flex;justify-content:space-between;font-size:9px;color:#728198;margin-top:10px;gap:4px}.coordinates b{font-weight:400;color:#c0cad8}.offset{font-size:8px;color:#8796ab;display:flex;justify-content:space-between;margin-top:9px;gap:4px}.offset b{color:#b3c3d6;font-weight:400}.offset b.warning{color:#f5c17e}.threshold-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin:0 18px;font-size:10px;color:#a6b3c6}.threshold-row output{font:10px var(--mono);color:var(--green)}.threshold-row input{grid-column:1/-1;width:100%;height:5px;margin:4px 0;accent-color:var(--green)}.hint{font-size:9px;color:#8d9bb0;line-height:1.5;margin:5px 18px 8px}.trigger-section{border-top:1px solid var(--line);padding:12px 18px 3px}.trigger-row{display:flex;gap:10px;align-items:center;font:9px var(--mono);margin-bottom:10px}.trigger-row label{color:#a9b5c7;min-width:43px}.trigger-row meter{flex:1;min-width:0;height:8px;border:0;background:#283244;border-radius:4px}.trigger-row meter::-webkit-meter-bar{background:#283244;border:0}.trigger-row meter::-webkit-meter-optimum-value{background:var(--green)}.trigger-row meter::-moz-meter-bar{background:var(--green)}.trigger-row output{width:35px;text-align:right;color:#bac8d9}.drift-help{margin-bottom:12px}.action-row{display:flex;gap:14px;flex-shrink:0;align-items:stretch}.test-actions{display:flex;align-items:center;gap:7px;flex:1;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #354054;background:#19212e;color:#d2dae5;border-radius:7px;padding:11px 13px;font-size:11px;white-space:nowrap;transition:background .15s}.button:hover:not(:disabled){background:#263344;border-color:#647b59}.button.primary{color:#1b2814;background:var(--green);border-color:var(--green);font-weight:650}.button.primary:hover:not(:disabled){background:#baf58f}.help-button{padding:10px 15px;min-width:226px;display:flex;align-items:center;gap:12px;background:#a7ef7510;border:1px solid #7cad584d;border-radius:8px}.help-button:hover{background:#a7ef7520}.help-mark{width:27px;height:27px;border:1px solid #b5ec8666;border-radius:50%;display:grid;place-items:center;color:var(--green);font:16px var(--mono)}.help-button>span:nth-child(2){font-size:11px;letter-spacing:.6px;font-weight:650;color:var(--green)}.help-button small{display:block;font-size:9px;font-weight:400;letter-spacing:0;color:#a5b69f;margin-top:5px}.help-button svg{width:18px;margin-left:auto;color:var(--green)}.workspace-foot{display:flex;justify-content:space-between;gap:12px;color:#7d8a9c;font-size:9px;flex-shrink:0}.workspace-foot a{white-space:nowrap;color:#b1bfcf}.below-fold{max-width:1180px;padding:0 40px;margin:auto}.content-section{padding:64px 0;border-bottom:1px solid var(--line);scroll-margin-top:24px}.section-label{font:10px var(--mono);letter-spacing:1.6px;color:var(--green);margin-bottom:16px}.content-section h2{font-size:25px;letter-spacing:-.6px;margin-bottom:14px}.content-section p{font-size:13px;color:var(--muted);line-height:1.8;max-width:760px}.raw-values{margin:20px 0;display:flex;gap:8px;flex-wrap:wrap;font:11px var(--mono);color:#9eafc5}.raw-values span{border:1px solid var(--line);padding:8px;border-radius:4px}.guide-section{display:grid;grid-template-columns:1fr 1fr;gap:50px}.guide-section ol{padding-left:25px;margin:0;color:#b5c0d0;font-size:13px;line-height:1.8}.guide-section li{padding-left:8px;margin-bottom:14px}.guide-section li::marker{color:var(--green);font-family:var(--mono)}.faq-section{display:grid;grid-template-columns:1fr 1.7fr;gap:60px}.faq-intro h2{font-size:35px;line-height:1.25}.faq-intro h2 span{color:var(--green)}.faq-intro .button{margin-top:24px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{cursor:pointer;list-style:none;display:flex;gap:16px;align-items:center;font-size:13px;line-height:1.5;padding:20px 0}.faq-list summary::-webkit-details-marker{display:none}.faq-number{font:9px var(--mono);color:#6d7b90}.plus{margin-left:auto;color:var(--green);font-size:22px}.faq-list details[open] .plus{transform:rotate(45deg)}.faq-list details p{padding:0 20px 24px 31px;font-size:12px}.browser-help{display:flex;align-items:center;justify-content:space-between;gap:30px}.browser-help h2{font-size:18px}footer{display:flex;justify-content:space-between;align-items:center;padding:35px 0;gap:20px;color:#79879b;font-size:10px}footer .brand{font-size:18px;gap:0}.notice{background:#342d20;border:1px solid #8b723f;color:#f6d59a;border-radius:7px;padding:10px;font-size:11px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#243326;border:1px solid #7b9b66;color:#d8f4cc;box-shadow:0 10px 40px #0007;padding:14px 20px;border-radius:8px;font-size:13px;max-width:90%;width:max-content;z-index:20}dialog{background:#151d29;border:1px solid #45516a;color:var(--text);border-radius:14px;padding:32px;max-width:500px;width:calc(100% - 32px)}dialog::backdrop{background:#03060bd9;backdrop-filter:blur(5px)}dialog h2{margin:10px 0 15px;font-size:26px}dialog p{color:#a9b5c7;font-size:13px;line-height:1.7}.close-dialog{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:26px}.dialog-actions{display:flex;gap:10px;margin-top:24px}#mapping-step{background:#0b121d;padding:22px;margin-top:20px;border-radius:8px;text-align:center;font-size:20px;color:var(--green);min-height:80px;white-space:pre-line}.workspace:fullscreen{height:100vh;overflow:auto}
@media(min-width:1400px){.tester{padding:28px 38px 18px;gap:20px}.sidebar{width:190px}.dashboard{grid-template-columns:minmax(0,1.7fr) minmax(350px,1fr)}h1{font-size:38px}.controller{max-height:460px}.stick-plot{max-width:210px}.sticks{padding:20px 24px}.button-chip{min-width:29px;padding:8px}.button-section{padding:14px 20px}.panel-heading{height:50px}.hint{font-size:10px}.button{font-size:12px;padding:13px 15px}.help-button{min-width:260px}.trigger-row{margin-bottom:15px}.trigger-section{padding-top:18px}.offset,.coordinates{font-size:10px}}
@media(min-width:1000px) and (max-height:900px){.workspace{min-height:640px}.topbar{height:62px}.tester{padding:14px 22px 10px;gap:11px}.page-heading .eyebrow{margin-bottom:4px}h1{font-size:28px}.subtitle{margin-top:4px}.device-bar{min-height:55px;padding:9px 14px}.panel-heading{height:36px}.sticks{padding:10px 15px 7px;gap:14px}.stick-plot{max-width:120px}.hint{font-size:8px;margin-top:3px;margin-bottom:5px}.trigger-section{padding-top:8px}.trigger-row{margin-bottom:8px}.controller-stage{min-height:140px}.controller{max-height:270px}.button-section{padding:8px 14px}.mini-heading{margin-bottom:7px}.action-row .button{padding:10px;font-size:10px}.help-button{min-width:210px;padding:8px 12px}.workspace-foot{font-size:8px}}
@media(max-width:1100px){.sidebar{width:76px;padding:28px 10px}.nav-caption,.nav-item span,.nav-item i,.sidebar-bottom{display:none}.nav-item{justify-content:center;padding:14px}.tester{padding-left:20px;padding-right:20px}.dashboard{grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr)}.test-actions{gap:5px}.button{padding:10px;font-size:10px}.help-button{min-width:208px}}
@media(max-width:999px){.workspace{height:auto;min-height:100svh}.topbar{height:70px;padding:0 20px}.topbar-right .local{display:none}.brand{font-size:21px}.app-layout{display:block}.sidebar{width:100%;padding:8px 14px;border-right:0;border-bottom:1px solid var(--line)}.sidebar nav{display:flex;justify-content:space-between;gap:5px}.nav-item{padding:9px 10px;min-height:40px}.nav-item span{display:block;font-size:10px}.nav-item small{display:none}.nav-item svg{width:18px}.tester{gap:14px;padding:22px 20px}.dashboard{grid-template-columns:1fr}.controller-stage{height:290px;flex:auto}.analytics-panel{padding-bottom:8px}.sticks{padding:18px;max-width:500px;width:100%;align-self:center}.stick-plot{min-height:120px;max-width:155px;flex:auto}.coordinates,.offset{font-size:11px}.hint{font-size:11px}.threshold-row{font-size:12px}.trigger-row{font-size:12px}.action-row{flex-direction:column}.test-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.button{font-size:12px;padding:12px}.help-button{padding:15px}.help-button>span:nth-child(2){font-size:13px}.help-button small{font-size:11px}.workspace-foot{font-size:10px;line-height:1.6}.device-bar{flex-wrap:wrap}.device-info{flex:1}.device-select{width:100%;max-width:100%;margin:0}.device-info>span{white-space:normal;line-height:1.5}.device-select select{width:100%}.below-fold{padding:0 22px}.content-section{padding:42px 0}.faq-section,.guide-section{grid-template-columns:1fr;gap:28px}.faq-intro h2{font-size:30px}.faq-intro h2 br{display:none}.faq-intro h2 br:after{content:' '}.browser-help{align-items:flex-start;flex-direction:column;gap:15px}footer{flex-wrap:wrap}.button-grid{max-height:none}.panel-heading h2{font-size:11px}}
@media(max-width:480px){.nav-item span{display:none}.sidebar nav{justify-content:space-around}.topbar{padding:0 15px}.topbar-right{gap:0}.brand small{font-size:6px;letter-spacing:1.5px}.brand-icon{width:35px;height:35px}.brand{font-size:20px}.tester{padding:20px 14px}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:28px}.controller-stage{height:235px;padding:4px 4px 24px}.button-chip{padding:6px;min-width:27px}.workspace-foot{flex-direction:column}.page-heading .icon-button{display:none}.faq-list summary{font-size:13px;gap:10px}.faq-intro h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

@media(min-width:1000px) and (min-height:741px) and (max-height:900px){.stick-plot{max-width:160px}.controller{max-height:320px}}

/* Reserve text rows, then fit each circular graph to BOTH available dimensions.
   A size container prevents the graph's width from imposing a minimum row height. */
.analytics-panel > :not(.sticks) { flex-shrink: 0; }
.sticks { grid-template-rows: minmax(0, 1fr); }
.stick-card {
  min-height: 0;
  display: grid;
  justify-content: stretch;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.plot-space {
  min-width: 0;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}
.stick-plot {
  width: min(100cqw, 100cqh, 210px);
  height: min(100cqw, 100cqh, 210px);
  max-width: none;
  min-height: 0;
  flex: none;
}
@media (min-width: 1000px) {
  .controller-stage { min-height: 0; }
  .controller {
    position: absolute;
    inset: 8px 16px 26px;
    width: calc(100% - 32px);
    height: calc(100% - 34px);
    max-height: none;
  }
}
@media (max-width: 999px) {
  .sticks { flex: none; }
  .stick-card { grid-template-rows: auto auto auto auto; }
  .plot-space { height: clamp(100px, 30vw, 155px); }
}
@media (max-width: 480px) {
  .topbar #fullscreen { display: none; }
}

.language-picker { position: relative; flex-shrink: 0; }
.language-picker > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  background: #101720;
}
.language-picker > summary::-webkit-details-marker { display: none; }
.language-picker > summary:hover,
.language-picker[open] > summary { border-color: #7cad58; color: var(--green); }
.language-picker > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.language-panel {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + 12px);
  width: min(300px, calc(100vw - 30px));
  max-height: calc(100svh - 100px);
  overflow-y: auto;
  padding: 16px;
  background: #151d29;
  border: 1px solid #45516a;
  border-radius: 10px;
  box-shadow: 0 16px 45px #0008;
}
.language-panel > strong { display: block; font-size: 13px; }
.language-panel > p { color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 6px; }
.language-panel ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 3px; }
.language-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  font-size: 12px;
}
.language-option[aria-current] { background: #a7ef7510; border-color: #a7ef7533; color: var(--green); }
.language-option small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.language-option:disabled { opacity: 1; color: #9ca9bd; }
.language-option:hover:not(:disabled) { background: #a7ef7520; }

/* Larger language control, with search and compact rows for all 30 languages. */
.language-picker > summary { min-height: 50px; padding: 9px 13px; gap: 10px; font-family: Segoe UI, Arial, sans-serif; border-color: #627b4e; border-radius: 9px; background: #a7ef750c; }
.language-globe { width: 21px; height: 21px; color: var(--green); }
.language-current { display: grid; gap: 3px; min-width: 0; text-align: start; }
.language-current > small { font-size: 10px; color: var(--muted); }
.language-current > span { font-size: 12px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.language-panel { width: min(600px, calc(100vw - 32px)); max-height: min(680px, calc(100svh - 110px)); display: flex; flex-direction: column; overflow: hidden; padding: 18px; }
.language-panel > strong, .language-panel > p, #language-search { flex-shrink: 0; }
.language-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.language-panel-heading strong { font-size: 15px; }
#language-close { width: 40px; height: 40px; border-radius: 7px; font-size: 23px; flex-shrink: 0; }
#language-search { width: 100%; min-height: 44px; margin-top: 14px; padding: 11px 13px; border: 1px solid #4d5e75; border-radius: 7px; background: #0c131e; color: var(--text); font-size: 14px; }
#language-search::placeholder { color: #9dabc0; }
.language-panel ul { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.language-option { min-height: 54px; padding: 9px 10px; gap: 5px; border-color: #2d3849; }
.language-names { display: grid; gap: 5px; min-width: 0; }
.language-names > span { font-weight: 600; overflow-wrap: anywhere; }
.language-names small { font-size: 10px; white-space: normal; }
.language-check { flex-shrink: 0; color: var(--green); font-size: 15px; }
#language-empty { padding: 20px 0; text-align: center; }

.embed-button { padding: 11px 16px; border-radius: 7px; border-color: #96ca68; background: var(--green); color: #172513; font-size: 12px; font-weight: 750; letter-spacing: .3px; }
.embed-button:hover { background: #bdf795; }
.embed-code-label { display: block; margin: 20px 0 8px; font-size: 12px; }
#embed-dialog { max-width: 680px; }
#embed-code { width: 100%; min-height: 145px; resize: vertical; padding: 14px; border: 1px solid #44516a; border-radius: 7px; background: #0b111b; color: #c3dfb2; font: 12px/1.7 var(--mono); }
.embed-note { margin-top: 12px; }
.embed-credit { display: none; }
.language-panel { text-align: start; }
.language-panel .language-option { text-align: start; }
.language-option > span { unicode-bidi: isolate; }
[dir="rtl"] .language-panel { right: auto; left: 0; }
[dir="rtl"] .brand-icon { transform: rotate(7deg); }
[dir="rtl"] .device-select { margin-left: 0; margin-right: auto; }
[dir="rtl"] .panel-footer .mono { margin-left: 0; margin-right: auto; }
.controller, .sticks, .trigger-row, .coordinates { direction: ltr; }
.stick-card .mini-heading, .offset { text-align: start; }
[dir="rtl"] .stick-card .mini-heading, [dir="rtl"] .offset { direction: rtl; }
.panel-heading h2 { letter-spacing: .8px; line-height: 1.4; }
.analytics-panel .mini-heading { gap: 8px; }
.offset { flex-wrap: wrap; }
.dialog-actions { flex-wrap: wrap; }

.embed-view .topbar, .embed-view .sidebar, .embed-view .below-fold,
.embed-view .help-button, .embed-view .workspace-foot, .embed-view .skip-link { display: none; }
.embed-view .workspace { min-height: 580px; height: calc(100svh - 28px); }
.embed-view .tester { padding: 12px; gap: 12px; max-width: none; }
.embed-view .embed-credit { height: 28px; display: flex; align-items: center; justify-content: center; color: #a7ef75; font-size: 11px; }
.embed-view .dashboard { grid-template-columns: minmax(0,1.4fr) minmax(280px,1fr); }
.embed-view .button { white-space: normal; }
.embed-view .device-select { max-width: 42%; }

@media (max-width: 1199px) {
  .topbar-right { gap: 12px; }
  .topbar-right .local { display: none; }
}
@media (max-width: 999px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; height: auto; min-height: 70px; padding: 12px 16px; gap: 12px; }
  .topbar-right { display: contents; }
  .topbar #fullscreen { display: none; }
  .topbar .brand { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
  .language-picker { grid-column: 2; grid-row: 2; max-width: min(46vw,220px); }
  .embed-button { grid-row: 2; grid-column: 1; width: 100%; min-height: 50px; padding: 10px; white-space: normal; }
  .language-current > span { max-width: 130px; }
  .language-panel { position: fixed; inset: 16px; width: auto; max-height: calc(100svh - 32px); padding: 16px; }
  [dir="rtl"] .language-panel { left: 16px; right: 16px; }
  .language-panel ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .brand small { letter-spacing: .8px; }
  .embed-view .workspace { min-height: 0; height: auto; }
  .embed-view .dashboard { grid-template-columns: 1fr; }
  .embed-view .device-select { max-width: 100%; }
  [dir="rtl"] .device-select { margin-right: 0; }
  .test-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .test-actions > .button { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .brand { font-size: 18px; gap: 8px; }
  .brand small { max-width: 165px; font-size: 6px; letter-spacing: 0; }
  .language-picker > summary { padding: 8px 9px; gap: 6px; }
  .language-globe { width: 18px; height: 18px; }
  .language-current > span { max-width: 90px; font-size: 11px; }
  .embed-button { font-size: 11px; }
}
/* Music mode: the controller becomes a drum kit. */
.music-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  max-width: 46%;
  min-height: 44px;
  padding: 6px 12px 6px 7px;
  border: 1px solid #c58bff80;
  border-radius: 10px;
  background: linear-gradient(120deg, #2c1a3c, #1d1830 55%, #142029);
  color: var(--text);
  text-align: start;
  animation: music-call 2.4s ease-in-out infinite;
}
.music-toggle:hover { border-color: #ff6fb5; }
.device-bar .music-toggle + .device-select { margin-left: 0; margin-right: 0; }
[dir="rtl"] .music-toggle { margin-left: 0; margin-right: auto; }
.music-toggle-icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #ff6fb5, #a77bff); color: #1a0f24; font-size: 19px; font-weight: 800; }
.music-toggle-text { display: grid; gap: 2px; min-width: 0; }
.music-toggle strong { font-size: 13px; font-weight: 700; color: #f6e2ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-toggle small { font-size: 10px; color: #cdb6e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-badge { flex-shrink: 0; margin-inline-start: auto; padding: 3px 6px; border-radius: 4px; background: #ff6fb5; color: #25101d; font: 700 9px var(--mono); letter-spacing: 1px; }
.music-on .music-toggle { animation: none; border-color: #ff6fb5; background: linear-gradient(120deg, #ff6fb5, #a77bff); }
.music-on .music-toggle strong, .music-on .music-toggle small { color: #1a0f24; }
.music-on .music-toggle-icon { background: #1a0f24; color: #ff8fc6; }
.music-on .music-badge { display: none; }
@keyframes music-call { 0%, 100% { box-shadow: 0 0 0 0 #d18cff00; } 50% { box-shadow: 0 0 0 5px #d18cff22, 0 0 22px #d18cff44; } }

.music-kit, .music-side { display: flex; flex-direction: column; }
.music-kit > .panel-heading, .music-side > :not(.rings) { flex-shrink: 0; }
.music-live { color: #ff9fd0; font-family: inherit; font-size: 9px; letter-spacing: .3px; }
.music-live span { background: #ff6fb5; }
.drum-pads { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; padding: 14px; }
.drum-pad {
  --tint: #a7ef75;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 11px;
  overflow: hidden;
  border: 1px solid #2a3342;
  border-color: color-mix(in srgb, var(--tint) 35%, #2a3342);
  border-radius: 10px;
  background: #19212e;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 16%, #18202c), #121821);
  text-align: start;
  user-select: none;
  -webkit-user-select: none;
  transition: background 60ms, border-color 60ms;
}
.drum-pad.wide { grid-column: span 2; }
.drum-name { font-size: 13px; font-weight: 650; line-height: 1.25; color: var(--tint); color: color-mix(in srgb, var(--tint) 55%, #fff); overflow-wrap: anywhere; }
.drum-keys { display: flex; flex-wrap: wrap; gap: 4px; }
.drum-keys kbd, .crash-key { font: 9px var(--mono); padding: 2px 5px; border: 1px solid #3a4558; border-radius: 4px; background: #0e141d; color: #aebbd0; white-space: nowrap; }
.drum-keys kbd + kbd { color: #8592a6; border-style: dashed; }
.drum-pad.active { background: var(--tint); border-color: var(--tint); }
.drum-pad.active .drum-name, .drum-pad.active .hat-open { color: #151b12; }
.hat-open { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 10px; color: #b9c6d6; }
.hat-open meter { flex: 1; min-width: 0; }
.music-kit meter, .music-side meter { height: 8px; border: 0; border-radius: 4px; background: #283244; }
.music-kit meter::-webkit-meter-bar, .music-side meter::-webkit-meter-bar { background: #283244; border: 0; border-radius: 4px; }
.music-kit meter::-webkit-meter-optimum-value, .music-side meter::-webkit-meter-optimum-value { background: var(--green); }
.music-side meter::-webkit-meter-suboptimum-value { background: #f5c17e; }
.music-side meter::-webkit-meter-even-less-good-value { background: #ff6f7d; }
.music-kit meter::-moz-meter-bar, .music-side meter::-moz-meter-bar { background: var(--green); }
.music-side meter:-moz-meter-sub-optimum::-moz-meter-bar { background: #f5c17e; }
.music-side meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #ff6f7d; }

.rings { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 14px; padding: 14px 18px 4px; }
/* Rings keep the controller's physical left/right, like the stick plots. */
.rings { direction: ltr; }
[dir="rtl"] .ring-card .mini-heading, [dir="rtl"] .ring-name { direction: rtl; }
.ring-card { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.ring-space { min-width: 0; min-height: 0; container-type: size; display: grid; place-items: center; }
.music-ring { width: min(100cqw, 100cqh, 190px); height: min(100cqw, 100cqh, 190px); overflow: visible; direction: ltr; }
.ring-wedge { fill: #1a2433; fill: color-mix(in srgb, var(--tint) 20%, #121925); stroke: #2c3748; stroke-width: 1; cursor: pointer; transition: fill 60ms; }
.ring-wedge:hover, .ring-wedge.aim { fill: color-mix(in srgb, var(--tint) 62%, #121925); }
.ring-core { fill: #0c121d; stroke: #445067; }
.ring-dot { fill: #ff6fb5; pointer-events: none; }
.ring-name { display: block; min-height: 1.5em; margin-top: 6px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: #f0d6ff; }
.music-controls { display: grid; gap: 8px; padding: 4px 18px 0; }
.music-row { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr) 38px; gap: 10px; align-items: center; font-size: 10px; color: #a6b3c6; }
.music-row output { font-size: 10px; text-align: end; color: #f0d6ff; }
.music-row input, .music-row meter { width: 100%; margin: 0; accent-color: #ff6fb5; }
.music-help { margin-bottom: 12px; }

/* Shake, dust and collapse. */
.music-dust, .music-cracks { display: none; position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.music-on .music-dust, .music-on .music-cracks { display: block; }
.music-dust { z-index: 16; }
.music-cracks { z-index: 15; opacity: 0; }
.music-cracks path { fill: none; stroke: #e8eef7; stroke-opacity: .55; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.workspace.music-on:not(:fullscreen) { overflow: hidden; overflow: clip; }
.workspace.music-collapsed { background: radial-gradient(ellipse at 50% 120%, #2a1a10aa, transparent 60%), #06080c; }
/* Horizontal tearing right before the halt: offsets only, no brightness flashes. */
.workspace.music-glitch { animation: music-tear .45s steps(1) forwards; }
@keyframes music-tear {
  0% { transform: translateX(-18px) skewX(4deg); filter: hue-rotate(40deg) saturate(1.6); }
  20% { transform: translateX(22px) skewX(-6deg); }
  40% { transform: translate(-9px, 6px) skewX(9deg); filter: hue-rotate(-60deg) saturate(1.8); }
  60% { transform: translateX(14px) skewX(-3deg); }
  80% { transform: translate(-26px, -4px) skewX(2deg); filter: hue-rotate(90deg) saturate(2); }
  100% { transform: none; filter: none; }
}
/* The halted page: a full-screen, plain error. */
#music-crash { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: clamp(24px, 8vw, 110px); border: 0; border-radius: 0; background: #000; color: #e9edf3; text-align: start; overflow: auto; }
#music-crash[open] { display: flex; flex-direction: column; justify-content: center; }
#music-crash::backdrop { background: #000; backdrop-filter: none; }
.crash-code { margin-bottom: 18px; font: 12px var(--mono); letter-spacing: 2px; color: #ff6f7d; }
#music-crash h2 { margin: 0 0 14px; font-size: clamp(28px, 5vw, 46px); font-weight: 650; letter-spacing: -.5px; }
#music-crash p#crash-text { max-width: 640px; font-size: 15px; color: #a9b5c7; }
.crash-error { max-width: 780px; margin: 26px 0 0; padding: 14px 16px; overflow: auto; border-left: 2px solid #ff6f7d; background: #0b0d12; color: #ff9aa4; font: 12px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
#music-crash .dialog-actions { justify-content: flex-start; align-items: center; margin-top: 28px; }

@media (min-width: 1000px) and (max-width: 1279px) { .music-toggle small { display: none; } }
@media (min-width: 1000px) and (max-height: 900px) {
  .music-toggle { min-height: 38px; padding: 4px 10px 4px 5px; }
  .music-toggle-icon { width: 28px; height: 28px; font-size: 16px; }
  .drum-pads { gap: 6px; padding: 10px; }
  .drum-pad { padding: 7px 9px; gap: 4px; }
  .drum-name { font-size: 12px; }
  .rings { padding: 8px 14px 2px; gap: 10px; }
  .music-controls { gap: 5px; }
  .music-help { margin-bottom: 8px; }
}
@media (min-width: 1400px) { .drum-name { font-size: 15px; } .drum-keys kbd { font-size: 10px; } .music-row, .music-row output { font-size: 11px; } }
@media (max-width: 999px) {
  .music-toggle, [dir="rtl"] .music-toggle { order: 2; width: 100%; max-width: none; margin: 0; }
  .music-toggle small { white-space: normal; }
  .device-select { order: 3; }
  .drum-pads { flex: none; grid-auto-rows: minmax(68px, auto); gap: 7px; padding: 12px; }
  .rings { flex: none; }
  .ring-space { height: clamp(120px, 38vw, 180px); }
  .drum-name { font-size: 12px; }
}
@media (max-width: 480px) {
  .drum-pads { gap: 5px; padding: 8px; }
  .drum-pad { padding: 7px; }
  .drum-name { font-size: 11px; }
  .drum-keys kbd { max-width: 100%; padding: 2px 3px; white-space: normal; overflow-wrap: anywhere; }
  .rings { padding: 12px 12px 4px; }
  .music-controls { padding: 4px 14px 0; }
}

/* Eight discoverable tools: preserve labels and touch targets on small screens. */
@media(min-width:1000px){.sidebar{padding-top:18px}.sidebar nav{gap:3px}.nav-item{min-height:44px;padding-block:10px}.nav-caption{margin-bottom:12px}.nav-item span{overflow-wrap:anywhere}}
@media(max-width:999px){.sidebar nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.sidebar .nav-item{min-width:0;min-height:48px;justify-content:flex-start;gap:7px;padding:8px}.sidebar .nav-item span{display:block;font-size:10px;overflow-wrap:anywhere}.sidebar .nav-item svg{width:18px;flex-shrink:0}.sidebar{padding:8px}}
@media(max-width:480px){.sidebar .nav-item{flex-direction:column;justify-content:center;text-align:center;gap:5px}.sidebar .nav-item span{font-size:10px}.sidebar .nav-item i{display:none}}