:root{color-scheme:dark;--bg:#101a20;--text:#f5f3ee;--muted:#b2bdc1;--accent:#edc1a6;--line:#344047;--max:1184px;font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--text);line-height:1.6}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}a:hover{color:var(--accent)}.wrap{width:min(var(--max),calc(100% - 96px));margin-inline:auto}.skip-link{position:fixed;left:16px;top:-100px;z-index:10;background:var(--text);color:var(--bg);padding:12px}.skip-link:focus{top:16px}.header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:30px;border-bottom:1px solid var(--line)}.wordmark{font-size:30px;font-weight:650;letter-spacing:-1px;display:flex;align-items:center;gap:22px}.brand-note{font-size:10px;letter-spacing:2.5px;font-weight:500;color:var(--muted)}nav{display:flex;align-items:center;gap:30px;font-size:.875rem}.nav-download{padding:10px 16px;border:1px solid #687178;border-radius:5px}.nav-download span{margin-left:12px}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:48px;align-items:center;padding-block:86px 74px}.eyebrow{font-size:.75rem;letter-spacing:2px;font-weight:600;color:var(--accent);margin:0 0 26px}h1{font-size:clamp(2.5rem,4.3vw,4.5rem);font-weight:500;line-height:1.1;letter-spacing:-2.6px;margin:0 0 30px}h1 em{font-style:normal;color:var(--accent)}.intro{font-size:1.125rem;color:var(--muted);line-height:1.8;margin:0 0 30px}.store-links{display:flex;flex-wrap:wrap;gap:12px;scroll-margin-top:30px}.store-link{display:flex;align-items:center;gap:13px;background:var(--text);color:var(--bg);padding:12px 20px;border:1px solid var(--text);border-radius:8px;min-height:68px;min-width:180px}.store-link:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}.store-link small{font-size:.75rem;display:block;line-height:1.3}.store-link strong{font-size:1.25rem;display:block;line-height:1.3;font-weight:650}.store-symbol{font-size:28px}.store-link svg{width:25px;height:28px;fill:currentColor}.download-note{font-size:.8125rem;color:var(--muted);margin-top:16px;line-height:1.7}.explore-link{display:inline-flex;align-items:center;gap:18px;font-size:.875rem;padding:12px 0;margin-top:20px}.app-preview{margin:0;min-width:0}.screen-pair{display:flex;align-items:center;justify-content:center;gap:20px;max-width:480px;margin-inline:auto}.screen{display:block;object-fit:contain;width:calc(50% - 10px);height:auto;border-radius:14px;box-shadow:0 24px 60px #0005;border:1px solid #d3d8d8}.screen-tuner{transform:translateY(26px)}.screen-metro{transform:translateY(-16px)}figcaption{font-size:.8125rem;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:54px;color:var(--text)}figcaption span{font-size:.75rem;color:var(--muted)}.features{border-top:1px solid var(--line);padding-block:62px 68px}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;margin-bottom:44px}.section-heading .eyebrow{margin-top:10px}h2{font-size:clamp(1.85rem,3vw,2.7rem);font-weight:450;line-height:1.2;letter-spacing:-1.1px;margin:0}.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}.feature-grid article{border-top:1px solid #536169;padding-top:22px}.feature-number{font-size:.75rem;font-weight:550;letter-spacing:1.3px;color:var(--accent)}h3{font-size:1.2rem;font-weight:500;line-height:1.45;margin:21px 0 15px}.feature-grid p{color:var(--muted);font-size:1rem;line-height:1.7}.feature-grid .feature-detail{font-size:.8125rem;color:var(--text);margin-top:24px}.closing{display:flex;justify-content:space-between;align-items:center;gap:48px;padding:46px 48px;background:#1a272e;border:1px solid var(--line);border-radius:10px}.closing p:not(.eyebrow){max-width:610px;color:var(--muted);margin-bottom:0}.closing .eyebrow{margin-bottom:19px}.closing-link{white-space:nowrap;border-bottom:1px solid var(--accent);padding-block:12px;color:var(--accent);font-size:1rem}.closing-link span{margin-left:14px}.footer{padding-block:56px 28px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}.footer-brand{font-size:24px;font-weight:600;letter-spacing:-.5px}.footer-brand span{display:block;font-size:.8125rem;color:var(--muted);font-weight:400;letter-spacing:0}.footer>p{flex-basis:100%;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line);padding-top:22px;margin:6px 0 0}
@media(min-width:1450px){.hero{padding-block:98px}.screen-pair{max-width:490px}}
@media(max-width:1000px){.wrap{width:calc(100% - 56px)}.brand-note{display:none}.hero{gap:28px;padding-block:62px}h1{letter-spacing:-1.8px}.store-link{min-width:166px;padding-inline:15px}.screen-pair{gap:12px}.screen{width:calc(50% - 6px)}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.closing{padding:32px}.closing-link{white-space:normal;min-width:150px}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.header{padding-block:19px;gap:16px}.wordmark{font-size:27px}.header nav{gap:16px}.header nav>a:first-child{display:none}.nav-download{padding:9px 12px}.nav-download span{display:none}.hero{grid-template-columns:1fr;padding-block:46px;gap:48px}.eyebrow{margin-bottom:21px;letter-spacing:1.7px}h1{font-size:clamp(2.55rem,8.5vw,3.7rem);letter-spacing:-1.5px;margin-bottom:22px}.intro{font-size:1.0625rem;margin-bottom:24px}.store-links{gap:10px}.store-link{min-width:0;flex:1;padding:12px;gap:10px}.store-link strong{font-size:1.125rem}.store-link small{font-size:.75rem}.store-symbol{font-size:24px}.download-note{font-size:.8125rem}.explore-link{margin-top:0}.screen-pair{max-width:410px;gap:18px}.screen{width:calc(50% - 9px)}figcaption{margin-top:43px;text-align:center}.features{padding-block:42px}.section-heading{display:block;margin-bottom:30px}.section-heading .eyebrow{margin-top:0}.feature-grid{gap:22px}h3{font-size:1.125rem}.feature-grid p{font-size:1rem}.feature-grid .feature-detail{font-size:.8125rem}.closing{display:block;padding:28px 24px}.closing-link{display:inline-block;margin-top:22px}.footer{padding-top:40px}.footer nav{gap:22px}}
@media(max-width:370px){.header nav{gap:12px}.store-links{flex-direction:column}.store-link{justify-content:center}.feature-grid{grid-template-columns:1fr}.feature-grid article{padding-top:18px}.screen-pair{gap:10px}.screen{width:calc(50% - 5px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.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}button,input,select{font:inherit}button,select{min-height:44px}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{color:var(--text);border:1px solid #52616a;background:#1c2a32;border-radius:8px}button:hover{border-color:var(--accent)}select{color:var(--text);background:#1c2a32;border:1px solid #52616a;border-radius:7px;padding:9px 30px 9px 12px;max-width:100%;min-width:0}input[type=range]{width:100%;accent-color:var(--accent);min-height:30px;cursor:pointer;touch-action:pan-y}.header nav>a:first-child{display:block}.language-label{max-width:190px}.online-hero{grid-template-columns:1fr 1fr;align-items:center;gap:70px;padding-block:55px}.browser-note{font-size:.875rem;color:var(--muted);max-width:430px}.metronome{background:#17252d;border:1px solid #42535e;border-radius:22px;padding:26px;box-shadow:0 22px 70px #0003;min-width:0}.metro-top{display:flex;align-items:center;justify-content:space-between;gap:18px}.metro-top h2{font-size:1.125rem;letter-spacing:0;font-weight:500}.web-label{font-size:.75rem;letter-spacing:2px;color:var(--accent)}.metro-language{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.8125rem;color:var(--muted);margin:12px 0 0}.metro-language select{max-width:210px;font-size:.875rem}.tempo-row{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:16px;direction:ltr;margin-block:16px 4px}.step-button{font-size:28px;width:52px;height:52px;user-select:none;touch-action:none}.tempo-value{text-align:center;min-width:0}.tempo-value input{width:100%;color:var(--text);background:none;border:0;text-align:center;font-size:4.3rem;letter-spacing:-3px;line-height:1.1;font-weight:450;appearance:textfield;-moz-appearance:textfield;border-radius:5px}.tempo-value input::-webkit-inner-spin-button,.tempo-value input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tempo-value>span{display:block;font-size:.75rem;letter-spacing:2px;color:var(--muted)}.presets{display:grid;grid-template-columns:repeat(4,1fr) 1.9fr;gap:7px;direction:ltr;margin-top:6px}.presets button{font-size:.875rem;min-width:0;padding:7px 5px}.presets button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.beat-lights{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;direction:ltr;margin:22px 0 10px}.beat{width:44px;height:46px;font-variant-numeric:tabular-nums;position:relative;font-weight:600;border:1px solid #829198;background:#344651}.beat.accent{background:var(--accent);border-color:var(--accent);color:#17252d}.beat.muted{background:transparent;color:#a7b2b8}.beat.muted:after{content:'×';position:absolute;font-size:12px;right:3px;top:0}.beat.active{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 18px #edc1a640}.beat-hint{font-size:.75rem;color:var(--muted);text-align:center;margin:0 0 18px}.metro-settings{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.metro-settings label{display:flex;flex-direction:column;min-width:0;gap:7px;font-size:.875rem;color:var(--muted)}.metro-settings select{width:100%;font-size:.875rem}.volume-control>span{display:flex;justify-content:space-between;gap:10px}.volume-control input{height:44px;margin:0}.play-button{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;min-height:57px;margin-top:20px;background:var(--accent);color:#14212a;font-size:1.0625rem;border:1px solid var(--accent);font-weight:600}.play-button[aria-pressed=true]{background:#d5dfdf;color:#15232a;border-color:#d5dfdf}.metro-message{font-size:.8125rem;line-height:1.5;text-align:center;min-height:1.5em;margin:12px 0 0;color:var(--muted)}.download-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px;padding-block:68px 74px;border-top:1px solid var(--line)}.download-section h2{margin-bottom:24px}.download-section .screen-pair{max-width:330px}.download-section .intro{font-size:1rem}.metronome[dir=rtl] .metro-top,.metronome[dir=rtl] .metro-language{text-align:right}.metronome[dir=rtl] .tempo-value{direction:ltr}.metronome[dir=rtl] .play-button{flex-direction:row-reverse}
@media(max-width:1000px){.online-hero{gap:32px}.metronome{padding:22px}.download-section{gap:50px}.brand-note{display:none}}
@media(max-width:750px){.online-hero{display:flex;flex-direction:column;gap:27px;padding-block:32px}.hero-copy{width:100%}.online-hero h1{font-size:2.5rem;margin-bottom:15px}.online-hero .intro{margin-bottom:10px}.online-hero .explore-link{padding-block:5px;margin:0}.online-hero .browser-note{font-size:.8125rem;margin:10px 0}.metronome{width:100%;max-width:520px}.download-section{grid-template-columns:1fr;padding-block:44px;gap:46px}.download-section .app-preview{max-width:390px;margin-inline:auto}.header nav{gap:12px}.header nav>a:first-child{display:none}.language-label{max-width:170px}.tempo-value input{font-size:4.3rem}.feature-grid h3{overflow-wrap:anywhere}}
@media(max-width:380px){.metronome{padding:18px}.presets{grid-template-columns:repeat(4,1fr)}.presets #tap{grid-column:1/-1}.metro-language{flex-wrap:wrap}.metro-language select{width:100%;max-width:none}.metro-settings{grid-template-columns:1fr}.tempo-row{grid-template-columns:44px minmax(0,1fr) 44px;gap:12px}.step-button{width:44px;height:48px}.tempo-value input{font-size:min(3.7rem,18vw)}.online-hero h1{font-size:2.2rem}.header .wordmark{font-size:25px}.header{gap:10px}.language-label{max-width:150px}}
h1,h2,h3{overflow-wrap:anywhere;hyphens:auto}
/* Independent web drum demo and App catalogue */
.download-qr{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:24px;margin-top:28px}.download-qr img{display:block;width:180px;height:180px;max-width:100%;object-fit:contain;background:white}.download-qr h3{margin:0 0 10px;font-size:1.125rem}.download-qr p{font-size:.875rem;color:var(--muted);margin:0 0 12px}.qr-save{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);text-decoration:underline;text-underline-offset:4px;font-size:.875rem}.download-qr>div{min-width:0;overflow-wrap:anywhere}@media(max-width:1100px) and (min-width:751px),(max-width:480px){.download-qr{grid-template-columns:1fr}.download-qr img{width:220px;height:220px}}
.brand-icon{width:42px;height:42px;border-radius:10px;flex:none}.wordmark{gap:12px}.download-icon{display:block;width:72px;height:72px;border-radius:17px;margin-bottom:24px}
.drum-open{width:100%;margin-top:16px;padding:12px;font-size:.875rem}
.drum-demo{border-top:1px solid var(--line);padding-block:52px}.drum-demo .section-heading{margin-bottom:20px}.drum-demo .section-heading>div{min-width:0}.drum-demo .section-heading a{flex:none;color:var(--accent)}.drum-demo .eyebrow{margin-bottom:14px}.drum-intro,.feature-intro{color:var(--muted);max-width:850px}
.drum-controls,.drum-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}.drum-demo label{min-width:0;display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:.875rem}.drum-demo select{width:100%}.drum-controls .drum-toggle{flex-direction:row;align-items:center;gap:12px;color:var(--text);font-size:1rem}.drum-toggle input{width:24px;height:24px;flex:none;accent-color:var(--accent)}
.drum-transport{display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:18px;background:#17252d;border:1px solid var(--line);border-radius:12px;margin-top:22px}.drum-transport button{background:var(--accent);color:var(--bg);padding:12px 24px;min-width:140px;font-weight:600}.drum-transport label{flex-direction:row;align-items:center;flex-wrap:wrap}.drum-transport input{width:90px;min-height:44px;background:var(--bg);color:var(--text);border:1px solid #657780;border-radius:6px;padding:8px}.drum-transport>span{color:var(--muted);font-size:.875rem}.drum-levels output{color:var(--text)}.drum-levels label>span{display:flex;justify-content:space-between;gap:12px}
.editor-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:32px}.editor-heading h3{margin:0}.editor-heading span{color:var(--accent);font-size:.875rem}.edit-tools{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-top:18px}.edit-tools label{min-width:150px}.edit-tools button{padding:9px 15px;max-width:100%;overflow-wrap:anywhere}button:disabled,select:disabled{opacity:.5;cursor:default}.editor-help,.feature-note{color:var(--muted);font-size:.875rem;line-height:1.7}
#drumGrid{direction:ltr;margin-block:20px}.drum-grid-row{display:grid;grid-template-columns:130px repeat(16,minmax(0,1fr));gap:5px;margin-top:6px;align-items:center}.drum-grid-header{text-align:center;color:var(--muted);font-size:.875rem}.drum-track{font-size:.875rem;line-height:1.3;padding-right:12px;overflow-wrap:anywhere}.drum-step{min-width:0;min-height:44px;padding:0;border-radius:5px;font-size:1rem;background:#17252d;color:#687b87}.drum-step.level-1{background:#465866;color:#f1f4f6}.drum-step.level-2{background:#a3b6c1;color:#10202a}.drum-step.level-3{background:var(--accent);color:#10202a}.drum-step.current{box-shadow:inset 0 0 0 2px #fff}.edit-beat{display:none;gap:10px}.edit-beat button{flex:1}.edit-beat button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.drum-more a{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.feature-catalog{display:grid;grid-template-columns:1fr 1fr;column-gap:38px;margin-block:30px}.feature-catalog details{border-top:1px solid var(--line);padding:0 0 16px;min-width:0}.feature-catalog summary{cursor:pointer;min-height:48px;padding:16px 0 0;font-size:1.125rem;font-weight:500;overflow-wrap:anywhere}.feature-catalog p{font-size:1rem;color:var(--muted);margin:12px 0 0}
@media(max-width:900px){.edit-beat{display:flex;margin-top:20px}.drum-grid-row{grid-template-columns:minmax(64px,100px) repeat(4,minmax(0,1fr));gap:6px}.drum-grid-row [data-group]{display:none}#drumGrid[data-beat="0"] [data-group="0"],#drumGrid[data-beat="1"] [data-group="1"],#drumGrid[data-beat="2"] [data-group="2"],#drumGrid[data-beat="3"] [data-group="3"]{display:block}.drum-controls,.drum-levels{grid-template-columns:1fr 1fr}.drum-controls .drum-toggle{grid-column:1/-1}.drum-levels label:last-child{grid-column:1/-1}}
@media(max-width:600px){.drum-controls,.drum-levels,.feature-catalog{grid-template-columns:1fr}.drum-demo{padding-block:36px}.drum-demo .section-heading a{display:inline-block;margin-top:15px}.drum-transport{gap:14px}.drum-transport button{min-width:0;flex:1}.drum-transport>span{flex-basis:100%}.drum-transport input{width:80px}.edit-tools label{width:100%}.drum-grid-row{grid-template-columns:minmax(60px,90px) repeat(4,minmax(0,1fr))}.header .brand-icon{width:34px;height:34px;border-radius:8px}.header{flex-wrap:wrap}.header .wordmark{gap:8px}.header nav{min-width:0}.language-label{max-width:145px}.feature-catalog summary{font-size:1rem}}
.footer .locale-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;width:100%;font-size:.875rem}.locale-links a{padding:6px 0;min-height:36px}.locale-links a[aria-current="page"]{color:var(--accent);text-decoration:underline;text-underline-offset:4px}