@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap";:root{--bg: #f6f1e7;--panel: #fffdf8;--ink: #2a2118;--muted: #6f6254;--line: #e4d9c6;--accent: #b4532a;--accent-ink: #fff8f0;--accent-soft: #f6e0d2;--pro: #3f3a8c;--pro-soft: #e7e5fb;--string: #c9bba4;--highlight: #ffd76a;--radius: 14px;--shadow: 0 1px 2px rgb(60 40 20 / 6%), 0 8px 24px rgb(60 40 20 / 6%);--serif: "Fraunces", Georgia, serif;--sans: "Inter", system-ui, -apple-system, sans-serif;--mono: "JetBrains Mono", ui-monospace, monospace;color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #1b1713;--panel: #25201a;--ink: #f1e8da;--muted: #b3a591;--line: #3b3228;--accent: #e0794b;--accent-ink: #1b1713;--accent-soft: #3e2a1f;--pro: #a9a3ff;--pro-soft: #2c2a4a;--string: #5a4d3e;--highlight: #7a5c10;--shadow: 0 1px 2px rgb(0 0 0 / 30%);color-scheme:dark}.staff svg path,.staff svg text{fill:var(--ink);stroke:var(--ink)}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans)}h1,h2,h3{font-family:var(--serif);line-height:1.15;margin:0}a{color:inherit}.muted{color:var(--muted);font-size:.92rem;margin:.4rem 0 0}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem clamp(1rem,4vw,2.5rem);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}.brand{font:700 1.3rem var(--serif);text-decoration:none;display:flex;align-items:baseline;gap:.35rem}.brand-sub{font:500 .8rem var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.ai-button{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.95rem;background:var(--pro);color:#fff;box-shadow:var(--shadow);transition:transform .15s ease}@media(prefers-color-scheme:dark){.ai-button{color:#14122b}}.ai-button:hover{transform:translateY(-1px)}.spark{font-size:.85em}.page{max-width:1040px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem) 3rem}.hero{padding:clamp(2rem,6vw,3.5rem) 0 1.5rem}.hero h1{font-size:clamp(2rem,5vw,3.1rem);max-width:18ch}.lede{font-size:1.12rem;color:var(--muted);max-width:60ch;margin:.9rem 0 0}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:600;color:var(--pro);margin:0 0 .6rem}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1rem,3vw,1.6rem);box-shadow:var(--shadow);margin-bottom:1.5rem}.label{font-weight:600;display:block;margin-bottom:.4rem}textarea{width:100%;font:.92rem/1.5 var(--mono);padding:.8rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical}select{font:inherit;padding:.45rem .6rem;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);max-width:100%}.input-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1rem}.input-row .btn-primary{margin-left:auto}.inline{display:flex;align-items:center;gap:.5rem;font-weight:500}.error{color:#b3261e;font-weight:500;margin:.8rem 0 0}.btn{font:600 .92rem var(--sans);padding:.55rem 1rem;border-radius:10px;cursor:pointer;text-decoration:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);display:inline-block}.btn:hover{border-color:var(--muted)}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn-primary:hover{filter:brightness(1.05);border-color:var(--accent)}.btn:focus-visible,.ai-button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid var(--highlight);outline-offset:2px}.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;margin-bottom:1rem}.section-head h2{font-size:1.6rem}.chips{display:flex;flex-wrap:wrap;gap:.4rem}.chip{background:var(--accent-soft);border-radius:999px;padding:.15rem .7rem;font-size:.85rem;font-weight:500}.facts{margin:0 0 1rem;padding-left:1.1rem;color:var(--muted);font-size:.95rem}.facts li{margin:.15rem 0}.staff{overflow-x:auto;margin:.5rem 0}.staff .playing,.staff .playing path{fill:var(--accent)!important;stroke:var(--accent)!important}.tune-tab summary{cursor:pointer;font-weight:600;margin:.5rem 0}.drill-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.25rem}.drill-nav a{font-size:.85rem;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;background:var(--panel)}.drill-nav a:hover{border-color:var(--accent)}.drill{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1rem,3vw,1.6rem);margin-bottom:1.25rem;box-shadow:var(--shadow);scroll-margin-top:5rem}.drill-head{display:flex;gap:1rem;align-items:flex-start}.drill-num{font:700 1.1rem var(--serif);color:var(--accent);background:var(--accent-soft);border-radius:10px;padding:.2rem .55rem}.drill h3{font-size:1.25rem}.why{color:var(--muted);margin:.35rem 0 0;max-width:70ch}.tab{display:flex;font:.9rem var(--mono);margin:.75rem 0;border-radius:10px;background:var(--bg);padding:.4rem .25rem .6rem}.tab-scroll{display:flex;overflow-x:auto;scroll-behavior:smooth}.tab-col{display:grid;grid-template-rows:1.4rem repeat(4,1.6rem);min-width:2.3rem;border-radius:6px}.tab-names{min-width:1.8rem;color:var(--muted);font-weight:500;position:sticky;left:0}.tab-label{font:600 .72rem var(--sans);color:var(--accent);text-align:left;white-space:nowrap;padding-left:.2rem}.tab-cell{position:relative;display:flex;align-items:center;justify-content:center}.tab-col:not(.tab-names) .tab-cell:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--string)}.fret{position:relative;background:var(--bg);padding:0 .15rem;font-weight:500}.fret[data-finger]:not([data-finger=""]):after{content:attr(data-finger);position:absolute;right:-.55rem;bottom:-.35rem;font:600 .62rem var(--sans);color:var(--muted)}.tab-col.playing,.tab-col.playing .fret{background:var(--highlight)}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem;margin-top:.5rem}.tempo{display:flex;align-items:center;gap:.5rem}.tempo input{accent-color:var(--accent);width:9rem}.tempo-value{font:500 .85rem var(--mono);min-width:4.5rem}.loop{display:flex;align-items:center;gap:.3rem;font-size:.92rem}.loop input{accent-color:var(--accent)}.ad{display:grid;place-items:center;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;margin:0 auto 1.5rem}.ad-banner{min-height:90px;max-width:728px}.ad-box{min-height:250px;max-width:336px}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1.5rem}.feature{margin:0}.feature h3{font-size:1.1rem;margin-bottom:.4rem}.feature p{margin:0;color:var(--muted)}.chat-sample{display:flex;flex-direction:column;gap:.7rem}.bubble{max-width:78%;padding:.7rem .9rem;border-radius:14px}.bubble p{margin:.15rem 0 0}.who{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.bubble-you{align-self:flex-end;background:var(--accent-soft)}.bubble-tool{align-self:center;max-width:100%;font:.82rem var(--mono);background:var(--bg);border:1px dashed var(--line)}.bubble-ai{align-self:flex-start;background:var(--pro-soft)}.pricing{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}.pricing h2{font-size:2rem}.pricing-actions{display:flex;gap:.75rem;flex-wrap:wrap}.ai .btn-primary{background:var(--pro);border-color:var(--pro);color:#fff}.footer{border-top:1px solid var(--line);padding:1.5rem clamp(1rem,4vw,2.5rem);color:var(--muted);font-size:.85rem;text-align:center}.footer p{margin:.2rem 0}@media(max-width:600px){.brand-sub{display:none}.ai-button{padding:.5rem .8rem;font-size:.85rem}.input-row .btn-primary{margin-left:0;width:100%}.bubble{max-width:100%}}
