body{font-family:"Roboto Condensed",sans-serif;color:#f0f0f0;text-align:center;margin:0;background-color:#000;background-image:url(/images/logo.jpg);background-repeat:no-repeat;background-size:contain;background-attachment:fixed;background-position:top center;}.outer-page{background:rgba(0,0,0,.6);width:100%;height:100%;}.outer-page .page{margin:0 auto;min-width:375px;max-width:980px;padding:8px;}.outer-page .page .card{position:relative;overflow:hidden;z-index:10;}.outer-page .now-playing{margin-bottom:18px;padding:16px;border-radius:12px;color:#fff;font-size:1.1rem;}.outer-page .now-playing strong{margin-top:6px;}.outer-page audio{width:100%;margin:0 0 10px;background:rgba(0,0,0,.8);border-radius:50px;}.outer-page .dotfont{font-family:"Doto",sans-serif;font-size:1.2rem;text-shadow:1px 1px 10px #fff,1px 1px 10px #ccc;}.outer-page .seek-wrap{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:10px;margin-bottom:12px;}.outer-page .seek-wrap input[type=range]{width:100%;cursor:pointer;position:relative;z-index:2;background:transparent;}.outer-page .seek-wrap .seek-track-wrap{position:relative;width:100%;height:28px;display:flex;align-items:center;}.outer-page .seek-wrap .seek-overlay{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:8px;pointer-events:none;z-index:1;}.loop-region{position:absolute;top:0;height:8px;border-radius:999px;background:rgba(125,162,255,.35);display:none;}.loop-region .loop-marker{position:absolute;top:-5px;width:2px;height:18px;background:#4f46e5;display:none;}.loop-region .loop-marker::after{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:bold;color:#4338ca;background:#fff;border:1px solid #c7d2fe;border-radius:999px;padding:1px 6px;line-height:1.2;}.loop-region .loop-marker.start::after{content:"A";}.loop-region .loop-marker.end::after{content:"B";}.loop-panel{padding:12px 0;border-radius:5px;margin-top:12px;background:#0e0e0ed1;border-radius:12px;padding:12px;}.loop-panel .loop-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;}.loop-panel .loop-buttons div{flex:1;}.loop-panel .loop-buttons .loop-btn{color:#121212;background:#f3d45c;border-radius:5px;padding:10px 14px;cursor:pointer;font-size:.95rem;border:none;}.loop-panel .loop-buttons .loop-btn:hover{background:#eef4ff;}.loop-panel .loop-buttons .loop-btn.active{background:#dfeaff;border-color:#7da2ff;font-weight:bold;}.loop-panel .loop-info{display:flex;flex-wrap:wrap;gap:14px;color:#fff;font-size:.9rem;}.waveform-panel{margin:0 0 20px;padding:14px;border:1px solid #d1d5db;border-radius:12px;background:#fff;}.waveform-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap;}.waveform-title{font-weight:bold;}.waveform-note{color:#6b7280;font-size:.9rem;}#waveformCanvas{width:100%;height:140px;display:block;border-radius:10px;background:#f8fafc;border:1px solid #e5e7eb;cursor:pointer;}.sets{display:flex;gap:10px;}.sets>div{flex:1;}.sets .song-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;font-size:.9rem;}.sets .song-list .song-btn{background-image:linear-gradient(to right,#000 0%,#53346d 51%,#000 100%);}.sets .song-list .song-btn{font-size:.8rem;margin:8px;padding:12px 32px;text-align:center;transition:.5s;background-size:200% auto;color:#fff;box-shadow:0 0 20px #eee;border-radius:10px;display:block;outline:none;border:none;cursor:pointer;}.sets .song-list .song-btn:hover{background-position:right center;color:#fff;text-decoration:none;}.sets .song-list .song-btn:active{background:#13799d;}kbd{background:#111827;color:#fff;border-radius:6px;padding:2px 6px;font-size:.85rem;}@media(max-width:450px){audio{position:sticky;top:20px;}.sets{flex-direction:column;}}