/* Fretboard Explorer — design rules follow the GTI Fretboard Generator */
:root{
  --bg:#000000;--bg2:#0a0a0a;--bg3:#111111;--bg4:#1a1a1a;
  --border:#1f1f1f;--border2:#2a2a2a;
  --text:#e8e8e8;--text2:#b0b0b0;--text3:#888;
  --accent1:#8c4dff;--accent2:#f2f2f2;--accent3:#86efac;
  --on-accent:#1a1a1a;--on-sky:#0a0a0a;--on-green:#0a0a0a;--err:#f9a8a8;
  --accent1-hi:color-mix(in srgb,var(--accent1) 55%,#fff);
  --accent2-text:#ffffff;--hover:rgba(255,255,255,.06);
  --note-bg:#f5f5f5;--note-fg:#0a0a0a;
  --fb-bg:#0a0a0a;--fb-area:#121212;--fb-inlay:#262626;--fb-nut:#9a9a9a;--fb-fret:#2c2c2c;--fb-str:#5a5a5a;
  --r:6px;--r2:10px;color-scheme:dark;
}
/* light theme (the accent colour is set from the theme panel) */
:root[data-theme="light"]{
  --bg:#f4f2ee;--bg2:#ffffff;--bg3:#f0ede8;--bg4:#e5e1da;
  --border:#e1ddd5;--border2:#cfcac0;
  --text:#1c1b19;--text2:#47453f;--text3:#76726a;
  --accent2:#2b2a27;--accent3:#1fa55a;--on-sky:#ffffff;
  --accent1-hi:color-mix(in srgb,var(--accent1) 78%,#000);
  --accent2-text:#1c1b19;--hover:rgba(0,0,0,.05);--err:#c2410c;
  --note-bg:#1c1b19;--note-fg:#ffffff;
  --fb-bg:#ffffff;--fb-area:#f3f0ea;--fb-inlay:#d9d4ca;--fb-nut:#6f6b63;--fb-fret:#d6d1c7;--fb-str:#9a958b;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;overflow-x:hidden;}
body{background:var(--bg);color:var(--text);font-family:'Barlow','DIN Condensed',sans-serif;min-height:100vh;overflow-x:hidden;}
button,select,input{font-family:'Barlow',sans-serif;}
[hidden]{display:none !important;}

/* ── header (same as generator) ── */
.gti-nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:64px;background:rgba(10,10,8,.96);backdrop-filter:blur(12px);border-bottom:1px solid #1e1d1b;}
.nav-logo{height:32px;mix-blend-mode:screen;}
.ham-wrap{position:relative;width:52px;height:52px;z-index:300;}
.ham-wrap::after{content:'';position:fixed;top:0;right:0;width:372px;height:100vh;pointer-events:none;}
.ham-wrap:hover::after,.ham-wrap.active::after{pointer-events:all;}
.ham{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:8px;width:52px;height:52px;cursor:pointer;background:none;border:none;padding:12px;}
.ham span{display:block;width:100%;height:1px;background:#f0ede6;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s;transform-origin:center;}
.ham.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.ham.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.overlay{position:fixed;inset:0;z-index:240;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .4s;}
.overlay.visible{opacity:1;pointer-events:all;}
.drawer{position:fixed;top:0;right:0;width:320px;height:100vh;background:#0d0d0b;border-left:1px solid #1e1d1b;z-index:250;display:flex;flex-direction:column;justify-content:center;padding:80px 0;transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);}
.drawer.open{transform:translateX(0);}
.drawer a{position:relative;display:flex;align-items:center;justify-content:space-between;padding:15px 40px;border-bottom:1px solid #1e1d1b;text-decoration:none;opacity:0;transform:translateX(16px);transition:background .25s,opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1);}
.drawer a:first-child{border-top:1px solid #1e1d1b;}
.drawer a:hover{background:rgba(107,33,214,.07);}
.drawer.open a{opacity:1;transform:translateX(0);}
.d-name{font-family:'Libre Baskerville',serif;font-size:1rem;color:rgba(240,237,230,.45);transition:color .25s;}
.drawer a:hover .d-name{color:#f0ede6;}
.d-arr{font-size:.8rem;color:#2e2d2a;opacity:0;transition:color .25s,opacity .25s;}
.drawer a:hover .d-arr{opacity:1;color:#6b21d6;}
@media(max-width:900px){.gti-nav{padding:0 28px;height:60px;}}
@media(max-width:600px){.gti-nav{padding:0 16px;height:56px;}.drawer{width:100%;}}
@media(hover:none){.ham-wrap::after{display:none;}body:has(#drawer.open) #nav{z-index:260;}}

/* ── layout ── */
.app{display:grid;grid-template-columns:360px minmax(0,1fr);min-height:100vh;padding-top:64px;}
.sidebar{background:var(--bg2);border-right:1px solid var(--border);padding:20px 16px;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 64px);position:sticky;top:64px;}
.main{padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0;}
@media(max-width:900px){
  .app{display:flex;flex-direction:column;}
  .sidebar{order:2;max-height:none;position:static;border-right:none;border-top:1px solid var(--border);}
  .main{order:1;}
}
@media(max-width:600px){.main{padding:12px;}}

.logo{font-size:11px;letter-spacing:.2em;color:var(--accent1);text-transform:uppercase;margin-bottom:4px;font-weight:600;}
.app-title{font-size:20px;font-weight:600;margin-bottom:6px;line-height:1.2;letter-spacing:.02em;}
.app-sub{font-size:11px;color:var(--text3);margin-bottom:20px;line-height:1.6;}
.badge{font-size:10px;font-weight:600;color:var(--accent1);border:1px solid var(--accent1);border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:middle;letter-spacing:.06em;}
.sec{margin-bottom:18px;}
.sec-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:9px;padding-bottom:4px;border-bottom:1px solid var(--border);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.sec-title small{font-size:10px;color:var(--text3);letter-spacing:.04em;text-transform:none;font-weight:500;}
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.field{display:flex;flex-direction:column;gap:3px;min-width:0;}
.field>label{font-size:11px;color:var(--text2);letter-spacing:.03em;font-weight:500;}
.hint{font-size:11px;color:var(--text3);margin-top:4px;line-height:1.55;}
.hint span{color:var(--accent3);}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}

select,.txt{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:14px;font-weight:500;padding:7px 8px;outline:none;width:100%;min-width:0;transition:border-color .15s;}
select:focus,.txt:focus{border-color:var(--accent1);}
.txt{font-size:16px;}
.num-wrap{display:flex;align-items:stretch;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .15s;}
.num-wrap:focus-within{border-color:var(--accent1);}
.num-wrap input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:16px;font-weight:500;padding:7px 6px 7px 9px;-moz-appearance:textfield;appearance:textfield;}
.num-wrap input::-webkit-inner-spin-button,.num-wrap input::-webkit-outer-spin-button{-webkit-appearance:none;}
.num-btns{display:flex;flex-direction:column;border-left:1px solid var(--border);}
.num-btn{flex:1;width:22px;background:transparent;border:none;color:var(--text2);font-size:8px;cursor:pointer;user-select:none;-webkit-user-select:none;}
.num-btn:hover{background:var(--bg4);color:var(--text);}
.num-btn+.num-btn{border-top:1px solid var(--border);}
@media(pointer:coarse){
  .num-wrap{min-height:44px;}
  .num-btns{flex-direction:row-reverse;}
  .num-btn{width:40px;font-size:12px;}
  .num-btn+.num-btn{border-top:none;border-right:1px solid var(--border);}
}

/* buttons */
button.std{background:var(--bg4);border:1px solid var(--border2);color:var(--text);font-size:13px;font-weight:500;padding:8px 12px;border-radius:var(--r);cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;}
button.std:hover{background:var(--bg3);border-color:var(--accent1);}
button.std:disabled{opacity:.35;cursor:default;border-color:var(--border2);}
button.std.on{border-color:var(--accent1);color:var(--accent1);}
button.primary{background:var(--accent1);border:1px solid var(--accent1);color:var(--on-accent);font-size:14px;font-weight:700;padding:10px 22px;border-radius:var(--r);cursor:pointer;transition:background .15s;white-space:nowrap;}
button.primary:hover{background:var(--accent1-hi);}
button.primary:active{transform:scale(.98);}
button.primary.on{background:var(--accent1-hi);}
button.dash{width:100%;font-size:11px;font-weight:600;padding:7px 0;border-radius:var(--r);cursor:pointer;background:none;border:1px dashed var(--border2);color:var(--text2);transition:all .12s;}
button.dash:hover{border-color:var(--accent1);color:var(--accent1);}
button.small{font-size:11px;padding:6px 10px;}

.preset-wrap{display:flex;gap:6px;flex-wrap:wrap;}
.preset-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:11px;font-weight:600;padding:6px 10px;border-radius:var(--r);cursor:pointer;transition:background .15s,border-color .15s,color .15s;display:inline-flex;gap:5px;align-items:center;}
.preset-btn:hover{background:var(--bg4);border-color:var(--accent1);color:var(--text);}
.preset-icon{font-size:12px;color:var(--accent1);}

.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;}
.toggle-label{font-size:12px;color:var(--text2);font-weight:500;}
.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--border2);border-radius:12px;cursor:pointer;transition:background .2s,border-color .2s;}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--text2);border-radius:50%;transition:transform .2s,background .2s;}
.toggle-switch input:checked+.toggle-slider{background:var(--accent1);border-color:var(--accent1);}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);background:var(--on-accent);}
.toggle-switch input:focus-visible+.toggle-slider{outline:2px solid var(--accent2);outline-offset:2px;}

/* seed */
.seed-row{display:flex;gap:6px;align-items:stretch;}
.seed-display{flex:1;min-width:0;color:var(--text3);font-family:'Barlow',monospace;font-size:10px;padding:7px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.seed-input{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:'Barlow',monospace;font-size:16px;padding:6px 9px;outline:none;}
.seed-input:focus{border-color:var(--accent1);}
.seed-btn{width:64px;flex-shrink:0;font-size:11px;font-weight:600;border-radius:var(--r);cursor:pointer;border:1px solid var(--border2);background:var(--bg4);color:var(--text2);}
.seed-btn:hover{background:var(--bg3);color:var(--text);}
.seed-apply{background:var(--accent1);border-color:var(--accent1);color:var(--on-accent);font-weight:700;}
.seed-apply:hover{background:var(--accent1-hi);color:var(--on-accent);}
.seed-err{font-size:10px;color:#f87171;min-height:14px;margin-top:3px;}

/* main: toolbar & tabs */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tabs{display:inline-flex;border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;margin-right:auto;}
.tab{background:none;border:none;color:var(--text3);font-size:11px;font-weight:700;letter-spacing:.14em;padding:9px 14px;cursor:pointer;}
.tab.on{background:var(--accent1);color:var(--on-accent);}
.kbd{font-size:10px;color:var(--text3);}

.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
@media(max-width:1100px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:600px){.metrics{grid-template-columns:1fr 1fr;}}
.metric{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:12px 14px;min-width:0;}
.metric-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;font-weight:500;}
.metric-val{font-size:22px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.metric-unit{font-size:12px;color:var(--text2);margin-left:4px;font-weight:500;}

.panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:14px;min-width:0;}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.panel-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);font-weight:600;}
.panel-title b{color:var(--text);letter-spacing:.02em;text-transform:none;font-size:13px;margin-left:8px;}

/* fretboard */
.fb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
#fretboard svg{display:block;width:100%;min-width:760px;height:auto;}
.legend{font-size:11px;color:var(--text3);display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;}
.lg{display:inline-flex;align-items:center;gap:5px;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}


/* fretboard */
.fb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);}
#fretboard svg{display:block;width:100%;min-width:900px;height:auto;}
#fretboard .fb-hit{fill:transparent;cursor:pointer;}
#fretboard .fb-hit:hover{fill:var(--hover);}
.legend{font-size:11px;color:var(--text3);display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;}
.lg{display:inline-flex;align-items:center;gap:5px;}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;}

/* segmented controls */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;}
.seg button{background:var(--bg3);border:none;color:var(--text3);font-size:12px;font-weight:600;padding:9px 4px;cursor:pointer;white-space:nowrap;}
.seg button+button{border-left:1px solid var(--border2);}
.seg button:hover:not(:disabled){color:var(--text);}
.seg button.on{background:var(--accent1);color:var(--on-accent);}
.seg button:disabled{opacity:.35;cursor:default;}

/* chips */
.pick-row{display:flex;flex-wrap:wrap;gap:4px;}
.pick{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);border-radius:var(--r);padding:6px 8px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;min-width:38px;}
.pick small{font-size:9px;color:var(--text3);font-weight:500;}
.pick:hover{border-color:var(--accent1);}
.pick.on{background:var(--accent1);border-color:var(--accent1);color:var(--on-accent);}
.pick.on small{color:var(--on-accent);}
.ct-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px;}
.ct-cell{display:flex;flex-direction:column;gap:2px;font-size:10px;color:var(--text3);}
.ct-cell select{font-size:13px;padding:6px 4px;}

.iv-row{display:flex;flex-wrap:wrap;gap:6px;}
.iv-chip{background:var(--bg);border:1.5px solid var(--accent2);color:var(--accent2-text);border-radius:var(--r);padding:6px 10px;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;line-height:1.2;min-width:48px;}
.iv-chip b{font-size:15px;}
.iv-chip small{font-size:10px;opacity:.8;}
.iv-chip.on{background:var(--accent1);border-color:var(--accent1);color:var(--on-accent);}
.iv-chip.root{background:var(--accent3);border-color:var(--accent3);color:var(--on-green);}
.iv-chip[data-ro]{cursor:default;}
.deg-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
.deg-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);border-radius:var(--r);padding:7px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:0;}
.deg-btn b{font-size:14px;color:var(--text);}
.deg-btn small{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.deg-btn:hover{border-color:var(--accent1);}
.deg-btn.on{background:var(--accent1);border-color:var(--accent1);}
.deg-btn.on b,.deg-btn.on small{color:var(--on-accent);}
@media(max-width:600px){.deg-row{grid-template-columns:repeat(4,minmax(0,1fr));}}

/* voicings */
.vo-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;}
@media(max-width:700px){.vo-opts{grid-template-columns:1fr;}}
.vo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px;max-height:340px;overflow-y:auto;margin-top:12px;padding-right:2px;}
.vo-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;text-align:left;cursor:pointer;color:var(--text);display:flex;gap:10px;align-items:center;}
.vo-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.vo-name{font-size:15px;font-weight:700;color:var(--accent1-hi);}
.vo-tones{font-size:13px;font-weight:600;color:var(--text);letter-spacing:.02em;}
.vo-item:hover{border-color:var(--accent1);}
.vo-item.on{border-color:var(--accent1);background:color-mix(in srgb,var(--accent1) 14%,var(--bg2));}
.vo-tab{font-family:'Barlow',monospace;font-size:10px;color:var(--text3);letter-spacing:.04em;}
.thumb{width:112px;height:auto;flex-shrink:0;background:var(--bg3);border-radius:4px;}
.vo-meta{font-size:10px;color:var(--text3);}

/* status toast */
.status{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--bg4);border:1px solid var(--border2);color:var(--text);font-size:13px;padding:10px 16px;border-radius:var(--r);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:500;max-width:calc(100vw - 32px);}
.status.visible{opacity:1;transform:translateX(-50%) translateY(0);}
.foot{font-size:11px;color:var(--text3);line-height:1.7;padding:6px 2px 30px;}
@media(prefers-reduced-motion:reduce){*{transition:none !important;}}

.metric-val.small{font-size:15px;line-height:1.35;white-space:normal;}
.metric-sub{font-size:11px;color:var(--text3);margin-top:3px;letter-spacing:.04em;}
.sec-sub{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);font-weight:600;}

.small-seg button{padding:6px 10px;font-size:11px;}
.iv-chip.hid{opacity:.45;border-style:dashed;background:var(--bg);color:var(--text3);border-color:var(--text3);}
#fretboard.hide-mode .fb-hit{cursor:crosshair;}

.pick-notes{display:flex;flex-wrap:wrap;gap:6px;min-height:30px;}
.pick-note{background:var(--note-bg);color:var(--note-fg);border-radius:var(--r);padding:4px 10px;font-weight:700;font-size:14px;display:inline-flex;flex-direction:column;align-items:center;line-height:1.2;}
.pick-note small{font-size:9px;font-weight:500;color:var(--note-fg);opacity:.6;}
.finder-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;margin-top:10px;}
.fd-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;display:flex;flex-direction:column;gap:4px;}
.fd-item b{font-size:17px;}
.fd-item.top{border-color:var(--accent1);}
.fd-item.top b{color:var(--accent1-hi);}
.fd-item span{font-size:12px;color:var(--text2);display:flex;flex-wrap:wrap;gap:4px 10px;}
.fd-item small{font-size:10px;color:var(--accent3);margin-left:2px;}
.finder-results .hint{grid-column:1/-1;}
.fd-go{align-self:flex-start;margin-top:4px;}
.shape-tab:disabled{opacity:.35;cursor:default;}
.fd-lead{grid-column:1/-1;font-size:13px;color:var(--text2);line-height:1.7;}
.fd-lead b{color:var(--text);}
.fd-sub{grid-column:1/-1;margin-top:6px;}
.fd-item em{font-style:normal;color:var(--accent3);font-weight:700;}

/* tidy layout */
.tool-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:12px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);}
.tool-group{display:flex;align-items:center;gap:6px;}
.tool-label{font-size:10px;letter-spacing:.12em;color:var(--text3);font-weight:600;white-space:nowrap;}
.tool-hint{flex:1 1 220px;font-size:11px;color:var(--accent3);margin:0;text-align:right;min-height:1em;}
@media(max-width:700px){.tool-hint{text-align:left;}}
.sub-actions{margin-top:10px;}
.sub-block{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.shape-target{font-size:12px;color:var(--text2);margin:-4px 0 10px;line-height:1.6;}
.shape-target span{color:var(--accent3);}
.opt-box{margin-top:12px;padding:12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);}
.opt-box:not(:has(> :not([hidden]))){display:none;}
.opt-box .vo-opts{margin:0;}
.help{margin-top:8px;}
.help summary{font-size:11px;color:var(--text3);cursor:pointer;}
.help summary:hover{color:var(--text2);}
#finder-results:empty{display:none;}
#finder-results{margin-top:12px;}

.std-tag{font-style:normal;font-size:9px;font-weight:700;color:var(--on-green);background:var(--accent3);border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:2px;letter-spacing:.04em;}

.inline-field{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);}
.inline-field select{width:auto;font-size:13px;padding:5px 8px;}
.sc-item .sc-meta{font-size:11px;color:var(--text3);}
.sc-item .sc-miss{font-size:11px;color:var(--text2);}
.sc-item .sc-miss em{font-style:normal;color:var(--accent2-text);}

/* live position overlay + tuner */
.fb-stack{position:relative;min-width:900px;}
#fb-live{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;}
.tn-body{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);gap:14px 22px;align-items:center;}
.tn-read{text-align:center;}
.tn-note{font-size:46px;font-weight:700;line-height:1;letter-spacing:.01em;transition:color .15s;}
.tn-note small{font-size:18px;font-weight:600;color:var(--text2);margin-left:2px;}
.tn-note.ok{color:var(--accent3);}
.tn-sub{display:flex;gap:12px;justify-content:center;font-size:12px;color:var(--text2);margin-top:6px;}
.tn-meter{position:relative;height:44px;border-bottom:1px solid var(--border2);margin:0 6px;}
.tn-tick{position:absolute;bottom:-1px;transform:translateX(-50%);font-size:10px;color:var(--text3);padding-bottom:3px;border-left:1px solid var(--border2);height:14px;}
.tn-tick.mid{border-left-color:var(--accent3);height:22px;color:var(--accent3);}
.tn-needle{position:absolute;bottom:0;left:50%;width:4px;height:36px;margin-left:-2px;border-radius:2px;background:var(--accent2);opacity:.25;transition:left .08s linear,opacity .2s,background .15s;}
.tn-needle.on{opacity:1;}
.tn-needle.ok{background:var(--accent3);}
.tn-strings{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;}
.tn-str{display:flex;flex-direction:column;align-items:center;min-width:48px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;font-size:12px;color:var(--text2);transition:border-color .15s,color .15s,background .15s;}
.tn-str b{font-size:14px;color:var(--text);}
.tn-str small{font-size:10px;color:var(--text3);min-height:12px;}
.tn-str.near{border-color:var(--accent2);color:var(--accent2-text);}
.tn-str.ok{border-color:var(--accent3);background:color-mix(in srgb,var(--accent3) 8%,transparent);}
.tn-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;margin:12px 0 4px;align-items:end;}
@media(max-width:700px){.tn-body{grid-template-columns:1fr}.tn-opts{grid-template-columns:1fr}}

.tn-chord{display:grid;gap:10px;}
.tn-chord.idle{opacity:.55;}
#tn-chord-res{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-auto-rows:98px;gap:8px;align-content:start;height:204px;overflow-y:auto;}
#tn-chord-res .fd-item{height:98px;box-sizing:border-box;overflow:hidden;}
#tn-chord-res .hint{grid-column:1/-1;}
#tn-chord-notes{min-height:40px;align-content:flex-start;}
@media(max-width:700px){#tn-chord-res{height:310px;}}

#tn-single,#tn-chord{min-height:264px;}
#tn-single{align-content:center;}
.tn-stage .tn-chord{display:grid;gap:10px;}

/* tuner controls and layout */
.tn-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
.tn-start{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px 0 16px;border-radius:12px;border:1.5px solid var(--accent2);background:var(--accent2);color:var(--on-sky);font:700 14px/1 Barlow,sans-serif;cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s;}
.tn-start:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent2) 20%,transparent);}
.tn-start.on{background:color-mix(in srgb,var(--accent3) 10%,transparent);border-color:var(--accent3);color:var(--accent3);}
.tn-start.on:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent3) 18%,transparent);}
.tn-status{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text3);min-width:68px;}
.tn-dot{width:9px;height:9px;border-radius:50%;background:var(--border2);display:inline-block;}
.tn-status.on{color:var(--accent3);}
.tn-status.on .tn-dot{background:var(--accent3);box-shadow:0 0 8px var(--accent3);animation:tn-pulse 1.4s ease-in-out infinite;}
@keyframes tn-pulse{50%{opacity:.35;}}
.tn-level{width:140px;height:8px;border-radius:4px;background:var(--bg4);overflow:hidden;border:1px solid var(--border2);}
.tn-level i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent3));transition:width .06s linear;}
.tn-bar-sp{flex:1;}
.tn-modewrap{display:flex;align-items:center;gap:8px;}
.tn-modelabel{font-size:11px;color:var(--text3);letter-spacing:.04em;}
.tn-msg{margin:0 0 12px;min-height:18px;}
.tn-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch;}
.tn-stage .tn-body{grid-template-columns:minmax(110px,150px) minmax(0,1fr);}
.tn-stage .tn-strings{gap:5px;}
.tn-stage .tn-str{min-width:42px;padding:5px 6px;}
.tn-stage .tn-chord{border-left:1px solid var(--border);padding-left:20px;align-content:start;}
.tn-sub-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);font-weight:600;}
.tn-stage #tn-chord-res{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
@media(max-width:900px){.tn-stage{grid-template-columns:1fr;}.tn-stage .tn-chord{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:14px;}}

/* ── volume / mute (fixed, bottom-right) ── */
.vol{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;background:color-mix(in srgb,var(--bg2) 92%,transparent);border:1px solid var(--border2);border-radius:999px;backdrop-filter:blur(6px);}
.vol-btn{width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--accent2);display:grid;place-items:center;cursor:pointer;}
.vol-btn:hover{background:var(--bg4);}
.vol.muted .vol-btn{color:var(--text3);}
.vol.muted input{opacity:.4;}
.vol input[type=range]{-webkit-appearance:none;appearance:none;width:96px;height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent2) var(--p,80%),var(--border2) var(--p,80%));outline:none;cursor:pointer;}
.vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent2);border:0;}
.vol input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent2);border:0;}
.vol-num{font-size:11px;color:var(--text3);width:22px;text-align:right;font-variant-numeric:tabular-nums;}
@media(max-width:600px){.vol{right:10px;bottom:10px;}.vol input[type=range]{width:72px;}}

/* ── minus frets ── */
.minus-box{margin-top:10px;border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;background:var(--bg2);}
.minus-box summary{cursor:pointer;font-size:12px;color:var(--text2);}
.minus-box summary span{color:var(--accent2);margin-left:6px;}
.minus-box .ct-grid{margin-top:8px;}

/* ── progression ── */
.pg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px;}
@media(max-width:900px){.pg-grid{grid-template-columns:1fr;}}
.pg-text{flex:1;min-width:0;font-family:Barlow,sans-serif;font-size:13px;}
.pg-pre{width:132px;flex:0 0 132px;font-size:12px;}
#pg-msg{min-height:16px;margin:0 0 8px;}
#pg-msg.err{color:var(--err);}
.pg-bars{--cols:4;display:grid;grid-template-columns:repeat(auto-fit,minmax(max(104px,calc((100% - 6px * (var(--cols) - 1)) / var(--cols))),1fr));gap:6px;margin:6px 0 12px;}
.pg-bar{position:relative;text-align:left;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:6px 8px 7px;color:var(--text2);cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:52px;font-family:Barlow,sans-serif;}
.pg-bar:hover{border-color:var(--text3);}
.pg-bar small{font-size:9px;letter-spacing:.08em;color:var(--text3);}
.pg-bar b{font-size:14px;font-weight:600;color:var(--text);display:block;}
.pg-bar em{font-style:normal;font-size:10.5px;color:var(--accent2);}
.pg-bar.on{border-color:var(--accent3);box-shadow:0 0 0 1px var(--accent3) inset,0 0 14px color-mix(in srgb,var(--accent3) 25%,transparent);}
.pg-bar.on b{color:var(--accent3);}
.pg-bar .beatbar{position:absolute;left:0;bottom:0;height:2px;background:var(--accent3);width:0;}
.pg-ctl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-top:6px;}
.pg-opts{margin-top:10px;}
.pg-f{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--text3);letter-spacing:.06em;}
.pg-f select,.pg-f input[type=number]{font-size:13px;padding:6px 8px;}
.pg-f.chk{flex-direction:row;align-items:center;gap:6px;font-size:12px;color:var(--text2);letter-spacing:0;padding-bottom:8px;}
.pg-play.on{background:transparent;color:var(--accent3);border:1px solid var(--accent3);}
#pg-bpm{width:70px;}

/* ── strobe view / input history ── */
#tn-single{position:relative;}
.tn-viewseg{position:absolute;top:0;right:0;z-index:2;}
.tn-viewseg button{padding:4px 9px;font-size:11px;}
.tn-strobe{display:block;width:100%;height:60px;border-radius:var(--r);background:var(--bg);border:1px solid var(--border);margin:0 0 4px;}
.tn-strobe[hidden]{display:none;}
#tn-single.strobe .tn-meter{display:none;}
.tn-hist{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
.tn-hist-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.tn-hist-btns{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;}
#tn-hist-notes{max-height:112px;overflow:auto;}
#tn-scales{margin-top:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;}

/* ── quiz ── */
.qz-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;}
.qz-stage{margin-top:14px;min-height:150px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.qz-prompt{font-size:19px;font-weight:600;color:var(--text);}
.qz-info{font-size:12px;color:var(--text3);min-height:16px;}
.qz-choices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:100%;max-width:620px;}
.qz-choices button{background:var(--bg3);border:1px solid var(--border2);color:var(--text);border-radius:var(--r);padding:10px 4px;font-size:15px;font-weight:600;cursor:pointer;font-family:Barlow,sans-serif;}
.qz-choices button:hover{border-color:var(--accent2);}
.qz-choices button small{display:block;font-size:10px;color:var(--text3);font-weight:500;}
.qz-fb{min-height:22px;font-size:14px;font-weight:600;}
.qz-fb.ok{color:var(--accent3);} .qz-fb.ng{color:var(--err);}
.qz-result{display:grid;grid-template-columns:repeat(3,auto);gap:4px 24px;font-size:13px;color:var(--text2);}
.qz-result b{font-size:28px;color:var(--accent3);display:block;line-height:1.1;}
@keyframes qzpulse{0%,100%{opacity:.55}50%{opacity:1}}
.qz-pulse{animation:qzpulse 1s ease-in-out infinite;}
@media(max-width:600px){.qz-choices{grid-template-columns:repeat(4,minmax(0,1fr));}}
.tn-hist{border-top:0;padding-top:4px;margin-top:10px;}
.tn-hist-hd{margin-bottom:2px;gap:8px;}
.tn-hist-btns{gap:12px;}
.th-link{background:none;border:0;padding:0;color:var(--text3);font:inherit;font-size:12px;cursor:pointer;}
.th-link:hover:not(:disabled){color:var(--accent2);}
.th-link:disabled{opacity:.35;cursor:default;}
.th-line{font-size:15px;letter-spacing:.04em;color:var(--text2);white-space:pre;overflow-x:auto;scrollbar-width:none;min-height:22px;}
.th-line::-webkit-scrollbar{display:none;}

.dr-box{margin-top:12px;border-top:1px solid var(--border);padding-top:10px;}
.dr-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.dr-hd select{font-size:12px;padding:4px 8px;width:auto;}
.dr-grid{display:flex;flex-direction:column;gap:3px;overflow-x:auto;padding-bottom:4px;}
.dr-row{display:flex;align-items:center;gap:2px;}
.dr-lbl{width:64px;flex:none;font-size:11px;color:var(--text3);}
.dr-c{width:20px;height:22px;flex:none;padding:0;border:1px solid var(--border2);background:var(--bg3);border-radius:3px;cursor:pointer;}
.dr-c.beat{margin-left:6px;}
.dr-c.on{background:var(--accent1);border-color:var(--accent1);}
.dr-c:hover{border-color:var(--accent2);}

/* blocks: collapsible + re-orderable */
.blk-grip{display:inline-block;width:22px;text-align:center;margin-right:4px;color:var(--text3);cursor:grab;touch-action:none;user-select:none;letter-spacing:0;font-size:15px;line-height:1;vertical-align:-1px;}
.blk-grip:hover,.blk-grip:focus-visible{color:var(--accent2);outline:none;}
.blk-title{cursor:pointer;user-select:none;}
.blk-title::after{content:"▾";color:var(--text3);margin-left:8px;font-size:11px;display:inline-block;transition:transform .15s;}
.collapsed>.panel-hd .blk-title::after{transform:rotate(-90deg);}
.panel.collapsed>*:not(.panel-hd){display:none;}
.panel.collapsed>.panel-hd{margin-bottom:0;}
.panel.collapsed>.panel-hd>*:not(.panel-title){display:none;}
[data-blk].dragging{opacity:.6;outline:1px dashed var(--accent1);outline-offset:3px;}
body.blk-dragging,body.blk-dragging *{cursor:grabbing !important;user-select:none;}
.blk-foot{display:flex;justify-content:center;padding:4px 0 12px;}

.dr-hd{align-items:flex-end;}
.dr-hd .pg-f input[type=number]{width:70px;}
.pg-f .num-wrap{width:92px;}.pg-f .num-wrap input{font-size:13px;padding:6px 4px 6px 8px;}
.dr-c{width:18px;}
.dr-c.l1{background:color-mix(in srgb,var(--accent1) 42%,transparent);border-color:color-mix(in srgb,var(--accent1) 58%,transparent);}
.dr-c.l2{background:var(--accent1);border-color:var(--accent1);box-shadow:0 0 6px color-mix(in srgb,var(--accent1) 60%,transparent);}
.dr-c.bar{margin-left:14px;}
.dr-rm{width:20px;height:20px;flex:none;padding:0;margin-right:4px;background:none;border:0;color:var(--text3);cursor:pointer;font-size:14px;line-height:1;}
.dr-rm:hover{color:#f87171;}
.dr-lbl{width:104px;}

/* theme panel */
.th-box>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;}
.th-box>summary::-webkit-details-marker{display:none;}
.th-box>summary::before{content:"▸";color:var(--accent2);font-size:11px;transition:transform .15s;}
.th-box[open]>summary::before{transform:rotate(90deg);}
.th-sum{font-size:11px;color:var(--text3);letter-spacing:0;text-transform:none;font-weight:500;margin-left:auto;}
.th-lbl{font-size:10px;color:var(--text3);letter-spacing:.06em;margin-bottom:6px;}
.th-sws{display:flex;flex-wrap:wrap;gap:8px;}
.th-sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:0 0 0 1px var(--border2);}
.th-sw.on{border-color:var(--bg);box-shadow:0 0 0 2px var(--text);}
.th-custom{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:11px;color:var(--text3);}
.th-custom input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--border2);border-radius:4px;background:none;cursor:pointer;}
.th-custom .th-link{margin-left:auto;}

.dr-pager{display:flex;align-items:center;gap:8px;margin:6px 0 4px;font-size:12px;color:var(--text2);}
.dr-pager button:disabled{opacity:.35;cursor:default;}

.fb-glow{animation:nxg 2s cubic-bezier(.3,0,.8,.6) forwards;animation-fill-mode:both;}
@keyframes nxg{from{opacity:.1}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fb-glow{animation:none;opacity:.5}}

#dr-amt-note{font-size:10px;color:var(--accent2-text,var(--text2));letter-spacing:0;min-height:12px;}

.th-link:disabled{opacity:.4;cursor:default;}

.th-sw.def{position:relative;}
.th-sw.def::after{content:"既";position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--on-accent);mix-blend-mode:normal;opacity:.75;}

.th-tpls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.th-tpl{display:flex;align-items:center;gap:7px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);color:var(--text2);font-size:11px;padding:6px 8px;cursor:pointer;text-align:left;}
.th-tpl:hover{border-color:var(--text3);color:var(--text);}
.th-dots{display:inline-flex;flex:none;}
.th-dots i{width:11px;height:11px;border-radius:50%;margin-left:-3px;box-shadow:0 0 0 1px var(--bg3);}
.th-dots i:first-child{margin-left:0;}

.th-tpl-box{margin-top:14px;border-top:1px solid var(--border);padding-top:10px;}
.th-tpl-box>summary{list-style:none;cursor:pointer;font-size:10px;color:var(--text3);letter-spacing:.06em;display:flex;align-items:center;gap:6px;}
.th-tpl-box>summary::-webkit-details-marker{display:none;}
.th-tpl-box>summary::before{content:"▸";color:var(--accent2);font-size:11px;transition:transform .15s;}
.th-tpl-box[open]>summary::before{transform:rotate(90deg);}
.th-tpl-box .th-tpls{margin-top:8px;}
.tn-opts+.tn-msg{margin-top:10px;}
.tn-tip{margin-top:2px;}

/* effects */
.fx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:10px 0 6px;}
.fx-mon{min-width:170px;justify-content:center;padding:0 18px;}
.fx-state{font-size:12px;color:var(--text3);}
.fx-state.on{color:var(--accent3);font-weight:600;}
.fx-lat{font-size:11px;color:var(--text3);}
.fx-master,.fx-out{white-space:nowrap;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text3);}
.fx-master input{width:110px;}
.fx-master output{min-width:24px;color:var(--text2);}
.fx-out select{font-size:12px;padding:5px 6px;max-width:200px;}
.fx-note{border-left:3px solid var(--accent3);padding:4px 10px;margin:6px 0;}
.fx-note.err{border-left-color:var(--err);color:var(--err);}
.fx-confirm{border:1px solid var(--err);background:color-mix(in srgb,var(--err) 8%,transparent);border-radius:var(--r2);padding:10px 14px;margin:8px 0;}
.fx-confirm p{font-size:12px;color:var(--text2);margin:4px 0 10px;line-height:1.6;}
.fx-chain{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:12px;}
.fx-mod{--c:#888;position:relative;width:196px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--border2);border-top:5px solid var(--c);border-radius:10px 10px 14px 14px;padding:8px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 4px 10px rgba(0,0,0,.25);}
.fx-mod:not(.on){filter:saturate(.35);}
.fx-top{width:100%;height:18px;display:flex;align-items:center;gap:6px;}
.fx-top b{font-size:11px;color:var(--text);letter-spacing:.03em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fx-led{width:9px;height:9px;border-radius:50%;background:var(--border2);flex:none;}
.fx-mod.on .fx-led{background:var(--c);box-shadow:0 0 8px var(--c);}
.fx-mv{position:absolute;right:8px;bottom:14px;display:inline-flex;gap:3px;}
.fx-mv button{background:transparent;border:1px solid var(--border2);color:var(--text3);border-radius:4px;font-size:8px;padding:2px 5px;cursor:pointer;}
.fx-mv button:disabled{opacity:.25;cursor:default;}
.fx-knobs{display:flex;flex-direction:column;justify-content:center;gap:6px;width:100%;height:154px;}
.fx-kn{display:flex;flex-direction:column;align-items:center;gap:1px;width:56px;min-width:0;}
.fx-knob{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--bg4),var(--bg));border:1.5px solid var(--border2);position:relative;cursor:ns-resize;touch-action:none;transform:rotate(var(--a));}
.fx-knob:focus-visible{outline:2px solid var(--accent1);outline-offset:2px;}
.fx-knob i{position:absolute;left:50%;top:3px;width:3px;height:10px;margin-left:-1.5px;border-radius:2px;background:var(--c);}
.fx-kl{font-size:9px;color:var(--text3);text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fx-kv{font-size:9.5px;color:var(--text2);}
.fx-extra{display:flex;gap:6px;height:24px;width:100%;align-items:center;justify-content:center;}
.fx-chip{background:var(--bg3);border:1px solid var(--border2);color:var(--text3);border-radius:10px;font-size:10px;padding:2px 8px;cursor:pointer;}
.fx-chip.on{border-color:var(--c);color:var(--text);}
.fx-foot-sw{width:44px;height:44px;border-radius:50%;border:2px solid var(--border2);background:radial-gradient(circle at 35% 30%,var(--bg4),var(--bg));cursor:pointer;padding:0;display:grid;place-items:center;margin-top:2px;}
.fx-foot-sw span{width:22px;height:22px;border-radius:50%;background:var(--border2);}
.fx-mod.on .fx-foot-sw{border-color:var(--c);}
.fx-mod.on .fx-foot-sw span{background:var(--c);box-shadow:0 0 10px var(--c);}
.fx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:10px;}
.dr-amt-row{display:flex;align-items:center;gap:8px;}
.dr-amt-row #dr-amt-note{min-height:0;white-space:nowrap;}
.fx-p input[type=range],.fx-master input{accent-color:var(--accent1);}

.upd-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--bg4,#1a1a1a);border:1px solid var(--accent,#8c4dff);color:var(--text,#eee);font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.upd-bar button{font:inherit;border:0;border-radius:999px;padding:5px 12px;cursor:pointer;background:var(--accent,#8c4dff);color:var(--on-accent,#fff)}
.upd-bar .upd-x{background:transparent;color:inherit;padding:2px 8px;opacity:.7}

.fx-row{display:flex;justify-content:center;gap:8px;}
.fx-kw{position:relative;width:46px;height:46px;display:grid;place-items:center;}
.fx-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.fx-ring path{fill:none;stroke-width:3;stroke-linecap:round;}
.fx-ring .trk{stroke:var(--border2);opacity:.7;}
.fx-ring .lv{stroke:var(--c);opacity:.5;transition:stroke-dasharray .04s linear;}
.fx-ring.hot .lv{opacity:1;filter:drop-shadow(0 0 3px var(--c));}
.fx-fd{display:flex;flex-direction:column;align-items:center;gap:1px;width:22px;}
.fx-row:has(.fx-fd){gap:2px;}
.fx-fader{position:relative;width:22px;height:92px;cursor:ns-resize;touch-action:none;}
.fx-fader:focus-visible{outline:2px solid var(--accent1);outline-offset:2px;}
.fx-fader::before{content:'';position:absolute;left:50%;top:2px;bottom:2px;width:3px;margin-left:-1.5px;background:var(--border2);border-radius:2px;}
.fx-fader::after{content:'';position:absolute;left:2px;right:2px;top:50%;height:1px;background:var(--text3);opacity:.5;}
.fx-fader i{position:absolute;left:1px;width:20px;height:10px;border-radius:3px;background:var(--c);top:calc((1 - var(--f)) * (100% - 10px));box-shadow:0 1px 4px rgba(0,0,0,.4);z-index:1;}
.fx-fl{font-size:8.5px;color:var(--text3);}
.fx-gate-ind{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--text3);}
.fx-gate-ind i{width:9px;height:9px;border-radius:50%;background:var(--border2);}
.fx-gate-ind em{font-style:normal;}
.fx-gate-ind.open i{background:#4ade80;box-shadow:0 0 8px #4ade80;}
.fx-gate-ind.open{color:var(--text);}
.fx-gr-l{font-size:9px;color:var(--text3);}
.fx-gr{flex:1;height:6px;background:var(--border2);border-radius:3px;overflow:hidden;}
.fx-gr i{display:block;height:100%;width:0;background:var(--c);float:right;}
.fx-seg{display:inline-flex;border:1px solid var(--border2);border-radius:10px;overflow:hidden;}
.fx-seg button{font-size:10px;padding:2px 7px;border:0;background:var(--bg3);color:var(--text3);cursor:pointer;}
.fx-seg button.on{background:color-mix(in srgb,var(--c) 32%,transparent);color:var(--text);}
.fx-sel{width:100%;font-size:11px;padding:3px 8px;border-radius:10px;background:var(--bg3);border:1px solid var(--border2);color:var(--text);}
.fx-io{align-self:center;font-size:10px;letter-spacing:.06em;color:var(--text3);border:1px dashed var(--border2);border-radius:8px;padding:6px 8px;white-space:nowrap;}
.fx-chain.flip{flex-direction:row-reverse;}
.fx-seg button,.fx-chip{white-space:nowrap;}
.fx-extra .fx-chip{font-size:9.5px;padding:2px 6px;}
.fx-seg button{font-size:9.5px;padding:2px 6px;}
.fx-extra:has(.fx-seg){gap:4px;}
.fx-guard{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);cursor:pointer;}
.fx-guard input{accent-color:var(--accent1);}
.fx-meters{display:flex;align-items:center;gap:8px;}
#fx-spec{width:96px;height:40px;}
#fx-gonio{width:40px;height:40px;border-radius:50%;}

.fx-slots{display:flex;align-items:center;gap:6px;}
.fx-sl{font-size:11px;color:var(--text3);margin-right:2px;}
.fx-slots button{min-width:30px;height:28px;padding:0 8px;border:1px solid var(--border2);border-radius:8px;background:var(--bg2);color:var(--text3);font:inherit;font-size:12px;cursor:pointer;}
.fx-slots button.has{color:var(--text);border-color:var(--text3);}
.fx-slots button.on{border-color:var(--accent1);color:var(--accent1);box-shadow:0 0 0 1px var(--accent1) inset;}
#fx-slot-save{margin-left:4px;}
.fx-ring.gr .lv{opacity:.55;}
/* tuner / chord block: no extra reserved height above the played-note history */
#tn-single,#tn-chord{min-height:0;}
.tn-stage #tn-chord-res{height:150px;}
.tn-stage #tn-chord-notes{min-height:28px;}
.tn-stage #tn-chord-res{height:130px;}
/* fixed height so switching single / chord / strobe never shifts the blocks below */
.tn-stage #tn-chord-notes{height:60px;min-height:0;overflow:auto;}
#tn-single,#tn-chord{min-height:0;}
.tn-stage #tn-single,.tn-stage #tn-chord{height:236px;box-sizing:border-box;}
@media(max-width:900px){.tn-stage #tn-chord{height:252px;}}
.fx-extra .fx-seg button{padding:2px 4px;letter-spacing:-.03em;}

/* tip buttons in the sidebar (same links as the fretboard generator) */
.side-tip{display:grid;gap:8px;}
a.tip-btn{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--text2);border:1px solid var(--border2);border-radius:var(--r);padding:9px 10px;text-decoration:none;transition:color .15s,border-color .15s;}
a.tip-btn:hover{color:#ffdd00;border-color:#ffdd00;}
a.tip-btn.tip-stripe:hover{color:#a5a0ff;border-color:#a5a0ff;}


/* language toggle (same pill as Fretboard Generator) */
.header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px;}
.header-row .app-title{margin-bottom:0;font-size:18px;white-space:nowrap;}
.header-row .badge{margin-left:4px;}
.pill-toggle{display:flex;flex-shrink:0;background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:2px;cursor:pointer;position:relative;user-select:none;}
.pill-toggle div{font-size:10px;font-weight:700;padding:4px 8px;border-radius:12px;color:var(--text3);transition:color .2s,background .2s;z-index:1;}
.pill-toggle div.active{color:#1a1a1a;background:var(--accent1);}

.tn-sens{display:flex;align-items:center;gap:8px;min-height:34px;}
.tn-sens input[type=range]{flex:1;min-width:0;accent-color:var(--accent1);}
.tn-sens output{font-size:11px;color:var(--text2);min-width:44px;text-align:right;font-variant-numeric:tabular-nums;}
.tn-auto{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text2);white-space:nowrap;cursor:pointer;}
.tn-sens.auto input[type=range]{opacity:.45;}
.fb-sens{display:flex;align-items:center;gap:10px;margin:-2px 0 8px;}
.fb-sens .tn-sens{min-height:0;}
.fb-sens input[type=range]{width:140px;flex:none;}
.fb-sens output{min-width:48px;text-align:left;}