*{margin:0;padding:0;box-sizing:border-box}

/* === Theme: pastel dreamy — misty white + rose + soft sage-teal ======== */
:root{
  --bg:#fdf7f8;            /* 薄ーいピンク — 幻想的な淡いベース */
  --surface:#ffffff;
  --surface-hover:#e8f4f1; /* soft sage hover tint */
  --border:#ede3e5;        /* warm rose-tinted border */
  --border-soft:rgba(200,175,180,.18);
  --text:#5a4a48;
  --text-muted:#a08089;
  --text-dim:#b8a0a8;
  --accent:#e89aae;        /* pink — brand / CTA only */
  --accent-deep:#d97a90;
  --accent-soft:#f5c2cf;
  --gold:#e0a5b5;          /* rose pink (secondary) */
  --soft-beige:#f5d4dc;    /* legacy var name — pale pink */
  --mint:#68b5ae;          /* soft sage-teal — pastel, dreamy, gentle */
  --mint-soft:#9dd4cf;     /* pale sage-teal */
  --mint-deep:#3d8c86;     /* deeper sage for text / Ko-fi gradient end */
  --mint-bg:#dff2ef;       /* very soft sage tint for backgrounds */
}

body{
  font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;padding:20px;
  letter-spacing:.02em;
}

/* Page header — title block on the left, utility cluster (lang + share) on
 * the right, sharing one horizontal line. The tagline ("音楽は一生の宝")
 * sits under the title so the brand voice greets the reader. */
.page-header{
  max-width:700px;width:100%;margin:0 auto 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
}
.page-header-titles{flex:1;min-width:0}
.page-header-utils{
  display:flex;align-items:center;gap:12px;flex-shrink:0;
}
h1{
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  /* Warm rosy-brown — sits between the cream page and the deeper #5a4a48
   * chord-name brown so the title reads as warm earth rather than pink. */
  font-size:1.5rem;margin:0 0 4px;color:#7d5953;
  letter-spacing:.16em;font-weight:400;text-align:left;
}
.page-tagline{
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:0.82rem;color:#a08089;
  letter-spacing:.16em;margin:0;text-align:left;font-weight:300;
}
/* Narrow screens: stack the title block and utility row to keep both
 * readable when there isn't horizontal room for them side by side. */
@media (max-width:560px){
  .page-header{flex-direction:column;align-items:flex-start;gap:10px}
  .page-header-utils{align-self:flex-start;flex-wrap:wrap;gap:6px 10px;width:100%}
  .lang-wrap{order:1}
  .share-btn{order:2;margin-left:auto}
  .kofi-header-btn{order:3}
}
h2,h3,h4{
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-weight:500;letter-spacing:.04em;color:var(--text);
}

/* === Universal button family — same font, refined defaults =============== */
button{
  font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  letter-spacing:.04em;font-weight:500;cursor:pointer;
  transition:all .2s ease;
  -webkit-font-smoothing:antialiased;
}

/* Root selector — 7 letter buttons + 2 accidental toggle buttons. */
.root-selector{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin:0 auto 14px;padding-bottom:14px;max-width:560px;width:100%;
  border-bottom:1px solid var(--border-soft);
}
.root-letter-row{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.root-acc-row{
  display:flex;gap:8px;justify-content:center;margin-top:2px;
}
/* Root letter buttons — refined: thin border, Cormorant for the letters,
 * translucent base so they sit on the cream background without competing.
 * Active uses a soft pink fill with a subtle shadow for depth instead of
 * a flat brand-color slab. */
.root-btn{
  width:48px;height:38px;border:1px solid #ead5db;border-radius:4px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:1.05rem;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:all .2s ease;
}
.root-btn:hover{border-color:var(--mint);background:#ffffff;color:#5a4a48}
.root-btn.active{
  background:var(--mint);border-color:var(--mint);color:#fff;
  box-shadow:0 2px 8px rgba(127,255,212,.35);
}
/* Accidental toggle buttons — smaller, flatter to feel like modifiers. */
.root-acc-btn{
  width:36px;height:30px;border:1px solid #ead5db;border-radius:4px;
  background:rgba(255,255,255,.55);color:#a08089;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:1rem;font-weight:400;
  cursor:pointer;transition:all .2s ease;
}
.root-acc-btn:hover{border-color:var(--mint);background:#ffffff;color:#5a4a48}
.root-acc-btn.active{
  background:var(--mint);border-color:var(--mint);color:#fff;
  box-shadow:0 2px 8px rgba(127,255,212,.35);
}

/* Type selector */
.type-selector{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin:0 auto 14px;padding-bottom:14px;max-width:700px;width:100%;
  border-bottom:1px solid var(--border-soft);
}
.type-group{display:contents}
.type-btn{
  padding:5px 12px;border:1px solid #ead5db;border-radius:3px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:0.95rem;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:all .2s ease;
}
.type-btn:hover{border-color:var(--mint);background:#ffffff;color:#5a4a48}
.type-btn.active{
  background:var(--mint);border-color:var(--mint);color:#fff;
  box-shadow:0 2px 8px rgba(127,255,212,.35);
}

/* Root string filter */
/* Filter matrix (voicing mode + root string) */
.filter-matrix{
  margin:0 auto 14px;padding-bottom:14px;width:100%;max-width:600px;
  border-bottom:1px solid var(--border-soft);
}
.filter-row{display:flex;gap:6px;justify-content:center;align-items:center;margin-bottom:6px}
.filter-label{
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:0.82rem;color:#a08089;min-width:42px;text-align:right;margin-right:6px;letter-spacing:.08em;
}
.vm-btn{
  padding:5px 16px;border:1px solid #ead5db;border-radius:3px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:0.92rem;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:all .2s ease;
}
.vm-btn:hover{border-color:var(--mint);background:#ffffff;color:#5a4a48}
.vm-btn.active{
  background:var(--mint);color:#fff;border-color:var(--mint);
  box-shadow:0 2px 8px rgba(127,255,212,.35);
}


.rs-btn{
  padding:5px 12px;border:1px solid #ead5db;border-radius:3px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:0.88rem;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:all .2s ease;
}
.rs-btn:hover{border-color:var(--mint);background:#ffffff;color:#5a4a48}
.rs-btn.active{
  background:var(--mint);border-color:var(--mint);color:#fff;
  box-shadow:0 2px 8px rgba(127,255,212,.35);
}
.rs-btn.has-voicing:not(.active){border-color:var(--mint);color:var(--mint-deep)}
.rs-btn:not(.has-voicing):not(.active){opacity:0.35}

/* Chord display */
.chord-display{
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.chord-name{
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:3.2rem;font-weight:500;color:#7d5953;margin:8px 0 6px;
  letter-spacing:.06em;line-height:1;
}
/* Capo "actual sounding chord" indicator (under the Capo selector) */
.capo-actual{
  margin:8px 0 0;display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
}
.capo-actual:empty{display:none}
.capo-actual .capo-actual-label{
  font-size:.72rem;letter-spacing:.22em;color:#a08089;text-transform:uppercase;font-weight:400;
}
.capo-actual .capo-actual-chord{
  font-size:1.25rem;letter-spacing:.05em;color:#d97a90;font-weight:500;
}

/* Soft, motion-free fade for diagram swaps (連続再生 / ループ).
 * No translate — pure opacity so nothing visibly shifts in place.
 * `backwards` ensures the very first frame already has opacity:0,
 * so there's no flash of the new diagram before the fade begins. */
@keyframes chordFadeIn{
  from{opacity:0}
  to{opacity:1}
}
.chord-fade-in{
  animation:chordFadeIn .7s ease-in-out backwards;
  will-change:opacity;
}

/* Notes & degrees table — 6 columns, one per string. Cell centers align
 * with the diagram's string x-positions (which sit inside the SVG with
 * pL=50 left padding, pR=22 right). The diagram's string-array center is
 * 14px right of the SVG center, so we shift the centered table by the
 * same 14px. Table width = 6 × strSp = 240px. */
.chord-notes-table{
  margin:8px auto 12px;border-collapse:collapse;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  border-top:1px solid rgba(217,160,176,.25);
  border-bottom:1px solid rgba(217,160,176,.25);
  /* Width = label column (46px) + 6 × string column (40px) = 286px.
   * Original (no label) used translateX(14) to align with diagram strings.
   * Adding a label of width L shifts the auto-centered table's center by L/2,
   * so the new shift needs to be (14 - L/2) = (14 - 23) = -9px. */
  table-layout:fixed;width:286px;
  transform:translateX(-9px);
}
.chord-notes-table td{
  width:40px;padding:5px 0;text-align:center;line-height:1.3;
}
.chord-notes-table td.cnt-label{
  width:46px;padding:3px 6px 3px 0;text-align:right;
}
.chord-degrees-row td.cnt-label{border-top:1px solid rgba(217,160,176,.18)}
/* Toggle button living inside the table's row-header. Clicking it switches
 * the diagram dots between note names and degrees. Active row gets pink
 * fill so users immediately see which label set is on the diagram. */
.cnt-toggle{
  width:100%;padding:3px 4px;border:1px solid #ead5db;border-radius:3px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.72rem;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:all .2s ease;line-height:1.1;
  white-space:nowrap;
}
.cnt-toggle:hover{border-color:var(--mint);color:#5a4a48;background:#ffffff}
.cnt-toggle.active{
  background:var(--mint);border-color:var(--mint);color:#fff;
  box-shadow:0 1px 4px rgba(127,255,212,.35);
}
.chord-notes-row td{
  font-size:1.15rem;color:#7a5e64;font-weight:400;letter-spacing:.02em;
}
.chord-notes-table td.cnt-mute{color:#c4a8af;font-weight:400}
.chord-degrees-row td{
  font-size:.95rem;color:#d97a90;font-weight:500;letter-spacing:.02em;
  border-top:1px solid rgba(217,160,176,.18);
}
.chord-notes-table sup.cnp-acc{
  font-size:.6em;font-weight:500;letter-spacing:0;
  vertical-align:super;line-height:0;margin:0 1px;
}

/* Universal accidental superscript — used everywhere chord/note text appears
 * (root buttons, type buttons, chord names, capo info, finder, progression,
 * quiz, daily banner). Sharps and flats render as small upper-right marks
 * in the standard music-notation style. */
sup.acc-sup{
  font-size:.6em;font-weight:500;letter-spacing:0;
  vertical-align:super;line-height:0;margin:0 .5px;
}
/* Extension-number subscript — 7, 9, 11, 13, sus4, etc. — slightly larger
 * than the accidental superscript so the digits remain readable on small
 * buttons (per user feedback: 数字のみ少し大きく). */
sub.ext-sub{
  font-size:.72em;font-weight:500;letter-spacing:0;
  vertical-align:sub;line-height:0;margin:0 .5px;
}
/* Backwards-compat: legacy .chord-notes / .chord-degrees */
.chord-notes{font-size:1.15rem;color:#5a4a48;margin:0;font-weight:500;letter-spacing:.18em}
.chord-degrees{font-size:1.05rem;color:#d97a90;margin:4px 0 0;font-weight:500;letter-spacing:.18em}

/* Drop-shadow only on the full-size chart diagram. Compact diagrams (used in
 * Progression / Quiz / Finder, where many sit side-by-side) skip the shadow —
 * cumulative dark halos made the row feel heavy. */
svg.diagram:not(.diagram-compact){filter:drop-shadow(0 4px 16px rgba(232,154,174,.28))}

.no-chord{color:#b8a0a8;font-size:1rem;margin-top:40px}
.no-chord-suggest{color:#a08089;font-size:.85rem;margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.mode-suggest{
  padding:4px 12px;border:1px solid var(--mint);border-radius:14px;
  background:transparent;color:#fff;font-size:.85rem;font-weight:500;
  cursor:pointer;transition:all .15s;
}
.mode-suggest:hover{background:var(--mint-bg);border-color:var(--mint-deep)}

/* Voicing nav */
/* Voicing navigator — sits directly under the Play button (inside
 * .play-primary-col) so the user can step through voicings without losing
 * visual proximity to Play. Refined to match the rest of the button family
 * (thin circle, Cormorant numerals). */
.voicing-nav{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:0;
}
.voicing-nav button{
  width:28px;height:28px;border-radius:50%;border:1px solid #ead5db;
  background:rgba(255,255,255,.7);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.95rem;cursor:pointer;transition:all .2s ease;
}
.voicing-nav button:hover{border-color:#e89aae;color:#5a4a48;background:#ffffff}
.voicing-nav button:disabled{opacity:.35;cursor:default;border-color:#ead5db}
.voicing-label{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.92rem;color:#a08089;letter-spacing:.06em;min-width:48px;text-align:center;
}

/* Language toggle — sits inline at the top, near the centre rather than
 * pinned to the far-right corner so it feels balanced with the title. */
/* Language toggle — text-only, minimal. No box, just refined type with a
 * subtle underline for the active language. Matches the underline-style
 * mode tabs for visual consistency. Sits inside the page header. */
.blog-nav-link{
  margin-left:10px;
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:0.78rem;color:#a08089;letter-spacing:.10em;font-weight:300;
  text-decoration:none;white-space:nowrap;
  transition:color .2s;
}
.blog-nav-link:hover{color:#7d5953}
body.embed .blog-nav-link{display:none}
.lang-wrap{
  display:flex;gap:14px;align-items:center;
}
/* Share button — sits inside the page header utility cluster. Icon-only:
 * no label text, just the glyph at a slightly larger size for tap-target
 * comfort. Hover lifts to the accent pink. */
.share-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px;width:28px;height:28px;
  background:transparent;border:none;
  color:#a08089;
  cursor:pointer;transition:color .2s;
}
.share-btn:hover{color:#e89aae}
.share-btn:active{transform:translateY(1px)}
.share-glyph{display:block;opacity:.85}
.share-btn:hover .share-glyph{opacity:1}
body.embed .share-btn{display:none}

/* Toast — small message that appears after copy-to-clipboard (desktop). */
.share-toast{
  position:fixed;bottom:32px;left:50%;
  background:rgba(60,46,38,.92);color:#fff8ed;
  padding:10px 22px;border-radius:14px;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.85rem;letter-spacing:.1em;
  z-index:9999;pointer-events:none;
  box-shadow:0 8px 24px rgba(60,46,38,.25);
  opacity:0;
  animation:share-toast-in .3s ease forwards;
}
.share-toast.fade-out{animation:share-toast-out .5s ease forwards}
@keyframes share-toast-in{
  0%   {opacity:0;transform:translate(-50%,12px)}
  100% {opacity:1;transform:translate(-50%,0)}
}
@keyframes share-toast-out{
  0%   {opacity:1;transform:translate(-50%,0)}
  100% {opacity:0;transform:translate(-50%,-8px)}
}
.lang-btn{
  padding:2px 0;border:none;background:transparent;
  color:#b8a8a8;
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:.82rem;font-weight:400;letter-spacing:.16em;
  cursor:pointer;transition:color .2s, border-color .2s;
  border-bottom:1px solid transparent;
}
.lang-btn:hover{color:#5a4a48}
.lang-btn.active{
  color:#e89aae;border-bottom-color:#e89aae;
}
body.embed .lang-wrap{display:none}


/* Mode tabs — underline style (Hoshino-inspired). Left-aligned, minimal,
 * with a subtle base line under all tabs and an accent underline for the
 * active mode. Hover shows a soft preview underline. */
.mode-tabs{
  display:flex;gap:0;margin:0 auto 24px;
  max-width:700px;width:100%;
  border-bottom:1px solid #f0dde2;
  overflow-x:auto;
  overflow-y:hidden;
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.mode-tabs::-webkit-scrollbar{display:none}
.mode-tab{
  padding:12px 22px;border:none;background:transparent;
  color:#a08089;font-size:1rem;font-weight:500;
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  cursor:pointer;transition:color .2s, border-color .2s;
  border-bottom:2px solid transparent;
  margin-bottom:-1px; /* overlap parent's base line so the active line replaces it cleanly */
  letter-spacing:.1em;
  white-space:nowrap;
  flex-shrink:0; /* keep full width on narrow screens — overflow scrolls instead of squeezing */
}
/* Narrow screens: tighter tab padding so the row needs less horizontal scroll */
@media (max-width:520px){
  .mode-tab{padding:10px 14px;font-size:.92rem;letter-spacing:.06em}
}
.mode-tab.active{
  color:#b87a5e;border-bottom-color:#c8906a;
}
.mode-tab:hover:not(.active){
  color:#5a4a48;border-bottom-color:rgba(200,144,106,.35);
}

/* Quiz */
.quiz-area{display:flex;flex-direction:column;align-items:center;gap:16px}
/* Level selector — pill-style tabs at the top of the quiz, matching the
 * design system's pastel pinks. Active level glows with the deeper accent. */
/* Quiz top row — level buttons + meta (streak / sound) on one horizontal
 * line. Levels stay centered, meta tucks into the same row. */
.quiz-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 14px;margin-bottom:6px;
}
.quiz-levels{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
.quiz-level-btn{
  padding:5px 14px;border:1px solid #ead5db;border-radius:3px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.85rem;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:all .2s ease;
}
.quiz-level-btn:hover{border-color:var(--mint);background:#ffffff;color:#5a4a48}
.quiz-level-btn.active{
  background:var(--mint);border-color:var(--mint);color:#fff;
  box-shadow:0 2px 8px rgba(127,255,212,.35);
}
.quiz-level-desc{
  font-size:.78rem;color:var(--text-muted);letter-spacing:.04em;
  margin:-8px 0 4px;font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;
}
.quiz-question{
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:3.2rem;font-weight:500;color:#5a4a48;letter-spacing:.06em;margin:8px 0 4px;
}
.quiz-choices{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  width:100%;max-width:520px;
}
.quiz-choice{
  cursor:pointer;border:1px solid #ead5db;border-radius:6px;
  background:rgba(255,255,255,.6);padding:12px;transition:all .2s ease;
}
/* Diagrams inside the quiz choice cards — scale up to fill the card width
 * (capped by a max so very wide cards don't blow the diagram huge). */
.quiz-choice svg.diagram{
  width:100%;height:auto;display:block;
  max-width:220px;margin:0 auto;
}
.quiz-choice:hover{border-color:var(--accent);background:#ffffff}
.quiz-choice.correct{border-color:var(--mint);background:var(--mint-bg);box-shadow:0 2px 10px rgba(127,200,164,.22)}
.quiz-choice.wrong{border-color:var(--accent);background:#fcdde5;box-shadow:0 2px 10px rgba(232,154,174,.22)}
/* Chord-name label shown under each card after answering. Music-style
 * serif, mid weight. Color reflects the card status so it's always
 * readable on whatever background the card has. */
.quiz-choice-label{
  text-align:center;margin-top:8px;
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:1.05rem;font-weight:500;letter-spacing:.04em;line-height:1;
  color:var(--text);
}
.quiz-choice-label[data-status="correct"]{color:#fff;font-weight:600}
.quiz-choice-label[data-status="wrong"]{color:var(--accent-deep);font-weight:600}
.quiz-result{
  min-height:36px;
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:1.05rem;font-weight:500;letter-spacing:.16em;
}
/* After-answer row — label-mode toggle (音名 / 度数) on the left, Next on
 * the right. Sits between the result message and the choice cards. */
.quiz-after-row{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:8px;flex-wrap:wrap;
}
.quiz-label-toggle{display:flex;gap:6px}
.quiz-label-btn{
  padding:5px 14px;border:1px solid #ead5db;border-radius:3px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.82rem;font-weight:500;letter-spacing:.08em;
  cursor:pointer;transition:all .2s ease;
}
.quiz-label-btn:hover{border-color:var(--mint);background:#ffffff;color:#5a4a48}
.quiz-label-btn.active{
  background:var(--mint);border-color:var(--mint);color:#fff;
  box-shadow:0 2px 8px rgba(127,255,212,.35);
}
.quiz-result-correct,.quiz-result-wrong{
  display:inline-flex;align-items:center;gap:7px;
}
.quiz-result-correct{color:var(--mint-deep)}
.quiz-result-wrong{color:var(--accent-deep)}
.quiz-result-icon{display:inline-block;flex-shrink:0;vertical-align:middle}
/* Meta row — streak chip + sound toggle. Centered, elegant spacing. */
.quiz-meta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:8px;flex-wrap:wrap;
}
/* Streak chip — subtle text-only indicator. Same Cormorant family as the
 * level buttons it sits beside, so it reads as a status tag rather than a
 * decorative sticker. */
.quiz-streak-chip{
  display:inline-flex;align-items:center;
  padding:0 8px;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.85rem;font-weight:500;letter-spacing:.12em;
  color:#a88654;
}
/* Milestone celebration banner — luminous, slow-breathing moment.
 * Soft fade-in 1.2s → hold 6s with subtle float + shimmer → soft fade-out 1.5s.
 * Typography only (no emoji). Gold gradient text + drop-shadow glow gives a
 * "見えない波動を捉えて言葉になる" feel — the message itself carries warmth. */
.quiz-milestone{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(135deg,#fffaf2 0%,#fff 50%,#faf3e8 100%);
  border:1px solid rgba(212,168,90,.18);
  border-radius:24px;padding:34px 50px;min-width:220px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:
    0 20px 60px rgba(212,168,90,.12),
    0 0 80px rgba(245,224,164,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  z-index:9999;pointer-events:none;
  opacity:0;
  animation:
    milestone-soft-in 1.2s ease-out forwards,
    milestone-float 5s ease-in-out 1.2s infinite;
}
/* Close button — small × in the top-right corner. Pointer-events:auto so
 * users can dismiss the banner manually even though the surrounding
 * banner body itself stays click-through. */
.quiz-milestone-close{
  position:absolute;top:10px;right:14px;
  width:24px;height:24px;padding:0;
  border:none;background:transparent;
  color:#c5a572;font-size:1.25rem;line-height:1;
  cursor:pointer;pointer-events:auto;
  transition:color .2s, transform .2s;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-weight:300;
}
.quiz-milestone-close:hover{color:#8c6a30;transform:scale(1.1)}
.quiz-milestone-streak{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.78rem;color:#b09d6a;letter-spacing:.22em;
  text-transform:uppercase;font-weight:400;
}
.quiz-milestone-msg{
  font-size:1.7rem;font-weight:500;letter-spacing:.12em;line-height:1.5;
  text-align:center;
  /* Gold-gradient text with shimmer animation — the "shine" in the words. */
  background:linear-gradient(110deg,
    #c89046 0%,
    #f5dc94 25%,
    #e8c060 45%,
    #fbe8a8 60%,
    #d4a85a 80%,
    #c89046 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 10px rgba(245,224,164,.35));
  animation:milestone-shimmer 4.5s ease-in-out infinite;
}
/* Visual weight scales gently up with the streak level. */
.quiz-milestone[data-level="3"]  .quiz-milestone-msg{font-size:1.4rem}
.quiz-milestone[data-level="5"]  .quiz-milestone-msg{font-size:1.6rem}
.quiz-milestone[data-level="8"]  .quiz-milestone-msg{font-size:1.85rem}
.quiz-milestone[data-level="10"] .quiz-milestone-msg{
  font-size:2.05rem;letter-spacing:.16em;
  filter:drop-shadow(0 0 16px rgba(245,224,164,.55));
}
.quiz-milestone[data-level="10"]{
  box-shadow:
    0 24px 80px rgba(212,168,90,.18),
    0 0 100px rgba(245,224,164,.3),
    inset 0 1px 0 rgba(255,255,255,.7);
  border-color:rgba(212,168,90,.28);
}
.quiz-milestone.fade-out{
  animation:milestone-soft-out 1.5s ease-in forwards;
}
@keyframes milestone-soft-in{
  0%   {opacity:0;transform:translate(-50%,calc(-50% + 12px))}
  100% {opacity:1;transform:translate(-50%,-50%)}
}
@keyframes milestone-soft-out{
  0%   {opacity:1;transform:translate(-50%,-50%)}
  100% {opacity:0;transform:translate(-50%,calc(-50% - 12px))}
}
@keyframes milestone-float{
  0%,100% {transform:translate(-50%,-50%)}
  50%     {transform:translate(-50%,calc(-50% - 4px))}
}
@keyframes milestone-shimmer{
  0%,100% {background-position:0% center}
  50%     {background-position:100% center}
}
/* Sound toggle — minimal pill with a CSS-drawn speaker glyph (no emoji).
 * Inactive = quiet outline; active = mint fill. The glyph is built from a
 * triangle (cone) + arcs (waves) using border tricks, no images needed. */
.quiz-sound-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 14px;border:1px solid #ead5db;border-radius:3px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.82rem;font-weight:500;letter-spacing:.06em;
  cursor:pointer;transition:all .2s ease;
}
.quiz-sound-btn:hover{border-color:var(--mint);color:#fff;background:#ffffff}
.quiz-sound-btn.active{
  background:var(--mint);border-color:var(--mint);color:#fff;
  box-shadow:0 2px 8px rgba(127,200,164,.22);
}
.quiz-sound-btn.active .quiz-sound-glyph{color:#fff}
.quiz-sound-glyph{
  position:relative;display:inline-block;width:14px;height:12px;
}
/* Speaker cone — small triangle pointing right */
.quiz-sound-glyph::before{
  content:'';position:absolute;left:0;top:2px;
  width:0;height:0;
  border:4px solid transparent;
  border-left-color:currentColor;border-right:none;
  border-radius:1px;
}
/* Sound wave arc — circle outline on the right */
.quiz-sound-glyph::after{
  content:'';position:absolute;left:7px;top:0;
  width:8px;height:12px;
  border:1.5px solid currentColor;border-radius:50%;
  border-left-color:transparent;border-bottom-color:transparent;
  transition:opacity .2s;
}
/* When sound is off (no .active), hide the wave arc */
.quiz-sound-btn:not(.active) .quiz-sound-glyph::after{
  opacity:0;
}
/* Replace with a "muted" diagonal line for off state */
.quiz-sound-btn:not(.active) .quiz-sound-glyph::before{
  /* Speaker cone with strikethrough handled by an extra line via box-shadow */
  box-shadow:8px 0 0 -3px currentColor,9px 1px 0 -3px currentColor,10px 2px 0 -3px currentColor,11px 3px 0 -3px currentColor;
}
/* Correct answer flash */
@keyframes quizFlash {
  0%{background:rgba(168,216,200,0.3)}
  100%{background:transparent}
}
.quiz-flash-correct{animation:quizFlash 0.6s ease-out}
.quiz-next{
  margin:0;padding:7px 22px;border:1px solid #e89aae;border-radius:4px;
  background:rgba(255,255,255,.7);color:var(--accent-deep);
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.92rem;font-weight:500;letter-spacing:.12em;
  cursor:pointer;transition:all .2s ease;
  box-shadow:0 2px 8px rgba(217,122,144,.1);
}
.quiz-next:hover{
  background:#e89aae;color:#fff;
  box-shadow:0 3px 12px rgba(217,122,144,.2);
}

/* Capo selector — label and buttons share one horizontal row to keep the
 * section compact. Refined to match the rest of the button family: thin
 * border, translucent base, Cormorant for the numbers. */
.capo-key-section{
  margin-top:10px;padding:8px 0 4px;border-top:1px solid #f0dde2;
}
.capo-selector{
  display:flex;flex-direction:row;gap:10px;margin-bottom:0;align-items:center;
  width:100%;justify-content:center;
}
.capo-label{
  font-size:0.78rem;color:#a08089;flex-shrink:0;letter-spacing:.06em;
}
.capo-btns{
  display:flex;gap:3px;align-items:center;justify-content:flex-start;
  /* Cap to viewport width so 15 buttons can overflow internally instead
     of pushing ancestors (#chartMode, etc.) wider than the viewport. */
  max-width:calc(100vw - 24px);min-width:0;
  overflow-x:auto;
  padding:2px;box-sizing:border-box;
  scrollbar-width:thin;scrollbar-color:#f0dde2 transparent;
  scroll-snap-type:x proximity;
}
.capo-btns::-webkit-scrollbar{height:4px}
.capo-btns::-webkit-scrollbar-thumb{background:#f0dde2;border-radius:2px}
.capo-divider{
  display:inline-block;width:1px;height:18px;background:#f0dde2;flex-shrink:0;
}
.capo-btn{
  width:28px;height:26px;border:1px solid #ead5db;border-radius:3px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:0.85rem;font-weight:500;
  cursor:pointer;transition:all .2s ease;
  flex-shrink:0;scroll-snap-align:center;
}
/* Negative capo (down-tuning) — light blue */
.capo-btn.neg{background:rgba(234,243,250,.65);border-color:#cfe1ef;color:#446a85}
.capo-btn.neg:hover{border-color:#7fb3d4;background:#eaf3fa}
.capo-btn.neg.active{background:#7fb3d4;border-color:#7fb3d4;color:#fff;box-shadow:0 2px 8px rgba(127,179,212,.22)}
/* Zero — mint accent for default position */
.capo-btn.zero{background:rgba(232,245,238,.65);border-color:#bfe0cd;color:#3a7a55}
.capo-btn.zero:hover{border-color:#7fc8a4;background:#e8f5ee}
.capo-btn.zero.active{background:#7fc8a4;border-color:#7fc8a4;color:#fff;box-shadow:0 2px 8px rgba(127,200,164,.22)}
/* High capo (8-11) — neutral grey */
.capo-btn.high{background:rgba(245,243,244,.65);border-color:#e0d8db;color:#7a6b70}
.capo-btn.high:hover{border-color:#b09da3;background:#f5f3f4}
.capo-btn.high.active{background:#b09da3;border-color:#b09da3;color:#fff;box-shadow:0 2px 8px rgba(176,157,163,.22)}
/* Default 1-7 keeps pink */
.capo-btn:hover{border-color:#e89aae;background:#ffffff}
.capo-btn.active{background:#e89aae;border-color:#e89aae;color:#fff;box-shadow:0 2px 8px rgba(232,154,174,.22)}
.capo-info{font-size:0.82rem;color:#e89aae;margin-top:2px;letter-spacing:.04em}

/* Finder */
.finder-area{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:1100px}
.finder-grid{display:flex;flex-direction:column;gap:20px;width:100%;align-items:center}
.finder-col-left,.finder-col-right{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  width:100%;max-width:400px;min-width:0;
}
/* モバイル: 結果はダイアグラムの上に表示、右カラムの結果は非表示 */
.finder-result-top{width:100%;max-width:400px;text-align:center}
.finder-result-side{display:none}
@media (min-width:900px){
  .finder-grid{
    display:grid;
    grid-template-columns:minmax(360px,420px) minmax(0,1fr);
    align-items:start;justify-items:center;gap:48px;
    max-width:1100px;
  }
  /* PC: グリッドの3列目にならないよう上部の結果を非表示にして右カラムに表示 */
  .finder-result-top{display:none}
  .finder-result-side{display:block}
  .finder-col-right{max-width:560px;align-items:stretch}
}
.finder-board,.finder-controls,.finder-results{width:100%}
.finder-toggle-sep{display:inline-block;width:1px;height:16px;background:#e0cdd2;margin:0 2px;vertical-align:middle}
.finder-board-outer{display:flex;align-items:flex-start;gap:6px;width:100%}
.finder-shift-col{
  display:flex;flex-direction:column;gap:28px;flex-shrink:0;
  position:sticky;top:40vh;
}
.finder-shift-svg-btn{
  width:36px;height:56px;border-radius:8px;
  border:1.8px solid #e6c9a8;background:#ead9cc;color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;
}
.finder-shift-svg-btn:disabled{opacity:.3;cursor:default}
.finder-shift-svg-btn:hover:not(:disabled){background:#d4b898;border-color:#d4b898}
.finder-board-col{display:flex;flex-direction:column;flex:1;min-width:0}
.finder-header{display:block;cursor:pointer;border-radius:8px 8px 0 0;overflow:hidden}
.finder-board-wrap{
  width:100%;overflow-y:auto;max-height:260px;
  border-radius:0 0 8px 8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:#f0dde2 transparent;
}
.finder-board-wrap::-webkit-scrollbar{width:4px}
.finder-board-wrap::-webkit-scrollbar-thumb{background:#f0dde2;border-radius:2px}
@media (min-width:900px){
  .finder-board-wrap{max-height:365px}
}
@media (max-width:600px){
  .finder-col-left .finder-board{max-width:300px}
}
.finder-board{cursor:pointer}
.finder-barre-line{animation:finderBarreFade .45s ease-out}
@keyframes finderBarreFade{from{opacity:0}to{opacity:.45}}
.finder-controls{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;justify-content:center}
.finder-controls > button{
  height:38px;padding:0 16px;margin:0;border-radius:4px;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:0.92rem;font-weight:500;letter-spacing:.08em;
  cursor:pointer;transition:all .2s ease;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
}
.finder-clear{
  padding:0 18px;border:1px solid #d97a90;
  background:rgba(255,255,255,.6);color:#c89098;
}
.finder-clear:hover{background:#d97a90;color:#fff}
.finder-play-btn{
  margin:0;padding:0 20px;border:1px solid #e89aae;
  background:rgba(255,255,255,.7);color:var(--accent-deep);
  box-shadow:0 2px 8px rgba(217,122,144,.1);
}
.finder-play-btn:hover{background:#e89aae;color:#fff;box-shadow:0 3px 12px rgba(217,122,144,.2)}
.finder-add-btn{
  margin:0;padding:0 16px;border:1px solid #e89aae;
  background:rgba(255,255,255,.6);color:#c89098;
}
.finder-add-btn:hover{background:#e89aae;color:#fff}
.finder-add-btn:disabled{opacity:.55;cursor:default;background:rgba(255,255,255,.55);color:#c89098}
.finder-prog-section{margin-top:24px;padding-top:20px;border-top:1px solid #f0dde2;width:100%}
.finder-prog-heading{
  font-size:0.85rem;color:#e89aae;letter-spacing:.08em;
  text-align:center;margin-bottom:12px;text-transform:uppercase;
}
.finder-save-btn{
  margin:0;padding:0 16px;border:1px solid #e0a5b5;
  background:rgba(255,255,255,.6);color:#c89098;
}
.finder-save-btn:hover{background:#e0a5b5;color:#fff}

/* My Chords library — personal collection of saved fingerings */
.my-chords-section{
  margin-top:24px;padding-top:20px;border-top:1px solid #f0dde2;width:100%;
}
.my-chords-heading{
  font-size:0.85rem;color:#e0a5b5;letter-spacing:.08em;
  text-align:center;margin-bottom:12px;text-transform:uppercase;
}
.my-chords-empty{
  text-align:center;font-size:0.8rem;color:#b8a0a8;padding:8px;
}
.my-chords-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:8px;width:100%;
}
.my-chord-card{
  position:relative;background:rgba(255,255,255,.6);border:1px solid #ead5db;border-radius:5px;
  padding:8px 6px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:all .2s ease;
}
.my-chord-card:hover{border-color:#e0a5b5;background:#ffffff}
.my-chord-name{
  font-size:.8rem;font-weight:600;color:#e0a5b5;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.my-chord-diagram{cursor:pointer;width:100%}
.my-chord-diagram svg{width:100%;height:auto;display:block}
.my-chord-actions{display:flex;gap:4px;width:100%}
.my-chord-add,.my-chord-delete{
  flex:1;padding:3px 0;border:1px solid #f0dde2;border-radius:4px;
  background:#ffffff;color:#a08089;font-size:.85rem;cursor:pointer;
  transition:all .15s;line-height:1;
}
.my-chord-add:hover{border-color:#e89aae;color:#e89aae;background:#fce8ef}
.my-chord-delete:hover{border-color:#e89aae;color:#e89aae}
.finder-results{
  text-align:center;min-height:60px;
}
.finder-chord-name{
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:3.6rem;font-weight:500;color:#5a4a48;letter-spacing:.05em;line-height:1;
}
/* Wrapper hosts the ← back button + chord-name as flex siblings. Keeping the
 * flex layout OFF the chord-name itself preserves <sup>/<sub> rendering of
 * accidentals and tensions inside the title. */
.finder-result-header{display:inline-flex;align-items:center;gap:14px}
/* Back arrow next to the chord title — visible only after the user has
 * navigated through candidates. Subtle so it doesn't compete with the title. */
.finder-back{
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(212,192,152,.4);background:rgba(255,255,255,.7);color:#7a5e64;
  font-size:1.1rem;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s ease;
}
.finder-back:hover{border-color:#7d5953;color:#5a4a48;background:#ffffff}
/* Note / degree toggle row — sits ABOVE the fretboard, aligned over the
 * string-number labels (6弦, 5弦, …). Same .cnt-toggle pill style as Chart. */
.finder-label-toggle{display:flex;justify-content:center;gap:6px;margin:0 0 6px}
.finder-label-toggle .cnt-toggle{width:auto;padding:3px 14px}
.finder-candidates{font-size:0.9rem;color:#a08089;margin-top:4px}
/* Candidate chord — hoverable preview, clickable to jump to Chart mode. */
.finder-candidate{
  cursor:pointer;padding:2px 6px;border-radius:4px;
  color:var(--accent-deep);transition:background .15s, color .15s;
}
.finder-candidate:hover{background:var(--surface-hover);color:var(--accent-deep)}
/* Preview area below the candidates — fades in compact diagram on hover. */
.finder-candidate-preview{
  display:flex;justify-content:center;margin:14px auto 0;
  min-height:0;max-width:240px;
  opacity:0;transition:opacity .35s ease-in-out;pointer-events:none;
}
.finder-candidate-preview.show{opacity:1}
.finder-candidate-preview svg{display:block}

/* Tuner */
.tuner-area{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:500px}
.tuner-note{font-size:4.5rem;font-weight:700;color:#7d5953;min-height:60px;margin-top:10px;transition:all .3s;font-family:'Cormorant Garamond','Noto Serif JP',serif}
.tuner-note.in-tune{color:#fff;font-size:5.5rem;text-shadow:0 0 20px rgba(127,200,164,.6),0 0 40px rgba(127,200,164,.35);transform:scale(1.1)}
.tuner-freq{font-size:1rem;color:var(--text-muted);transition:all .3s}
.tuner-freq.in-tune{color:#fff;font-size:1.1rem}
.tuner-status{font-size:1.2rem;font-weight:600;min-height:30px;transition:all .3s}
.tuner-status.in-tune{font-size:1.8rem;color:var(--mint-deep) !important;text-shadow:0 0 15px rgba(127,200,164,.45)}
.tuner-area.in-tune{background:radial-gradient(circle at center,rgba(127,200,164,.12) 0%,transparent 70%);border-radius:20px}
@keyframes tunerPulse{0%,100%{box-shadow:0 0 0 0 rgba(127,200,164,0)}50%{box-shadow:0 0 40px 10px rgba(127,200,164,.2)}}
.tuner-area.in-tune{animation:tunerPulse 1.5s ease-in-out infinite}
.tuner-strings{
  display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap;
}
.tuner-string{
  padding:10px 10px 7px;border:1px solid #ead5db;border-radius:5px;
  background:rgba(255,255,255,.6);
  color:var(--text);font-size:0.85rem;text-align:center;min-width:64px;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  transition:all .3s ease;box-shadow:0 1px 4px rgba(217,160,176,.12);
}
.tuner-string .str-name{font-size:1.15rem;font-weight:500;margin:4px 0 2px;letter-spacing:.04em}
.tuner-string .str-hz{font-size:0.7rem;color:var(--text-muted);letter-spacing:.04em}
.tuner-string.active{
  border-color:var(--mint);color:#fff;background:#ffffff;
  box-shadow:0 0 14px rgba(127,200,164,.3);
}
.tuner-a4{
  display:flex;align-items:center;gap:8px;margin-top:-4px;
}
.tuner-a4 span{font-size:0.78rem;color:var(--text-muted);letter-spacing:.06em}
.tuner-a4 button{
  width:24px;height:24px;border:1px solid #ead5db;border-radius:50%;
  background:rgba(255,255,255,.7);color:#7a5e64;font-size:.85rem;cursor:pointer;
  transition:all .2s ease;display:flex;align-items:center;justify-content:center;
}
.tuner-a4 button:hover{border-color:#e89aae;color:#5a4a48}
.tuner-a4 .a4-val{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:1.05rem;font-weight:500;color:#e0a5b5;min-width:50px;text-align:center;letter-spacing:.04em;
}
.tuner-start{
  padding:9px 26px;border:1px solid #e89aae;border-radius:4px;
  background:rgba(255,255,255,.7);color:var(--accent-deep);
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.95rem;font-weight:500;letter-spacing:.12em;
  cursor:pointer;transition:all .2s ease;
  box-shadow:0 2px 8px rgba(217,122,144,.1);
}
.tuner-start:hover{background:#e89aae;color:#fff;box-shadow:0 3px 12px rgba(217,122,144,.2)}
.tuner-start.active{background:#e89aae;border-color:#e89aae;color:#fff;box-shadow:0 2px 8px rgba(232,154,174,.22)}

/* Primary action: Play. Slightly larger, refined Cormorant label, soft
 * shadow gives it presence without shouting. */
.play-btn{
  margin-top:12px;padding:9px 26px;border:1px solid var(--accent);border-radius:4px;
  background:rgba(255,255,255,.7);color:var(--accent-deep);
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.95rem;font-weight:500;letter-spacing:.12em;
  cursor:pointer;transition:all .2s ease;
  box-shadow:0 2px 8px rgba(217,122,144,.1);
  display:inline-flex;align-items:center;gap:7px;
}
.play-btn:hover{
  background:var(--accent);color:#fff;
  box-shadow:0 3px 12px rgba(217,122,144,.2);
}
.play-btn:active{transform:scale(.97)}

/* Auto-play controls (連続 / ループ / リピート) — secondary, tucked.
 * Same serif family as Play so the row reads as one harmonious set.
 * align-items:flex-start so the secondary buttons stay at the top edge
 * even when the primary column has the voicing nav stacked below Play. */
.play-row{display:flex;gap:8px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
/* Primary column: Play stacked above the voicing nav. The nav sits
 * directly below Play so users can step through voicings without losing
 * visual proximity to the action that plays them. */
.play-primary-col{
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
}
.play-btn-secondary{
  margin-top:12px;padding:7px 14px;border:1px solid #ead5db;border-radius:4px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.85rem;font-weight:500;letter-spacing:.08em;
  cursor:pointer;transition:all .2s ease;
  display:inline-flex;align-items:center;gap:6px;
}
.play-btn-secondary:hover{border-color:var(--accent);background:#ffffff;color:#5a4a48}
.play-btn-secondary.active{
  background:var(--mint);border-color:var(--mint);color:#fff;
  box-shadow:0 2px 8px rgba(127,200,164,.22);
}
.play-btn-secondary:active{transform:scale(.97)}

/* Inline icon used by the play row (Play / 連続 / ループ / リピート / 停止).
 * Sits vertically centered with the text label. */
.play-icon{
  display:inline-block;flex-shrink:0;vertical-align:middle;
  opacity:.92;transition:opacity .2s;
}
.play-btn:hover .play-icon,
.play-btn-secondary:hover .play-icon{opacity:1}

@media(max-width:480px){
  h1{font-size:1.2rem}
  .root-btn{width:44px;height:36px;font-size:.8rem}
  .type-btn{padding:5px 10px;font-size:.75rem}
  .chord-name{font-size:1.4rem}
  .finder-chord-name{font-size:2.5rem}
}

/* Diatonic chord section (shown under the main chord in Chart mode) */
.diatonic-section{
  margin-top:28px;padding:14px 16px;background:#ffffff;border-radius:12px;
  width:100%;max-width:560px;box-sizing:border-box;
}
.diatonic-header{
  display:flex;gap:10px;align-items:center;justify-content:center;
  margin-bottom:12px;flex-wrap:wrap;
}
.diatonic-title{font-size:.8rem;color:#a08089;letter-spacing:.5px}
.dia-key-btn{
  padding:4px 12px;border:1px solid #f0dde2;border-radius:4px;
  background:#ffffff;color:#a08089;font-size:.72rem;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.dia-key-btn:hover{border-color:#e0a5b5;color:#5a4a48}
.dia-key-btn.active{background:#e0a5b5;border-color:#e0a5b5;color:#fff}
.diatonic-chords{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
.dia-chord{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 10px 7px;background:#ffffff;border:2px solid #f0dde2;border-radius:8px;
  cursor:pointer;transition:all .15s;min-width:54px;
}
.dia-chord:hover{border-color:#e0a5b5;background:#fce8ec}
.dia-chord.current{border-color:#e89aae;background:#fce8ef}
.dia-roman{font-size:.65rem;color:#a08089;line-height:1}
.dia-label{font-size:.9rem;font-weight:600;color:var(--accent-deep);line-height:1.2}
.dia-add{
  position:absolute;top:-7px;right:-7px;width:18px;height:18px;
  border-radius:50%;border:none;background:var(--mint);color:#fff;
  font-size:.75rem;font-weight:700;cursor:pointer;line-height:1;
  display:none;align-items:center;justify-content:center;padding:0;
}
.dia-chord:hover .dia-add{display:flex}
.dia-add:hover{background:var(--mint-deep)}

/* Progression mode */
.progression-area{
  display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:1300px;
}
/* Grid layout: 8 slots per row on desktop (= 4 bars × 2 chords),
   4 per row on tablet, 2 per row on phone. Bar separator every 2 cols. */
.prog-slots{
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;padding:14px;background:#ffffff;border-radius:12px;width:100%;
  min-height:120px;box-sizing:border-box;
}
@media(min-width:520px){ .prog-slots{grid-template-columns:repeat(4, minmax(0, 1fr))} }
@media(min-width:720px){ .prog-slots{grid-template-columns:repeat(8, minmax(0, 1fr))} }
/* Finder's embedded progression sits inside a narrow right column. The
 * default 8-column desktop grid makes each slot too small to read at that
 * width — cap it at 4 columns so the diagrams stay legible. */
#finderProgressionArea .prog-slots{grid-template-columns:repeat(2, minmax(0, 1fr))}
@media(min-width:520px){ #finderProgressionArea .prog-slots{grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media(min-width:720px){ #finderProgressionArea .prog-slots{grid-template-columns:repeat(4, minmax(0, 1fr))} }
/* Bar separator: vertical line after every chord that completes a bar.
   The .bar-end class is added in JS based on cumulative beats so the
   line falls in the right place in 4/4 (typically every 2 slots) and
   3/4 (typically every 1 slot). */
.prog-slots .prog-slot.bar-end{margin-right:6px}
.prog-slots .prog-slot.bar-end::after{
  content:'';position:absolute;right:-5px;top:0;bottom:0;
  width:2px;background:#f5d4dc;opacity:.35;pointer-events:none;border-radius:1px;
}
.prog-slot{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 4px 4px;background:rgba(255,255,255,.6);
  /* Pale champagne-gold border with low alpha — softer than pink/mauve. */
  border:1px solid rgba(212, 192, 152, .32);
  border-radius:5px;
  cursor:grab;transition:all .2s ease;min-width:0;
}
.prog-slot svg{width:100%;height:auto;max-width:100%;display:block}
.prog-slot:active{cursor:grabbing}
.prog-slot:hover{border-color:#e89aae;background:#ffffff}
/* Custom slots (Finder-injected fingerings) use the same soft styling as
 * regular chord slots — heavy pink borders / labels were too loud. */
.prog-slot.current{border-color:#f5c2cf;background:#e0a5b5;box-shadow:0 0 0 2px rgba(245,210,222,.7), 0 0 16px rgba(232,154,174,.5), 0 0 32px rgba(232,154,174,.3)}
.prog-slot.current .prog-slot-label{color:#fff}
.prog-slot.dragging{opacity:.35}
.prog-slot.drag-over{border-color:#e89aae;background:#fce8ef;transform:translateY(-2px)}
.prog-slot-add.drag-over{border-color:#e89aae;color:#e89aae;background:#fce8ef}
.prog-slot-label{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:1rem;font-weight:500;color:#5a4a48;
  line-height:1.1;text-align:center;letter-spacing:.04em;
}
.prog-slot-roman{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.7rem;color:var(--text-muted);
  letter-spacing:.04em;line-height:1;margin-bottom:1px;text-align:center;
}
/* Progression info row — preset name + auto-detected key, above the slots. */
.prog-info{
  display:flex;gap:18px;justify-content:center;align-items:center;
  flex-wrap:wrap;margin-bottom:10px;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;letter-spacing:.04em;
}
.prog-info-name{
  color:var(--accent-deep);font-weight:500;font-size:1rem;
}
.prog-info-key{
  color:var(--text-muted);font-size:.9rem;
}
.prog-slot-nochord{font-size:1.2rem;color:#b8a0a8;padding:20px 0}
.prog-slot-remove{
  position:absolute;top:-4px;right:-4px;width:14px;height:14px;
  border-radius:50%;border:1px solid #ead5db;background:rgba(255,255,255,.9);color:#b8a0a8;
  font-size:.6rem;font-weight:500;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:.55;transition:all .15s ease;
}
.prog-slot:hover .prog-slot-remove{opacity:1}
.prog-slot-remove:hover{background:#e89aae;border-color:#e89aae;color:#fff}
.prog-slot-beats{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  min-width:22px;height:18px;padding:0 6px;
  border-radius:9px;border:1px solid #f0dde2;background:#ffffff;color:#e89aae;
  font-size:.7rem;font-weight:700;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.prog-slot-beats:hover{background:#fce8ec;border-color:#e89aae}
/* Voicing cycle (↻) — bottom-right of slot, mirrors the bottom-center beats
 * pill. Same subtle treatment as the corner buttons; turns mint green when
 * the slot has a manually-chosen voicing so users can spot which slots have
 * been hand-tuned away from the auto-optimiser. */
.prog-slot-cycle{
  position:absolute;bottom:-4px;right:-4px;width:14px;height:14px;
  border-radius:50%;border:1px solid rgba(212,192,152,.4);background:rgba(255,255,255,.9);color:#b8a0a8;
  font-size:.65rem;font-weight:500;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:.55;transition:all .15s ease;
}
.prog-slot:hover .prog-slot-cycle{opacity:1}
.prog-slot-cycle:hover{background:#7fc8a4;border-color:#7fc8a4;color:#fff}
.prog-slot-cycle.chosen{opacity:1;background:#a8d8c8;border-color:#7fc8a4;color:#fff}

/* Voicing picker — modal grid that lets the user scan all playable voicings
 * for a slot and tap to pick one. Larger diagrams than the slot itself so
 * fingerings are easy to read at a glance. */
.voicing-picker-backdrop{
  position:fixed;inset:0;z-index:1000;background:rgba(60,46,38,.45);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.voicing-picker{
  background:#fdf8f5;border-radius:8px;
  border:1px solid rgba(212,192,152,.4);
  box-shadow:0 12px 36px rgba(60,46,38,.25);
  max-width:min(720px, 100%);max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
}
.voicing-picker-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid rgba(212,192,152,.3);
}
.voicing-picker-title{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:1.4rem;font-weight:500;color:#5a4a48;letter-spacing:.04em;
}
.voicing-picker-close{
  width:28px;height:28px;border-radius:50%;border:1px solid rgba(212,192,152,.4);
  background:rgba(255,255,255,.7);color:#7a5e64;font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
  transition:all .15s ease;
}
.voicing-picker-close:hover{background:#e89aae;border-color:#e89aae;color:#fff}
.voicing-picker-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:10px;padding:16px;overflow-y:auto;
}
.voicing-option{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(212,192,152,.3);border-radius:6px;
  padding:6px 4px;cursor:pointer;transition:all .15s ease;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.voicing-option:hover{border-color:#e89aae;background:#ffffff}
.voicing-option.active{border-color:#7fc8a4;background:rgba(168,216,200,.18);box-shadow:0 0 0 2px rgba(127,200,164,.3)}
.voicing-option svg{width:100%;height:auto;display:block}
.voicing-option-label{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.85rem;color:#7a5e64;letter-spacing:.04em;
}
.voicing-auto{justify-content:center;min-height:120px}
.prog-slot-dup{
  position:absolute;top:-4px;left:-4px;width:14px;height:14px;
  border-radius:50%;border:1px solid #ead5db;background:rgba(255,255,255,.9);color:#b8a0a8;
  font-size:.55rem;font-weight:500;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:.55;transition:all .15s ease;
}
.prog-slot:hover .prog-slot-dup{opacity:1}
.prog-slot-dup:hover{background:#e0a5b5;border-color:#e0a5b5;color:#fff}
.prog-slot-add{
  min-width:0;min-height:80px;border:1px dashed #d8c5cc;border-radius:5px;
  background:transparent;color:#b8a0a8;font-size:1.4rem;font-weight:300;
  cursor:pointer;transition:all .2s ease;
}
.prog-slot-add:hover{border-color:#e89aae;color:#e89aae}

.prog-controls{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;
}
.prog-bpm,.chart-bpm,.prog-mvol{
  display:inline-flex;align-items:center;gap:10px;padding:5px 12px;
  background:rgba(255,255,255,.55);border:1px solid #ead5db;border-radius:4px;
}
.prog-mvol{gap:8px;padding:5px 10px}
.prog-mvol .prog-mvol-label{font-size:.78rem;color:var(--text-muted);letter-spacing:.06em}
.prog-mvol .prog-mvol-val{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:1rem;font-weight:500;color:#7fc8a4;min-width:28px;text-align:center;letter-spacing:.04em;
}
.prog-mvol button{
  width:22px;height:22px;border-radius:50%;border:1px solid #ead5db;
  background:rgba(255,255,255,.7);color:#7a5e64;font-size:.8rem;cursor:pointer;
  transition:all .2s ease;
}
.prog-mvol button:hover:not(:disabled){border-color:#7fc8a4;color:#5a4a48}
.prog-mvol button:disabled{opacity:.4;cursor:not-allowed}
/* When the chart-bpm sits inside the .play-row (inline with Play / 連続 / etc.)
 * align its top edge with the secondary buttons (which carry margin-top:12px). */
.play-row .chart-bpm{margin-top:12px}
.prog-bpm span,.chart-bpm-label{font-size:.78rem;color:var(--text-muted);letter-spacing:.06em}
.prog-bpm .prog-bpm-val,.chart-bpm-val{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:1.05rem;font-weight:500;color:#e0a5b5;min-width:32px;text-align:center;letter-spacing:.04em;
}
.prog-bpm button,.chart-bpm-btn{
  width:24px;height:24px;border-radius:50%;border:1px solid #ead5db;
  background:rgba(255,255,255,.7);color:#7a5e64;font-size:.85rem;cursor:pointer;
  transition:all .2s ease;
}
.prog-bpm button:hover,.chart-bpm-btn:hover{border-color:#e89aae;color:#5a4a48}

.prog-timesig{
  display:flex;align-items:center;gap:6px;padding:5px 10px;
  background:rgba(255,255,255,.55);border:1px solid #ead5db;border-radius:4px;
}
.prog-timesig > span{font-size:.8rem;color:var(--text-muted)}
.prog-ts-btn{
  padding:3px 9px;border-radius:3px;border:1px solid #ead5db;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.88rem;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:all .2s ease;
}
.prog-ts-btn:hover{border-color:#e89aae;color:#e89aae;background:#ffffff}
.prog-ts-btn.active{background:#e89aae;color:#fff;border-color:#e89aae;box-shadow:0 2px 8px rgba(232,154,174,.22)}

.prog-play{
  padding:9px 26px;border:1px solid #e89aae;border-radius:4px;
  background:rgba(255,255,255,.7);color:var(--accent-deep);
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.95rem;font-weight:500;letter-spacing:.12em;
  cursor:pointer;transition:all .2s ease;
  box-shadow:0 2px 8px rgba(217,122,144,.1);
  display:inline-flex;align-items:center;gap:7px;
}
.prog-play:hover{
  background:#e89aae;color:#fff;
  box-shadow:0 3px 12px rgba(217,122,144,.2);
}

.prog-loop,.prog-clear,.prog-share,.prog-save,.prog-metronome{
  padding:7px 14px;border:1px solid #ead5db;border-radius:4px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.85rem;font-weight:500;letter-spacing:.08em;
  cursor:pointer;transition:all .2s ease;
}
.prog-loop:hover,.prog-clear:hover,.prog-share:hover,.prog-save:hover,.prog-metronome:hover{border-color:#e89aae;color:#5a4a48;background:#ffffff}
.prog-loop.active,.prog-metronome.active{background:var(--mint);border-color:var(--mint);color:#fff;box-shadow:0 2px 8px rgba(127,200,164,.22)}
.prog-share{border-color:#e0a5b5;color:#c89098}
.prog-share:hover{background:#e0a5b5;color:#fff;border-color:#e0a5b5}
.prog-save{border-color:#e89aae;color:#c89098}
.prog-save:hover{background:#e89aae;color:#fff;border-color:#e89aae}
.prog-save:disabled{opacity:.4;cursor:default;background:rgba(255,255,255,.55);color:#a08089;border-color:#ead5db}

.prog-library{
  display:flex;flex-direction:column;gap:6px;padding:12px;width:100%;
  background:rgba(255,255,255,.5);border:1px solid #ead5db;border-radius:6px;
}
.prog-library-header{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  flex-wrap:wrap;margin-bottom:4px;
}
.prog-library-label{
  font-size:.8rem;color:#e89aae;letter-spacing:1px;
}
.prog-library-actions{display:flex;gap:6px;flex-wrap:wrap}
.prog-library-export,.prog-library-import{
  padding:4px 10px;border:1px solid #ead5db;border-radius:3px;
  background:rgba(255,255,255,.55);color:#c89098;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.78rem;font-weight:500;letter-spacing:.06em;
  cursor:pointer;transition:all .2s ease;
}
.prog-library-export:hover,.prog-library-import:hover{
  border-color:#e89aae;color:#e89aae;background:#ffffff;
}
.prog-library-export:disabled{opacity:.4;cursor:default}
.prog-library-empty{text-align:center;font-size:.8rem;color:#b8a0a8;padding:8px 4px}
.prog-library-item{
  display:flex;gap:6px;align-items:stretch;
}
.prog-library-load{
  flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:7px 12px;border:1px solid #ead5db;border-radius:4px;
  background:rgba(255,255,255,.55);color:#5a4a48;font-size:.9rem;cursor:pointer;
  transition:all .2s ease;text-align:left;
}
.prog-library-load:hover{border-color:#e89aae;background:#ffffff}
.prog-library-name{font-weight:500}
.prog-library-meta{font-size:.72rem;color:#a08089;font-weight:400;letter-spacing:.04em}
.prog-library-share,.prog-library-rename,.prog-library-delete{
  width:34px;border:1px solid #ead5db;border-radius:4px;
  background:rgba(255,255,255,.55);color:#a08089;font-size:.95rem;cursor:pointer;
  transition:all .2s ease;
}
.prog-library-share:hover{border-color:#e89aae;color:#e89aae}
.prog-library-rename:hover{border-color:#e0a5b5;color:#e0a5b5}
.prog-library-delete:hover{border-color:#e89aae;color:#e89aae}

.prog-shared-banner{
  width:100%;padding:8px 14px;border-radius:8px;
  background:var(--mint-bg);border:1px solid var(--mint);
  color:#fff;font-size:.9rem;text-align:center;font-weight:600;
}

/* Key transposer — root-selector style below controls */
.prog-key-wrap{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0 4px;width:100%;
}
.prog-key-label{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.78rem;color:#a08089;letter-spacing:.14em;white-space:nowrap;
  flex-shrink:0;padding-top:7px;
}
.prog-key-selector{display:flex;flex-direction:column;gap:6px}
.prog-key-letter-row{display:flex;gap:6px}
.prog-key-acc-row{display:flex;gap:6px;justify-content:center}
.prog-key-letter-btn{
  width:40px;height:34px;border:1px solid #ead5db;border-radius:4px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:1rem;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:all .2s ease;
}
.prog-key-letter-btn:hover{border-color:var(--mint);background:#fff;color:#5a4a48}
.prog-key-letter-btn.active{background:var(--mint);border-color:var(--mint);color:#fff;box-shadow:0 2px 8px rgba(104,181,174,.3)}
.prog-key-acc-btn{
  width:34px;height:28px;border:1px solid #ead5db;border-radius:4px;
  background:rgba(255,255,255,.55);color:#a08089;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.9rem;font-weight:400;
  cursor:pointer;transition:all .2s ease;
}
.prog-key-acc-btn:hover{border-color:var(--mint);background:#fff;color:#5a4a48}
.prog-key-acc-btn.active{background:var(--mint);border-color:var(--mint);color:#fff}
.prog-key-mode-row{display:flex;gap:6px;justify-content:center;margin-top:2px}
.prog-key-mode-btn{
  width:40px;height:26px;border:1px solid #ead5db;border-radius:4px;
  background:rgba(255,255,255,.55);color:#a08089;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.8rem;font-weight:400;letter-spacing:.05em;
  cursor:pointer;transition:all .2s ease;
}
.prog-key-mode-btn:hover{border-color:var(--accent);background:#fff;color:#5a4a48}
.prog-key-mode-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(232,154,174,.35)}

.prog-presets{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:14px;
  background:rgba(255,255,255,.5);border:1px solid #ead5db;border-radius:6px;width:100%;
}
.prog-presets-label{
  width:100%;text-align:center;font-size:.78rem;color:#a08089;margin-bottom:4px;letter-spacing:.16em;
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
}
.prog-preset-btn{
  padding:5px 12px;border:1px solid #ead5db;border-radius:3px;
  background:rgba(255,255,255,.55);color:#7a5e64;
  font-size:.8rem;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:all .2s ease;
}
.prog-preset-btn:hover{border-color:#e0a5b5;background:#ffffff;color:#5a4a48}
.prog-preset-btn.active{background:#e0a5b5;color:#fff;border-color:#e0a5b5;box-shadow:0 2px 8px rgba(224,165,181,.2)}

/* Affiliate slot — empty by default, hidden until filled.
 * Hoshino-style framing: thin lines, restrained palette, single banner. */
.affiliate-slot{
  margin:40px auto 0;width:100%;max-width:560px;
  padding:20px 16px 16px;text-align:center;
  font-family:'Noto Sans JP','Hiragino Sans',sans-serif;
  border-top:1px solid var(--border-soft);
  transition:opacity .6s ease;
  min-height:0;
}
.affiliate-slot.aff-fading{opacity:0}
.affiliate-slot:empty{display:none}
.affiliate-slot .aff-eyebrow{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-size:.72rem;letter-spacing:.28em;color:var(--accent-deep);
  margin:0 0 8px;text-transform:uppercase;font-weight:500;
}
.affiliate-slot .aff-tagline{
  font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:.95rem;letter-spacing:.04em;color:#5a4a48;
  margin:0 0 6px;font-weight:400;line-height:1.6;
}
.affiliate-slot .aff-description{
  font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:.78rem;letter-spacing:.02em;color:#a08089;
  margin:0 0 12px;line-height:1.7;
}
.affiliate-slot .aff-banner{
  display:inline-block;line-height:0;
  border:1px solid rgba(168,216,200,.25);border-radius:2px;
  transition:all .25s;overflow:hidden;
}
.affiliate-slot .aff-banner:hover{
  border-color:#e89aae;
  box-shadow:0 4px 16px rgba(168,216,200,.15);
}
.affiliate-slot .aff-banner img{
  display:block;max-width:100%;height:auto;
}
.affiliate-slot .aff-pixel{
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
}
.affiliate-slot .aff-amazon-img{
  display:block;width:fit-content;margin:0 auto 10px;line-height:0;
  border:1px solid var(--border-soft);border-radius:2px;
  background:#fff;padding:8px;
  transition:all .25s;
}
.affiliate-slot .aff-amazon-img:hover{
  border-color:#e89aae;
  box-shadow:0 4px 16px rgba(232,154,174,.15);
}
.affiliate-slot .aff-amazon-img img{
  display:block;max-width:80px;max-height:80px;width:auto;height:auto;
  object-fit:contain;
}
/* CTA button — used for Amazon links and A8 programs that define a cta field. */
.affiliate-slot .aff-button{
  display:inline-block;margin-top:18px;padding:11px 32px;
  font-family:'Noto Sans JP','Hiragino Sans',sans-serif;
  font-size:.88rem;letter-spacing:.06em;font-weight:600;
  color:#fff;background:#e89aae;
  border:1px solid #e89aae;border-radius:3px;
  text-decoration:none;transition:all .25s;
}
.affiliate-slot .aff-button:hover{
  background:#d4849a;border-color:#d4849a;
  box-shadow:0 4px 16px rgba(232,154,174,.35);
}
/* localStorage save notice — shown under "保存済み" / "My Chords" headers */
.storage-notice{
  font-size:.72rem;color:var(--text-dim);line-height:1.6;
  margin:.5em 0 1em;text-align:center;
  font-family:'Noto Sans JP','Hiragino Sans',sans-serif;
  letter-spacing:.01em;
}

/* Footer disclosure — Amazon TOS requires a visible affiliate disclosure
   somewhere on the site. Tucked into a quiet footer line. */
.kofi-header-btn{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:4px;
  background:transparent;
  border:1px solid rgba(212,184,152,.22);
  color:#c8a888;text-decoration:none;
  font-family:'Cormorant Garamond','Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size:.82rem;letter-spacing:.12em;font-weight:300;
  transition:all .35s ease;
  white-space:nowrap;
}
.kofi-header-btn:hover{
  border-color:rgba(232,200,168,.55);
  color:#b89070;
  background:rgba(255,228,200,.1);
  box-shadow:0 0 12px rgba(232,196,158,.4),0 0 28px rgba(255,214,178,.2);
}
.kofi-header-btn:active{
  box-shadow:0 0 20px rgba(232,196,158,.6),0 0 44px rgba(255,214,178,.35);
}
.kofi-btn-labels{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.kofi-btn-main{font-size:.72rem;font-weight:300;letter-spacing:.05em;line-height:1}
.kofi-btn-sub{font-size:.55rem;font-weight:400;letter-spacing:.03em;opacity:.85;line-height:1}
body.embed .kofi-header-btn{display:none}

.aff-disclosure{
  margin:24px auto 24px;max-width:560px;padding:16px 20px 0;
  font-family:'Noto Sans JP','Hiragino Sans',sans-serif;
  font-size:.7rem;color:#b09da3;text-align:center;line-height:1.7;
  border-top:1px solid var(--border-soft);
}
body.embed .aff-disclosure{display:none}

/* Embed mode: minimal chrome for iframe usage from blog posts */
body.embed{padding:8px;min-height:0}
body.embed .page-header,
body.embed .mode-tabs{display:none}
body.embed .affiliate-slot{margin-top:16px}