.metronome-page{justify-content:flex-start;padding:135px 24px 50px;overflow:hidden}.metronome-page>*{z-index:1;position:relative}.metronome-page>.explore-brand{position:absolute}.metronome-intro{max-width:720px}.metronome-kicker{letter-spacing:.2em;color:#88652d;font-size:10px}.metronome-intro h1{font-size:clamp(2.8rem,7vw,5.2rem)}.metronome-intro>p:last-child{color:#655c4e;margin:25px auto;font:18px/1.7 Georgia,serif}.metronome-workbench{grid-template-columns:minmax(280px,.9fr) minmax(0,1.2fr);align-items:center;gap:40px;width:min(1050px,100%);margin:10px auto 0;display:grid}.metronome-instrument{width:100%;max-width:400px;margin:auto}.metronome-svg{filter:drop-shadow(8px 12px 7px #30251b22);width:100%;display:block;overflow:visible}.metronome-beats{flex-wrap:wrap;justify-content:center;gap:8px;min-height:32px;margin:12px 0;display:flex}.metronome-beats span{color:#867457;background:#e5dece;border:1px solid #b5a58c;border-radius:50%;place-items:center;min-width:30px;height:30px;padding:5px;font:12px Arial,Tahoma,sans-serif;display:grid}.metronome-beats span.lit{color:#f2d6a6;background:#191817;border-color:#b99153;box-shadow:0 0 12px #17151155}.metronome-bar-track{direction:ltr;background:#b9a98d44;width:75%;height:3px;margin:20px auto 12px;overflow:hidden}.metronome-bar-track>div{background:#a57d3a;width:0;height:100%}.metronome-count{color:#826b47;min-height:20px;margin:12px 0;font-size:12px}.metronome-settings{--square:clamp(130px,15.5vw,174px);--square-gap:12px;text-align:start;max-width:100%;padding-top:35px}.metronome-four-squares{grid-template-columns:calc((var(--square) - var(--square-gap))/2) var(--square) var(--square);gap:var(--square-gap);justify-content:center;align-items:start;display:grid}.metronome-square{background:var(--button-surface);color:var(--button-gold);box-shadow:var(--button-glow);height:var(--square);width:var(--square);text-align:center;border:1px solid #ffffff14;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;min-width:0;display:flex;position:relative}.metronome-square>span,.speed-square>label{color:#c9b48d;font:11px/1.5 Arial,Tahoma,sans-serif;position:absolute;top:12px;left:4px;right:4px}.metronome-signature{gap:var(--square-gap);border:0;flex-direction:column;min-width:0;margin:0;padding:0;display:flex;position:relative}.metronome-signature legend{color:#7d6846;width:max-content;font-size:11px;position:absolute;top:-28px}.signature-square{width:calc((var(--square) - var(--square-gap))/2);height:calc((var(--square) - var(--square-gap))/2)}.signature-square>span{font-size:8px;line-height:1.2;top:7px}.metronome-square select{cursor:pointer;width:calc(100% - 18px);min-width:0;min-height:34px;padding:6px 4px;font:11px/1.4 Arial,Tahoma,sans-serif}.signature-square select{text-align:center;min-height:34px;margin-top:15px;padding:1px 2px;font-size:28px}.metronome-note-symbol{width:58px;height:calc(var(--square) - 92px);color:#e8d5b0;pointer-events:none;max-height:80px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.metronome-note-symbol svg{filter:drop-shadow(2px 3px #785c3433);width:100%;height:100%;display:block}.note-square select{position:absolute;bottom:12px}.speed-square input{color:#f1dab2;text-align:center;-moz-appearance:textfield;background:0 0;border:0;outline:none;width:calc(100% - 16px);min-width:0;margin:0 0 25px;padding:0;font:48px/1 Georgia,serif}.speed-square input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.speed-square input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.speed-square input:focus-visible{outline-offset:2px;border-radius:5px;outline:2px solid #b99153}.speed-square>span{font-size:9px;top:auto;bottom:46px}.metronome-speed-buttons{justify-content:center;gap:12px;display:flex;position:absolute;bottom:9px;left:10px;right:10px}.metronome-speed-buttons button{cursor:pointer;width:45px;height:30px;min-height:30px;font:20px/1 Arial,Tahoma,sans-serif}.metronome-tempo-help{color:#826b47;text-align:center;margin:16px 0;font-size:10px;line-height:1.7}.metronome-tempo-help.invalid{color:#91482d}.metronome-summary{color:#796040;border-top:1px solid #aa947244;border-bottom:1px solid #aa947244;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px;margin:20px 0;padding:14px 8px;font:14px/1.7 Georgia,serif;display:flex}.metronome-summary>bdi{flex-shrink:0;font-size:27px}.metronome-term{flex-direction:column;gap:9px;display:flex}.metronome-term>span{color:#705630;font-size:12px}.metronome-term select{cursor:pointer;width:100%;min-width:0;min-height:48px;padding:13px 12px;font:14px/1.6 Arial,Tahoma,sans-serif}.metronome-term small{color:#8b785b;margin-top:3px;font-size:11px;line-height:1.8}.metronome-start{cursor:pointer;justify-content:center;align-items:center;gap:14px;width:100%;min-height:52px;margin-top:22px;padding:16px;font:14px/1.5 Arial,Tahoma,sans-serif;display:flex}.metronome-status{text-align:center;color:#8b785b;min-height:18px;margin:13px 0;font-size:11px}.metronome-error{color:#91482d;background:#fff0e0;border:1px solid #b38d6c;padding:14px;font-size:12px;line-height:1.8}.metronome-explanation{color:#7e6b4e;max-width:760px;margin:24px auto 0;font:13px/1.8 Georgia,serif}.metronome-explanation p{margin:10px 0}.metronome-page>.return{margin-top:30px}html[lang=ar] .metronome-intro>p:last-child,html[lang=ar] .metronome-explanation,html[lang=ar] .metronome-summary{font-family:Tahoma,Arial,sans-serif}html[lang=ar] .metronome-square>span,html[lang=ar] .speed-square>label,html[lang=ar] .metronome-signature legend{direction:rtl}@media (width<=900px){.metronome-workbench{grid-template-columns:1fr;gap:15px;max-width:540px}.metronome-instrument{max-width:300px}.metronome-settings{--square:174px;padding-top:32px}.metronome-page{padding:110px 16px 40px}.metronome-intro>p:last-child{font-size:16px}.metronome-explanation{font-size:12px}}@media (width<=520px){.metronome-settings{--square:clamp(108px,31vw,148px);--square-gap:8px}.metronome-intro h1{font-size:42px}.metronome-workbench{gap:4px}.metronome-instrument{max-width:260px}.metronome-note-symbol{width:48px;height:calc(var(--square) - 76px);max-height:68px}.metronome-square>span,.speed-square>label{font-size:10px;top:8px}.signature-square>span{font-size:7px;top:4px}.signature-square select{width:calc(100% - 8px);min-height:27px;margin-top:13px;font-size:22px}.metronome-square select{width:calc(100% - 10px);min-height:29px;padding:4px 2px;font-size:9px}.signature-square select{padding:0;font-size:22px}.note-square select{bottom:7px}.speed-square input{margin-bottom:22px;font-size:36px}.speed-square>span{font-size:7px;top:auto;bottom:34px}.metronome-speed-buttons{gap:9px;bottom:5px;left:6px;right:6px}.metronome-speed-buttons button{width:36px;height:25px;min-height:25px;font-size:17px}.metronome-summary,.metronome-term select{font-size:12px}}