@font-face{font-family:Golos;src:url('assets/fonts/GolosText.ttf') format('truetype');font-weight:400 900;font-display:swap}
:root{--paper:#f7f4ed;--surface:#fffdfa;--white:#fff;--ink:#263a32;--muted:#68726b;--accent:#b64532;--accent-dark:#963522;--green:#173c34;--sage:#e1e8d9;--peach:#f9e9d8;--line:#e3dfd5;--shadow:0 9px 28px #283b3210;--radius:12px;color-scheme:light}
:root[data-theme=dark]{--paper:#17251f;--surface:#22342b;--white:#25392e;--ink:#f1f1e5;--muted:#b1beaf;--accent:#e78e70;--accent-dark:#f4a58a;--green:#102e27;--sage:#263b30;--peach:#3c3328;--line:#435046;--shadow:0 9px 28px #0003;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 Golos,Arial,sans-serif;transition:background-color .25s,color .25s}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.65}button{border:0;background:none}a{color:inherit;text-decoration:none}svg{display:block}img{max-width:100%;height:auto}button svg,a svg{pointer-events:none}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}input:focus-visible{outline-offset:2px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.14;letter-spacing:-.035em}h2{font-size:34px;font-weight:700}h3{font-size:20px;letter-spacing:-.025em}p{color:var(--muted)}[hidden]{display:none!important}.container{width:min(1200px,calc(100% - 48px));margin-inline:auto}.section{padding-block:66px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}.section-heading .eyebrow{margin-bottom:9px}.section-side-note{font-size:13px;color:var(--muted)}.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--muted)}.text-link{display:inline-flex;align-items:center;gap:9px;padding:3px 0;color:var(--accent);font-size:13px;font-weight:500;position:relative;white-space:nowrap}.text-link:after{content:'';height:1px;position:absolute;bottom:0;left:0;right:28px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .18s}.text-link:hover:after{transform:scaleX(1)}.text-link .icon{transition:transform .18s}.text-link:hover .icon{transform:translateX(4px)}.icon{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.icon-button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--surface);transition:background .18s,transform .18s,border-color .18s}.icon-button:hover{background:var(--peach);border-color:var(--accent)}.icon-button:active{transform:scale(.94)}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:43px;padding:11px 19px;border:1px solid transparent;border-radius:7px;font-size:13px;font-weight:500;transition:background .18s,box-shadow .18s,transform .18s}.button .icon{width:17px;height:17px;transition:transform .18s}.button:hover .icon{transform:translateX(3px)}.button:active{transform:translateY(1px)}.button.primary{background:var(--accent);color:#fff}.button.primary:hover{background:var(--accent-dark);box-shadow:0 4px 12px #b6453225}.button.secondary{background:var(--surface);border-color:var(--line);color:var(--accent)}.button.secondary:hover{background:var(--peach);border-color:var(--accent)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;top:10px;left:10px;z-index:99;background:var(--green);color:white;padding:10px 20px;border-radius:6px;transform:translateY(-150%)}.skip-link:focus{transform:none}
/* A compact header, with four living strings in the mark. */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 94%,transparent);transition:box-shadow .2s,background .2s;backdrop-filter:blur(12px)}.header-inner{min-height:88px;display:flex;align-items:center;gap:24px;transition:min-height .2s}.scrolled .header-inner{min-height:70px}.site-header.scrolled{box-shadow:0 3px 16px #172f2712;background:var(--paper)}.brand{display:inline-flex;align-items:center;gap:9px;flex:none}.brand-mark{width:30px;height:43px;fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round;overflow:visible}.brand-name{display:block;font-size:29px;font-weight:750;letter-spacing:-.055em;line-height:1.05}.brand-caption{display:block;font-size:9px;color:var(--muted);line-height:1.5;letter-spacing:-.01em}.primary-nav{display:flex;align-items:center;gap:19px;margin-left:auto;white-space:nowrap}.primary-nav a{font-size:11px;position:relative;padding:7px 0}.primary-nav a:after{content:'';position:absolute;height:1px;left:0;right:0;bottom:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .18s}.primary-nav a:hover{color:var(--accent)}.primary-nav a:hover:after{transform:scaleX(1)}.header-actions{display:flex;align-items:center;gap:13px;margin-left:12px}.songbook-button{display:inline-flex;align-items:center;gap:8px;min-height:38px;border:1px solid var(--line);border-radius:7px;padding:8px 12px;font-size:11px;background:var(--surface);transition:background .18s}.songbook-button>.icon{width:18px;height:18px;color:var(--accent);transition:transform .18s}.songbook-button:hover{background:var(--peach)}.songbook-button:hover>.icon{transform:scale(1.12)}.songbook-count{display:grid;place-items:center;min-width:17px;height:17px;border-radius:50%;background:var(--sage);font-size:9px}.theme-toggle{border:0;background:transparent;width:35px;height:35px}.theme-toggle svg{transition:transform .3s}.theme-toggle[aria-pressed=true] svg{transform:rotate(35deg)}.menu-toggle{display:none}
/* The first screen stays inside the same 1200px grid. */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 70% 50%,#efdcc833,transparent 60%)}.hero-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:24px;align-items:center;min-height:548px;padding-block:26px 44px}.hero-copy{position:relative;z-index:3;padding-block:24px}.hero .eyebrow{margin-bottom:21px}.tiny-strings{color:var(--accent);font-size:16px;margin-right:6px}.hero h1{font-size:59px;line-height:1.04;letter-spacing:-.055em;font-weight:750}.hero-description{font-size:18px;line-height:1.55;margin-top:20px;color:var(--ink)}.search-form{position:relative;margin-top:27px;z-index:5}.search-field{display:flex;align-items:center;gap:12px;padding:5px 5px 5px 15px;background:var(--white);border:1px solid var(--line);border-radius:9px;box-shadow:0 4px 8px #223b3210;transition:border-color .18s,box-shadow .18s}.search-field:focus-within{border-color:var(--accent);box-shadow:0 4px 18px #b6453218}.search-field>.icon{color:var(--muted);width:19px;height:19px}.search-field input{width:0;min-width:0;flex:1;background:transparent;border:0;outline:none!important;min-height:40px;font-size:12px;color:var(--ink);text-overflow:ellipsis}.search-field input::placeholder{color:#858c88;transition:opacity .11s}.search-field input.placeholder-fading::placeholder{opacity:0}.search-submit{min-width:143px;padding-inline:13px}.search-submit .icon{display:none}.search-suggestions{position:absolute;top:calc(100% + 7px);left:0;right:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 12px 32px #172f2725;overflow:hidden;padding:5px;animation:dropdown-in .16s ease-out}.search-suggestion{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:12px;border-radius:6px;text-align:left;font-size:13px}.search-suggestion small{font-size:11px;color:var(--muted)}.search-suggestion:hover,.search-suggestion.is-active{background:var(--sage)}.search-empty{padding:14px;font-size:12px}.quick-filters{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.quick-filters button{font-size:10px;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);transition:background .16s,border-color .16s,color .16s}.quick-filters button:hover{border-color:var(--accent);background:var(--peach)}.quick-filters button.is-active{background:var(--accent);border-color:var(--accent);color:#fff}.hero-link{margin-top:20px;color:var(--ink);font-size:12px;border-bottom:1px solid var(--ink);padding-bottom:2px}.hero-link .icon{width:17px;height:17px}.hero-small{margin-top:17px;font-size:10px}.mobile-break{display:none}
.hero-art{height:490px;position:relative;isolation:isolate;--mx:0;--my:0}.hero-orbit{position:absolute;width:370px;height:370px;left:59px;top:55px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#edd6b9b8,#ecd3b266 60%,#edd7bc33);transform:translate(calc(var(--mx)*-3px),calc(var(--my)*-3px));z-index:-2}.hero-orbit:before,.hero-orbit:after{content:'';position:absolute;border:1px solid #c5ac8b35;inset:-18px 12px;border-radius:50%;transform:rotate(-25deg)}.hero-orbit:after{inset:-36px 34px;transform:rotate(25deg)}.instrument-layer{position:absolute;left:5px;top:12px;width:358px;height:auto;aspect-ratio:1122/1402;z-index:1;transform:translate(calc(var(--mx)*5px),calc(var(--my)*4px)) rotate(calc(var(--mx)*1deg));transform-origin:50% 75%;transition:transform .32s ease-out}.hero-ukulele{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(9px 12px 5px #54341d20)}.hero-string-overlay{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#fff4d2;stroke-width:2;opacity:.3;pointer-events:none;overflow:visible}.hero-string{transform-box:fill-box;transform-origin:center;transition:stroke .2s}.botanical{position:absolute;fill:#81917680;stroke:#74846b90;stroke-width:1.2;z-index:-1;transition:transform .5s ease-out}.botanical g{stroke:none}.botanical-left{height:300px;left:-3px;top:151px;transform:rotate(-20deg) translate(calc(var(--mx)*-5px),calc(var(--my)*-3px))}.botanical-right{height:293px;right:31px;top:-24px;transform:rotate(31deg) translate(calc(var(--mx)*-6px),calc(var(--my)*-4px))}.hero-chord-card{position:absolute;z-index:2;right:0;top:95px;width:184px;border:1px solid #e5dfd0;background:color-mix(in srgb,var(--surface) 91%,transparent);border-radius:14px;padding:16px 13px 13px;box-shadow:0 13px 24px #5f57390b;transform:translate(calc(var(--mx)*-2px),calc(var(--my)*-2px));transition:transform .32s ease-out}.hero-chord-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.hero-chord-tabs button{height:32px;border:1px solid var(--line);border-radius:5px;font-size:12px;transition:background .18s,color .18s,border-color .18s}.hero-chord-tabs button:hover{background:var(--peach)}.hero-chord-tabs button.is-active{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 2px 4px #b6453218}.hero-chord-body{display:flex;align-items:center;gap:5px;margin-block:14px 8px;min-height:123px}.hero-chord-body>div{width:83px;flex:none}.hero-chord-body .chord-svg{width:83px;height:125px}.listen-button{display:flex;align-items:center;gap:6px;padding:0;font-size:9px;white-space:nowrap}.play-circle{display:grid;place-items:center;position:relative;width:26px;height:26px;border-radius:50%;background:var(--accent);color:white}.play-circle>.icon{width:16px;height:16px}.play-progress{position:absolute;inset:-3px;width:32px!important;height:32px;fill:none;stroke:var(--accent);stroke-width:1.5;transform:rotate(-90deg)}.play-progress circle{stroke-dasharray:113.1;stroke-dashoffset:calc(113.1*(1 - var(--progress,0)));opacity:0}.is-playing .play-progress circle{opacity:1}.string-labels{display:flex;justify-content:space-around;padding:10px 7px 6px;border-top:1px solid var(--line);font-size:12px;font-weight:500}.chord-card-caption{display:block;text-align:center;font-size:8px;color:var(--muted);margin-top:4px}.hero-art-caption{position:absolute;right:21px;bottom:10px;font-size:10px;font-style:italic;line-height:1.5;color:var(--muted);text-align:right}.floating-note{position:absolute;left:50%;top:65%;color:var(--accent);font-size:26px;opacity:0;pointer-events:none}.note-two{left:57%;top:59%;font-size:19px}.note-three{left:44%;top:55%;font-size:21px}.note-four{left:62%;top:68%;font-size:16px}.floating-note.show{animation:float-note 1.6s ease-out both}.note-two.show{animation-delay:.14s}.note-three.show{animation-delay:.25s}.note-four.show{animation-delay:.36s}.plucked{animation:string-vibration .55s ease-out;stroke:var(--accent)!important}.introduced .instrument-layer{animation:instrument-hello 1.2s ease-out}
/* Songs */
.recent-band{background:var(--white);border-block:1px solid color-mix(in srgb,var(--line) 60%,transparent)}.recent-inner{display:flex;align-items:center;min-height:64px;gap:28px}.recent-inner>strong{font-size:12px;white-space:nowrap}.recent-list{flex:1;display:flex;gap:18px;align-items:center;min-width:0}.recent-list .song-row{border:0;border-left:1px solid var(--line);padding:0 0 0 18px;flex:1;min-width:0;background:transparent!important;min-height:34px;gap:8px}.recent-list .song-row:nth-child(n+4){display:none}.recent-list .song-cover,.recent-list .song-badges{display:none}.recent-list .song-main:before{content:'♪';font-size:18px;color:var(--green);margin-right:9px}.recent-list .song-title{font-size:11px}.recent-list .song-artist{font-size:9px}.recent-list .heart-button{width:24px;height:26px}.recent-list .heart-button svg{width:15px;height:15px}.recent-empty{font-size:11px;color:var(--muted);padding-left:20px;border-left:1px solid var(--line)}.songs-section{padding-top:61px}.song-tabs{display:flex;gap:6px;margin-top:-8px;margin-bottom:22px}.song-tabs button{padding:7px 16px;border:1px solid transparent;border-radius:30px;font-size:12px;transition:color .18s,background .18s,border-color .18s}.song-tabs button:hover{border-color:var(--line)}.song-tabs button.is-active{background:var(--accent);color:#fff}.songs-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}.song-row{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid var(--line);min-width:0;min-height:72px;border-radius:7px;transition:background .16s}.song-row:hover{background:color-mix(in srgb,var(--peach) 52%,transparent)}.song-main{display:flex;align-items:center;min-width:0;flex:1;padding:0;text-align:left;gap:12px}.song-cover{display:block;width:47px;height:47px;flex:none;border-radius:6px;overflow:hidden;background:#d1c9b3;position:relative;isolation:isolate;background-image:linear-gradient(165deg,#deb78766,#1a514888),url('assets/collections-atlas.webp');background-size:cover,450% auto;background-position:center,50% 27%;transition:transform .2s}.song-row:hover .song-cover{transform:scale(1.04)}.song-cover:after{content:'♪';position:absolute;inset:0;display:grid;place-items:center;color:#fff9;font-size:24px;text-shadow:0 1px 5px #0005}.cover-0,.cover-6{background-position:center,10% 26%}.cover-1,.cover-7{background-position:center,50% 25%}.cover-2,.cover-8{background-position:center,95% 25%}.cover-3,.cover-9{background-position:center,10% 55%}.cover-4,.cover-10{background-position:center,50% 55%}.cover-5,.cover-11{background-position:center,95% 55%}.song-info{display:block;min-width:0}.song-title{display:block;font-size:13px;font-weight:600;line-height:1.35;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .16s}.song-row:hover .song-title{color:var(--accent)}.song-artist{display:block;color:var(--muted);font-size:10px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-badges{display:flex;align-items:center;gap:5px;flex:none}.badge{display:inline-flex;align-items:center;white-space:nowrap;font-size:8px;padding:4px 6px;background:color-mix(in srgb,var(--sage) 52%,var(--surface));border-radius:20px;color:var(--muted)}.badge-new{background:var(--peach);color:var(--accent)}.heart-button{display:grid;place-items:center;width:31px;height:31px;padding:7px;flex:none;border-radius:50%;color:var(--accent);transition:background .16s,transform .16s}.heart-button svg{width:19px;height:19px;fill:transparent;transition:fill .16s}.heart-button:hover{background:var(--peach);transform:scale(1.1)}.heart-button.is-active svg{fill:var(--accent)}.heart-button.is-active{animation:heart-pop .26s ease-out}.heart-button:active{transform:scale(.9)}.text-button,.inline-link{padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* Chord matching */
.chord-match{background:var(--green);color:#fffbed;position:relative;overflow:hidden;padding-block:48px}.sound-waves{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#c5cfad;stroke-width:1;opacity:.07;pointer-events:none}.match-grid{position:relative;display:grid;grid-template-columns:1.55fr 1fr;gap:60px;align-items:center}.chord-match h2{font-size:34px;letter-spacing:-.04em}.light-eyebrow{color:#c1cbb9;margin-bottom:12px}.section-description{font-size:13px;margin-top:14px;color:#d4dbcd}.chord-picker{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.chord-picker button{width:43px;height:43px;display:grid;place-items:center;border:1px solid #71847a;border-radius:6px;color:#f5f5e7;font-size:15px;transition:transform .16s,background .16s,border-color .16s}.chord-picker button:hover{background:#ffffff13;transform:translateY(-2px);border-color:#d0d9c8}.chord-picker button.is-active{background:#b64532;border-color:#c85b45;color:#fff}.chord-picker button.is-active:after{content:'✓';font-size:7px;position:absolute;bottom:3px;right:5px}.chord-picker button{position:relative}.match-meta{display:flex;align-items:center;gap:14px;color:#c2ccbe;font-size:10px;margin-top:11px}.match-meta>span:last-child{margin-left:auto}.match-meta button{font-size:10px;color:#e3d3bc;text-decoration:underline;padding:0}.match-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.check-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #6c8073;border-radius:6px;font-size:10px;padding:10px 9px;cursor:pointer}.check-pill input{width:12px;height:12px;accent-color:#bc4d36;margin:0}.match-controls .button{font-size:11px;padding:10px 12px;min-height:38px;background:#b64532}.match-preview{min-width:0}.match-preview-caption{display:block;font-size:11px;color:#d0d9ca;margin-bottom:12px}.match-results{background:#faf9f3;color:#263a32;border-radius:10px;padding:7px 12px;min-height:176px;box-shadow:0 12px 25px #09291c24}.match-results .song-row{padding:8px 0;gap:7px;min-height:53px;border-color:#e2e5d9;border-radius:0}.match-results .song-row:last-child{border-bottom:0}.match-results .song-cover{width:33px;height:35px}.match-results .song-title{font-size:10px}.match-results .song-artist{font-size:8px;color:#677166}.match-results .song-badges{max-width:105px;flex-wrap:wrap;gap:3px}.match-results .song-badges .badge{font-size:7px;color:#5f6a61;background:#eeeee4;padding:3px 5px}.match-results .song-badges .badge:nth-child(2){display:none}.match-results .heart-button{width:24px;height:24px;padding:4px;color:#b64532}.match-caption{font-size:8px;color:#667064;margin-block:3px 1px}.match-hint,.match-results .dialog-empty{font-size:12px;color:#586456;padding:20px 4px}.match-help{display:flex;align-items:center;gap:5px;font-size:9px;color:#d1d9c9;margin-top:12px}.match-help .icon{width:13px;height:13px}
/* Illustrated collections */
.playlists-section{padding-top:62px}.playlists-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}.playlist-card{position:relative;isolation:isolate;overflow:hidden;min-height:236px;border-radius:11px;border:1px solid #d8cfba;text-align:left;background:#e9e1cb;transition:transform .22s,box-shadow .22s,border-color .22s;padding:0}.playlist-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px #263a3218;border-color:var(--accent)}.playlist-art{display:block;position:absolute;left:0;right:0;bottom:0;height:139px;z-index:-2;transition:transform .35s;transform-origin:50% 80%;opacity:.98}.playlist-art svg{width:100%;height:100%}.playlist-card:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#eee7d5 0%,#eee7d5 25%,#eee7d5b0 47%,#eee7d500 73%);pointer-events:none}.playlist-card:hover .playlist-art{transform:scale(1.035)}.playlist-card:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(180px at var(--px,50%) var(--py,50%),#fff6,transparent);opacity:0;transition:opacity .2s}.playlist-card:hover:after{opacity:.4}.playlist-content{display:flex;flex-direction:column;min-height:236px;padding:20px 22px;position:relative;z-index:2;color:#263a32}.playlist-kicker{font-size:9px;letter-spacing:.06em;margin-bottom:8px;color:#617058}.playlist-content strong{font-size:25px;line-height:1.13;letter-spacing:-.04em;font-weight:650;max-width:265px}.playlist-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;font-size:9px;padding-top:26px;text-shadow:0 1px 8px #fff;color:#263a32}.round-arrow{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#fffc;font-size:21px;line-height:1;box-shadow:0 2px 4px #19271c13;transition:color .2s,background .2s,transform .2s;text-shadow:none;flex:none}.playlist-card:hover .round-arrow{background:#b64532;color:#fff;transform:translateX(3px)}.playlist-fire{background:#1e3b38;border-color:#243f3a}.playlist-fire:before{background:linear-gradient(180deg,#183c36 0%,#183c36 26%,#183c36aa 49%,#183c3600 80%)}.playlist-fire .playlist-content,.playlist-fire .playlist-bottom{color:#fff9e8;text-shadow:0 1px 7px #000}.playlist-fire .playlist-kicker{color:#d2d1b5}.fire-glow{position:absolute;width:150px;height:100px;bottom:0;left:45%;background:radial-gradient(ellipse,#f9bc534f,transparent 65%);opacity:0;filter:blur(10px);transition:opacity .3s;pointer-events:none}.playlist-fire:hover .fire-glow{opacity:1;animation:firelight 1.8s ease-in-out infinite}.playlist-friends,.playlist-friends:before{background-color:#e8dfce}.playlist-picking{background:#e5c6a2}.playlist-picking:before{background:linear-gradient(180deg,#ead5bc 0%,#ead5bc 28%,#ead5bcb0 50%,#ead5bc00 76%)}.playlist-cinema{background:#e2d4b6}.playlist-world{background:#d9d9bf}
/* Functional music tools */
.tools-section{background:var(--sage);padding-block:44px 48px}.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.tool-card{background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:12px;padding:23px 24px;text-align:center;min-width:0;box-shadow:0 3px 5px #263a3203;transition:box-shadow .2s,transform .2s}.tool-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.tool-title{display:flex;align-items:center;gap:9px;text-align:left;margin-bottom:19px}.tool-title h3{font-size:18px}.tool-mark{color:#7b9d80;font-size:15px;letter-spacing:-3px;width:16px;overflow:hidden}.tool-subtitle{margin-left:auto;font-size:10px;color:var(--muted)}.tuner-face{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:4px;height:98px}.tuner-gauge{width:148px;height:90px;position:relative;overflow:hidden;flex:none}.tuner-scale{position:absolute;width:144px;height:144px;border-radius:50%;left:2px;top:4px;background:repeating-conic-gradient(from -90deg,#728574 0deg 1deg,transparent 1deg 7deg);mask:radial-gradient(circle,transparent 60%,#000 61% 68%,transparent 69%);clip-path:inset(0 0 50%)}.tuner-center{position:absolute;width:26px;height:73px;bottom:6px;left:61px;background:linear-gradient(180deg,#9cb99b50,#9cb99b00);clip-path:polygon(0 0,100% 0,52% 100%)}.tuner-needle{position:absolute;left:71px;width:5px;height:70px;bottom:4px;border-radius:100% 100% 3px 3px;background:#3d7859;transform-origin:50% 100%;transform:rotate(0deg);transition:transform .1s linear}.tuner-needle:after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;bottom:-3px;left:-3.5px;background:#315d44}.gauge-low,.gauge-high{position:absolute;bottom:4px;font-size:12px;color:var(--muted)}.gauge-low{left:0}.gauge-high{right:0}.tuner-reading strong{display:block;font-size:43px;font-weight:550;line-height:1}.tuner-reading span{display:block;color:var(--muted);font-size:9px;max-width:90px;margin-top:8px}.tuner-reading [data-state=tuned]{color:#40794f}.tool-message{font-size:11px;margin-block:13px 10px;min-height:17px}.reference-strings{display:flex;justify-content:center;gap:8px;margin-bottom:15px}.reference-strings button{width:27px;height:27px;border:1px solid var(--line);border-radius:5px;font-size:12px;background:var(--paper);transition:background .15s,transform .15s}.reference-strings button:hover{background:var(--sage);transform:translateY(-2px)}.reference-strings button.is-playing{background:var(--accent);color:#fff}.tool-actions{display:flex;justify-content:center;gap:8px;min-height:43px}.tool-footnote{font-size:8px;margin-top:13px;line-height:1.5;color:var(--muted)}.mini-chord-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:2px}.mini-chord-grid button{border:1px solid transparent;padding:3px 0;border-radius:6px;transition:border .15s,background .15s}.mini-chord-grid button:hover,.mini-chord-grid button.is-active{border-color:var(--line);background:var(--paper)}.mini-chord-grid .chord-svg{width:100%;height:101px}.tool-chord-preview:empty{display:none}.tool-chord-preview .chord-svg{width:95px;height:130px;margin:0 auto}.chords-card .button{margin-top:5px}.bpm-label{display:flex;flex-direction:column;align-items:center;margin-top:4px}.bpm-label input{width:126px;background:transparent;border:0;padding:0;text-align:center;color:var(--ink);font-size:50px;line-height:1;font-weight:450;appearance:textfield;-moz-appearance:textfield}.bpm-label input::-webkit-inner-spin-button,.bpm-label input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bpm-label>span{font-size:10px;color:var(--muted);letter-spacing:.13em}.metronome-controls{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:14px}.square{width:32px;height:32px;border-radius:7px;font-size:21px}.metronome-play{width:47px;height:47px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;transition:transform .18s,box-shadow .18s}.metronome-play:hover{transform:scale(1.06);box-shadow:0 3px 13px #b6453238}.metronome-play .icon{width:22px;height:22px}.bpm-range{width:90%;margin:20px auto 0;height:4px;accent-color:var(--green);cursor:pointer;display:block}.beat-indicator{display:flex;justify-content:center;gap:10px;min-height:14px;margin-top:14px}.beat-dot{width:7px;height:7px;background:var(--line);border-radius:50%;transition:background .08s,transform .08s}.beat-dot.is-active{background:var(--accent);transform:scale(1.25)}.beat-dot.is-active.is-accent{box-shadow:0 0 0 3px #b6453220}.mute-control{display:flex;align-items:center;justify-content:center;gap:6px;font-size:9px;color:var(--muted);cursor:pointer}.mute-control input{accent-color:var(--accent);width:12px;height:12px;margin:0}.chord-svg{width:100%;height:auto;color:var(--ink)}
/* Artists, lessons, answers */
.artists-section{padding-block:52px 25px}.artists-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:22px}.artist-card{text-align:center;padding:0;min-width:0;font-size:11px;display:flex;flex-direction:column;gap:11px;align-items:center}.artist-photo{display:block;width:108px;max-width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;border:3px solid transparent;outline:1px solid transparent;outline-offset:3px;transition:outline .2s,border-color .2s}.artist-photo svg{width:100%;height:100%;border-radius:50%;transition:transform .25s}.artist-card:hover .artist-photo{outline-color:var(--accent);border-color:var(--paper)}.artist-card:hover .artist-photo svg{transform:scale(1.045)}.artist-card>span:last-child{border-bottom:1px solid transparent;transition:color .18s,border-color .18s}.artist-card:hover>span:last-child{color:var(--accent);border-color:var(--accent)}.fresh-section{padding-top:29px;padding-bottom:55px}.fresh-section .song-row{min-height:69px}.learn-section{background:var(--peach);padding-block:43px 39px}.learn-section h2{font-size:31px}.learn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:27px;position:relative}.learn-grid:before{content:'';position:absolute;left:10%;right:10%;top:78px;border-top:1px dashed #ad916f;transform:rotate(-2deg);opacity:.65}.learn-step{padding:0;position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;min-width:0}.step-number{display:grid;place-items:center;width:25px;height:25px;position:absolute;top:11px;left:13px;border-radius:50%;background:#b64532;color:white;font-size:13px;z-index:2;transition:transform .2s,box-shadow .2s}.learn-step:hover .step-number{transform:scale(1.1);box-shadow:0 0 0 5px #b6453210}.learn-illustration{position:relative;height:130px;width:180px;display:flex;align-items:center;justify-content:center;transition:transform .25s}.learn-step:hover .learn-illustration{transform:translateY(-4px) rotate(-1deg)}.learn-step strong{font-size:13px;letter-spacing:-.02em;line-height:1.3;margin-top:9px}.learn-step>span:not([class]){font-size:10px;color:var(--muted);margin-top:7px}.step-link{font-size:9px;color:var(--accent);margin-top:10px;border-bottom:1px solid transparent;transition:border-color .18s}.learn-step:hover .step-link{border-color:var(--accent)}.headstock-shape{width:65px;height:98px;display:block;background:linear-gradient(100deg,#ab623e,#d99462 60%,#a45e39);border:2px solid #9d5d3c;border-radius:9px 9px 20px 20px;box-shadow:3px 6px 6px #70442a24;color:#fff8d9;font-size:9px;padding-top:5px;text-align:center;transform:rotate(19deg);position:relative}.headstock-shape:after{content:'';position:absolute;top:3px;bottom:-19px;left:20px;width:27px;background:repeating-linear-gradient(90deg,transparent 0 5px,#e7d7b4 5px 6px);opacity:.8}.headstock-shape>span{display:block;color:#383f31;font-size:24px;letter-spacing:17px;margin-left:-9px;white-space:nowrap;line-height:1.7}.tuning-label{font-size:13px;padding:5px 6px;background:#173c34;color:#e4efc9;position:absolute;right:22px;top:5px;border:3px solid #697e5b;border-radius:5px;transform:rotate(17deg)}.paper-chord{display:block;width:63px;height:93px;background:#fff8e8;box-shadow:2px 3px 5px #9d7a4625;padding:3px;border:1px solid #e0cba8;transform:rotate(-12deg);border-radius:3px;color:#263a32}.paper-chord+.paper-chord{transform:rotate(11deg);margin-left:6px;margin-top:15px}.paper-chord .chord-svg{width:100%;height:100%;color:#263a32}.rhythm-art{gap:5px;transform:rotate(-7deg);color:#b64532;font-size:40px;letter-spacing:-6px;line-height:1;background:repeating-linear-gradient(0deg,transparent 0 21px,#b5916a36 21px 22px);height:108px;margin-top:12px;margin-bottom:10px;border-block:1px solid #c7a37b66}.rhythm-art>span:nth-child(2n){color:#647f62}.learn-step:hover .rhythm-art>span{animation:rhythm-tap .4s both}.learn-step:hover .rhythm-art>span:nth-child(2){animation-delay:.09s}.learn-step:hover .rhythm-art>span:nth-child(3){animation-delay:.18s}.learn-step:hover .rhythm-art>span:nth-child(4){animation-delay:.27s}.learn-step:hover .rhythm-art>span:nth-child(5){animation-delay:.36s}.learn-step:hover .rhythm-art>span:nth-child(6){animation-delay:.45s}.notebook-art{width:130px;height:91px;background:repeating-linear-gradient(0deg,#fff5df 0 15px,#b2b09d 15px 16px);border:5px solid #b98755;border-radius:5px;box-shadow:3px 6px 5px #9f774326;transform:rotate(7deg);margin-top:17px;margin-bottom:22px}.notebook-art:before{content:'';height:100%;width:7px;position:absolute;left:47%;top:0;background:repeating-linear-gradient(#4d4b3c 0 3px,transparent 3px 8px);transform:rotate(2deg)}.notebook-art>span{font-size:24px;line-height:1.6;color:#263a32;transform:rotate(-7deg);margin-left:8px}.faq-section{padding-block:52px 62px}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 25px;align-items:start}.faq-item{border:1px solid var(--line);background:var(--surface);border-radius:8px;overflow:hidden;transition:border-color .18s,background .18s}.faq-item:hover{border-color:#b5bcae}.faq-item summary{list-style:none;padding:15px 17px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;font-weight:500}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:hover{color:var(--accent)}.faq-plus{position:relative;width:13px;height:13px;flex:none}.faq-plus:before,.faq-plus:after{content:'';position:absolute;background:var(--muted);left:1px;right:1px;top:6px;height:1px;transition:transform .2s}.faq-plus:after{transform:rotate(90deg)}.faq-item[open] .faq-plus:after{transform:rotate(0)}.faq-answer{padding:0 17px 16px;animation:faq-in .22s ease-out}.faq-answer p{font-size:11px;line-height:1.7}.faq-answer a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}.faq-answer .inline-link{font-size:11px}.site-footer{background:#173c34;color:#f5f0e1;padding-top:40px;position:relative;overflow:hidden}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr .8fr;gap:45px;position:relative}.footer-brand .brand-mark{stroke:#f5f0e1}.footer-brand .brand-name{font-size:29px}.footer-brand p{font-size:11px;color:#c6d1c0;margin-top:9px}.footer-note{display:block;font-size:9px;line-height:1.7;color:#abbba5;margin-top:14px}.footer-grid h3{font-size:11px;letter-spacing:0;font-weight:500;margin-bottom:11px;color:#f6efdd}.footer-grid>div>a:not(.brand),.footer-link{font-size:10px;color:#c2cdbb;display:block;margin:7px 0;padding:0;text-align:left;position:relative;width:fit-content}.footer-grid>div>a:not(.brand):after,.footer-link:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#e6b187;transform:scaleX(0);transform-origin:left;transition:transform .18s}.footer-grid a:hover:after,.footer-link:hover:after{transform:scaleX(1)}.footer-grid a:hover,.footer-link:hover{color:#fff5df}.footer-decoration{font-size:94px;line-height:1;align-self:center;color:#b9c09a45;position:relative;transform:rotate(-14deg);margin-left:auto}.footer-decoration>span{font-size:44px;position:absolute;left:45px;top:26px}.footer-decoration small{display:block;white-space:nowrap;font-size:9px;letter-spacing:.15em;line-height:2;margin-top:8px;transform:rotate(14deg);color:#b7c5aa}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #ced8bf20;padding-block:17px;margin-top:31px;font-size:9px;color:#a6b99f}
/* Dialogs */
.dialog{width:min(650px,calc(100% - 30px));max-height:calc(100dvh - 70px);padding:34px;border:1px solid var(--line);border-radius:17px;background:var(--surface);color:var(--ink);box-shadow:0 20px 80px #0003;overscroll-behavior:contain}.wide-dialog{width:min(900px,calc(100% - 30px))}.dialog::backdrop{background:#14271fa6;backdrop-filter:blur(4px)}.dialog[open]{animation:dialog-in .2s ease-out}.dialog h2{font-size:29px;padding-right:28px;margin:8px 0 17px}.dialog h3{font-size:19px;margin-block:20px 10px}.dialog p{font-size:13px;line-height:1.75}.dialog-description{margin-bottom:22px}.dialog-close{position:absolute;top:13px;right:13px;width:31px;height:31px;background:var(--paper)}.dialog-close .icon{width:17px;height:17px}.dialog-empty{padding:22px 5px;font-size:13px;grid-column:1/-1}.dialog-empty p+p{margin-top:9px}.dialog-empty .button{margin-top:15px}.song-detail-header .eyebrow{font-size:10px}.song-detail-chords,.song-chords-grid,.chord-diagrams{display:flex;flex-wrap:wrap;gap:12px;margin-block:20px}.song-detail-chords .chord-svg{width:85px}.chord-chips{display:flex;flex-wrap:wrap;gap:7px;margin-block:12px}.chord-chip{padding:5px 9px;background:var(--sage);border-radius:5px;font-size:12px}.song-actions,.song-detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-block:18px}.song-actions button,.song-detail-actions button{border:1px solid var(--line);border-radius:6px;padding:9px 13px;background:var(--paper)}.song-detail-meta{font-size:12px;color:var(--muted)}.song-detail-label,.demo-notice{display:inline-block;font-size:10px;color:var(--accent);background:var(--peach);border-radius:5px;padding:5px 8px}.song-detail-rhythm,.rhythm-pattern{font-size:22px;letter-spacing:.15em;line-height:1.8}.song-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.song-detail-grid .chord-svg{width:100%;max-height:160px}.lesson-body ol{padding-left:22px;color:var(--muted);font-size:13px;line-height:1.9}.lesson-body .button{margin-top:18px}.lesson-complete{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:20px}.lesson-complete input{accent-color:var(--accent)}.lesson-diagrams{display:flex;gap:12px;margin-top:18px}.lesson-diagrams .chord-svg{width:90px;max-width:24%}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);z-index:100;max-width:calc(100% - 40px);background:var(--ink);color:var(--paper);box-shadow:0 8px 30px #0002;padding:12px 18px;border-radius:10px;display:flex;gap:15px;align-items:center;font-size:12px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}.toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}.toast button{color:#eab699;padding:0;font-size:12px;text-decoration:underline}.back-top{position:fixed;right:23px;bottom:23px;z-index:30;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--surface);box-shadow:0 3px 17px #173c3425;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s}.back-top.is-visible{opacity:1;visibility:visible;transform:none}.back-top>.icon{width:18px;height:18px}.progress-ring{position:absolute;inset:0;width:46px;height:46px;fill:none;stroke:var(--line);stroke-width:1.5;transform:rotate(-90deg)}#scroll-progress{stroke:var(--accent);stroke-dasharray:132;stroke-dashoffset:calc(132*(1 - var(--progress,0)))}.noscript-message{background:var(--peach);padding:15px 24px;text-align:center;font-size:13px}
/* Motion remains an enhancement; content is present without JavaScript. */
.motion-ready .reveal:not(.is-visible){opacity:0;transform:translateY(12px)}.reveal{transition:opacity .35s ease-out,transform .35s ease-out}.reveal.is-visible{opacity:1;transform:none}@keyframes string-vibration{0%{transform:translateX(0)}15%{transform:translateX(2.7px)}30%{transform:translateX(-2.5px)}45%{transform:translateX(1.8px)}60%{transform:translateX(-1.3px)}75%{transform:translateX(.7px)}100%{transform:translateX(0)}}@keyframes float-note{0%{opacity:0;transform:translate(0,10px) rotate(-10deg)}18%{opacity:.65}100%{opacity:0;transform:translate(22px,-105px) rotate(10deg)}}@keyframes instrument-hello{0%,100%{transform:rotate(0)}40%{transform:rotate(-1deg)}68%{transform:rotate(.65deg)}}@keyframes heart-pop{0%,100%{transform:scale(1)}45%{transform:scale(1.17)}}@keyframes dropdown-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@keyframes dialog-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes firelight{0%,100%{filter:blur(10px);transform:scale(.96)}50%{filter:blur(13px);transform:scale(1.05)}}@keyframes rhythm-tap{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px);color:#173c34}}
:root[data-theme=dark] .brand-mark{stroke:#d6dfc7}:root[data-theme=dark] .hero-orbit{opacity:.45}:root[data-theme=dark] .hero-chord-card{border-color:var(--line)}:root[data-theme=dark] .botanical{opacity:.65}:root[data-theme=dark] .song-cover{filter:brightness(.85)}
@media(min-width:1280px){.songs-grid>.song-row:nth-child(odd){grid-column:1}.songs-grid>.song-row:nth-child(even){grid-column:2}.songs-grid{grid-auto-flow:row}}
@media(max-width:1150px){.primary-nav{gap:12px}.primary-nav a{font-size:10px}.header-inner{gap:14px}.header-actions{gap:8px;margin-left:0}.songbook-button{padding-inline:9px;font-size:10px}.hero h1{font-size:52px}.hero-art{height:470px}.instrument-layer{width:335px;left:-5px;top:16px}.hero-chord-card{width:165px;right:-4px;top:107px;padding-inline:10px}.hero-chord-body{gap:1px}.hero-chord-body>div{width:75px}.hero-chord-body .chord-svg{width:75px}.listen-button{gap:4px;font-size:8px}.hero-orbit{width:330px;height:330px;left:22px;top:75px}.hero-art-caption{right:5px}.match-grid{gap:35px}.chord-picker{gap:7px}.chord-picker button{width:38px;height:39px}.song-badges .badge:nth-child(2){display:none}.playlist-content strong{font-size:23px}.tool-card{padding:20px 17px}.tuner-face{gap:10px}.tuner-gauge{width:135px}.tuner-scale{left:-5px}.tuner-needle{left:65px}.tuner-center{left:55px}.artists-grid{gap:18px}.artist-photo{width:96px}.footer-grid{gap:30px}.learn-grid{gap:15px}.learn-illustration{width:156px}}
@media(max-width:960px){.container{width:min(1200px,calc(100% - 40px))}.header-inner{min-height:75px}.brand-name{font-size:26px}.brand-caption{font-size:8px}.brand-mark{height:38px;width:27px}.primary-nav{gap:10px}.primary-nav a:nth-child(4),.primary-nav a:nth-child(5){display:none}.hero-grid{grid-template-columns:1.05fr 1fr;gap:10px;min-height:510px}.hero h1{font-size:45px}.hero .eyebrow{font-size:9px;letter-spacing:.08em}.hero-description{font-size:16px}.hero-art{height:450px}.hero-chord-card{width:147px;right:-4px;padding:12px 8px}.hero-chord-tabs{gap:4px}.hero-chord-tabs button{height:28px;font-size:11px}.hero-chord-body{flex-direction:column;gap:7px;margin-top:9px}.hero-chord-body .chord-svg{width:64px;height:99px}.listen-button{font-size:9px;margin-bottom:4px}.instrument-layer{width:290px;left:-15px;top:26px}.hero-orbit{width:290px;height:290px;left:0;top:70px}.botanical-left{height:245px;left:-10px;top:155px}.botanical-right{height:240px;right:10px}.hero-art-caption{bottom:0;font-size:9px}.hero-small{font-size:9px}.search-submit{min-width:112px;padding:10px 12px;font-size:11px}.search-field{gap:8px;padding-left:11px}.search-field input{font-size:10px}.quick-filters{gap:6px}.quick-filters button{font-size:9px;padding:5px 7px}.hero-link{font-size:11px}.section{padding-block:48px}h2{font-size:29px}.section-side-note{font-size:11px}.match-grid{grid-template-columns:1.3fr 1fr;gap:25px}.chord-match h2{font-size:29px}.section-description{font-size:11px}.chord-picker button{width:34px;height:35px;font-size:12px}.chord-picker{gap:5px}.match-controls .button{width:100%;min-height:36px}.check-pill{flex:1;padding:8px 5px;justify-content:center;font-size:9px}.match-meta{font-size:9px;gap:8px}.match-meta button{font-size:9px}.playlists-grid{gap:14px}.playlist-content{padding:17px}.playlist-content strong{font-size:21px}.playlist-kicker{font-size:8px;letter-spacing:0}.playlist-card,.playlist-content{min-height:219px}.playlist-bottom{font-size:8px}.playlist-art{height:125px}.tools-grid{gap:12px}.tool-card{padding:18px 13px}.tool-title{gap:7px;margin-bottom:16px}.tool-title h3{font-size:16px}.tuner-gauge{width:114px;height:79px}.tuner-scale{width:122px;height:122px;top:10px;left:-4px}.tuner-needle{height:60px;left:55px}.tuner-center{left:44px;height:59px}.tuner-reading strong{font-size:35px}.tuner-reading span{font-size:8px;max-width:63px}.tuner-face{gap:5px}.tool-footnote{font-size:7px}.tool-message{font-size:9px}.tool-card .button{font-size:10px;padding-inline:10px;min-height:37px}.mini-chord-grid{gap:2px}.mini-chord-grid .chord-svg{height:90px}.bpm-label input{font-size:45px}.metronome-controls{gap:20px}.artists-grid{gap:14px}.artist-card{font-size:9px}.artist-photo{width:80px}.learn-section h2{font-size:27px}.learn-grid{gap:12px}.learn-step strong{font-size:11px}.learn-step>span:not([class]){font-size:9px}.learn-illustration{width:140px}.step-number{left:0}.rhythm-art{font-size:34px}.footer-grid{gap:24px;grid-template-columns:1.3fr 1fr 1fr 1fr}.footer-decoration{display:none}.recent-inner{gap:17px}.recent-inner>strong{font-size:10px}.recent-list{gap:12px}.recent-list .song-row{padding-left:12px}.song-title{font-size:12px}.song-badges .badge{font-size:7px;padding:3px 5px}.songs-grid{column-gap:22px}.song-row{gap:7px}.song-main{gap:9px}.song-cover{width:42px;height:44px}.heart-button{width:26px;padding:5px}}
@media(max-width:740px){html{scroll-padding-top:88px}.container{width:calc(100% - 32px)}.header-inner{min-height:72px;justify-content:space-between;gap:12px}.scrolled .header-inner{min-height:64px}.header-actions{gap:8px;margin-left:auto}.brand-name{font-size:27px}.brand-caption{font-size:8px}.brand-mark{width:25px;height:36px}.primary-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:15px 20px 22px;box-shadow:0 12px 15px #173c3412;grid-template-columns:1fr 1fr;gap:5px 20px;margin:0}.primary-nav.is-open{display:grid;animation:dropdown-in .18s ease-out}.primary-nav a,.primary-nav a:nth-child(4),.primary-nav a:nth-child(5){display:block;font-size:13px;padding:10px}.menu-toggle{display:grid;width:33px;height:33px;border:0;background:transparent}.songbook-button{padding:7px 9px;min-height:32px}.songbook-button>span:not(.songbook-count){display:none}.songbook-button .icon{width:17px;height:17px}.songbook-count{height:15px;min-width:15px;font-size:8px}.theme-toggle{width:30px;height:30px}.theme-toggle .icon{width:19px;height:19px}.hero-grid{grid-template-columns:1fr;gap:0;padding-top:14px;padding-bottom:22px;min-height:auto}.hero-copy{padding-block:15px 0}.hero .eyebrow{font-size:9px;margin-bottom:16px}.hero h1{font-size:clamp(37px,8.3vw,56px);line-height:1.07;letter-spacing:-.05em}.hero-description{font-size:15px;margin-top:15px}.search-form{margin-top:22px}.search-field{padding:4px 4px 4px 11px;gap:8px}.search-field input{font-size:11px;min-height:40px}.search-submit{min-width:115px;font-size:11px;min-height:40px;padding-inline:11px}.quick-filters{margin-top:14px;gap:7px}.quick-filters button{font-size:10px;padding:6px 8px}.hero-link{font-size:11px;margin-top:17px}.hero-small{display:none}.hero-art{height:365px;width:min(490px,100%);justify-self:center;margin-top:9px}.instrument-layer{width:280px;left:17px;top:0}.hero-orbit{width:279px;height:279px;left:64px;top:30px}.hero-chord-card{width:154px;right:0;top:47px}.hero-chord-body{flex-direction:row;gap:1px}.hero-chord-body>div{width:72px}.hero-chord-body .chord-svg{height:113px;width:72px}.listen-button{flex-direction:column;gap:5px;font-size:8px;min-width:46px}.hero-chord-tabs button{height:29px}.botanical-left{height:220px;top:130px;left:5px}.botanical-right{height:216px;top:-13px;right:21px}.hero-art-caption{bottom:6px;right:4px;font-size:8px}.hero-chord-card .string-labels{font-size:10px;padding-block:7px 4px}.chord-card-caption{font-size:7px}.recent-inner{min-height:65px;gap:14px;align-items:center;padding-block:12px}.recent-inner>strong{font-size:10px;max-width:83px;white-space:normal;line-height:1.35}.recent-list .song-row:nth-child(n+2){display:none}.recent-list .song-row{min-height:32px}.recent-list .song-title{font-size:10px}.recent-empty{font-size:10px;padding-left:12px}.section{padding-block:37px}.section-heading{gap:13px;margin-bottom:22px;align-items:flex-end}.section-heading .eyebrow{font-size:9px;letter-spacing:.07em;margin-bottom:7px}h2{font-size:27px;letter-spacing:-.04em}.section-side-note{display:none}.section-heading .text-link{font-size:10px;gap:4px;flex:none}.section-heading .text-link .icon{width:14px;height:14px}.song-tabs{margin-top:-3px;margin-bottom:15px;gap:2px}.song-tabs button{padding:7px 12px;font-size:11px}.songs-grid{grid-template-columns:1fr;column-gap:0}.song-row{min-height:69px;padding:9px 3px;gap:9px}.song-main{gap:11px}.song-cover{width:44px;height:46px}.song-title{font-size:12px}.song-artist{font-size:10px}.song-badges .badge{font-size:8px}.heart-button{width:31px;height:31px;padding:7px}.chord-match{padding-block:35px}.match-grid{grid-template-columns:1fr;gap:25px}.chord-match h2{font-size:29px}.section-description{font-size:12px;line-height:1.65;margin-top:12px}.chord-picker{gap:8px;margin-top:19px}.chord-picker button{width:38px;height:39px;font-size:13px}.match-meta{font-size:10px}.match-meta button{font-size:10px}.match-controls{gap:7px;margin-top:17px}.check-pill{font-size:10px;padding:10px 8px;flex:1}.match-controls .button{width:auto;flex:1;white-space:nowrap;min-height:38px;font-size:10px}.match-preview-caption{font-size:11px}.match-results{padding:9px 12px}.match-results .song-row{min-height:57px}.match-results .song-title{font-size:11px}.match-results .song-artist{font-size:9px}.match-results .song-badges .badge{font-size:8px}.match-caption{font-size:8px}.match-help{font-size:9px}.playlists-grid{grid-template-columns:1fr 1fr;gap:12px}.playlist-card,.playlist-content{min-height:210px}.playlist-content{padding:14px 12px}.playlist-content strong{font-size:21px;max-width:100%}.playlist-kicker{font-size:7px;line-height:1.4;min-height:20px;letter-spacing:0;margin-bottom:5px}.playlist-bottom{font-size:8px;text-shadow:0 1px 5px #fff;gap:5px;line-height:1.4}.round-arrow{width:27px;height:27px;font-size:18px}.playlist-art{height:108px}.playlist-card:before{background:linear-gradient(180deg,#eee7d5 0%,#eee7d5 37%,#eee7d5b0 55%,#eee7d500 82%)}.playlist-fire:before{background:linear-gradient(180deg,#183c36 0%,#183c36 37%,#183c36aa 55%,#183c3600 82%)}.playlist-picking:before{background:linear-gradient(180deg,#ead5bc 0%,#ead5bc 37%,#ead5bcb0 55%,#ead5bc00 82%)}.tools-grid{grid-template-columns:1fr;gap:15px}.tool-card{padding:21px 24px;min-height:300px}.tool-title{margin-bottom:15px}.tool-title h3{font-size:18px}.tool-subtitle{font-size:11px}.tuner-face{height:90px;gap:30px}.tuner-gauge{width:148px;height:90px}.tuner-scale{width:144px;height:144px;left:2px;top:4px}.tuner-center{left:61px;height:73px}.tuner-needle{left:71px;height:70px}.tuner-reading strong{font-size:43px}.tuner-reading span{font-size:9px;max-width:100px}.tool-message{font-size:11px}.tool-card .button{font-size:12px;min-height:40px;padding-inline:18px}.tool-footnote{font-size:9px}.mini-chord-grid{max-width:300px;margin-inline:auto}.mini-chord-grid .chord-svg{height:116px}.chords-card .tool-message{margin-top:18px}.bpm-label input{font-size:54px}.metronome-controls{gap:35px}.bpm-range{max-width:300px}.mute-control{font-size:10px}.artists-grid{grid-template-columns:repeat(4,1fr);gap:23px 14px}.artist-photo{width:85px}.artist-card{font-size:10px;gap:8px}.artists-section{padding-bottom:21px}.fresh-section{padding-top:22px}.learn-section h2{font-size:27px}.learn-section .section-heading>.text-link{display:none}.learn-grid{grid-template-columns:1fr 1fr;gap:25px 13px}.learn-grid:before{display:none}.learn-illustration{width:160px}.step-number{left:4px}.learn-step strong{font-size:12px}.learn-step>span:not([class]){font-size:9px}.step-link{font-size:9px}.rhythm-art{font-size:37px}.faq-grid{grid-template-columns:1fr;gap:10px}.faq-item summary{font-size:12px;padding:15px}.faq-answer{padding-inline:15px}.faq-answer p{font-size:11px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px 22px}.footer-brand{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:25px;align-items:center}.footer-brand .brand{grid-row:1/3}.footer-brand p{margin-top:0}.footer-note{font-size:8px;margin-top:5px}.footer-grid h3{font-size:12px;margin-bottom:11px}.footer-grid>div>a:not(.brand),.footer-link{font-size:11px;margin:8px 0}.footer-bottom{margin-top:25px;gap:12px;font-size:8px}.footer-bottom>span:last-child{max-width:160px;text-align:right}.back-top{right:13px;bottom:15px;width:42px;height:42px}.progress-ring{width:42px;height:42px}.toast{bottom:17px;width:max-content;padding:12px 15px;font-size:11px;max-width:calc(100% - 30px)}.dialog{padding:29px 21px 24px;border-radius:13px;max-height:calc(100dvh - 35px)}.dialog h2{font-size:25px}.dialog .song-row{gap:7px}.dialog .song-badges .badge{font-size:7px}.dialog .song-title{font-size:11px}.dialog .song-cover{width:37px;height:39px}.song-detail-grid{gap:6px}.dialog .song-detail-grid .chord-svg{height:132px}}
@media(max-width:370px){.container{width:calc(100% - 26px)}.header-actions{gap:4px}.brand-name{font-size:25px}.brand-caption{font-size:7px}.hero h1{font-size:36px}.hero .eyebrow{font-size:8px}.hero-description{font-size:14px}.search-submit{min-width:96px;font-size:10px}.search-field input{font-size:10px}.search-field>.icon{width:16px;height:16px}.hero-art{height:335px}.instrument-layer{width:251px;left:0}.hero-chord-card{width:140px;right:0;top:43px}.hero-chord-body>div{width:64px}.hero-chord-body .chord-svg{width:64px;height:104px}.listen-button{min-width:44px}.hero-orbit{left:24px;width:270px;height:270px}.botanical-right{right:5px}.chord-picker{gap:6px}.chord-picker button{width:34px;height:36px}.match-controls .button{width:100%;flex-basis:100%}.playlist-content strong{font-size:19px}.playlist-content{padding-inline:10px}.playlist-bottom{font-size:7px}.round-arrow{width:24px;height:24px}.artist-photo{width:69px}.learn-illustration{width:135px}.learn-step strong{font-size:11px}.learn-step>span:not([class]){font-size:8px}.rhythm-art{font-size:31px;gap:3px}.step-number{left:0}.song-badges .badge{font-size:7px}.song-title{font-size:11px}.song-main{gap:9px}.song-row{gap:6px}}
.artist-index{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.artist-index-item{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid var(--line);background:var(--paper);border-radius:9px;text-align:left;padding:13px 15px;font-size:13px}.artist-index-item:hover{border-color:var(--accent);background:var(--peach)}.artist-index-item small{font-size:10px;color:var(--muted)}.learn-step.is-complete .step-number{background:#477859}.toast:empty{display:none}.dialog .toast{position:sticky;bottom:0;left:auto;transform:translateY(12px);margin:15px auto 0;width:max-content;max-width:100%}.dialog .toast.is-visible{transform:none}.song-diagram{display:flex;flex-direction:column;align-items:center;gap:5px}.song-diagram .chord-svg{max-width:100px;max-height:145px}.song-diagram button{font-size:10px;color:var(--accent)}.song-detail-chords>div{width:100px}.song-detail-chords>div .chord-svg{height:145px}.song-detail-tags{display:flex;gap:6px;flex-wrap:wrap;margin-block:13px}.rhythm-demo{padding:14px 17px;border:1px solid var(--line);background:var(--paper);border-radius:8px;margin-top:18px}.rhythm-demo strong{font-size:22px;letter-spacing:.08em}.rhythm-demo p{font-size:11px;margin-top:8px}.dialog-play-button{display:inline-flex;align-items:center;gap:7px}.dialog-play-button svg{width:16px;height:16px}.song-chord-card{display:flex;flex-direction:column;align-items:center;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.song-chord-card .chord-svg{width:90px;height:130px}.song-detail-note{font-size:11px!important;margin-block:15px}.song-detail-author{font-size:14px!important;margin-bottom:13px}.song-detail-rhythm{letter-spacing:.08em;font-size:23px!important;color:var(--ink)}.song-detail-pattern{display:flex;gap:9px;flex-wrap:wrap;margin-block:20px}.song-detail-pattern span{display:grid;place-items:center;min-width:45px;height:37px;border-radius:5px;background:var(--sage);font-size:15px}.dialog .song-row .song-badges{margin-left:auto}:root[data-theme=dark] .button.primary{background:#b64532;color:#fff}:root[data-theme=dark] .button.primary:hover{background:#9e3827}:root[data-theme=dark] .hero-chord-tabs button.is-active,:root[data-theme=dark] .song-tabs button.is-active,:root[data-theme=dark] .quick-filters button.is-active{color:#17251f}:root[data-theme=dark] .play-circle,:root[data-theme=dark] .metronome-play{color:#17251f}
.detail-chord{margin:0;width:96px;display:flex;flex-direction:column;align-items:center;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.detail-chord figcaption{display:none}.detail-chord .chord-svg{width:78px;height:126px}.chord-listen{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:9px;color:var(--accent);padding:5px 0}.chord-listen svg{width:14px;height:14px}.chord-listen:hover{text-decoration:underline}.song-detail-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px}.song-detail-meta .heart-button{margin-left:5px}.song-detail-artist{margin-top:-7px}.muted{color:var(--muted);font-size:11px!important}.artist-index-item .song-cover{width:33px;height:33px}.artist-index-item>span:last-child{flex:1}.tool-chord-preview{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}.tool-chord-preview[hidden]{display:none}.tool-card{position:relative}.play-circle .icon{stroke:none}.dialog .eyebrow{padding-right:24px}
@media(hover:none){.playlist-card:hover,.tool-card:hover{transform:none}.playlist-card:after{display:none}.playlist-fire:hover .fire-glow{animation:none;opacity:0}.artist-card:hover .artist-photo svg{transform:none}.playlist-card:active,.artist-card:active,.learn-step:active{opacity:.86}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.motion-ready .reveal:not(.is-visible){opacity:1;transform:none}.instrument-layer,.hero-orbit,.botanical,.hero-chord-card{transform:none!important}.floating-note{display:none}}

/* Comfortable reading at the final 1200px desktop width. */
@media(min-width:961px){.primary-nav a{font-size:12px}.songbook-button{font-size:12px}.brand-caption{font-size:10px}.search-field input{font-size:13px}.quick-filters button{font-size:11px}.song-title{font-size:14px}.song-artist{font-size:11px}.badge{font-size:9px}.playlist-kicker{font-size:10px}.playlist-bottom{font-size:10px}.artist-card{font-size:12px}.tool-footnote{font-size:10px}.faq-item summary{font-size:14px}.faq-answer p,.faq-answer .inline-link{font-size:12px}.footer-grid h3{font-size:12px}.footer-grid>div>a:not(.brand),.footer-link{font-size:12px}.footer-brand p{font-size:12px}.footer-note{font-size:10px}.footer-bottom{font-size:10px}}
@media(min-width:961px) and (max-width:1150px){.primary-nav{gap:12px}.primary-nav a{font-size:11px}.songbook-button{font-size:11px}.quick-filters button{font-size:10px}.hero-grid{grid-template-columns:1.12fr 1fr}.footer-grid{gap:26px}}
@media(max-width:740px){.faq-item summary{font-size:13px}.faq-answer p,.faq-answer .inline-link{font-size:12px}.song-title{font-size:13px}.song-artist{font-size:11px}.song-badges .badge{font-size:9px}.detail-chord{width:calc(25% - 9px);min-width:65px;padding:5px}.detail-chord .chord-svg{width:100%;height:110px}.chord-listen{font-size:8px}.artist-index{gap:8px}.artist-index-item{padding:10px;font-size:11px;gap:8px}.artist-index-item .song-cover{width:26px;height:29px}}
:root[data-theme=dark] .tuner-reading [data-state=tuned]{color:#91c398}

/* Preserve page flow while the sticky header compacts. */
.site-header{height:88px;transition:height .2s,margin-bottom .2s,background .2s,box-shadow .2s}.site-header.scrolled{height:70px;margin-bottom:18px}
@media(max-width:960px) and (min-width:741px){.site-header{height:75px}.site-header.scrolled{height:70px;margin-bottom:5px}}
@media(max-width:740px){.site-header{height:72px}.site-header.scrolled{height:64px;margin-bottom:8px}.chord-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.chord-picker button{width:100%;height:44px}.reference-strings button{width:36px;height:36px}.quick-filters button{min-height:32px}.header-actions .icon-button{width:36px;height:36px}}

@media(max-width:370px){.playlist-content strong{font-size:18px}}
@media(min-width:741px) and (max-width:960px){.song-badges .badge{font-size:9px}.artist-card{font-size:11px}.tool-footnote{font-size:10px}}
.match-results .song-title{font-size:12px}.match-results .song-artist{font-size:10px}.match-results .song-badges .badge{font-size:9px}
@media(max-width:740px){.search-field input{font-size:16px}.match-results .song-title{font-size:11px}.match-results .song-badges .badge{font-size:8px}}

.theme-toggle{position:relative}.theme-toggle .theme-sun{position:absolute;opacity:0;transform:rotate(-80deg) scale(.5);transition:opacity .25s,transform .3s}.theme-toggle .theme-moon{transition:opacity .25s,transform .3s}.theme-toggle[aria-pressed=true] .theme-sun{opacity:1;transform:rotate(0) scale(1)}.theme-toggle[aria-pressed=true] .theme-moon{opacity:0;transform:rotate(65deg) scale(.5)}.primary-nav a.is-current{color:var(--accent)}.primary-nav a.is-current:after{transform:scaleX(1)}.sound-waves{transform:translate(calc(var(--wx,0)*9px),calc(var(--wy,0)*6px));transition:transform .35s ease-out}
@media(prefers-reduced-motion:reduce){.sound-waves{transform:none!important}}

.tuner-card .tuner-full-link{display:flex;justify-content:flex-end;font-size:11px;margin-top:12px}

.metronome-card .metro-full-link{display:flex;justify-content:flex-end;font-size:11px;margin-top:12px}.how-card>.metro-full-link{display:flex;justify-content:flex-end;font-size:12px;margin-top:16px}

.bg-full-course-link{display:inline-flex;font-size:13px;margin-top:8px}