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-pads{padding:30px 34px!important}
.dq-grid{display:flex;flex-direction:column;gap:12px}
.dq-row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px;width:92.3%}
.dq-row.r1{margin-left:2.6%}.dq-row.r2{margin-left:7.7%}
.dq{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1 / .9;padding:12px 14px 14px;border:0;border-radius:24px;
 background:#272727;color:#1F1C1C;font:inherit;text-align:left;cursor:pointer;transition:transform .08s ease,filter .18s ease,box-shadow .18s ease}
.dq kbd{align-self:flex-start;font:inherit;font-size:20px;line-height:20px;letter-spacing:-.01em;opacity:.7}
.dq-wv{display:block;width:100%;height:20px;fill:currentColor;opacity:.4}
.dq-n{font-size:16px;line-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dq.need{color:#E6E2DA;background:#272727 repeating-linear-gradient(-45deg,rgba(230,226,218,.045) 0 6.5px,transparent 6.5px 15.085px)}
.dq.need kbd{opacity:.55}.dq.need .dq-wv{opacity:.6}
.dq.hit{filter:brightness(1.22) saturate(1.12);transform:scale(.96)}
.dq.sel{transform:translateY(-6px);filter:brightness(1.06);box-shadow:0 14px 28px -10px color-mix(in srgb,var(--c,#272727) 85%,#000),inset 0 1px 0 rgba(255,255,255,.28)}
.dq.sel.hit{transform:translateY(-6px) scale(.96)}
.dq-grid.dragging .dq:not(.over){filter:grayscale(.6) brightness(.55)}
.dq.over{background:#E6E2DA;color:#1F1C1C;box-shadow:0 0 0 3px #1E1E1E,0 0 0 4.5px #E6E2DA;transform:scale(1.04)}
.dq.over .dq-n{font-size:20px;line-height:24px}
.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-sel span:last-child{color:#A39F98;font-size:16px}
.dq-dot{width:14px;height:14px;border-radius:50%}
.dq-vol{display:flex;align-items:center;gap:12px}
.dq-sl{position:relative;display:block;width:200px;height:4px;border-radius:2px;background:rgba(230,226,218,.16)}
.dq-sl i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:#E6E2DA}
.dq-sl b{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#E6E2DA}
.dq-seg{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:#272727}
.dq-seg span{padding:0 10px 0 12px}
.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-pill{height:40px;padding:0 18px;border:0;border-radius:999px;background:#272727;color:#E6E2DA;font:inherit;cursor:pointer;transition:background .15s ease}
.dq-pill:hover{background:#2F2F2F}
.dq-sp{flex:1}
.dq-txt{height:40px;padding:0 4px;border:0;background:transparent;color:#A39F98;font:inherit;font-size:16px;cursor:pointer;transition:color .15s ease}
.dq-txt:hover{color:#E6E2DA}
.dq-tog{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px 0 8px;border:0;border-radius:999px;background:#272727;color:#E6E2DA;font:inherit;cursor:pointer}
.dq-tog i{position:relative;width:36px;height:24px;border-radius:12px;background:#3D63FF}
.dq-tog i::after{content:"";position:absolute;top:3px;left:15px;width:18px;height:18px;border-radius:50%;background:#FFF}
.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-keys{display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:24px;background:#1E1E1E}
.dq-keys .kr{display:flex;gap:8px}.dq-keys .r1{margin-left:22px}.dq-keys .r2{margin-left:66px}
.dq-keys span{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;color:#1F1C1C;font-size:24px}
.dq-vel{display:flex;gap:12px;padding:26px;border-radius:24px;background:#1E1E1E}
.dq-vel span{flex:1;display:flex;align-items:flex-end;height:140px;padding:16px 20px;border-radius:24px;background:#D75329;color:#1F1C1C;font-size:20px}
.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-pads{padding:16px!important}
 .dq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .dq-row{display:contents}
 .dq{aspect-ratio:1.35 / 1;padding:10px 12px;border-radius:20px}
 .dq kbd{display:none}
 .dq-n{font-size:16px}
 .dq-ctl{gap:16px;flex-wrap:wrap;padding:0}
 .dq-sl{width:120px}
 .dq-sp{display:none}
 .dq-sl{width:110px}
 .dq-keys span{width:28px;height:28px;border-radius:8px;font-size:14px}
 .dq-keys .r1{margin-left:9px}.dq-keys .r2{margin-left:28px}
 .dq-keys,.dq-vel{padding:16px}
 .dq-vel span{height:96px;font-size:16px;padding:12px}
 .pg .dq-line{font-size:16px;line-height:22px}}

.b .tk.dqt{max-width:820px}
.dq-pads{display:flex;justify-content:center;padding:44px 26px!important}
.p4-grid{display:grid;grid-template-columns:repeat(4,148px);gap:14px}
.p4-grid.dragging .p4:not(.over){opacity:.4}
.p4{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1;padding:16px 18px 18px;border:0;border-radius:28px;
 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);color:#E6E2DA;font:inherit;text-align:left;cursor:pointer;
 transition:background .45s cubic-bezier(.2,.8,.2,1),color .45s ease,transform .08s ease,box-shadow .45s ease}
.p4:hover{background:#2B2B2B}
.p4 kbd{align-self:flex-start;display:inline-grid;place-items:center;box-sizing:border-box;min-width:26px;height:26px;padding:0 7px;border-radius:7px;background:rgba(230,226,218,.06);border:1px solid rgba(230,226,218,.14);border-bottom-width:2px;font:inherit;font-size:13px;line-height:1;color:#A39F98;transition:color .45s ease,background .45s ease}
.p4-n{font-size:16px;line-height:20px;color:#A39F98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .45s ease}
.p4.sel{background:#323232}
.p4.sel .p4-n,.p4.sel kbd{color:#E6E2DA}
.p4.hit{background:#333;transform:scale(.988);transition:background 60ms ease-out,transform 60ms ease-out}
.p4.fade{background:#2C2C2C;transition:background .7s ease-out}
.p4.hit kbd{color:#E6E2DA;background:rgba(230,226,218,.1);border-color:rgba(230,226,218,.22)}
.p4.hit .p4-n,.p4.fade .p4-n{color:#E6E2DA}
.p4.fade kbd{color:rgba(230,226,218,.5)}

.p4.own{background:var(--c)}
.p4.own:hover{background:var(--c);filter:brightness(1.03)}
.p4.own .p4-n{color:#141414}
.p4.own kbd{color:rgba(20,20,20,.7);background:rgba(20,20,20,.08);border-color:rgba(20,20,20,.22)}
.p4.own.hit{background:var(--c);filter:brightness(1.08)}
.p4.own.hit .p4-n{color:#141414}.p4.own.hit kbd{color:rgba(20,20,20,.75)}
.p4.over{background:#E6E2DA;transform:scale(1.03);cursor:copy}
.p4.over kbd{color:rgba(20,20,20,.7);background:rgba(20,20,20,.08);border-color:rgba(20,20,20,.25)}.p4.over .p4-n{color:#141414}
.dq-pads{flex-direction:column;align-items:center}
.b .dq-hint{display:flex;align-items:center;gap:8px;margin:28px 0 0;font-size:15px;line-height:20px;color:#8A867F}
.dq-hint svg{color:#6B6862;flex:none}
.dq-own-b{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:999px;background:#2A2A2A;color:#E6E2DA;font:inherit;font-size:15px;cursor:pointer;transition:background .15s ease}
.dq-own-b:hover{background:#323232}.dq-own-b svg{color:#A39F98}
.pl.dq-own{background:#8C4FE0;color:#141414}
.dq-vel4{display:flex;gap:14px;padding:26px;border-radius:24px;background:#1E1E1E}
.dq-vel4 .p4{width:148px;cursor:default}
.dq-vel4 .p4.v1{background:color-mix(in srgb,var(--c) 20%,#262626)}
.dq-vel4 .p4.v2{background:color-mix(in srgb,var(--c) 27%,#262626)}
.dq-vel4 .p4.v1 .p4-n,.dq-vel4 .p4.v2 .p4-n{color:#E6E2DA}
.dq-vel4 .p4.hit{transform:none}
.kr4{display:flex;gap:8px}.kr4 span{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#272727;color:#A39F98;font-size:24px}
.kr4 span.lit{background:var(--c);color:#141414}
@media (max-width:760px){
 .dq-pads{padding:16px!important}
 .p4-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
 .p4{justify-content:flex-end;border-radius:20px;padding:10px 9px 11px}
 .p4 kbd{display:none}
 .p4-n{font-size:14px;line-height:18px}
 .kr4 span{width:40px;height:40px;border-radius:12px;font-size:16px}
 .b .dq-hint{margin-top:16px;font-size:13px;text-align:center}
 .dq-vel4{gap:8px;padding:16px}
 .dq-vel4 .p4{width:auto;flex:1;border-radius:20px}}

.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-sl{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(230,226,218,.16)}
.mt-sl i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:#E6E2DA}
.mt-sl b{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#E6E2DA}
.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:6px;border-radius:18px;background:#2A2A2A;
 box-shadow:inset 0 1px 0 rgba(230,226,218,.06),0 18px 40px -12px rgba(0,0,0,.6)}
.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}}

.fd-sec{padding:40px!important}
.fd-film{padding:16px!important}
.fd-film video{display:block;width:100%;height:auto;border-radius:14px}
.fd-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:300px;border-radius:28px;color:#E6E2DA;text-align:center;
 background:#262626 repeating-linear-gradient(-45deg,rgba(230,226,218,.045) 0 6.5px,transparent 6.5px 15.085px);box-shadow:inset 0 0 0 1px rgba(230,226,218,.06);cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease}
.fd-drop:hover{background-color:#2B2B2B}
.fd-drop.over{background:#E6E2DA;color:#141414;box-shadow:none}
.fd-drop.over .fd-sub{display:none}
.fd-ic{display:grid;place-items:center;width:56px;height:56px;margin-bottom:6px;border-radius:50%;background:rgba(230,226,218,.07);color:#A39F98}
.fd-drop.over .fd-ic{background:rgba(20,20,20,.08);color:#141414}
.fd-big{margin:0;font-size:26px;line-height:30px;letter-spacing:-.01em}
.fd-sub{margin:0;font-size:16px;color:#A39F98}.fd-sub u{text-decoration-color:rgba(230,226,218,.35);text-underline-offset:3px}
.fd-busy{cursor:default}
.fd-orb{width:20px;height:20px;margin-bottom:6px;border-radius:50%;background:#F2592E;box-shadow:0 0 0 8px rgba(242,89,46,.18),0 0 0 18px rgba(242,89,46,.07)}
.fd-res{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
.fd-res.one{grid-template-columns:1fr}
.fd-tile{position:relative;display:flex;flex-direction:column;gap:10px;min-height:200px;padding:22px 24px;border-radius:28px;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)}
.fd-lab{margin:0;font-size:16px;color:#6B6862}
.fd-val{margin:auto 0 0;display:flex;align-items:baseline;gap:10px;font-size:72px;line-height:72px;letter-spacing:-.03em;color:#E6E2DA;font-variant-numeric:tabular-nums}
.fd-val span{font-size:20px;letter-spacing:0;color:#6B6862}
.fd-val.xl{font-size:120px;line-height:104px}
.b .fd-tile .fd-alt{margin-top:auto}
.fd-alt{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;color:#A39F98}.fd-alt b{font-weight:400;color:#E6E2DA}
.fd-chip{display:inline-grid;place-items:center;height:28px;padding:0 10px;border-radius:999px;background:#E6E2DA;color:#141414;font-size:14px}
.fd-chip.q{background:#323232;color:#A39F98}
.fd-dot{position:absolute;right:24px;top:24px;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 22%,transparent)}
.fd-beats{width:100%;margin-top:14px;grid-template-columns:repeat(4,minmax(0,1fr))!important}
.b .fd-meta{margin:28px 0 4px;text-align:center;font-size:14px;color:#6B6862}
.fd-again{height:44px;padding:0 22px;border:0;border-radius:999px;background:#E6E2DA;color:#141414;font:inherit;font-size:16px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px -14px rgba(0,0,0,.7)}
.fd-link{display:inline-flex;align-items:center;text-decoration:none}
.fd-note{margin:0;padding:0 8px;font-size:16px;color:#6B6862;text-align:center}
.fd-tap{gap:18px}
.fd-tapb{width:64px;height:64px;border:0;border-radius:50%;background:#262626;color:#E6E2DA;font:inherit;font-size:16px;cursor:pointer;
 box-shadow:inset 0 1px 0 rgba(230,226,218,.05),0 8px 18px -10px rgba(0,0,0,.4)}
.fd-tapb:active{background:var(--c);color:#141414}
.fd-tap .dq-sel span{color:#6B6862;font-size:16px}
.fd-hint{margin:0 0 0 auto;font-size:14px;color:#6B6862}
.fd-chroma{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;align-items:end;height:220px;width:100%;max-width:640px;padding:26px;border-radius:24px;background:#1E1E1E;box-sizing:border-box}
.fd-chroma div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.fd-chroma span{width:100%;border-radius:8px;background:#323232}
.fd-chroma i{font-style:normal;font-size:14px;color:#6B6862}
.fd-pair{display:flex;flex-direction:column;gap:14px;width:100%;max-width:640px;padding:26px;border-radius:24px;background:#1E1E1E;box-sizing:border-box}
.fd-pr{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px}.fd-pr p{margin:0;font-size:18px;color:#E6E2DA}
.fd-pr div{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.fd-pr span{display:grid;place-items:center;height:56px;border-radius:16px;background:#262626;color:#A39F98;font-size:18px}
.fd-pr span.h{background:#E6E2DA;color:#141414}
.fd-onsets{display:flex;flex-wrap:wrap;align-items:flex-end;gap:5px;height:220px;width:100%;max-width:640px;padding:26px 26px 0;border-radius:24px;background:#1E1E1E;box-sizing:border-box}
.fd-onsets span{flex:1;min-width:0;height:60%;border-radius:4px;background:#323232;align-self:flex-end;max-height:150px}
.fd-onsets p{flex-basis:100%;display:flex;align-items:center;gap:8px;margin:0;padding:14px 0 18px;font-size:14px;color:#6B6862}
.fd-onsets p b{display:inline-block;width:10px;height:10px;border-radius:50%}
.fd-half{display:flex;flex-direction:column;gap:14px;width:100%;max-width:640px;padding:26px;border-radius:24px;background:#1E1E1E;box-sizing:border-box}
.fd-hr{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:12px}.fd-hr p{margin:0;font-size:20px;color:#E6E2DA;font-variant-numeric:tabular-nums}
.fd-hr div{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.fd-hr span{height:56px;border-radius:16px;background:#262626}
.fd-hr span.on{background:#F2592E}
.fd-hr:last-child span.on{background:#E3C23A}
@media (max-width:760px){
 .fd-sec{padding:16px!important}
 .fd-drop{height:220px;border-radius:22px}
 .fd-big{font-size:22px}
 .fd-res{grid-template-columns:1fr;gap:8px}
 .fd-tile{min-height:150px;border-radius:22px;padding:18px}
 .fd-val{font-size:56px;line-height:56px}.fd-val.xl{font-size:88px;line-height:80px}
 .fd-beats{gap:8px!important}
 .fd-hint{flex-basis:100%;margin:0}
 .fd-tap{flex-wrap:wrap}
 .dq-ctl .fd-link,.fd-again{width:100%;justify-content:center}
 .fd-chroma{gap:4px;padding:16px;height:180px}.fd-chroma i{font-size:11px}
 .fd-pr{grid-template-columns:1fr}.fd-pr span{height:40px;font-size:15px;border-radius:12px}
 .fd-onsets,.fd-half{padding:16px}.fd-onsets{padding-bottom:0;gap:3px}
 .fd-hr span{height:36px;border-radius:10px}}

.b .tk.dqt.ct-wide{max-width:1080px}
.ct-sec{padding:32px!important;display:flex;flex-direction:column;gap:16px}
.ct-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ct-top .dq-seg button{min-width:36px;padding:0 9px}
.b .ct-in{margin:0;font-size:14px;color:#6B6862}.ct-in b{font-weight:400;color:#E6E2DA}
.b .ct-gh{margin:20px 0 0;font-size:20px;line-height:24px;color:#E6E2DA}
.ct-rows{display:flex;flex-direction:column;gap:8px}
.cpr{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 16px 14px 14px;border-radius:22px;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)}
.cpr.on{background:#2C2C2C}
.cpr-play{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#333;color:#E6E2DA;cursor:pointer}
.cpr-play.on{background:#E6E2DA;color:#141414}
.cpr-main{display:flex;align-items:center;gap:20px;min-width:0}
.cpr-hd{flex:0 0 220px;min-width:0}
.b .cpr-t{margin:0;font-size:16px;line-height:20px;color:#E6E2DA}
.b .cpr-s{margin:2px 0 0;font-size:14px;line-height:18px;color:#6B6862;text-wrap:pretty}
.cpr-act{display:flex;gap:8px;align-self:center}
.ct-rows.narrow .cpr-act{flex-direction:column;align-items:stretch}.ct-rows.narrow .cpr-p{justify-content:center}
.cpr-main.stack{flex-direction:column;align-items:flex-start;gap:10px}
.b .cpr-why{margin:0;font-size:14px;line-height:19px;color:#A39F98;text-wrap:pretty}
.cpr .dq-pill{background:#333}.cpr .dq-pill:hover{background:#3A3A3A}
.cpr-p{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;font-size:14px;text-decoration:none;white-space:nowrap}
.cc-row{display:flex;flex-wrap:wrap;gap:6px}
.cc{display:flex;flex-direction:column;justify-content:center;min-width:64px;height:52px;padding:0 12px;border-radius:14px;background:#323232;color:#E6E2DA;transition:background .45s cubic-bezier(.2,.8,.2,1)}
.cc b{font-weight:400;font-size:18px;line-height:20px;white-space:nowrap}
.cc i{font-style:normal;font-size:13px;line-height:16px;color:#8A867F}
.cc.hit{background:var(--c);color:#141414;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)}
.cc.hit i{color:rgba(20,20,20,.6)}
.ct-tempo{display:flex;align-items:center;gap:2px;height:40px;padding:0 4px;border-radius:999px;background:#272727;color:#E6E2DA;font-size:16px;font-variant-numeric:tabular-nums}
.ct-tempo span{padding:0 10px}
.ct-tempo button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#A39F98;font:inherit;font-size:18px;cursor:pointer}
.ct-seven{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px}
.b .ct-lab{margin:0;font-size:14px;color:#6B6862}
.ct-card{width:100%;max-width:640px;padding:26px;border-radius:24px;background:#1E1E1E;box-sizing:border-box}
.ct-sp{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:12px}.ct-sp + .ct-sp{margin-top:12px}
.b .ct-sp p{margin:0;font-size:16px;color:#A39F98}
.ct-links{display:flex;flex-wrap:wrap;gap:8px;max-width:640px}
.ct-links .dq-pill{display:inline-flex;align-items:center;text-decoration:none}
.ct-gen{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;max-width:640px;padding:26px;border-radius:24px;background:#1E1E1E;box-sizing:border-box}
.b .ct-gt{margin:0;font-size:24px;line-height:28px;color:#E6E2DA}.b .ct-gl{margin:0 0 8px;font-size:16px;color:#A39F98}
.ct-go{display:inline-flex;align-items:center;text-decoration:none}
.ct-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ct-pad{display:flex;flex-direction:column;justify-content:space-between;height:148px;padding:16px 18px 18px;border-radius:28px;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)}
.ct-pad i{font-style:normal;font-size:16px;color:#6B6862}
.ct-pad b{font-weight:400;font-size:44px;line-height:44px;letter-spacing:-.02em;color:#E6E2DA}
.ct-pad.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)}
.ct-pad.hit i,.ct-pad.hit b{color:#141414}
.ct-prow{width:100%!important}
.ct-dl{display:inline-flex;align-items:center;gap:8px}
.dq-ctl a.dq-pill{display:inline-flex;align-items:center;text-decoration:none}
.ct-var .pic{width:100%}
.ct-var .cpr{grid-template-columns:44px minmax(0,1fr)}
.ct-var .cpr-main{flex-direction:column;align-items:flex-start;gap:10px}.ct-var .cpr-hd{flex:none}
.ct-songs{display:flex;flex-direction:column;width:100%;max-width:640px;padding:10px 26px;border-radius:24px;background:#1E1E1E;box-sizing:border-box}
.b .ct-songs p,.pg .ct-songs p{margin:0;padding:12px 0;font-size:16px;color:#E6E2DA;box-shadow:inset 0 -1px 0 rgba(230,226,218,.08)}
.pg .ct-songs p:last-child{box-shadow:none}
.rn-k{text-transform:none;white-space:nowrap}
@media (max-width:760px){
 .ct-sec{padding:16px!important}
 .ct-top .dq-seg{display:grid;grid-template-columns:repeat(6,1fr);width:100%;border-radius:20px}
 .cpr{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:12px}
 .cpr-play{width:40px;height:40px}
 .cpr-main{flex-direction:column;align-items:flex-start;gap:8px}.cpr-hd{flex:none}
 .cpr-act{grid-column:1 / -1}.cpr-act .cpr-p{flex:1;justify-content:center}
 .cc{min-width:52px;height:46px;padding:0 10px}.cc b{font-size:16px}
 .ct-pads{gap:8px}.ct-pad{height:96px;border-radius:20px;padding:10px 12px}.ct-pad b{font-size:28px;line-height:30px}
 .ct-prow{flex-wrap:wrap}}

.cpr{background:transparent;box-shadow:none;border-radius:0;padding:22px 0;border-top:1px solid rgba(230,226,218,.07)}
.ct-rows > .cpr:first-child{border-top:0;padding-top:8px}
.cpr.on{background:transparent}
.ct-rows{gap:0}
.cpr-play{background:#2A2A2A}
.cc{min-width:0;height:auto;padding:6px 10px;border-radius:12px;background:transparent}
.cc-row{gap:2px;margin-left:-10px}
.cc b{font-size:20px;line-height:24px}
.cc i{font-size:13px;line-height:16px;color:#6B6862}
.cpr-act{display:flex;flex-direction:row;align-items:center;gap:22px}
.cpr-l{display:inline-flex;align-items:center;gap:6px;height:auto;padding:0;border:0;background:none;color:#A39F98;font:inherit;font-size:14px;line-height:18px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .15s ease}
.cpr-l:hover{color:#E6E2DA}
.cpr-main.stack{gap:8px}
.cpr-main.stack .cpr-act{margin-top:4px;align-self:flex-start}
.ct-seven .cc-row{gap:6px;margin-left:0}
.ct-seven .cc{min-width:64px;height:52px;padding:0 12px;background:#2A2A2A}
.ct-seven .cc.hit{background:var(--c)}
.ct-rows.narrow .cpr-act{flex-direction:row;align-items:center}
.ct-rows.narrow .cpr-p,.ct-rows.narrow .cpr-l{justify-content:flex-start}
@media (max-width:760px){.cpr{padding:18px 0}.cpr-act{grid-column:2}.cc b{font-size:18px}}

.pg .how.ct-blog{padding-left:24px;padding-right:24px}
.ct-doc{max-width:720px;margin:0 auto}
.ct-doc h2{margin:72px 0 16px;font-size:32px;line-height:38px;letter-spacing:-.01em;color:#E6E2DA;font-weight:400}
.ct-doc > h2:first-child,.ct-doc > .ct-lead:first-child{margin-top:0}
.pg .ct-doc p{margin:0 0 18px;font-size:18px;line-height:29px;color:#A39F98;text-wrap:pretty}
.pg .ct-doc p.ct-lead{font-size:22px;line-height:33px;color:#E6E2DA}
.ct-doc strong{font-weight:400;color:#E6E2DA}
.ct-doc p a,.ct-ll a,.ct-ul a{color:#E6E2DA;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(230,226,218,.3);transition:box-shadow .15s ease}
.ct-doc p a:hover,.ct-ll a:hover{box-shadow:inset 0 -1px 0 #E6E2DA}
.ct-fig{margin:28px 0 32px}
.ct-fig .ct-card,.ct-fig .fd-pair{max-width:none}
.ct-ll{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.ct-ll li{break-inside:avoid;padding:9px 0;font-size:18px;line-height:24px}
.ct-ul{margin:0;padding:0;list-style:none}
.ct-ul li{padding:12px 0;font-size:18px;line-height:24px;color:#E6E2DA;box-shadow:inset 0 -1px 0 rgba(230,226,218,.08)}
.pg .ct-doc a.ct-btn{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;background:#E6E2DA;color:#141414;font-size:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px -14px rgba(0,0,0,.7)}
.ct-fig .cpr:first-child{padding-top:0}
@media (max-width:760px){.pg .how.ct-blog{padding-left:16px;padding-right:16px}.ct-doc h2{margin-top:56px;font-size:26px;line-height:31px}.pg .ct-doc p{font-size:17px;line-height:27px}.ct-ll{columns:1}}

.cc.hit,.ct-pad,.ct-pad.hit,.cpr,.cpr-play,.ct-card,.ct-tempo,.dq-ctl .dq-pill,.dq-ctl .dq-tog,.ct-sec .dq-seg,.ct-sec .dq-seg button,.pg .ct-doc a.ct-btn{box-shadow:none}
.ct-doc p a,.ct-ll a{box-shadow:none;text-decoration:underline;text-decoration-color:rgba(230,226,218,.3);text-underline-offset:4px;text-decoration-thickness:1px}
.ct-doc p a:hover,.ct-ll a:hover{box-shadow:none;text-decoration-color:#E6E2DA}
.ct-ul li{box-shadow:none;border-bottom:1px solid rgba(230,226,218,.08)}
.ct-fig .cpr{grid-template-columns:44px minmax(0,1fr);align-items:start}
.ct-fig .cpr-main{flex-direction:column;align-items:flex-start;gap:10px}.ct-fig .cpr-hd{flex:none}
.ct-fig .cpr-hd .cpr-s{margin-top:4px;font-size:16px;line-height:24px;color:#A39F98}
.ct-gh span{color:#6B6862}

.cc-row{gap:8px;margin-left:0}
.cc{min-width:92px;height:72px;padding:0 18px;border-radius:18px;background:#2A2A2A;box-sizing:border-box}
.cc b{font-size:24px;line-height:28px}
.cc i{margin-top:2px;font-size:14px;line-height:18px;color:#6B6862}
.cc.hit i{color:rgba(20,20,20,.6)}
@media (min-width:761px){.cpr-hd{flex-basis:240px}}
.dq-ctl .dq-pill{display:inline-flex;align-items:center;gap:8px}.dq-ctl .dq-pill svg{display:block;flex:none}
@media (max-width:760px){.cc-row{gap:6px}.cc{min-width:64px;height:60px;padding:0 12px;border-radius:14px}.cc b{font-size:20px;line-height:24px}.cc i{font-size:13px}}

.ct-rows .cpr{cursor:pointer;transition:background .2s ease}
.ct-rows .cpr-act{opacity:0;transition:opacity .15s ease}
.ct-rows .cpr:hover .cpr-act,.ct-rows .cpr.on .cpr-act{opacity:1}
.ct-rows .cpr.on{margin:0 -20px;padding-left:20px;padding-right:20px;border-radius:22px;background:#262626;border-top-color:transparent}
.ct-rows .cpr.on + .cpr{border-top-color:transparent}
.ct-rows .cpr.on .cc:not(.hit){background:#303030}
.b .ct-gh{margin:36px 0 4px}
.ct-top + .ct-gh{margin-top:20px}

.kb{--bw:calc(100% / var(--nw) * .58);position:relative;display:flex;gap:2px;height:120px}
.kb .kw{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:0 0 12px;border:0;border-radius:3px 3px 10px 10px;background:#E9E5DE;font:inherit;color:#8A867F;transition:background .3s ease}
.kb .kw:first-child{border-top-left-radius:10px}.kb .kw:nth-last-child(1 of .kw){border-top-right-radius:10px}
.kb .kb-b{position:absolute;top:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;width:var(--bw);height:60%;padding:0 0 10px;border:0;border-radius:0 0 8px 8px;background:#1C1C1C;box-sizing:border-box;font:inherit;color:#8A867F;transition:background .3s ease}
.kb .kd{display:block;width:8px;height:8px;border-radius:50%;background:#F2592E}
.kb em{font-style:normal;font-size:13px;line-height:14px}
.kb .kw.hit,.kb .kb-b.hit{background:var(--c)}
.kb .kw.hit .kd,.kb .kb-b.hit .kd{background:rgba(20,20,20,.55)}
.kb-pick{height:92px;width:440px}
.kb-pick .kw,.kb-pick .kb-b{cursor:pointer}
.kb-pick .kw:hover{background:#F4F1EB}.kb-pick .kb-b:hover{background:#2A2A2A}
.kb-pick .kw em{color:#6B6862}
.kb-pick .kw.sel,.kb-pick .kb-b.sel{background:#F2592E}
.kb-pick .sel em{color:#141414}.kb-pick .sel .kd{background:#141414}
.ct-key{display:flex;align-items:center;gap:20px}
.gn-dd{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:999px;background:#272727;color:#E6E2DA;font:inherit;font-size:16px;white-space:nowrap;cursor:pointer}
.gn-dd span,.gn-dd svg{color:#8A867F}
.ct-live{display:flex;flex-direction:column;gap:12px}
.kb-live{height:110px}
.ct-kfig{display:flex;flex-direction:column;gap:12px}
.ct-kfig .kb{height:130px}
.ct-kchords{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.ct-kchords .cc{min-width:0;height:72px;padding:0 14px}
.b .ct-cap,.pg .ct-doc p.ct-cap{margin:4px 0 0;font-size:14px;line-height:20px;color:#6B6862}
.pg .ct-doc p.ct-soon{font-size:15px;line-height:24px;color:#6B6862}
.ct-named .cpr-hd{flex-basis:300px}
.ct-dl2{list-style:none;margin:0 0 12px;padding:0}
.ct-dl2 li{padding:10px 0;font-size:18px;line-height:26px;color:#A39F98}
.ct-dl2 a{margin-right:8px;color:#E6E2DA;text-decoration:underline;text-decoration-color:rgba(230,226,218,.3);text-underline-offset:4px}

.ct-rows .cpr{border-top:0;padding:10px 0}
.ct-rows{gap:4px}
.ct-rows .cpr.on{padding-top:14px;padding-bottom:14px;margin-top:4px;margin-bottom:4px}
.b .cpr-t{font-size:17px;line-height:22px}
.cc i{color:#8A867F}

.ct-wide-fig{width:min(1080px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
.gn{display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:32px;background:#1E1E1E}
.gn-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gn-go{height:44px;padding:0 22px;border:0;border-radius:999px;background:#E6E2DA;color:#141414;font:inherit;font-size:16px;cursor:pointer}
.gn-line{height:1px;background:rgba(230,226,218,.08);margin:4px 0}
.b .gn-t,.gn-t{margin:0 6px 0 0;font-size:16px;color:#A39F98}
.gn-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gn-card{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:24px;background:#262626}
.gn-card.on{background:#2E2E2E}
.gn-ch{display:flex;justify-content:space-between;align-items:flex-start}
.gn-ch b{display:block;font-weight:400;font-size:28px;line-height:32px;color:#E6E2DA}
.gn-ch i{display:block;font-style:normal;font-size:14px;color:#8A867F}
.gn-card.on .gn-ch b{color:var(--c)}
.gn-lock{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:#333;color:#A39F98;cursor:pointer}
.kb-mini{height:56px;gap:1px}
.kb-mini .kw{padding-bottom:0;border-radius:2px 2px 5px 5px}.kb-mini .kw:first-child{border-top-left-radius:6px}.kb-mini .kw:nth-last-child(1 of .kw){border-top-right-radius:6px}
.kb-mini .kb-b{border-radius:0 0 4px 4px}
.kb-mini .kw{justify-content:flex-end;padding-bottom:6px}.kb-mini .kb-b{padding-bottom:5px}.kb-mini .kd{width:6px;height:6px}
.gn-ft{display:flex;justify-content:space-between;align-items:center}
.gn-swap{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:#A39F98;font:inherit;font-size:14px;cursor:pointer}
.gn-ft kbd{display:grid;place-items:center;min-width:24px;height:24px;border-radius:7px;background:#333;color:#8A867F;font:inherit;font-size:13px}
.gn-play{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:#E6E2DA;color:#141414;cursor:pointer}
.gn-dl{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;border:0;border-radius:999px;background:#E6E2DA;color:#141414;font:inherit;font-size:16px;cursor:pointer}
@media (max-width:760px){
 .ct-key{flex-direction:column;align-items:stretch;gap:12px;width:100%}.ct-key .gn-dd{align-self:flex-start}
 .kb-pick{width:100%;height:84px}.kb-pick .kb-b em{font-size:10px}
 .kb-live,.ct-kfig .kb{height:84px}.kb .kd{width:6px;height:6px}
 .ct-kchords{grid-template-columns:repeat(4,1fr)}.ct-kchords .cc{height:60px}
 .ct-named .cpr-hd{flex-basis:auto}
 .ct-wide-fig{width:auto;margin-left:0;transform:none}
 .gn{padding:16px;border-radius:24px}.gn-cards{grid-template-columns:repeat(2,1fr);gap:8px}.gn-card{padding:14px;border-radius:18px}
 .gn-row .dq-seg{overflow-x:auto;max-width:100%}.gn-row > .dq-sp{display:none}}

.gn2 .tk.dqt{width:100%;max-width:none;margin:0}
.gn2 .sec{padding:28px 32px!important}
.gn-mk{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.gn-mk .dq-seg button,.gn-go{white-space:nowrap}
.gn-mk .dq-seg button{padding:0 16px}
.gn-opts{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:16px}
.gn-o{display:inline-flex;align-items:center;gap:6px;height:auto;padding:0;border:0;background:none;color:#A39F98;font:inherit;font-size:15px;line-height:20px;cursor:pointer;white-space:nowrap}
.gn-o:hover{color:#E6E2DA}.gn-o svg{color:#6B6862}
.gn-mid{display:flex;flex-direction:column;gap:16px}
.gn-kb{height:96px}
.gn-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gn-pad{position:relative;height:148px;padding:16px 18px 18px;border-radius:28px;background:#262626;box-sizing:border-box;transition:background .45s cubic-bezier(.2,.8,.2,1)}
.gn-pad > kbd{position:absolute;top:16px;left:18px;font:inherit;font-size:16px;line-height:16px;color:#6B6862}
.gn-lk{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#6B6862;cursor:pointer}
.gn-nm{position:absolute;left:18px;bottom:18px}
.gn-nm b{display:block;font-weight:400;font-size:40px;line-height:42px;letter-spacing:-.02em;color:#E6E2DA}
.gn-nm i{display:block;margin-top:2px;font-style:normal;font-size:15px;color:#8A867F}
.gn-sw{position:absolute;right:14px;bottom:16px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:#303030;color:#A39F98;cursor:pointer;opacity:0;transition:opacity .15s ease}
.gn-pad:hover .gn-sw{opacity:1}
.gn-pad.hit{background:var(--c);transition-duration:0s}
.gn-pad.hit > kbd,.gn-pad.hit .gn-lk,.gn-pad.hit .gn-nm i{color:rgba(20,20,20,.55)}.gn-pad.hit .gn-nm b{color:#141414}
.gn-ctl{gap:12px;padding:0}
.gn-ctl .gn-o{margin:0 8px}
@media (max-width:760px){
 .gn2 .sec{padding:16px!important}
 .gn-mk{flex-direction:column;align-items:stretch}.gn-mk .dq-seg{overflow-x:auto}.gn-go{width:100%}
 .gn-kb{height:72px}
 .gn-pads{grid-template-columns:repeat(2,1fr);gap:8px}.gn-pad{height:112px;border-radius:20px}.gn-nm b{font-size:30px;line-height:32px}
 .gn-ctl{flex-wrap:wrap}.gn-ctl .dq-sp{display:none}}

.ct-sec{gap:0}
.ct-sec > .ct-top,.ct-sec > .ct-live{margin-bottom:48px}
.ct-pads + .ct-prow{margin-top:20px}
.b .ct-sec .ct-gh{margin:64px 0 14px}
.b .ct-sec > .ct-top + .ct-gh,.b .ct-sec > .ct-live + .ct-gh{margin-top:0}
.ct-live{gap:10px}
.gn-mid{gap:12px}
.gn-opts{margin-top:14px}
@media (max-width:760px){.ct-sec > .ct-top,.ct-sec > .ct-live{margin-bottom:32px}.b .ct-sec .ct-gh{margin-top:44px}.ct-pads + .ct-prow{margin-top:16px}}

.kb .kd{width:6px;height:6px;background:#A8A39B}
.kb .kb-b .kd{background:#6B6862}
.kb-pick .kw.sel,.kb-pick .kb-b.sel{background:#C9C3B8}
.kb-pick .kb-b.sel{background:#4A4743}
.kb-pick .sel em{color:#141414}.kb-pick .kb-b.sel em{color:#E6E2DA}
.kb-pick .sel .kd{background:#141414}
.kb-pick .kw.sel em{font-weight:500}

.pg .ct-doc .cpr p{margin:0}
.pg .ct-doc .cpr .cpr-t{color:#E6E2DA}
.pg .ct-doc .ct-fig .cpr-hd .cpr-s{font-size:15px;line-height:22px;color:#8A867F}
.pg .ct-doc .ct-fig .cpr-hd .cpr-s{margin-top:4px}
.ct-fig .ct-rows{gap:28px}
.ct-fig .ct-rows .cpr{padding:0}
.ct-fig .cpr-main{gap:14px}

.ct-doc h2{margin-top:96px}
.ct-ll{margin-top:4px}.ct-ll li{padding:6px 0}
.ct-dl2{margin:4px 0 0}.ct-dl2 li{padding:6px 0}
.pg .ct-doc p.ct-soon{margin:14px 0 0}
.ct-kfig{gap:10px}
.b .ct-cap,.pg .ct-doc p.ct-cap{margin-top:2px}
.ct-fig{margin:24px 0 36px}
.ct-fig.ct-wide-fig{margin-left:50%}
@media (max-width:760px){.ct-fig.ct-wide-fig{margin-left:0}}

.gn-pad > kbd{top:14px;left:16px;display:inline-grid;place-items:center;box-sizing:border-box;min-width:26px;height:26px;padding:0 7px;border-radius:7px;background:rgba(230,226,218,.06);border:1px solid rgba(230,226,218,.14);border-bottom-width:2px;font:inherit;font-size:13px;line-height:1;color:#A39F98}
.gn-pad.hit > kbd{background:rgba(20,20,20,.12);border-color:rgba(20,20,20,.25);color:rgba(20,20,20,.7)}
@media (max-width:760px){.gn-ctl .gn-dl{width:100%;justify-content:center}.gn-ctl .gn-o{height:36px}.pg .ct-doc p.ct-lead{font-size:19px;line-height:29px}}

.ct-dock{display:flex;align-items:center;gap:20px;width:100%;box-sizing:border-box}
.ct-dock .dq-ctl{padding:0}
.ct-now{display:flex;align-items:center;gap:18px;min-width:0}
.b .ct-now p,.ct-now p{margin:0;font-size:16px;line-height:20px;color:#E6E2DA;white-space:nowrap}
.ct-now .cc-row{margin-left:0;gap:4px}.ct-now .cc{min-width:0;height:auto;padding:5px 10px;border-radius:10px;background:transparent}.ct-now .cc.hit{background:var(--c)}.ct-now .cc b{font-size:16px;line-height:20px}.ct-now .cc i{display:none}
.ct-float{font-family:'Uncut Sans','Helvetica Neue',sans-serif;position:fixed;left:50%;bottom:20px;z-index:20;width:min(1040px,calc(100% - 32px));transform:translateX(-50%);padding:12px 16px 12px 12px;border-radius:24px;
 background:rgba(38,38,40,.58);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);border:0;box-sizing:border-box;
 box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16),0 0 0 .5px rgba(0,0,0,.6),0 12px 32px rgba(0,0,0,.45)}
.ct-float .ct-tempo,.ct-float .dq-pill,.ct-float .dq-tog{background:rgba(255,255,255,.07)}
@media (max-width:760px){
 .ct-rows .cpr-act{display:none}.ct-rows .cpr.on .cpr-act{display:flex}
 .ct-rows .cpr.on{margin:0 -12px;padding-left:12px;padding-right:12px}
 .ct-rows .cpr{align-items:start}
 .ct-dock{flex-wrap:wrap;gap:12px}.ct-dock .dq-sp{display:none}
 .ct-now{flex:1;gap:10px}.ct-now .cc-row{display:none}
 .ct-float{bottom:12px;padding:10px;border-radius:20px}
 .ct-float .dq-ctl{width:100%;gap:10px;flex-wrap:nowrap}.ct-float .dq-ctl .dq-pill{display:none}}

.ct-tempo button,.mt-step,.sh .ct-tempo button{display:inline-grid;place-items:center;padding:0}.ct-tempo button svg,.mt-step svg{display:block}.mt-step svg{width:20px;height:20px}
.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}}

.b .sec:where(:not(.st *)){border-radius:32px}
.b .sec.fd-sec,.b .sec.gn-mid,.b .sec:has(> .tt-grid),.dq-pads,.ct-sec:has(.ct-pads){padding:12px!important}
.fd-tile,.fd-drop,.p4,.gn-pad,.tt-pad,.tt-tile,.ct-pad,.ct-rows .cpr.on{border-radius:20px}
.tt-grid,.gn-pads,.ct-pads,.fd-tiles{gap:12px}
.p4-grid{grid-template-columns:repeat(4,1fr);gap:12px;width:100%}
.ct-sec:has(.ct-pads) .ct-top{padding:12px 12px 0}
.b .dq-pads .dq-hint{margin:20px 0 10px}
.gn-mid .kb .kw:first-child,.ct-sec .kb:first-child .kw:first-child{border-top-left-radius:20px;border-bottom-left-radius:20px}
.gn-mid .kb .kw:nth-last-child(1 of .kw){border-top-right-radius:20px;border-bottom-right-radius:20px}
@media (max-width:760px){.b .sec:where(:not(.st *)){border-radius:28px}.b .sec.fd-sec,.b .sec.gn-mid,.b .sec:has(> .tt-grid),.dq-pads,.ct-sec:has(.ct-pads){padding:10px!important}.fd-tile,.fd-drop,.p4,.gn-pad,.tt-pad,.tt-tile,.ct-pad{border-radius:18px}.p4-grid{gap:8px}}


.gn-ow{position:relative;display:inline-flex}
.gn-o.open{color:#E6E2DA}
.pop{position:absolute;top:calc(100% + 10px);left:-12px;z-index:30;min-width:240px;padding:8px;border-radius:20px;background:#2A2A2A;box-sizing:border-box;
 box-shadow:0 0 0 1px rgba(230,226,218,.07),0 24px 48px -16px rgba(0,0,0,.65);display:flex;flex-direction:column;gap:2px;text-align:left}
.gn-ctl .pop{top:auto;bottom:calc(100% + 12px)}
.pop .pop-h{margin:8px 12px 6px;font-size:13px;line-height:16px;color:#8A867F}
.pop .pop-f{margin:10px 12px 4px;font-size:13px;line-height:18px;color:#6B6862}
.pop-sep{height:1px;margin:6px 4px;background:rgba(230,226,218,.08)}
.mi{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;border:0;border-radius:12px;background:none;color:#E6E2DA;font:inherit;font-size:15px;text-align:left;cursor:pointer}
.mi:hover{background:#323232}
.mi.is{background:#3A3A3A}
.mi.is .mi-h{color:#A39F98}
.mi-l{display:inline-flex;align-items:center;gap:8px}
.mi-h{color:#8A867F;font-size:14px}
.mi-k{font:inherit;font-size:12px;color:#8A867F;padding:2px 6px;border-radius:6px;border:1px solid rgba(230,226,218,.14)}
.mi svg{vertical-align:-2px}
.pop .dq-seg{align-self:flex-start;margin:4px}
.pop-key{width:300px}
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:4px}
.pk-grid button,.pg-grid button,.pb-grid button{height:40px;border:0;border-radius:12px;background:#323232;color:#E6E2DA;font:inherit;font-size:15px;cursor:pointer}
.pk-grid button.is,.pg-grid button.is,.pb-grid button.is{background:#E6E2DA;color:#141414}

.dq-app img{flex:none}
.dq-line a{text-decoration:none}
.fd-film video{background:#141414;aspect-ratio:8 / 5}
.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}}

.kb .kd[hidden],.pop[hidden]{display:none}
.acn{white-space:nowrap}.ac{display:inline-block;width:auto;fill:currentColor}.ac.fl{height:.84em;margin:0 .03em 0 .04em;vertical-align:-.03em}
.ac.sh{height:.8em;margin:0 .03em 0 .05em;vertical-align:-.08em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.gn-dd b{font-weight:400}
.gn-dd[aria-expanded="true"]{color:#E6E2DA;background:#2E2E2E}
.ct-key .pop-key{left:0}
button.cc{border:0;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.ct-pad{border:0;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .45s cubic-bezier(.2,.8,.2,1),transform .08s ease}
.ct-pad:active{transform:scale(.99)}
.ct-pad.hit:active,button.cc.hit:active{filter:brightness(1.08)}
.ct-pads.n3{grid-template-columns:repeat(3,1fr)}
.ct-pads.n12 .ct-pad{height:104px}
.ct-pads.n12 .ct-pad b{font-size:36px;line-height:38px}
.ct-kchords{grid-template-columns:repeat(var(--n,7),minmax(0,1fr))}
.cpr-play{flex:none}
.dq-pill.ok{color:#E6E2DA}
.cpr-tl{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 22px}
.cpr-tl .cpr-act{align-self:baseline}
.ct-dock .ct-dplay{flex:none}
.ct-dw:not(.ct-float){width:100%}
.ct-dw.ct-float{animation:ct-up .28s cubic-bezier(.2,.8,.2,1)}
@keyframes ct-up{from{transform:translate(-50%,16px);opacity:0}to{transform:translateX(-50%);opacity:1}}
.b .ct-in b{color:#E6E2DA}
.pg .ct-doc p.ct-credit{margin:40px 0 0;font-size:14px;line-height:20px;color:#6B6862}
.ct-ul a{color:#E6E2DA;text-decoration:underline;text-decoration-color:rgba(230,226,218,.3);text-underline-offset:4px;box-shadow:none}
.ct-dl2 li > span{color:#A39F98}
@media (max-width:760px){
 .ct-kchords{grid-template-columns:repeat(4,minmax(0,1fr))}
 .ct-kchords[style*="--n:3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
 .ct-pads.n3{grid-template-columns:repeat(3,1fr)}
 .ct-pads.n12 .ct-pad{height:72px}.ct-pads.n12 .ct-pad b{font-size:22px;line-height:24px}
 .ct-key .pop-key{width:min(300px,calc(100vw - 64px))}
 .ct-dw.ct-float .ct-now .cc-row{display:none}}
@media (prefers-reduced-motion: reduce){.ct-dw.ct-float{animation:none}.cc,.ct-pad,.kb .kw,.kb .kb-b{transition:none}}
@media print{
 @page{margin:14mm}
 html,body,.pg{background:#fff!important}
 .pn,.crumbs,.dq-line,.how,.b:has(.s),.faq,.foot,.ct-dw,.ct-bot,.nk,.cpr-play,.cpr-act,.ct-top,.ct-live,.dc,.ck-bar,.ky-bar,[class*="cookie"]{display:none!important}
 .b .tk,.b .sec{background:#fff!important;box-shadow:none!important;padding:0!important;max-width:none!important;width:100%!important}
 .t72{font-size:32px!important;line-height:36px!important;color:#000!important;margin:0 0 4px!important}
 .b .line{color:#444!important;font-size:13px!important}
 .b .ct-gh{color:#000!important;margin:20px 0 6px!important;break-after:avoid}
 .ct-gh span{color:#666!important}
 .ct-rows .cpr,.ct-rows .cpr.on{display:grid;grid-template-columns:minmax(0,1fr);margin:0!important;padding:4px 0!important;background:none!important;break-inside:avoid}
 .cpr-main{gap:12px}.b .cpr-t{color:#000!important}.b .cpr-s{color:#555!important}
 .cc,.cc.hit{min-width:64px!important;height:44px!important;padding:0 10px!important;border-radius:8px!important;background:#fff!important;color:#000!important;box-shadow:inset 0 0 0 1px #bbb!important}
 .cc b{font-size:16px!important;line-height:20px!important}.cc i{color:#555!important}}