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-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}
.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-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-sp{display:none}
 .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{padding:16px}
 .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.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}}

.b .sec:where(:not(.st *)){border-radius:32px}
.dq-pads{padding:12px!important}
.p4{border-radius:20px}
.p4-grid{grid-template-columns:repeat(4,1fr);gap:12px;width:100%}
.b .dq-pads .dq-hint{margin:20px 0 10px}
@media (max-width:760px){.b .sec:where(:not(.st *)){border-radius:28px}.dq-pads{padding:10px!important}.p4{border-radius:18px}.p4-grid{gap:8px}}

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

.p4{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.p4 > *{pointer-events:none}
.p4:focus-visible{outline:2px solid #E6E2DA;outline-offset:3px}

.p4.hit{transition:background 60ms ease-out,transform 60ms ease-out,filter 60ms ease-out,color 60ms ease-out}
.p4.hit .p4-n,.p4.hit kbd,.p4.hit .p4-drop{transition-duration:60ms}
.p4.out{transition:background .7s ease-out,transform .7s ease-out,filter .7s ease-out,color .7s ease-out}
.p4.out .p4-n,.p4.out kbd{transition-duration:.7s}
.p4-drop{display:none;font-size:16px;line-height:20px;color:#141414}
.p4.over .p4-drop{display:block}
.p4.over .p4-n{display:none}
.dq-sel b{font-weight:400}
.dq-own-b svg{flex:none}
.dq-file{display:none}
.dq-txt:focus-visible,.dq-own-b:focus-visible,.crumbs a:focus-visible{outline:2px solid #E6E2DA;outline-offset:2px;border-radius:999px}
.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){.p4-drop{font-size:14px;line-height:18px}.dq-ctl .dq-sp{display:block}}

@media (max-width:760px){.b .dq-pads .dq-hint{display:block}.dq-hint svg{display:inline-block;vertical-align:-3px;margin-right:6px}}
@media (prefers-reduced-motion: reduce){.p4{transition:none}}