/* Fretboard Atlas — styles. Fonts: Google Fonts (Outfit, Space Mono), SIL OFL. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:block;src:url(fonts/Outfit-400.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:block;src:url(fonts/Outfit-500.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:block;src:url(fonts/Outfit-600.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:block;src:url(fonts/Outfit-700.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:block;src:url(fonts/SpaceMono-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:block;src:url(fonts/SpaceMono-700.woff2) format('woff2')}

:root{
    color-scheme: dark;
    --bg:#15110D;
    --panel:#211913;
    --panel2:#2b211a;
    --ink:#EDE6DA;
    --ink-dim:#9C9186;
    --line:#3a2e24;
    --root:#F4B43C;
    --triad:#4FC4B8;
    --fifth:#F2766B;
    --seventh:#9FB1C4;
    --tension:#C0A6F0;
    --rel:#B79CF0;
    --other:#B7C2C9;
    --gold:#F4B43C;
    --wire:#B9B2A6;
  }
  *{box-sizing:border-box}
  html{background:#15110D;scrollbar-gutter:stable}
  html,body{margin:0;padding:0;background:#15110D !important;color:var(--ink);min-height:100%;
    font-family:'Outfit',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
  body{min-height:100dvh}
  /* hide the page until the first JS render completes, then fade in,
     so reload never flashes the untranslated default HTML or empty containers */
  body{opacity:0;transition:opacity .2s ease}
  html.ready body{opacity:1}
  .wrap{max-width:980px;margin:0 auto;padding:14px 16px 56px}

  /* ---- toolbar (brand + utility) ---- */
  .toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
  .eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--gold);opacity:.85}
  .tbtns{display:inline-flex;gap:6px}
  .langbtn{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1;
    padding:6px 12px;border-radius:8px;background:var(--panel);color:var(--ink-dim);
    border:1px solid var(--line);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  @media(hover:hover){.langbtn:hover{color:var(--gold);border-color:var(--gold)}}

  /* ---- board (the hero, near the top) ---- */
  .board-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-radius:14px;border:1px solid var(--line);background:var(--panel)}
  .board-scroll::-webkit-scrollbar{height:8px}
  .board-scroll::-webkit-scrollbar-thumb{background:#4a3a2c;border-radius:4px}
  svg{display:block;width:100%;height:auto;min-width:1150px;aspect-ratio:1416/270}
  .scrollhint{display:none;font-family:'Space Mono',monospace;font-size:11px;
    color:var(--ink-dim);text-align:right;margin:6px 4px 0;letter-spacing:.04em}

  /* ---- legend (compact, under the board) ---- */
  .legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px;
    color:var(--ink-dim);min-height:20px;line-height:1.3}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .swatch{width:11px;height:11px;border-radius:50%;display:inline-block}

  /* ---- caption (quiet, contextual one-liner) ---- */
  .caption{font-family:'Space Mono',monospace;font-size:12px;line-height:1.55;
    color:var(--ink-dim);margin:8px 2px 0}
  .caption b{color:var(--gold);font-weight:700}
  .caption .anchor{color:var(--triad)}
  .caption .rel{color:#7fd6cc;font-weight:700}

  /* ---- control deck ---- */
  .deck{margin-top:18px;display:flex;flex-direction:column;gap:12px}

  /* keys */
  .keys{display:flex;flex-wrap:wrap;gap:6px;margin:0;min-height:40px}
  .keys button{font-family:'Space Mono',monospace;font-size:14px;font-weight:700;
    min-width:42px;height:40px;padding:0 4px;border-radius:9px;cursor:pointer;
    background:var(--panel);color:var(--ink-dim);border:1px solid var(--line);
    transition:transform .12s ease, background .15s, color .15s, border-color .15s}
  .keys button:hover{transform:translateY(-1px);color:var(--ink)}
  .keys button.active{background:var(--gold);color:#1a120a;border-color:var(--gold)}
  .keys button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  /* toggles row (mode + label) */
  .toggles{display:flex;flex-wrap:wrap;gap:10px}

  /* segmented controls + scale buttons */
  .scalewrap{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0}
  .scalebar{display:flex;flex-wrap:wrap;width:auto;gap:6px}
  .scalebar button{font-family:'Outfit';font-size:13px;font-weight:600;padding:9px 13px;border-radius:8px;
    background:var(--panel);color:var(--ink-dim);border:1px solid var(--line);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .scalebar button:hover{color:var(--ink);border-color:#5a4632}
  .scalebar button.on{background:rgba(244,180,60,.18);color:var(--gold);border-color:var(--gold)}
  .scalebar button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

  .seg{display:inline-flex;flex-wrap:wrap;gap:6px}
  .seg button{font-family:'Outfit';font-size:13px;font-weight:500;padding:9px 14px;border-radius:8px;
    background:var(--panel);color:var(--ink-dim);border:1px solid var(--line);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .seg button:hover{color:var(--ink);border-color:#5a4632}
  .seg button.on{background:rgba(244,180,60,.18);color:var(--gold);border-color:var(--gold)}
  .seg button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
  .modebar button{font-weight:600;padding:9px 18px}
  .modebar button.on{background:var(--gold);color:#1a120a;border-color:var(--gold)}

  .btn{font-family:'Outfit';font-size:13px;font-weight:600;padding:9px 16px;border-radius:10px;
    background:var(--panel);color:var(--ink);border:1px solid var(--line);cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;transition:transform .12s,border-color .15s}
  @media(hover:hover){.btn:hover{transform:translateY(-1px);border-color:var(--gold)}}
  .btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .btn.on{background:var(--gold);color:#1a120a;border-color:var(--gold)}
  .btn:disabled{opacity:.4;cursor:not-allowed}

  /* "詳細" disclosure */
  .advrow{display:flex;justify-content:flex-end;margin:2px 0 0}
  .morebtn{font-family:'Outfit';font-size:12.5px;font-weight:600;letter-spacing:.02em;
    padding:7px 12px;border-radius:8px;background:none;color:var(--ink-dim);
    border:1px solid transparent;cursor:pointer;transition:color .15s,border-color .15s}
  @media(hover:hover){.morebtn:hover{color:var(--gold)}}
  .morebtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .adv{display:none}
  .wrap.adv-open .adv{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;
    padding-top:12px;border-top:1px solid var(--line)}
  .adv-only{display:none}
  .wrap.adv-open .adv-only{display:flex}

  /* board dots */
  .dot{cursor:pointer}
  .dot text{font-family:'Space Mono',monospace;font-weight:700;pointer-events:none;
    text-anchor:middle;dominant-baseline:central}
  .reduced .dot circle, .reduced .dot text, .reduced .winbox{transition:none !important}
  .winbox{fill:rgba(244,180,60,.07);stroke:var(--gold);stroke-width:1.5;
    stroke-dasharray:5 4;rx:10;transition:x .42s cubic-bezier(.34,.9,.3,1),width .42s}

  /* CAGED focus control */
  .cagedctl{display:none;flex-wrap:wrap;gap:6px;align-items:center}
  .cagedctl.show{display:flex}
  .cagedctl button{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;
    padding:7px 11px;border-radius:8px;background:var(--panel);border:1px solid var(--line);
    color:var(--ink-dim);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .cagedctl button.on{background:rgba(244,180,60,.18);color:var(--gold);border-color:var(--gold)}
  .cagedctl button:hover{color:var(--ink)}
  .cagedctl button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .cagedctl .hint{font-family:'Outfit';font-size:12px;color:var(--ink-dim);padding:7px 4px}
  .cagedctl button .cdot{display:inline-block;width:9px;height:9px;border-radius:50%;
    margin-right:6px;vertical-align:-1px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}

  /* diatonic chord strip */
  .dia{display:none;gap:12px;margin:0;align-items:flex-start;width:100%}
  .dia.show{display:flex;flex-wrap:wrap}
  .diahead{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding-top:6px}
  .dia .dlabel{font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;
    color:var(--ink-dim);white-space:nowrap}
  .diachords{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:6px}
  .dia button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:48px;
    padding:6px 10px;border-radius:8px;background:var(--panel);border:1px solid var(--line);
    color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .dia button .rn{font-family:'Space Mono',monospace;font-size:10px;color:var(--ink-dim);line-height:1}
  .dia button .nm{font-family:'Outfit';font-size:14px;font-weight:600;line-height:1.15}
  @media(hover:hover){.dia button:hover{border-color:var(--gold)}}
  .dia button.on{background:rgba(244,180,60,.18);border-color:var(--gold)}
  .dia button.on .nm,.dia button.on .rn{color:var(--gold)}
  .dia button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .dia .di7chk{display:inline-flex;align-items:center;gap:6px;
    font-family:'Outfit';font-size:12px;font-weight:600;color:var(--ink-dim);cursor:pointer;
    padding:2px 4px;user-select:none;-webkit-user-select:none}
  .dia .di7chk .box{width:15px;height:15px;border-radius:3px;border:1.5px solid var(--ink-dim);box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:#1a120a;background:transparent}
  .dia .di7chk.on{color:var(--gold)}
  .dia .di7chk.on .box{background:var(--gold);border-color:var(--gold)}
  @media(hover:hover){.dia .di7chk:hover{color:var(--ink)} .dia .di7chk:hover .box{border-color:var(--gold)}}

  .setSeg{flex-wrap:wrap}
  .hidden{display:none !important}

  .site-footer{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);
    font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-dim);
    text-align:center;letter-spacing:.12em}

  /* ---- manual modal ---- */
  .modal-bg{position:fixed;inset:0;background:rgba(8,5,3,.72);backdrop-filter:blur(3px);
    display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
  .modal-bg.open{display:flex}
  .modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;
    width:100%;max-width:660px;max-height:86vh;display:flex;flex-direction:column;
    overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55)}
  .modal-head{display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;border-bottom:1px solid var(--line);
    position:sticky;top:0;background:var(--panel);flex:0 0 auto}
  .modal-head h2{margin:0;font-size:17px;font-weight:700;color:var(--gold);letter-spacing:.02em}
  .modal-close{font-size:20px;line-height:1;background:none;border:none;color:var(--ink-dim);
    cursor:pointer;padding:4px 8px;border-radius:8px;transition:color .15s,background .15s}
  @media(hover:hover){.modal-close:hover{color:var(--gold);background:rgba(244,180,60,.1)}}
  .modal-body{overflow-y:auto;padding:18px 20px 26px;-webkit-overflow-scrolling:touch;
    color:var(--ink);font-size:14px;line-height:1.75}
  .modal-body h3{color:var(--gold);font-size:15px;font-weight:700;margin:1.7em 0 .5em;letter-spacing:.02em}
  .modal-body h3:first-child{margin-top:0}
  .modal-body p{margin:.7em 0;color:var(--ink)}
  .modal-body ul{margin:.6em 0;padding-left:1.3em}
  .modal-body li{margin:.35em 0}
  .modal-body ol{margin:.6em 0;padding-left:1.4em}
  .modal-body ol li{margin:.4em 0}
  .modal-body .lead{color:var(--ink-dim);font-size:13.5px}
  .modal-body blockquote{margin:.9em 0;padding:.6em .9em;border-left:3px solid var(--gold);
    background:rgba(244,180,60,.06);border-radius:0 8px 8px 0;color:var(--ink-dim);font-size:13.5px}
  .modal-body hr{border:none;border-top:1px solid var(--line);margin:1.6em 0}

  @media (max-width:760px){
    .scrollhint{display:block}
    .wrap{padding:12px 12px 48px}
  }
  @media (max-width:600px){
    .keys{min-height:86px}
    .legend{min-height:36px}
  }

  /* ===================================================================
     Mockup redesign overrides (board-first, minimal, rotation model)
     =================================================================== */
  /* unselected controls recede into the page; only the selected one is gold */
  /* exclusive (radio-like) buttons: transparent fill, but keep an outline so they read as buttons */
  .keys button{background:transparent;border-color:var(--line)}
  @media(hover:hover){.keys button:hover{background:rgba(255,255,255,.05);color:var(--ink);border-color:#5a4632}}
  .keys button.active{background:var(--gold);color:#1a120a;border-color:var(--gold)}
  .seg button{background:transparent;border-color:var(--line)}
  @media(hover:hover){.seg button:hover{background:rgba(255,255,255,.05);border-color:#5a4632;color:var(--ink)}}
  .scalebar button{background:transparent;border-color:var(--line)}
  @media(hover:hover){.scalebar button:hover{background:rgba(255,255,255,.05);border-color:#5a4632;color:var(--ink)}}
  .cagedctl button{background:transparent;border-color:var(--line)}

  /* below-board bar: degree/note toggle (left) + scroll hint (right) */
  .belowboard{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;min-height:40px}
  .belowboard .scrollhint{display:none;margin:0}
  @media(max-width:760px){.belowboard .scrollhint{display:block}}

  /* the explanation lives in the 使い方 modal — hide the always-on legend & caption */
  #legend,#caption{display:none !important}

  /* deck spacing + lens-first */
  .modebar{align-self:flex-start}

  /* keys + picker bracketed by a single gold hairline (one indent, not a staircase) */
  .paramgroup{display:flex;flex-direction:column;align-items:flex-start;gap:13px;
    border-left:2px solid rgba(244,180,60,.22);padding-left:14px}

  /* scale picker groups: modes 1-7, then a gap, then pentatonics, then other minors */
  .scalewrap .pents,.scalewrap .others,.scalewrap .tensgroup{margin-top:11px}

  /* gold root token on each scale button — matches the gold root on the board */
  .scale-btn{display:inline-flex;align-items:center}
  .scale-btn .rn{display:inline-flex;align-items:center;justify-content:center;
    min-width:21px;height:19px;padding:0 5px;margin-left:8px;border-radius:10px;
    background:var(--gold);color:#1a120a;font-family:'Space Mono',monospace;
    font-size:11px;font-weight:700;line-height:1}
  .scale-btn .rn:empty{display:none}

  /* advanced drawer: stacked, behavior-based groups with quiet labels */
  .wrap.adv-open .adv{flex-direction:column;flex-wrap:nowrap;gap:18px}
  .advgroup{display:flex;flex-direction:column;align-items:flex-start;gap:9px;width:100%}
  .eyebrow2{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-dim);opacity:.85}

  /* overlays as on/off layer toggles (leading dot lights up) */
  .overlays{display:flex;flex-wrap:wrap;gap:8px}
  .toggle{display:inline-flex;align-items:center;gap:8px;font-family:'Outfit';font-size:13px;font-weight:600;
    padding:8px 13px;border-radius:9px;background:transparent;border:1px solid transparent;
    color:var(--ink-dim);cursor:pointer;transition:color .15s,background .15s}
  .toggle::before{content:'';width:16px;height:16px;border-radius:4px;
    border:1.5px solid var(--ink-dim);box-sizing:border-box;transition:all .15s;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'Outfit';font-size:12px;line-height:1;color:#1a120a}
  @media(hover:hover){.toggle:hover{color:var(--ink)}}
  .toggle.on{color:var(--ink)}
  .toggle.on::before{content:'✓';background:var(--gold);border-color:var(--gold)}
  .toggle:disabled{opacity:.4;cursor:not-allowed}
  .toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  /* diatonic chord cards on transparent bg (still bordered = "these are chords") */
  .dia button{background:transparent}