:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;color:#f4eee5;background:#171512;font-synthesis:none;--ink:#f4eee5;--muted:#aba197;--warm:#edaf58;--line:#443b33;--background:#171512;--soft:#24211e}
*{box-sizing:border-box}html{min-height:100%;background:var(--background)}body{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(ellipse at 50% 5%,#281e16 0%,#171512 48%,#151412 100%);-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #ffcf85;outline-offset:3px}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.app-shell{max-width:1120px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 22px) calc(env(safe-area-inset-left) + 20px)}
.offline-status{position:fixed;z-index:20;left:50%;bottom:calc(env(safe-area-inset-bottom) + 18px);transform:translateX(-50%);max-width:calc(100vw - 32px);padding:9px 14px;border:1px solid #705438;border-radius:999px;background:#28221ded;color:#f3dfc1;box-shadow:0 8px 24px #0007;text-align:center;font-size:12px;line-height:1.3;white-space:nowrap;pointer-events:none}.offline-status[hidden]{display:none}
.topline{display:flex;align-items:flex-start;gap:13px;min-height:68px}.quote{flex:1;max-width:660px;margin:0;color:#f4d6a6;font-size:clamp(17px,4.6vw,22px);font-weight:500;line-height:1.38;letter-spacing:-.018em}.quote:before{content:'“';font-size:1.45em;line-height:0;vertical-align:-.12em;color:var(--warm);margin-right:2px}.icon-button{width:47px;height:47px;display:grid;place-items:center;flex:none;border:0;background:transparent;color:#e9c894;border-radius:50%}.icon-button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.icon-button:hover{background:#332a20}
.workbench{display:block}.main-control{text-align:center}.tempo-area{display:flex;align-items:center;justify-content:center;gap:clamp(10px,4vw,34px);margin:6px auto 11px}.tempo-adjust{flex:none;width:49px;height:49px;padding:0;border:0;border-radius:50%;background:#2a2622;color:#f4e9d7;font-size:31px;line-height:1}.tempo-adjust:active{background:#49341f}.tempo-dial{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;flex-direction:column;flex:none;width:clamp(184px,50vw,252px);height:clamp(184px,50vw,252px);border:3px solid #e9aa51;border-radius:50%;background:radial-gradient(circle,#2b211b 0%,#1b1816 75%);touch-action:none;user-select:none;cursor:grab}.tempo-dial.dragging{cursor:grabbing}.tempo-dial.pulse{border-color:#ffd084;box-shadow:0 0 24px #e9a34355}.dial-halo{position:absolute;inset:6px;border:1px solid #b27a3866;border-radius:50%;pointer-events:none}.tempo-dial input{z-index:1;width:100%;padding:0;border:0;background:transparent;color:#fff5e5;text-align:center;font-size:clamp(67px,18vw,100px);font-weight:700;letter-spacing:-.07em;line-height:1.02;appearance:textfield;-moz-appearance:textfield;outline:0;user-select:text;touch-action:manipulation}.tempo-dial input::-webkit-outer-spin-button,.tempo-dial input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpm-label{z-index:1;color:#d2b58c;font-size:13px;font-weight:700;letter-spacing:.2em}.beat-dots{z-index:1;display:flex;gap:6px;height:9px;margin-top:13px}.beat-dot{width:7px;height:7px;border-radius:50%;background:#7c6550}.beat-dot.active{background:#f5c778;box-shadow:0 0 9px #ffc76b}.beat-dot.first.active{background:#fff0bf}
.transport{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;max-width:390px;margin:10px auto 0}.tap-button{justify-self:start;min-width:58px;min-height:52px;border:0;background:transparent;color:#d9caba;font-size:17px;font-weight:700}.tap-button span{display:block;font-size:9px;font-weight:600;letter-spacing:.1em}.tap-button:active{color:var(--warm)}.work-time{justify-self:end;text-align:right;white-space:nowrap}.work-time strong{display:block;color:#f6e8d4;font-size:27px;font-variant-numeric:tabular-nums;font-weight:600;line-height:1.1}.work-time span{display:block;color:#988f86;font-size:9px;font-weight:700;letter-spacing:.08em;margin-top:4px}
.volume-control{display:flex;align-items:center;gap:10px;min-height:55px;max-width:390px;margin:19px auto 12px;color:#d8ccbc;font-size:13px}.volume-control svg{width:22px;height:22px;fill:none;stroke:#d8c7ad;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.volume-control input{flex:1;min-width:60px;accent-color:#eeb05a;cursor:pointer}.mode-tabs{display:grid;grid-template-columns:1fr 1fr;max-width:460px;margin:0 auto;gap:8px}.mode-tab{min-height:58px;border:1px solid #524536;border-radius:15px;background:transparent;color:#ddcdb7;font-size:16px;font-weight:700;letter-spacing:.035em;text-transform:uppercase}.mode-tab.selected{border-color:#edb158;background:#6a421e;color:#ffedcf}.mode-tab:not(.selected):hover{background:#2b2520}.session-line{display:flex;justify-content:space-between;gap:10px;max-width:460px;margin:13px auto 0;color:#92897e;font-size:11px}.session-line strong{color:#d6c5ae;font-variant-numeric:tabular-nums;font-weight:600}.live-status{color:#a79a8b}
.settings{margin:32px auto 0;max-width:520px}.section-title{margin:0 0 7px;color:#d6c6b0;font-size:14px;font-weight:700;letter-spacing:.025em}.setting{border-bottom:1px solid var(--line)}.setting summary,.flash-setting{display:flex;align-items:center;gap:12px;min-height:58px;list-style:none;color:#e8ddd0;cursor:pointer}.setting summary::-webkit-details-marker{display:none}.setting summary>span:first-child,.flash-setting>span:first-child{flex:1;font-size:15px}.setting summary strong{color:#edb660;font-size:14px;font-weight:600}.chevron{color:#a89782;display:inline-block;font-size:21px;line-height:1;transition:transform .15s}.setting[open] .chevron{transform:rotate(180deg)}.choice-row{display:flex;gap:8px;flex-wrap:wrap;padding:1px 0 14px}.choice{min-width:47px;min-height:43px;padding:8px 13px;border:1px solid #55483b;border-radius:11px;background:#211e1b;color:#d8c9b7;font-size:13px}.choice.selected{border-color:#efb763;background:#674421;color:#ffebce}.choice:active{transform:scale(.98)}.flash-setting{position:relative}.flash-setting input{position:absolute;opacity:0;width:1px;height:1px}.switch{width:42px;height:24px;border-radius:20px;background:#51473d;position:relative;transition:background .15s}.switch:before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#f3e8db;transition:transform .15s}.flash-setting input:checked+.switch{background:#d89437}.flash-setting input:checked+.switch:before{transform:translateX(18px)}
.groove-settings{margin-top:29px}.groove-settings .section-title{font-size:18px;color:#f0dfc7;margin-bottom:16px}.style-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.style-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:75px;padding:12px 14px;text-align:left;border:1px solid #504438;border-radius:12px;background:#211e1b;color:#f3e7d5}.style-card strong{font-size:16px}.style-card span{font-size:11px;color:#a99b8b}.style-card.selected{border-color:#e9ad5a;background:#52371f}.variant-label{margin:20px 0 10px;color:#aba092;font-size:13px}.variant-label strong{color:#edb660}.variant-row{padding-bottom:3px}.demo-note{color:#8e8276;font-size:11px;line-height:1.5;margin-top:14px}
.tuner-view{max-width:720px;margin:0 auto}.tuner-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 25px}.tuner-top h2{margin:0;font-size:22px;font-weight:650}.back-button{border:0;background:transparent;color:#e6bd80;font-size:21px;min-height:45px;padding:0}.back-button span{font-size:13px;vertical-align:2px;margin-left:4px}.tuner-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tuner-mode button{min-height:50px;border:1px solid #514538;border-radius:12px;background:transparent;color:#dbccb9;font-weight:650}.tuner-mode button.selected{border-color:#e6ae5c;background:#53371e;color:#ffe8c6}.string-row{display:flex;justify-content:center;gap:6px;min-height:62px;margin-top:21px}.string-button{min-width:44px;height:52px;padding:4px;border:1px solid #53483e;border-radius:10px;background:#25211e;color:#dccdbb}.string-button .string-number{display:block;color:#948779;font-size:10px}.string-button .string-note{display:block;font-size:17px;font-weight:700}.string-button.active{border-color:#e6ad59;color:#ffe2ae;background:#583a20}.string-button.active .string-number{color:#ebbd81}.tuner-gauge{padding-top:16px;text-align:center}.gauge-ticks{display:flex;justify-content:space-between;color:#84796e;font-size:10px;font-variant-numeric:tabular-nums}.gauge-ticks span:nth-child(3){color:#e9bb76}.gauge-track{height:52px;margin-top:4px;position:relative;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#8b786477 calc(10% - 1px) 10%);border-top:1px solid #5f5144}.gauge-track:after{content:'';position:absolute;left:50%;top:-10px;width:2px;height:53px;background:#b8d59d}.gauge-needle{position:absolute;left:50%;top:-13px;z-index:1;width:4px;height:58px;border-radius:4px;background:#ffe4b4;box-shadow:0 0 10px #f4c0708c;transform:translateX(-50%);transition:left .1s}.detected-note{min-height:135px;color:#fff3db;font-size:clamp(95px,24vw,145px);font-weight:700;line-height:1.15;letter-spacing:-.06em}.tune-message{min-height:28px;margin:0;color:#e3b16d;font-size:18px;font-weight:600}.tune-message.in-tune{color:#a4d598}.tune-message.held{opacity:.62}.tune-guides{display:flex;justify-content:space-between;gap:8px;margin-top:28px;color:#a99b8b;font-size:10px;letter-spacing:.06em}.tune-guides strong{color:#a4d598;font-weight:650}.reference-row{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:320px;margin:34px auto 0;padding:10px 0;border-top:1px solid var(--line);color:#a99c8c;font-size:13px}.reference-row input{width:56px;border:0;background:transparent;color:#ebd8bb;text-align:right;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}.reference-row input::-webkit-inner-spin-button,.reference-row input::-webkit-outer-spin-button{-webkit-appearance:none}.reference-row>div span{margin-left:4px}.mic-error{color:#f1ae8f;line-height:1.4;text-align:center;font-size:13px}.retry-button{display:block;margin:15px auto;min-height:44px;border:1px solid #d49d5a;border-radius:10px;background:transparent;color:#ecc389;padding:8px 18px}
@media(min-width:820px){.app-shell{padding-top:calc(env(safe-area-inset-top) + 34px)}.topline{min-height:104px;align-items:flex-start}.quote{max-width:760px;font-size:23px}.workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,390px);gap:clamp(35px,5vw,75px);align-items:start}.main-control{padding-top:5px}.tempo-area{margin-top:0}.tempo-dial{width:250px;height:250px}.settings{width:100%;max-width:none;margin-top:0;padding-top:8px}.settings .section-title{font-size:18px;margin:0 0 15px;color:#f0dfc7}.setting{border-bottom:0;margin-bottom:13px}.setting summary{min-height:28px;cursor:default}.setting summary>span:first-child{font-size:13px;color:#bfb1a0}.setting summary strong,.setting summary .chevron{display:none}.setting .choice-row{display:flex!important;padding:10px 0 0}.setting .choice{min-height:43px}.flash-setting{border-top:1px solid var(--line);margin-top:21px;padding-top:13px}.groove-settings .style-grid{grid-template-columns:repeat(2,1fr)}.groove-settings .style-card{min-height:87px}.tuner-top{margin-bottom:30px}}
@media(min-width:1050px){.tempo-dial{width:286px;height:286px}.tempo-dial input{font-size:107px}.tempo-adjust{width:55px;height:55px}.workbench{gap:95px}}
@media(max-width:359px){.app-shell{padding-left:calc(env(safe-area-inset-left) + 12px);padding-right:calc(env(safe-area-inset-right) + 12px)}.tempo-dial{width:174px;height:174px}.tempo-dial input{font-size:61px}.tempo-area{gap:9px}.tempo-adjust{width:42px;height:42px}.work-time strong{font-size:23px}.tap-button{min-width:48px}.string-button{min-width:39px}}
@media(max-height:650px) and (orientation:landscape) and (max-width:819px){.app-shell{padding-top:calc(env(safe-area-inset-top) + 10px)}.topline{min-height:40px}.quote{font-size:16px}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:22px}.tempo-dial{width:150px;height:150px}.tempo-dial input{font-size:54px}.tempo-area{margin:0}.volume-control{margin:8px auto 0}.settings{margin-top:0}.mode-tab{min-height:43px}}
.topline{min-height:126px}.voice-block{flex:1;max-width:760px}.voice-name{display:block;margin:1px 0 9px;color:#b99568;font-size:11px;font-weight:800;letter-spacing:.3em}.voice-name span{color:#efaf4e;font-size:8px;vertical-align:3px}.quote{max-width:none;color:#f7dfbb;font-size:clamp(22px,5.4vw,28px);font-weight:580;line-height:1.32;letter-spacing:-.026em}.quote:before{font-size:1.25em;color:#e9a64a}
.tempo-dial{width:clamp(185px,calc(100vw - 168px),270px);height:clamp(185px,calc(100vw - 168px),270px)}.dial-content{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;justify-content:center;width:100%;height:100%;padding:12px 8px 8px}.bpm-value{display:block;width:100%;min-height:72px;padding:0;border:0;background:transparent;color:#fff3df;text-align:center;font-size:clamp(69px,18vw,88px);font-weight:720;line-height:1;letter-spacing:-.075em;touch-action:manipulation}.bpm-value:active{color:#ffdfad}.tempo-dial input{max-width:180px;min-height:72px;font-size:clamp(69px,18vw,88px);cursor:text}.bpm-label{font-size:11px;letter-spacing:.23em}.beat-dots{margin-top:12px}.transport{display:flex;justify-content:space-between;max-width:340px;margin-top:5px}.tap-button{justify-self:auto}.work-time{justify-self:auto}
@media(min-width:820px){.topline{min-height:143px}.voice-name{margin-bottom:13px}.quote{font-size:30px}.tempo-dial{width:280px;height:280px}.bpm-value,.tempo-dial input{font-size:94px}.transport{margin-top:9px}}
@media(max-width:359px){.tempo-dial{width:204px;height:204px}.bpm-value,.tempo-dial input{font-size:64px;min-height:65px}.topline{min-height:137px}}
@media(max-height:650px) and (orientation:landscape) and (max-width:819px){.topline{min-height:74px}.quote{font-size:18px}.voice-name{margin-bottom:4px}.tempo-dial{width:195px;height:195px}.bpm-value,.tempo-dial input{font-size:57px;min-height:58px}.beat-dots{margin-top:7px}}

/* One continuous, tactile surface for playback and tempo rotation. */
.tempo-dial{border:2px solid #dc9b4c;background:radial-gradient(circle at 43% 34%,#4b321f 0%,#2d211a 44%,#1b1917 80%,#121312 100%);box-shadow:0 14px 28px #0008,0 0 0 8px #3c291b,0 0 0 10px #79512c;cursor:pointer;transition:border-color .16s,box-shadow .16s}
.tempo-dial.dragging{cursor:grabbing}
.tempo-dial:after{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle,#f6bd684d 0%,#d7862433 50%,transparent 80%);opacity:0;pointer-events:none;transition:opacity .16s}
.tempo-dial.pulse{border-color:#ffe0a0;box-shadow:0 0 35px #e9a34378,0 0 0 8px #694222,0 0 0 10px #f5b763}
.tempo-dial.pulse:after{opacity:1}
.dial-halo{inset:7px;border:0;background:repeating-conic-gradient(from -90deg,#b8884c 0deg .6deg,transparent .6deg 7.5deg),conic-gradient(from 220deg,transparent 0deg,#d99540 90deg,#ffce77 150deg,#d99540 210deg,transparent 270deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 16px),#000 calc(100% - 15px) calc(100% - 8px),transparent calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 16px),#000 calc(100% - 15px) calc(100% - 8px),transparent calc(100% - 7px));opacity:.67;transform:rotate(var(--wheel-angle,0deg));transition:transform .12s ease}
.dial-content{z-index:1;padding:12px 8px 8px}
.bpm-value{cursor:inherit;min-height:66px}
.dial-symbol{display:block;margin:16px 0 3px;color:#f5bc66;font-size:39px;font-weight:700;line-height:1;min-height:43px;text-shadow:0 0 13px #dc8a3066;user-select:none}
.tempo-dial.playing .dial-symbol{font-size:38px;color:#ffd392}
.tempo-dial.playing{border-color:#e9ae61}
.tempo-dial:focus-visible{outline:2px solid #ffcf85;outline-offset:14px}
.tempo-dial input{position:relative;z-index:2}
@media(max-width:359px){.tempo-dial{width:clamp(160px,calc(100vw - 128px),204px);height:clamp(160px,calc(100vw - 128px),204px)}.dial-content{padding:8px 5px}.dial-symbol{font-size:29px;margin:4px 0 0;min-height:30px}.bpm-value,.tempo-dial input{font-size:clamp(50px,17vw,64px);min-height:50px}.beat-dots{margin-top:5px}}
@media(max-height:650px) and (orientation:landscape) and (max-width:819px){.dial-symbol{font-size:29px;margin:4px 0 0;min-height:31px}.bpm-value{min-height:54px}}
.tuner-open.returning{width:47px;color:#f0c27f;background:transparent!important;border:0;box-shadow:none}.metronome-return{display:none;align-items:center;justify-content:center}.metronome-return svg{width:27px;height:27px}.tuner-open.returning .tuner-icon{display:none}.tuner-open.returning .metronome-return{display:flex}
.tuner-open:hover{background:transparent}
.style-card:disabled{cursor:default;opacity:.58}.style-card:disabled:hover{background:#211e1b}
.beat-dots{gap:7px;height:11px}
.beat-dot{width:9px;height:9px}
.style-card{min-height:108px}.style-card span{font-size:13px;line-height:1.35}
.tempo-area{gap:8px}.tempo-adjust{width:42px;height:42px}.tempo-dial{width:clamp(190px,calc(100vw - 140px),300px);height:clamp(190px,calc(100vw - 140px),300px)}
@media(min-width:820px){.tempo-dial{width:318px;height:318px}.tempo-adjust{width:55px;height:55px}.tempo-area{gap:25px}}
@media(max-width:359px){.tempo-area{gap:7px}.tempo-adjust{width:40px;height:40px}.tempo-dial{width:calc(100vw - 136px);height:calc(100vw - 136px)}}
@media(max-height:650px) and (orientation:landscape) and (max-width:819px){.tempo-dial{width:195px;height:195px}}

/* Public web presentation and installation help. The practice controls retain priority. */
.topline{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:start;gap:6px 10px;min-height:134px}
.voice-name{margin:0;color:#f3e4cd;font-size:17px;font-weight:800;letter-spacing:.09em;line-height:1.24}
.voice-subtitle{display:block;margin-top:4px;color:#dca35c;font-size:11px;font-weight:650;letter-spacing:.055em}
.quote{grid-column:1/-1;margin:7px 0 0}
.header-actions{display:flex;align-items:center;gap:7px}
.language-switch{display:inline-flex;align-items:center;flex:none;padding:3px;border:1px solid #65513b;border-radius:10px;background:#211d1a}
.language-switch a{min-width:27px;padding:5px 3px;border-radius:7px;color:#ad9d8a;text-align:center;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.02em}
.language-switch a[aria-current="page"]{background:#684320;color:#ffe0ad}
.language-switch a:focus-visible{outline:2px solid #ffcf85;outline-offset:2px}
.install-open,.install-details-button{min-height:40px;padding:8px 13px;border:1px solid #b07b39;border-radius:12px;background:#2c2118;color:#ffd8a0;font-size:12px;font-weight:700;white-space:nowrap}
.install-open:hover,.install-details-button:hover{background:#533821}
.header-actions .tuner-open{width:41px;height:41px}
.right-rail{min-width:0}
.learn{margin:88px 0 0;padding-top:27px;border-top:1px solid #514233;color:#d9cbb8}
.section-kicker{display:block;color:#d9a85f;font-size:10px;font-weight:800;letter-spacing:.2em}
.learn h1,.learn h2{margin:12px 0 14px;color:#f5e8d6;font-size:clamp(23px,4.5vw,38px);line-height:1.12;letter-spacing:-.035em}
.learn h3{margin:0 0 9px;color:#f1dfc8;font-size:17px;line-height:1.25}
.learn p{margin:0;color:#bfb1a0;font-size:14px;line-height:1.66}
.learn-intro{max-width:780px}.learn-intro p{font-size:16px}.learn-intro p+p{margin-top:12px}
.learn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:31px}
.learn-grid article{min-height:153px;padding:22px;border:1px solid #463c33;border-radius:15px;background:#211d1a}
.install-section{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-top:48px;padding:27px;border:1px solid #715434;border-radius:17px;background:linear-gradient(110deg,#35261a,#211d19 67%)}
.install-section>div{max-width:650px}.install-section h2{font-size:clamp(22px,3vw,30px)}
.install-details-button{flex:none;background:#62401f;border-color:#d59d4e;color:#fff0d5}
.faq{max-width:790px;margin:43px 0 0}.faq h2{font-size:24px}.faq details{border-bottom:1px solid #483c31}.faq summary{padding:17px 4px;color:#e9d9c3;font-weight:650;cursor:pointer}.faq details p{padding:0 4px 17px}
.site-footer{padding:48px 0 12px;text-align:center}.site-footer a{color:#efbe78;font-size:13px;text-decoration:none}.site-footer a:hover{text-decoration:underline}
.install-dialog{width:min(620px,calc(100vw - 26px));max-height:min(85dvh,760px);padding:24px;border:1px solid #745538;border-radius:20px;background:#201c19;color:#f5e9d9;box-shadow:0 30px 80px #000b;overflow:auto}.install-dialog::backdrop{background:#080706b8;backdrop-filter:blur(4px)}
.install-dialog-head{display:flex;align-items:start;justify-content:space-between;gap:15px}.install-dialog h2{margin:7px 0 12px;font-size:30px}.install-dialog>p{margin:0 0 20px;color:#bcad9d;font-size:14px;line-height:1.55}.install-close{width:36px;height:36px;border:1px solid #564434;border-radius:50%;background:#2c2520;color:#f8e4c5;font-size:25px;line-height:1}
.install-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.install-steps section{padding:17px;border:1px solid #493c30;border-radius:13px;background:#29221d}.install-steps h3{margin:0 0 7px;color:#f2d0a0;font-size:15px}.install-steps p{margin:0;color:#c8b9a7;font-size:13px;line-height:1.55}.install-steps strong{color:#f3d1a2}
@media(min-width:820px){.topline{min-height:156px;gap:12px 16px}.voice-name{font-size:21px}.voice-subtitle{font-size:12px}.quote{margin-top:0}.install-open{min-height:43px;padding:9px 16px;font-size:13px}}
@media(max-width:819px){.right-rail .settings{margin-top:27px}.learn{margin-top:75px}.learn-grid{grid-template-columns:1fr}.learn-grid article{min-height:0}.install-section{display:block;padding:22px}.install-details-button{margin-top:18px}.install-steps{grid-template-columns:1fr}}
@media(max-width:359px){.topline{min-height:151px}.voice-name{font-size:15px}.voice-subtitle{font-size:10px}.install-open{padding:7px 8px;font-size:11px}.header-actions{gap:3px}.header-actions .tuner-open{width:36px;height:36px}.learn{margin-top:62px}}
@media(max-width:359px){.language-switch{padding:2px}.language-switch a{min-width:22px;padding:5px 2px;font-size:9px}}
@media(display-mode:standalone){.install-open,.learn{display:none!important}.topline{min-height:126px}}

:root{--brand-night:#171512;--brand-ivory:#f4eee5;--brand-amber:#edaf58;--brand-lagoon:#87c3b7;--brand-sand:#d9b789;--brand-radius:17px}

/* Clearer desktop hierarchy. Mobile practice controls retain their layout. */
.desktop-summary,.desktop-setting-title,.tuner-label{display:none}
.desktop-promos{display:none}
.promotion-slot{display:none;height:154px;margin-top:23px}
.promotion-card[hidden]{display:none}
.promotion-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:15px 45px 13px 17px;border:1px solid #65513b;border-radius:var(--brand-radius);background:linear-gradient(130deg,#2b251e,#201d1a 74%);box-shadow:0 10px 24px #0002}
.promotion-eyebrow{color:#cfa971;font-size:9px;font-weight:800;letter-spacing:.16em}
.promotion-card[data-offer="pack_drums"]{border-color:#476a68;background:linear-gradient(130deg,#203035,#211e1a 74%)}
.promotion-card[data-offer="pack_drums"] .promotion-eyebrow{color:var(--brand-lagoon)}
.promotion-card h2{margin:6px 0 4px;color:#f4e7d1;font-size:17px;line-height:1.2}
.promotion-card p{margin:0;color:#c6b6a4;font-size:12px;line-height:1.4}
.promotion-link{align-self:flex-start;display:inline-flex;align-items:center;min-height:35px;margin-top:9px;padding:6px 10px;border:1px solid #a77c47;border-radius:9px;color:#f8d59d;text-decoration:none;font-size:11px;font-weight:700}
.promotion-link:hover{background:#4a3422}
.promotion-link:focus-visible,.promotion-close:focus-visible{outline:2px solid #ffcf85;outline-offset:2px}
.promotion-close{position:absolute;top:8px;right:9px;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:#baaa98;font-size:22px;line-height:1}
.promotion-close:hover{background:#4b3b2c;color:#fff0d5}
@media(min-width:820px){
  .topline{min-height:185px;gap:13px 20px}
  .voice-name{font-size:clamp(31px,3vw,40px);letter-spacing:.04em;line-height:1.02}
  .voice-subtitle{margin-top:7px;font-size:14px;letter-spacing:.08em}
  .desktop-summary{display:block;max-width:650px;margin:12px 0 0;color:#bfae98;font-size:13px;line-height:1.4}
  .quote{font-size:clamp(20px,2vw,24px);font-weight:520}
  .header-actions{gap:11px}
  .header-actions .tuner-open,.header-actions .tuner-open.returning{display:inline-flex;align-items:center;gap:8px;width:auto;min-height:43px;padding:8px 13px;border:1px solid #8b6946;border-radius:12px;background:#2c2118!important;color:#f4d4a6}
  .header-actions .tuner-open:hover{background:#493321!important}
  .tuner-label{display:inline;font-size:13px;font-weight:700;white-space:nowrap}
  .mobile-setting-title{display:none}
  .desktop-setting-title{display:inline}
  .right-rail .groove-settings{margin-top:23px}
  .promotion-slot{display:none}
  .desktop-promos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 24px}
  .desktop-promo{min-width:0;min-height:120px;padding:14px 17px;border:1px solid #6d5138;border-radius:var(--brand-radius);background:linear-gradient(140deg,#33271e,#211e1a 80%)}
  .desktop-promo-pack{border-color:#476a68;background:linear-gradient(140deg,#203035,#211e1a 80%)}
  .desktop-promo-eyebrow{color:#d9b789;font-size:9px;font-weight:800;letter-spacing:.16em}
  .desktop-promo-pack .desktop-promo-eyebrow{color:var(--brand-lagoon)}
  .desktop-promo h2{margin:6px 0 4px;color:#f4e7d1;font-size:17px;line-height:1.2}
  .desktop-promo p{margin:0;color:#c6b6a4;font-size:12px;line-height:1.45}
  .desktop-promo a{display:inline-flex;align-items:center;gap:5px;margin-top:8px;color:#f8d59d;font-size:12px;font-weight:700;text-decoration:none}
  .desktop-promo a:hover{text-decoration:underline}
  .desktop-promo a:focus-visible{outline:2px solid #ffcf85;outline-offset:3px}
}
@media(min-width:1220px){
  .app-shell{max-width:1450px}
  .workbench{grid-template-columns:minmax(345px,430px) minmax(650px,1fr);gap:clamp(45px,5vw,80px)}
  .right-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 23px;align-items:start}
  .right-rail .groove-settings{margin-top:0}
  .right-rail.groove-active #groove-panel{grid-column:1/-1;max-width:710px}
  .right-rail .promotion-slot{grid-column:1/-1}
}
@media(max-width:359px){.promotion-slot{height:173px}}

/* Desktop uses the two panel headings as playback controls. */
.desktop-mode-heading{display:none}
.standalone-support{display:none}
@media(min-width:820px){
  .mode-tabs{display:none}
  .right-rail .section-title{margin-bottom:15px}
  .desktop-mode-heading{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:3px 10px 3px 0;border:0;background:transparent;color:#c5b5a0;font-size:20px;font-weight:750;line-height:1.2}
  .desktop-mode-heading:hover{color:#ffe0a9}
  .desktop-mode-heading.selected{color:#ffe0a9}
  .heading-indicator{display:inline-block;width:8px;height:8px;border:1px solid #b39166;border-radius:50%;background:transparent}
  .desktop-mode-heading.selected .heading-indicator{background:#dfa650;border-color:#dfa650;box-shadow:0 0 10px #dfa65066}
  .desktop-mode-heading.playing .heading-indicator{background:#f2c578;border-color:#f2c578;box-shadow:0 0 13px #edb358}
  .right-rail .settings:not(.groove-active){transition:opacity .15s}
  .desktop-promos{margin:27px 0 0}
  .desktop-promo{display:flex;flex-direction:column;min-height:260px;overflow:hidden;padding:13px}
  .desktop-promo-art{display:block;width:100%;height:110px;margin:0 0 13px;border-radius:10px;object-fit:cover}
  .desktop-promo a{margin-top:auto;padding-top:13px}
}
@media(min-width:1220px){
  .right-rail.groove-active #groove-panel{grid-column:auto;max-width:none}
}
@media(min-width:1650px){
  .app-shell{max-width:1780px}
  #metronome-view{display:grid;grid-template-columns:200px minmax(0,1fr) 200px;column-gap:24px;align-items:start}
  .workbench{grid-column:2;grid-row:1;grid-template-columns:minmax(345px,420px) minmax(630px,1fr);gap:clamp(35px,3vw,60px)}
  .desktop-promos{display:contents}
  .desktop-promo-gms{grid-column:1;grid-row:1}
  .desktop-promo-pack{grid-column:3;grid-row:1}
  .learn,.standalone-support{grid-column:1/-1}
  .desktop-promo{min-height:335px}
  .desktop-promo-art{height:132px}
}
@media(display-mode:standalone){.desktop-promos{display:none!important}.standalone-support{display:block}}
.standalone-app .desktop-promos,.network-offline .desktop-promos,.network-offline .promotion-slot{display:none!important}
@media(max-width:819px){.standalone-app:not(.network-offline) .promotion-slot{display:block}}
.standalone-app .install-open,.standalone-app .learn{display:none!important}
.standalone-app .standalone-support{display:block}
.standalone-support{padding:37px 0 10px;text-align:center}
.standalone-support a{color:#b99770;font-size:12px;text-decoration:none}
.standalone-support a:hover{text-decoration:underline}

/* Practice layout: TIMO dial and click options on the left, groove library on the right. */
@media(min-width:820px){
  .workbench{grid-template-rows:auto auto;row-gap:24px}
  .main-control{grid-column:1;grid-row:1}
  .right-rail{display:contents}
  #click-panel{grid-column:1;grid-row:2;align-self:start;margin-top:0;padding:16px 0 0;border-top:1px solid var(--line)}
  #groove-panel{grid-column:2;grid-row:1/span 2;align-self:start;margin-top:0}
  .style-grid .style-card:last-child:nth-child(odd){grid-column:1/-1}
}
@media(min-width:1220px){
  .groove-settings .style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .style-grid .style-card:last-child:nth-child(odd){grid-column:auto}
}
@media(display-mode:standalone){.language-switch{display:none!important}}
.standalone-app .language-switch{display:none!important}
.detected-note{position:relative}
.detected-string{position:absolute;left:calc(50% + 55px);top:50%;transform:translateY(-50%);padding:5px 8px;border:1px solid #8b6946;border-radius:999px;background:#2c2118;color:#f4d4a6;font-size:13px;font-weight:650;letter-spacing:0;line-height:1.2;white-space:nowrap}
.tuner-view{padding-top:14px}

/* Keep the tempo wheel on the desktop's visual centerline. */
@media(min-width:820px){
  .tuner-view{padding-top:22px}
  .workbench{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,48px)}
  .main-control{grid-column:1/-1;grid-row:1;justify-self:center;width:min(100%,480px)}
  #click-panel{grid-column:1;grid-row:2}
  #groove-panel{grid-column:2;grid-row:2}
}
@media(min-width:1200px){
  .workbench{grid-template-columns:minmax(0,1fr) minmax(430px,480px) minmax(0,1fr);grid-template-rows:auto;column-gap:clamp(16px,2vw,28px)}
  .main-control{grid-column:2;grid-row:1;width:100%}
  .tempo-area{gap:10px}
  .tempo-adjust{width:45px;height:45px}
  #click-panel{grid-column:1;grid-row:1;padding-top:8px;border-top:0}
  #groove-panel{grid-column:3;grid-row:1}
  .groove-settings .style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .style-grid .style-card:last-child:nth-child(odd){grid-column:1/-1}
}

/* Desktop: the header and wheel share a centerline; promotions flank the wheel. */
@media(min-width:820px){
  #metronome-view{display:block}
  .topline{grid-template-columns:minmax(0,1fr) minmax(0,520px) minmax(0,1fr);grid-template-rows:auto auto;min-height:0;margin-bottom:30px;text-align:center}
  .brand-intro{grid-column:2;grid-row:1}
  .desktop-summary{display:none}
  .quote{grid-column:2;grid-row:2;justify-self:center;max-width:520px;margin:8px 0 0}
  .header-actions{grid-column:3;grid-row:1;justify-self:end}
  .workbench{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:clamp(22px,4vw,54px);row-gap:28px;align-items:start}
  .main-control{grid-column:1/-1;grid-row:1;justify-self:center;width:min(100%,480px)}
  .right-rail{display:grid;grid-column:1/-1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(22px,4vw,54px);align-items:start}
  #click-panel{grid-column:1;grid-row:1;margin:0;padding:16px 0 0;border-top:1px solid var(--line)}
  #groove-panel{grid-column:2;grid-row:1;margin:0;padding:16px 0 0;border-top:1px solid var(--line)}
  .desktop-promos{grid-column:1/-1;grid-row:3;margin:0}
  .desktop-promo{min-height:245px}
}
@media(min-width:1000px){
  .workbench{grid-template-columns:minmax(0,1fr) minmax(430px,480px) minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(24px,3vw,48px)}
  .main-control{grid-column:2;grid-row:1}
  .desktop-promos{display:contents}
  .desktop-promo-gms{grid-column:1;grid-row:1}
  .desktop-promo-pack{grid-column:3;grid-row:1}
  .desktop-promo{align-self:center;min-height:260px}
  .right-rail{grid-column:1/-1;grid-row:2}
  .groove-settings .style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .style-grid .style-card:last-child:nth-child(odd){grid-column:auto}
}

/* Portrait side panels and a compact practice column on wide screens. */
@media(min-width:1000px){
  .desktop-promo{height:430px;min-height:0;padding:14px}
  .desktop-promo-art{height:175px;object-fit:cover}
}
@media(min-width:1200px){
  .workbench{grid-template-columns:minmax(150px,200px) minmax(0,680px) minmax(150px,200px);grid-template-rows:auto auto;column-gap:clamp(28px,3.5vw,60px);justify-content:center;row-gap:34px}
  .main-control{grid-column:2;grid-row:1}
  .right-rail{grid-column:2;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}
  .desktop-promo-gms{grid-column:1;grid-row:1/span 2}
  .desktop-promo-pack{grid-column:3;grid-row:1/span 2}
  .desktop-promo{align-self:start;height:540px;padding:14px}
  .desktop-promo-art{height:230px;margin-bottom:20px}
  .groove-settings .style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .style-grid .style-card:last-child:nth-child(odd){grid-column:1/-1}
  .learn-intro,.learn-grid,.faq{margin-left:auto;margin-right:auto}
  .learn-grid{max-width:900px}
}

.accent-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 14px;color:#c9b9a4;font-size:14px}
.accent-setting .choice{flex:none}