@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f4ef;--ink:#203c32;--muted:#7d867d;--green:#cbe790;--line:#e1e4da}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8cac5b;outline-offset:4px}header{height:100px;margin:0 auto;max-width:1280px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 30px}.brand{font:800 32px Manrope,sans-serif;color:var(--ink);text-decoration:none;letter-spacing:-2px}.mark{font-size:27px;display:inline-block;transform:skew(-13deg);margin-right:10px}.dot{color:#94ad65}.header-note,.eyebrow,.section-label,.panel-head{font-size:10px;font-weight:700;letter-spacing:1.8px}.header-note{color:var(--muted)}.quiet{border:0;background:none;color:var(--ink);font-size:12px}.quiet span{border:1px solid #ccd2c6;border-radius:50%;padding:2px 6px;margin-left:10px}main{max-width:1080px;margin:auto;padding:49px 30px 40px}.intro{text-align:center;margin-bottom:36px}.eyebrow{color:#819165}h1{font:500 43px Manrope,sans-serif;letter-spacing:-2px;margin:12px 0 10px}.intro p{font-size:14px;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:1.65fr 1fr;gap:24px}.metronome{background:#fff;border:1px solid var(--line);border-radius:20px;padding:27px 35px 22px;box-shadow:0 8px 30px #263c3204}.panel-head{display:flex;justify-content:space-between;color:#7f897b;font-size:9px;letter-spacing:1.3px}.panel-head i{display:inline-block;width:6px;height:6px;background:#b4bcac;border-radius:100%;margin-right:6px}.panel-head i.active{background:#91b95d}.tempo{display:flex;align-items:center;justify-content:space-between;max-width:390px;margin:27px auto 0}.tempo button{border:1px solid var(--line);background:transparent;border-radius:50%;width:43px;height:43px;font-size:24px;color:var(--ink)}.tempo input{font:600 108px/1 Manrope,sans-serif;letter-spacing:-7px;width:215px;text-align:center;border:0;padding:0;color:var(--ink);background:transparent;appearance:textfield}.tempo input::-webkit-inner-spin-button{appearance:none}.bpm-label{text-align:center;font-size:9px;letter-spacing:2px;color:#92998e;margin-top:0}#tempoName{text-align:center;font-size:13px;color:#8a947f;margin-top:12px}.slider-wrap{margin:27px 0 0}input[type=range]{width:100%;accent-color:#2e4f3c;height:4px;cursor:pointer}.slider-wrap div{display:flex;justify-content:space-between;color:#a0a69a;font-size:9px;margin-top:9px}.beats{display:flex;justify-content:center;gap:18px;margin:32px 0}.beat{width:39px;height:39px;border-radius:50%;background:#eef0e9;display:grid;place-items:center;font-size:12px;color:#9aa28e;transition:background .06s,transform .06s}.beat:first-child{border:1px solid #b6ca96;color:#5a7145;background:#f4f8ee}.beat.on{background:var(--green);color:#25422f;transform:scale(1.12);border-color:var(--green)}.transport{display:flex;gap:12px}.primary{border:0;background:var(--ink);color:white;border-radius:10px;padding:16px 24px;font-weight:600}.transport .primary{flex:1.3}.primary span{margin-left:9px}.tap{flex:1;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:13px}.tap span{font-size:10px;border:1px solid var(--line);padding:2px 5px;border-radius:4px;margin-left:10px}.key-hint{text-align:center;margin-top:17px;font-size:10px;color:#9ba293}kbd{font:9px inherit;border:1px solid var(--line);padding:2px 5px;border-radius:4px;margin-right:4px}aside{display:flex;flex-direction:column;gap:18px}.settings{background:#eeefe8;border:1px solid #e1e4d9;border-radius:18px;padding:23px}.section-label{font-size:9px;color:#8a9480;letter-spacing:1.5px}.settings .section-label{display:flex;justify-content:space-between;margin-bottom:20px}.settings label{display:block;font-size:12px;font-weight:500;margin-bottom:9px}select{width:100%;padding:11px;border:1px solid #d9decf;border-radius:8px;background:#f9faf6;color:var(--ink);font-size:12px;margin-bottom:18px}.segments{display:flex;border:1px solid #dce1d3;border-radius:8px;padding:3px;gap:4px;margin-bottom:18px}.segments button{flex:1;background:none;border:0;border-radius:5px;color:#738065;height:31px;font-size:20px}.segments button.selected{background:white;box-shadow:0 2px 5px #00000008;color:var(--ink)}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding-bottom:18px;border-bottom:1px solid #dde2d3}.toggle-row small{display:block;color:#969d8e;font-size:9px;margin-top:5px}.toggle-row input{accent-color:#355b40;width:18px;height:18px}.volume-label{display:flex;justify-content:space-between;margin-top:16px}.volume-label span{font-size:10px;color:#8c9581}.practice{position:relative;overflow:hidden;background:#e2ebd4;border-radius:15px;padding:22px}.practice .section-label{font-size:8px;color:#788d60}.practice p{font:500 22px/1.35 Manrope,sans-serif;letter-spacing:-.5px;margin:12px 0 7px}.practice>span:last-of-type{font-size:10px;color:#7a896b}.staff{position:absolute;right:-10px;bottom:18px;font-size:40px;opacity:.12;transform:rotate(-16deg)}.presets{display:flex;align-items:center;justify-content:space-between;margin-top:30px;padding:25px 0;border-bottom:1px solid var(--line)}h2{font:500 17px Manrope,sans-serif;margin:7px 0 0;letter-spacing:-.4px}.preset-buttons{display:flex;gap:10px}.preset-buttons button{background:none;border:1px solid #dde2d4;border-radius:9px;padding:12px 18px;text-align:left;color:var(--ink);font-size:11px}.preset-buttons span{display:block;font-size:9px;color:#95a087;margin-top:4px}button:hover{filter:brightness(.96)}footer{max-width:1080px;margin:0 auto 25px;padding:0 30px;display:flex;justify-content:space-between;font-size:10px;color:#929b89}.footer-muted{margin-left:10px;color:#a4ac9b}dialog{border:1px solid var(--line);border-radius:18px;padding:30px;max-width:400px;color:var(--ink)}dialog p{font-size:13px}dialog::backdrop{background:#203c3255}@media(max-width:740px){header{height:76px;padding:0 22px}.header-note{display:none}main{padding:32px 18px}.intro{margin-bottom:25px}h1{font-size:34px}.workspace{grid-template-columns:1fr}.metronome{padding:24px}.tempo input{font-size:94px;width:200px}.presets{align-items:flex-start;gap:20px;flex-direction:column}.preset-buttons{width:100%;gap:6px}.preset-buttons button{flex:1;padding:12px 9px}.practice{display:none}footer>span:last-child{display:none}.beat{width:32px;height:32px}.beats{gap:13px}}
.training{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 23px}.training-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.training-heading label{font-size:9px;letter-spacing:1.5px;font-weight:700;color:#7b8a6b}.training-heading input{accent-color:#355b40;width:18px;height:18px}.timer-controls{display:flex;align-items:center;justify-content:space-between;margin:10px 0}.timer-controls button{border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);font-size:20px;width:32px;height:32px}.timer-controls button:disabled{opacity:.3;cursor:default}#timeLeft{font:500 39px Manrope,sans-serif;letter-spacing:-1px;font-variant-numeric:tabular-nums}.timer-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}.timer-bottom span{font-size:10px;color:#7d8973}.timer-bottom button{background:none;border:0;color:var(--ink);font-size:10px;padding:5px 0;white-space:nowrap}.training p{font-size:9px;color:#929c89;margin:10px 0 0}.metronome{align-self:start}

/* Andamentos no topo, seguidos pelos controles de prática. */
main{padding-top:24px}.presets{margin-top:0;margin-bottom:24px;padding:0 0 23px}.metronome{align-self:stretch}@media(max-width:740px){main{padding-top:24px}.presets{gap:16px;margin-bottom:20px;padding-bottom:20px}}

.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}.timer-bottom{justify-content:center;margin-top:16px}.timer-bottom button{font-size:13px;font-weight:500;padding:11px 20px;min-height:40px;border:1px solid var(--line);border-radius:8px;background:#f5f7f0}
:root{color-scheme:light;--surface:#fff;--surface-soft:#eeefe8;--control:#f9faf6}.header-actions{display:flex;align-items:center;gap:20px}.theme-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-size:12px}#themeIcon{font-size:18px;line-height:1}.metronome,.training,.tap{background:var(--surface)}.settings{background:var(--surface-soft)}select{background:var(--control)}
:root[data-theme=dark]{color-scheme:dark;--bg:#151d19;--ink:#e1eadc;--muted:#a1af9e;--green:#b6da83;--line:#364437;--surface:#202b24;--surface-soft:#263128;--control:#202b24}:root[data-theme=dark] .settings{border-color:var(--line)}:root[data-theme=dark] .primary{background:#cbe790;color:#203c32}:root[data-theme=dark] .tempo input{color:var(--ink)}:root[data-theme=dark] .panel-head,:root[data-theme=dark] .section-label,:root[data-theme=dark] .training-heading label{color:#a5b49a}:root[data-theme=dark] #tempoName{color:#b0c59a}:root[data-theme=dark] .bpm-label,:root[data-theme=dark] .slider-wrap div,:root[data-theme=dark] .key-hint,:root[data-theme=dark] .toggle-row small,:root[data-theme=dark] .volume-label span,:root[data-theme=dark] footer,:root[data-theme=dark] .footer-muted{color:#a2af99}:root[data-theme=dark] select,:root[data-theme=dark] .segments{border-color:#46533f}:root[data-theme=dark] .segments button{color:#b2c4a0}:root[data-theme=dark] .segments button.selected{background:#41513b;color:#edf5e7}:root[data-theme=dark] .toggle-row{border-color:var(--line)}:root[data-theme=dark] .beat{background:#334032;color:#b3c2a4}:root[data-theme=dark] .beat:first-child{background:#35472c;border-color:#748e5e;color:#d0e7af}:root[data-theme=dark] .beat.on{background:var(--green);color:#203c32;border-color:var(--green)}:root[data-theme=dark] input[type=range]{accent-color:#b6da83}:root[data-theme=dark] input[type=checkbox]{accent-color:#b6da83}:root[data-theme=dark] .timer-bottom button{background:#2d3a2c;color:var(--ink)}:root[data-theme=dark] dialog{background:var(--surface);color:var(--ink)}:root[data-theme=dark] dialog::backdrop{background:#080e0bb3}@media(max-width:740px){.header-actions{gap:12px}.theme-toggle{padding:6px 9px}}

.site-title{margin:0;font:inherit;letter-spacing:normal}
/* Keep the document canvas and page background consistent, including when
   browser extensions recolor them independently. Do not move page content. */
html{min-height:100%;background-color:var(--bg)}
body{min-height:100vh;min-height:100dvh;background-color:var(--bg);display:flow-root}

.footer-links{display:flex;gap:18px;flex-wrap:wrap}.footer-links a{color:var(--muted);text-decoration:none;font-size:11px}.footer-links a:hover{text-decoration:underline}.back-tool{text-decoration:none}.article-main{max-width:860px;padding-top:32px}.article{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:36px 42px;margin-bottom:10px}.article h1{font-size:34px;line-height:1.2;margin:24px 0;letter-spacing:-1.2px}.article h2{font-size:20px;line-height:1.4;margin:30px 0 12px}.article p,.article li{font-size:15px;line-height:1.85;color:var(--ink)}.article .article-lead{font-size:18px;color:var(--muted)}.article .article-date{font-size:12px;color:var(--muted)}.article a{color:inherit;text-underline-offset:3px;overflow-wrap:anywhere}.article-back{font-size:12px;color:var(--muted)!important;text-decoration:none}.contact-box{background:var(--surface-soft);padding:22px;border-radius:12px;margin:28px 0}.contact-box h2{margin-top:12px}.article-cta{display:inline-block;padding:12px 18px;border:1px solid var(--line);border-radius:8px;text-decoration:none}@media(max-width:740px){footer{flex-wrap:wrap;gap:20px}.footer-links{gap:16px}.article{padding:25px 22px}.article h1{font-size:29px}.article p,.article li{font-size:14px}.article-main{padding-top:22px}}

footer .footer-links{display:flex;align-items:center;column-gap:22px;row-gap:12px;flex-wrap:wrap}footer .footer-links a{display:inline-block;white-space:nowrap;padding:4px 0;color:var(--muted);text-decoration:none}@media(max-width:740px){footer .footer-links{column-gap:18px}}

.brand .mark{width:29px;height:29px;transform:none;vertical-align:-3px;margin-right:7px}.brand{letter-spacing:-1.5px}@media(max-width:420px){.brand{font-size:27px}.brand .mark{width:25px;height:25px;margin-right:4px}.header-actions{gap:8px}}