/*
  Bass to Chords, web version.

  Everything here is scoped: each rule sits under #b2c-app (the mount element) and every class
  is prefixed b2c-, so nothing reaches the rest of the page and the page's own styles don't
  reach in. The custom properties are prefixed too (--b2c-ink, not --ink), so a site that
  defines --ink or --cream can't repaint the widget by accident.

  The palette is the extension's: Matisse cut-outs, flat colour on a flat ground. Each
  variation is its own painting, A paper, B the red studio, C ink, and the panel fades between
  them. It's the same in the site's dark and light modes on purpose: this is the product's own
  look, the way a poster keeps its colours whatever wall it hangs on.
*/

#b2c-app {
  --b2c-paper: #f4ead6; --b2c-panel: #fbf4e6; --b2c-ink: #17181c; --b2c-muted: #6f6656;
  --b2c-line: #d8caae; --b2c-chip: #fffaf0; --b2c-accent: #e4572e; --b2c-accent-ink: #fdf6e6;
  --b2c-s-big: #2f6fd0; --b2c-s-leaf: #0f7b6c; --b2c-s-star: #f2b705; --b2c-bass: #2f6fd0;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  border-radius: 28px;
  background: var(--b2c-paper);
  color: var(--b2c-ink);
  font-family: Futura, "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}
#b2c-app[data-variation="B"] {
  --b2c-paper: #9c2a16; --b2c-panel: #8c2412; --b2c-ink: #fdf1dd; --b2c-muted: #f0cbb8;
  --b2c-line: #bb5840; --b2c-chip: rgba(255, 245, 230, .10); --b2c-accent: #f2b705; --b2c-accent-ink: #47160c;
  --b2c-s-big: #1b3f8b; --b2c-s-leaf: #e8dcc0; --b2c-s-star: #f2b705; --b2c-bass: #e8dcc0;
}
#b2c-app[data-variation="C"] {
  --b2c-paper: #14161c; --b2c-panel: #1b1e26; --b2c-ink: #f1ece2; --b2c-muted: #8e8b84;
  --b2c-line: #2b2f39; --b2c-chip: rgba(241, 236, 226, .06); --b2c-accent: #ef6c4d; --b2c-accent-ink: #14161c;
  --b2c-s-big: #2f6fd0; --b2c-s-leaf: #1f9c8a; --b2c-s-star: #f3c53f; --b2c-bass: #5f95e6;
}

#b2c-app *, #b2c-app *::before, #b2c-app *::after { box-sizing: border-box; }
#b2c-app p, #b2c-app span, #b2c-app div, #b2c-app section, #b2c-app label, #b2c-app form, #b2c-app aside, #b2c-app footer, #b2c-app header {
  margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; border: 0; background: none;
}
#b2c-app [hidden] { display: none !important; }
#b2c-app input, #b2c-app button, #b2c-app select { font: inherit; color: inherit; }
#b2c-app .b2c-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The page around us may style bare elements (`button { … }`). Neutralise that first; every
   rule below is `#b2c-app .b2c-…`, which outweighs this reset. */
#b2c-app button, #b2c-app input, #b2c-app select, #b2c-app textarea {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; margin: 0;
  background: none; border: none; border-radius: 0; box-shadow: none; width: auto; min-width: 0;
}
#b2c-app a { text-decoration: underline; }
#b2c-app canvas { max-width: none; }

/* ─── Cut-outs ───────────────────────────────────────────────────────────── */
#b2c-app .b2c-art { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#b2c-app .b2c-art svg { position: absolute; }
#b2c-app .b2c-art path { transition: fill .35s ease; }
#b2c-app .b2c-art .s1 { top: -110px; right: -120px; width: 380px; transform: rotate(18deg); }
#b2c-app .b2c-art .s1 path { fill: var(--b2c-s-big); }
#b2c-app .b2c-art .s2 { top: 8px; right: 250px; width: 50px; transform: rotate(-12deg); } /* sits beside the eyebrow, clear of the headline */
#b2c-app .b2c-art .s2 path { fill: var(--b2c-s-star); }
#b2c-app .b2c-art .s3 { bottom: -240px; right: -150px; width: 420px; transform: rotate(-24deg); }
#b2c-app .b2c-art .s3 path { fill: var(--b2c-s-leaf); }
#b2c-app .b2c-art .s4 { bottom: -30px; left: -55px; width: 165px; transform: rotate(150deg); }
#b2c-app .b2c-art .s4 path { fill: var(--b2c-s-star); }

/* ─── Layout ─────────────────────────────────────────────────────────────── */
#b2c-app .b2c-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; padding: 36px 32px 28px; }
#b2c-app .b2c-eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--b2c-accent); transition: color .35s ease; }
#b2c-app .b2c-hero { max-width: 46em; }
#b2c-app .b2c-lede { margin-top: 12px; font-size: 17px; max-width: 34em; }
#b2c-app .b2c-sub { color: var(--b2c-muted); margin-top: 6px; font-size: 13px; transition: color .35s ease; }

/* ─── Drop zone ──────────────────────────────────────────────────────────── */
#b2c-app .b2c-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 136px; padding: 22px; text-align: center;
  border: 2px dashed var(--b2c-line); border-radius: 24px; background: var(--b2c-panel); cursor: pointer;
  transition: background-color .35s ease, border-color .2s ease;
}
#b2c-app .b2c-drop:hover, #b2c-app .b2c-drop.b2c-over { border-color: var(--b2c-accent); }
#b2c-app .b2c-drop:focus-within { outline: 2px solid var(--b2c-accent); outline-offset: 3px; }
#b2c-app .b2c-drop.b2c-loaded { min-height: 0; padding: 16px 22px; border-style: solid; }
#b2c-app .b2c-drop-title { font-size: 20px; letter-spacing: -.01em; overflow-wrap: anywhere; }
#b2c-app .b2c-drop-sub { color: var(--b2c-muted); font-size: 13px; }
#b2c-app .b2c-example-row { margin-top: -8px; text-align: center; }
#b2c-app button.b2c-link {
  background: none; border: none; padding: 4px; color: var(--b2c-accent); cursor: pointer;
  font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
#b2c-app .b2c-source { display: flex; justify-content: center; }
#b2c-app .b2c-source .b2c-row { min-width: min(420px, 100%); }
#b2c-app .b2c-status { min-height: 1.4em; text-align: center; color: var(--b2c-muted); font-size: 13px; }
#b2c-app .b2c-status.b2c-error { color: var(--b2c-accent); }

/* ─── Panels ─────────────────────────────────────────────────────────────── */
#b2c-app .b2c-workspace { display: grid; grid-template-columns: minmax(270px, 340px) 1fr; gap: 18px; align-items: start; }
#b2c-app .b2c-panel {
  background: var(--b2c-panel); border: 1px solid var(--b2c-line); border-radius: 24px; padding: 22px;
  transition: background-color .35s ease, border-color .35s ease;
}
#b2c-app .b2c-controls { display: flex; flex-direction: column; gap: 15px; font-size: 13px; }
#b2c-app .b2c-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--b2c-muted); margin-bottom: 8px; }
/* Room for two lines always, so the panel doesn't jump when you switch variation. */
#b2c-app .b2c-hint { color: var(--b2c-muted); margin-top: 8px; font-size: 12px; line-height: 1.4; min-height: 2.8em; }

#b2c-app .b2c-segmented {
  display: flex; border: 1px solid var(--b2c-line); border-radius: 999px; overflow: hidden;
  background: var(--b2c-chip); transition: background-color .35s ease, border-color .35s ease;
}
#b2c-app .b2c-segmented label { flex: 1; text-align: center; cursor: pointer; }
#b2c-app .b2c-segmented input { position: absolute; opacity: 0; pointer-events: none; }
#b2c-app .b2c-segmented span { display: block; padding: 8px 2px; font-size: 12px; transition: background-color .35s ease, color .35s ease; }
#b2c-app .b2c-segmented input:checked + span { background: var(--b2c-accent); color: var(--b2c-accent-ink); }
#b2c-app .b2c-segmented input:focus-visible + span { outline: 2px solid var(--b2c-ink); outline-offset: -4px; border-radius: 999px; }

#b2c-app .b2c-rows { display: flex; flex-direction: column; gap: 10px; }
#b2c-app .b2c-row { display: grid; grid-template-columns: 8em 1fr; align-items: center; gap: 10px; }
#b2c-app .b2c-row > span, #b2c-app .b2c-slider-top label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--b2c-muted); }
#b2c-app .b2c-triple { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
#b2c-app select {
  appearance: none; border: 1px solid var(--b2c-line); border-radius: 999px; padding: 7px 14px; width: 100%;
  background: var(--b2c-chip); cursor: pointer; transition: background-color .35s ease, border-color .35s ease;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
#b2c-app option { color: #17181c; background: #fff; }
#b2c-app select:focus-visible, #b2c-app input:focus-visible { outline: 2px solid var(--b2c-accent); outline-offset: 2px; }

#b2c-app .b2c-sliders { display: flex; flex-direction: column; gap: 12px; }
#b2c-app .b2c-slider-top { display: flex; justify-content: space-between; margin-bottom: 8px; }
#b2c-app .b2c-slider-top .b2c-value { color: var(--b2c-accent); font-size: 12px; transition: color .35s ease; }
#b2c-app input[type="range"] {
  appearance: none; width: 100%; height: 5px; background: var(--b2c-line); border-radius: 3px; cursor: pointer;
  transition: background-color .35s ease;
}
#b2c-app input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--b2c-accent); border: 2px solid var(--b2c-panel);
}
#b2c-app input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--b2c-accent); border: 2px solid var(--b2c-panel);
}

#b2c-app button.b2c-act { cursor: pointer; border-radius: 999px; padding: 9px 22px; font-size: 13px; white-space: nowrap; }
#b2c-app button.b2c-act:focus-visible { outline: 2px solid var(--b2c-accent); outline-offset: 2px; }
#b2c-app button.b2c-act:disabled { opacity: .5; cursor: progress; }
#b2c-app button.b2c-ghost { background: none; border: 1px solid var(--b2c-line); color: var(--b2c-ink); transition: border-color .35s ease; }
#b2c-app button.b2c-ghost:hover { border-color: var(--b2c-accent); }
#b2c-app button.b2c-primary {
  background: var(--b2c-accent); color: var(--b2c-accent-ink); border: none; letter-spacing: .04em;
  transition: background-color .35s ease, color .35s ease;
}
#b2c-app button.b2c-wide { width: 100%; padding: 12px; font-size: 14px; }

/* ─── Result ─────────────────────────────────────────────────────────────── */
#b2c-app .b2c-result { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
#b2c-app .b2c-result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#b2c-app .b2c-key-name { font-size: 38px; font-weight: 500; letter-spacing: -.02em; line-height: 1; margin-top: 8px; }
#b2c-app .b2c-badge {
  border: 1px solid var(--b2c-line); border-radius: 999px; padding: 4px 12px; font-size: 12px;
  color: var(--b2c-muted); white-space: nowrap;
}
#b2c-app .b2c-roll-wrap { border-radius: 16px; overflow: hidden; background: var(--b2c-chip); border: 1px solid var(--b2c-line); }
#b2c-app .b2c-roll-wrap canvas { display: block; width: 100%; height: 280px; }
#b2c-app .b2c-progression { font-size: 16px; word-spacing: .15em; overflow-wrap: anywhere; }
#b2c-app .b2c-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#b2c-app .b2c-transport .b2c-spacer { flex: 1; }
#b2c-app .b2c-transport #b2c-play { min-width: 92px; }
#b2c-app .b2c-tempo { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .2em; color: var(--b2c-muted); }
#b2c-app .b2c-tempo input {
  width: 5.4em; border: 1px solid var(--b2c-line); border-radius: 999px; padding: 7px 10px;
  background: var(--b2c-chip); text-align: center; font-size: 13px; letter-spacing: 0;
}
#b2c-app .b2c-note { color: var(--b2c-muted); font-size: 13px; border-top: 1px solid var(--b2c-line); padding-top: 14px; }
#b2c-app .b2c-note a, #b2c-app .b2c-foot a { color: var(--b2c-accent); }

/* ─── Newsletter and footer ──────────────────────────────────────────────── */
#b2c-app .b2c-newsletter { display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; align-items: center; }
#b2c-app .b2c-newsletter-title { font-size: 24px; letter-spacing: -.01em; margin-top: 6px; }
#b2c-app .b2c-newsletter-form { display: flex; flex-wrap: wrap; gap: 8px; }
#b2c-app .b2c-newsletter-form input {
  min-width: 220px; flex: 1; border: 1px solid var(--b2c-line); border-radius: 999px;
  padding: 9px 16px; background: var(--b2c-chip); font-size: 14px;
}
#b2c-app .b2c-sender { align-items: center; }
#b2c-app .b2c-sender .sender-form-field { min-width: min(100%, 320px); }
#b2c-app #b2c-newsletter-status { grid-column: 1 / -1; margin: 0; }
#b2c-app #b2c-newsletter-status:empty { display: none; }
#b2c-app .b2c-newsletter.b2c-gate #b2c-newsletter-dismiss { display: none; }
#b2c-app .b2c-foot { color: var(--b2c-muted); font-size: 12px; text-align: center; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

/* ─── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  #b2c-app .b2c-workspace { grid-template-columns: 1fr; }
  #b2c-app .b2c-newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #b2c-app { border-radius: 20px; }
  #b2c-app .b2c-inner { padding: 26px 16px 22px; gap: 14px; }
  #b2c-app .b2c-panel { padding: 16px; border-radius: 18px; }
  #b2c-app .b2c-lede { font-size: 15px; }
  #b2c-app .b2c-art .s1 { width: 230px; top: -80px; right: -100px; }
  #b2c-app .b2c-art .s2 { right: 110px; top: 24px; width: 38px; }
  #b2c-app .b2c-art .s3 { width: 240px; bottom: -205px; right: -150px; } /* only the tip shows, so it never sits under the privacy note */
  #b2c-app .b2c-art .s4 { width: 100px; }
  #b2c-app .b2c-key-name { font-size: 30px; }
  #b2c-app .b2c-roll-wrap canvas { height: 220px; }
  #b2c-app .b2c-transport .b2c-spacer { display: none; }
  #b2c-app .b2c-transport .b2c-ghost { flex: 1; }
  #b2c-app .b2c-row { grid-template-columns: 6.6em 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #b2c-app, #b2c-app * { transition: none !important; }
}