:root{
  --bg:#030606;
  --panel:#0b0f10;
  --card:#0e1315;
  --line:rgba(255,255,255,.14);
  --text:#f7fff9;
  --muted:#8f9994;
  --green:#5ee33e;
  --cyan:#00f5d4;
  --blue:#3485ff;
  --purple:#9b38e4;
  --yellow:#ffd33d;
  --wood:#1a100a;
  --wood-light:#2a1810;
  --shadow:0 22px 64px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.04);
  --shadow-panel:0 28px 90px rgba(0,0,0,.55);
  --glass:linear-gradient(165deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.018) 48%,rgba(255,255,255,.008) 100%);
  --studiox-cyan:var(--cyan);
  --studiox-green:var(--green);
  --studiox-line:var(--line);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;
  min-height:100%;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 18% 8%,rgba(0,245,212,.06),transparent 28%),
    radial-gradient(circle at 82% 12%,rgba(155,56,228,.04),transparent 26%),
    radial-gradient(circle at 50% -12%,rgba(0,245,212,.10),transparent 34%),
    radial-gradient(circle at 50% 115%,rgba(94,227,62,.07),transparent 38%),
    linear-gradient(180deg,#020404,#050807 58%,#020403);
  color:var(--text);
  overflow-x:hidden;
}

body{
  min-height:100vh;
  position:relative;
  animation:studioxFadeIn .28s ease both;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:soft-light;
}

@keyframes studioxFadeIn{
  from{opacity:.35;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

.pageGlow{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 28% 22%,rgba(0,245,212,.05),transparent 34%),
    radial-gradient(circle at 72% 18%,rgba(52,133,255,.03),transparent 30%),
    radial-gradient(ellipse 80% 50% at 50% 50%,rgba(255,255,255,.015),transparent 70%);
}

.shell{
  position:relative;
  z-index:1;
  max-width:1280px;
  width:100%;
  margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 28px calc(env(safe-area-inset-bottom,0px) + 16px);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ── Top header ── */
.studioHeader{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:4px;
  min-height:38px;
}

.studioxBack{
  position:fixed;
  z-index:99999;
  left:12px;
  top:calc(env(safe-area-inset-top,0px) + 10px);
  padding:5px 9px;
  border-radius:8px;
  background:rgba(3,8,7,.78);
  border:1px solid var(--line);
  color:rgba(255,255,255,.88);
  text-decoration:none;
  font:600 11px/1.25 Inter,system-ui,sans-serif;
  letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}

.studioxBack:hover{
  border-color:rgba(0,245,212,.45);
  background:rgba(0,245,212,.08);
  color:var(--cyan);
}

.studioxModuleLogo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  pointer-events:none;
}

.studioxModuleLogo .xmark{
  position:relative;
  width:38px;
  height:38px;
  filter:drop-shadow(0 0 16px rgba(0,245,212,.38));
}

.studioxModuleLogo .xmark:before,
.studioxModuleLogo .xmark:after{
  content:"";
  position:absolute;
  left:16px;
  top:2px;
  width:4px;
  height:34px;
  border:2px solid var(--cyan);
  border-radius:999px;
  background:rgba(0,245,212,.05);
}

.studioxModuleLogo .xmark:before{transform:rotate(45deg)}
.studioxModuleLogo .xmark:after{transform:rotate(-45deg)}

.studioxModuleLogo .wordmark{
  font-size:clamp(18px,2.4vw,24px);
  line-height:1;
  font-weight:700;
  letter-spacing:-.3px;
  color:#f2f8f5;
}

.studioxModuleLogo .wordmark span{
  font-weight:600;
  background:linear-gradient(135deg,#62f34d 8%,#00f5d4 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 10px rgba(0,245,212,.26));
  padding-left:5px;
}

.headerActions{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:8px;
}

.iconAction{
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:14px;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
}

.iconAction:hover{
  border-color:rgba(0,245,212,.35);
  background:rgba(0,245,212,.08);
  color:var(--cyan);
  box-shadow:0 0 16px rgba(0,245,212,.14);
}

.studioxModuleName{
  text-align:center;
  margin:0 0 14px;
  color:var(--green);
  font:700 11px/1.2 Inter,system-ui,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.78;
}

/* ── Two-column layout ── */
.app{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:18px;
  align-items:start;
}

/* ── Left: diagram panel ── */
.diagramPanel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(0,245,212,.16);
  border-radius:18px;
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:var(--shadow-panel),0 0 40px rgba(0,245,212,.07);
  padding:22px 22px 18px;
}

.diagramPanel:before{
  content:"";
  position:absolute;
  inset:auto -20% -38% -20%;
  height:70%;
  pointer-events:none;
  opacity:.65;
  background:radial-gradient(circle at 50% 100%,rgba(0,245,212,.10),transparent 62%);
}

.diagramTopBar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-bottom:6px;
  padding:0 6px;
}

.chordTitle{
  margin:0;
  font-size:clamp(34px,5vw,48px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  text-align:center;
  color:rgba(255,255,255,.94);
  text-shadow:0 0 24px rgba(0,245,212,.28),0 2px 10px rgba(0,0,0,.45);
}

.shapeBadge{
  position:absolute;
  left:4px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  margin:0;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid rgba(0,245,212,.42);
  background:rgba(0,245,212,.08);
  color:var(--cyan);
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  box-shadow:0 0 16px rgba(0,245,212,.12);
  white-space:nowrap;
}

.diagramViewport{
  position:relative;
  z-index:1;
  width:100%;
  margin:0 auto;
  padding:14px 10px 8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 14px),
    linear-gradient(180deg,var(--wood-light) 0%,var(--wood) 55%,#0e0805 100%);
  box-shadow:
    inset 0 2px 12px rgba(0,0,0,.45),
    0 12px 40px rgba(0,0,0,.42),
    0 0 28px rgba(0,245,212,.06);
}

#chordSvg{
  display:block;
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  max-height:min(58vh,520px);
  margin:0 auto;
}

.diagramPickers{
  position:relative;
  z-index:1;
}

.diagramRoot,
.diagramGroup{
  margin:0;
  padding:10px 0 8px;
  border-top:1px solid rgba(255,255,255,.08);
}

.diagramRoot .groupTitle,
.diagramGroup .groupTitle{
  margin:0 0 8px;
  text-align:center;
}

.diagramGroup .groupHead{
  margin-bottom:8px;
}

.diagramGroup .groupHead .groupTitle{
  text-align:left;
}

.diagramRoot{
  margin-top:12px;
}

.diagramRoot .rootRow{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:6px;
  justify-content:center;
}

.diagramRoot .pickBtn.rootBtn{
  width:auto;
  height:34px;
  border-radius:50%;
  aspect-ratio:1;
  padding:0;
  font-size:11px;
}

#chordSvg .chordNote{
  cursor:pointer;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}

#chordSvg .chordNote .noteHit{
  transition:transform .22s cubic-bezier(.22,1,.36,1);
  transform-box:fill-box;
  transform-origin:center;
}

#chordSvg .chordNote .noteGlowRing{
  opacity:0;
  stroke:rgba(0,245,212,.85);
  stroke-width:3;
  fill:none;
  pointer-events:none;
  transition:opacity .22s ease,stroke-width .22s ease;
  filter:drop-shadow(0 0 8px rgba(0,245,212,.65));
}

#chordSvg .chordNote .noteBody{
  filter:drop-shadow(0 0 5px rgba(0,245,212,.35));
  transition:filter .22s ease;
}

#chordSvg .chordNote--root .noteBody{
  filter:drop-shadow(0 0 7px rgba(0,245,212,.55));
}

#chordSvg .fretLabelFingerOne{
  filter:drop-shadow(0 0 6px rgba(94,227,62,.65)) drop-shadow(0 0 14px rgba(0,245,212,.38));
}

#chordSvg .fretLabelFingerOne text{
  stroke:#031008;
  stroke-width:2px;
  paint-order:stroke fill;
}

#chordSvg .chordNote text{
  pointer-events:none;
  user-select:none;
  stroke:#ffffff;
  stroke-width:3px;
  stroke-linejoin:round;
  paint-order:stroke fill;
}

@media(hover:hover){
  #chordSvg .chordNote:hover .noteHit,
  #chordSvg .chordNote:focus-visible .noteHit{
    transform:scale(1.14);
  }

  #chordSvg .chordNote:hover .noteGlowRing,
  #chordSvg .chordNote:focus-visible .noteGlowRing{
    opacity:1;
    stroke-width:3.4;
  }

  #chordSvg .chordNote:hover .noteBody,
  #chordSvg .chordNote:focus-visible .noteBody{
    filter:drop-shadow(0 0 14px rgba(0,245,212,.72));
  }
}

.legendInfo{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:16px 0 14px;
}

.legendInfo div{
  display:flex;
  flex-direction:column;
  gap:4px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.02);
}

.legendLabel{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.legendInfo b{
  color:var(--cyan);
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
}

.navRow{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:8px;
  margin-bottom:10px;
}

.navBtn{
  height:40px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .1s ease;
}

.navBtn:hover{
  border-color:rgba(0,245,212,.35);
  background:rgba(0,245,212,.06);
  box-shadow:0 0 14px rgba(0,245,212,.12);
}

.navBtn:active{transform:scale(.97) translateY(1px)}

.navBtn:disabled{
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
}

.playBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:linear-gradient(160deg,rgba(0,245,212,.28),rgba(0,200,170,.18));
  color:#ecfffa;
  border-color:rgba(0,245,212,.55);
  box-shadow:0 0 24px rgba(0,245,212,.28),inset 0 1px 0 rgba(255,255,255,.12);
}

.playBtn .playIcon{
  font-size:11px;
  filter:drop-shadow(0 0 6px rgba(0,245,212,.6));
}

.playBtn:hover{
  border-color:rgba(0,245,212,.7)!important;
  box-shadow:0 0 32px rgba(0,245,212,.38),0 0 48px rgba(0,245,212,.12)!important;
}

.toggle{
  position:relative;
  z-index:1;
  display:flex;
  gap:4px;
  background:rgba(4,8,9,.82);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:4px;
}

.displayBtn{
  flex:1;
  height:36px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease;
}

.displayBtn:hover{
  color:var(--text);
  border-color:rgba(0,245,212,.22);
  background:rgba(0,245,212,.05);
}

.displayBtn.active{
  background:linear-gradient(160deg,rgba(0,245,212,.32),rgba(0,160,140,.22));
  color:#ecfffa;
  border-color:rgba(0,245,212,.5);
  box-shadow:0 0 22px rgba(0,245,212,.28),inset 0 0 0 1px rgba(0,245,212,.2);
}

/* ── Right: controls ── */
.controls{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:var(--shadow);
  padding:8px 18px 12px;
}

.controls:before{
  content:"";
  position:absolute;
  inset:auto -20% -38% -20%;
  height:70%;
  pointer-events:none;
  opacity:.45;
  background:radial-gradient(circle at 50% 100%,rgba(0,245,212,.07),transparent 62%);
}

.group{
  position:relative;
  z-index:1;
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:14px 0;
}

.group:last-child{border-bottom:0;padding-bottom:6px}

.groupTitle{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
}

.groupTitle span{color:var(--cyan);letter-spacing:.08em}

.groupHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.groupHead .groupTitle{margin:0}

.modeToggle{
  display:flex;
  gap:3px;
  background:rgba(4,8,9,.82);
  border:1px solid rgba(255,255,255,.10);
  padding:3px;
  border-radius:10px;
  flex-shrink:0;
}

.modeBtn{
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:11px;
  font-weight:700;
  height:28px;
  padding:0 12px;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease;
}

.modeBtn:hover{
  color:var(--text);
  border-color:rgba(0,245,212,.22);
  background:rgba(0,245,212,.05);
}

.modeBtn.active{
  background:linear-gradient(160deg,rgba(0,245,212,.28),rgba(0,180,155,.18));
  color:#ecfffa;
  border-color:rgba(0,245,212,.45);
  box-shadow:0 0 16px rgba(0,245,212,.22);
}

.buttonRow{display:grid;gap:6px}

.rootRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.typeRow{grid-template-columns:repeat(10,minmax(0,1fr))}
.shapeRow{grid-template-columns:repeat(7,minmax(0,1fr))}

.typeRow,
.shapeRow{gap:3px}

.typeRow .pickBtn,
.shapeRow .pickBtn{
  height:22px;
  min-width:0;
  font-size:8px;
  border-radius:6px;
  padding:0 1px;
  letter-spacing:0;
  line-height:1;
}

.pickBtn{
  height:36px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  font:inherit;
  font-size:12px;
  font-weight:700;
  padding:0 6px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .1s ease,color .15s ease;
}

.pickBtn.rootBtn{
  width:38px;
  height:38px;
  padding:0;
  border-radius:50%;
  flex-shrink:0;
}

.pickBtn:focus-visible,
.displayBtn:focus-visible,
.modeBtn:focus-visible,
.navBtn:focus-visible,
.iconAction:focus-visible{
  outline:2px solid rgba(0,245,212,.55);
  outline-offset:2px;
}

.pickBtn:hover{
  border-color:rgba(0,245,212,.32);
  background:rgba(0,245,212,.06);
}

.pickBtn:active{transform:scale(.96)}

.pickBtn.rootActive{
  background:linear-gradient(160deg,rgba(0,245,212,.85),rgba(0,200,170,.65));
  color:#031410;
  border-color:rgba(0,245,212,.75);
  box-shadow:0 0 22px rgba(0,245,212,.42),inset 0 1px 0 rgba(255,255,255,.25);
}

.pickBtn.typeActive,
.pickBtn.shapeActive,
.pickBtn.familyActive{
  background:rgba(0,245,212,.10);
  color:#ecfffa;
  border-color:rgba(0,245,212,.55);
  box-shadow:0 0 20px rgba(0,245,212,.22),inset 0 0 0 1px rgba(0,245,212,.18);
}

.diagramPickers .familyRow{
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:3px;
}

.diagramPickers .familyRow .pickBtn{
  height:22px;
  min-width:0;
  font-size:8px;
  border-radius:6px;
  padding:0 1px;
}

/* ── Footer ── */
.studioFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:16px;
  padding:12px 4px 0;
  border-top:1px solid rgba(0,245,212,.10);
}

.footerVersion{
  margin:0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--muted);
  opacity:.72;
}

.footerControls{
  display:flex;
  align-items:center;
  gap:14px;
}

.footerToggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  cursor:not-allowed;
  opacity:.55;
}

.footerToggle input{position:absolute;opacity:0;width:0;height:0}

.toggleTrack{
  position:relative;
  width:36px;
  height:20px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}

.toggleTrack:after{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--muted);
}

.footerSlider{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:.55;
  cursor:not-allowed;
}

.footerSlider input[type=range]{
  width:80px;
  accent-color:var(--cyan);
}

.footerGear{
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:14px;
  cursor:not-allowed;
  opacity:.55;
}

.topbar,.footerTip{display:none!important}

@media(max-width:960px){
  .shell{padding-left:16px;padding-right:16px}
  .app{grid-template-columns:1fr;gap:14px}
  .studioxBack{left:10px;top:calc(env(safe-area-inset-top,0px) + 8px);padding:4px 8px;font-size:10px}
  .typeRow{grid-template-columns:repeat(10,minmax(0,1fr))}
  .shapeRow{grid-template-columns:repeat(7,minmax(0,1fr))}
}

@media(max-width:720px){
  .chordTitle{font-size:36px}
  .diagramPanel{padding:16px 14px 14px}
  .diagramViewport{padding:8px 4px 4px}
  #chordSvg{max-height:min(50vh,480px)}
  .legendInfo{gap:6px;margin:12px 0 10px}
  .legendInfo div{padding:8px 8px}
  .legendInfo b{font-size:12px}
  .navBtn{height:34px;font-size:12px}
  .displayBtn{height:32px;font-size:12px}
  .controls{padding:6px 12px 8px}
  .group{padding:10px 0}
  .pickBtn{height:32px;font-size:11px}
  .diagramRoot{margin-top:10px;padding:8px 0 6px}
  .diagramGroup{padding:8px 0 6px}
  .diagramRoot .rootRow{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .diagramRoot .pickBtn.rootBtn{height:32px;font-size:10px}
  .diagramPickers .familyRow{grid-template-columns:repeat(5,minmax(0,1fr))}
  .typeRow .pickBtn,
  .shapeRow .pickBtn{height:20px;font-size:8px;border-radius:5px}
  .typeRow{grid-template-columns:repeat(10,minmax(0,1fr))}
  .shapeRow{grid-template-columns:repeat(7,minmax(0,1fr))}
  .studioFooter{flex-direction:column;align-items:flex-start;gap:10px}
}

@media(max-width:480px){
  .shell{padding:calc(env(safe-area-inset-top,0px) + 8px) 10px calc(env(safe-area-inset-bottom,0px) + 10px)}
  .chordTitle{font-size:30px}
  .typeRow{grid-template-columns:repeat(5,minmax(0,1fr))}
  .shapeRow{grid-template-columns:repeat(7,minmax(0,1fr))}
  .typeRow .pickBtn,
  .shapeRow .pickBtn{height:20px;font-size:7px}
  .diagramRoot .rootRow{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .diagramRoot .pickBtn.rootBtn{height:30px;font-size:9px}
  .diagramPickers .familyRow{grid-template-columns:repeat(5,minmax(0,1fr))}
  .rootRow{gap:6px}
}

@media(max-height:760px){
  #chordSvg{max-height:min(44vh,420px)}
  .chordTitle{font-size:32px}
}

.chordDbDebug{
  margin-top:18px;
  padding:14px 16px;
  border:1px dashed rgba(0,245,212,.28);
  border-radius:12px;
  background:rgba(0,245,212,.04);
  font-size:12px;
  color:var(--muted);
}

.chordDbDebugTitle{
  margin:0 0 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cyan);
}

.chordDbDebugGrid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 14px;
  margin:0;
}

.chordDbDebugGrid dt{
  margin:0;
  color:rgba(255,255,255,.45);
}

.chordDbDebugGrid dd{
  margin:0;
  color:var(--text);
  font-weight:600;
}

.chordDbDebugMeta{
  margin:10px 0 0;
  padding-left:18px;
  color:rgba(255,255,255,.62);
}

.chordDbDebugMeta li{
  margin:2px 0;
}

.chordDbDebugMeta li.chordDbDebugMetaActive{
  color:var(--cyan);
  font-weight:700;
}

.chordDbDebugError{
  color:#ff8a7a;
}