html,body{margin:0;background:#141414}
.pg .how{padding-top:0}
.pg{overflow-x:clip}
.pg .how::before{content:"";display:block;width:100vw;height:1px;margin:120px 0 112px calc(50% - 50vw);background:rgba(230,226,218,.1)}
@media (max-width:600px){.pg .how::before{margin:72px 0 64px calc(50% - 50vw)}}
.b .tk.dqt{width:calc(100% - 24px);max-width:1240px}
.dq-ctl{display:flex;align-items:center;gap:28px;color:#A39F98;font-size:16px;line-height:20px;padding:0 8px}
.dq-sel{display:flex;align-items:center;gap:10px;color:#E6E2DA;font-size:20px;line-height:24px}
.dq-seg{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:#272727}
.dq-seg button{height:32px;min-width:40px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:#A39F98;font:inherit;cursor:pointer}
.dq-seg button.is{background:#3A3A3A;color:#E6E2DA}
.dq-sp{flex:1}
.pg .dq-line{width:min(720px,calc(100% - 32px));margin:28px auto 0;text-align:center;color:#A39F98;font-size:20px;line-height:28px;text-wrap:balance}
.dq-line a{color:#E6E2DA;box-shadow:inset 0 -1px 0 rgba(230,226,218,.35)}
.dq-app{display:flex;align-items:center;gap:20px}
.dq-app .t26{color:#E6E2DA}
.b .go.dq-red{background:#DA291C;color:#FFF}
@media (max-width:760px){
 .dq-ctl{gap:16px;flex-wrap:wrap;padding:0}
 .dq-sp{display:none}
 .pg .dq-line{font-size:16px;line-height:22px}}

.b .tk.dqt{max-width:820px}

.mt-sec{display:flex;flex-direction:column;align-items:center;gap:32px;padding:44px 40px!important}
.mt-top{display:flex;align-items:center;gap:28px}
.mt-bpm{display:flex;align-items:baseline;gap:10px;margin:0;color:#E6E2DA}
.mt-bpm b{font-weight:400;font-size:144px;line-height:120px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mt-bpm span{font-size:20px;color:#6B6862}
.mt-step{width:56px;height:56px;border:0;border-radius:50%;background:#262626;color:#A39F98;font:inherit;font-size:28px;line-height:1;cursor:pointer;
 box-shadow:inset 0 1px 0 rgba(230,226,218,.05),0 1px 1px rgba(0,0,0,.12),0 8px 18px -10px rgba(0,0,0,.4);transition:background .15s ease,color .15s ease}
.mt-step:hover{background:#2B2B2B;color:#E6E2DA}
.mt-beats{display:grid;grid-template-columns:repeat(4,148px);gap:14px}
.mb{position:relative;display:flex;align-items:flex-end;height:96px;padding:14px 18px;border-radius:24px;background:#262626;
 box-shadow:inset 0 1px 0 rgba(230,226,218,.05),0 1px 1px rgba(0,0,0,.12),0 8px 18px -10px rgba(0,0,0,.4);transition:background .45s cubic-bezier(.2,.8,.2,1)}
.mb i{font-style:normal;font-size:16px;color:#6B6862}
.mb.hit{background:var(--c);transition-duration:0s;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px -12px color-mix(in srgb,var(--c) 75%,transparent)}
.mb.hit i{color:#141414}
.mt-row{display:flex;align-items:center;gap:24px;width:634px}
.mt-play{flex:none;display:grid;place-items:center;width:72px;height:72px;border:0;border-radius:50%;background:#E6E2DA;color:#141414;cursor:pointer;
 box-shadow:0 8px 22px -12px rgba(0,0,0,.6);transition:transform .08s ease}
.mt-play:active{transform:scale(.96)}
.mt-ctt .mt-sub{margin:4px 0 0;font-size:14px;line-height:18px;color:#6B6862}
.mt-split{position:relative;display:flex;align-items:center;height:48px;border-radius:999px;background:#E6E2DA;color:#141414;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px -14px rgba(0,0,0,.7)}
.mt-dl,.mt-len{display:inline-flex;align-items:center;gap:8px;height:48px;border:0;background:transparent;color:inherit;font:inherit;font-size:16px;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s ease}
.mt-dl{padding:0 18px 0 20px;border-radius:999px 0 0 999px}
.mt-len{padding:0 16px 0 14px;border-radius:0 999px 999px 0;color:rgba(20,20,20,.62)}
.mt-dl:hover,.mt-len:hover,.mt-len.open{background:rgba(20,20,20,.06)}
.mt-len svg{color:#141414;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.mt-div{width:1px;height:20px;background:rgba(20,20,20,.16)}
.mt-len.open svg{transform:rotate(180deg)}
.mt-menu{position:absolute;right:0;bottom:calc(100% + 10px);z-index:5;display:flex;flex-direction:column;gap:2px;width:220px;padding:8px;border-radius:20px;background:#2A2A2A;
 box-shadow:0 0 0 1px rgba(230,226,218,.07),0 24px 48px -16px rgba(0,0,0,.65)}
.mt-menu button{display:flex;justify-content:space-between;height:40px;padding:0 14px;align-items:center;border:0;border-radius:12px;background:transparent;color:#E6E2DA;font:inherit;font-size:16px;font-variant-numeric:tabular-nums;cursor:pointer}
.mt-menu button span:last-child{color:#6B6862}
.mt-menu button.is{background:#3A3A3A}
.mt-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:640px;padding:26px;border-radius:24px;background:#1E1E1E;box-sizing:border-box}
.mt-bar span{display:flex;flex-direction:column;justify-content:space-between;height:140px;padding:14px 16px;border-radius:24px;background:#262626}
.mt-bar span.hit{background:var(--c)}
.mt-bar i{font-style:normal;font-size:16px;color:#6B6862}.mt-bar b{font-weight:400;font-size:16px;color:#A39F98}
.mt-bar span.hit i,.mt-bar span.hit b{color:#141414}
.ms-top{display:flex;justify-content:flex-end;margin-bottom:12px}
.ms{display:flex;flex-direction:column;gap:8px}
.ms-r{display:grid;grid-template-columns:130px repeat(3,minmax(0,1fr));gap:8px;align-items:center}
.ms-h span{padding:0 4px;font-size:14px;color:#6B6862}
.ms-n{font-size:16px;color:#A39F98}
.ms-c{height:48px;border:0;border-radius:16px;background:#262626;color:#E6E2DA;font:inherit;font-size:16px;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s ease}
.ms-c:hover{background:#2E2E2E}
.ms-c.is{background:#E6E2DA;color:#141414}
.pg .mt-near{text-align:left}
.mt-ts{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.mt-t{display:grid;place-items:center;min-width:76px;height:56px;padding:0 18px;border-radius:999px;background:#262626;color:#A39F98;font-size:20px;font-variant-numeric:tabular-nums;text-decoration:none;transition:background .15s ease,color .15s ease}
a.mt-t:hover{background:#2E2E2E;color:#E6E2DA}
.mt-t.is{background:#E6E2DA;color:#141414}
.pg .mt-near .line{margin-top:28px;max-width:760px}
.pg .mt-near .line a{color:#E6E2DA;box-shadow:inset 0 -1px 0 rgba(230,226,218,.35)}
@media (max-width:760px){
 .mt-sec{gap:22px;padding:24px 16px!important}
 .mt-top{gap:16px}
 .mt-bpm b{font-size:88px;line-height:76px}
 .mt-step{width:44px;height:44px;font-size:22px}
 .mt-beats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
 .mb{height:64px;border-radius:18px;padding:10px 12px}
 .mt-row{width:100%;flex-wrap:wrap;gap:16px}
 .mt-play{width:60px;height:60px}
 .mt-row .dq-seg{width:100%;justify-content:space-between}
 .mt-bar{padding:16px;gap:8px}.mt-bar span{height:96px;border-radius:18px;padding:10px 12px}
 .ms-r{grid-template-columns:72px repeat(3,minmax(0,1fr));gap:6px}
 .ms-n{font-size:14px}.ms-x{display:none}.ms-c{height:42px;border-radius:12px;font-size:14px}
 .mt-ts{gap:8px}.mt-t{min-width:60px;height:46px;font-size:16px;padding:0 12px}
 .mt-ct{flex-direction:column;align-items:stretch}
 .mt-split{width:100%}.mt-dl{flex:1;justify-content:center}.mt-len{flex:none}}

.crumbs{display:flex;justify-content:flex-start;margin:-10px 0 32px}
.crumbs a{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px 0 12px;border-radius:999px;background:#2A2A2A;color:#A39F98;font-size:15px;line-height:20px;text-decoration:none;transition:background .15s ease,color .15s ease}
.crumbs a:hover{background:#323232;color:#E6E2DA}
@media (max-width:760px){.crumbs{margin:0 0 20px}}
.crumbs a:focus-visible{outline:2px solid #E6E2DA;outline-offset:2px}

.mt-row .dq-seg{margin-left:auto}
.mt-step{display:inline-grid;place-items:center;padding:0}
.mt-step svg{display:block;width:20px;height:20px}

.b .sec{border-radius:32px}
@media (max-width:760px){.b .sec{border-radius:28px}}

.mt-row{justify-content:space-between}
.mt-beats{grid-template-columns:repeat(var(--n,4),148px)}
.mt-beats[data-n="5"],.mt-beats[data-n="6"],.mt-beats[data-n="7"]{width:634px;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.mt-step,.mt-play,.mt-dl,.mt-len,.ms-c,.dq-seg button,.mt-menu button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mt-step:focus-visible,.mt-play:focus-visible,.ms-c:focus-visible,.dq-seg button:focus-visible,.mt-t:focus-visible{outline:2px solid #E6E2DA;outline-offset:3px}
.mt-dl:focus-visible,.mt-len:focus-visible{outline:2px solid #E6E2DA;outline-offset:3px}
.mt-menu button:focus-visible{outline:2px solid #E6E2DA;outline-offset:-2px}
.mt-menu[hidden]{display:none}
.mt-menu button:hover{background:#333}
.mt-menu button.is:hover{background:#3A3A3A}
.dq-seg button:not(.is):hover{color:#E6E2DA}
.mt-play svg{display:block}
.mt-bpm b{min-width:2ch;text-align:center}
.ms-c.ok{background:#3A3A3A;color:#E6E2DA}
.ms-c.is.ok{background:#F2EFE8;color:#141414}
.mt-near .line a{text-decoration:none}
.dq-line a{text-decoration:none}
.dq-app img{flex:none}

.dq-dl .bt{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.dq-dl .bt .btn{display:flex;align-items:center;justify-content:center;width:100%;height:56px;border:0;border-radius:28px;background:#DA291C;color:#FFF;font:inherit;font-size:20px;line-height:24px;cursor:pointer}
.dq-dl .bt .lnk{align-self:center;color:#A39F98;font-size:16px;line-height:20px}
.dq-dl .bt .lnk:hover{color:#E6E2DA}
.dq-dl .mail{display:flex;flex-direction:column;gap:12px;width:100%}
.dq-dl .mform{display:flex;flex-direction:row;gap:12px;width:100%}
.dq-dl .mform input{flex:1 1 0;min-width:0;height:56px;padding:0 22px;border:0;border-radius:28px;background:#272727;color:#E6E2DA;font:inherit;font-size:18px;outline:0;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .15s ease}
.dq-dl .mform input::placeholder{color:#6B6862}
.dq-dl .mform input:focus{box-shadow:inset 0 0 0 1.5px #E6E2DA}
.dq-dl .mform .btn{flex:none;width:auto;padding:0 24px}
.dq-dl .mform .mhp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dq-dl .mform.busy .btn{cursor:progress;opacity:.75}
.dq-dl .mnote{font-size:14px;line-height:18px;color:#A39F98;text-wrap:pretty}
.dq-dl .mnote a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.dq-dl .mnote.err{color:#E6E2DA}
.dq-dl .msent{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:28px;background:#272727;color:#E6E2DA;font-size:18px}
.dq-dl .msent .mck{flex:none;color:#DA291C}
@media (max-width:600px){.dq-dl .mform{flex-direction:column}.dq-dl .mform input{flex:none}}
@media (max-width:760px){
 .mt-beats,.mt-beats[data-n]{width:100%;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
 .mt-row .dq-seg button{min-width:0;flex:1;padding:0 6px}
 .mt-menu{left:0;right:0;width:auto}}
@media (prefers-reduced-motion: reduce){.mb,.mt-len svg{transition:none}}