@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');
:root{--ink:#302e2a;--wine:#732e40;--paper:#f5f2eb;--muted:#827e75;--line:#ded8cc;--green:#3b6653}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bd8b4b;outline-offset:4px}header{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:auto;padding:0 5%}.brand{display:flex;align-items:center;gap:13px;color:var(--wine);text-decoration:none;font-family:Georgia,serif;font-size:19px;font-weight:700;letter-spacing:1px}.brand-icon{font-size:46px;font-weight:400;line-height:1}.brand small{display:block;font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:2px;margin-top:7px;color:var(--muted)}.byline{font-family:Georgia,serif;font-style:italic;color:var(--muted)}main{max-width:1320px;margin:0 auto;padding:42px 32px 60px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--wine);font-weight:700}h1{font-family:'Playfair Display',Georgia,serif;font-size:60px;font-weight:500;letter-spacing:-2px;margin:10px 0}h1 span{color:var(--wine)}.intro p{margin:0;color:#67635b;font-size:15px}.intro em{font-family:Georgia,serif}.score{display:flex;align-items:center;gap:30px;border:1px solid var(--line);border-radius:5px;padding:16px 22px;background:#faf8f2}.score div{text-align:center;min-width:55px}.score strong{display:block;font-family:Georgia,serif;font-size:28px;font-weight:400}.score span{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.score button{border:0;background:none;font-size:25px;color:var(--muted);border-left:1px solid var(--line);padding-left:20px}.layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px}aside{background:#eeeadf;border:1px solid var(--line);border-radius:7px;padding:24px}.panel-heading h2{font-family:Georgia,serif;font-size:19px;font-weight:400;margin:0 0 8px}.panel-heading>span{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.label{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:700;letter-spacing:1px;margin:27px 0 12px}.label small,.label>span{font-size:9px;letter-spacing:0;color:var(--muted);font-weight:400}.note-values{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.value{border:1px solid #d4cebf;border-radius:4px;padding:7px 0 5px;background:#f6f3eb;position:relative;text-align:center;color:var(--muted)}.value input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0}.value:has(input:focus-visible){outline:3px solid #bd8b4b}.value:has(input:checked){border-color:var(--wine);background:#e8dcda;color:var(--wine)}.value svg{display:block;margin:auto;width:28px;height:38px}.value small{font-size:8px}.toggles{margin-top:15px;display:flex;gap:10px;flex-wrap:wrap;font-size:11px}.toggles label,.check{display:flex;align-items:center;gap:6px}input[type=checkbox],input[type=range]{accent-color:var(--wine)}.divider{border-top:1px solid #d8d1c4;margin-top:23px}.meter-row{display:flex;gap:10px;align-items:center}select,input[type=number]{background:#f8f5ee;border:1px solid #d4cebf;border-radius:4px;padding:10px;color:var(--ink);max-width:100%}.meter-row select{flex:1;min-width:0;font-size:12px}.meter-badge{font-family:Georgia,serif;font-size:23px;line-height:.9;text-align:center;min-width:26px}.label[for=tempo]{display:block}.label[for=tempo]>span{float:right}#tempo{width:100%;height:4px;margin:10px 0}.range-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:9px}.sounds{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.sounds button{border:1px solid #d4cebf;background:#f8f5ee;border-radius:4px;padding:9px 0;font-size:23px;color:#797167}.sounds span{display:block;font-size:9px;margin-top:5px}.sounds .active{border-color:var(--wine);color:var(--wine);background:#e8dcda}.sound-note{font-size:10px;line-height:1.6;color:var(--muted);min-height:32px}.check{font-size:11px;margin:10px 0}.apply{background:var(--wine);border:0;border-radius:4px;color:white;width:100%;padding:13px 12px;margin-top:16px;text-align:left;font-size:11px}.apply span{float:right}.settings-note{font-size:9px;line-height:1.5;color:var(--muted);margin-bottom:0}#customMeter:not([hidden]){display:flex;gap:10px;margin-top:10px}#customMeter label{width:50%;font-size:11px}#customMeter input,#customMeter select{width:100%;margin-top:5px}.listen-panel{background:#eae4d7;border:1px solid #d8cebd;border-radius:7px;padding:27px 30px 0;overflow:hidden;position:relative}.listen-top{display:flex;justify-content:space-between;align-items:center}.pill{border:1px solid #cfc5b5;border-radius:20px;color:#777061;font-size:8px;letter-spacing:1px;padding:6px 9px}.listen-panel h2{font-family:'Playfair Display',Georgia,serif;font-size:30px;font-weight:500;margin:24px 0 9px}.listen-panel p{font-size:12px;color:#777061}.play-row{display:flex;align-items:center;gap:22px;margin:25px 0 28px}.play{background:var(--wine);color:#fff;border:0;border-radius:4px;padding:15px 23px;font-size:12px;min-width:158px}.play>span:first-child{margin-right:10px}.pulse{height:28px;display:flex;align-items:center;gap:4px}.pulse i{display:block;width:3px;border-radius:3px;background:#bcb09b;height:10px}.pulse i:nth-child(3n){height:26px}.pulse i:nth-child(3n + 1){height:17px}.playing .pulse i{background:var(--wine);animation:wave .55s ease-in-out infinite alternate}.playing .pulse i:nth-child(2n){animation-delay:.2s}.play-hint{font-size:10px;color:#867e70}#progress{height:3px;background:#d9d0c0;margin:0 -30px}#progress span{display:block;background:var(--wine);width:0;height:100%}.answers-top{display:flex;justify-content:space-between;align-items:center;margin:28px 0 14px}.answers-top h2{font-size:9px;letter-spacing:1.8px;margin:0}.answers-top>span{font-size:9px;color:var(--muted)}kbd{border:1px solid var(--line);padding:2px 4px;border-radius:3px;font:9px monospace}.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.answer{min-width:0;text-align:left;background:#fcfaf5;border:1px solid #dcd6c9;border-radius:6px;padding:16px 12px 10px;position:relative;color:var(--ink);transition:border-color .15s,transform .15s}.answer:not(:disabled):hover{border-color:var(--wine);transform:translateY(-2px)}.answer-head{display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#91897d;letter-spacing:1.3px;margin:0 4px 3px}.answer-head b{border:1px solid var(--line);width:23px;height:23px;border-radius:50%;display:grid;place-items:center;color:#6e665a;font-size:10px}.notation{overflow-x:auto;overflow-y:hidden;min-height:105px}.notation svg{display:block;width:100%;height:105px}.answer.correct{border:2px solid var(--green);background:#eff4ee;padding:15px 11px 9px}.answer.wrong{border:2px solid #ab554d;background:#faf0ec;padding:15px 11px 9px}.answer:disabled{cursor:default;opacity:1}.answer.dim{opacity:.5}.feedback{display:flex;align-items:center;gap:14px;margin-top:19px;padding:18px 20px;background:#eeeadf;border-radius:4px;font-size:12px;min-height:76px}.feedback>span{font-size:25px;color:var(--wine)}.feedback small{display:block;color:var(--muted);margin-top:6px;font-size:11px;line-height:1.5}.feedback.success{background:#e5ede3}.feedback.error{background:#f0e3df}.next-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.next-row>span{font-size:10px;color:var(--muted)}#next{background:none;border:1px solid #cfc6b6;border-radius:4px;padding:11px 17px;font-size:11px;color:var(--ink)}#next span{margin-left:22px}.tip{border-top:1px solid var(--line);margin-top:27px;padding-top:20px;display:flex;gap:20px}.tip>span{white-space:nowrap;color:var(--wine);font-size:8px;letter-spacing:1.3px;margin-top:4px}.tip p{font-family:Georgia,serif;font-size:13px;line-height:1.6;color:#81786a;margin:0;font-style:italic}footer{border-top:1px solid var(--line);max-width:1256px;margin:0 auto;padding:25px 0 30px;display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}footer span:first-child{letter-spacing:1.5px} @keyframes wave{to{transform:scaleY(.35)}}@media(min-width:1450px){main{padding-top:55px}}@media(max-width:1000px){.layout{grid-template-columns:265px minmax(0,1fr);gap:22px}aside{padding:20px}.play-row{gap:12px;flex-wrap:wrap}.play-hint{width:100%}.answers{grid-template-columns:1fr}.byline{display:none}.answers-top>span{display:none}footer{margin:0 32px}.score{gap:15px;padding:12px}}@media(max-width:680px){header{height:80px;padding:0 22px}.brand{font-size:16px}main{padding:28px 20px}.intro{align-items:start;gap:12px}h1{font-size:43px}.intro p{font-size:12px;line-height:1.7}.intro em{display:block}.score{gap:10px;padding:10px}.score div{min-width:35px}.score strong{font-size:22px}.score button{display:none}.layout{display:flex;flex-direction:column}.game{order:0}aside{order:1}.answers{grid-template-columns:1fr 1fr;gap:9px}.answer{padding:12px 6px 6px}.answer.correct,.answer.wrong{padding:11px 5px 5px}.listen-panel{padding:22px 20px 0}.listen-panel h2{font-size:25px}#progress{margin:0 -20px}.pill{font-size:7px}.pulse{gap:3px}.play-hint{display:none}.play-row{flex-wrap:nowrap}.tip{gap:12px}footer{margin:0 20px;gap:20px}footer span:last-child{display:none}.note-values{grid-template-columns:repeat(7,1fr)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* For Clef’s Sake: burgundy ink, aged parchment, and dark outlines. */
:root{--ink:#291c18;--wine:#781c36;--paper:#ead6ae;--muted:#6f5846;--line:#b99a73;--green:#34593d}
body{background-color:var(--paper);background-image:url('parchment-grain.svg'),radial-gradient(ellipse at 15% 20%,#fff5d440,transparent 55%),radial-gradient(ellipse at 95% 60%,#a46e342e,transparent 50%),linear-gradient(100deg,#dfc69b,#f2e1bb 45%,#e7cfa6);background-attachment:fixed}
header{max-width:none;background-color:#65192e;background-image:url('parchment-grain.svg'),linear-gradient(110deg,#4c1424,#7f233d 65%,#5a182a);border-bottom:3px solid #28191a;box-shadow:0 3px 0 #ae8250;color:#fae8bc}
.brand{color:#fae8bc;text-shadow:1px 1px 0 #251417}.brand small{color:#e5c995}.byline{color:#ead2a5}
h1{color:var(--wine);text-shadow:1px 1px 0 #fff0c8}h1 span{color:#2c1b19}.intro p{color:#5e4235}.score{background:#f4e4c3 url('parchment-grain.svg');border-color:#9d795b;box-shadow:3px 3px 0 #60392414}.score strong{color:var(--wine)}
aside{background:#e3c79c url('parchment-grain.svg');border:1px solid #866249;box-shadow:inset 0 0 35px #a66c3424,3px 4px 0 #53312414}.panel-heading h2,.label,.meter-badge,.answers-top h2{color:var(--wine)}.divider{border-color:#ad8a61}.value{background:#f6e6c5;border-color:#b5936d;color:#725b48}.value:has(input:checked){background:#781c36;color:#fff0cf;border-color:#31151d;box-shadow:1px 2px 0 #36182033}.value:has(input:checked) ellipse[fill="#fcfaf5"]{fill:#781c36}select,input[type=number]{background:#f6e7c8;border-color:#aa8661;color:#38231d}.sounds button{background:#f6e6c5;border-color:#b5936d;color:#674735}.sounds .active{background:#781c36;color:#fff0cf;border-color:#31151d;box-shadow:1px 2px 0 #36182033}.apply{border:1px solid #33111c;box-shadow:0 2px 0 #38131e;color:#fff0cf}.apply:hover{background:#5e1429}
.listen-panel{background-color:#701d34;background-image:url('parchment-grain.svg'),radial-gradient(ellipse at 90% 10%,#9c3d514d,transparent 75%),linear-gradient(120deg,#5c162a,#7e2440);border:2px solid #32161c;box-shadow:3px 4px 0 #53312420;color:#fff0cd}.listen-panel .eyebrow{color:#edcc8d}.listen-panel h2{color:#fff0cd;text-shadow:1px 2px 0 #35131c}.listen-panel p,.play-hint{color:#ead2b1}.pill{border-color:#b47780;color:#ffe4b7;background:#45102044}.play{background:#f4dfb2;color:#5f172c;border:1px solid #2b1318;box-shadow:0 3px 0 #35131d;font-weight:700}.play:hover{background:#fff0ce}.pulse i{background:#be8d89}.playing .pulse i{background:#f1cf8f}#progress{background:#491326}#progress span{background:#edc57d}
.answer{background:#f8eacb url('parchment-grain.svg');border-color:#98704f;box-shadow:2px 3px 0 #4f301418;color:#291c18}.answer:not(:disabled):hover{background-color:#fdf0d2;box-shadow:2px 3px 0 #781c3633}.answer-head{color:#80543e}.answer-head b{background:#781c36;border-color:#3a1520;color:#fff0cd}.notation svg ellipse[fill="#fcfaf5"]{fill:#f8eacb}.notation svg>g:first-child{stroke:#927052}.answer.correct{background:#e3e6c6 url('parchment-grain.svg');border-color:#34593d}.answer.wrong{background:#efd0b9 url('parchment-grain.svg');border-color:#8b263c}.answer.dim{opacity:.6}.answer.correct .answer-head b{background:#34593d}.answer.correct .notation svg ellipse[fill="#fcfaf5"]{fill:#e3e6c6}.answer.wrong .notation svg ellipse[fill="#fcfaf5"]{fill:#efd0b9}
.feedback{background:#e0c397 url('parchment-grain.svg');border-left:3px solid var(--wine)}.feedback.success{background:#d9ddba;border-left-color:#34593d}.feedback.error{background:#ebc9b0;border-left-color:#8b263c}.feedback.success>span{color:#34593d}#next{border-color:#6f2737;color:#641a30;background:#f2dfb8}#next:hover{background:#781c36;color:#fff0cf}.tip{border-color:#b39169}.tip p{color:#6b4d37}.tip>span{color:#781c36}kbd{border-color:#b89971;background:#f6e6c3}footer{border-color:#ac875e;color:#68452f}

.sounds button:disabled{background:#d9c5a5;color:#7c6b59;border-color:#b8a286;box-shadow:none;opacity:.65;cursor:not-allowed}.sounds button:disabled span{text-decoration:line-through}

.byline{text-decoration:none}.byline:hover{text-decoration:underline}@media(max-width:1000px){.byline{display:block;font-size:11px;text-align:right;max-width:100px}}