@font-face {
  font-family: Manrope;
  src: url("assets/Manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  color-scheme: dark;
  font-family: Manrope, system-ui, sans-serif;
  background: #101923;
  color: #f4eee2;
  --ink: #f4eee2;
  --muted: #b7c2ce;
  --blue: #a3c8ef;
  --warm: #edb478;
  --line: #394959;
}
* { box-sizing: border-box; }
body { margin: 0; }
html { scroll-behavior: smooth; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--warm); outline-offset: 4px; }
button { font: inherit; cursor: pointer; }
.wrap { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.masthead { background: #101923; border-bottom: 1px solid #293643; }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: block; width: clamp(145px, 22vw, 219px); flex-shrink: 0; }
.brand img { width: 100%; height: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 25px; font-size: .9rem; font-weight: 700; }
.nav-links a, .footer a { text-decoration: none; }
.nav-links a:hover, .footer a:hover { color: var(--blue); }
.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 10px 17px;
  font-weight: 800;
  text-decoration: none;
}
.button.outline { border-color: #52677c; }
.button.primary { background: var(--blue); color: #132433; }
.button.primary:hover { background: #c0dcf7; }
.hero {
  background: linear-gradient(90deg,#0d151f 0%,#0d151ff2 24%,#0d151f8f 48%,#0d151f0d 76%), url("assets/guitars.png") center 48% / cover;
  border-bottom: 1px solid var(--line);
}
.hero-content { padding-block: clamp(58px, 8vw, 116px) clamp(64px, 8vw, 114px); }
.kicker { color: var(--warm); font-size: .77rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; margin: 0 0 18px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.8rem, 6.2vw, 5.35rem); line-height: .99; letter-spacing: -.065em; max-width: 740px; margin-bottom: 23px; }
h1 em { font-style: normal; color: var(--blue); }
.hero-description { max-width: 460px; font-size: clamp(1rem, 1.5vw, 1.16rem); color: #d6dce2; line-height: 1.65; margin-bottom: 25px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-facts { background: #16222f; border-bottom: 1px solid #2c3b4b; }
.facts { display: flex; flex-wrap: wrap; gap: 12px clamp(20px,5vw,66px); padding-block: 17px; font-size: .91rem; color: var(--muted); }
.facts strong { color: var(--ink); font-weight: 800; }
.early-access { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(20px, 5vw, 64px); padding-block: clamp(44px, 7vw, 84px); border-bottom: 1px solid var(--line); }
.early-access p { color: var(--muted); line-height: 1.55; }
.tester-app-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.tester-app-qr { display: none; margin: 0; max-width: 164px; text-align: center; }
.tester-app-qr img { display: block; width: 164px; height: auto; border-radius: 6px; }
.tester-app-qr figcaption { margin-top: 7px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
@media (min-width: 741px) and (hover: hover) and (pointer: fine) {
  .tester-app-qr { display: block; }
}
.early-access-form { padding: clamp(16px, 3vw, 26px); border-radius: 12px; border: 1px solid #49617a; background: #182737; }
.early-access-form label { display: block; margin-bottom: 8px; font-weight: 800; }
.early-access-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.early-access-fields input { flex: 1 1 185px; width: 100%; min-width: 0; min-height: 46px; border-radius: 7px; border: 1px solid #7890a8; background: #101923; color: var(--ink); font: inherit; padding: 10px 12px; }
.early-access-fields button { white-space: nowrap; }
#early-access-note { margin: 10px 0 0; font-size: .82rem; }
#early-access-status { margin: 10px 0 0; color: var(--blue); font-weight: 800; }
#early-access-status[data-error] { color: var(--warm); }
#early-access-status:empty { margin: 0; }
.demo-section { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(22px,6vw,92px); padding-block: clamp(52px,8vw,104px); }
h2 { font-size: clamp(1.95rem,4.3vw,3.45rem); line-height: 1.04; letter-spacing: -.055em; margin-bottom: 17px; }
.demo-copy p:last-child, .practice-grid p { line-height: 1.65; color: var(--muted); margin-bottom: 0; }
.demo-panel { padding: clamp(14px,2vw,24px); border-radius: 16px; border: 1px solid #49617a; background: #182737; box-shadow: 0 24px 54px #070d1555; }
.demo-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: .9rem; font-weight: 800; }
.tempo { color: var(--blue); white-space: nowrap; }
.demo-body { display: grid; grid-template-columns: minmax(100px, .9fr) minmax(130px, 1.1fr); gap: clamp(12px,4vw,42px); align-items: center; padding: 16px 0 10px; }
.demo-fretboard { width: 100%; max-width: 193px; padding-inline: 12px; margin-inline: auto; }
.fretboard {
  position: relative;
  width: 100%;
  aspect-ratio: 1.25;
  background-color: #17202a;
  background-image: linear-gradient(90deg, #8fa0af 1px, transparent 1px), linear-gradient(#728595 1px, transparent 1px);
  background-size: 20% 100%, 100% 33.333%;
  border-top: 4px solid #d3dfeb;
  border-right: 1px solid #8fa0af;
  border-bottom: 1px solid #728595;
}
.open-strings, .string-labels { display: flex; justify-content: space-between; position: relative; margin-inline: -8px; }
.open-strings { height: 24px; }
.open-strings span, .string-labels span { display: grid; place-items: center; width: 16px; font-size: .76rem; }
.string-labels { margin-top: 5px; color: var(--muted); }
.dot { position: absolute; display: grid; place-items: center; translate: -50% -50%; width: clamp(16px, 3vw, 24px); aspect-ratio: 1; border-radius: 50%; font-size: .72rem; font-weight: 800; color: #20222a; background: var(--warm); border: 1px solid #ffe0b6; }
.chord-readout { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chord-readout h3 { font-size: clamp(1.8rem,5vw,3.2rem); line-height: 1; margin-bottom: 0; }
.chord-readout span { color: var(--blue); font-size: .9rem; }
.beats { display: flex; gap: 5px; margin: 12px 0; }
.beats span { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #586b7f; border-radius: 50%; font-size: .72rem; color: var(--muted); }
.beats .active { border-color: var(--warm); background: var(--warm); color: #151f29; font-weight: 800; }
.chord-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
.chord-buttons button { min-height: 41px; min-width: 0; border: 1px solid #566b80; border-radius: 6px; background: #1a2a3a; color: var(--ink); padding: 2px; font-weight: 800; font-size: .85rem; }
.chord-buttons button[aria-pressed="true"] { background: #294967; color: #edf7ff; border-color: var(--blue); }
.demo-toggle { width: 100%; }
.demo-sound { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-size: .85rem; cursor: pointer; }
.demo-sound input { flex: none; margin: 0; width: 17px; height: 17px; accent-color: var(--blue); }
.demo-caption { font-size: .74rem; color: var(--muted); margin: 5px 0 0; }
.practice-section { padding-block: clamp(44px, 7vw, 86px); background: #18202a; border-block: 1px solid #2c3b4b; }
.practice-modes { display: flex; flex-wrap: wrap; gap: 20px clamp(24px, 6vw, 76px); margin-top: 23px; }
.practice-modes h3 { margin-bottom: 5px; font-size: .88rem; color: var(--muted); }
.practice-modes p { margin-bottom: 0; font-weight: 800; }
.practice-modes .mode-note { margin-top: 4px; color: var(--muted); font-size: .83rem; font-weight: 500; }
.lead-beta { color: var(--warm); }
.practice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); margin-top: 31px; }
.practice-grid article { border-top: 2px solid #789bc0; padding-top: 14px; }
.practice-grid h3 { margin-bottom: 8px; }
.footer { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-block: 24px; font-size: .85rem; color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 920px) {
  .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 740px) {
  .wrap { width: calc(100% - 36px); }
  .hero { background-image: linear-gradient(90deg,#0d151ff5 0%,#0d151fbc 64%,#0d151f61), url("assets/guitars.png"); background-position: 61% center; }
  .hero-content { padding-block: 60px 58px; }
  .early-access, .demo-section { grid-template-columns: 1fr; }
  .demo-section { max-width: 540px; }
}
@media (max-width: 500px) {
  .practice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .nav { min-height: 62px; }
  .nav-links > a:first-child { display: none; }
  .nav-links .button { font-size: .79rem; padding-inline: 9px; gap: 6px; }
  .desktop-break { display: none; }
  .facts { gap: 6px 18px; }
  .early-access-fields button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.walkthrough { padding-block: clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); }
.walkthrough-intro { color: var(--muted); line-height: 1.55; margin-bottom: 24px; }
.walkthrough-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.walkthrough-player { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border-radius: 12px; overflow: hidden; background: linear-gradient(#10192362, #101923b0), url("assets/guitars.png") center / cover; }
.walkthrough-player iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #101923; }
.walkthrough-links { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 14px; margin-top: 10px; font-size: .82rem; color: var(--muted); }
.walkthrough-links a { color: var(--blue); }
.walkthrough-chords { padding: clamp(12px, 2vw, 20px); border: 1px solid #49617a; border-radius: 12px; background: #182737; }
.walkthrough-chord-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.walkthrough-chord { min-height: 186px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 8px; text-align: center; }
.walkthrough-chord.current { border-color: #789bc0; background: #22384d; }
.walkthrough-chord h3 { margin: 0; color: var(--muted); font-size: .81rem; }
.walkthrough-chord strong { display: block; margin: 4px 0 7px; color: var(--blue); font-size: 1.65rem; }
.walkthrough-diagram { max-width: 142px; padding-inline: 12px; margin-inline: auto; }
#walkthrough-status { margin: 10px 0 4px; color: var(--ink); font-size: .88rem; line-height: 1.45; }
.walkthrough-note { margin: 0; color: var(--muted); font-size: .78rem; }
@media (max-width: 740px) { .walkthrough-grid { grid-template-columns: minmax(0, 1fr); } }

.walkthrough-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(182px, 20%); gap: clamp(22px, 3vw, 40px); align-items: center; }
.phone-preview { margin: 0; min-width: 0; padding: 14px 11px 0; text-align: center; background: radial-gradient(ellipse at 50% 42%, #28486470, transparent 71%); }
.phone-preview-link { display: block; width: min(100%, 234px); margin: 0 auto; perspective: 950px; border-radius: 25px; }
.phone-preview-frame {
  display: block;
  position: relative;
  padding: 11px 5px 7px;
  border: 2px solid #76889a;
  border-radius: 24px;
  background: #0a1017;
  box-shadow: 4px 2px 0 #354454, 6px 3px 0 #202c3b, 12px 18px 26px #05090e9c;
  transform: rotate(-4deg) rotateY(-12deg);
}
.phone-preview-frame::before { content: ""; position: absolute; top: 4px; left: 42%; right: 42%; height: 2px; border-radius: 3px; background: #56687a; }
.phone-preview-frame::after { content: ""; position: absolute; top: 24%; right: -5px; width: 2px; height: 9%; border-radius: 1px; background: #8e9ca9; }
.phone-preview-frame img { display: block; width: 100%; height: auto; border-radius: 14px; }
.phone-preview figcaption { margin-top: 18px; color: var(--muted); font-size: .82rem; font-weight: 700; }
@media (max-width: 1000px) {
  .walkthrough-showcase { grid-template-columns: minmax(0, 1fr); }
  .phone-preview { max-width: 380px; width: 100%; justify-self: center; }
}

.app-screens { padding-block: clamp(44px, 7vw, 84px); }
.app-screens-intro { margin: 0 0 24px; color: var(--muted); }
.app-screens-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, .63fr); gap: clamp(16px, 3vw, 28px); }
.app-screen { margin: 0; min-width: 0; }
.app-screen a { display: block; border: 1px solid #49617a; border-radius: 10px; background: #182737; }
.app-screen a:hover, .app-screen a:focus-visible { border-color: var(--blue); }
.app-screen img { display: block; width: 100%; height: auto; border-radius: 9px; }
.app-screen figcaption { margin-top: 12px; }
.app-screen h3 { margin: 0 0 5px; font-size: 1.05rem; }
.app-screen p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.app-screen-tuner a { max-width: 228px; }
@media (max-width: 920px) {
  .app-screens-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .app-screens-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .app-screen-tuner a { max-width: 200px; }
}

.screenshot-dialog { width: min(1200px, calc(100% - 16px)); max-width: none; max-height: calc(100% - 16px); padding: 0; color: var(--ink); background: #101923; border: 1px solid #52677c; border-radius: 12px; overflow: hidden; }
.screenshot-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.screenshot-dialog::backdrop { background: #070d15d9; }
.screenshot-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #182737; }
.screenshot-header h2 { margin: 0; font-size: clamp(1rem, 3vw, 1.25rem); line-height: 1.2; letter-spacing: -.02em; }
.screenshot-actions { display: flex; gap: 6px; }
.screenshot-actions .button { min-height: 44px; padding: 6px 10px; color: var(--ink); background: #22384d; white-space: nowrap; font-size: .85rem; }
.screenshot-actions .button:disabled { opacity: .55; }
.screenshot-scroll { overflow: auto; overscroll-behavior: contain; }
.screenshot-scroll:focus-visible { outline: 2px solid var(--warm); outline-offset: -2px; }
.screenshot-scroll img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); margin-inline: auto; }
.screenshot-scroll.zoomed img { max-width: none; max-height: none; }