*{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    min-height:100vh;
    background: var(--bg);
    
    
    
    transition:background .25s ease, color .25s ease;
    position:relative;
  }
  body.dark::after{
    content:'';
    position:fixed; inset:0;
    
    pointer-events:none; 
  }
  @keyframes flicker{
    0%,100%{opacity:1;} 92%{opacity:1;} 93%{opacity:.85;} 94%{opacity:1;} 96%{opacity:.92;} 97%{opacity:1;}
  }
  @keyframes pulseGlow{
    0%,100%{box-shadow:0 0 8px var(--blue-soft), 0 0 16px var(--blue-soft);}
    50%{box-shadow:0 0 16px var(--blue-soft), 0 0 32px var(--blue-soft);}
  }
  
  .wrap{margin:0 auto;  }
  .topbar{display:flex;  align-items:center; margin-bottom:8px;}

  /* Masthead + instrument switch — compact segmented navigation lấy cảm hứng từ retro music hardware. */
  .app-masthead{
    position:relative;
    display:grid; 
     
     
  }
  .app-masthead::after{
     position:absolute;    
    
    
  }
  .main-tabs{
    display:inline-grid; 
     gap:0; margin:0; 
     
    
    
    overflow:hidden; isolation:isolate;
  }
  
  .main-tab{
    position:relative;  
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
      
    background:transparent;  cursor:pointer;
    transition:transform .12s cubic-bezier(.34,1.56,.64,1), background .18s, color .18s, box-shadow .18s;
  }
  
  .main-tab::after{
     position:absolute;  
      letter-spacing:.08em;
    color:currentColor; opacity:.46;
  }
  .main-tab-kicker{
     font-weight:500; 
    line-height:1;  text-transform:uppercase; opacity:.68;
  }
  .main-tab-label{
     font-weight:700; 
    line-height:1;  text-transform:uppercase;
  }
  
  .main-tab:active{transform:scale(.98);}
  .main-tab:focus-visible{outline:2px solid var(--peach); outline-offset:-3px; z-index:2;}
  
  
  .main-tab.active .main-tab-kicker{opacity:.72;}

  /* Sub-tab (chip style, theo đúng brief) */
  .sub-tabs{display:flex; flex-wrap:wrap;  margin-bottom:16px;}
  .chip.sub-tab{ font-weight:600; font-size:12.5px;}
  .chip.sub-tab.active{  border-color:transparent; }

  @media (max-width:720px){
    .app-masthead{grid-template-columns:1fr; align-items:start; gap:14px; padding-top:0;}
    .main-tabs{justify-self:stretch; width:100%; grid-template-columns:repeat(2,minmax(0,1fr));}
    .main-tab{min-width:0;}
  }
  @media (max-width:480px){
    .main-tab{min-height:54px; padding:9px 18px 8px;}
    .main-tab-label{font-size:12.5px;}
    .chip.sub-tab{padding:7px 11px; font-size:11.5px;}
  }

  .lang-switch{display:flex; gap:6px;}
  .theme-toggle{font-size:15px; padding:6px 10px; line-height:1;}
  .chip.lang{padding:6px 11px;  font-weight:600; font-size:11.5px;}

  header{margin:0; min-width:0; animation:fadeIn .5s ease;}
  header .eyebrow{
    
    text-transform:uppercase;
     margin-bottom:6px;
  }
  h1{
    
    font-weight:700;
    font-size:clamp(28px,4vw,40px);
    
    
    
  }
  body.dark h1{ text-shadow:0 0 10px var(--blue-soft), 0 0 22px var(--blue-soft); }
  .version-badge{
    display:inline-flex; align-items:center; vertical-align:middle;
      
     
     line-height:1; 
     text-shadow:none;
  }
  header p{color:var(--text-muted); margin:0;   }

  @keyframes fadeIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:translateY(0)}}

  section{
    
    
    
    
    
    
    transition:background .25s ease, border-color .25s ease;
  }
  
  section h2{
    
     font-weight:700; 
    display:flex; align-items:center; gap:8px;
    
    text-transform:uppercase; 
  }


  .row-label{
      margin:0 0 8px; text-transform:uppercase; 
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .bass-control{
    display:inline-flex; align-items:center; gap:7px; margin-left:auto;
    color:var(--blue-deep); white-space:nowrap; text-transform:none; letter-spacing:0;
  }
  .bass-select{
    min-width:72px; max-width:42vw; min-height:36px; padding:6px 8px;
    border:2px solid var(--blue-deep); 
    background:var(--panel); color:var(--blue-deep); cursor:pointer;
    font:inherit; font-size:12px; font-weight:700;
  }
  .bass-select:focus-visible{outline:2px solid var(--peach); outline-offset:2px;}

  .chip-row{display:flex; flex-wrap:wrap;  }

  /* Gợi ý vòng hoà thanh — dãy card nằm ngay dưới khung hợp âm hiện tại */
  .suggest-box{margin-bottom:16px;}
  .piano-suggest-box{min-height:46px;}
  .suggest-row{display:flex; flex-wrap:wrap; gap:8px;}
  .suggestion-empty{
    display:flex; align-items:flex-start; gap:8px;
    color:var(--text-muted); background:var(--panel-2);
    border:1px dashed var(--panel-border); border-radius:2px;
    padding:10px 12px; font-size:12px; line-height:1.5;
  }
  .suggestion-empty::before{content:'↳'; color:var(--peach); }
  .suggestion-card{
    flex:1 1 190px; min-width:180px; max-width:260px;
    display:flex; flex-direction:column; gap:5px;
    background:var(--panel-2);
    border:1px solid var(--panel-border);
    
    border-radius:2px;
    padding:10px 12px;
    transition:border-color .15s, transform .12s cubic-bezier(.34,1.56,.64,1);
  }
  .suggestion-card:hover{border-color:var(--blue-soft); border-left-color:var(--blue);}
  .suggestion-title{
     font-size:12px; font-weight:600;
    color:var(--text); line-height:1.3;
  }
  .suggestion-chords{
     font-size:12px; color:var(--blue-deep);
    line-height:1.45; word-break:break-word;
  }
  .suggestion-btns{display:flex; gap:6px; margin-top:2px;}
  .suggestion-btns .chip{padding:5px 12px; font-size:13px; line-height:1;}
  .chip.primary{
    background:linear-gradient(135deg, var(--blue), var(--peach)); color:#080804;
    border-color:transparent; font-weight:700; 
  }
  .chip.primary:hover{opacity:.92; color:#080804;}
  @media (max-width:600px){
    /* Trên mobile cho cuộn ngang thay vì bóp card quá hẹp làm gãy tên hợp âm */
    .suggest-row{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;
      -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--blue-soft) transparent;}
    .suggestion-card{flex:0 0 200px;}
  }

  /* Nhóm loại hợp âm (#typeRow): gom chip theo Cơ bản / Hợp âm 7 / Mở rộng-biến âm để dễ quét mắt */
  .chip-groups{display:flex; flex-direction:column;  }
  .chip-groups .chip-row{margin-bottom:0;} /* khoảng cách đã do .chip-groups quản lý, khỏi lặp */
  .chip-group-label{
      
    text-transform:uppercase;  margin-bottom:5px;
  }
  .chip{
    
    
    
    
    
    
    
    cursor:pointer;
    transition:transform .12s cubic-bezier(.34,1.56,.64,1), background .15s, border-color .15s, box-shadow .15s, color .15s;
  }
  
  
  .chip.active{
    background:linear-gradient(135deg, var(--blue), var(--peach));
    color:#080804;
    border-color:transparent;
    font-weight:500;
    
  }
  .chip.toggle{ font-size:12px; font-weight:500;}
  .chip.toggle.active{background:var(--teal); border-color:var(--teal); color:#080804; }
  .chip.toggle.metro.active{background:var(--peach); border-color:var(--peach); color:#080804; }
  .chip:disabled{opacity:.38; cursor:not-allowed;  box-shadow:none;}
  .chip:disabled:hover{border-color:var(--border); color:var(--text-muted);}
  button:focus-visible, [role="button"]:focus-visible, input[type=range]:focus-visible{
    outline:2px solid var(--peach); outline-offset:2px;
  }
  button{touch-action:manipulation;}
  .color-row-header{align-items:center;}
  .tension-advanced-toggle{padding:5px 9px;  text-transform:none; letter-spacing:0;}
.chip.toggle.tension-advanced-toggle{font-size:10.5px} /* b80 */
  .chip.tension-chip{display:inline-flex; align-items:center; gap:5px;}
  .chip.tension-chip.recommended{border-color:var(--teal-soft);}
  .chip.tension-chip.advanced{border-style:dashed; border-color:var(--peach);}
  .chip.tension-chip.special{border-color:var(--blue);}
  .tension-badge{ font-size:8px; font-weight:700; line-height:1; padding:2px 4px;  background:var(--peach-soft); color:var(--peach-deep); letter-spacing:.04em;}
  .tension-chip.special .tension-badge{background:var(--blue-soft); color:var(--blue-deep);}
  .color-rule-msg{min-height:15px; margin:-8px 0 12px; font-size:10.5px; color:var(--text-muted);}
  .color-rule-msg.warn{color:var(--peach-deep);}
  .chip.pattern{ font-size:12px; font-weight:500;}
  .chip.pattern.active{background:var(--peach); border-color:var(--peach); color:#080804; }
  .chip.scaletype{ font-size:12px; font-weight:500;}
  .chip.scaletype.active{background:var(--teal); border-color:var(--teal); color:#080804; }
  /* Pitch class và cách viết nốt là hai lớp riêng: cùng một phím có thể chọn C# hoặc D♭. */
  .chip.root-chip{min-width:42px; padding:6px 9px; line-height:1.05;}
  .chip.root-chip.enharmonic{padding:4px 7px;}
  .root-option{display:block; width:100%; padding:2px 4px; border:0; border-radius:2px; background:transparent; color:inherit; font:inherit; cursor:pointer;}
  .root-option + .root-option{margin-top:2px; padding-top:3px; border-top:1px solid var(--border);}
  .root-option:hover{background:rgba(126,184,218,.13);}
  .root-chip.active .root-option{opacity:.58;}
  .root-chip.active .root-option.selected-spelling{opacity:1; text-decoration:underline; text-underline-offset:2px;}

  /* Smart Search / Quick Chord Finder — nằm đầu luồng dựng hợp âm, trước các chip thủ công. */
  
  .quick-finder-form{display:flex;  align-items:stretch;}
  .quick-finder-input{
    flex:1; min-width:0;  
     color:var(--text); 
      outline:none;
    transition:border-color .15s, box-shadow .15s, background .15s;
  }
  .quick-finder-input::placeholder{color:var(--text-muted); opacity:.72;}
  
  .quick-finder-hint{font-size:10.5px; color:var(--text-muted); margin-top:7px; line-height:1.45;}
  .quick-finder-status{min-height:16px; margin-top:5px; font-size:11px; font-weight:600; line-height:1.4;}
  .quick-finder-status.success{color:var(--teal-deep);}
  .quick-finder-status.warn{color:var(--peach-deep);}
  .quick-finder-status.error{color:var(--coral);}

  .tempo-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
  .tempo-control{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .tempo-control .tempo-label{margin:0 2px 0 0;}
  .meter-control{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .meter-control .meter-label{margin:0 2px 0 0;}
  .meter-control .meter-chip{min-width:54px; text-align:center;}
  .tempo-row input[type=range]{ width:150px;}
  .tempo-row .bpm{ font-size:12.5px; color:var(--text-muted); min-width:64px;}
  .beat-row{display:flex; align-items:center; gap:10px; margin:-8px 0 16px;}
  .beat-indicator{display:flex; gap:6px;}
  .beat-dot{   background:var(--border); transition:background .08s, transform .08s;}
  .beat-dot.on{background:var(--peach); }
  .beat-dot.on.accent{background:var(--coral);}
  .beat-meter{ font-size:11px; color:var(--text-muted);}

  /* Chỉ xuất hiện khi trình duyệt vẫn chặn Web Audio sau lần bấm Play đầu tiên. */
  .audio-unlock-overlay{
    position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
    padding:20px;  backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .audio-unlock-overlay[hidden]{display:none;}
  .audio-unlock-card{
    width:min(420px,100%); padding:24px; text-align:center;
    background:var(--panel); color:var(--text); border:1px solid var(--blue-soft);
     
    box-shadow:0 22px 70px rgba(0,0,0,.42), 0 0 28px var(--blue-soft);
    animation:fadeIn .18s ease-out;
  }
  .audio-unlock-icon{font-size:30px; line-height:1; margin-bottom:10px;}
  .audio-unlock-title{
    margin:0 0 8px;  font-size:21px;
    text-transform:uppercase; letter-spacing:.045em;
  }
  .audio-unlock-copy{margin:0 auto 18px; max-width:340px; color:var(--text-muted); font-size:13px; line-height:1.55;}
  .audio-unlock-actions{display:flex; justify-content:center; gap:8px; flex-wrap:wrap;}
  .audio-unlock-status{min-height:16px; margin-top:10px; color:var(--peach-deep); font-size:11px; line-height:1.4;}

  .current-chord{
    display:grid;
    grid-template-columns:1fr auto; /* Cột trái: thông tin hợp âm · Cột phải: nút hành động */
    align-items:center;
    gap:12px 16px;
    
    
    
    
    margin-bottom:14px;
  }
  .current-chord > .chord-info{min-width:0;} /* chặn tràn chữ ra ngoài cột grid khi dữ liệu dài */
  .symbol-row{display:flex; align-items:baseline; gap:8px;}
  .current-chord .symbol{
      font-weight:700; 
    min-width:50px;
  }

  .inv-badge{
     font-size:10.5px; font-weight:600;
    color:var(--peach-deep); background:var(--peach-soft);
    padding:2px 7px; border-radius:5px;
  }
  .jazz-level-badge{
     font-size:9px; font-weight:700;
    color:var(--coral); background:rgba(232,80,63,.12); border:1px dashed rgba(232,80,63,.45);
    padding:2px 7px; border-radius:5px; letter-spacing:.04em; text-transform:uppercase;
  }
  .notation-alias-badge{
     font-size:9.5px; font-weight:700;
    color:var(--teal-deep); background:var(--teal-soft); border:1px solid var(--teal-soft);
    padding:2px 7px; border-radius:5px;
  }
  .notation-help{
    color:var(--text-muted);  border-left:3px solid var(--teal);
    margin:-6px 0 14px; padding:7px 10px; font-size:10.5px; line-height:1.5;
  }
  .jazz-degree-line{
     font-size:11px; color:var(--text);
    margin-top:4px; line-height:1.5;
  }
  .jazz-degree-line.secondary{color:var(--text-muted); font-size:10.5px; margin-top:0;}
  .chip.jazz-quality-chip{display:inline-flex; align-items:center; gap:5px;}
  .chip.jazz-quality-chip.experimental{border-style:dashed; border-color:var(--coral);}
  .hand-line{
     font-size:12.5px; color:var(--text-muted);
    display:flex; gap:6px; align-items:baseline; margin-top:2px; flex-wrap:wrap;
  }
  .scale-note-sequences{display:grid; gap:3px; min-width:0;}
  .scale-note-sequence{display:flex; gap:7px; align-items:baseline; flex-wrap:wrap;}
  .scale-direction-label{min-width:54px; color:var(--teal-deep); font-weight:700;}
  .hand-tag{
     font-size:10px; font-weight:600;
    text-transform:uppercase; letter-spacing:.05em;
    padding:1px 6px; 
  }
  .hand-tag.lh{background:var(--sky-soft); color:var(--sky-deep);}
  .hand-tag.rh{background:var(--sky-soft); color:var(--sky-deep);}
  .hand-tag.sc{background:var(--teal-soft); color:var(--teal-deep);}
  /* Tay trái (LH) & tay phải (RH): 2 cột song song thay vì xếp chồng — chỉ dùng ở mục Dựng hợp âm */
  .hand-columns{display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin-top:2px;}
  .hand-columns .hand-line{margin-top:0;}
  .pattern-hint{ font-size:10.5px; color:var(--text-muted); font-style:italic;}
  .theory-line{ font-size:11.5px; color:var(--text-muted); margin:3px 0 5px; font-style:italic;}

  .btns{display:flex; gap:8px; flex-wrap:wrap;}
  .grid-toolbar{display:flex; justify-content:space-between; align-items:center; gap:8px 16px; flex-wrap:wrap; margin-top:14px;}
  .grid-toolbar .transport-group, .grid-toolbar .edit-group{display:flex; gap:8px; flex-wrap:wrap;}
  .autosave-badge{
    display:inline-flex; align-items:center; min-height:34px; padding:0 10px;
    border:1px solid var(--teal); background:var(--teal-soft); color:var(--teal-deep);
     font-size:9px; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase;
  }
  .autosave-badge.saved{border-color:var(--sky); background:var(--sky-soft); color:var(--sky-deep);}
  .autosave-badge.warn{border-color:var(--coral); background:var(--coral-soft); color:var(--coral);}
  button.action{
      
      
      cursor:pointer;
    transition:transform .12s cubic-bezier(.34,1.56,.64,1), background .15s, border-color .15s, color .15s, box-shadow .15s;
  }
  
  button.action:active{transform:scale(.95);}
  button.action:disabled{opacity:.35; cursor:not-allowed; }
  button.action:disabled:hover{border-color:var(--border); color:var(--text);}
  button.action.primary{   font-weight:700;  text-transform:uppercase; }
  
  button.action.ghost{color:var(--text-muted);}
  button.action.sage{border-color:var(--teal-soft); color:var(--teal-deep);}
  button.action.sage:hover{background:var(--teal-soft);}
  button.action.peach{border-color:var(--peach-soft); color:var(--peach-deep);}
  button.action.peach:hover{background:var(--peach-soft);}
  
  button.action.stop:hover{background:rgba(232,80,63,0.14);}

  /* Piano */
  .legend{display:flex; gap:16px; margin-bottom:10px; flex-wrap:wrap;}
  .legend span{
     font-size:11px; color:var(--text-muted);
    display:flex; align-items:center; gap:6px;
  }
  .legend i{width:9px; height:9px;  display:inline-block;}
  .legend i.lh{background:var(--sky);}
  .legend i.rh{background:var(--sky);}
  .legend i.root{background:var(--coral);}
  .legend i.sc{background:var(--teal);}
  /* Chú giải Guitar Scale phải trùng màu xanh của các nốt scale trên cần đàn. */
  #guitarScaleSubtab .legend i.sc{background:var(--blue);}
  /* CAGED và Jazz dùng cùng màu xanh với các nốt hợp âm trên cần đàn. */
  #guitarCagedSubtab .legend i.rh,
  #guitarJazzSubtab .legend i.rh{background:var(--blue);}

  .keyboard-scroll{overflow-x:auto; padding-bottom:6px;}
  .keyboard{position:relative;  margin:0;}
  .key{position:absolute; top:0; border-radius:0 0 5px 5px; transition:background .1s, box-shadow .1s;}
  .key.white{
    background:linear-gradient(to bottom, var(--ivory), var(--ivory-shadow));
     border:1px solid rgba(107,79,160,0.15); z-index:1;
  }
  .key.black{
    background:linear-gradient(to bottom, var(--ebony-top), var(--ebony-bottom));
     z-index:2; 
  }
  .key.white.active-rh{background:linear-gradient(to bottom,var(--sky),#2c5c3a); box-shadow:0 0 6px var(--sky-soft);}
  .key.black.active-rh{background:linear-gradient(to bottom,var(--sky),#1f4028); box-shadow:0 0 6px var(--sky-soft);}
  .key.white.active-lh{background:linear-gradient(to bottom,var(--sky),#2c5c3a); box-shadow:0 0 6px var(--sky-soft);}
  .key.black.active-lh{background:linear-gradient(to bottom,var(--sky),#1f4028); box-shadow:0 0 6px var(--sky-soft);}
  .key.white.active-sc{background:linear-gradient(to bottom,var(--teal),#b8923a); box-shadow:0 0 6px var(--teal-soft);}
  .key.black.active-sc{background:linear-gradient(to bottom,var(--teal),#8a6d28); box-shadow:0 0 6px var(--teal-soft);}
  .key.white.playing-sc{background:linear-gradient(to bottom,var(--coral),#d97838); box-shadow:0 0 10px rgba(232,80,63,.55);}
  .key.black.playing-sc{background:linear-gradient(to bottom,var(--coral),#9f422f); box-shadow:0 0 10px rgba(232,80,63,.55);}
  .key.root::after{
    content:''; position:absolute; left:50%; bottom:8px; 
    width:7px; height:7px;  background:var(--coral);
    box-shadow:0 0 6px rgba(232,80,63,0.7);
  }
  .key.white .lbl{
    position:absolute; bottom:6px; left:0; right:0; text-align:center;
     font-size:9px; color:#8a7040;
  }
  .scroll-hint{font-size:11px; color:var(--text-muted); margin-top:6px;}

  /* Grid pads */
  .pad-grid{display:grid; grid-template-columns:repeat(4,1fr); }
  .pad{
    position:relative;
    
    
    
    
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; transition:transform .12s cubic-bezier(.34,1.56,.64,1), background .15s, border-color .15s;
    padding:8px;
  }
  
  .pad:active{transform:scale(.97);}
  .pad.filled{
    border-style:solid; border-color:var(--panel-border);
    
    align-items:flex-start;
    
  }
  .pad.filled:hover{filter:brightness(1.05);}
  .pad .plus{color:var(--text-muted); font-size:20px;}
  .pad .psym{ font-weight:700;   display:flex; align-items:center; gap:5px; flex-wrap:wrap; line-height:1.15; overflow-wrap:anywhere;}
  .pad .psym .dot{width:5px; height:5px; border-radius:50%; background:var(--teal-deep);}
  /* .pnotes (hai dòng T/P trong ô pad) đã bỏ — bảng phím piano phía trên đã ghi nốt rồi.
     Tên nốt vẫn nằm trong aria-label của nút, nên screen reader không mất thông tin. */
  .pad .clear{
    position:absolute; top:4px; right:6px;
    font-size:12px; color:var(--text-muted); background:none; border:none; cursor:pointer; z-index:2;
  }
  .pad .clear:hover{color:var(--coral);}
  .pad-play{
    display:block; width:100%; min-height:72px; padding:0; border:0; background:transparent;
    color:inherit; text-align:left; font:inherit; cursor:pointer;
  }
  .pad-play .psym{display:block;}
  

  /* Guitar fretboard */
  .fretboard-scroll{overflow-x:auto; padding-bottom:6px;}
  .fretboard{position:relative;}
  .fb-nut{position:absolute; background:var(--text); opacity:.75; border-radius:2px;}
  .fb-fretline{position:absolute; width:1px; background:var(--border);}
  .fb-stringline{position:absolute; left:0; height:1px; background:var(--border);}
  .fb-marker{position:absolute; width:8px; height:8px; border-radius:50%; background:var(--border); transform:translate(-50%,-50%);}
  .fb-dot{position:absolute; width:18px; height:18px; border-radius:50%; transform:translate(-50%,-50%);}
  .fb-dot.small{width:13px; height:13px;}
  .fb-dot.root{background:var(--coral);}
  .fb-dot.tone{background:var(--blue);}
  .fb-barre{position:absolute; border-radius:2px; background:var(--blue); opacity:.85;}
  .fb-mark{position:absolute; transform:translate(-50%,-50%);  font-size:12px; font-weight:600; color:var(--text-muted); text-align:center; width:20px;}
  .fb-stringname{position:absolute; transform:translate(-50%,-50%);  font-size:11px; font-weight:700; color:var(--text-muted); text-align:center; width:18px; z-index:3;}
  .fb-fretnum{position:absolute;  font-size:10px; color:var(--text-muted); text-align:center; transform:translateX(-50%);}
  .chip.shape{ font-size:12px;}
  .chip.shape.active{background:linear-gradient(135deg, var(--blue), var(--peach)); color:#080804; border-color:transparent; }

  .circle-wrap{display:flex; justify-content:center; margin-bottom:8px;}
  .circle-of-fifths{position:relative;   flex-shrink:0;}
  .cof-key{
    position:absolute; transform:translate(-50%,-50%); 
    display:flex; align-items:center; justify-content:center;
    padding:0;
    cursor:pointer;  font-weight:600;
    border:1px solid var(--border);  color:var(--text);
    transition:transform .12s cubic-bezier(.34,1.56,.64,1), background .15s, color .15s, box-shadow .15s;
  }
  .cof-key.major{width:38px; height:38px; font-size:13px;}
  .cof-key.minor{width:30px; height:30px; font-size:10.5px; color:var(--text-muted);}
  .cof-key.wide{flex-direction:column; gap:0; line-height:1.05; width:42px; height:42px;}
  .cof-key-group{padding:3px;}
  .cof-key-group .cof-label{display:block; width:100%; min-height:14px; padding:0 2px; border:0; background:transparent; color:inherit; font:inherit; font-size:10px; font-weight:700; line-height:1; cursor:pointer;}
  .cof-key-group .cof-label.selected-spelling{text-decoration:underline; text-underline-offset:2px;}
  .cof-key.wide .alt{font-size:8px; font-weight:600; opacity:.75; padding:1px 3px; border-radius:2px; cursor:pointer;}
  .cof-key.wide .alt:hover{opacity:1; background:rgba(0,0,0,0.08); text-decoration:underline;}
  .cof-key:hover{border-color:var(--blue-soft); color:var(--blue-deep);}
  .cof-key:active{transform:translate(-50%,-50%) scale(.92);}
  

  footer{color:var(--text-muted);  text-align:center; margin-top:10px;}

  .keyboard-scroll, .fretboard-scroll{
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--blue-soft) transparent;
  }
  .keyboard-scroll::-webkit-scrollbar, .fretboard-scroll::-webkit-scrollbar{height:7px;}
  .keyboard-scroll::-webkit-scrollbar-track, .fretboard-scroll::-webkit-scrollbar-track{background:transparent;}
  .keyboard-scroll::-webkit-scrollbar-thumb, .fretboard-scroll::-webkit-scrollbar-thumb{
    background:var(--blue-soft); border-radius:2px;
  }
  .keyboard-scroll::-webkit-scrollbar-thumb:hover, .fretboard-scroll::-webkit-scrollbar-thumb:hover{background:var(--blue);}

  @media (max-width:600px){
    
    section{ border-radius:2px;}
    
    
    .chip{padding:8px 13px; font-size:12.5px;} /* tap target dễ bấm hơn trên tay */
    button.action{padding:10px 14px; font-size:13px;}
    .current-chord{ grid-template-columns:1fr;} /* 2 cột -> xếp chồng 1 cột trên mobile */
    .hand-columns{grid-template-columns:1fr;} /* Trái/Phải cũng xếp chồng theo */
    .symbol-row .symbol{font-size:22px;}
    
    .quick-finder-form{flex-direction:column;}
    .quick-finder-form button{width:100%;}
    .cof-key.major{width:34px; height:34px; font-size:12px;}
    .cof-key.minor{width:26px; height:26px; font-size:9.5px;}
    .cof-key.wide{width:36px; height:36px;}
    .cof-key.wide .alt{font-size:7px;}
  }

  /* Khối tap-target đã được chuyển xuống CUỐI stylesheet — xem ghi chú ở đó. */

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    /* b80 · GIỮ !important: chuẩn "giảm chuyển động" (MDN/W3C) phải thắng mọi animation */ *, *::before, *::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
  }

  /* ================================================================
     SHOWA KISSA / 昭和喫茶 — retro Japan redesign
     A visual-only layer: the DOM, IDs and application behavior stay intact.
     ================================================================ */
  :root{
    --bg:#d8c08b;
    --panel:#f6e8c2;
    --panel-2:#e2ca91;
    --ivory:#fff8e3;
    --ivory-shadow:#d7c394;
    --ebony-top:#25343a;
    --ebony-bottom:#10252d;
    --blue:#22576a;
    --blue-deep:#153f50;
    --blue-soft:rgba(34,87,106,.2);
    --sky:#55735d;
    --sky-deep:#3f5b48;
    --sky-soft:rgba(85,115,93,.2);
    --teal:#c79b3f;
    --teal-deep:#8b6724;
    --teal-soft:rgba(199,155,63,.22);
    --peach:#cd5741;
    --peach-deep:#9e382d;
    --peach-soft:rgba(205,87,65,.18);
    --coral:#b83c32;
    --text:#20383e;
    --text-muted:#6b5d49;
    --border:rgba(32,56,62,.28);
    --panel-border:#31535a;
    --section-shadow:rgba(79,51,29,.24);
    --btn-bg:rgba(255,248,227,.38);
  }
  body.dark{
    --bg:#163a43;
    --panel:#f2dfb1;
    --panel-2:#dbc083;
    --ivory:#fff5d9;
    --ivory-shadow:#cfb978;
    --ebony-top:#283b3f;
    --ebony-bottom:#0b2027;
    --blue:#20596c;
    --blue-deep:#123f50;
    --blue-soft:rgba(18,63,80,.2);
    --sky:#52755d;
    --sky-deep:#3b5c46;
    --sky-soft:rgba(82,117,93,.2);
    --teal:#c69739;
    --teal-deep:#82601f;
    --teal-soft:rgba(198,151,57,.22);
    --peach:#d85a43;
    --peach-deep:#a43c30;
    --peach-soft:rgba(216,90,67,.19);
    --coral:#ba3d32;
    --text:#20383e;
    --text-muted:#695b47;
    --border:rgba(32,56,62,.27);
    --panel-border:#2a515a;
    --section-shadow:rgba(4,24,29,.4);
    --btn-bg:rgba(255,248,227,.38);
  }
  body{
    padding:0 28px 72px;
    background-color:var(--bg);
    background-image:
      linear-gradient(rgba(25,25,22,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(25,25,22,.025) 1px, transparent 1px);
    background-size:24px 24px,24px 24px;
    color:var(--text);
    
  }
  body.dark{
    
    background-size:24px 24px,24px 24px;
  }
  body.dark::after{
    z-index:0;
    background:
      repeating-linear-gradient(108deg, transparent 0 11px, rgba(255,255,255,.012) 12px, transparent 13px),
      radial-gradient(circle at 20% 25%, rgba(255,255,255,.025) 0 1px, transparent 1.5px);
    background-size:auto,9px 9px;
    opacity:.58;
  }
  .wrap{max-width:1180px; position:relative; z-index:1;}
  .topbar{
    position:absolute; top:28px; right:0; z-index:4;
    justify-content:flex-end; gap:8px; margin:0;
  }
  .theme-toggle,.chip.lang{
    min-width:40px; min-height:38px; padding:7px 10px;
    border:1px solid var(--blue-deep); background:var(--panel); color:var(--blue-deep);
    
  }
  body.dark .theme-toggle,body.dark .chip.lang{border-color:#f2dfb1; background:#15313a; color:#f8eac5;}
  .chip.lang.active,body.dark .chip.lang.active{background:var(--peach); border-color:var(--peach); color:#fff8e3; box-shadow:none;}

  .app-masthead{
    min-height:238px; margin:0 0 28px; padding:52px 0 28px;
    grid-template-columns:minmax(0,1fr) auto; align-items:end; 
    
    
  }
  /* ── LOGO CHIM LẠC (hoa văn trống đồng Đông Sơn) ───────────────────
     Mặt trời = radial-gradient đặt ngay trên .app-masthead (trước đây nằm ở
     background của <body> với calc(50% + 430px) nên mặt trời và con chim
     trôi lệch nhau mỗi khi đổi bề rộng màn hình). Giờ cùng một hệ toạ độ.
     Con chim = mask-image (chỉ 1 bản SVG) + background-color → đổi màu theo
     chế độ sáng/tối bằng 1 dòng, không phải nhúng SVG hai lần.
     Toạ độ: hộp logo 180×118; chim vẽ từ y=17, cao 81px; tâm khối đậm của
     chim rơi vào (77,62) trong hộp → tâm mặt trời = calc(100% - 271px) 66px.
     Hộp nằm gọn giữa mép phải khối chữ và cụm nút VI/EN, không đè lên gì. */
  :root{
    --lac-bird:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'400'%20height%3D'180.1'%20viewBox%3D'0%200%20400%20180.1'%3E%3Cpath%20fill%3D'%23000'%20fill-rule%3D'evenodd'%20d%3D'M392.1%202.1C388.6%203.3%20385.3%204.4%20384.9%204.5C384.4%204.8%20380.9%205.9%20377.2%207.1C373.4%208.3%20370%209.5%20369.5%209.7C369%209.9%20366.6%2010.6%20364.2%2011.3C361.7%2012%20357.3%2013.4%20354.4%2014.3C351.4%2015.3%20347.4%2016.6%20345.4%2017.1C343.4%2017.7%20340.5%2018.5%20338.9%2019C331.2%2021.4%20321.4%2024.3%20318.3%2025.1C316.1%2025.6%20311.7%2027%20309.2%2027.8C308.1%2028.1%20305.7%2028.8%20303.8%2029.3C301.9%2029.8%20299.9%2030.4%20299.1%2030.6C295.5%2031.6%20294.2%2031.9%20291.2%2032.5C289.5%2032.9%20287.7%2033.4%20287.2%2033.6C286.7%2033.8%20285.1%2034.3%20283.6%2034.6C282%2034.9%20279.7%2035.5%20278.3%2035.8C277%2036.2%20275.4%2036.5%20274.9%2036.5C274.4%2036.5%20273.8%2036.7%20273.5%2036.9C273.3%2037.1%20271.7%2037.5%20269.9%2037.8C268.2%2038.1%20265.8%2038.5%20264.7%2038.7C262%2039.2%20255.2%2039.2%20253.5%2038.7C248.1%2037%20243.4%2037.3%20239.2%2039.3C232.3%2042.8%20231%2043.6%20228.5%2046.2C225.6%2049.3%20224.6%2051.3%20223.9%2055.3C223.6%2056.8%20223.2%2058.4%20223%2058.9C222.6%2059.9%20221.9%2065.4%20221.3%2073.7C220.6%2082.1%20220.1%2083.5%20215.5%2089.6C211.6%2095%20203.5%20102.2%20201.5%20102.2C201.4%20102.2%20200.1%20102.8%20198.6%20103.4C197.1%20104.1%20195.2%20104.9%20194.4%20105.1C193.6%20105.4%20192.5%20105.8%20192.1%20106C186.3%20108.2%20179.6%20110%20171.2%20111.6C161.5%20113.6%20147.8%20114.6%20132.6%20114.6C128.8%20114.6%20117.4%20113.9%20111.3%20113.3C109.3%20113.1%20105.5%20112.7%20102.9%20112.5C100.4%20112.2%2096.7%20111.8%2094.8%20111.6C90.7%20111.1%2084.9%20110.4%2078.8%20109.9C76.4%20109.6%2072.9%20109.3%2071.2%20109C69.4%20108.8%2066.1%20108.4%2063.9%20108.1C61.7%20107.9%2058.5%20107.5%2056.9%20107.3C55.3%20107.1%2052.4%20106.7%2050.7%20106.5C48.9%20106.3%2046%20105.9%2044.1%20105.6C42.2%20105.4%2039%20105%2037%20104.8C35%20104.5%2032.1%20104.1%2030.4%20103.9C21.2%20102.5%2012.6%20101.7%2012.3%20102.1C11.9%20102.5%2010.6%20106.3%2010.6%20107.1C10.6%20107.8%2011.2%20108%2014.7%20108.4C15.8%20108.5%2018.3%20108.8%2020.2%20109.1C22.1%20109.3%2025.2%20109.7%2027.2%20109.9C29.2%20110.1%2032.4%20110.5%2034.3%20110.7C36.1%20111%2039%20111.3%2040.8%20111.5C44.3%20111.8%2044.5%20112%2044.1%20113.4C43.8%20114.8%2043.2%20115%2040.7%20114.5C39.5%20114.3%2036.5%20114%2034.1%20113.7C31.6%20113.5%2029%20113.1%2028.3%20112.8C27.5%20112.6%2026.1%20112.4%2025.1%20112.4C24%20112.4%2021.5%20112.1%2019.3%20111.8C17.3%20111.4%2014.1%20111%2012.3%20110.9L9%20110.7L8.6%20112.5C8.3%20113.5%208%20114.7%207.9%20115C7.4%20116.2%208.5%20116.3%2024.5%20117.6C27.3%20117.8%2031.4%20118.2%2033.6%20118.4C35.8%20118.7%2038.8%20119%2040.2%20119.1C42.5%20119.4%2042.6%20119.4%2042.5%20120.5C42.3%20121.8%2041.4%20121.9%2033.2%20121C30.5%20120.7%2026.5%20120.3%2024.2%20120.1C22%20119.9%2017.8%20119.6%2014.9%20119.3C6.2%20118.3%206.4%20118.3%205.6%20120.5C4.8%20123.1%204.5%20123%2015.5%20123.5C31.3%20124.3%2039.4%20124.7%2040.6%20125C42.9%20125.6%2041.2%20127.9%2038.7%20127.5C37.9%20127.5%2032.1%20127.1%2025.7%20126.9C1.2%20125.9%203.6%20125.7%203.1%20128.5L2.8%20130.2L17%20130.5C24.9%20130.7%2033.2%20130.9%2035.7%20131.1L40.1%20131.3L39.9%20132.4L39.8%20133.6L20.7%20133.8C4.2%20133.9%201.5%20134.1%201.2%20134.6C0.7%20135.7%20-0.1%20138.5%200%20138.7C0.6%20139.2%2033.2%20139.8%2051.1%20139.6C93.6%20139%20119.1%20137.8%20139.4%20135.5C141.4%20135.2%20144.8%20134.8%20146.9%20134.6C153%20133.9%20161.6%20132.7%20165.2%20132.1C166.6%20131.8%20168.9%20131.4%20170.3%20131.2C173.8%20130.7%20176.8%20130.1%20178.9%20129.5C179.8%20129.2%20181.2%20128.9%20182.1%20128.6C185.3%20127.8%20186.7%20127.4%20190.8%20126C202.6%20121.9%20209.1%20118.2%20216.7%20111.4C226%20103.1%20229.8%2097.8%20237.5%2082.8C242.6%2072.7%20245%2069.4%20249.7%2066C252.1%2064.2%20260.7%2059.6%20261.6%2059.6C261.7%2059.6%20263%2059%20264.6%2058.3C266.1%2057.6%20267.4%2057%20267.5%2057C267.6%2057%20269.3%2056.3%20271.3%2055.3C273.2%2054.4%20275.3%2053.5%20275.9%2053.4C276.5%2053.2%20277.9%2052.6%20279.1%2052.1C282.8%2050.4%20290.1%2047.4%20296.6%2044.8C298.2%2044.2%20300.3%2043.3%20301.3%2042.9C302.2%2042.5%20305.3%2041.3%20308.1%2040.2C310.9%2039%20316.3%2036.9%20320%2035.4C323.8%2033.8%20328.2%2032.1%20329.8%2031.5C331.5%2030.9%20334%2029.9%20335.5%2029.2C337%2028.5%20338.4%2028%20338.6%2028C338.8%2028%20339.8%2027.6%20340.8%2027.2C341.8%2026.8%20343.8%2025.9%20345.2%2025.4C347.8%2024.5%20349.1%2023.9%20350.7%2023.3C351.2%2023%20354.1%2021.9%20357.1%2020.7C360.2%2019.6%20363.3%2018.3%20364%2018C364.8%2017.6%20366.5%2017%20367.8%2016.5C369.2%2016.1%20373%2014.6%20376.1%2013.3C379.3%2012%20382%2010.9%20382.2%2010.9C382.4%2010.9%20386.5%209.4%20391.3%207.5L400%204L400%201.9C400%20-0.7%20400.3%20-0.7%20392.1%202.1ZM309.54%2033.31C309.3%2033.55%20308.46%2033.91%20307.74%2034.21C306.48%2034.63%20305.46%2035.11%20301.44%2036.97C300.42%2037.45%20298.38%2038.35%20297%2038.95C294.66%2039.97%20290.34%2041.95%20288.6%2042.79C286.98%2043.57%20286.68%2043.27%20286.56%2040.75C286.5%2039.31%20286.5%2039.25%20288.9%2038.77C290.88%2038.29%20297%2036.55%20297.78%2036.25C298.44%2035.95%20301.32%2035.11%20304.26%2034.39C305.64%2034.03%20307.2%2033.55%20307.74%2033.37C309.18%2032.83%20310.2%2032.83%20309.54%2033.31ZM247.5%2046.7C256.3%2052.2%20250.7%2064.9%20240.1%2063.7C229%2062.4%20227.4%2049.3%20237.9%2045.9C240%2045.2%20245.8%2045.7%20247.5%2046.7ZM235.1%2068.2C236.2%2069.7%20236.6%2071.7%20235.8%2072.1C235.6%2072.3%20235.4%2072.9%20235.4%2073.6C235.4%2080.6%20225.9%2096.7%20217%20104.9C213.9%20107.7%20213%20108.4%20208.9%20111C205.9%20113%20198.8%20116.4%20195.5%20117.5C193.9%20118%20192.1%20118.7%20191.7%20118.8C190.2%20119.4%20185.4%20120.8%20182.9%20121.4C181.6%20121.7%20179.9%20122%20179.1%20122.3C177.4%20122.6%20173.7%20123.3%20169%20123.9C167.4%20124.2%20164.2%20124.7%20162%20125.1C159.8%20125.5%20156.8%20125.9%20155.4%20126.1C154%20126.3%20151.9%20126.7%20150.7%20126.9C147.2%20127.6%20135.5%20128.9%20128.3%20129.3C122.4%20129.7%20122.4%20129.7%20124.4%20125.9L126%20122.9L128.5%20122.6C131.2%20122.3%20137.4%20121.7%20144.9%20121C147.4%20120.8%20151.2%20120.4%20153.3%20120.1C155.4%20119.9%20158.6%20119.5%20160.3%20119.3C162.1%20119.1%20164.7%20118.7%20166.3%20118.4C167.8%20118.2%20170.3%20117.8%20171.8%20117.6C177.3%20116.8%20187.6%20114.4%20191.7%20112.9C192.1%20112.7%20193.7%20112.1%20195.1%20111.6C199%20110.1%20199.1%20110.1%20203.2%20108.1C216.5%20101.6%20226.3%2090.4%20230%2077.5C231.4%2072.4%20232%2070%20232%2068.9C232%2066.6%20233.6%2066.2%20235.1%2068.2ZM53.971%20115.219C54.025%20115.508%2053.987%20116.098%2053.826%20116.308C53.733%20116.61%2053.454%20117.515%2053.242%20118.512C53.03%20119.509%2052.711%20121.004%2052.506%20121.903C52.294%20122.9%2051.69%20125.399%2051.332%20127.485C50.378%20131.972%2050.192%20132.575%2049.228%20132.758C47.657%20133.288%2047.67%20133.091%2049.819%20123.803C50.231%20122.006%2050.848%20119.31%2051.159%20117.913C51.471%20116.516%2051.776%20115.217%2051.863%20115.014C52.196%20114.398%2053.796%20114.55%2053.971%20115.219ZM61.767%20116.023C61.871%20116.701%2061.553%20118.297%2059.595%20126.307C58.916%20129.012%2058.396%20131.507%2058.365%20132C58.329%20132.591%2058.096%20132.807%2057.215%20132.88C56.041%20132.978%2055.564%20132.43%2056.2%20131.592C56.359%20131.383%2056.542%20130.779%2056.579%20130.187C56.628%20129.399%2058.054%20122.904%2058.794%20120.391C58.984%20119.688%2059.198%20118.592%2059.228%20118.099C59.363%20115.93%2061.364%20114.292%2061.767%20116.023ZM69.482%20116.841C69.887%20118.361%2065.78%20132.586%2064.886%20132.769C63.911%20133.057%2063.908%20132.083%2064.929%20128.089C65.856%20124.396%2066.257%20122.897%2066.905%20120.01C67.663%20116.625%2069.032%20114.936%2069.482%20116.841ZM77.303%20118.315C77.251%20119%2077.035%20119.895%2076.85%20120.399C76.679%20120.708%2076.19%20122.311%2075.848%20123.899C73.86%20131.673%2073.57%20132.577%2072.599%20132.771C71.991%20133.026%2071.784%20132.853%2071.828%20132.266C71.888%20131.483%2074.336%20121.525%2074.908%20119.817C75.101%20119.215%2075.382%20118.41%2075.56%20118.004C75.961%20116.604%2077.414%20116.847%2077.303%20118.315ZM84.646%20119.215C84.522%20120.01%2084.286%20121.401%2084.003%20122.405C83.725%20123.31%2083.349%20124.616%2083.151%20125.417C82.966%20126.02%2082.552%20127.917%2082.083%20129.524C81.583%20131.624%2081.165%20132.444%2080.711%20132.679C79.724%20133.253%2079.487%20132.392%2080.067%20130.188C81.654%20123.685%2082.327%20121.178%2082.611%20120.174C82.796%20119.571%2082.993%20118.77%2083.166%20118.363C83.628%20116.854%2084.754%20117.541%2084.646%20119.215ZM92.595%20119.014C92.522%20119.994%2090.906%20125.889%2090.388%20126.912C90.204%20127.417%2090.086%20128.012%2090.049%20128.501C89.94%20129.97%2088.809%20132.318%2088.128%20132.58C86.758%20133.201%2086.987%20132.109%2089.548%20123.398C91.032%20118.293%2090.943%20118.497%2091.906%20118.402C92.424%20118.35%2092.624%20118.622%2092.595%20119.014ZM100.191%20119.629C100.497%20120.363%2096.702%20131.465%2095.985%20132.027C94.393%20133.266%2094.521%20131.809%2096.448%20125.919C98.677%20119.128%2099.454%20117.887%20100.191%20119.629ZM108.043%20120.4C107.807%20122.809%20103.845%20131.962%20103.012%20132.066C102.029%20132.189%20103.002%20128.356%20105.697%20121.454C106.18%20120.347%20108.137%20119.437%20108.043%20120.4ZM115.38%20121.119C115.513%20121.294%20114.431%20124.863%20113.476%20127.08C113.289%20127.485%20112.887%20128.584%20112.654%20129.472C112.047%20131.169%20110.9%20132.263%20110.361%20131.66C110.096%20131.31%20110.226%20130.721%20113.338%20122.225C113.807%20121.214%20114.917%20120.506%20115.38%20121.119ZM238.6%2048.5C237.9%2048.7%20236.8%2049.4%20236.1%2050C229.5%2056.4%20239.3%2064.8%20246.7%2059C252.6%2054.4%20246.2%2046%20238.6%2048.5ZM243.6%2051.7C247.3%2054.1%20244.6%2059%20240.3%2057.9C238.6%2057.5%20237.2%2055%20238%2053.5C239.2%2051.2%20241.6%2050.4%20243.6%2051.7ZM225.5%2031.9C224.7%2032.2%20224.2%2032.8%20223.9%2033.9C223.6%2034.7%20223.2%2035.8%20223%2036.3C222.8%2036.8%20222.2%2038.9%20221.7%2041C220.6%2045.4%20219.6%2047.3%20218.6%2047.5C216.9%2047.9%20216.9%2047.1%20218.3%2042.1C220.7%2033.3%20220.9%2032.6%20219.9%2032.3C218.1%2032%20217.1%2032.6%20216.8%2034.3C215.9%2039.5%20213.7%2046.9%20213%2047.3C211%2048.4%20210.8%2047.5%20212.3%2041C212.8%2039.1%20213.2%2036.8%20213.4%2035.8L213.7%2033.9L211.9%2034.1C209.7%2034.2%20209.1%2036%20207.9%2046C207.6%2047.7%20207.4%2048%20206.5%2048.3C204.8%2048.7%20204.4%2048%20205%2045.4C205.5%2043.3%20206%2039.9%20206.6%2036.4L206.8%2034.8L205%2034.8L203.1%2034.8L202.6%2038.1C202.3%2039.9%20201.8%2042.4%20201.6%2043.5C201.4%2044.6%20201.2%2046.2%20201.2%2047.1C201.2%2048.9%20200.6%2050.8%20199.2%2053.6C196.8%2058.2%20195.4%2058.8%20186.7%2058.9L180.1%2059L180%2060.4L179.9%2061.8L183.2%2061.6L186.5%2061.5L186.5%2063L186.5%2064.5L183.1%2064.8C180.6%2065%20179.6%2065.3%20179.2%2065.8C178.3%2067.1%20178.6%2067.2%20182.1%2067.2L185.6%2067.2L185.3%2068.4C184.9%2069.9%20185.2%2069.8%20181.5%2070.3C176.5%2070.9%20175.7%2073%20180.6%2072.9C185.8%2072.8%20185.3%2075.1%20180.1%2075.6C177.2%2075.8%20176.9%2076%20176.7%2076.9C176.3%2078.3%20176.8%2079.3%20177.7%2079C178.1%2078.8%20180.6%2078.5%20183.1%2078.3C185.7%2078.1%20189.9%2077.7%20192.5%2077.5C195.1%2077.2%20199.3%2076.8%20201.9%2076.6C211.7%2075.8%20215.6%2075.4%20216.7%2075.1C218%2074.8%20218%2074.9%20218.7%2069.8C219%2068%20219.4%2065.7%20219.6%2064.7C220.7%2060%20220.9%2059.2%20221.3%2057C222.7%2050.1%20225.3%2041.4%20227.6%2035.8C229.4%2031.1%20229.1%2030.6%20225.5%2031.9ZM214.5%2059.4C217.1%2060.7%20218.2%2065.4%20216.6%2068.4C213.4%2074.9%20203.2%2071.9%20203.9%2064.7C204.4%2059.8%20210%2057%20214.5%2059.4ZM200.9%2060.6C201.1%2060.8%20200.5%2064.1%20199.5%2067.7C199.3%2068.7%20198.9%2070.3%20198.7%2071.2C198.3%2073.1%20197.7%2073.6%20196%2073.6C194.4%2073.6%20194.4%2073.4%20195.6%2068.9C196.1%2066.7%20196.8%2064.1%20197%2063.2C197.6%2060.8%20199.7%2059.4%20200.9%2060.6ZM192.9%2062.8C192.8%2063.7%20192.3%2065.9%20191.9%2067.7C191.4%2069.4%20190.9%2071.4%20190.8%2072.1C190.4%2073.9%20189.8%2074.5%20188.4%2074.5C186.9%2074.5%20186.5%2073.9%20187.1%2072.4C187.3%2071.8%20187.7%2070.1%20188%2068.7C188.3%2067.3%20188.7%2065.8%20188.9%2065.4C189.1%2065%20189.3%2064.2%20189.3%2063.7C189.3%2062.2%20190.4%2061.3%20191.9%2061.3C193.1%2061.3%20193.2%2061.3%20192.9%2062.8ZM209.4%2061.9C206%2063.3%20207%2068.5%20210.6%2068.5C214.2%2068.5%20216%2065.6%20214.1%2063.1C213.4%2062%20210.7%2061.4%20209.4%2061.9ZM157%2043.9C155.8%2044.5%20155.8%2044.8%20156.9%2046.2C164.8%2056.6%20165.8%2058.4%20166.3%2063.4C166.5%2065.9%20166.9%2069.6%20167.2%2071.7C167.4%2073.8%20167.8%2077.5%20168%2079.8C168.2%2082.2%20168.6%2085.7%20168.8%2087.7C169.1%2089.7%20169.5%2093.5%20169.7%2096.2C170%2098.9%20170.3%20102.5%20170.5%20104.1L170.8%20107.1L172.2%20107C173.1%20107%20174.4%20106.8%20175.2%20106.6L176.6%20106.3L176.4%20104.2C176.3%20103%20175.9%20100.5%20175.7%2098.8C175.4%2097%20175.1%2094.1%20174.8%2092.2C174.5%2090.3%20174.2%2087.3%20174%2085.6C173.7%2083.8%20173.3%2080.6%20173.1%2078.5C172.3%2071.3%20171.9%2067.9%20171.6%2066.2C171.5%2065.2%20171.1%2063.1%20170.9%2061.5C170.5%2058.7%20170.1%2058.1%20165.3%2050.9C159.9%2042.8%20159.7%2042.6%20157%2043.9ZM149.2%2044.6C148.9%2044.8%20148.1%2045.1%20147.6%2045.1C146.2%2045.1%20147.2%2047.1%20154%2058.2C155.8%2061.3%20155.8%2061.5%20153.2%2061.8C150.8%2062.1%20148.4%2058.8%20143.7%2049.1C142.2%2046%20141.6%2045.5%20139.9%2045.8C137.3%2046.2%20137.4%2047.3%20140.9%2052.7C143.6%2057.1%20146.2%2062.6%20145.6%2062.8C144%2063.4%20141.4%2062.8%20140.7%2061.5C139.3%2059%20137.4%2055.5%20135.8%2052.5C132.5%2046.3%20132.3%2046.2%20129.9%2047.3C128.4%2048%20128.4%2048.5%20130%2051.7C131.7%2055.2%20134.6%2061.3%20136.2%2065C138.2%2069.2%20137.6%2069.1%20147.6%2067.7C153.4%2066.8%20155.5%2067%20155.7%2068.5C156%2070.5%20155.8%2070.6%20147.9%2071.7C139%2073%20138.8%2073.1%20138.9%2075.4C139.1%2077.8%20139.1%2077.8%20142.6%2077.5C157.2%2075.9%20156.3%2075.9%20156.6%2078.3L156.7%2079.7L153.7%2080.3C152.1%2080.6%20148.4%2081.1%20145.6%2081.4C140%2081.9%20139.8%2082%20140.2%2084L140.5%2085.3L149%2085.3L157.5%2085.4L157.5%2086.6C157.5%2088.1%20158%2088%20146.3%2089C140%2089.6%20139.9%2089.7%20140.5%2092.5C140.9%2093.9%20141.1%2094.3%20141.8%2094.2C142.8%2094.1%20154.5%2093.3%20156.3%2093.1C157.5%2093%20157.5%2093.1%20157.7%2095L157.8%2097L152.8%2097.3C150%2097.5%20146.2%2097.8%20144.3%2097.9L140.9%2098.2L140.8%2099.8C140.6%20102.2%20140.6%20102.2%20149.3%20101.7C158.4%20101.1%20158.7%20101.2%20158.5%20103.9C158.4%20105.7%20158.2%20105.7%20148.1%20106.4C141.2%20106.9%20141%20107%20141.2%20109L141.3%20110.5L144.3%20110.7C148.7%20110.9%20160.8%20109.8%20165.6%20108.6C167.2%20108.3%20167.4%20106.9%20166.8%20102.2C166.3%2099.1%20165.9%2094.9%20165%2084.5C164.7%2081.7%20164.4%2077.9%20164.1%2076.2C163.9%2074.4%20163.5%2070.8%20163.2%2068.1C162.7%2062.8%20162.8%2063%20158.4%2056.1C156.9%2053.9%20154.6%2050.3%20153.2%2048.2C150.7%2044.2%20150.4%2043.9%20149.2%2044.6ZM179.7%20131.7C177.3%20132.6%20177.2%20132.7%20177.3%20134.5C177.4%20135.4%20177.6%20136.7%20177.7%20137.4C178.1%20138.8%20178.6%20141.1%20179.8%20146.8C180.1%20148.7%20180.7%20151.4%20181%20153C181.4%20154.5%20181.8%20156.6%20182.1%20157.7C182.3%20158.9%20182.7%20160.8%20183%20162C183.2%20163.2%20183.6%20164.9%20183.8%20165.6C184.5%20167.8%20184.2%20168.8%20181.8%20173.3C179.1%20178.6%20179%20178.8%20181%20179.7C183%20180.6%20183%20180.6%20186.5%20173.6C188.1%20170.6%20189.6%20167.9%20189.7%20167.8C189.9%20167.5%20189.8%20166.1%20189.4%20164.6C189.1%20163%20188.7%20160.9%20188.5%20159.8C187.9%20156.7%20186.3%20148.2%20185.9%20146.1C185.7%20145.1%20185.1%20142.2%20184.6%20139.7C184.1%20137.3%20183.5%20134.4%20183.4%20133.3C183.1%20131.2%20182.3%20130.8%20179.7%20131.7ZM169.9%20133.4C169%20133.6%20167.3%20134%20166.1%20134.2C164.9%20134.4%20163%20134.8%20161.8%20135C160.6%20135.2%20158.2%20135.6%20156.5%20135.9C154.7%20136.2%20152.6%20136.6%20151.8%20136.8C151%20137%20149.6%20137.2%20148.7%20137.2C146.4%20137.2%20141.5%20138.2%20141.5%20138.6C141.5%20138.8%20141.8%20139.5%20142.2%20140.3L142.9%20141.6L145.9%20141.3C149.9%20141%20155.6%20140.3%20159%20139.7C160.6%20139.5%20163.6%20139.2%20165.8%20139L169.7%20138.8L169.7%20140.1C169.7%20141.8%20169.8%20141.8%20162.4%20142.8C148.9%20144.5%20146.7%20144.9%20146.7%20145.3C146.7%20145.5%20147.1%20146.1%20147.6%20146.8C148.7%20148%20147.5%20148%20158.8%20146.6C160.5%20146.3%20163.4%20146%20165.4%20145.7C167.3%20145.5%20169.1%20145.2%20169.2%20145.1C169.9%20144.7%20170.6%20145.7%20170.8%20147.3L171.1%20149L168.6%20149.3C167.2%20149.4%20164.9%20149.8%20163.5%20150C162.1%20150.2%20159.4%20150.6%20157.5%20150.8C151.6%20151.5%20151.4%20151.8%20153.4%20154.1L154.6%20155.5L158%20155.1C173.1%20153%20171.9%20153%20172.4%20155.4C172.7%20156.5%20172.6%20156.8%20171.9%20157C170.9%20157.3%20165.6%20158%20161.7%20158.4C160%20158.5%20158.5%20158.8%20158.3%20159.1C157.9%20159.7%20160.7%20162%20161.5%20161.7C164.9%20160.3%20173.7%20160.1%20173.9%20161.4C174.1%20162.9%20173.7%20163.1%20168.6%20163.9C166.1%20164.3%20163.7%20164.6%20163.5%20164.7C162.9%20164.9%20160.3%20169.7%20160.3%20170.6C160.3%20173.3%20164.1%20172.8%20165%20169.9C165.9%20166.9%20167.2%20166.2%20169%20167.6C169.8%20168.2%20169.8%20168.3%20168.5%20170.7C167%20173.5%20167.2%20174.4%20169.1%20174.8C170.1%20175.1%20171.3%20173.6%20172.8%20170.3C173.3%20169.4%20173.8%20168.8%20174.1%20168.9C174.4%20169%20174.9%20169.3%20175.4%20169.4C176.4%20169.8%20176.3%20170.8%20174.6%20173.4C172.8%20176.2%20172.8%20176.3%20174.1%20176.9C176.4%20177.9%20181.4%20169.5%20180.4%20166.4C180%20164.7%20179.6%20162.9%20178.6%20157.9C178.4%20156.5%20178%20154.6%20177.8%20153.8C177.2%20151.3%20176.6%20148.7%20175.7%20144.2C175.2%20141.9%20174.6%20139.4%20174.4%20138.6C174.1%20137.9%20174%20137.1%20174%20136.7C174%20136.4%20173.7%20135.4%20173.5%20134.5C173%20132.8%20172.8%20132.7%20169.9%20133.4ZM134.9%20141.7C134%20142.8%20132.8%20144.2%20132.3%20144.8C131.8%20145.3%20130.1%20147.3%20128.7%20149.2C127.2%20151.1%20125.6%20152.7%20125%20152.8C121%20153.8%20110.7%20148.9%20103.5%20142.4C101.7%20140.8%20100.4%20140.8%2096.9%20142C95.1%20142.6%2095.1%20142.7%2097.1%20144C100.3%20146%20104%20148.9%20104%20149.5C104%20150.9%2098.2%20150.9%2096.5%20149.5C96.3%20149.3%2095.8%20149.1%2095.3%20149.1C94.6%20149.1%2092.8%20148.7%2087.2%20147C84.2%20146.2%2082.3%20145.7%2079.1%20144.9C77.2%20144.5%2074.1%20143.7%2072.4%20143.2C68%20142%2063.3%20142.1%2063.3%20143.4C63.3%20144.6%2066.6%20146.3%2071.7%20147.4C74.1%20147.9%2077.2%20148.7%2078.6%20149C80%20149.4%2082%20149.8%2082.9%20150C83.8%20150.1%2086.4%20150.7%2088.7%20151.2C90.9%20151.7%2093.8%20152.3%2095%20152.5C96.3%20152.7%2098.2%20153.2%2099.3%20153.4C100.4%20153.6%20102.1%20154%20103.2%20154.2C104.2%20154.5%20105.8%20154.8%20106.8%20155.1C107.7%20155.3%20110.1%20155.7%20112.1%20156.2C114.1%20156.5%20116.1%20157%20116.6%20157.2C117.1%20157.4%20118.1%20157.7%20118.9%20157.8C119.7%20158%20121.3%20158.3%20122.3%20158.5C126.9%20159.6%20126.7%20159.7%20129.3%20156.8C130.5%20155.4%20132.7%20152.8%20133.9%20151C135.2%20149.3%20136.9%20146.8%20137.8%20145.6C139.7%20142.9%20139.7%20142.8%20138%20141.1L136.5%20139.7L134.9%20141.7ZM138.2%20151.3C130.1%20163.6%20130.4%20163.3%20124.3%20163.5C120%20163.8%20115.5%20163.1%20108.9%20161.4C108%20161.2%20106.5%20160.9%20105.7%20160.6C103.2%20160%2094.7%20157.4%2090.1%20155.8C82.2%20152.9%2080.2%20154.6%2087%20158.5C89.5%20159.9%2090.3%20161%2088.7%20160.7C88.4%20160.7%2085.4%20160.4%2082.3%20160.2C79.1%20160%2074.8%20159.6%2072.7%20159.3C59.5%20157.9%2058.7%20158%2058.9%20160.3C59.1%20162%2059.4%20162.1%2079.1%20163.6C81.9%20163.8%2086.2%20164.2%2088.7%20164.5C94.1%20165%20101.4%20165.6%20109.1%20166.2C112.3%20166.4%20117%20166.8%20119.6%20167C122.2%20167.3%20125.4%20167.6%20126.8%20167.7C131.1%20168.1%20132.8%20167.1%20136%20162C137.5%20159.7%20139.9%20156%20141.4%20153.7C144.3%20149.3%20144.5%20148.6%20143.3%20147.1C142%20145.6%20141.9%20145.8%20138.2%20151.3Z'%2F%3E%3Cdefs%3E%3CclipPath%20id%3D'coc-crown-interior'%3E%3Cpath%20d%3D'M207.4%2034.5L224.7%2034.5L218.5%2050.5L202.7%2050.5Z'%2F%3E%3C%2FclipPath%3E%3ClinearGradient%20id%3D'coc-crown-taper'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'0'%20y1%3D'34.5'%20x2%3D'0'%20y2%3D'38.5'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'0'%2F%3E%3Cstop%20offset%3D'.25'%20stop-color%3D'%23fff'%20stop-opacity%3D'.156'%2F%3E%3Cstop%20offset%3D'.5'%20stop-color%3D'%23fff'%20stop-opacity%3D'.5'%2F%3E%3Cstop%20offset%3D'.75'%20stop-color%3D'%23fff'%20stop-opacity%3D'.844'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D'coc-crown-taper-mask'%20maskUnits%3D'userSpaceOnUse'%20x%3D'202'%20y%3D'34'%20width%3D'24'%20height%3D'17'%3E%3Crect%20x%3D'202'%20y%3D'34'%20width%3D'24'%20height%3D'17'%20fill%3D'url(%23coc-crown-taper)'%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20d%3D'M225.5%2031.9C224.7%2032.2%20224.2%2032.8%20223.9%2033.9C223.6%2034.7%20223.2%2035.8%20223%2036.3C222.8%2036.8%20222.2%2038.9%20221.7%2041C220.6%2045.4%20219.6%2047.3%20218.6%2047.5C216.9%2047.9%20216.9%2047.1%20218.3%2042.1C220.7%2033.3%20220.9%2032.6%20219.9%2032.3C218.1%2032%20217.1%2032.6%20216.8%2034.3C215.9%2039.5%20213.7%2046.9%20213%2047.3C211%2048.4%20210.8%2047.5%20212.3%2041C212.8%2039.1%20213.2%2036.8%20213.4%2035.8L213.7%2033.9L211.9%2034.1C209.7%2034.2%20209.1%2036%20207.9%2046C207.6%2047.7%20207.4%2048%20206.5%2048.3C204.8%2048.7%20204.4%2048%20205%2045.4C205.5%2043.3%20206%2039.9%20206.6%2036.4L206.8%2034.8L205%2034.8L203.1%2034.8L202.6%2038.1C202.3%2039.9%20201.8%2042.4%20201.6%2043.5C201.4%2044.6%20201.2%2046.2%20201.2%2047.1C201.2%2048.9%20200.6%2050.8%20199.2%2053.6C196.8%2058.2%20195.4%2058.8%20186.7%2058.9L180.1%2059L180%2060.4L179.9%2061.8L183.2%2061.6L186.5%2061.5L186.5%2063L186.5%2064.5L183.1%2064.8C180.6%2065%20179.6%2065.3%20179.2%2065.8C178.3%2067.1%20178.6%2067.2%20182.1%2067.2L185.6%2067.2L185.3%2068.4C184.9%2069.9%20185.2%2069.8%20181.5%2070.3C176.5%2070.9%20175.7%2073%20180.6%2072.9C185.8%2072.8%20185.3%2075.1%20180.1%2075.6C177.2%2075.8%20176.9%2076%20176.7%2076.9C176.3%2078.3%20176.8%2079.3%20177.7%2079C178.1%2078.8%20180.6%2078.5%20183.1%2078.3C185.7%2078.1%20189.9%2077.7%20192.5%2077.5C195.1%2077.2%20199.3%2076.8%20201.9%2076.6C211.7%2075.8%20215.6%2075.4%20216.7%2075.1C218%2074.8%20218%2074.9%20218.7%2069.8C219%2068%20219.4%2065.7%20219.6%2064.7C220.7%2060%20220.9%2059.2%20221.3%2057C222.7%2050.1%20225.3%2041.4%20227.6%2035.8C229.4%2031.1%20229.1%2030.6%20225.5%2031.9Z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'.70'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%20clip-path%3D'url(%23coc-crown-interior)'%20mask%3D'url(%23coc-crown-taper-mask)'%2F%3E%3Ccircle%20cx%3D'241.4'%20cy%3D'54.9'%20r%3D'.70'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E");
  }
  .app-masthead{
    background-image:radial-gradient(circle at calc(100% - 271px) 66px, rgba(217,81,59,.9) 0 52px, transparent 53px);
    background-repeat:no-repeat;
  }
  body.dark .app-masthead{
    background-image:radial-gradient(circle at calc(100% - 271px) 66px, rgba(239,104,79,.92) 0 52px, transparent 53px);
  }
  .app-masthead::before{
    content:''; position:absolute; right:168px; top:4px; z-index:1;
    width:180px; height:118px;
    background-color:var(--blue-deep);
    -webkit-mask-image:var(--lac-bird); mask-image:var(--lac-bird);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:0 17px; mask-position:0 17px;
    -webkit-mask-size:180px 81px; mask-size:180px 81px;
    transform:none;
  }
  body.dark .app-masthead::before{background-color:#fff8e3;}
  .app-masthead::after{
    left:0; right:auto; bottom:-7px; width:34%; height:7px;
    background:var(--blue-deep); opacity:1;
  }
  header{max-width:690px; position:relative; z-index:2;}
  header .eyebrow{
    margin:0 0 14px; color:var(--peach-deep); font-size:10px;
    
  }
  body.dark header .eyebrow{color:#efad50;}
  h1{
    margin:0 0 12px; max-width:660px;
    color:var(--text); 
    font-size:clamp(40px,6vw,72px); line-height:.92; letter-spacing:-.055em;
  }
  body.dark h1,body.dark header p{color:#f8eac5; text-shadow:none;}
  .flicker{animation:none;}
  .version-badge{
    margin-left:9px; padding:4px 7px; transform:translateY(-3px);
    border:2px solid var(--text); border-radius:0; color:var(--text);
    font-size:9px; letter-spacing:.12em;
  }
  body.dark .version-badge{border-color:#f8eac5; color:#f8eac5;}
  header p{ font-size:15px; line-height:1.65;}

  .main-tabs{
    align-self:end; justify-self:end; grid-template-columns:repeat(2,136px);
      
     
  }
  
  .main-tab{
    min-width:0;  
    color:var(--blue-deep); 
  }
  
  .main-tab::after{top:9px; right:10px; font-size:8px;}
  .main-tab-kicker{font-size:8px; letter-spacing:.18em;}
  .main-tab-label{font-size:14px; letter-spacing:.16em;}
  .main-tab:hover{background:var(--panel-2); color:var(--blue-deep);}
  .main-tab.active{
    background:var(--peach); color:#fff8e3; 
  }
  body.dark .main-tab.active{background:var(--peach); color:#fff8e3;}
  .main-tab.active::before{
     position:absolute; left:13px; top:13px;
    width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 2px #fff8e3;
  }

  .quick-finder{
    position:relative; margin:0 0 22px; 
     
     background:var(--panel); 
  }
  .quick-finder::before{
    content:'QUICK FIND / 早引き'; position:absolute; right:18px; top:14px;
    color:var(--blue-deep); 
    font-size:8px; font-weight:800; letter-spacing:.13em;
  }
  .quick-finder .row-label{padding-right:120px; color:var(--text);}
  .quick-finder-form{gap:0;}
  .quick-finder-input{
    min-height:48px; padding:12px 15px; border:2px solid var(--blue-deep);
    border-right:0;  background:transparent; font-size:13px;
  }
  .quick-finder-input:focus{border-color:var(--peach); box-shadow:inset 4px 0 0 var(--peach);}
  .quick-finder-form .action.primary{min-width:150px;}

  .sub-tabs{gap:0; margin:0 0 16px; border-bottom:1px solid var(--panel-border);}
  .chip.sub-tab{
    min-width:140px; padding:12px 16px 10px; border:0; 
    background:transparent; color:var(--text-muted); box-shadow:none;
  }
  .chip.sub-tab.active{
    background:transparent; color:var(--text); border-bottom:1px solid var(--peach); box-shadow:none;
  }
  body.dark .sub-tabs{border-color:rgba(248,234,197,.48);}
  body.dark .chip.sub-tab{color:rgba(248,234,197,.72);}
  body.dark .chip.sub-tab.active{color:#fff3d2; border-bottom-color:#efad50;}

  section{
    position:relative;  
    background:var(--panel); border:2px solid var(--blue-deep); border-radius:0;
    box-shadow:8px 8px 0 var(--section-shadow);
    overflow:hidden;
  }
  section::after{
    content:''; position:absolute; top:0; right:0; width:44px; height:44px;
    background:linear-gradient(135deg,transparent 49%,var(--teal) 50%);
    pointer-events:none;
  }
  section h2{
    margin:0 0 24px; color:var(--blue-deep); font-size:19px; letter-spacing:.07em;
  }
  section h2::after{ width:38px; height:4px; margin-left:8px; background:var(--peach);}
  section h2 .num{
    flex:0 0 28px; width:28px; height:28px; min-width:28px; padding:0;
     border:0; border-radius:0; color:#fff8e3;
    background:var(--peach); font-size:10px; letter-spacing:.08em; text-align:center;
  }
  .row-label{margin-bottom:10px; color:var(--blue-deep); font-size:10px; font-weight:800; letter-spacing:.13em;}
  .chip-row{gap:7px; margin-bottom:20px;}
  .chip-groups{gap:13px; margin-bottom:21px;}
  .chip-group-label{color:var(--blue-deep); font-size:9px; font-weight:800; letter-spacing:.14em;}
  .chip{
    padding:8px 12px; border:2px solid var(--blue-deep); 
    background:rgba(255,248,227,.34); color:var(--blue-deep); font-size:11.5px; font-weight:700; 
  }
  .chip:hover{transform:translateY(-1px); border-color:var(--peach); color:var(--peach-deep); background:rgba(255,248,227,.7);}
  .chip:active{transform:translateY(0) scale(.97);}
.chip:disabled{transform:none} /* b80 · sau :hover/:active nên thắng, không cần !important */
  .chip.active,.chip.primary,.chip.shape.active{
    background:var(--blue-deep); border-color:var(--blue-deep); color:#fff8e3; box-shadow:none;
  }
  body.dark .chip.active,body.dark .chip.primary,body.dark .chip.shape.active{
    background:var(--blue-deep); border-color:var(--blue-deep); color:#fff8e3;
  }
  .chip.pattern.active,.chip.toggle.metro.active{
    background:var(--peach); border-color:var(--peach); color:#fff; box-shadow:none;
  }
  .chip.toggle.active,.chip.scaletype.active{
    background:var(--sky); border-color:var(--sky); color:#fff; box-shadow:none;
  }
  .tension-badge{border-radius:0;}
  .root-chip.active .root-option.selected-spelling{text-decoration-color:var(--peach);}

  .tempo-row{padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
  .tempo-row input[type=range]{accent-color:var(--peach);}
  .beat-dot{width:8px; height:8px; border-radius:0; transform:rotate(45deg);}
  .beat-dot.on{transform:rotate(45deg) scale(1.35);}

  .current-chord{
    position:relative; margin:22px 0 18px; padding:24px 26px;
      background:var(--blue-deep); color:#fff5d9;
    
  }
  .current-chord::before{
    content:'NOW / 今'; position:absolute; right:18px; top:14px;
    color:#e6bd65;  font-size:8px; font-weight:800; letter-spacing:.13em;
  }
  .current-chord .symbol{color:#fff5d9;  font-size:40px; line-height:1; text-shadow:none;}
  .current-chord .theory-line,.current-chord .hand-line,.current-chord .jazz-degree-line{color:#e6d6ae;}
  .current-chord .jazz-degree-line.secondary{color:#bcae8a;}
  .current-chord .inv-badge{border-radius:0; background:var(--peach); color:#fff8e3;}
  .current-chord .notation-alias-badge{border-radius:0;}
  .current-chord .chip{border-color:rgba(255,255,255,.2); color:#f2eee5;}
  .current-chord .chip.active{background:#f2eee5; color:#11110f;}
  .hand-tag{border-radius:0;}

  button.action{
    min-height:40px; padding:10px 15px; border:1px solid var(--blue-deep); 
    background:var(--ivory); color:var(--blue-deep); font-size:12px; font-weight:800; letter-spacing:.025em; box-shadow:none;
  }
  button.action:hover{transform:translateY(-1px); border-color:var(--peach); color:var(--peach-deep); background:#fffaf0;}
button.action:disabled{transform:none} /* b80 */
  button.action.primary{
    background:var(--peach); border-color:var(--peach); color:#fff;
    box-shadow:none; letter-spacing:.08em;
  }
  button.action.primary:hover{background:var(--coral); color:#fff; opacity:1;}
  button.action.stop{border-color:var(--coral); color:var(--coral);}
  .current-chord button.action{background:transparent; border-color:#e8d5a8; color:#fff5d9;}
  .current-chord button.action:hover{background:#fff5d9; border-color:#fff5d9; color:var(--blue-deep);}
  .current-chord button.action.primary{border-color:var(--peach); color:#fff;}
  .current-chord button.action.stop{border-color:#e96252; color:#ff8878;}

  .suggestion-empty,.suggestion-card{
    border-radius:0; background:transparent; border-color:var(--panel-border);
  }
  .suggestion-card{border-left:1px solid var(--panel-border); border-top:3px solid var(--peach);}
  .notation-help{background:transparent;}

  .legend{padding-top:2px;}
  .legend i{border-radius:0; transform:rotate(45deg);}
  .keyboard-scroll,.fretboard-scroll{
    padding:13px 12px 10px; border:2px solid var(--blue-deep); background:#c9ac70;
  }
  body.dark .keyboard-scroll,body.dark .fretboard-scroll{background:#c9ac70;}
  .keyboard{height:168px;}
  .key.white{height:156px; border-color:rgba(17,17,15,.2); border-radius:0 0 3px 3px;}
  .key.black{height:96px; border-radius:0 0 2px 2px;}
  .key.white.active-rh,.key.black.active-rh,
  .key.white.active-lh,.key.black.active-lh{background:var(--sky);}
  .key.white.musical-typing-active,.key.black.musical-typing-active{
    background:var(--sky);
    border-color:transparent;
    box-shadow:none;
    transform:none;
  }
  .key.root::after{border-radius:0; transform:translateX(-50%) rotate(45deg);}

  .circle-of-fifths{width:310px; height:310px;}
  .cof-key{border-radius:50%; background:transparent;}
  .cof-key.active{background:var(--peach); border-color:var(--peach); color:#fff; box-shadow:none;}

  .pad-grid{gap:8px;}
  .pad{
       background:transparent;
  }
  .pad:hover{transform:translateY(-2px); }
  .pad.filled{
    border:1px solid var(--text); border-left:4px solid var(--peach); background:var(--panel-2);
  }
  .pad .psym{font-size:20px; color:var(--text);}
  .pad.flash{box-shadow:inset 0 0 0 3px var(--peach);}
  /* b609 · đèn ô đang phát (và lúc nháy): lớp phủ riêng, không đụng bóng 3D hay viền sửa ô / viền Metro */
  #padGrid > .pad:is(.coc-now,.flash)::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--peach);pointer-events:none;z-index:1}
  .grid-toolbar{padding-top:4px;}

  .audio-unlock-overlay{background:rgba(10,10,8,.86);}
  .audio-unlock-card{border-radius:0; border-color:rgba(255,255,255,.22); border-top:4px solid var(--peach);}
  footer{padding:20px 0 0;  font-size:9px; letter-spacing:.04em;}

  @media (min-width:900px){

    .quick-finder{padding-right:20px;}
    .pad-grid{grid-template-columns:repeat(4,1fr);}
  }
  @media (max-width:880px){
    body,body.dark{
      padding:0 18px 52px;
      
      background-size:24px 24px,24px 24px;
    }
    .topbar{top:18px;}
    /* Mobile: cụm nút VI/EN chiếm góc phải trên nên logo dời sang góc TRÁI
       trên, và padding-top nâng lên 104px để khối chữ nằm hẳn dưới logo —
       trước đây chim đè lên chữ CHORDS. */
    .app-masthead{
      grid-template-columns:1fr; gap:24px; padding:104px 0 24px;
      background-image:radial-gradient(circle at 64px 51px, rgba(217,81,59,.9) 0 44px, transparent 45px);
    }
    body.dark .app-masthead{
      background-image:radial-gradient(circle at 64px 51px, rgba(239,104,79,.92) 0 44px, transparent 45px);
    }
    /* Logo chim Lạc bản mobile: hộp 150×98, chim cao 67.5px vẽ từ y=13. */
    .app-masthead::before{
      left:0; right:auto; top:0; width:150px; height:98px;
      -webkit-mask-position:0 13px; mask-position:0 13px;
      -webkit-mask-size:150px 67.5px; mask-size:150px 67.5px;
    }
    .main-tabs{justify-self:stretch; grid-template-columns:repeat(2,1fr);}
    .main-tab{min-height:64px;}
    h1{font-size:clamp(38px,10vw,58px);}
  }
  @media (max-width:600px){
    body{padding:0 12px 40px;}
    .app-masthead{min-height:0; margin-bottom:18px; padding-top:104px;}
    .topbar{top:12px; right:0;}
    h1{font-size:40px;}
    header p{font-size:13px;}
    section{padding:22px 16px;}
    section h2{font-size:16px;}
    .quick-finder{padding:18px 14px 14px;}
    .quick-finder::before{display:none;}
    .quick-finder .row-label{padding-right:0;}
    .quick-finder-input{border-right:1px solid var(--panel-border);}
    .current-chord{padding:22px 17px; box-shadow:7px 7px 0 var(--peach-soft);}
    .current-chord .symbol{font-size:34px;}
    .sub-tabs{display:grid; grid-template-columns:repeat(2,1fr);}
    #guitarSubTabs{grid-template-columns:repeat(3,1fr);}
    .chip.sub-tab{min-width:0; padding:11px 8px;}
    .circle-of-fifths{width:250px; height:250px;}
    .pad-grid{grid-template-columns:repeat(2,1fr);}
    .pad{min-height:102px;}
  }

  /* v62 · Compact standing-crane emblem + LocalStorage Auto-save. */
  body{
    
    
    font-feature-settings:'kern' 1,'liga' 1;
    -webkit-font-smoothing:antialiased;
  }

  h1.brand-title{
    display:flex;
    align-items:baseline;
    flex-wrap:nowrap;
    max-width:780px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:-.035em;
    line-height:.84;
    white-space:nowrap;
  }
  .brand-title .brand-city{
    font-weight:500;
  }
  .brand-title .brand-of{
    display:inline-block;
    margin:0 .34em;
    font-size:.3em;
    font-style:italic;
    font-weight:500;
    letter-spacing:.16em;
    transform:translateY(-.12em);
  }
  .brand-title .brand-chords{
    font-weight:700;
  }
  .brand-title .version-badge{
    flex:0 0 auto;
    margin-left:14px;
    transform:translateY(-.55em);
  }
  header .eyebrow{
    font-weight:700;
    letter-spacing:.32em;
  }
  header p{
    max-width:680px;
    font-weight:500;
    letter-spacing:.012em;
  }
  section h2,.current-chord .symbol,.pad .psym{
    font-weight:700;
    letter-spacing:.035em;
  }
  .row-label,.chip,.main-tab,button.action,.quick-finder::after{
    font-weight:700;
    letter-spacing:.075em;
  }
  .quick-finder-input{
    font-weight:500;
    font-style:italic;
    letter-spacing:.015em;
  }
  @media (max-width:600px){
    h1.brand-title{
      font-size:clamp(34px,10.5vw,44px);
      letter-spacing:-.045em;
    }
    .brand-title .brand-of{margin:0 .22em;}
    .brand-title .version-badge{margin-left:8px;}
  }

  /* ==================================================================
     TAP TARGET (thiết bị cảm ứng) — KHỐI NÀY PHẢI NẰM CUỐI STYLESHEET.
     Lý do: khối theme editorial phía trên định nghĩa lại
     `button.action{min-height:40px}`. Cùng specificity nên rule đứng sau
     thắng — trước đây khối này nằm ở trên nên chuẩn 44px bị nuốt âm thầm
     (matchMedia báo pointer:coarse = true nhưng computed minHeight = 40px).
     ĐỪNG chèn CSS nào xuống dưới khối này.

     Vòng quãng 5 KHÔNG nới quá 40px: tâm hai phím thứ liền kề chỉ cách
     35px nên vùng chạm 44px sẽ chồng nhau 9px. Giữ 40px (26px + inset 7px)
     — vẫn đạt WCAG 2.5.8 AA (tối thiểu 24×24).
     ================================================================== */
  @media (pointer:coarse){
    .chip, button.action, .root-option, .pad-play, .bass-select{min-height:44px;}
    .chip, button.action{min-width:44px;}
    .theme-toggle, .chip.lang, .pad .clear{min-width:44px; min-height:44px;}
    /* Nới vùng chạm mà không đổi kích thước hiển thị — giữ nguyên bố cục. */
    .cof-key::before, .pad .clear::before{
      content:''; position:absolute; inset:-7px;
    }
    /* BẮT BUỘC: phím vòng quãng 5 là hình TRÒN nên vùng chạm cũng phải tròn.
       Để vuông thì góc chìa ra √(20²+20²)=28.3px, trong khi tâm hai phím thứ
       liền kề chỉ cách 35px → góc phím này thọc vào tận 6.7px quanh tâm phím
       kia, tức là bấm vào rìa C♯m lại ăn sang G♯m (đã đo được trên v71).
       Bo tròn thì tầm với chỉ còn 20px, dừng ở 15px trước tâm phím bên cạnh,
       nằm ngoài vòng tròn nhìn thấy 13px. */
    .cof-key::before{border-radius:50%;}
    /* ::before là absolute nên nó nằm TRÊN các nút tĩnh bên trong phím, che mất
       nhãn chọn cách viết (B / C♭, F♯ / G♭, C♯ / D♭) — đo được 3/6 nhãn không
       tap nổi trên mobile, trong khi desktop bấm bình thường. Cho nhãn lên lớp
       trên để lấy lại quyền nhận chạm; phần còn lại của phím vẫn do ::before lo. */
    .cof-key-group .cof-label{position:relative; z-index:1;}
    /* Mỗi cách viết (C# / D♭) là một nút riêng; nới để đủ 44px ngang.
       Bù bằng giảm padding ngang nên bề ngang chip gần như không đổi. */
    /* 56 = 44 (vùng chạm) + 8 (padding trái/phải) + 4 (viền 2px mỗi bên,
       chip dùng box-sizing:border-box nên viền ăn vào bề ngang). */
    .chip.root-chip{min-width:56px; padding:6px 4px;}
    .chip.root-chip.enharmonic{padding:4px 4px;}
  }

  /* ==================================================================
     SAFE AREA — chỉ khi cài ra màn hình chính (standalone).
     Viewport có `viewport-fit=cover`, nên ở standalone trang phủ kín cả vùng
     tai thỏ và thanh home. Body dùng padding cứng (36/20/60) nên nếu không bù
     inset thì header chui xuống dưới thanh trạng thái trên iPhone có tai thỏ.
     Trong trình duyệt thường khối này KHÔNG chạy → bố cục không đổi.
     ================================================================== */
  /* Skip link: ẩn khỏi màn hình nhưng vẫn trong luồng Tab; hiện ra khi nhận focus.
     Không dùng display:none — như thế bàn phím sẽ không tới được. */
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:9999;
    padding:12px 18px; border:2px solid currentColor; border-radius:2px;
    background:var(--panel); color:var(--text);
     font-size:14px; font-weight:700; text-decoration:none;
  }
  .skip-link:focus{left:12px; top:12px;}

  @media (display-mode: standalone){
    body{
      padding-top: calc(36px + env(safe-area-inset-top));
      padding-bottom: calc(60px + env(safe-area-inset-bottom));
      padding-left: calc(20px + env(safe-area-inset-left));
      padding-right: calc(20px + env(safe-area-inset-right));
    }
  }
  @media (display-mode: standalone) and (max-width:600px){
    body{
      padding-top: calc(20px + env(safe-area-inset-top));
      padding-bottom: calc(40px + env(safe-area-inset-bottom));
      padding-left: calc(12px + env(safe-area-inset-left));
      padding-right: calc(12px + env(safe-area-inset-right));
    }
  }

.cof-key.minor.cof-key-group{width:32px;height:34px;padding:0;}
.cof-key.minor.cof-key-group .cof-label{font-size:9px;padding:1px 0;line-height:1.25;}
.cof-key.minor.cof-key-group .alt{font-size:8px;}
.piano-hand-settings{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0;font-size:14px}
/* The page background is dark in one theme, while its text stays dark on cream panels. */
.piano-hand-settings select{padding:9px 12px;min-height:44px;border:2px solid var(--blue-deep);background:var(--ivory);color:var(--blue-deep);font:inherit;max-width:100%;cursor:pointer;color-scheme:light}
.piano-hand-settings select option{background:var(--ivory);color:var(--blue-deep)}
.piano-hand-settings select:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px}
#pianoChordSubtab .current-chord .hand-tag.lh,#pianoChordSubtab .current-chord .hand-tag.rh{background:#e6d6ae;color:var(--blue-deep)}
#pianoChordSubtab .current-chord .pattern-hint{color:#e6d6ae}
.piano-practice{font-size:13px;line-height:1.65;margin:12px 0;overflow-wrap:anywhere}.piano-practice p{margin:8px 0}.piano-practice summary{cursor:pointer;font-weight:bold}.piano-event{padding:4px 0;border-bottom:1px solid #8884}.piano-pad-guide{font-size:10px;padding:4px 6px;line-height:1.5;overflow-wrap:anywhere}.pad.filled{height:auto;min-height:100px}.piano-interval-table{width:100%;border-collapse:collapse}.piano-interval-table td,.piano-interval-table th{text-align:left;padding:6px;border-bottom:1px solid #8884}
/* Steady chord diagram plus distinct note-on lights for both hands. */
.key.white.playing-lh,.key.black.playing-lh{background:var(--teal);box-shadow:0 0 14px var(--teal-soft);outline:2px solid #fff4d3;outline-offset:-3px}
.key.white.playing-rh,.key.black.playing-rh{background:var(--coral);box-shadow:0 0 14px rgba(232,80,63,.6);outline:2px solid #fff4d3;outline-offset:-3px}
/* Guitar finger labels: independent of piano colors and scale dots. */
.guitar-fingering-guide{margin:14px 0;padding:12px;border:1px solid var(--blue-deep);background:var(--ivory);color:var(--blue-deep);font-size:13px;line-height:1.55}
.guitar-fingering-guide p{margin:5px 0}.guitar-fingering-title{font-weight:800}
.guitar-fingering-strings{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:10px 0}
.guitar-fingering-string{display:flex;flex-direction:column;gap:3px;padding:6px 3px;border:1px solid var(--border);text-align:center;overflow-wrap:anywhere}
.guitar-fingering-string span:first-child{font-weight:700}.guitar-fingering-string strong{font-size:14px}
.guitar-fingering-review{padding:8px;border-left:3px solid var(--coral);font-weight:700}
.guitar-fingering-scope{font-size:12px}
.guitar-barre-details{margin:10px 0;border-top:1px solid var(--border);padding-top:8px}.guitar-barre-details summary{cursor:pointer;font-weight:700}.guitar-barre-details summary:focus-visible{outline:2px solid var(--blue-deep);outline-offset:3px}
.guitar-barre-overlay{position:absolute;inset:0;pointer-events:none;z-index:1}
.guitar-barre-line{position:absolute;border-radius:9px;background:var(--blue);opacity:.85}
.guitar-alternatives{margin:12px 0;padding:12px;border:1px solid var(--blue-deep);background:var(--ivory);color:var(--blue-deep);font-size:13px;line-height:1.6;overflow-wrap:anywhere}.guitar-alternatives:empty{display:none}
.guitar-alternative-title,.guitar-alternative-card>p:first-child{font-weight:800}.guitar-alternative-card{border-top:1px solid var(--blue-deep);margin-top:12px;padding-top:10px}.guitar-alternatives p{margin:6px 0}
.guitar-alternatives button{min-height:44px;max-width:100%;padding:8px 12px;white-space:normal;font:inherit;font-weight:700;background:var(--ivory);color:var(--blue-deep);border:2px solid var(--blue-deep);cursor:pointer}.guitar-alternatives button:disabled{opacity:.7;cursor:default}.guitar-alternatives button:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px}
.guitar-transitions{margin:16px 0;padding:12px;border:2px solid var(--blue-deep);background:var(--ivory);color:var(--blue-deep);font-size:13px;line-height:1.6;min-width:0;overflow-wrap:anywhere}
.guitar-transitions p{margin:6px 0}.guitar-transitions label{display:flex;align-items:center;gap:8px;min-height:44px;margin:8px 0}.guitar-transitions input[type="checkbox"]{width:20px;height:20px;accent-color:var(--blue-deep);flex-shrink:0}
.guitar-transitions button{min-height:44px;max-width:100%;margin:4px 6px 4px 0;padding:8px 12px;white-space:normal;font:inherit;font-weight:700;background:var(--ivory);color:var(--blue-deep);border:2px solid var(--blue-deep);cursor:pointer}.guitar-transitions button:disabled{opacity:.65;cursor:default}
.guitar-transitions button:focus-visible,.guitar-transitions input:focus-visible,.guitar-transitions summary:focus-visible,.guitar-transitions .fretboard-scroll:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px}
.guitar-transition-card{border-top:1px solid var(--blue-deep);padding:10px 8px;margin:10px 0}.guitar-transition-card[data-selected="true"]{border-left:4px solid var(--blue-deep)}.guitar-transition-card[data-playing="true"]{outline:3px solid var(--coral);outline-offset:-3px}
.guitar-transitions summary{min-height:32px;padding:6px 0;cursor:pointer;font-weight:700}.guitar-transitions .fretboard-scroll{max-width:100%;background:#ebd297}
.guitar-solo{margin:18px 0;padding:12px;border:2px solid var(--blue-deep);background:var(--ivory);color:var(--blue-deep);font-size:13px;line-height:1.65;min-width:0;overflow-wrap:anywhere}.guitar-solo p{margin:8px 0}.guitar-solo:empty{display:none}
.guitar-solo-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.guitar-solo-controls label{display:flex;flex-direction:column;gap:4px;min-width:0}
.guitar-solo select,.guitar-solo button{font:inherit;min-height:44px;padding:8px;max-width:100%;color:var(--blue-deep);background:var(--ivory);border:2px solid var(--blue-deep);color-scheme:light;-webkit-text-fill-color:var(--blue-deep)}.guitar-solo select option{color:var(--blue-deep);background:var(--ivory)}.guitar-solo button{cursor:pointer;margin:4px 6px 4px 0;white-space:normal}
.guitar-solo :is(select,button,summary,.fretboard-scroll):focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px}.guitar-solo summary{cursor:pointer;min-height:44px;font-weight:700}
.guitar-solo-table-wrap{overflow-x:auto;margin:12px 0}.guitar-solo-table{border-collapse:collapse;width:100%;min-width:560px}.guitar-solo-table :is(td,th){text-align:left;border:1px solid var(--blue-deep);padding:6px}.guitar-solo-table caption{text-align:left;font-weight:700;padding:8px 0}.guitar-solo-table tr[data-active="true"]{background:#e4c780;color:#153f4a;outline:2px solid var(--blue-deep);outline-offset:-2px}
.guitar-solo .fretboard-scroll{background:#ebd297}.guitar-solo-playing .fb-dot{background:var(--coral);box-shadow:0 0 0 3px #fff4d3}.guitar-solo-playing{outline:2px solid var(--coral);outline-offset:-2px}
.fb-dot.guitar-note-playing{background:#b5321b;box-shadow:0 0 0 3px #fff4d3,0 0 14px #b5321b;outline:2px solid #153f4a}.fb-dot.guitar-note-playing::after{color:#fff4d3}.fb-mark.guitar-note-playing{color:#fff4d3;background:#b5321b;box-shadow:0 0 0 3px #fff4d3;border-radius:50%;outline:2px solid #153f4a}
@media(max-width:480px){.guitar-solo-controls{grid-template-columns:1fr}}
/* build 8 · đường chạy gam hiện ngay trên cần đàn Scale: nốt ngoài đường chạy mờ đi, nốt đang xem có viền và số ngón */
.fretboard-scroll:has(>#guitarScaleFretboard){scroll-margin-top:16px}.guitar-solo-runbar{margin:8px 0 12px;scroll-margin-bottom:12px}.guitar-solo-runbar p{margin:6px 0 0}.guitar-solo-runbar p:last-child{font-size:12px;opacity:.8}
#guitarScaleFretboard .fb-dot.solo-off{opacity:.28}
#guitarScaleFretboard .fb-dot.small.solo-route.solo-current{z-index:3;overflow:visible;transform:translate(-50%,-50%) scale(1.3);outline:2px solid #153f4a;outline-offset:2px}
#guitarScaleFretboard.guitar-route-playing .fb-dot.small.solo-route.solo-current{background-color:#b5321b;outline:3px solid #fff4d3}
#guitarScaleFretboard .fb-dot.solo-current::after{position:absolute;left:100%;bottom:100%;margin:0 0 -5px -3px;width:13px;height:13px;border-radius:50%;background:#fff4d3;color:#153f4a;box-shadow:0 0 0 1px #153f4a;font:800 9px/13px 'Bodoni Moda','Bodoni 72','Didot','Times New Roman',serif;letter-spacing:0;text-align:center}
.solo-finger-1::after{content:'1'}.solo-finger-2::after{content:'2'}.solo-finger-3::after{content:'3'}.solo-finger-4::after{content:'4'}
.guitar-reach{margin:12px 0 26px;background:var(--ivory);color:var(--blue-deep);overflow-wrap:anywhere}
.guitar-reach-title,.guitar-reach-status{font-weight:800}.guitar-reach-status{padding:6px 8px;border-left:3px solid var(--blue-deep)}
.guitar-reach-extension,.guitar-reach-over-limit,.guitar-reach-needs-fingers,.guitar-reach-notice{border-left:3px solid var(--coral);padding-left:8px}.guitar-reach-hint{border-left:3px solid currentColor;padding-left:8px;opacity:.7}
.guitar-reach summary{font-weight:700;cursor:pointer}.guitar-reach details{margin:10px 0}.guitar-reach-pair{padding:5px 0;border-bottom:1px solid var(--border)}
.guitar-reach-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0}.guitar-reach-fields label{display:flex;flex-direction:column;gap:5px;min-width:0}
.guitar-reach-fields input{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:8px;font:inherit;color:var(--blue-deep);background:var(--ivory);-webkit-text-fill-color:var(--blue-deep);border:1px solid var(--blue-deep);border-radius:4px;color-scheme:light}.guitar-reach-fields input::placeholder{color:var(--blue-deep);opacity:.7}
.guitar-reach input:focus-visible,.guitar-reach summary:focus-visible{outline:2px solid var(--blue-deep);outline-offset:3px}.guitar-reach-error{font-weight:700}.guitar-reach-scope{font-size:12px}
@media(max-width:480px){.guitar-reach-fields{grid-template-columns:1fr}}
.fb-dot[class*="guitar-finger-"]{z-index:2;color:#fff8e3;font:800 12px/1 'Bodoni Moda','Bodoni 72','Didot','Times New Roman','Apple Symbols','Segoe UI Symbol',serif}
.fb-dot.guitar-note-playing{color:#fff4d3} /* b80 · sau luật màu chấm ngón */
.fb-dot[class*="guitar-finger-"]::after{position:absolute;inset:0;display:grid;place-items:center}
/* build 75 · chữ trên chấm cần đàn Scale (Bậc / Tên nốt) */
.fb-label-mode{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:4px 0 10px}
.fb-label-mode .row-label{margin:0}.fb-label-mode .chip-row{margin:0}
#guitarScaleFretboard .fb-dot.small.labeled{width:19px;height:19px;z-index:1;text-align:center;color:#fff8e3;font:700 10px/19px 'Bodoni Moda','Bodoni 72','Didot','Times New Roman','Apple Symbols','Segoe UI Symbol',serif;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none}
#guitarScaleFretboard .fb-dot.small.labeled.long{font-size:8.5px;letter-spacing:-.6px}
.guitar-finger-1::after{content:'1'}.guitar-finger-2::after{content:'2'}.guitar-finger-3::after{content:'3'}.guitar-finger-4::after{content:'4'}.guitar-finger-unknown::after{content:'?'}
@media(max-width:480px){.guitar-fingering-strings{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fret-tappable{cursor:pointer}.fret-tap-info{font-size:13px;opacity:.8;min-height:18px;margin-top:4px}
.grid-instrument-control{display:inline-flex;align-items:center;gap:6px;font-size:13px}.grid-instrument-select{font:inherit;min-height:36px;padding:4px 6px;background:var(--panel);color:inherit;border:1px solid var(--border);}
.sound-bar{margin:0 0 18px;border:1px solid var(--border);border-radius:6px;background:var(--panel)}.sound-bar .row-label{margin:0}.sound-bar input[type=range]{accent-color:var(--peach);width:180px;max-width:100%}.sound-bar .bpm{font-size:12.5px;opacity:.85;min-width:120px}.sound-bar-hint{font-size:12px;opacity:.65}
.sound-bar .reverb-slider{display:inline-flex;flex-direction:column;gap:2px;width:260px;max-width:100%}.sound-bar .reverb-slider input[type=range]{width:100%;margin:0}.reverb-scale{display:flex;justify-content:space-between;font-size:10.5px;opacity:.7;padding:0 2px}
/* bố cục tối giản */
.sound-bar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:12px 16px}.sound-bar .tempo-row{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;flex:1 1 520px}.sound-bar .beat-row{margin:0;flex:0 0 auto}.sound-bar .reverb-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sound-bar .tempo-row .chip{min-height:34px}#pianoAdvanced-section .piano-advanced-body{padding:0 14px 14px;display:grid;gap:12px}#pianoAdvanced-section .piano-expression,#pianoAdvanced-section .piano-hand-settings,#pianoAdvanced-section #pianoIntervals{margin:0}.grid-file-row{opacity:.92}.grid-file-row .action{font-size:11px;padding:7px 12px;min-height:34px}.grid-toolbar{row-gap:10px}.sound-bar .tempo-row,.sound-bar .beat-row{border:0;padding:0;box-shadow:none}.sound-bar .tempo-row::before,.sound-bar .tempo-row::after,.sound-bar .beat-row::before{display:none}.sound-bar .tempo-control{flex-wrap:nowrap}@media (min-width:1100px){[data-i18n="scrollHint"]{display:none}}@media (max-width:640px){.sound-bar{gap:10px}.sound-bar .tempo-row{flex-basis:100%}.sound-bar .tempo-row input[type=range]{width:140px}}
/* thanh nhịp gọn */
.sound-bar.tb{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;padding:6px 4px;row-gap:6px}.sound-bar.tb .tb-group{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:4px 16px;border-left:1px solid var(--border);min-height:52px}.sound-bar.tb .tb-group:first-child{border-left:0}.sound-bar.tb .tb-label,.sound-bar.tb .meter-label{margin:0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;opacity:.75;line-height:1}.sound-bar.tb .tb-controls{display:flex;align-items:center;gap:8px}.sound-bar.tb input[type=range]{accent-color:var(--peach);margin:0}.sound-bar.tb #tempoRange{width:120px}.sound-bar.tb #tempoOut,.sound-bar.tb #reverbOut{font-size:12px;min-width:0;white-space:nowrap}.sound-bar.tb:not(.coc-tb2) #tempoOut{min-width:62px}.sound-bar.tb #reverbOut{text-align:left}
.sound-bar.tb:not(.coc-tb2) #reverbOut{min-width:22px} /* b80 */.sound-bar.tb .tb-reverb .tb-controls{gap:8px}.sound-bar.tb .chip{min-height:30px;padding:4px 10px;font-size:11.5px;letter-spacing:.03em}.sound-bar.tb #meterControl{display:flex;gap:0;margin:0}.sound-bar.tb #meterControl .meter-chip{min-width:44px;margin:0}.sound-bar.tb #meterControl .meter-chip:first-of-type{}.sound-bar.tb #meterControl .meter-chip:last-of-type{}.sound-bar.tb .tb-toggles .tb-controls{gap:6px}.sound-bar.tb .tb-beat{justify-content:center}.sound-bar.tb .beat-indicator{margin:0}.sound-bar.tb .reverb-slider{width:110px;display:block}.sound-bar.tb .reverb-slider input[type=range]{width:110px}.sound-bar.tb .reverb-scale{display:none}.sound-bar.tb .tb-beat{margin-left:auto;border-left:0}@media (max-width:760px){.sound-bar.tb{padding:6px 2px}.sound-bar.tb .tb-group{padding:4px 10px;min-height:0}.sound-bar.tb .tb-tempo{flex:1 1 100%;border-left:0}.sound-bar.tb #tempoRange{flex:1;width:auto;min-width:90px}.sound-bar.tb .tb-meter{border-left:0}.sound-bar.tb .tb-reverb{flex:1 1 100%;border-left:0;flex-direction:row;align-items:center;gap:10px}.sound-bar.tb .tb-reverb .reverb-slider,.sound-bar.tb .tb-reverb .reverb-slider input[type=range]{width:100%}.sound-bar.tb .tb-reverb .tb-controls{flex:1}.sound-bar.tb .tb-beat{display:none}}

/* v24 · sửa trực tiếp trên lưới */
.pad .pad-edit{position:absolute;top:2px;right:32px;min-width:28px;min-height:24px;padding:0 4px;font-size:14px;line-height:1;background:transparent;border:0;border-radius:4px;color:var(--text-muted);cursor:pointer}
.pad .pad-edit:hover,.pad .pad-edit.on{color:var(--coral);background:rgba(0,0,0,.06)}
@media (pointer:coarse){.pad .pad-edit{top:52px;right:6px;min-width:44px;min-height:44px;font-size:18px}.pad.filled > select{max-width:calc(100% - 50px)}}
.pad.coc-edit-target{outline:3px solid #e07b2a;outline-offset:2px;animation:cocEditPulse 1.6s ease-in-out infinite}
@keyframes cocEditPulse{0%,100%{outline-color:#e07b2a}50%{outline-color:rgba(224,123,42,.35)}}
@media (prefers-reduced-motion:reduce){.pad.coc-edit-target{animation:none}}
.pad .coc-pad-editor{position:absolute;left:6px;right:6px;bottom:6px;z-index:5;background:var(--panel,#fff);border:2px solid #e07b2a;border-radius:6px;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.18);text-align:left}
.pad .coc-pad-editor input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:6px 8px;border:1px solid var(--border);background:#fff;color:#222}
select.pad-split,select.pad-meter,select.pad-voicing{max-width:100%} /* b80 · trước là inline */
.pad .coc-pad-editor-hint{font-size:11px;margin-top:4px;color:var(--text-muted)}
.pad .coc-pad-editor-hint.err{color:var(--coral);font-weight:600}
#assignBtn.coc-edit-btn{background:#e07b2a;border-color:#e07b2a;color:#fff}

/* ===== (trước đây: <style id="coc-play-green-css">) ===== */
#keyboard .key.playing-lh,#keyboard .key.playing-rh{background:var(--sky);background-image:none;box-shadow:0 0 6px var(--sky-soft);outline:none}

/* ===== (trước đây: <style id="coc-split-css">) ===== */
.pad .coc-split{display:flex;width:100%;align-items:stretch}
.pad .coc-seg{flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.pad .coc-seg-more{border-left:2px solid color-mix(in srgb,currentColor 45%,transparent)}
.pad .coc-seg-empty{opacity:.45}
.pad .coc-split .coc-seg{font-size:.82em}
.pad .coc-seg-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.pad .coc-seg-btn{font:inherit;font-size:11px;line-height:1.2;padding:3px 7px;min-height:26px;border:1px dashed var(--border);background:transparent;color:inherit;border-radius:4px;cursor:pointer}
.pad .coc-seg-btn:focus-visible{outline:2px solid var(--sky,#55735d);outline-offset:1px}
.pad .coc-seg-btn.on{border-style:solid;border-color:#e07b2a;background:color-mix(in srgb,#e07b2a 18%,transparent);font-weight:700}

/* ===== (trước đây: <style id="coc-melody-css">) ===== */
.coc-mel{margin-top:10px;padding:8px 10px;background:var(--panel)}
.coc-mel-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.coc-mel-head strong{font-size:15px}
.coc-mel-sum{font-size:13px;color:var(--text-muted)}
.coc-mel-state{font-size:13px;font-weight:600;color:var(--coral);min-width:1px}
.coc-mel-head .action{min-height:34px;padding:4px 10px}
#cocMelRecBtn.coc-mel-on{background:var(--coral);color:#fff;border-color:var(--coral)}
.coc-mel-head select{font:inherit;font-size:13px;min-height:32px;padding:3px 4px;background:var(--panel);color:inherit;border:1px solid var(--border);}
.coc-mel-roll{margin-top:8px;overflow-x:auto;overflow-y:hidden;max-height:340px;border:1px solid var(--border);border-radius:6px;outline:none;-webkit-user-select:none;user-select:none;touch-action:pan-x}
.coc-mel-roll:focus-visible{box-shadow:0 0 0 2px var(--sky-soft)}
.coc-mel-roll svg{display:block}
.mr-empty{padding:14px;font-size:13px;color:var(--text-muted)}
.mr-bar{fill:transparent}.mr-bar.mr-alt{fill:rgba(128,128,128,.06)}.mr-bar.mr-play{fill:var(--sky-soft)}
.mr-black{fill:rgba(128,128,128,.10)}
.mr-beat{stroke:rgba(128,128,128,.22);stroke-width:1}
.mr-barline{stroke:rgba(128,128,128,.55);stroke-width:1}
.mr-cline{stroke:rgba(128,128,128,.28);stroke-width:1}
.mr-oct{font-size:9px;fill:var(--text-muted)}
.mr-num{font-size:9px;fill:var(--text-muted)}
.mr-chord{font-size:11px;font-weight:600;fill:currentColor}
.mr-note{cursor:pointer;stroke:rgba(0,0,0,.25);stroke-width:.5}
.mr-note.mr-ct{fill:var(--sky)}
.mr-note.mr-in{fill:#8d8f93}
.mr-note.mr-out{fill:#e07b2a}

.coc-mel-tools{display:flex;flex-wrap:wrap;align-items:center;margin-top:6px}

.coc-mel-sel{font-size:12px;color:var(--text-muted);flex:1 1 220px}
.coc-mel-legend{font-size:12px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:4px}
.mr-k{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:3px;vertical-align:middle}
.mr-k.mr-ct{background:var(--sky)}.mr-k.mr-in{background:#8d8f93}.mr-k.mr-out{background:#e07b2a}
.coc-mel-legend span{display:inline-flex;align-items:center}
.coc-out-btn{font:inherit;font-size:12px;display:inline-flex;align-items:center;gap:2px;padding:3px 8px;border-radius:12px;border:1px solid #e07b2a;background:transparent;color:inherit;cursor:pointer;min-height:26px}
.coc-out-btn.coc-out-warn{background:#e07b2a;color:#fff;font-weight:700}
.coc-out-btn .mr-k{display:none}

.coc-out-btn.coc-out-off{border-style:dashed;opacity:.85}
.coc-out-btn.coc-out-ok{border-color:var(--border);opacity:.7;cursor:default}
.coc-out-btn:focus-visible{outline:2px solid #e07b2a;outline-offset:2px}
.mr-note.mr-out{stroke:#b3541a;stroke-width:1.2}
.mr-note.mr-sel{stroke:#1d2328;stroke-width:2.2} /* b80 · sau các .mr-note.mr-* */

#padGrid > .pad.coc-flash{box-shadow:0 0 0 3px #e07b2a} /* b80 */

/* ===== (trước đây: <style id="coc-ghand-css">) ===== */
.coc-ghand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:10px 0 4px;font-size:13px}
.coc-ghand select{font:inherit;font-size:13px;min-height:32px;padding:3px 4px;background:var(--panel);color:inherit;border:1px solid var(--border);}
.coc-ghand-hint{color:var(--text-muted);font-size:12px}
/* thanh âm thanh gọn */
.sound-bar.tb.coc-tb2{flex-wrap:nowrap;align-items:stretch;padding:8px 6px;row-gap:8px}
.sound-bar.tb.coc-tb2 .tb-group{justify-content:flex-start;gap:8px;padding:4px 18px;min-height:0}
.sound-bar.tb.coc-tb2 .coc-tb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;height:14px}
.sound-bar.tb.coc-tb2 .coc-tb-head .bpm{font-size:11px;opacity:.85;min-width:0}
.sound-bar.tb.coc-tb2 .coc-tb-head .tb-controls{gap:0}
.sound-bar.tb.coc-tb2 .beat-indicator .beat-dot{width:7px;height:7px;margin:0}
.sound-bar.tb.coc-tb2 .beat-indicator{gap:4px}
.sound-bar.tb.coc-tb2 #beatMeterOut{display:none}
.sound-bar.tb.coc-tb2 #tempoRange{width:110px}
.sound-bar.tb.coc-tb2 #tapTempoBtn{padding:4px 8px}
.sound-bar.tb.coc-tb2 .tb-controls{min-height:30px}
.sound-bar.tb.coc-tb2 .chip,.sound-bar.tb.coc-tb2 .humanize-control span{white-space:nowrap}
.sound-bar.tb.coc-tb2 .tb-toggles .tb-controls{flex-wrap:wrap;row-gap:6px}
.sound-bar.tb.coc-tb2 .humanize-control{border:0;background:transparent;box-shadow:none;padding:0 0 0 6px;gap:6px;display:inline-flex;align-items:center;min-height:30px}
.sound-bar.tb.coc-tb2 .humanize-control span:first-child{font-weight:700}
.sound-bar.tb.coc-tb2 #humanizeRange{width:78px}
.sound-bar.tb.coc-tb2 #humanizeVal{font-size:11px;min-width:32px}
.sound-bar.tb.coc-tb2 .reverb-slider,.sound-bar.tb.coc-tb2 .reverb-slider input[type=range]{width:96px}
.sound-bar.tb.coc-tb2 .tb-reverb{margin-left:auto}
@media (max-width:1180px){.sound-bar.tb.coc-tb2{display:grid;grid-template-columns:auto 1fr;row-gap:10px}.sound-bar.tb.coc-tb2 .tb-toggles{border-left:0}.sound-bar.tb.coc-tb2 .tb-reverb{margin-left:0}}
@media (max-width:760px){.sound-bar.tb.coc-tb2{display:flex;flex-wrap:wrap}.sound-bar.tb.coc-tb2 .tb-group{flex:1 1 100%;border-left:0;padding:4px 10px}.sound-bar.tb.coc-tb2 #tempoRange{flex:1;width:auto}.sound-bar.tb.coc-tb2 .tb-reverb{flex-direction:column;align-items:stretch}.sound-bar.tb.coc-tb2 .tb-reverb .reverb-slider,.sound-bar.tb.coc-tb2 .tb-reverb .reverb-slider input[type=range]{width:100%}}
/* khu lưới gọn */
.grid-toolbar.coc-gt{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:10px}
.coc-gt .coc-gt-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.coc-gt .coc-gt-play{display:flex;flex-wrap:wrap;gap:8px}
.coc-gt .coc-gt-play .action{min-height:38px;padding:7px 14px;font-size:12.5px}
.coc-gt #playAllBtn{background:var(--peach);border-color:var(--peach);color:#fff}
.coc-gt .coc-gt-sub{justify-content:space-between;padding:8px 10px;border:1px solid var(--border);background:rgba(128,128,128,.05)}
.coc-gt .coc-gt-settings{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.coc-gt .grid-instrument-control{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.95;white-space:nowrap}
.coc-gt .grid-instrument-control select{font-size:12.5px;text-transform:none;letter-spacing:0;font-weight:400;min-height:32px;padding:3px 6px}
.coc-seg{display:inline-flex;align-items:stretch}
.coc-seg>.action,.coc-seg>button{border-radius:0;margin:0;min-height:34px;padding:5px 12px;font-size:12.5px;white-space:nowrap}

.coc-seg>.action:first-child{border-radius:6px 0 0 6px}
.coc-seg>.action:last-of-type{border-radius:0 6px 6px 0}
.coc-gt .coc-gt-edit .action{min-width:40px;font-size:14px}
.coc-gt .coc-gt-edit #clearAllBtn{font-size:12.5px}
.coc-file-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.coc-file-row .autosave-badge{margin-left:auto;border:0;background:transparent;padding:0;font-size:11px;opacity:.8}
.coc-mel-tools .coc-mel-legend{margin:0 0 0 auto}
.coc-mel-tools{gap:4px}
.coc-mel-tools button{min-width:30px;min-height:30px;padding:0 6px}
@media (max-width:760px){
.coc-gt .coc-gt-play{width:100%}.coc-gt .coc-gt-play .action{flex:1 1 auto}
.coc-gt .coc-gt-sub{flex-direction:column;align-items:stretch}
.coc-gt .coc-gt-settings{flex-direction:column;align-items:stretch;gap:6px}
.coc-gt .grid-instrument-control{display:flex;justify-content:space-between}.coc-gt .grid-instrument-control select{flex:0 1 60%;min-width:0}
.coc-gt .coc-gt-edit{width:100%}.coc-gt .coc-gt-edit .action{flex:1 1 0;min-width:0;padding:5px 4px}
.coc-gt .coc-gt-edit #clearAllBtn{flex:2 1 0}
.coc-file-row .coc-seg{width:100%}.coc-file-row .coc-seg>.action{flex:1 1 auto;min-width:0;padding:5px 6px;font-size:12px;white-space:normal}
.coc-file-row .autosave-badge{margin-left:0;flex-basis:100%}
.coc-mel-head{gap:6px}.coc-mel-head .action{padding:4px 8px}
}

/* ===== (trước đây: <style id="coc-live-css">) ===== */
.coc-live-bar{display:flex;gap:6px;flex-wrap:wrap;width:100%;margin-bottom:6px}
.coc-live-bar .chip{font-size:12px;min-height:30px;padding:4px 10px}
.coc-live-bar .chip.active{outline:2px solid var(--sky,#6aa);}
#pianoChordSubtab .coc-live-bar #cocGridOutSel{max-width:14em;text-overflow:ellipsis} /* b614 */
#pianoChordSubtab .coc-live-bar:has(> #cocGridOutSel:not([hidden])){grid-template-columns:minmax(0,1fr) auto auto auto} /* b614 · thêm 1 cột khi có ô chọn, REC không rơi xuống dòng */
.coc-live-bar .coc-rec-on{animation:cocRecPulse 1s ease-in-out infinite}
#cocRecBtn.coc-rec-on{background:#c0392b;color:#fff;border-color:#c0392b} /* b80 */
@keyframes cocRecPulse{50%{opacity:.55}}
.coc-live-path{font-size:13px;opacity:.8;margin-top:2px;min-height:1em}
.current-chord.coc-live #symbolOut{min-height:1.1em}
.current-chord.coc-live #symbolOut:empty::before,.current-chord.coc-live #theoryOut:empty::before,.current-chord.coc-live #lhPattern:empty::before,.current-chord.coc-live #lhOut:empty::before,.current-chord.coc-live #rhOut:empty::before{content:"\00a0"}
.current-chord.coc-blank .hand-columns,.current-chord.coc-blank #inversionOut{visibility:hidden}

/* ===== (trước đây: <style id="coc-minimal-css">) ===== */
/* ================= v30 · MINIMAL ================= */
:root{ --m-radius:18px; --m-radius-sm:11px; --m-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 36px rgba(0,0,0,.10); --m-hair:rgba(32,56,62,.14); }
body.dark{ --m-shadow:0 1px 2px rgba(0,0,0,.18),0 18px 44px rgba(0,0,0,.28); }
body,body.dark{ background-image:none;  -webkit-font-smoothing:antialiased; }
body::after,body.dark::after{ display:none; }
/* xoá hình chữ nhật / trang trí */
.num,h2::after,section::after,.quick-finder::before,.current-chord::before,.main-tab::after,.main-tab.active::before,.app-masthead::after{ display:none; content:none; }
/* đầu trang gọn */
@media (min-width:721px){ .app-masthead{ min-height:214px; padding:40px 0 30px; } }
.app-masthead{ margin-bottom:26px; border-bottom:1px solid rgba(255,248,227,.14); box-shadow:none; gap:32px; }
body:not(.dark) .app-masthead{ border-bottom-color:var(--m-hair); }
.app-masthead header > p{ display:none; }
.theme-toggle,.chip.lang{ box-shadow:none;  border-radius:var(--m-radius-sm); }
.main-tabs{ box-shadow:none; border:1px solid rgba(255,248,227,.18); border-radius:999px; padding:4px; background:rgba(255,248,227,.08); }
body:not(.dark) .main-tabs{ border-color:var(--m-hair); background:rgba(255,255,255,.35); }
.main-tab{ min-height:46px; border-radius:999px; border:0; padding:6px 26px; }
body.dark .main-tab:not(.active){ color:#f2dfb1; }
.main-tab.active{ box-shadow:0 6px 18px rgba(216,90,67,.35); }
/* thẻ */
section,.quick-finder{ border:0; border-radius:var(--m-radius); box-shadow:var(--m-shadow); }
section{ padding:30px 34px; margin-bottom:26px; }
.quick-finder{ padding:18px 22px; margin-bottom:18px; }
.current-chord{ border:0; border-radius:16px; box-shadow:none; }
.sound-bar,#soundBar{ border-radius:var(--m-radius); box-shadow:none; }
/* tiêu đề khu vực: nhỏ, giãn, bấm để xổ */
section > h2{  font-size:13px;  letter-spacing:.16em; color:var(--blue-deep); margin:0 0 22px; gap:10px; cursor:pointer; user-select:none; }
section > h2 .coc-fold{ margin-left:auto; font-size:15px; opacity:.45; transition:transform .2s ease; letter-spacing:0; }
section.coc-folded > h2{ margin-bottom:0; }
section.coc-folded > h2 .coc-fold{ transform:rotate(-90deg); }
/* b80 · GIỮ !important: trạng thái "thu gọn" phải ẩn MỌI nội dung con, kể cả con có display riêng */ section.coc-folded > :not(h2){ display:none !important; }
section.coc-folded{ padding-top:22px; padding-bottom:22px; }
section > h2:hover .coc-fold{ opacity:.9; }
/* nút, ô chọn, ô nhập */
.chip,.sub-tab,select,input[type=text],input[type=search],.pad,details.compact-section,.coc-mel,.keyboard-scroll,.fretboard-scroll{ border-radius:var(--m-radius-sm); }
.chip{ border-width:1px; box-shadow:none; }
input[type=text],input[type=search]{ border-width:1px; }
details.compact-section{ border:1px solid var(--m-hair); background:transparent; box-shadow:none; }
details.compact-section[open]{ background:rgba(255,255,255,.22); }
.pad{ min-height:74px; border:1px dashed rgba(32,56,62,.22); }
.pad:not(.empty){ border-style:solid; }
.coc-mel{ border:1px solid var(--m-hair); box-shadow:none; }
.coc-mel.coc-folded > :not(.coc-mel-head){ display:none; }
.coc-mel .coc-mel-head{ cursor:pointer; }
.coc-mel-head .coc-fold{ opacity:.45; margin-left:4px; display:inline-block; transition:transform .2s ease; }
.coc-mel.coc-folded .coc-mel-head .coc-fold{ transform:rotate(-90deg); }
footer{ opacity:.55; }
.action{ border-width:1px; border-radius:11px; box-shadow:none; }
.coc-seg > .action{ border-radius:0; }
.coc-seg > .action:first-child{ border-radius:11px 0 0 11px; }
.coc-seg > .action:last-child{ border-radius:0 11px 11px 0; }
.coc-seg > .action:only-child{ border-radius:11px; }
.quick-finder .action.primary{ border-radius:0 11px 11px 0; }
.coc-gt-row{ border-radius:14px; }
.current-chord .btns{ gap:8px; }
.quick-finder input[type=text],.quick-finder input[type=search]{ border-radius:11px 0 0 11px; }
@media (max-width:720px){ section{ padding:22px 18px; } .quick-finder input[type=text],.quick-finder input[type=search],.quick-finder .action.primary{ border-radius:11px; } }

/* Shared Piano/Guitar typography */
/* Same roles share typography, including selected and unselected controls.
   Scoped selectors also cover panels created by the runtime renderers. */
:root {
  --type-family: 'Bodoni Moda', 'Bodoni 72', 'Didot', 'Times New Roman', 'Apple Symbols', 'Segoe UI Symbol', serif;
  --type-weight-body: 400;
  --type-weight-control: 500;
  --type-weight-label: 600;
  --type-weight-heading: 700;
  --type-size-control: 12px;
  --type-size-action: 12px;
  --type-size-input: 13px;
  --type-size-body: 13px;
  --type-size-help: 11.5px;
  --type-size-label: 11px;
  --type-size-group: 10px;
  --type-size-section: 13px;
  --type-size-sub-tab: 12.5px;
  --type-size-main-tab: 14px;
  --type-tracking-control: .075em;
  --type-tracking-label: .08em;
}

#mainContent, #mainTabs {
  font-family: var(--type-family);
}
#mainTabs .main-tab-label {
  font-size: var(--type-size-main-tab);
  font-weight: var(--type-weight-heading);
  font-style: normal;
  letter-spacing: .12em;
  line-height: 1.2;
}
#mainTabs .main-tab-kicker {
  font-size: 9px;
  font-weight: var(--type-weight-control);
  font-style: normal;
  letter-spacing: var(--type-tracking-label);
  line-height: 1.2;
}

#mainContent .chip,
#mainContent .chip.active {
  font-family: var(--type-family);
  font-size: var(--type-size-control);
  font-weight: var(--type-weight-control);
  font-style: normal;
  letter-spacing: var(--type-tracking-control);
  line-height: 1.3;
}
#mainContent .root-option {
  font: inherit;
  letter-spacing: inherit;
}
#mainContent .chip.sub-tab,
#mainContent .chip.sub-tab.active {
  font-size: var(--type-size-sub-tab);
  font-weight: var(--type-weight-label);
}
#mainContent section > h2 {
  font-size: var(--type-size-section);
  font-weight: var(--type-weight-heading);
  font-style: normal;
  letter-spacing: .16em;
  line-height: 1.4;
}
#mainContent .compact-section-title {
  font-size: var(--type-size-label);
  font-weight: var(--type-weight-label);
  font-style: normal;
  letter-spacing: var(--type-tracking-label);
  line-height: 1.4;
}
#mainContent .compact-section-value,
#mainContent .compact-section-value.compact-section-review {
  font-size: 12px;
  font-weight: var(--type-weight-control);
  font-style: normal;
  letter-spacing: .025em;
  line-height: 1.4;
}
#mainContent .chip-group-label {
  font-size: var(--type-size-group);
  font-weight: var(--type-weight-label);
  font-style: normal;
  letter-spacing: var(--type-tracking-label);
  line-height: 1.4;
}
#mainContent :is(.row-label, .tb-label, .meter-label, .grid-instrument-control, .scale-direction-label),
#mainContent #scaleNotesOut .scale-grid-label,
#mainContent #scaleNotesOut .scale-grid th {
  font-size: var(--type-size-label);
  font-weight: var(--type-weight-label);
  font-style: normal;
  letter-spacing: var(--type-tracking-label);
  line-height: 1.4;
}
#mainContent :is(.piano-hand-settings, .piano-expression, .coc-ghand, .guitar-reach-fields, .guitar-solo-controls, .guitar-transitions) > label {
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-control);
  font-style: normal;
  letter-spacing: .025em;
  line-height: 1.5;
}

#mainContent :is(select, input[type=text], input[type=search], input[type=number]) {
  font-family: var(--type-family);
  font-size: var(--type-size-input);
  font-weight: var(--type-weight-control);
  font-style: normal;
  letter-spacing: .025em;
  line-height: 1.4;
}
/* Let the native control shrink inside the Piano advanced grid on mobile. */
#mainContent #pianoAdvanced-section .piano-advanced-body > * {
  min-width: 0;
}
#mainContent button.action,
#mainContent :is(.guitar-alternatives, .guitar-transitions, .guitar-solo, .guitar-reach-toosmall) button {
  font-family: var(--type-family);
  font-size: var(--type-size-action);
  font-weight: var(--type-weight-label);
  font-style: normal;
  letter-spacing: var(--type-tracking-control);
  line-height: 1.3;
}
#mainContent :is(.piano-interval-table, .guitar-solo-table) th {
  font-weight: var(--type-weight-label);
}
#mainContent :is(.piano-practice, .guitar-fingering-guide, .guitar-alternatives, .guitar-transitions, .guitar-solo, .guitar-reach) {
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-body);
  letter-spacing: .015em;
  line-height: 1.6;
}
#mainContent :is(.piano-practice, .guitar-barre-details, .guitar-transitions, .guitar-solo, .guitar-reach) summary,
#mainContent :is(.guitar-fingering-title, .guitar-alternative-title, .guitar-alternative-card > p:first-child, .guitar-reach-title, .guitar-solo-table caption) {
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-label);
  font-style: normal;
  letter-spacing: .025em;
  line-height: 1.5;
}
#mainContent :is(.quick-finder-hint, .quick-finder-status, .pattern-hint, .theory-line,
  .color-rule-msg, .sound-bar-hint, .coc-ghand-hint, .guitar-fingering-scope,
  .guitar-reach-scope, .scroll-hint, .fret-tap-info, .suggestion-empty,
  .piano-pad-guide, .coc-pad-editor-hint, .coc-mel-sum, .coc-mel-sel, .coc-mel-legend,
  .autosave-badge, .hand-line, .jazz-degree-line, .notation-help),
#mainContent .legend span,
#mainContent .piano-expression small,
#mainContent #scaleNotesOut > p {
  font-size: var(--type-size-help);
  font-weight: var(--type-weight-body);
  letter-spacing: .015em;
  line-height: 1.5;
}
#mainContent :is(.guitar-reach-status, .guitar-reach-error, .guitar-fingering-review) {
  font-weight: var(--type-weight-heading);
}
#mainContent .tension-badge {
  font-size: 8px;
  font-weight: var(--type-weight-label);
  letter-spacing: .04em;
  line-height: 1;
}

@media (max-width:600px) {
  :root {
    --type-size-control: 12.5px;
    --type-size-action: 12.5px;
    --type-size-input: 16px;
  }
}

/* Brand slogan follows the same typography scale as the rest of the app. */
.app-masthead .brand-slogan {
  display: block;
  margin: 10px 0 0;
  max-width: 40em;
  color: var(--text-muted);
  font-family: var(--type-family);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-body);
  font-style: normal;
  letter-spacing: .025em;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Responsive instrument diagrams */
/* All 88 keys fit wider panels; keep practical key widths while scrolling. */
#mainContent .keyboard {
  min-width: 1040px;
}
@media (max-width:600px) {
  #mainContent .keyboard {
    min-width: 1560px;
  }
}


/* Live input owns bounded rows; sustained sound does not grow this card. */
#pianoChordSubtab .current-chord {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
}
#pianoChordSubtab  .symbol-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 48px 22px 22px;
  gap: 4px 0;
  align-items: start;
}
#pianoChordSubtab  #symbolOut {
  grid-column: 1 / -1;
  height: 48px;
  min-height: 0;
  min-width: 0;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
}
#pianoChordSubtab  #symbolOut,
#pianoChordSubtab  #inversionOut,
#pianoChordSubtab  #chordAliasOut,
#pianoChordSubtab .coc-live #theoryOut,
#pianoChordSubtab .coc-live #cocLivePath,
#pianoChordSubtab .coc-live #lhOut,
#pianoChordSubtab .coc-live #rhOut,
#pianoChordSubtab .coc-live #lhPattern {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pianoChordSubtab  #inversionOut,
#pianoChordSubtab  #chordAliasOut { line-height: 1.5; }
#pianoChordSubtab  #inversionOut { grid-row: 2; }
#pianoChordSubtab  #chordAliasOut { grid-row: 3; }
#pianoChordSubtab .coc-live #theoryOut { display: block; height: 20px; }
#pianoChordSubtab .coc-live #cocLivePath { height: 20px; margin-top: 2px; }
#pianoChordSubtab .coc-live .hand-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#pianoChordSubtab .coc-live .hand-col { min-width: 0; }
#pianoChordSubtab .coc-live .hand-line { height: 20px; flex-wrap: nowrap; }
#pianoChordSubtab .coc-live .hand-tag { flex-shrink: 0; }
#pianoChordSubtab .coc-live #lhOut,
#pianoChordSubtab .coc-live #rhOut { flex: 1; }
#pianoChordSubtab .coc-live #lhPattern { display: block; height: 18px; }
#pianoChordSubtab  .btns { min-width: 0; max-width: 100%; }
#pianoChordSubtab  .coc-live-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 32px;
}
#pianoChordSubtab  .coc-live-bar .chip {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 700px) {
  #pianoChordSubtab .current-chord { grid-template-columns: minmax(0, 1fr); }
  #pianoChordSubtab  .symbol-row { grid-template-rows: 38px 22px 22px; }
  #pianoChordSubtab  #symbolOut { height: 38px; font-size: 30px; }
}


/* Reserve live-row space before input; manual learning text may still wrap. */
#pianoChordSubtab #theoryOut { min-height: 20px; }
#pianoChordSubtab #cocLivePath { min-height: 20px; }
#pianoChordSubtab .hand-line { min-height: 20px; }
#pianoChordSubtab #lhPattern { display: block; min-height: 18px; }

/* Piano playback feedback follows note attacks without the static preview. */
#keyboard .key, #scaleKeyboard .key { transition: none; }

/* Build 86: decorative masthead artwork does not intercept tab clicks. */
.app-masthead::before{pointer-events:none;}


/* Approved adaptive layout: the runtime adds these classes only on compact
   touch layouts. Desktop has no matching selectors and retains its layout. */
body.coc-compact {
  --coc-ui-bg: #163a43;
  --coc-ui-paper: #f2dfb1;
  --coc-ui-ivory: #fff5d9;
  --coc-ui-ink: #123f50;
  --coc-ui-muted: #695b47;
  --coc-ui-accent: #d85a43;
  --coc-ui-root: #ba3d32;
  --coc-ui-line: rgba(18,63,80,.19);
  --coc-ui-gutter: 20px;
  margin: 0;
  padding: env(safe-area-inset-top) max(0px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0px, env(safe-area-inset-left));
  background: var(--coc-ui-bg);
  color: var(--coc-ui-ivory);
  font-family: var(--type-family);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: clip;
}
body.coc-compact .wrap { width: 100%; max-width: 1320px; margin: 0 auto; }
body.coc-compact .topbar {
  position: relative;
  top: auto;
  right: auto;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  min-height: 32px;
  margin: 0;
  padding: 0 var(--coc-ui-gutter);
}
body.coc-compact .topbar :is(.chip.lang,.theme-toggle) {
  min-width: 40px;
  min-height: 36px;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--coc-ui-paper);
  font-size: 11px;
  box-shadow: none;
}
body.coc-compact .topbar .chip.lang.active { background: rgba(255,245,217,.11); color: var(--coc-ui-ivory); }
body.coc-compact .app-masthead {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 0 12px;
  min-height: 0;
  padding: 0 var(--coc-ui-gutter);
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.coc-compact .app-masthead::before,
body.coc-compact .app-masthead::after { display: none; content: none; }
body.coc-compact .app-masthead header { min-width: 0; margin: 0; animation: none; }
body.coc-compact .app-masthead > header { grid-column: 1; grid-row: 1; }
body.coc-compact .app-masthead > .coc-ui-search { grid-column: 2; grid-row: 1; }
body.coc-compact .app-masthead > .topbar { grid-column: 3; grid-row: 1; min-height: 44px; padding: 0; gap: 0; }
body.coc-compact .app-masthead > .topbar :is(.chip.lang,.theme-toggle) { min-width: 28px; min-height: 44px; padding: 4px; font-size: 10px; }
body.coc-compact .app-masthead :is(#pwaStatus,#audioSampleStatus) { grid-column: 1 / -1; width: 100%; min-height: 0; margin: 0; padding: 2px 0; border: 0; border-radius: 0; background: none; color: var(--coc-ui-paper); box-shadow: none; font-size: 10px; line-height: 1.5; }
body.coc-compact .app-masthead #pwaStatus [data-pdf] { display: none; }
body.coc-compact .app-masthead :is(#pwaStatus,#audioSampleStatus) button { min-height: 44px; font-size: 12px; }
body.coc-compact .app-masthead header :is(.eyebrow,p,.version-badge) { display: none; }
body.coc-compact .app-masthead > p.brand-slogan {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0 0 6px;
  color: var(--coc-ui-muted);
  font-size: var(--type-size-help);
  line-height: 1.45;
}
body.coc-compact h1.brand-title {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  min-height: 44px;
  font-size: 17px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: none;
  color: var(--coc-ui-ivory);
  text-shadow: none;
  animation: none;
}
body.coc-compact h1.brand-title :is(.brand-city,.brand-of,.brand-chords) {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
  opacity: 1;
}
body.coc-compact h1.brand-title .brand-of { margin: 0 .24em; }
body.coc-compact .coc-ui-search {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--coc-ui-paper);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
}
body.coc-compact #mainTabs {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  justify-self: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,245,217,.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
body.coc-compact #mainTabs .main-tab {
  min-width: 0;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--coc-ui-paper);
  box-shadow: none;
  opacity: .68;
}
body.coc-compact #mainTabs .main-tab.active { color: var(--coc-ui-ivory); box-shadow: inset 0 -3px var(--coc-ui-accent); opacity: 1; }
body.coc-compact #mainTabs .main-tab-label { font-size: 15px; letter-spacing: .03em; text-transform: none; }
body.coc-compact #mainTabs .main-tab-kicker { display: none; }
body.coc-compact #mainContent { min-width: 0; padding: 0; }
body.coc-compact #mainContent .coc-ui-layout,
body.coc-compact #mainContent .coc-ui-main { min-width: 0; }
body.coc-compact #mainContent .coc-ui-layout { display: block; }
body.coc-compact #mainContent :is(#pianoSubTabs,#guitarSubTabs) {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin: 0 var(--coc-ui-gutter);
  padding: 2px 0 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
body.coc-compact #mainContent .chip.sub-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 7px 1px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--coc-ui-paper);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .025em;
  opacity: .62;
}
body.coc-compact #mainContent .chip.sub-tab.active { background: none; color: var(--coc-ui-ivory); box-shadow: inset 0 -1px rgba(255,245,217,.55); opacity: 1; }
body.coc-compact #mainContent .coc-ui-section {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--coc-ui-ivory);
  box-shadow: none;
}
body.coc-compact #mainContent .coc-ui-section > h2 { display: none; }
body.coc-compact #mainContent .current-chord.coc-ui-hero {
  position: relative;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 15px var(--coc-ui-gutter) 19px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--coc-ui-ivory);
  box-shadow: none;
}
body.coc-compact #mainContent .coc-ui-hero .symbol-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  grid-template-columns: none;
  grid-template-rows: none;
  gap: 3px 12px;
  min-height: 0;
  padding-right: 70px;
}
body.coc-compact #mainContent .coc-ui-hero .symbol,
body.coc-compact #mainContent .coc-ui-hero #symbolOut {
  display: block;
  grid-column: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  height: auto;
  font-size: 70px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--coc-ui-ivory);
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  text-shadow: none;
}
body.coc-compact #mainContent .coc-ui-quality { font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: 0; color: var(--coc-ui-ivory); }
body.coc-compact #mainContent .coc-ui-kicker { margin: 0 0 5px; color: var(--coc-ui-paper); opacity: .65; font-size: 10px; line-height: 1.4; letter-spacing: .12em; }
body.coc-compact #mainContent .coc-ui-hero .symbol { order: 0; }
body.coc-compact #mainContent .coc-ui-quality { order: 1; }
body.coc-compact #mainContent .coc-ui-hero .symbol-row :is(.inv-badge,.notation-alias-badge) { order: 2; }
body.coc-compact #mainContent .coc-ui-long-symbol :is(.symbol,#symbolOut) { font-size: 42px; }
body.coc-compact #mainContent .coc-ui-very-long-symbol :is(.symbol,#symbolOut) { font-size: 32px; }
body.coc-compact #mainContent .coc-ui-instrument-hint { margin: 10px 0 0; color: var(--coc-ui-muted); font-size: 10px; line-height: 1.5; }
body.coc-compact #mainContent .coc-ui-grid-tools { margin-top: 16px; border-top: 1px solid rgba(255,245,217,.18); }
body.coc-compact #mainContent .coc-ui-grid-tools > summary { padding: 10px 0; min-height: 44px; font-size: 13px; cursor: pointer; }
body.coc-compact #mainContent .coc-ui-hero .symbol-row :is(.inv-badge,.notation-alias-badge) {
  flex: 0 1 auto;
  grid-row: auto;
  max-width: 100%;
  margin-top: 5px;
  padding: 2px 7px;
  border: 0;
  border-radius: 0;
  background: var(--coc-ui-accent);
  color: var(--coc-ui-ivory);
  font-size: 11px;
  line-height: 1.5;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
body.coc-compact #mainContent .coc-ui-hero :is(.theory-line,.jazz-degree-line),
body.coc-compact #mainContent .coc-ui-hero #theoryOut,
body.coc-compact #mainContent .coc-ui-hero #cocLivePath {
  display: block;
  min-height: 0;
  height: auto;
  margin-top: 6px;
  color: var(--coc-ui-paper);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: .015em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
body.coc-compact #mainContent .coc-ui-edit {
  position: absolute;
  top: 29px;
  right: var(--coc-ui-gutter);
  min-height: 44px;
  max-width: 86px;
  padding: 2px 0 2px 8px;
  border: 0;
  background: none;
  color: var(--coc-ui-paper);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}
body.coc-compact #mainContent .coc-ui-workspace {
  min-width: 0;
  margin: 0;
  padding: 6px var(--coc-ui-gutter) 12px;
  border: 0;
  border-radius: 19px 19px 0 0;
  background: var(--coc-ui-paper);
  color: var(--coc-ui-ink);
}
body.coc-compact #mainContent .coc-ui-workspace-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
body.coc-compact #mainContent .coc-ui-workspace-title { min-width: 0; margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: .015em; }
body.coc-compact #mainContent .coc-ui-voicing { min-height: 44px; max-width: 50%; padding: 0 0 0 8px; border: 0; background: none; color: var(--coc-ui-muted); font: inherit; font-size: 12px; line-height: 1.4; text-align: right; }
body.coc-compact #mainContent .coc-ui-workspace .hand-columns {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin: 0;
  padding: 0 0 10px;
  visibility: visible;
}
body.coc-compact #mainContent .coc-ui-workspace .hand-col { min-width: 0; }
body.coc-compact #mainContent .coc-ui-workspace .hand-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 0;
  height: auto;
  margin: 0;
  color: var(--coc-ui-ink);
  font-size: 14px;
  line-height: 1.5;
}
body.coc-compact #mainContent .coc-ui-workspace .hand-tag {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--coc-ui-muted);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .1em;
}
body.coc-compact #mainContent .coc-ui-workspace :is(#lhOut,#rhOut) { flex: initial; max-width: 100%; min-height: 0; height: auto; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }
body.coc-compact #mainContent .coc-ui-workspace #lhPattern { min-height: 0; height: auto; margin: 2px 0 0; color: var(--coc-ui-muted); font-size: 11px; white-space: normal; }
body.coc-compact #mainContent .coc-ui-workspace :is(.keyboard-scroll,.fretboard-scroll) {
  max-width: 100%;
  margin: 0;
  padding: 0 0 6px;
  border: 1px solid rgba(18,63,80,.18);
  border-radius: 8px;
  background: #c9ac70;
  box-shadow: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--coc-ui-ink) rgba(18,63,80,.13);
  -webkit-overflow-scrolling: touch;
}
body.coc-compact #mainContent .keyboard { min-width: 1560px; }
body.coc-compact #mainContent .fretboard { min-width: 956px; }
body.coc-compact #mainContent .keyboard .key.white .lbl { font-size: 10px; }
body.coc-compact #mainContent .coc-ui-workspace .legend { gap: 6px 12px; margin: 5px 0 8px; }
body.coc-compact #mainContent .coc-ui-workspace .legend span { color: var(--coc-ui-muted); font-size: 10px; line-height: 1.5; letter-spacing: .01em; }
body.coc-compact #mainContent .coc-ui-workspace .legend i { width: 6px; height: 6px; }
body.coc-compact #mainContent .coc-ui-context { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; margin-top: 4px; border-top: 1px solid var(--coc-ui-line); }
body.coc-compact #mainContent .coc-ui-context button { min-width: 0; min-height: 44px; padding: 5px 0; border: 0; background: none; color: var(--coc-ui-ink); font: inherit; font-size: 14px; line-height: 1.4; }
body.coc-compact #mainContent .coc-ui-pattern { flex: 1 1 auto; text-align: left; }
body.coc-compact #mainContent .coc-ui-context .coc-ui-tempo { flex: 0 0 auto; color: var(--coc-ui-muted); font-size: 13px; text-align: right; white-space: nowrap; }
body.coc-compact #mainContent .coc-ui-transport {
  display: grid;
  grid-template-columns: minmax(0,1fr) 76px;
  grid-auto-flow: row;
  align-items: stretch;
  gap: 7px 9px;
  min-width: 0;
  max-width: none;
  margin: 4px 0 0;
}
body.coc-compact #mainContent .coc-ui-transport button.action {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 7px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--coc-ui-ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .015em;
  text-transform: none;
  box-shadow: none;
  overflow-wrap: anywhere;
}
body.coc-compact #mainContent .coc-ui-transport :is(#loopBtn,#guitarLoopBtn,#jazzPreviewBtn,#scaleRunBtn,#guitarScaleRunBtn) {
  grid-row: 1;
  grid-column: 1;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--coc-ui-accent);
  border-radius: 11px;
  background: var(--coc-ui-accent);
  color: var(--coc-ui-ivory);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .025em;
  text-align: center;
}
body.coc-compact #mainContent .coc-ui-transport :is(#stopBtn,#guitarStopBtn,#jazzStopBtn,#scaleStopBtn,#guitarScaleStopBtn) {
  grid-row: 1;
  grid-column: 2;
  min-height: 52px;
  padding: 8px 4px;
  border: 1px solid rgba(18,63,80,.3);
  border-radius: 11px;
  background: transparent;
  color: var(--coc-ui-root);
  font-size: 14px;
  text-align: center;
}
body.coc-compact #mainContent .coc-ui-transport :is(#previewBtn,#guitarPreviewBtn) { grid-row: 2; grid-column: 1; justify-self: start; text-align: left; }
body.coc-compact #mainContent .coc-ui-transport :is(#assignBtn,#guitarAssignBtn,#jazzAssignBtn) { grid-row: 2; grid-column: 1 / -1; justify-self: end; max-width: 66%; padding-left: 12px; font-weight: 500; text-align: right; }
body.coc-compact #mainContent .coc-ui-transport #cocLiveBar,
body.coc-compact #mainContent .coc-ui-transport .coc-live-bar {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 0;
  margin: 0 0 6px;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid var(--coc-ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--coc-ui-muted);
}
body.coc-compact #mainContent .coc-ui-transport .coc-live-bar .chip { min-height: 36px; padding: 5px 8px; background: transparent; color: var(--coc-ui-muted); font-size: 11px; letter-spacing: .025em; }
body.coc-compact #mainContent .coc-ui-aux { margin-top: 1px; border-top: 1px solid var(--coc-ui-line); }
body.coc-compact #mainContent .coc-ui-aux-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 45px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--coc-ui-line); background: none; color: var(--coc-ui-ink); font: inherit; font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; }
body.coc-compact #mainContent .coc-ui-aux-row :is(small,.coc-ui-aux-value) { color: var(--coc-ui-muted); font-size: 11px; }
body.coc-compact #mainContent .coc-ui-aux-row[data-recording="true"] { color: var(--coc-ui-accent); font-weight: 600; }
body.coc-compact #mainContent .coc-ui-aside { min-width: 0; margin: 20px var(--coc-ui-gutter) 24px; color: var(--coc-ui-ivory); }
body.coc-compact #mainContent .coc-ui-side-tabs { display: flex; gap: 12px; margin: 0 0 10px; border-bottom: 1px solid rgba(255,245,217,.15); }
body.coc-compact #mainContent .coc-ui-side-tabs button { flex: 1; min-width: 0; min-height: 44px; padding: 7px 10px; border: 0; border-radius: 8px 8px 0 0; background: none; color: var(--coc-ui-paper); font: inherit; font-size: 14px; }
body.coc-compact #mainContent .coc-ui-side-tabs button[aria-selected="true"] { background: var(--coc-ui-paper); color: var(--coc-ui-ink); }
body.coc-compact #mainContent .coc-ui-grid-section {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}
body.coc-compact #mainContent .coc-ui-grid-section > h2 { margin: 0 0 12px; color: inherit; font-size: 14px; font-weight: 500; letter-spacing: .015em; text-transform: none; }
body.coc-compact #mainContent .coc-ui-grid-section :is(.grid-toolbar,.grid-file-row,.grid-options) { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
body.coc-compact #mainContent .coc-ui-aside :is(.row-label,.grid-instrument-control,.piano-pad-guide,.autosave-badge) { color: var(--coc-ui-paper); }
body.coc-compact #mainContent .coc-ui-grid-section .action { min-height: 44px; padding: 7px 10px; border-color: rgba(255,245,217,.25); background: transparent; color: inherit; font-size: 12px; letter-spacing: .025em; text-transform: none; }
body.coc-compact #mainContent .coc-ui-grid-section .pad-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
body.coc-compact #mainContent .coc-ui-grid-section .pad { min-width: 0; min-height: 64px; padding: 8px; border: 1px solid rgba(255,245,217,.12); border-radius: 7px; background: rgba(255,245,217,.045); color: var(--coc-ui-paper); }
body.coc-compact #mainContent .coc-ui-grid-section .pad.filled { gap: 4px; min-height: 130px; padding-top: 34px; }
body.coc-compact #mainContent .coc-ui-grid-section .pad .psym { color: inherit; font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
body.coc-compact #mainContent .coc-ui-grid-section .pad .pad-play { order: 1; min-width: 0; min-height: 44px; width: 100%; padding: 3px 0; border: 0; background: none; color: inherit; text-align: left; }
body.coc-compact #mainContent .coc-ui-grid-section .pad > select { --panel: transparent; --border: currentColor; order: 2; width: 100%; max-width: 100%; height: 44px; }
body.coc-compact #mainContent .coc-ui-grid-section .pad > select option { background: var(--coc-ui-paper); color: var(--coc-ui-ink); }
body.coc-compact #mainContent .coc-ui-grid-section .pad .piano-pad-guide { order: 3; font-size: 10px; line-height: 1.4; }
body.coc-compact #mainContent .coc-ui-grid-section .pad .pad-meter { position: absolute; top: 9px; left: 8px; margin: 0; font-size: 10px; line-height: 1.4; opacity: .7; }
body.coc-compact #mainContent .coc-ui-grid-section .pad :is(.pad-edit,.clear) { position: absolute; top: 0; min-width: 36px; min-height: 36px; padding: 0 5px; border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; }
body.coc-compact #mainContent .coc-ui-grid-section .pad .clear { right: 0; }
body.coc-compact #mainContent .coc-ui-grid-section .pad .pad-edit { right: 34px; }
body.coc-compact #mainContent .coc-ui-grid-section .pad:is(.playing,.selected,.active) { background: var(--coc-ui-paper); color: var(--coc-ui-ink); border-color: var(--coc-ui-paper); }
body.coc-compact #mainContent .coc-ui-grid-section .pad .plus { color: inherit; }
body.coc-compact #mainContent .coc-ui-settings-panel:not([hidden]) { display: grid; gap: 16px; }
body.coc-compact #mainContent .coc-ui-settings-title { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 500; }
body.coc-compact #mainContent .coc-ui-aside .coc-ui-aux-row { color: var(--coc-ui-paper); border-color: rgba(255,245,217,.18); }
body.coc-compact #mainContent .coc-ui-settings-panel > section { margin: 0; padding: 16px; border: 0; border-radius: 12px; box-shadow: none; }
body.coc-compact #mainContent .coc-ui-settings-panel > section > h2 { margin-bottom: 14px; font-size: 14px; line-height: 1.5; letter-spacing: .05em; }
body.coc-compact #mainContent dialog.coc-ui-dialog {
  position: fixed;
  inset: auto 0 0;
  width: min(100%,640px);
  max-width: none;
  max-height: 90dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--panel, var(--coc-ui-paper));
  color: var(--text, var(--coc-ui-ink));
  box-shadow: 0 -12px 40px rgba(0,0,0,.22);
  overscroll-behavior: contain;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
body.coc-compact #mainContent dialog.coc-ui-dialog:not([open]) { display: none; }
body.coc-compact #mainContent dialog.coc-ui-dialog[open] { display: block; }
body.coc-compact #mainContent dialog.coc-ui-dialog::backdrop { background: rgba(0,0,0,.5); }
body.coc-compact #mainContent .coc-ui-dialog-head { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 12px; background: var(--panel, var(--coc-ui-paper)); border-bottom: 1px solid var(--m-hair); }
body.coc-compact #mainContent .coc-ui-dialog-head h2 { margin: 0; font-size: 23px; line-height: 1.35; font-weight: 600; letter-spacing: 0; text-transform: none; color: inherit; }
body.coc-compact #mainContent .coc-ui-close { flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 5px 0 5px 10px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 13px; }
body.coc-compact #mainContent .coc-ui-dialog-body { min-width: 0; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); font-size: 14px; line-height: 1.5; }
body.coc-compact #mainContent .coc-ui-dialog-body > :first-child { margin-top: 0; }
body.coc-compact #mainContent .coc-ui-dialog-body :is(section,.quick-finder,.current-chord) { margin: 0 0 16px; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
body.coc-compact #mainContent .coc-ui-dialog-body :is(button.action,.chip,.root-option,select,input[type=text],input[type=search],input[type=number]) { min-height: 44px; }
body.coc-compact #mainContent .coc-ui-dialog-body :is(select,input[type=text],input[type=search],input[type=number]) { max-width: 100%; font-size: 16px; }
body.coc-compact #mainContent .coc-ui-dialog-body .row-label { margin: 16px 0 9px; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; }
body.coc-compact #mainContent .coc-ui-dialog-body :is(.chip-row,.chip-groups) { max-width: 100%; gap: 8px; }
body.coc-compact #mainContent .coc-ui-dialog-body :is(.chip,.chip.active) { font-size: 14px; line-height: 1.4; letter-spacing: .025em; }
body.coc-compact #mainContent .coc-ui-dialog-body .root-chip { flex: initial; min-width: 0; min-height: 44px; padding: 5px 4px; }
body.coc-compact #mainContent .coc-ui-dialog-body .root-option { min-width: 0; min-height: 44px; font-size: 15px; }
body.coc-compact #mainContent .coc-ui-dialog-body :is(#rootRow,#guitarRootRow,#jazzRootRow,#scaleRootRow,#guitarScaleRootRow) { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
body.coc-compact #mainContent .coc-ui-dialog-body .root-chip.enharmonic { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; }
body.coc-compact #mainContent .coc-ui-dialog-body .root-chip.enharmonic .root-option { flex: 1; min-width: 0; padding: 4px 0; }
body.coc-compact #mainContent .coc-ui-dialog-body .root-chip.enharmonic .root-option + .root-option { border-top: 0; border-left: 1px solid var(--m-hair); }
body.coc-compact #mainContent .coc-ui-dialog-body details.compact-section { margin: 0 0 16px; border: 0; border-radius: 0; background: transparent; }
body.coc-compact #mainContent .coc-ui-dialog-body details.compact-section > summary { min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--m-hair); }
body.coc-compact #mainContent .coc-ui-dialog-body .compact-section-title { font-size: 12px; letter-spacing: .05em; }
body.coc-compact #mainContent .coc-ui-dialog-body .compact-section-value { font-size: 14px; }
body.coc-compact #mainContent .coc-ui-dialog-body .quick-finder-form { display: grid; grid-template-columns: minmax(0,1fr); gap: 9px; }
body.coc-compact #mainContent .coc-ui-dialog-body .quick-finder-input { min-width: 0; width: 100%; border-radius: 8px; }
body.coc-compact #mainContent .coc-ui-dialog-body .quick-finder .action.primary { min-height: 48px; border-radius: 9px; font-size: 16px; }
body.coc-compact #mainContent .coc-ui-dialog-body .quick-finder-hint { font-size: 12px; line-height: 1.5; }
body.coc-compact #mainContent #soundBar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.coc-compact #mainContent #soundBar .tb-group { flex: initial; min-width: 0; min-height: 0; margin: 0; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--m-hair); }
body.coc-compact #mainContent #soundBar .coc-tb-head { height: auto; min-height: 24px; }
body.coc-compact #mainContent #soundBar .tb-label { font-size: 12px; font-weight: 500; letter-spacing: .05em; line-height: 1.5; }
body.coc-compact #mainContent #soundBar .tb-controls { min-width: 0; min-height: 44px; flex-wrap: wrap; gap: 8px; }
body.coc-compact #mainContent #soundBar :is(#tempoRange,.reverb-slider,.reverb-slider input[type=range]) { flex: 1 1 120px; width: 100%; max-width: 100%; min-width: 70px; }
body.coc-compact #mainContent #soundBar :is(#tempoOut,#reverbOut) { font-size: 15px; }
body.coc-compact #mainContent #soundBar #meterControl { display: flex; width: 100%; gap: 5px; flex-wrap: wrap; }
body.coc-compact #mainContent #soundBar #meterControl .meter-chip { flex: 1 1 auto; min-width: 44px; min-height: 44px; padding: 7px 5px; font-size: 14px; }
body.coc-compact #mainContent #soundBar .chip { min-height: 44px; padding: 6px 10px; font-size: 13px; line-height: 1.4; letter-spacing: .025em; }
body.coc-compact #mainContent #soundBar .humanize-control { display: flex; flex-wrap: wrap; width: 100%; min-height: 44px; padding: 0; }
body.coc-compact #mainContent #soundBar .tb-reverb { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
body.coc-compact #mainContent #soundBar .tb-beat { display: flex; align-items: flex-start; min-height: 24px; }
body.coc-compact #mainContent .coc-ui-dialog-body .coc-ui-grid-section { color: var(--text); }
body.coc-compact #mainContent .coc-ui-dialog-body .coc-ui-grid-section > h2 { display: none; }
body.coc-compact #mainContent .coc-ui-dialog-body .coc-ui-grid-section .pad { border-color: var(--m-hair); background: rgba(18,63,80,.035); color: var(--text); }
body.coc-compact #mainContent .coc-ui-dialog-body .coc-ui-grid-section .action { border-color: var(--m-hair); color: var(--text); }
body.coc-compact footer { margin: 0; padding: 14px var(--coc-ui-gutter) 18px; color: var(--coc-ui-paper); font-size: 10px; line-height: 1.5; }
body.coc-compact :is(button,select,input):focus-visible { outline: 2px solid var(--coc-ui-accent); outline-offset: 3px; }
body.coc-compact :is(button,select,input) { -webkit-tap-highlight-color: transparent; }
body.coc-compact #mainContent button:disabled { opacity: .45; }

/* A phone presents the performance workspace first; auxiliary panels are
   available from their footer rows through the same original controls. */
body.coc-phone #mainContent .coc-ui-aside { display: none; }
body.coc-phone #mainContent .coc-ui-dialog-body .coc-ui-grid-section .pad-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

/* Tablet portrait uses the full instrument width, then a four-column grid. */
body.coc-tablet { --coc-ui-gutter: 28px; }
body.coc-tablet .wrap { max-width: 1100px; padding: 0 24px; }
body.coc-tablet .topbar { min-height: 28px; }
body.coc-tablet .app-masthead { grid-template-columns: minmax(0,1fr) auto auto auto; gap: 16px; min-height: 60px; border-bottom: 1px solid rgba(255,245,217,.2); }
body.coc-tablet .app-masthead > .topbar { grid-column: 4; }
body.coc-tablet .app-masthead > .coc-ui-search { grid-column: 3; }
body.coc-tablet h1.brand-title { font-size: 21px; }
body.coc-tablet #mainTabs { grid-column: 2; grid-row: 1; width: auto; border-bottom: 0; gap: 8px; }
body.coc-tablet #mainTabs .main-tab { min-width: 84px; min-height: 44px; padding: 8px 18px; border-radius: 9px; }
body.coc-tablet #mainTabs .main-tab.active { background: var(--coc-ui-paper); color: var(--coc-ui-ink); box-shadow: none; }
body.coc-tablet #mainContent .coc-ui-hero { padding-top: 17px; padding-bottom: 24px; }
body.coc-tablet #mainContent .coc-ui-hero .symbol,
body.coc-tablet #mainContent .coc-ui-hero #symbolOut { font-size: 76px; }
body.coc-tablet #mainContent .coc-ui-hero .symbol-row { padding-right: 122px; }
body.coc-tablet #mainContent .coc-ui-edit { right: var(--coc-ui-gutter); top: 29px; max-width: 130px; font-size: 14px; }
body.coc-tablet #mainContent .coc-ui-workspace { margin: 0 var(--coc-ui-gutter); padding: 8px 20px 12px; border-radius: 16px; }
body.coc-tablet #mainContent .coc-ui-workspace-title { font-size: 18px; }
body.coc-tablet #mainContent .coc-ui-voicing { font-size: 14px; }
body.coc-tablet #mainContent .coc-ui-workspace .hand-columns { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
body.coc-tablet #mainContent .coc-ui-workspace .hand-line { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 16px; }
body.coc-tablet #mainContent .coc-ui-workspace .hand-tag { font-size: 11px; }
body.coc-tablet #mainContent .coc-ui-workspace .legend span { font-size: 11px; }
body.coc-tablet #mainContent .coc-ui-context { min-height: 50px; }
body.coc-tablet #mainContent .coc-ui-context button { font-size: 16px; }
body.coc-tablet #mainContent .coc-ui-context .coc-ui-tempo { font-size: 14px; }
body.coc-tablet #mainContent .coc-ui-transport { grid-template-columns: minmax(0,1fr) 88px; gap: 8px 12px; }
body.coc-tablet #mainContent .coc-ui-transport :is(#loopBtn,#guitarLoopBtn,#jazzPreviewBtn,#scaleRunBtn,#guitarScaleRunBtn) { min-height: 56px; font-size: 20px; }
body.coc-tablet #mainContent .coc-ui-transport :is(#stopBtn,#guitarStopBtn,#jazzStopBtn,#scaleStopBtn,#guitarScaleStopBtn) { min-height: 56px; font-size: 15px; }
body.coc-tablet #mainContent .coc-ui-transport button.action { font-size: 14px; }
body.coc-tablet #mainContent .coc-ui-aux { display: flex; gap: 20px; margin-top: 4px; }
body.coc-tablet #mainContent .coc-ui-aux .coc-ui-open-grid { display: none; }
body.coc-tablet #mainContent .coc-ui-instrument-hint { display: none; }
body.coc-tablet #mainContent .coc-ui-aux-row { font-size: 14px; }
body.coc-tablet #mainContent .coc-ui-aside { margin-top: 22px; }
body.coc-tablet #mainContent .coc-ui-side-tabs { max-width: 320px; }
body.coc-tablet #mainContent dialog.coc-ui-dialog { inset: 0; width: min(660px,calc(100% - 64px)); max-height: 86dvh; margin: auto; border-radius: 18px; }
body.coc-tablet #mainContent .coc-ui-dialog-head { padding: 18px 24px 12px; }
body.coc-tablet #mainContent .coc-ui-dialog-body { padding: 20px 24px 28px; }
body.coc-tablet #mainContent .coc-ui-dialog-body :is(#rootRow,#guitarRootRow,#jazzRootRow,#scaleRootRow,#guitarScaleRootRow) { grid-template-columns: repeat(6,minmax(0,1fr)); }

/* Landscape keeps the musical controls beside the progression/settings.
   Sidebar scrolling does not change instrument geometry or key hit areas. */
body.coc-tablet-wide .wrap { max-width: 1400px; padding: 0 20px; }
body.coc-tablet-wide #mainContent .coc-ui-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: start; gap: 24px; padding-right: var(--coc-ui-gutter); }
body.coc-tablet-wide #mainContent .coc-ui-main { min-width: 0; }
body.coc-tablet-wide #mainContent .coc-ui-workspace { margin-right: 0; }
body.coc-tablet-wide #mainContent .coc-ui-aside { position: sticky; top: 12px; max-height: calc(100dvh - 24px); margin: 14px 0 24px; padding: 0 0 0 20px; border-left: 1px solid rgba(255,245,217,.13); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
body.coc-tablet-wide #mainContent .coc-ui-grid-section .pad-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
body.coc-tablet-wide #mainContent .coc-ui-grid-section .pad .psym { font-size: 18px; }
body.coc-tablet-wide #mainContent .coc-ui-side-tabs { gap: 8px; margin-bottom: 16px; }
body.coc-tablet-wide #mainContent .coc-ui-settings-panel > section { padding: 14px; }
body.coc-tablet-wide #mainContent .coc-ui-aux-row { min-height: 44px; font-size: 13px; }

@media (max-width:359px) {
  body.coc-phone { --coc-ui-gutter: 16px; }
  body.coc-phone h1.brand-title { font-size: 16px; }
  body.coc-phone #mainContent .coc-ui-hero .symbol,
  body.coc-phone #mainContent .coc-ui-hero #symbolOut { font-size: 60px; }
  body.coc-phone #mainContent .coc-ui-quality { font-size: 20px; }
  body.coc-phone #mainContent .coc-ui-hero .symbol-row { gap: 3px 8px; }
  body.coc-phone #mainContent .coc-ui-workspace .hand-line { font-size: 13px; }
  body.coc-phone #mainContent .coc-ui-transport { grid-template-columns: minmax(0,1fr) 68px; }
}
@media (min-width:1000px) and (max-width:1099px) {
  body.coc-tablet-wide { --coc-ui-gutter: 20px; }
  body.coc-tablet-wide .wrap { padding: 0 12px; }
  body.coc-tablet-wide #mainContent .coc-ui-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 18px; }
  body.coc-tablet-wide #mainContent .coc-ui-aside { padding-left: 16px; }
}

/* Retain the existing Paper theme and toggle; the approved teal palette is
   the dark theme. These are the app's original light-theme colors. */
body.coc-compact:not(.dark) {
  --coc-ui-bg: var(--bg);
  --coc-ui-paper: var(--panel);
  --coc-ui-ink: var(--blue-deep);
  --coc-ui-muted: var(--text-muted);
  --coc-ui-accent: var(--peach);
  --coc-ui-root: var(--coral);
  color: var(--coc-ui-ink);
}
body.coc-compact:not(.dark) :is(h1.brand-title,.coc-ui-search,.topbar .chip.lang,.topbar .theme-toggle,#mainTabs .main-tab,#mainTabs .main-tab.active) { color: var(--coc-ui-ink); }
body.coc-compact:not(.dark) #mainContent :is(.chip.sub-tab,.chip.sub-tab.active,.coc-ui-hero,.coc-ui-quality,.coc-ui-edit,.coc-ui-aside,.coc-ui-side-tabs button) { color: var(--coc-ui-ink); }
body.coc-compact:not(.dark) #mainContent .coc-ui-hero :is(.symbol,#symbolOut,.theory-line,.jazz-degree-line,.coc-ui-kicker,#cocLivePath) { color: var(--coc-ui-ink); }
body.coc-compact:not(.dark) #mainContent .coc-ui-grid-section .pad { color: var(--coc-ui-ink); border-color: var(--coc-ui-line); }
body.coc-compact:not(.dark) #mainContent .coc-ui-aside :is(.row-label,.grid-instrument-control,.piano-pad-guide,.autosave-badge,.coc-ui-aux-row) { color: var(--coc-ui-ink); }
body.coc-compact:not(.dark) :is(#mainTabs,.app-masthead,.coc-ui-side-tabs,.coc-ui-grid-tools,.coc-ui-aside,.coc-ui-aside .coc-ui-aux-row) { border-color: var(--coc-ui-line); }
body.coc-compact:not(.dark) .app-masthead :is(#pwaStatus,#audioSampleStatus),body.coc-compact:not(.dark) footer { color: var(--coc-ui-muted); }


/* Build 90 · iPhone (body.coc-phone, màn < 700 px). Mốc: iPhone 17, 402 × 874 pt.
   Bốn cỡ chữ theo vai trò: tiêu đề 17 · chữ thường 15 · chữ giải thích 13 · nhãn 12.
   Riêng tên hợp âm và nút phát chính giữ cỡ riêng. Chữ ≥ 4.5:1, vùng bấm ≥ 44 × 44 pt.
   iPad và máy tính không đổi. */
body.coc-phone {
  --coc-phone-title: 17px;
  --coc-phone-text: 15px;
  --coc-phone-note: 13px;
  --coc-phone-label: 12px;
  --type-size-control: var(--coc-phone-text);
  --type-size-action: var(--coc-phone-text);
  --type-size-body: var(--coc-phone-text);
  --type-size-section: var(--coc-phone-text);
  --type-size-help: var(--coc-phone-note);
  --type-size-label: var(--coc-phone-label);
  --type-size-group: var(--coc-phone-label);
}

/* Đầu trang */
body.coc-phone .app-masthead { gap: 0 8px; padding-top: 4px; }
body.coc-phone h1.brand-title { overflow: hidden; font-size: var(--coc-phone-title); }
body.coc-phone .coc-ui-search { font-size: var(--coc-phone-text); }
body.coc-phone .app-masthead > .topbar :is(.chip.lang,.theme-toggle) { min-width: 44px; min-height: 44px; padding: 0; border: 6px solid transparent; border-radius: 12px; background-clip: padding-box; font-size: var(--coc-phone-text); }
body.coc-phone #mainTabs .main-tab-label { font-size: var(--coc-phone-title); }
body.coc-phone #mainContent .chip.sub-tab { font-size: var(--coc-phone-text); opacity: .72; }
body.coc-phone #cocStorageNotice button { min-height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,.5); border-radius: 10px; background: transparent; color: inherit; font: inherit; }

/* Hợp âm đang chọn */
body.coc-phone #mainContent .coc-ui-kicker { font-size: var(--coc-phone-label); opacity: .9; }
body.coc-phone #mainContent .coc-ui-hero .symbol-row { padding-right: 104px; }
body.coc-phone #mainContent .coc-ui-edit { max-width: 104px; font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-hero .symbol-row :is(.inv-badge,.notation-alias-badge) { padding: 3px 8px; background: #ba3d32; color: #fff5d9; font-size: var(--coc-phone-note); }
body.coc-phone #mainContent .coc-ui-hero :is(.theory-line,.jazz-degree-line),
body.coc-phone #mainContent .coc-ui-hero #theoryOut,
body.coc-phone #mainContent .coc-ui-hero #cocLivePath { font-size: var(--coc-phone-note); }
body.coc-phone #mainContent .coc-ui-hero .hand-tag.sc { padding: 2px 6px; background: rgba(255,245,217,.14); color: var(--coc-ui-paper); font-size: var(--coc-phone-label); }
body.coc-phone #mainContent #scaleNotesOut { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent #scaleNotesOut table { width: 100%; table-layout: fixed; }
body.coc-phone #mainContent #scaleNotesOut :is(td,b) { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent #scaleNotesOut td i { font-size: var(--coc-phone-label); }

/* Khu nhạc cụ */
body.coc-phone #mainContent .coc-ui-workspace-title { font-size: var(--coc-phone-title); }
body.coc-phone #mainContent .coc-ui-voicing { flex: 0 1 auto; min-width: 0; max-width: 62%; overflow: hidden; font-size: var(--coc-phone-text); white-space: nowrap; text-overflow: ellipsis; }
body.coc-phone #mainContent .coc-ui-workspace .hand-line { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-workspace .hand-tag { font-size: var(--coc-phone-label); }
body.coc-phone #mainContent .coc-ui-workspace #lhPattern { width: calc(200% + 12px); max-width: none; font-size: var(--coc-phone-note); }
body.coc-phone #mainContent .keyboard .key.white .lbl { color: var(--coc-ui-ink); font-size: var(--coc-phone-note); }
body.coc-phone #mainContent .keyboard .key.white.root::after { bottom: 28px; }
body.coc-phone #mainContent .coc-ui-workspace .legend span { font-size: var(--coc-phone-note); }
body.coc-phone #mainContent .coc-ui-workspace .legend i { width: 8px; height: 8px; }
body.coc-phone #mainContent :is(.fb-stringname,.fb-fretnum,.fb-mark) { color: var(--coc-ui-ink); font-size: var(--coc-phone-note); }
body.coc-phone #mainContent .fb-dot.small { font-size: var(--coc-phone-label); }
body.coc-phone #mainContent .coc-ui-instrument-hint { font-size: var(--coc-phone-note); }

/* Điệu, nhịp, nút phát, các dòng mở bảng */
body.coc-phone #mainContent .coc-ui-context button,
body.coc-phone #mainContent .coc-ui-context .coc-ui-tempo { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-transport button.action { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-transport :is(#loopBtn,#guitarLoopBtn,#jazzPreviewBtn,#scaleRunBtn,#guitarScaleRunBtn) { font-size: 20px; font-weight: 700; }
body.coc-phone #mainContent .coc-ui-transport :is(#stopBtn,#guitarStopBtn,#jazzStopBtn,#scaleStopBtn,#guitarScaleStopBtn) { color: #a8352b; font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-transport[data-kind="jazz"] #jazzPreviewBtn { grid-column: 1 / -1; }
body.coc-phone #mainContent .coc-ui-aux-row { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-aux-row::after { content: "›"; flex: 0 0 auto; color: var(--coc-ui-muted); font-size: 22px; line-height: 1; }
body.coc-phone #mainContent .coc-ui-aux-row :is(small,.coc-ui-aux-value) { font-size: var(--coc-phone-note); }
body.coc-phone footer { font-size: var(--coc-phone-note); opacity: .85; }

/* Bảng bật lên */
body.coc-phone #mainContent .coc-ui-dialog-head h2 { font-size: var(--coc-phone-title); }
body.coc-phone #mainContent .coc-ui-close { color: var(--text, var(--coc-ui-ink)); font-size: var(--coc-phone-text); font-weight: 600; }
body.coc-phone #mainContent .coc-ui-dialog-body :is(.chip,.chip.active) { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-dialog-body .compact-section-value { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-dialog-body :is(#rootRow,#guitarRootRow,#jazzRootRow,#scaleRootRow,#guitarScaleRootRow) { grid-template-columns: repeat(3,minmax(0,1fr)); }
body.coc-phone #mainContent .coc-ui-dialog-body .bass-control label { font-size: var(--coc-phone-label); letter-spacing: .05em; text-transform: uppercase; }
body.coc-phone #mainContent .coc-ui-dialog-body summary { padding-top: 12px; padding-bottom: 12px; font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-dialog-body input[type=range] { min-height: 44px; }
body.coc-phone #mainContent .coc-ui-dialog-body input[type=checkbox] { width: 22px; height: 22px; }
body.coc-phone #mainContent .coc-ui-dialog-body .tension-badge { font-size: var(--coc-phone-label); }
body.coc-phone #mainContent .coc-ui-dialog-body .quick-finder-hint { font-size: var(--coc-phone-note); }
body.coc-phone #mainContent .coc-ui-dialog-body .project-transfer-guide { font-size: var(--coc-phone-note); }
body.coc-phone #mainContent .coc-ui-dialog-body .quick-finder .action.primary { border-color: #ba3d32; background: #ba3d32; font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-dialog-body .autosave-badge { color: var(--text, var(--coc-ui-ink)); font-size: var(--coc-phone-label); }
body.coc-phone #mainContent .coc-ui-dialog-body :is(.coc-ghand-label,.coc-ghand-scale-label) { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent #soundBar :is(.chip,#meterControl .meter-chip,.humanize-control span,#humanizeVal) { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-grid-section .action { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-grid-tools > summary { font-size: var(--coc-phone-text); }
body.coc-phone #mainContent .coc-ui-grid-section .pad .piano-pad-guide { font-size: var(--coc-phone-note); }
body.coc-phone #mainContent .coc-ui-grid-section .pad .pad-meter { font-size: var(--coc-phone-label); opacity: .85; }
body.coc-phone #mainContent .coc-ui-grid-section .pad :is(.pad-edit,.clear) { min-width: 44px; min-height: 44px; }
body.coc-phone #mainContent .coc-ui-grid-section .pad .pad-edit { right: 44px; }
body.coc-phone #mainContent .coc-ui-grid-section .pad.filled { padding-top: 44px; }
body.coc-phone #mainContent section > h2 .coc-fold { opacity: .7; }

/* Giao diện sáng */
body.coc-phone:not(.dark) #mainContent .chip.sub-tab:not(.active) { opacity: .85; }
body.coc-phone:not(.dark) footer { color: var(--coc-ui-ink); }

/* iPhone nhỏ: chỉ hiện nút đổi sang ngôn ngữ kia */
@media (max-width:400px) {
  body.coc-phone .app-masthead > .topbar .chip.lang.active { display: none; }
}
@media (max-width:359px) {
  body.coc-phone .app-masthead { gap: 0 6px; }
  body.coc-phone .coc-ui-search { font-size: var(--coc-phone-note); }
}

/* Build 91 · Bấm phím hay đổi hợp âm không làm bàn phím xê dịch (iPhone, iPad).
   Các dòng phía trên đàn giữ chiều cao cố định; chữ dài thì cắt "…" thay vì xuống dòng.
   Cùng nguyên tắc với bản máy tính ("Live input owns bounded rows"). */
body.coc-compact #mainContent :is(.keyboard,.fretboard) { -webkit-tap-highlight-color: transparent; }
body.coc-compact #mainContent .coc-ui-hero .symbol-row { display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-rows: 73px minmax(26px,auto); align-items: baseline; gap: 6px 12px; }
body.coc-tablet #mainContent .coc-ui-hero .symbol-row { grid-template-rows: 79px minmax(26px,auto); }
body.coc-compact #mainContent .coc-ui-hero :is(.symbol,#symbolOut) { grid-area: 1 / 1; height: 73px; max-width: 100%; line-height: 73px; white-space: nowrap; overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; }
body.coc-compact #mainContent .coc-ui-quality { grid-area: 1 / 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.coc-compact #mainContent .coc-ui-hero .symbol-row :is(.inv-badge,.notation-alias-badge) { grid-area: 2 / 1 / 3 / 3; align-self: start; max-width: 100%; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.coc-compact #mainContent .coc-ui-hero .symbol-row .inv-badge { justify-self: start; }
body.coc-compact #mainContent .coc-ui-hero .symbol-row .notation-alias-badge { justify-self: end; max-width: 48%; }
body.coc-compact #mainContent .coc-ui-hero .symbol-row:has(> .notation-alias-badge:not([hidden])) .inv-badge { max-width: 50%; }
body.coc-compact #mainContent #pianoChordSubtab .coc-ui-hero #theoryOut { height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.coc-compact #mainContent #pianoChordSubtab .coc-ui-hero #cocLivePath { position: absolute; right: var(--coc-ui-gutter); bottom: 19px; max-width: 55%; height: 1.5em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
body.coc-compact #mainContent .coc-ui-workspace-title { flex: 0 0 auto; white-space: nowrap; }
body.coc-compact #mainContent .coc-ui-voicing { flex: 1 1 0; min-width: 0; max-width: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.coc-compact #mainContent #pianoChordSubtab .coc-ui-workspace #lhPattern { display: block; height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.coc-phone #mainContent #pianoChordSubtab .coc-ui-workspace :is(#lhOut,#rhOut) { display: -webkit-box; height: 3em; line-height: 1.5; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body.coc-tablet #mainContent #pianoChordSubtab .coc-ui-workspace .hand-line { flex-wrap: nowrap; height: 1.5em; }
body.coc-tablet #mainContent #pianoChordSubtab .coc-ui-workspace :is(#lhOut,#rhOut) { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Build 91 · Máy cảm ứng xoay ngang (body.coc-play): đàn ghim dưới đáy màn hình để chơi bằng tay.
   Piano: phím trắng 50 px (iPad 56 px), bấm nhiều ngón cùng lúc cho cả hai tay; vuốt dải trên cùng
   để dời bàn phím. Guitar: cần đàn phóng to, dải trên cùng báo nốt vừa chạm; vuốt cần đàn để dời ngăn như cũ. */
body.coc-play {
  --coc-play-h: clamp(200px, 64dvh, 400px);
  --coc-play-key: 50px;
  --coc-play-rail: 26px;
  --coc-play-fb: 1.4;
  padding-bottom: calc(var(--coc-play-h) + env(safe-area-inset-bottom));
}
body.coc-play #mainContent .coc-ui-workspace > :is(.keyboard-scroll,.fretboard-scroll) {
  position: fixed;
  left: env(safe-area-inset-left);
  right: env(safe-area-inset-right);
  bottom: 0;
  z-index: 40;
  height: calc(var(--coc-play-h) + env(safe-area-inset-bottom));
  margin: 0;
  padding: var(--coc-play-rail) 0 env(safe-area-inset-bottom);
  border: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
  overflow-y: hidden;
}
body.coc-play #mainContent .coc-ui-workspace > .keyboard-scroll {
  background: #c9ac70 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='26' viewBox='0 0 140 26'%3E%3Crect x='30' y='10' width='80' height='6' rx='3' fill='%23123f50' fill-opacity='.35'/%3E%3Cpath d='M8 13l9-6v12zM132 13l-9-6v12z' fill='%23123f50' fill-opacity='.45'/%3E%3C/svg%3E") center 0 / 140px var(--coc-play-rail) no-repeat;
}
body.coc-play #mainContent .coc-ui-workspace > .keyboard-scroll .keyboard { min-width: calc(52 * var(--coc-play-key)); height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.coc-play #mainContent .coc-ui-workspace > .keyboard-scroll .key.white { height: calc(100% - 4px); }
body.coc-play #mainContent .coc-ui-workspace > .keyboard-scroll .key.black { height: 62%; }
body.coc-play #mainContent .coc-ui-workspace > .fretboard-scroll .fretboard { transform: scale(var(--coc-play-fb)); transform-origin: 0 0; }
/* Dòng báo nốt khi chạm cần đàn nằm trong dải trên cùng của khung đàn, nên không bị đàn che. */
body.coc-play #mainContent .coc-ui-workspace > .fret-tap-info {
  position: fixed;
  left: calc(env(safe-area-inset-left) + 16px);
  right: calc(env(safe-area-inset-right) + 16px);
  bottom: calc(var(--coc-play-h) + env(safe-area-inset-bottom) - var(--coc-play-rail));
  z-index: 41;
  height: var(--coc-play-rail);
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--coc-ui-ink);
  line-height: var(--coc-play-rail);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 1;
  pointer-events: none;
}
body.coc-play.coc-tablet-wide #mainContent .coc-ui-aside { max-height: calc(100dvh - 24px - var(--coc-play-h)); }
@media (min-height:700px) {
  body.coc-play { --coc-play-key: 56px; --coc-play-fb: 2.2; }
}
@media (max-height:500px) {
  body.coc-play #mainContent .current-chord.coc-ui-hero { padding-top: 8px; padding-bottom: 10px; }
  body.coc-play #mainContent .coc-ui-hero .symbol-row { grid-template-rows: 48px minmax(26px,auto); }
  body.coc-play #mainContent .coc-ui-hero :is(.symbol,#symbolOut) { height: 48px; font-size: 44px; line-height: 48px; }
}

/* Metro hợp âm (build 6 · thử nghiệm) · js/app/metro-view.js. Khung dưới lưới: bản đồ vòng quãng 5
   (ga = hợp âm; trưởng/7 át ở vòng ngoài, thứ/giảm ở vòng trong) và danh sách ga tiếp theo, tìm tuyến. */
.coc-metro { font-family: var(--type-family); font-size: var(--type-size-body); font-weight: var(--type-weight-body); line-height: 1.6; letter-spacing: .015em; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--ivory); color: var(--text); scroll-margin-top: 16px; }
.coc-metro:empty { display: none; }
.coc-metro:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
.coc-metro-open { margin: 8px 0 4px; }
.coc-metro-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; }
.coc-metro-title { margin: 0; font-size: var(--type-size-section); font-weight: var(--type-weight-heading); letter-spacing: .16em; line-height: 1.4; }
.coc-metro-key { color: var(--text-muted); font-size: var(--type-size-body); }
.coc-metro-styles { display: flex; gap: 6px; margin-left: auto; }
.coc-metro-style, .coc-metro-lock, .coc-metro-use-key, .coc-metro-remove, .coc-metro-undo, .coc-metro-pct-toggle { min-height: 40px; }
.coc-metro-style[aria-pressed="true"], .coc-metro-lock[aria-pressed="true"], .coc-metro-pct-toggle[aria-pressed="true"], .coc-metro-variant[aria-pressed="true"], .coc-metro-mode[aria-pressed="true"], .coc-metro-seg[aria-pressed="true"], .coc-metro-custom-btn[aria-pressed="true"] { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--ivory); }
.coc-metro-undo:disabled { opacity: .45; cursor: not-allowed; }
.coc-metro-body { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.coc-metro-map { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.coc-metro-ring { fill: none; stroke: var(--border); stroke-width: 1.5; }
.coc-metro-dot { fill: var(--border); }
.coc-metro-station circle { fill: var(--panel); stroke: var(--blue-deep); stroke-width: 1.5; }
.coc-metro-station text { fill: var(--text); font-size: 9px; font-weight: 700; text-anchor: middle; }
.coc-metro-group-T circle { fill: var(--blue-deep); }
.coc-metro-group-T text { fill: var(--ivory); }
.coc-metro-group-D circle, .coc-metro-group-SD circle, .coc-metro-group-SUB circle { stroke: var(--peach); stroke-width: 2; }
.coc-metro-group-B circle { stroke: var(--sky-deep); stroke-dasharray: 3 2; }
/* Hợp âm mượn từ hệ giọng thứ kia (vd V trưởng trong thứ tự nhiên): viền chấm, giữ màu nhóm chức năng. */
.coc-metro-borrow circle { stroke-width: 2.2; stroke-dasharray: 1.2 1.8; stroke-linecap: round; }
.coc-metro-station .coc-metro-label-quality { font-weight: 600; }
.coc-metro-temp circle { stroke: var(--text-muted); stroke-dasharray: 3 3; }
.coc-metro-next-line { fill: none; stroke: var(--peach); stroke-linecap: round; }
.coc-metro-route-line { fill: none; stroke: var(--sky-deep); stroke-width: 3; stroke-dasharray: 6 4; stroke-linejoin: round; stroke-linecap: round; }
.coc-metro-here-ring { fill: none; stroke: var(--peach); stroke-width: 3; }
.coc-metro-here-ring.is-temp { stroke-dasharray: 5 3; }
.coc-metro-badge circle { fill: var(--peach); }
.coc-metro-badge-route circle { fill: var(--sky-deep); }
.coc-metro-badge text { fill: var(--ivory); font-size: 9px; font-weight: 700; text-anchor: middle; }
.coc-metro-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.coc-metro-here { margin: 0; font-size: var(--type-size-body); font-weight: var(--type-weight-label); }
.coc-metro-fn, .coc-metro-borrow-note { display: block; color: var(--text-muted); font-size: var(--type-size-help); font-weight: var(--type-weight-body); line-height: 1.5; }
.coc-metro-here-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.coc-metro-here-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.coc-metro-sub { margin: 6px 0 0; font-size: var(--type-size-section); font-weight: var(--type-weight-heading); line-height: 1.4; }
.coc-metro-next, .coc-metro-routes { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.coc-metro-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.coc-metro-pick { display: flex; flex: 1 1 0; align-items: center; gap: 8px; min-width: 8em; min-height: 44px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--btn-bg); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.coc-metro-pick:focus-visible, .coc-metro-add:focus-visible, .coc-metro-route-play:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
.coc-metro-rank { color: var(--peach); font-size: var(--type-size-label); font-weight: var(--type-weight-label); }
.coc-metro-sym { font-size: var(--type-size-body); font-weight: var(--type-weight-heading); white-space: nowrap; }
.coc-metro-roman { min-width: 0; overflow: hidden; color: var(--text-muted); font-size: var(--type-size-label); white-space: nowrap; text-overflow: ellipsis; }
.coc-metro-bar { flex: 1 1 40px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.coc-metro-bar i { display: block; height: 100%; background: var(--peach); }
.coc-metro-pct { font-size: var(--type-size-label); text-align: right; font-variant-numeric: tabular-nums; }
.coc-metro-play { margin-left: auto; color: var(--text-muted); font-size: var(--type-size-control); }
.coc-metro-variants { display: flex; flex: 0 0 auto; gap: 4px; }
.coc-metro-variant { min-width: 44px; min-height: 44px; padding: 4px 8px; }
.coc-metro-add { flex: 0 1 auto; max-width: 60%; min-height: 44px; margin: 0; padding: 4px 12px; border-color: var(--blue-deep); background: var(--blue-deep); color: var(--ivory); }
.coc-metro-route-play { width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--btn-bg); color: inherit; font: inherit; font-size: 16px; cursor: pointer; }
.coc-metro-route-add { min-height: 44px; white-space: nowrap; }
.coc-metro-add:disabled, .coc-metro-route-add:disabled { opacity: .45; cursor: not-allowed; }
.coc-metro-why { flex: 1 0 100%; margin: 0 2px; color: var(--text-muted); font-size: var(--type-size-help); line-height: 1.5; }
.coc-metro-note { margin: 0; color: var(--text-muted); font-size: var(--type-size-help); line-height: 1.5; }
.coc-metro-pct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.coc-metro-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--type-size-body); }
.coc-metro-select { min-height: 40px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: inherit; font: inherit; font-size: var(--type-size-input); }
.coc-metro-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.coc-metro-route { display: grid; grid-template-columns: minmax(0, 1fr) 44px auto; align-items: center; gap: 4px 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.coc-metro-route.is-shown { border-color: var(--sky-deep); box-shadow: inset 3px 0 0 var(--sky-deep); }
.coc-metro-kind { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--type-size-label); font-weight: var(--type-weight-label); letter-spacing: var(--type-tracking-label); text-transform: uppercase; }
.coc-metro-path { min-width: 0; font-size: var(--type-size-body); font-weight: var(--type-weight-label); overflow-wrap: anywhere; }
.coc-metro-slots { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--type-size-help); line-height: 1.5; }
.coc-metro-none { color: var(--text-muted); font-size: var(--type-size-help); line-height: 1.5; }
.coc-metro-status { margin: 0; color: var(--text-muted); font-size: var(--type-size-help); line-height: 1.5; }
/* Build 606 · "Thay một ga, nghe lại cả đoạn" */
.coc-metro-modes { display: flex; gap: 6px; }
.coc-metro-mode { min-height: 40px; }
.coc-metro-segs { display: flex; flex-wrap: wrap; gap: 6px; }
.coc-metro-seg { min-width: 44px; min-height: 44px; padding: 4px 10px; }
.coc-metro-pick[aria-pressed="true"] { border-color: var(--peach); box-shadow: inset 3px 0 0 var(--peach); }
.coc-metro-custom-btn, .coc-metro-cancel { min-height: 44px; }
.coc-metro-trial { display: flex; flex: 1 0 100%; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px dashed var(--sky-deep); border-radius: 8px; }
.coc-metro-ab, .coc-metro-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.coc-metro-listen { min-height: 44px; margin: 0; }
.coc-metro-listen[aria-pressed="true"] { border-color: var(--peach); background: var(--peach); color: var(--ivory); }
.coc-metro-listen:disabled { opacity: .45; cursor: not-allowed; }
.coc-metro-apply-btn { min-height: 44px; margin: 0; border-color: var(--blue-deep); background: var(--blue-deep); color: var(--ivory); }
.coc-metro-notice { padding-left: 8px; border-left: 3px solid var(--sky-deep); color: var(--text); }
#padGrid > .pad.coc-metro-sel { outline: 3px dashed var(--sky-deep); outline-offset: 2px; }
#padGrid .coc-seg.coc-metro-sel-seg { box-shadow: inset 0 -3px 0 var(--sky-deep); }
@media (max-width: 760px) {
  .coc-metro-body { grid-template-columns: minmax(0, 1fr); }
}
body.coc-compact .coc-metro-body { grid-template-columns: minmax(0, 1fr); }
body.coc-compact .coc-metro { padding: 12px; scroll-margin-top: 84px; }
body.coc-phone .coc-metro-title { font-size: var(--coc-phone-title); }
body.coc-phone :is(.coc-metro-why, .coc-metro-status, .coc-metro-note, .coc-metro-slots, .coc-metro-fn) { font-size: var(--type-size-help); }
body.coc-phone :is(.coc-metro-style, .coc-metro-lock, .coc-metro-use-key, .coc-metro-remove, .coc-metro-undo, .coc-metro-pct-toggle, .coc-metro-select, .coc-metro-mode) { min-height: 44px; }

body.dark .app-masthead p.brand-slogan { color: #ddd4bd; }

/* ===== Sheet nhạc (build 6): nút chuyển Lưới | Sheet, khuông nhạc, công cụ viết nốt, bản in A4 ===== */
.coc-view-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
#padGrid[hidden] { display: none; }
.coc-sheet { margin: 0 0 6px; }
.coc-sheet-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.coc-sheet-durs, .coc-sheet-edit { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.coc-sheet-durs .chip { min-width: 40px; min-height: 36px; padding: 2px 8px; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
.coc-sheet-edit .action, .coc-sheet-tools > .action { min-height: 36px; padding: 4px 10px; }
.coc-sheet-write[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #fff; }
.coc-sheet-piano[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #fff; }
.coc-sheet-sel { min-width: 1px; font-size: 13px; color: var(--text-muted); }
.coc-sheet-gap { flex: 1 1 0; }
.coc-sheet-page { min-height: 120px; padding: 4px 2px; overflow-x: auto; background: #fff; color: #111; border: 1px solid var(--border); border-radius: 8px; outline: none; touch-action: manipulation; }
.coc-sheet-page:focus-visible { box-shadow: 0 0 0 2px var(--sky-soft); }
.coc-sheet-page.coc-sheet-writing { cursor: crosshair; }
.coc-sheet-page svg { display: block; max-width: 100%; height: auto; }
.coc-sheet-empty { padding: 18px 14px; font-size: 14px; color: #555; }
.coc-sheet-hint { margin-top: 6px; }
.coc-sheet-play { fill: rgba(232, 112, 80, 0.16); }
body.coc-phone .coc-sheet-durs .chip, body.coc-phone .coc-sheet-edit .action, body.coc-phone .coc-sheet-tools > .action { min-height: 44px; }
.coc-sheet-page .coc-sheet-note-sel path, .coc-sheet-page .coc-sheet-note-sel rect { fill: #c8502b; stroke: #c8502b; }
/* bước 2: đoạn của bài (trên lưới), tên bài / tác giả, lời, dấu theo ô */
.coc-sections { display: grid; gap: 6px; margin: 0 0 10px; }
.coc-sections-tabs, .coc-sections-edit, .coc-sheet-song, .coc-sheet-lyric, .coc-sheet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.coc-sheet-lyric[hidden], .coc-sheet-bar[hidden] { display: none; }
.coc-sec-tab { min-height: 34px; padding: 2px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.coc-sections-edit .action { min-height: 34px; padding: 4px 10px; }
.coc-sections-edit .action.coc-sec-armed { background: var(--coral); border-color: var(--coral); color: #fff; }
.coc-sec-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.coc-sec-field > span { white-space: nowrap; }
.coc-sec-field input, .coc-sec-field select { min-height: 34px; padding: 3px 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
#cocSectionName { width: 9em; }
.coc-sheet-song { margin: 0 0 8px; }
.coc-sheet-song input { width: 15em; max-width: 100%; }
.coc-sheet-lyric { margin: 0 0 8px; }
#cocSheetLyric { width: 9em; }
.coc-sheet-tip { font-size: 12px; color: var(--text-muted); }
.coc-sheet-bar { margin: 0 0 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.coc-sheet-bar-label { font-size: 13px; font-weight: 600; margin-right: 4px; }
.coc-sheet-bar .chip { min-height: 34px; padding: 2px 10px; font-size: 13px; }
.coc-sheet-bar select { min-height: 34px; padding: 3px 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.coc-sheet-barsel { fill: rgba(70, 120, 200, 0.12); stroke: rgba(70, 120, 200, 0.55); stroke-width: 1; }
body.coc-phone :is(.coc-sec-tab, .coc-sections-edit .action, .coc-sec-field input, .coc-sec-field select, .coc-sheet-bar .chip, .coc-sheet-bar select, .coc-sheet-bar .action) { min-height: 44px; }
body.coc-phone .coc-sheet-song .coc-sec-field { flex: 1 1 100%; }
body.coc-phone .coc-sheet-song input { flex: 1 1 auto; width: auto; min-width: 0; }
#cocSheetPrintHost { display: none; }
#cocSheetPrintHost.coc-print-preparing { display: block; position: fixed; top: 0; left: -20000px; width: 794px; background: #fff; }
@media print {
  body.coc-printing > * { display: none; }
  body.coc-printing > #cocSheetPrintHost { display: block; position: static; width: auto; background: #fff; }
  #cocSheetPrintHost .coc-print-page { break-after: page; page-break-after: always; }
  #cocSheetPrintHost .coc-print-page:last-child { break-after: auto; page-break-after: auto; }
  #cocSheetPrintHost svg { display: block; width: 100%; height: auto; }
  @page { size: A4 portrait; margin: 10mm; }
}