:root{
  --bg:#030606;
  --panel:#0b0f10;
  --card:#0e1315;
  --line:rgba(255,255,255,.14);
  --text:#f7fff9;
  --muted:#a3aca8;
  --green:#5ee33e;
  --cyan:#00f5d4;
  --blue:#3485ff;
  --purple:#9b38e4;
  --yellow:#ffd33d;
  --red:#ff3434;
  --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%);
  --glass-strong:linear-gradient(165deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.018) 48%,rgba(255,255,255,.008) 100%);
}

*{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;
  display:flex;
  flex-direction:column;
  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 50% 38%,rgba(0,245,212,.045),transparent 38%),
    radial-gradient(circle at 50% 72%,rgba(52,133,255,.025),transparent 42%),
    radial-gradient(ellipse 90% 60% at 50% 50%,rgba(255,255,255,.018),transparent 70%);
}

.backNav{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.backLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(3,8,7,.72);
  border:1px solid var(--line);
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:0 12px 34px rgba(0,0,0,.38);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}

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

.backLinkAlt{
  font-weight:700;
  color:rgba(255,255,255,.72);
}

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

/* ── A) Top Header ── */
.topHeader{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 14px;
  margin-bottom:12px;
  border:1px solid rgba(0,245,212,.14);
  border-radius:14px;
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:var(--shadow);
}

.headerTopBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
}

.headerMainRow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  width:100%;
}

.headerActions{
  margin-left:auto;
  flex-shrink:0;
}

.headerBrandRow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.topHeader .xmark.mini{width:30px;height:30px;filter:drop-shadow(0 0 10px rgba(0,245,212,.24))}
.topHeader .xmark.mini:before,.topHeader .xmark.mini:after{height:22px;left:12px;top:3px;width:3px}

.topHeader .wordmark.compact{
  font-size:clamp(15px,1.8vw,20px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.25px;
  margin:0;
  color:#f2f8f5;
  white-space:nowrap;
}

.headerControls{
  flex:1;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
}

.topHeader select,
.topHeader button{
  height:34px;
  min-width:48px;
  border-radius:9px;
  font-size:12px;
  font-weight:700;
  padding:0 9px;
  letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.18);
}

.topHeader select{
  padding-right:26px;
  background-position:calc(100% - 14px) calc(50% - 2px),calc(100% - 9px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;
}

.topHeader .backLink{
  padding:5px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 10px rgba(0,0,0,.28);
}

.topHeader .boardActionBtn{
  height:30px!important;
  min-width:auto!important;
  padding:0 10px!important;
  font-size:11px!important;
  font-weight:700!important;
  border-radius:8px!important;
  letter-spacing:.03em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.2)!important;
}

.topHeader .iconBtn{
  min-width:34px!important;
  width:34px;
  padding:0!important;
  font-size:14px;
}

.topHeader .headerControls #scale{flex:1 1 128px;min-width:108px}
.topHeader .headerControls #patternSelect{flex:0 1 96px;min-width:84px}
.topHeader .headerControls #viewMode{flex:0 1 108px;min-width:92px}
.topHeader .headerControls #fretRange,
.topHeader .headerControls #displayMode,
.topHeader .headerControls #characterToggle{flex:0 1 auto;min-width:72px}

.iconBtn{
  min-width:48px!important;
  width:48px;
  padding:0!important;
  font-size:18px;
  background:rgba(6,10,12,.92);
}

.studioxHeader{display:none}

.headerBrand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:10px;
}

.xmark{
  position:relative;
  width:48px;
  height:48px;
  flex-shrink:0;
  filter:drop-shadow(0 0 16px rgba(0,245,212,.32)) drop-shadow(0 0 32px rgba(94,227,62,.10));
}

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

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

.xmark.small{width:36px;height:36px;margin:0 auto 14px}
.xmark.small:before,.xmark.small:after{height:30px;left:15px;top:2px}

.wordmark{
  font-size:clamp(28px,4vw,42px);
  line-height:1.1;
  font-weight:600;
  letter-spacing:-.4px;
  margin:0;
  color:#f2f8f5;
}

.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)) drop-shadow(0 0 22px rgba(94,227,62,.12));
  padding-left:8px;
}

.headerDivider{
  width:58px;
  height:3px;
  margin:16px auto 0;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  box-shadow:0 0 16px rgba(0,245,212,.22);
}

.headerContext{
  margin:14px 0 0;
  color:var(--green);
  font-size:13px;
  font-weight:600;
  letter-spacing:6px;
  text-transform:uppercase;
  opacity:.92;
}

.headerSubtitle{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
  font-weight:500;
  letter-spacing:.04em;
  opacity:.72;
}

.app{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ── B) Key Selector ── */
.keySelector{
  padding:12px 16px;
  margin-bottom:4px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(8,12,14,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.keySelector .keyBar{
  justify-content:center;
  gap:6px;
}

.keySelector .kbtn{
  min-width:44px;
  height:38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  font-size:15px;
}

.keySelector .kbtn.active{
  background:linear-gradient(160deg,#3de85a 0%,#5ee33e 100%);
  color:#031008;
  border-color:rgba(94,227,62,.55);
  box-shadow:0 0 20px rgba(94,227,62,.35),inset 0 1px 0 rgba(255,255,255,.25);
}

/* ── Pattern Selector ── */
.patternSelector{
  padding:10px 16px;
  margin-bottom:4px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(8,12,14,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.patternSelector .patterns{
  justify-content:center;
  gap:6px;
}

.patternSelector .pbtn{
  min-width:44px;
  height:38px;
  border-radius:10px;
  font-size:15px;
}

.patternSelector .pbtn.active{
  background:linear-gradient(160deg,rgba(0,245,212,.22),rgba(94,227,62,.18));
  color:#ecfffa;
  border-color:rgba(0,245,212,.45);
  box-shadow:0 0 18px rgba(0,245,212,.22),inset 0 0 0 1px rgba(0,245,212,.18);
}

/* ── Focus Notes (Full Fretboard) ── */
.focusNotesSelector{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  margin-bottom:4px;
  border:1px solid rgba(0,245,212,.12);
  border-radius:14px;
  background:rgba(8,12,14,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.focusNotesSelector::-webkit-scrollbar{display:none}

.focusNotesSelector[hidden]{display:none!important}

.focusNotesLabel{
  flex-shrink:0;
  color:var(--cyan);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.focusNotesBar{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:nowrap;
  min-width:0;
}

.fbtn{
  flex-shrink:0;
  min-width:40px;
  height:36px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  color:var(--text);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}

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

.fbtn.active{
  background:linear-gradient(160deg,rgba(0,245,212,.22),rgba(94,227,62,.18));
  color:#ecfffa;
  border-color:rgba(0,245,212,.45);
  box-shadow:0 0 14px rgba(0,245,212,.18);
}

.studioxHiddenBrand{display:none!important}

.panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  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);
  display:flex;
  flex-direction:column;
  min-height:0;
}

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

.panelHead{
  padding:18px 22px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:1;
}

.panelHead h2{
  margin:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.3px;
  color:#ecfffa;
  text-shadow:0 0 16px rgba(0,245,212,.18);
}

.panelBody{
  position:relative;
  z-index:1;
  padding:18px 22px 22px;
}

.panelControls:before{
  background:radial-gradient(circle at 50% 100%,rgba(0,245,212,.12),rgba(94,227,62,.04),transparent 62%);
}

.panelSelection:before{
  background:radial-gradient(circle at 50% 100%,rgba(0,245,212,.10),rgba(94,227,62,.04),transparent 62%);
}

.panelBodyControls{padding:16px 22px 20px}

.panelBodySelection{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px 22px 20px;
}

.panelBodySelection > .panel{
  box-shadow:none;
  border-radius:14px;
  padding:12px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
}

.panelBodySelection > .panel:before{opacity:.45}

.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

#scale{flex:1 1 200px;min-width:160px}

select,button{
  height:48px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,12,14,.82);
  color:var(--text);
  font-size:15px;
  font-weight:700;
  padding:0 12px;
  font-family:inherit;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}

select{
  cursor:pointer;
  appearance:none;
  background-color:rgba(8,12,14,.82);
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:32px;
}

select:focus,button:focus{
  outline:none;
  border-color:rgba(0,245,212,.42);
  box-shadow:0 0 0 3px rgba(0,245,212,.12);
}

button{
  cursor:pointer;
  min-width:64px;
  background:rgba(6,10,12,.92);
}

button.green{
  background:linear-gradient(160deg,#0fd89a 0%,#3de85a 42%,#5df23e 100%);
  color:#031008;
  border-color:rgba(94,227,62,.45);
  box-shadow:0 4px 16px rgba(94,227,62,.18),0 0 14px rgba(0,245,212,.07),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12);
}

button.red{
  background:linear-gradient(160deg,#5a1212 0%,#3b0b0b 100%);
  border-color:rgba(255,52,52,.35);
  color:#ffe8e8;
}

button:hover{border-color:rgba(0,245,212,.32)}
button.green:hover{filter:brightness(1.04);box-shadow:0 5px 22px rgba(94,227,62,.26),0 0 18px rgba(0,245,212,.11),inset 0 1px 0 rgba(255,255,255,.32)}
button.red:hover{border-color:rgba(255,52,52,.55)}

/* ── Premium button hover / press + X mark ── */
.shell button:not([disabled]),
.shell a.backLink,
.shell .kbtn:not([disabled]),
.shell .pbtn:not([disabled]),
.shell .fbtn:not([disabled]),
.modal button:not([disabled]){
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:border-color .18s ease,box-shadow .22s ease,transform .1s ease,filter .18s ease,background .18s ease;
}

.shell button:not([disabled])::before,
.shell a.backLink::before,
.shell .kbtn:not([disabled])::before,
.shell .pbtn:not([disabled])::before,
.shell .fbtn:not([disabled])::before,
.modal button:not([disabled])::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:0;
  width:18px;
  height:18px;
  transform:translate(-50%,-50%) scale(.82);
  background:
    linear-gradient(135deg,transparent 44%,var(--cyan) 44%,var(--green) 56%,transparent 56%),
    linear-gradient(45deg,transparent 44%,var(--cyan) 44%,var(--green) 56%,transparent 56%);
  filter:drop-shadow(0 0 6px rgba(0,245,212,.55)) drop-shadow(0 0 12px rgba(94,227,62,.28));
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .18s ease;
}

.shell button:not([disabled]):hover::before,
.shell a.backLink:hover::before,
.shell .kbtn:not([disabled]):hover::before,
.shell .pbtn:not([disabled]):hover::before,
.shell .fbtn:not([disabled]):hover::before,
.modal button:not([disabled]):hover::before{
  opacity:.62;
  transform:translate(-50%,-50%) scale(1);
}

.shell button:not([disabled]):hover,
.shell a.backLink:hover,
.shell .kbtn:not([disabled]):hover,
.shell .pbtn:not([disabled]):hover,
.shell .fbtn:not([disabled]):hover,
.modal button:not([disabled]):hover{
  border-color:rgba(0,245,212,.52)!important;
  box-shadow:
    0 0 0 1px rgba(0,245,212,.14),
    0 0 18px rgba(0,245,212,.28),
    0 0 36px rgba(94,227,62,.12),
    inset 0 1px 0 rgba(255,255,255,.1)!important;
}

.shell button.green:not([disabled]):hover{
  filter:brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(94,227,62,.35),
    0 0 22px rgba(94,227,62,.32),
    0 0 40px rgba(0,245,212,.14),
    inset 0 1px 0 rgba(255,255,255,.34)!important;
}

.shell button.red:not([disabled]):hover{
  box-shadow:
    0 0 0 1px rgba(255,80,80,.28),
    0 0 18px rgba(255,52,52,.32),
    0 0 32px rgba(255,52,52,.14),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.shell button:not([disabled]).pgbsPress,
.shell a.backLink.pgbsPress,
.shell .kbtn:not([disabled]).pgbsPress,
.shell .pbtn:not([disabled]).pgbsPress,
.shell .fbtn:not([disabled]).pgbsPress,
.modal button:not([disabled]).pgbsPress{
  transform:scale(.96) translateY(1px);
  box-shadow:
    0 0 0 1px rgba(0,245,212,.22),
    0 0 26px rgba(0,245,212,.38),
    0 0 48px rgba(94,227,62,.16),
    inset 0 2px 8px rgba(0,0,0,.28)!important;
}

.shell button:not([disabled]).pgbsPress::before,
.shell a.backLink.pgbsPress::before,
.shell .kbtn:not([disabled]).pgbsPress::before,
.shell .pbtn:not([disabled]).pgbsPress::before,
.shell .fbtn:not([disabled]).pgbsPress::before,
.modal button:not([disabled]).pgbsPress::before{
  opacity:.88;
  transform:translate(-50%,-50%) scale(.94);
}

.shell .kbtn.active:not([disabled]):hover,
.shell .pbtn.active:not([disabled]):hover{
  box-shadow:
    0 0 0 1px rgba(0,245,212,.28),
    0 0 22px rgba(0,245,212,.32),
    0 0 40px rgba(94,227,62,.14),
    inset 0 0 0 1px rgba(0,245,212,.2)!important;
}

.recOn{
  background:linear-gradient(160deg,#ff5555 0%,#cc2222 100%)!important;
  border-color:var(--red)!important;
  color:#fff!important;
  box-shadow:0 0 22px rgba(255,52,52,.35)!important;
}

.keyBar,.patterns{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.keyBar b,.patterns b{
  color:var(--cyan);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-right:4px;
}

.kbtn,.pbtn{
  min-width:46px;
  height:40px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease;
}

.kbtn:hover,.pbtn:hover{
  border-color:rgba(0,245,212,.28);
  background:rgba(0,245,212,.06);
}

.kbtn.active,.pbtn.active{
  background:linear-gradient(160deg,rgba(0,245,212,.22),rgba(94,227,62,.18));
  color:#ecfffa;
  border-color:rgba(0,245,212,.45);
  box-shadow:0 0 18px rgba(0,245,212,.22),inset 0 0 0 1px rgba(0,245,212,.18);
}

.boardCard{
  position:relative;
  overflow:hidden;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(0,245,212,.16);
  border-radius:18px 0 0 18px;
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  padding:12px 20px 16px;
  box-shadow:var(--shadow-panel),0 0 36px rgba(0,245,212,.06);
}

.boardHead{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
}

.boardTitles{flex:1;min-width:0;text-align:center;max-width:100%}

.boardActions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.boardActionBtn{
  height:36px!important;
  min-width:auto!important;
  padding:0 14px!important;
  font-size:13px!important;
  font-weight:700!important;
  border-radius:10px!important;
  background:rgba(8,12,14,.75)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:var(--muted)!important;
}

.boardActionBtn:hover{
  border-color:rgba(0,245,212,.35)!important;
  color:var(--cyan)!important;
  background:rgba(0,245,212,.06)!important;
}

.boardSubtitle{
  margin:3px 0 0;
  color:var(--green);
  font-size:12px;
  font-weight:700;
  letter-spacing:4px;
  text-transform:uppercase;
  opacity:.88;
}

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

.panelFretboard .panelHead h2{color:#ecfffa}

.title{display:none}

.title h1{
  font-size:clamp(20px,2.8vw,28px);
  line-height:1.15;
  margin:0;
  font-weight:700;
  letter-spacing:-.02em;
  color:#ecfffa;
  text-shadow:0 0 16px rgba(0,245,212,.18);
}

.boardTitles h1{
  font-size:clamp(18px,2.4vw,26px);
  line-height:1.1;
  margin:0;
  font-weight:700;
  letter-spacing:.02em;
  color:#ecfffa;
  text-shadow:0 0 16px rgba(0,245,212,.18);
}

.svgWrap{
  position:relative;
  z-index:1;
  flex:1;
  min-height:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:auto;
  border-radius:0;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(0,245,212,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.fretSvg{
  width:100%;
  min-width:1040px;
  height:auto;
  display:block;
}

.fretSvg .liveNeonOuter,.fretSvg .livePulse,.fretSvg .livePulseRing{
  animation:liveNotePulse .85s ease-in-out infinite;
}

.fretSvg .liveDot{
  animation:liveDotNeon .85s ease-in-out infinite;
  filter:drop-shadow(0 0 3px #ff2222) drop-shadow(0 0 8px rgba(255,34,34,.85)) drop-shadow(0 0 16px rgba(255,34,34,.5));
}

.scaleNotesPanel{
  position:relative;
  z-index:1;
  margin-top:10px;
  padding:8px 16px;
  border-top:1px solid rgba(0,245,212,.12);
  border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,rgba(0,245,212,.04),rgba(8,12,14,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.scaleNotesPanel .scaleInfo{
  display:block;
  min-height:auto;
  padding:0;
  text-align:center;
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  font-size:clamp(14px,1.6vw,17px);
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.35;
}

.scaleNotesPanel .scaleInfo::-webkit-scrollbar{display:none}

.scaleNotesPanel .scaleInfo b{
  display:inline;
  margin:0 .35em 0 0;
  font-size:inherit;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--green);
  opacity:.92;
}

.scaleInfoRow{display:inline}

.scaleInfoChar{
  color:var(--muted);
  font-weight:700;
  font-size:.95em;
}

.scaleInfoChar .charNote{color:#fff0a8}

@keyframes liveNotePulse{
  0%,100%{opacity:.35}
  50%{opacity:.85}
}

@keyframes liveDotNeon{
  0%,100%{filter:drop-shadow(0 0 3px #ff2222) drop-shadow(0 0 8px rgba(255,34,34,.75)) drop-shadow(0 0 14px rgba(255,34,34,.4))}
  50%{filter:drop-shadow(0 0 5px #ff4444) drop-shadow(0 0 12px rgba(255,34,34,.95)) drop-shadow(0 0 22px rgba(255,34,34,.65))}
}

/* ── D) Bottom Control Deck ── */
.controlDeck{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}

.deckCard{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  min-height:0;
}

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

.deckHead{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 14px 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.deckHead h3{
  margin:0;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.deckBadge{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cyan);
  opacity:.65;
  padding:2px 6px;
  border-radius:6px;
  border:1px solid rgba(0,245,212,.18);
  background:rgba(0,245,212,.06);
}

.deckBody{
  position:relative;
  z-index:1;
  padding:10px 14px 14px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.deckStub{opacity:.72}

.deckBtnGroup{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.modeBtn,.speedBtn,.toggleBtn,.exportBtn{
  height:36px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  min-width:0;
  padding:0 8px;
}

.modeBtn.active:not(:disabled){
  background:rgba(0,245,212,.12);
  border-color:rgba(0,245,212,.35);
  color:var(--cyan);
}

.modeBtn:disabled,.speedBtn:disabled,.toggleBtn:disabled,.exportBtn:disabled,.deckSelect:disabled,.deckSlider:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.speedRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:8px;
}

.bpmDisplay{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  min-width:72px;
  text-align:center;
}

.bpmDisplay b{
  color:var(--green);
  font-size:20px;
  font-weight:800;
}

.deckSlider{
  width:100%;
  height:6px;
  accent-color:var(--green);
  cursor:pointer;
}

.deckSelect,.deckSelectSm{
  width:100%;
  height:38px;
  margin-bottom:8px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,12,14,.82);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  padding:0 10px;
  font-family:inherit;
}

.deckSelectSm{margin-bottom:0;flex:1}

.sliderLabel{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:4px;
  letter-spacing:.04em;
}

.toggleRow{
  display:flex;
  gap:6px;
  align-items:center;
}

.deckTunerBody{text-align:center}

.deckTunerBody .note{
  font-size:clamp(32px,4vw,48px);
  color:var(--green);
  text-shadow:0 0 20px rgba(94,227,62,.28);
}

.deckTunerBody .freq{font-size:12px;margin-top:2px}
.deckTunerBody .meter{margin-top:8px;height:8px}

.legendGrid{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.legendItem{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

.legendSwatch{
  width:14px;
  height:14px;
  border-radius:50%;
  flex-shrink:0;
  border:1px solid rgba(0,0,0,.3);
}

.legendRoot{background:var(--green)}
.legendScale{background:#5ef8de}
.legendLive{background:#ff2222;box-shadow:0 0 10px rgba(255,34,34,.85),0 0 20px rgba(255,34,34,.45)}
.legendGhost{background:#777;opacity:.38}
.legendChar{background:#fff0a8;box-shadow:0 0 8px rgba(255,240,168,.45)}

.deckFeedback .stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  text-align:center;
}

.deckFeedback .stat b{font-size:22px}

.deckExportBody{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.exportBtn{width:100%}

.patterns{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.pbtn{
  min-width:40px;
  height:36px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}

.pbtn:hover{border-color:rgba(0,245,212,.28);background:rgba(0,245,212,.06)}
.pbtn.active{
  background:linear-gradient(160deg,rgba(0,245,212,.22),rgba(94,227,62,.18));
  color:#ecfffa;
  border-color:rgba(0,245,212,.45);
  box-shadow:0 0 14px rgba(0,245,212,.18);
}

.bottom{display:none}

.bottom > .panel{
  padding:16px 18px;
}

.panelMiniHead{
  position:relative;
  z-index:1;
  margin:0 0 12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
}

.liveBox{
  text-align:center;
  position:relative;
  z-index:1;
}

.note{
  font-size:clamp(36px,5vw,54px);
  line-height:1;
  color:var(--cyan);
  font-weight:800;
  text-shadow:0 0 20px rgba(0,245,212,.28);
}

.freq{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
  font-weight:500;
}

.meter{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  margin-top:10px;
  border:1px solid rgba(255,255,255,.06);
}

.meter span{
  height:100%;
  width:0%;
  display:block;
  background:linear-gradient(90deg,var(--green),var(--cyan),var(--yellow),var(--red));
  box-shadow:0 0 12px rgba(0,245,212,.35);
  transition:width .08s linear;
}

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  text-align:center;
  position:relative;
  z-index:1;
}

.stats .panelMiniHead{grid-column:1/-1}

.stat b{
  display:block;
  font-size:24px;
  font-weight:800;
}

.stat small{
  color:var(--muted);
  font-weight:600;
  font-size:12px;
  letter-spacing:.04em;
}

.ok{color:var(--green);text-shadow:0 0 12px rgba(94,227,62,.25)}
.bad{color:var(--red)}
.pct{color:var(--cyan);text-shadow:0 0 12px rgba(0,245,212,.22)}

.scaleInfo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#dce7ee;
  font-weight:600;
  line-height:1.6;
  font-size:14px;
  position:relative;
  z-index:1;
  min-height:120px;
}

.charNote{
  color:#fff0a8;
  font-weight:800;
  text-shadow:0 0 10px rgba(255,240,168,.35);
}

.legendLine{
  margin-top:8px;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}

.legendLine .charNote{
  color:#fff0a8;
}

.sessionBar{display:none}

.footerTip{
  position:relative;
  z-index:2;
  flex-shrink:0;
  border-top:1px solid rgba(0,245,212,.14);
  background:linear-gradient(180deg,rgba(11,15,16,.92),rgba(8,11,12,.98));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:12px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  box-shadow:0 -8px 40px rgba(0,0,0,.35);
}

.tipText{
  margin:0;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  line-height:1.45;
  flex:1;
  min-width:200px;
}

.tipText:before{
  content:"💡 ";
  opacity:.7;
}

.appVersion{
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--muted);
  opacity:.65;
  white-space:nowrap;
}

.sessionBarLabel{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  display:block;
}

.sessionBarVersion{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  opacity:.65;
}

.sessionBarStatus{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 22px;
  font-size:14px;
  font-weight:600;
  color:#e8f3ef;
}

.sessionBarItem{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.sessionBarItem .value{
  color:var(--muted);
  font-weight:500;
}

.sessionStatusDot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
  background:#6b7280;
  box-shadow:0 0 0 2px rgba(255,255,255,.06);
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(2,4,4,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:18px;
}

.result{
  max-width:460px;
  width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.026));
  border:1px solid rgba(0,245,212,.28);
  border-radius:24px;
  padding:42px 30px;
  text-align:center;
  box-shadow:0 30px 100px rgba(0,0,0,.58),0 0 40px rgba(0,245,212,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.result h2{
  font-size:28px;
  margin:0 0 14px;
  font-weight:700;
  color:#ecfffa;
}

.result .big{
  font-size:76px;
  font-weight:800;
  color:var(--cyan);
  line-height:1;
  text-shadow:0 0 24px rgba(0,245,212,.32);
}

.result p{
  color:var(--muted);
  margin:0;
}

.infoModal{
  max-width:480px;
  width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.026));
  border:1px solid rgba(0,245,212,.28);
  border-radius:20px;
  padding:28px 24px;
  box-shadow:0 30px 100px rgba(0,0,0,.58),0 0 40px rgba(0,245,212,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.infoModal h2{
  margin:0 0 14px;
  font-size:22px;
  font-weight:700;
  color:#ecfffa;
}

.infoModal p,.infoModal li{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  margin:0 0 10px;
}

.infoModal ul{
  margin:0 0 14px;
  padding-left:20px;
}

.infoModal button{
  width:100%;
  height:48px;
  margin-top:8px;
  background:linear-gradient(160deg,#0fd89a 0%,#3de85a 42%,#5df23e 100%);
  color:#031008;
  border-color:rgba(94,227,62,.45);
}

.result button{
  margin-top:16px;
  width:100%;
  height:52px;
  background:linear-gradient(160deg,#0fd89a 0%,#3de85a 42%,#5df23e 100%);
  color:#031008;
  border-color:rgba(94,227,62,.45);
  box-shadow:0 4px 16px rgba(94,227,62,.18),inset 0 1px 0 rgba(255,255,255,.24);
}

.portrait{display:none}
html[data-device-orientation="landscape"] .portrait{display:none!important}

.hiddenFeature{display:none!important}

.portraitBar{
  height:4px;
  border-radius:99px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  margin-top:22px;
}

.portraitBar i{
  display:block;
  width:38%;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  animation:loadingBar .85s ease-in-out infinite alternate;
}

@keyframes loadingBar{
  from{transform:translateX(-30%)}
  to{transform:translateX(190%)}
}

@media(max-width:900px){
  html[data-device-orientation="portrait"] .topHeader,
  html[data-device-orientation="portrait"] .keySelector,
  html[data-device-orientation="portrait"] .patternSelector,
  html[data-device-orientation="portrait"] .focusNotesSelector,
  html[data-device-orientation="portrait"] .app,
  html[data-device-orientation="portrait"] .footerTip{display:none}
  html[data-device-orientation="portrait"] .shell{padding-top:calc(env(safe-area-inset-top,0px) + 24px);flex:1}
  html[data-device-orientation="portrait"] .portrait{
    display:flex;
    min-height:100vh;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:30px 24px;
  }
  html[data-device-orientation="portrait"] .portraitCard{
    max-width:460px;
    width:calc(100% - 36px);
    padding:42px 30px;
    border:1px solid rgba(0,245,212,.28);
    border-radius:24px;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.026));
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 30px 100px rgba(0,0,0,.58),0 0 32px rgba(0,245,212,.08);
  }
  html[data-device-orientation="portrait"] .portrait h2{
    margin:0 0 12px;
    font-size:22px;
    font-weight:700;
    color:#ecfffa;
  }
  html[data-device-orientation="portrait"] .portrait p{
    margin:0;
    color:var(--muted);
    line-height:1.55;
    font-size:15px;
  }
  html[data-device-orientation="portrait"] .portrait b{color:var(--cyan)}
}

@media(max-width:1400px){
  .controlDeck{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:1100px){
  .controlDeck{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:1024px){
  .shell{padding:calc(env(safe-area-inset-top,0px) + 16px) 20px 16px}
  .app{gap:14px}
  .controlDeck{grid-template-columns:repeat(2,1fr);gap:10px}
  .footerTip{padding:12px 20px}
  .topHeader{padding:8px 12px;margin-bottom:10px}
  .topHeader .headerControls #scale{min-width:96px}
  select,button{height:42px;font-size:14px}
}

@media(max-width:900px) and (orientation:landscape){
  .shell{padding:calc(env(safe-area-inset-top,0px) + 12px) 12px 10px}
  .topHeader{gap:6px;padding:8px 10px;margin-bottom:8px}
  .headerMainRow{gap:8px}
  .topHeader .backLink{padding:4px 8px;font-size:11px}
  .topHeader .boardActionBtn{height:28px!important;padding:0 8px!important;font-size:10px!important}
  .topHeader .wordmark.compact{font-size:14px}
  .topHeader .xmark.mini{width:26px;height:26px}
  .topHeader .xmark.mini:before,.topHeader .xmark.mini:after{height:18px;left:10px;top:3px}
  .topHeader select,.topHeader button{height:30px;font-size:11px;min-width:42px;padding:0 7px}
  .topHeader .iconBtn{min-width:30px!important;width:30px;font-size:13px}
  .topHeader .headerControls{gap:4px}
  .app{gap:12px}
  select,button{height:38px;font-size:12px;min-width:52px;padding:0 8px}
  .iconBtn{min-width:38px!important;width:38px;font-size:15px}
  .svgWrap{min-height:220px}
  .fretSvg{min-width:880px}
  .scaleNotesPanel{margin-top:8px;padding:6px 12px}
  .scaleNotesPanel .scaleInfo{font-size:13px}
  .keySelector .kbtn{min-width:34px;height:32px;font-size:13px}
  .patternSelector .pbtn{min-width:34px;height:32px;font-size:13px}
  .pbtn{min-width:34px;height:32px;font-size:13px}
  .controlDeck{grid-template-columns:repeat(3,1fr);gap:8px}
  .deckHead h3{font-size:11px}
  .footerTip{padding:10px 16px}
}

@media(max-width:720px){
  .shell{padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 12px}
  .headerTopBar{flex-wrap:wrap}
  .headerActions{width:100%;justify-content:flex-end}
  .controlDeck{grid-template-columns:1fr}
  .keySelector .keyBar{justify-content:flex-start}
  .patternSelector .patterns{justify-content:flex-start}
  .footerTip{flex-direction:column;align-items:flex-start;gap:8px}
}

@media(max-width:520px) and (orientation:landscape){
  .headerBrandRow{gap:8px}
  .xmark.mini{width:28px;height:28px}
  .xmark.mini:before,.xmark.mini:after{height:22px;left:12px}
  .wordmark.compact{font-size:14px}
}