.dj-koyori{--dj-bg:#12101c;--dj-panel:#1c1930;--dj-panel-2:#241f3d;--dj-line:#322b52;--dj-line-strong:#453c72;--dj-pink:#ff5ca8;--dj-cyan:#4de3ff;--dj-purple:#a78bfa;--dj-yellow:#ffd166;--dj-text:#f4f1ff;--dj-text-dim:#9d97b8;background:radial-gradient(ellipse at 50% -10%,#2c2350 0%,var(--dj-bg)55%);min-height:100dvh;color:var(--dj-text);-webkit-tap-highlight-color:transparent}.dj-koyori button{font-family:inherit}.dj-koyori :focus-visible{outline:2px solid var(--dj-cyan);outline-offset:2px}.dj-koyori .dj-main{max-width:560px;margin:0 auto;padding:16px 14px 48px}.dj-koyori .dj-header{justify-content:space-between;align-items:baseline;margin-bottom:12px;display:flex}.dj-koyori .dj-title{letter-spacing:.04em;background:linear-gradient(90deg,var(--dj-pink),var(--dj-cyan));color:#0000;filter:drop-shadow(0 0 14px #ff5ca859);-webkit-background-clip:text;background-clip:text;font-size:1.7rem;font-weight:900}.dj-koyori .dj-back{color:var(--dj-text-dim);padding:6px 0 6px 12px;font-size:.8rem;text-decoration:none}.dj-koyori .dj-back:hover{color:var(--dj-cyan)}.dj-koyori .dj-transport{background:linear-gradient(180deg,var(--dj-panel-2),var(--dj-panel));border:1px solid var(--dj-line);border-radius:16px;align-items:center;gap:14px;margin-bottom:12px;padding:14px;display:flex;box-shadow:0 4px 20px #0000004d}.dj-koyori .dj-play-btn{border:2px solid var(--dj-cyan);cursor:pointer;background:#4de3ff14;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:58px;height:58px;transition:box-shadow .15s,background .15s,border-color .15s;display:flex}.dj-koyori .dj-play-btn:hover{box-shadow:0 0 14px #4de3ff66}.dj-koyori .dj-play-btn:active{transform:scale(.95)}.dj-koyori .dj-play-icon-play{border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--dj-cyan);width:0;height:0;margin-left:4px;display:block}.dj-koyori .dj-play-icon-stop{background:var(--dj-pink);border-radius:3px;width:17px;height:17px;display:block}.dj-koyori .dj-play-btn.is-attract{animation:1.6s ease-in-out infinite dj-koyori-attract}@keyframes dj-koyori-attract{0%,to{box-shadow:0 0 #4de3ff00}50%{box-shadow:0 0 22px #4de3ff8c}}.dj-koyori .dj-play-btn.is-playing{border-color:var(--dj-pink);background:#ff5ca81a;box-shadow:0 0 18px #ff5ca880}.dj-koyori .dj-bpm{flex:1;min-width:0}.dj-koyori .dj-bpm-label{color:var(--dj-text-dim);letter-spacing:.12em;margin-bottom:8px;font-size:.7rem;display:block}.dj-koyori .dj-bpm-value{color:var(--dj-cyan);font-variant-numeric:tabular-nums;font-size:.9rem;font-weight:700}.dj-koyori .dj-bpm-slider{appearance:none;cursor:pointer;border-radius:999px;width:100%;height:6px;display:block}.dj-koyori .dj-bpm-slider::-webkit-slider-thumb{appearance:none;background:var(--dj-pink);border:2px solid #fff;border-radius:50%;width:22px;height:22px;box-shadow:0 0 10px #ff5ca899}.dj-koyori .dj-bpm-slider::-moz-range-thumb{background:var(--dj-pink);border:2px solid #fff;border-radius:50%;width:20px;height:20px;box-shadow:0 0 10px #ff5ca899}.dj-koyori .dj-beat-dots{flex-shrink:0;gap:7px;display:flex}.dj-koyori .dj-beat-dot{background:var(--dj-line);border-radius:50%;width:11px;height:11px;transition:background 50ms,box-shadow 50ms,transform 50ms}.dj-koyori .dj-beat-dot.is-head{border:1px solid var(--dj-line-strong)}.dj-koyori .dj-beat-dot.is-active{background:var(--dj-pink);box-shadow:0 0 10px var(--dj-pink);transform:scale(1.25)}.dj-koyori .dj-beat-dot.is-head.is-active{background:var(--dj-cyan);box-shadow:0 0 10px var(--dj-cyan)}.dj-koyori .dj-tabs{background:var(--dj-panel);border:1px solid var(--dj-line);border-radius:13px;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;padding:5px;display:grid}.dj-koyori .dj-tab{color:var(--dj-text-dim);cursor:pointer;background:0 0;border:none;border-radius:9px;padding:10px 0;font-size:.9rem;font-weight:700;transition:background .15s,color .15s}.dj-koyori .dj-tab.is-active{color:var(--dj-text);background:linear-gradient(135deg,#ff5ca840,#4de3ff33);box-shadow:0 0 12px #ff5ca826}.dj-koyori .dj-toolbar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.dj-koyori .dj-toolbar-caption{min-width:0;color:var(--dj-text-dim);flex:1;font-size:.75rem}.dj-koyori .dj-style-select{background:var(--dj-panel);color:var(--dj-text);border:1px solid var(--dj-line);border-radius:9px;padding:9px 10px;font-size:.85rem}.dj-koyori .dj-toggle{border:1px solid var(--dj-line);background:var(--dj-panel);color:var(--dj-text-dim);cursor:pointer;border-radius:9px;padding:9px 12px;font-size:.8rem;font-weight:600;transition:border-color .15s,color .15s,box-shadow .15s}.dj-koyori .dj-toggle.is-on{border-color:var(--dj-cyan);color:var(--dj-cyan);box-shadow:0 0 8px #4de3ff40}.dj-koyori .dj-edit-hint{border:1px dashed var(--dj-cyan);color:var(--dj-cyan);text-align:center;background:#4de3ff0f;border-radius:9px;margin:-4px 0 10px;padding:8px 12px;font-size:.78rem}.dj-koyori .dj-pad-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.dj-koyori .dj-pad{aspect-ratio:1;background:radial-gradient(circle at 50% 20%,#ffffff0d,transparent 60%),linear-gradient(160deg,var(--dj-panel-2),var(--dj-panel));color:var(--dj-text);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:1px solid #383060;border-radius:16px;justify-content:center;align-items:center;padding:8px 6px 14px;transition:transform 50ms;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 -3px 8px #00000059}.dj-koyori .dj-pad:active{transform:scale(.95)}.dj-koyori .dj-pad--pink{--pad-color:var(--dj-pink)}.dj-koyori .dj-pad--cyan{--pad-color:var(--dj-cyan)}.dj-koyori .dj-pad--purple{--pad-color:var(--dj-purple)}.dj-koyori .dj-pad--yellow{--pad-color:var(--dj-yellow)}.dj-koyori .dj-pad-led{background:var(--pad-color);opacity:.55;width:38%;height:4px;box-shadow:0 0 6px var(--pad-color);border-radius:999px;transition:opacity .1s;position:absolute;bottom:7px;left:50%;transform:translate(-50%)}.dj-koyori .dj-pad:active .dj-pad-led{opacity:1;box-shadow:0 0 12px var(--pad-color)}.dj-koyori .dj-pad.is-pulse .dj-pad-led{opacity:.9}.dj-koyori .dj-pad.is-edit{border-style:dashed;border-color:var(--dj-cyan)}.dj-koyori .dj-pad-label{z-index:1;-webkit-line-clamp:3;text-align:center;word-break:break-all;-webkit-box-orient:vertical;font-size:.72rem;font-weight:700;line-height:1.3;display:-webkit-box;position:relative;overflow:hidden}.dj-koyori .dj-pad-key{z-index:1;color:var(--dj-text-dim);font-size:.6rem;font-weight:700;display:none;position:absolute;top:6px;left:8px}.dj-koyori .dj-note-desktop{display:none}@media (hover:hover) and (pointer:fine){.dj-koyori .dj-pad-key{display:block}.dj-koyori .dj-note-desktop{display:inline}}.dj-koyori .dj-pad-edit-badge{z-index:1;white-space:nowrap;color:var(--dj-cyan);font-size:.58rem;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.dj-koyori .dj-pad-flash{border-radius:inherit;background:var(--pad-color,var(--dj-pink));opacity:0;pointer-events:none;animation:.35s ease-out dj-koyori-pad-flash;position:absolute;inset:0}@keyframes dj-koyori-pad-flash{0%{opacity:.85}to{opacity:0}}.dj-koyori .dj-seq-scroll{overscroll-behavior-x:contain;padding-bottom:6px;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 14px),#0000)}.dj-koyori .dj-seq-grid{flex-direction:column;gap:5px;min-width:500px;padding-right:16px;display:flex}.dj-koyori .dj-seq-row{grid-template-columns:92px repeat(16,1fr);align-items:stretch;gap:3px;display:grid}.dj-koyori .dj-seq-row--header{margin-bottom:-2px}.dj-koyori .dj-seq-beat-num{text-align:center;color:var(--dj-text-dim);font-variant-numeric:tabular-nums;font-size:.6rem}.dj-koyori .dj-seq-beat-num.is-playhead{color:var(--dj-yellow)}.dj-koyori .dj-seq-label{color:var(--dj-text-dim);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:5px;padding-right:4px;font-size:.68rem;display:flex;overflow:hidden}.dj-koyori .dj-seq-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.dj-koyori .dj-seq-dot--kick{background:var(--dj-pink)}.dj-koyori .dj-seq-dot--snare{background:var(--dj-cyan)}.dj-koyori .dj-seq-dot--hat{background:var(--dj-purple)}.dj-koyori .dj-seq-label--voice{background:var(--dj-panel);border:1px dashed var(--dj-line-strong);color:var(--dj-cyan);cursor:pointer;text-align:left;border-radius:7px;padding:5px 7px;line-height:1.25;transition:border-color .15s;display:block}.dj-koyori .dj-seq-label--voice:hover{border-color:var(--dj-cyan)}.dj-koyori .dj-seq-divider{background:var(--dj-line);height:1px;margin:3px 0}.dj-koyori .dj-seq-cell{border:1px solid var(--dj-line);background:var(--dj-panel);cursor:pointer;touch-action:manipulation;border-radius:6px;height:34px;padding:0;transition:background 80ms,box-shadow 80ms}.dj-koyori .dj-seq-row:not(.dj-seq-row--header)>.dj-seq-cell:nth-child(n+6):nth-child(-n+9),.dj-koyori .dj-seq-row:not(.dj-seq-row--header)>.dj-seq-cell:nth-child(n+14):nth-child(-n+17){background:var(--dj-panel-2)}.dj-koyori .dj-seq-row:nth-child(2) .dj-seq-cell--drum.is-on{border-color:var(--dj-pink);box-shadow:0 0 8px #ff5ca880;background:var(--dj-pink)!important}.dj-koyori .dj-seq-row:nth-child(3) .dj-seq-cell--drum.is-on{border-color:var(--dj-cyan);box-shadow:0 0 8px #4de3ff80;background:var(--dj-cyan)!important}.dj-koyori .dj-seq-row:nth-child(4) .dj-seq-cell--drum.is-on{border-color:var(--dj-purple);box-shadow:0 0 8px #a78bfa80;background:var(--dj-purple)!important}.dj-koyori .dj-seq-cell--voice.is-on{border-color:var(--dj-pink);box-shadow:0 0 8px #ff5ca880;background:var(--dj-pink)!important}.dj-koyori .dj-seq-cell.is-playhead{outline:2px solid var(--dj-yellow);outline-offset:-1px}.dj-koyori .dj-scratch{background:linear-gradient(180deg,var(--dj-panel-2),var(--dj-panel));border:1px solid var(--dj-line);border-radius:16px;align-items:center;gap:16px;margin-top:16px;padding:16px;display:flex}.dj-koyori .dj-scratch-disc-wrap{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;flex-shrink:0;width:148px;height:148px}.dj-koyori .dj-scratch-disc-wrap:active{cursor:grabbing}.dj-koyori .dj-scratch-disc{border:3px solid var(--dj-line-strong);will-change:transform;background:repeating-radial-gradient(circle,#16131f 0 2px,#201b31 3px 5px);border-radius:50%;width:100%;height:100%;position:relative;box-shadow:0 0 20px #00000080,0 0 12px #ff5ca826}.dj-koyori .dj-scratch-label{background:conic-gradient(from 0deg,var(--dj-pink),var(--dj-purple),var(--dj-cyan),var(--dj-pink));border-radius:50%;width:56px;height:56px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dj-koyori .dj-scratch-label:after{content:"";background:var(--dj-bg);border-radius:50%;width:8px;height:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dj-koyori .dj-scratch-info{flex:1;min-width:0}.dj-koyori .dj-scratch-title{letter-spacing:.15em;color:var(--dj-pink);margin-bottom:6px;font-size:.75rem;font-weight:700;display:block}.dj-koyori .dj-scratch-hint{color:var(--dj-text-dim);margin-bottom:10px;font-size:.72rem;line-height:1.55}.dj-koyori .dj-scratch-status{border:1px solid var(--dj-line);color:var(--dj-text-dim);border-radius:999px;padding:5px 12px;font-size:.72rem;display:inline-block}.dj-koyori .dj-scratch-status.is-held{border-color:var(--dj-yellow);color:var(--dj-yellow);box-shadow:0 0 8px #ffd1664d}.dj-koyori .dj-scratch-disc-wrap.is-held .dj-scratch-disc{box-shadow:0 0 20px #00000080,0 0 16px #ffd16659}.dj-koyori .dj-picker-overlay{z-index:50;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#080610b3;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.dj-koyori .dj-picker{background:var(--dj-panel);border:1px solid #3a3360;border-bottom:none;border-radius:20px 20px 0 0;flex-direction:column;width:100%;max-width:560px;height:80dvh;padding:16px 16px 0;display:flex;overflow:hidden}@media (min-width:640px){.dj-koyori .dj-picker-overlay{align-items:center;padding:24px}.dj-koyori .dj-picker{border-bottom:1px solid #3a3360;border-radius:20px;height:min(720px,85dvh);padding-bottom:4px}}.dj-koyori .dj-picker-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;display:flex}.dj-koyori .dj-picker-title{color:var(--dj-text);white-space:nowrap;text-overflow:ellipsis;font-size:1rem;font-weight:700;overflow:hidden}.dj-koyori .dj-picker-close{border:1px solid var(--dj-line-strong);width:36px;height:36px;color:var(--dj-text-dim);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;font-size:1.15rem;line-height:1}.dj-koyori .dj-picker-close:hover{color:var(--dj-text);border-color:var(--dj-text-dim)}.dj-koyori .dj-picker-search-row{align-items:center;gap:10px;margin-bottom:10px;display:flex}.dj-koyori .dj-picker-search{background:var(--dj-bg);border:1px solid var(--dj-line);min-width:0;color:var(--dj-text);border-radius:10px;flex:1;padding:10px 12px;font-size:16px}.dj-koyori .dj-picker-search:focus{border-color:var(--dj-pink);outline:none}.dj-koyori .dj-picker-count{color:var(--dj-text-dim);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.72rem}.dj-koyori .dj-picker-categories{scrollbar-width:none;overscroll-behavior-x:contain;flex-shrink:0;gap:6px;padding:2px 28px 10px 2px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000)}.dj-koyori .dj-picker-categories::-webkit-scrollbar{display:none}.dj-koyori .dj-picker-chip{border:1px solid var(--dj-line);color:var(--dj-text-dim);cursor:pointer;white-space:nowrap;background:0 0;border-radius:999px;flex-shrink:0;padding:7px 13px;font-size:.78rem;transition:border-color .12s,color .12s,background .12s}.dj-koyori .dj-picker-chip.is-active{border-color:var(--dj-pink);color:var(--dj-pink);background:#ff5ca81f}.dj-koyori .dj-picker-list{overscroll-behavior:contain;flex:1;min-height:0;margin:0;padding:0 0 16px;list-style:none;overflow-y:auto}.dj-koyori .dj-picker-item{border-bottom:1px solid #2a2447;border-radius:8px;align-items:center;gap:10px;display:flex}.dj-koyori .dj-picker-item.is-current{background:#ff5ca814}.dj-koyori .dj-picker-preview{border:1px solid var(--dj-cyan);cursor:pointer;background:#4de3ff0f;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;margin-left:2px;display:flex}.dj-koyori .dj-picker-preview:active{background:#4de3ff40}.dj-koyori .dj-picker-preview-icon{border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--dj-cyan);width:0;height:0;margin-left:2px;display:block}.dj-koyori .dj-picker-select{min-width:0;color:var(--dj-text);text-align:left;cursor:pointer;background:0 0;border:none;flex:1;justify-content:space-between;align-items:center;gap:8px;padding:12px 6px 12px 0;font-size:.88rem;display:flex}.dj-koyori .dj-picker-name{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:7px;min-width:0;display:flex;overflow:hidden}.dj-koyori .dj-picker-current-badge{color:var(--dj-pink);border:1px solid var(--dj-pink);border-radius:999px;flex-shrink:0;padding:1px 7px;font-size:.62rem;font-weight:700}.dj-koyori .dj-picker-category{color:var(--dj-text-dim);flex-shrink:0;font-size:.68rem}.dj-koyori .dj-picker-empty{text-align:center;color:var(--dj-text-dim);padding:28px 8px;font-size:.85rem}.dj-koyori .dj-note{color:var(--dj-text-dim);margin-top:16px;font-size:.74rem;line-height:1.7}.dj-koyori .dj-unsupported{text-align:center;max-width:420px;color:var(--dj-text-dim);margin:40px auto;line-height:1.8}@media (max-width:420px){.dj-koyori .dj-scratch{gap:12px;padding:12px}.dj-koyori .dj-scratch-disc-wrap{width:118px;height:118px}.dj-koyori .dj-scratch-label{width:46px;height:46px}}@media (prefers-reduced-motion:reduce){.dj-koyori .dj-pad-flash{opacity:.4;animation:none}.dj-koyori .dj-play-btn.is-attract{animation:none}.dj-koyori .dj-beat-dot.is-active{transform:none}}