/* Shared visual foundation for the live play-along pages. */
:root{--ink:#253a43;--paper:#f2ead8;--muted:#68716a;--line:#d8cdb7;--blue:#397c9a;--gold:#b38226}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink)}body{margin:0;font:16px/1.5 Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#f7f0e3,#eadfc9);color:var(--ink)}a{color:inherit}button,input,select{font:inherit}button{cursor:pointer}header{min-height:82px;padding:18px clamp(22px,5vw,72px);display:flex;align-items:center;gap:30px;background:#1f383a;color:#fff8ea;border-bottom:1px solid #54706d}.brand{font:400 22px Georgia,serif;letter-spacing:.05em;text-decoration:none;white-space:nowrap}header nav{display:flex;align-items:center;gap:25px;margin-right:auto}header nav a{font-size:12px;text-decoration:none;border-bottom:1px solid transparent;padding:8px 0}header nav a:hover{border-color:currentColor}.language-picker{display:flex;flex-direction:column;gap:4px}.language-label,.eyebrow{font-size:10px;line-height:1.3;text-transform:uppercase;letter-spacing:.19em}.language-picker select{min-width:118px;background:#f7f0e2;color:var(--ink);border:1px solid #c8bfae;border-radius:2px;padding:7px 28px 7px 9px}.preview-pill{padding:7px 10px;border:1px solid #b6ccc1;border-radius:999px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}main{max-width:1280px;margin:0 auto;padding:clamp(30px,5vw,70px) clamp(20px,5vw,72px) 0}.back{display:inline-block;margin-bottom:30px;font-size:13px;text-decoration:none;border-bottom:1px solid #70817b;padding-bottom:5px}.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,390px);gap:clamp(30px,7vw,100px);align-items:end;margin-bottom:45px}.intro .eyebrow{color:#5c6d66;margin:0 0 16px}.intro h1{font:400 clamp(54px,7vw,90px)/.96 Georgia,'Times New Roman',serif;letter-spacing:-.055em;margin:0}.intro h1 em{font-weight:400}.lead{font:20px/1.55 Georgia,serif;max-width:500px;margin:24px 0 0;color:#53645d}.song-credit{display:flex;align-items:center;gap:18px;padding:16px;background:#fbf5e8;box-shadow:9px 10px 0 #d7cfba;transform:rotate(-1deg)}.song-credit img{width:115px;aspect-ratio:1;object-fit:cover}.song-credit span,.song-credit small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#65726c}.song-credit p{font:22px Georgia,serif;margin:8px 0}.practice{background:#fbf7ee;border:1px solid var(--line);box-shadow:10px 12px 0 #d6cebb,18px 22px 35px #373e3220}.score-top{padding:25px 30px 15px;display:flex;justify-content:space-between;align-items:end;gap:20px;border-bottom:1px solid #e3dac8}.score-top .eyebrow{margin:0 0 8px}.measure{font:18px Georgia,serif}.legend{font-size:11px;color:var(--muted);white-space:nowrap}.legend i,.keyboard-foot i{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 5px 0 10px}.legend i:first-child,.keyboard-foot i:first-child{margin-left:0}.blue{background:var(--blue)}.gold{background:var(--gold)}.transport{padding:20px 30px;display:flex;align-items:center;gap:14px;background:#eef0e5;border-top:1px solid #ded9c8;border-bottom:1px solid #d7d5c7}.transport button{border:1px solid #97aaa0;background:#fbf8ed;color:#274540}.transport .restart{width:38px;height:38px;border-radius:50%}.transport .play{width:52px;height:52px;border-radius:50%;background:#284b48;color:#fff9ec;border-color:#284b48}.timeline{flex:1;min-width:130px}.time-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.11em;margin-bottom:7px}.timeline input{width:100%;accent-color:#527c75}.speed{font-size:10px;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-direction:column;gap:4px}.speed select{border:1px solid #b3b8ac;background:#fbf8ed;padding:5px;font-size:12px;letter-spacing:0;text-transform:none}.keyboard-area{background:#213b3c;color:#fbf5e8;padding:24px 30px 20px}.keyboard-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:11px;color:#d6e0d5}.keyboard-heading .eyebrow{color:#fff8e9}.keyboard-scroll{overflow-x:auto;margin:18px -3px 0;padding:0 3px}#keyboard{position:relative;display:flex;height:115px}.key{flex:0 0 calc(100% / 52);width:calc(100% / 52);height:115px;border:1px solid #8d9b93;background:#f9f6ee;display:inline-flex;align-items:flex-end;justify-content:center;color:#4d5a52;position:relative}.key.black{position:absolute;top:0;width:1.15%;height:70px;background:#26302f;color:#eee9db;z-index:2;transform:translateX(-50%);border-color:#162322}.key span{padding:7px 0}.keyboard-foot{display:flex;justify-content:space-between;font-size:10px;margin-top:13px;color:#d6e0d5}.preview-note{max-width:850px;margin:30px auto 45px;text-align:center;font:italic 16px/1.5 Georgia,serif;color:#59665d}footer{border-top:1px solid #c9c0ab;padding:32px 0 55px;display:flex;align-items:end;justify-content:space-between;gap:25px}footer p{margin:0;font:21px/1.4 Georgia,serif}footer a{font-size:13px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:7px}@media(max-width:760px){header{padding:15px 6%;gap:14px;flex-wrap:wrap}header nav{order:3;width:100%;gap:0;justify-content:space-between}.brand{font-size:19px}.preview-pill{display:none}main{padding:32px 6% 0}.intro{grid-template-columns:1fr;margin-bottom:38px}.intro h1{font-size:58px}.lead{font-size:18px}.song-credit{max-width:360px}.score-top{padding:20px 18px;align-items:start;flex-direction:column}.legend{white-space:normal}.transport{padding:16px;gap:9px;flex-wrap:wrap}.timeline{order:3;flex-basis:100%}.speed{margin-left:auto}.keyboard-area{padding:20px 16px}.keyboard-heading{align-items:start;flex-direction:column}.keyboard-foot{font-size:9px;gap:7px}.keyboard-foot .middle-c{display:none}footer{align-items:start;flex-direction:column;padding-bottom:40px}.play-language-picker{margin-left:auto}}