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-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-sp{flex:1}
.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-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}
.fd-film{padding:16px!important}
.fd-film video{display:block;width:100%;height:auto;border-radius:14px}
.b .tk.dqt.ct-wide{max-width:1080px}
.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}
.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}
.b .ct-lab{margin:0;font-size:14px;color:#6B6862}
@media (max-width:760px){.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}.cc{min-width:52px;height:46px;padding:0 10px}.cc b{font-size:16px}}
.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}
@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{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{box-shadow:inset 0 -1px 0 #E6E2DA}
.ct-fig{margin:28px 0 32px}
.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}}
.cc.hit,.cpr,.cpr-play,.ct-tempo,.dq-ctl .dq-tog{box-shadow:none}
.ct-doc p 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{box-shadow:none;text-decoration-color:#E6E2DA}
.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}
.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}}
@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}
.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)}
.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-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}
.gn-go{height:44px;padding:0 22px;border:0;border-radius:999px;background:#E6E2DA;color:#141414;font:inherit;font-size:16px;cursor:pointer}
.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-kfig .kb{height:84px}.kb .kd{width:6px;height:6px}.ct-kchords{grid-template-columns:repeat(4,1fr)}.ct-kchords .cc{height:60px}}
.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}}
.gn-mid{gap:12px}
.gn-opts{margin-top:14px}
.kb .kd{width:6px;height:6px;background:#A8A39B}
.kb .kb-b .kd{background:#6B6862}
.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-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}
.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}}
@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}}
.tp-steps{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:22px}
.tp-steps li{display:grid;grid-template-columns:40px 1fr;gap:4px}
.tp-n{display:grid;place-items:center;width:28px;height:28px;margin-top:1px;border-radius:50%;background:#262626;color:#A39F98;font-size:14px}
.pg .ct-doc .tp-steps p{margin:0}
.pg .ct-doc .tp-steps .tp-st{color:#E6E2DA}
.pg .ct-doc p.tp-after{margin-top:24px}
.tp-parts{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.tp-parts li{font-size:18px;line-height:29px;color:#A39F98}
.tp-parts b{font-weight:400;color:#E6E2DA}
.ct-fig .ct-rows .cpr{grid-template-columns:44px minmax(0,1fr) auto}
.ct-fig .ct-rows .cpr-act{grid-column:3;grid-row:1;align-self:start;margin-top:2px}
.ct-fig .ct-rows .cpr.on{margin:0 -20px;padding:18px 20px;border-radius:24px}
@media (max-width:760px){.ct-fig .ct-rows .cpr{grid-template-columns:40px minmax(0,1fr)}.ct-fig .ct-rows .cpr-act{grid-column:2;grid-row:auto}.ct-fig .ct-rows .cpr:not(.on) .cpr-act{display:none}.ct-fig .ct-rows .cpr.on{margin:0 -12px;padding:14px 12px}}
@media (max-width:760px){.gn-mk .dq-seg{display:grid;grid-template-columns:repeat(3,1fr);width:100%;border-radius:20px}.gn-mk > .dq-seg:last-child{grid-template-columns:repeat(2,1fr)}.gn-mk .gn-go{width:100%}.gn-ctl .gn-dl{width:100%;justify-content:center}}
.gn-mk .dq-seg button,.gn-go{white-space:nowrap}
.ph-sum{display:none;align-items:center;justify-content:space-between;width:100%;height:44px;margin-top:12px;padding:0 16px;border:0;border-radius:14px;background:#262626;color:#A39F98;font:inherit;font-size:15px}
@media (max-width:760px){.gn-opts{display:none}.ph-sum{display:flex}}
body{background:#141414}
.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}
.pop-genre{width:340px}
.pg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin:4px}
.pop-swap{width:260px;top:auto;bottom:calc(100% - 4px);left:auto;right:-8px}
.pop-sound{width:260px}
.pop-sound .dq-seg{margin:0 4px 4px}
.pop-beat{width:560px}
.pb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:4px}
.pb-grid button{display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.pb-grid button .r{font-size:13px;color:#8A867F}
.pb-grid button.is .r{color:rgba(20,20,20,.55)}
.pb-grid .off{grid-column:1 / -1;justify-content:center;background:transparent;box-shadow:inset 0 0 0 1px rgba(230,226,218,.12)}
.pb-row{display:flex;align-items:center;gap:12px;margin:4px 8px 6px}
.ck{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0;border:0;background:none;color:#E6E2DA;font:inherit;font-size:15px;cursor:pointer}
.ck i{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#E6E2DA;color:#141414}
.gn-o.nb svg{color:#A39F98}
.gn-pad.locked .gn-lk{color:#E6E2DA;background:#333}
.gn-pad.hit.locked .gn-lk{color:#141414;background:rgba(20,20,20,.12)}
.gn-pad.bad{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(242,89,46,.55)}
.gn-pad.bad .gn-nm b{color:#F2592E}
.gn-pad.bad .gn-nm i{color:#F2592E}
.gn-pad.drag{transform:translateY(-10px) rotate(-2deg);background:#303030;box-shadow:0 24px 40px -18px rgba(0,0,0,.7);z-index:2}
.gn-sw.open{opacity:1;background:#E6E2DA;color:#141414}
.gn-pads.eight{grid-template-columns:repeat(4,1fr)}
.gn-pads.eight .gn-pad{height:120px}
.gn-fb{display:flex;flex-direction:column;gap:6px}
.fb{display:grid;grid-template-columns:20px 18px repeat(var(--n),1fr);gap:4px 6px;align-items:center}
.fb-n{font-size:12px;line-height:16px;color:#6B6862;text-align:center;padding-bottom:2px}
.fb-n.mk{color:#A39F98}
.fb-s{font-size:13px;color:#8A867F;text-align:center}
.fb-s.off{color:#4A4743}
.fb-o{font-size:13px;color:#8A867F;text-align:center}
.fb-c{position:relative;height:22px;border-radius:7px;background:#262626}
.fb-c::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(230,226,218,.14)}
.fb-c.off{background:#202020}
.fb-c.off::before{background:rgba(230,226,218,.05)}
.fb-c.on{background:var(--c)}
.fb-c.on::before{display:none}
.gn-fb .fb .fb-c{height:24px}
.b .gn-fbn{margin:0;font-size:14px;color:#6B6862}
.gn-o.ok{color:#35BD82}
.gn-mk .dq-seg button,.gn-go{white-space:nowrap}
.own-in{flex:1;display:flex;align-items:center;height:48px;padding:0 18px;border-radius:16px;background:#262626;box-shadow:inset 0 0 0 1px rgba(230,226,218,.1)}
.own-in input{flex:1;border:0;background:none;color:#E6E2DA;font:inherit;font-size:20px;letter-spacing:.02em;outline:none}
.own-in.bad{box-shadow:inset 0 0 0 1.5px rgba(242,89,46,.7)}
.b .own-h,.b .own-err{margin:10px 0 0;font-size:14px;color:#8A867F}
.b .own-err{color:#F2592E}
.gn-o[disabled]{opacity:.4;cursor:default}
.sh{position:absolute;left:0;right:0;bottom:0;max-height:92%;overflow:hidden;padding:8px 16px 24px;border-radius:24px 24px 0 0;background:#232323;box-shadow:0 -12px 40px rgba(0,0,0,.5)}
.sh-h{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:52px;position:relative}
.sh-h .grab{position:absolute;top:2px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:#4A4743}
.sh-h p{grid-column:2;margin:0;font-size:17px;color:#E6E2DA}
.sh-h .done{grid-column:3;justify-self:end;border:0;background:none;color:#E6E2DA;font:inherit;font-size:16px}
.sh .sl{margin:18px 0 8px;font-size:13px;color:#8A867F}
.sh .pg-grid,.sh .pk-grid,.sh .pb-grid{margin:0}
.sh .pb-grid{grid-template-columns:repeat(2,1fr)}
.sh .dq-seg{display:flex;width:100%;margin-top:8px}
.sh .dq-seg button{flex:1}
.sh .pb-row{margin:12px 0 0}
@media (max-width:760px){.gn-mk .dq-seg{display:grid;grid-template-columns:repeat(3,1fr);width:100%;border-radius:20px}.pop-beat{width:auto}}
@media (max-width:760px){.gn-mk .dq-seg{display:grid;grid-template-columns:repeat(3,1fr);width:100%;border-radius:20px;overflow:visible}.gn-mk .dq-seg + .gn-go{width:100%}.gn-mk > .dq-seg:last-child{grid-template-columns:repeat(2,1fr)}.gn-ctl .gn-dl{width:100%;justify-content:center}}
.ct-tempo button,.sh .ct-tempo button{display:inline-grid;place-items:center;padding:0}
.ct-tempo button svg{display:block}
.b .sec:where(:not(.st *)){border-radius:32px}
.b .sec.gn-mid{padding:12px!important}
.gn-pad,.ct-rows .cpr.on{border-radius:20px}
.gn-pads{gap:12px}
.gn-mid .kb .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.gn-mid{padding:10px!important}.gn-pad{border-radius:18px}}

.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}}

#cg [hidden],.cg-doc [hidden]{display:none!important}
.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.sp{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}
#cg button:focus-visible,#cg input:focus-visible,.cg-doc button:focus-visible,.cg-doc a:focus-visible,.crumbs a:focus-visible{outline:2px solid #E6E2DA;outline-offset:2px}

.gn-pad{cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.gn-pad:focus-visible{outline:2px solid #E6E2DA;outline-offset:3px}
.gn-pad:focus-within .gn-sw{opacity:1}
@media (hover:none){.gn-sw{opacity:1}}
.gn-pad .gn-nm{right:16px}
.gn-pad .gn-nm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gn-pad.long .gn-nm b{font-size:30px;line-height:42px}
@media (max-width:760px){.gn-pads.eight{grid-template-columns:repeat(2,1fr)}.gn-pads.eight .gn-pad{height:112px}.gn-pad.long .gn-nm b{font-size:22px;line-height:32px}}
.cg-slot{background:transparent!important;box-shadow:inset 0 0 0 1.5px rgba(230,226,218,.12)}
.cg-ghost{position:fixed;z-index:50;pointer-events:none;margin:0}
html.cg-noselect,html.cg-noselect *{user-select:none;-webkit-user-select:none;cursor:grabbing!important}

.ct-tempo .cg-bpmw{display:inline-flex;align-items:baseline;gap:5px;padding:0 10px;cursor:text}
.cg-bpm{width:2ch;padding:0;border:0;background:none;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:right;outline:none}
.cg-bpm:focus{box-shadow:0 1px 0 #E6E2DA}
.dq-tog i::after{transition:left .15s ease}
.dq-tog[aria-pressed="false"] i{background:#4A4743}
.dq-tog[aria-pressed="false"] i::after{left:3px}
.ck[aria-checked="false"] i{background:transparent;box-shadow:inset 0 0 0 1.5px #6B6862;color:transparent}
.mi[disabled]{opacity:.4;cursor:default}
.mi[disabled]:hover{background:none}
.pk-grid button:not(.is):hover,.pg-grid button:not(.is):hover,.pb-grid button:not(.is):not(.off):hover{background:#3A3A3A}
.pb-grid .off:not(.is):hover{background:#2E2E2E}
.pb-grid .off.is{background:#E6E2DA;color:#141414;box-shadow:none}
.gn-ctl .gn-o{min-height:40px}
.gn-go:hover,.gn-dl:hover,.gn-play:hover{background:#F2EFE8}

.cg-scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5)}
.sh.cg-sheet{position:fixed;z-index:71;max-height:85vh;overflow:auto;overscroll-behavior:contain;padding-bottom:calc(24px + env(safe-area-inset-bottom));font-family:'Uncut Sans','Helvetica Neue',sans-serif}
.sh .ct-tempo{display:inline-flex}
.sh .pk-grid{margin-top:8px}
@media (max-width:760px){.gn-pads .pop-swap{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;z-index:71}}

.ct-kchords button.cc{border:0;font:inherit;text-align:left;color:#E6E2DA;cursor:pointer}
.ct-kchords button.cc.hit{color:#141414}
.ct-rows .cpr-play svg{display:block}
.pg .ct-doc p.cg-credit{margin:48px 0 0;font-size:14px;line-height:20px;color:#6B6862}
.ct-dl2 li span{color:#A39F98}
@media (prefers-reduced-motion:reduce){.gn-pad,.cc,.kb .kw,.kb .kb-b{transition:none}}