/* Woodshed's shared panel.css owns the palette; home.css owns the primary button. */
html { scroll-behavior: smooth; }
a { color: inherit; }
.web-nav, .web-footer { max-width: 1280px; margin: auto; padding: 24px 32px; display: flex; gap: 28px; align-items: center; }
.web-nav { border-bottom: 1px solid var(--border); }
.web-nav a, .web-footer a { text-decoration: none; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-size: 23px; font-weight: 750; }
.wordmark svg { width: 32px; height: 32px; }
.nav-start { border: 1px solid var(--border-strong); background: var(--card); border-radius: 999px; padding: 10px 18px; font-weight: 600; }
.landing-hero { max-width: 1280px; margin: auto; padding: 72px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.landing-hero > * { min-width: 0; }
.eyebrow { display: block; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.hero-copy h1 { font-size: clamp(54px, 6vw, 80px); line-height: 1.05; letter-spacing: -.04em; margin: 24px 0; }
em { color: var(--accent); font-style: normal; }
.hero-copy > p { font-size: 19px; line-height: 1.65; max-width: 390px; color: var(--muted); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin: 30px 0 18px; }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 20px; background: linear-gradient(90deg, #a855f7, #818cf8); color: #fff; border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.cta:hover { filter: brightness(1.08); }
.quiet-link, .search-link, .privacy-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.small-note { font-size: 12px; color: var(--muted); }
.demo-card { background: var(--card); border: 1px solid var(--border-strong); border-radius: 16px; padding: 26px; }
.demo-top { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; }
.demo-title { display: flex; align-items: center; gap: 16px; margin: 24px 0; }
.record-art { display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; background: var(--bg); border-radius: 12px; }
.record-art svg { width: 40px; height: 40px; }
.demo-title h2 { font-size: 20px; margin: 0; }
.demo-title p { font-size: 12px; color: var(--muted); margin: 4px 0; }
.demo-caption { font-size: 11px; color: var(--muted); margin: 18px 0 0; line-height: 1.6; }
.promise-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; padding: 24px 32px; border-block: 1px solid var(--border); color: var(--muted); background: var(--card); }
.practice-story, .feature-editorial { max-width: 1216px; margin: auto; padding: 80px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.practice-story h2, .feature-editorial h2, .privacy-note h2 { font-size: 44px; line-height: 1.15; letter-spacing: -.03em; margin: 22px 0; }
.practice-story p, .feature-editorial p, .privacy-note p { color: var(--muted); line-height: 1.7; }
.practice-story ol { list-style: none; padding: 0; margin: 0; }
.practice-story li { display: flex; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.practice-story li:first-child { padding-top: 0; }
.practice-story li > span { color: var(--accent); font-weight: 700; }
.practice-story h3 { font-size: 21px; margin: 0 0 8px; }
.practice-story li p { margin: 0; }
.feature-editorial { align-items: center; padding-top: 0; }
.large-number { display: flex; align-items: center; gap: 30px; font-size: 220px; line-height: 1; font-weight: 750; color: var(--accent); background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 30px; }
.large-number span { font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--text); }
.privacy-note { max-width: 700px; margin: auto; text-align: center; padding: 30px 32px 80px; }
.final-cta { text-align: center; padding: 60px 32px; background: var(--card); border-block: 1px solid var(--border); }
.final-cta h2 { font-size: 60px; letter-spacing: -.03em; margin: 20px 0 28px; }
.web-footer > span { margin: auto; color: var(--muted); }
.studio-shell { max-width: 1180px; margin: auto; padding: 36px 24px 64px; }
.studio-heading { display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.studio-heading h1 { font-size: 34px; letter-spacing: -.02em; margin: 12px 0; }
.local-badge { font-size: 12px; color: var(--muted); }
.source-picker, .connection-needed { background: var(--card); padding: 24px; border: 1px solid var(--border); border-radius: 14px; }
.source-picker label { display: block; font-weight: 600; margin-bottom: 10px; }
.url-row { display: flex; gap: 12px; }
.url-row input { width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--border-strong); padding: 12px 16px; border-radius: 999px; }
.search-link { display: inline-block; margin-top: 14px; }
.source-picker .hint { margin-bottom: 0; }
.shared-storage { padding: 18px 0; color: var(--muted); font-size: 12px; }
.studio .home { padding: 0; }
.studio .home-header { display: none; }
.studio .library-section { margin-top: 30px; }
.web-file-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 15px 0; }
.web-file-entry .file-button { border: 1px solid var(--border-strong); padding: 10px 18px; border-radius: 999px; background: var(--card); }
.connection-needed h2 { margin-top: 0; }
.connection-needed p { color: var(--muted); max-width: 700px; line-height: 1.65; }
.connection-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.privacy-page { max-width: 760px; margin: 48px auto; padding: 0 24px; line-height: 1.75; }
.privacy-page h1 { font-size: 36px; }
.privacy-page h2 { margin-top: 32px; }
.privacy-page a { color: var(--accent); }
@media (max-width: 900px) { .landing-hero { gap: 32px; } .hero-copy h1 { font-size: 60px; } .practice-story, .feature-editorial { gap: 40px; } .large-number { font-size: 170px; gap: 18px; padding: 20px; } }
@media (max-width: 650px) { .web-nav, .web-footer { padding: 20px 24px; gap: 16px; flex-wrap: wrap; } .web-nav > a:not(.wordmark):not(.nav-start) { display: none; } .wordmark { font-size: 21px; } .landing-hero { grid-template-columns: 1fr; gap: 40px; padding: 42px 24px; } .hero-copy h1 { font-size: clamp(52px, 17vw, 70px); } .demo-card { padding: 20px; } .promise-strip { gap: 16px; font-size: 12px; } .practice-story, .feature-editorial { grid-template-columns: 1fr; padding: 56px 24px; gap: 36px; } .practice-story h2, .privacy-note h2 { font-size: 38px; } .large-number { justify-content: center; } .privacy-note { padding-inline: 24px; } .final-cta h2 { font-size: 48px; } .web-footer > span { display: none; } .studio-shell { padding: 26px 16px 48px; } .studio-heading { display: block; } .studio-heading h1 { font-size: 30px; } .url-row { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.secondary-action:hover { background: var(--card-hover); border-color: var(--accent); }
.secondary-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.connection-actions { align-items: center; }
.connection-local-note { margin: 12px 0 0; font-size: 12px; }
@media (max-width: 650px) { .connection-actions > button { width: 100%; } }

.song-heading{display:flex;align-items:center;gap:24px;margin:12px 0 32px;padding:24px;background:var(--card);border:1px solid var(--border);border-radius:18px}
.song-artwork{width:160px;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.song-heading-title{flex:1;min-width:0}.song-heading-title h1{font-size:clamp(24px,3vw,38px);line-height:1.2;margin:10px 0}.song-heading-title p{color:var(--muted);margin:0}
.song-heading-actions{display:flex;align-items:center;flex-direction:column;gap:14px}
@media(max-width:700px){.song-heading{flex-wrap:wrap;gap:16px;padding:20px}.song-artwork{width:100px}.song-heading-actions{flex-direction:row;flex-wrap:wrap;width:100%}.song-heading-title h1{font-size:24px}}
.youtube-embed { margin: 24px 0; max-width: 840px; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--bg); }
.youtube-frame { aspect-ratio: 16 / 9; min-height: 200px; }
.youtube-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.tab-capture-note { padding: 16px; margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); }
.tab-capture-note p { margin: 0 0 12px; line-height: 1.5; }
.capture-complete { color: var(--muted); margin: 20px 0; }

/* Landing explanations use the same Woodshed palette and rounded controls. */
.landing-nav { max-width: 1480px; gap: 24px; }
.landing-menu { display: flex; align-items: center; gap: 24px; font-size: 13px; color: var(--muted); }
.landing-menu a:hover { color: var(--text); }
.landing-menu-toggle { display: none; }
.landing-skip { position: fixed; top: -80px; left: 20px; z-index: 20; padding: 12px 18px; border-radius: 10px; background: var(--card); }
.landing-skip:focus { top: 12px; }
.landing-section { max-width: 1216px; padding: 76px 32px; margin: auto; scroll-margin-top: 110px; }
.section-intro { max-width: 660px; margin-bottom: 32px; }
.landing-section h2 { font-size: clamp(30px, 3.5vw, 44px); letter-spacing: -.03em; line-height: 1.15; margin: 18px 0; }
.landing-section p { color: var(--muted); line-height: 1.75; }
.mode-section { padding-bottom: 32px; }
.mode-switcher { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 30px; }
.mode-switcher button { display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 18px 12px; color: var(--muted); font-weight: 600; }
.mode-switcher button[aria-pressed=true] { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.mode-switcher button:hover { border-color: var(--accent); }
.mode-explainer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; min-height: 380px; }
.mode-copy h3 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.03em; line-height: 1.2; margin: 18px 0; }
.mode-copy .mode-use { color: var(--text); margin: 22px 0; font-size: 13px; }
.feature-illustration, .practice-card, .library-illustration, .source-grid article { border: 1px solid var(--border); border-radius: 16px; background: var(--card); padding: 26px; }
.illustration-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--muted); letter-spacing: .06em; }
.illustration-tag { border-radius: 999px; background: var(--accent-soft); color: var(--text); padding: 6px 12px; letter-spacing: 0; }
.illustration-tracks { display: grid; gap: 18px; margin: 28px 0; }
.illustration-track { display: grid; grid-template-columns: 82px 1fr 32px; gap: 14px; align-items: center; font-size: 12px; }
.illustration-track b { font-size: 10px; text-align: right; font-weight: 500; color: var(--muted); }
.illustration-track.quiet { opacity: .45; }
.illustration-level { height: 5px; background: var(--border-strong); border-radius: 5px; }
.illustration-level i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.illustration-loop { display: flex; align-items: center; gap: 8px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 10px; }
.illustration-loop > span { color: var(--text); font-size: 10px; font-weight: 700; }
.illustration-loop > div { display: flex; gap: 4px; align-items: center; height: 34px; flex: 1; }
.illustration-loop i { display: block; flex: 1; height: 45%; background: var(--accent); border-radius: 2px; }
.illustration-loop i:nth-child(3n) { height: 95%; }.illustration-loop i:nth-child(4n) { height: 70%; }.illustration-loop i:nth-child(5n) { height: 25%; }
.illustration-caption { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; margin-top: 12px; color: var(--muted); }
.feature-illustration > p { font-size: 10px; margin: 18px 0 0; }
.source-explanation { border-block: 1px solid var(--border); }
.source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.source-label { color: var(--accent); font-weight: 650; font-size: 11px; letter-spacing: .08em; }
.source-grid h3 { font-size: 24px; line-height: 1.3; letter-spacing: -.02em; margin: 18px 0 14px; }
.source-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 18px 0; border-block: 1px solid var(--border); font-size: 11px; }
.source-flow > span[aria-hidden] { color: var(--accent); }
.source-grid .small-note { margin-bottom: 0; }
.practice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.practice-card h3 { font-size: 21px; line-height: 1.3; margin: 26px 0 12px; }
.practice-card p { font-size: 13px; margin: 0; }
.practice-graphic { height: 126px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pace-graphic > span, .section-graphic > span { border: 1px solid var(--border); border-radius: 999px; padding: 7px 10px; color: var(--muted); font-size: 11px; }
.practice-graphic .active { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }
.pace-line { flex-basis: 100%; height: 4px; border-radius: 8px; background: var(--border-strong); }
.pace-line i { display: block; width: 60%; height: 4px; background: var(--accent); position: relative; }
.pace-line i::after { content: ''; position: absolute; right: 0; top: -4px; height: 12px; width: 12px; background: var(--accent); border-radius: 50%; }
.key-graphic > span { border: 1px solid var(--border); border-radius: 50%; padding: 6px 12px; font-size: 20px; color: var(--muted); }
.key-graphic strong { font-size: 34px; color: var(--text); padding-inline: 12px; }
.key-graphic small { text-align: center; width: 100%; color: var(--muted); font-size: 10px; }
.section-graphic { gap: 6px; padding: 14px; }
.section-graphic > div { display: flex; width: 100%; align-items: center; gap: 8px; font-size: 10px; color: var(--accent); }
.section-graphic i { flex: 1; height: 18px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent-soft); }
.practice-use-cases { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--border); }
.study-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.study-grid article { padding: 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); }
.study-grid h3 { font-size: 24px; margin: 14px 0; }.study-grid p { margin-bottom: 0; font-size: 14px; }
.chord-example, .lyrics-example { display: flex; align-items: center; gap: 8px; height: 76px; margin-bottom: 22px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.chord-example span { flex: 1; text-align: center; padding: 10px 0; color: var(--muted); border-right: 1px solid var(--border); }.chord-example span:last-child { border-right: 0; }.chord-example .active { background: var(--accent-soft); color: var(--accent); border-radius: 6px; }
.lyrics-example { flex-direction: column; align-items: flex-start; justify-content: center; }.lyrics-example i { display: block; height: 6px; width: 70%; background: var(--border-strong); border-radius: 6px; }.lyrics-example i:nth-child(2) { background: var(--accent); width: 85%; }.lyrics-example i:last-child { width: 55%; }
.practice-use-cases > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.practice-use-cases p { font-size: 13px; }.practice-use-cases strong { display: block; color: var(--text); margin-bottom: 8px; font-weight: 600; }
.local-section { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 20px; }
.library-illustration { padding: 32px; }
.library-art { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); margin-bottom: 24px; }
.library-illustration h3 { font-size: 26px; margin: 14px 0 24px; letter-spacing: -.02em; }
.library-tags { display: flex; flex-wrap: wrap; gap: 8px; }.library-tags span { padding: 7px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; font-size: 11px; color: var(--muted); }
.saved-section { display: flex; align-items: center; gap: 12px; border-block: 1px solid var(--border); margin-top: 24px; padding: 18px 0; font-size: 12px; }
.saved-section svg { color: var(--accent); }.saved-section > span:last-child { margin-left: auto; color: var(--muted); }.library-illustration p { margin-bottom: 0; font-size: 12px; }
.faq-section { padding-top: 20px; }.faq-list { max-width: 880px; }.faq-list details { border-top: 1px solid var(--border); }.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary { cursor: pointer; padding: 22px 30px 22px 0; font-size: 16px; font-weight: 600; }.faq-list details[open] summary { color: var(--accent); }.faq-list details p { max-width: 740px; margin: 0 0 24px; font-size: 14px; }
#how, #demo { scroll-margin-top: 110px; }
@media (max-width: 1100px) { .landing-nav { gap: 16px; }.landing-menu { gap: 14px; font-size: 12px; }.landing-nav .wordmark { font-size: 20px; }.mode-explainer, .local-section { gap: 32px; }.practice-grid { gap: 12px; }.practice-card { padding: 20px; } }
@media (max-width: 900px) {
  .landing-nav { flex-wrap: wrap; }.landing-menu-toggle { display: block; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); }.landing-menu { display: none; order: 3; width: 100%; gap: 0; }.landing-menu.is-open { display: grid; grid-template-columns: repeat(3, 1fr); }.landing-menu a { padding: 12px 4px; }
  .practice-grid { grid-template-columns: 1fr; }.practice-card { display: grid; grid-template-columns: 240px 1fr; column-gap: 24px; }.practice-graphic { grid-row: 1 / 3; }.practice-card h3 { margin: 8px 0; }.practice-use-cases > div { gap: 20px; }
}
@media (max-width: 650px) {
  .landing-nav { padding: 18px 20px; gap: 10px; }.landing-nav .nav-start { display: inline-flex; padding: 9px 12px; font-size: 11px; }.landing-nav .wordmark { font-size: 18px; gap: 7px; }.landing-nav .wordmark svg { width: 28px; height: 28px; }.landing-menu-toggle { font-size: 11px; }.landing-menu.is-open { grid-template-columns: repeat(2, 1fr); }
  .landing-section { padding: 48px 24px; }.mode-switcher { grid-template-columns: 1fr 1fr; gap: 8px; }.mode-switcher button { padding: 14px 10px; font-size: 12px; gap: 8px; }.mode-explainer, .local-section, .source-grid { grid-template-columns: 1fr; gap: 26px; }.mode-explainer { min-height: 0; }.mode-copy h3 { font-size: 30px; }.feature-illustration { padding: 22px; }
  .practice-card { display: block; padding: 24px; }.practice-card h3 { margin-top: 24px; }.practice-use-cases > div, .study-grid { grid-template-columns: 1fr; gap: 16px; }.local-section { padding-top: 12px; }.faq-section { padding-top: 12px; }.faq-list summary { font-size: 15px; }.landing-footer { gap: 20px; }.landing-footer .wordmark { flex-basis: 100%; }
}

/* The navigation stays available while exploring the landing. */
.landing-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); }
.landing-header .landing-nav { border-bottom: 0; }
.landing-dropdown { position: relative; }
.landing-dropdown summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 4px; list-style: none; color: var(--text); }
.landing-dropdown summary::-webkit-details-marker { display: none; }
.landing-dropdown summary::after { content: ''; width: 6px; height: 6px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); color: var(--muted); }
.landing-dropdown[open] summary { color: var(--accent); }
.landing-dropdown-links { position: absolute; top: 100%; left: -16px; min-width: 180px; display: grid; padding: 8px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 12px 24px #0003; }
.landing-dropdown-links a { padding: 12px; border-radius: 7px; white-space: nowrap; }
.landing-dropdown-links a:hover { background: var(--accent-soft); }
.demo-intro { color: var(--muted); font-size: 12px; line-height: 1.65; margin: -8px 0 20px; }
.mode-control-preview { margin: 26px 0; }
.mode-control-preview h4 { margin: 0 0 12px; font-size: 18px; }
.mode-control-preview > p { font-size: 13px; margin: 0 0 18px; }
.mode-control-preview .backing-instruments { margin: 0; }
.mode-control-preview .instrument-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode-control-preview .backing-summary { flex-wrap: wrap; }
.mode-control-preview .backing-summary p { font-size: 12px; }
.mode-control-preview .mixer-row { padding-inline: 0; }
.mode-control-preview .mixer-name { font-size: 12px; }
@media (max-width: 900px) {
  .landing-menu.is-open { display: flex; align-items: flex-start; gap: 24px; }
  .landing-dropdown { flex: 1; min-width: 0; }
  .landing-dropdown-links { position: static; min-width: 0; padding: 0; box-shadow: none; border: 0; background: transparent; }
  .landing-dropdown-links a { white-space: normal; padding: 10px 4px; }
}
@media (max-width: 650px) {
  .landing-menu.is-open { gap: 12px; }
  .mode-control-preview .instrument-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-control-preview .mixer-row { grid-template-columns: 52px minmax(30px, 1fr) 34px 26px 26px; gap: 5px; }
  .mode-control-preview .mixer-row.no-solo { grid-template-columns: 52px minmax(30px, 1fr) 34px 26px; }
}

.nav-start.cta { gap: 10px; }