@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--c-bg:#070709;--c-surface:#0e0e12;--c-surface-alt:#050507;--c-border:#1e1e24;--c-border-hover:#2d2d35;--c-text:#e0e0e0;--c-text-white:#fff;--c-text-muted:#8a8a93;--c-text-dim:#6b6b75;--c-text-faint:#52525c;--c-accent:#fff;--c-hover-bg:#121217;--sp-0:0;--sp-0-5:2px;--sp-1:4px;--sp-1-5:6px;--sp-2:8px;--sp-2-5:10px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;--radius-sm:2px;--radius-md:6px;--radius-full:9999px}*,:before,:after{box-sizing:border-box}html,body,#root{background-color:var(--c-bg);color:var(--c-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;margin:0;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--c-hover-bg)}::-webkit-scrollbar-thumb{background:var(--c-border-hover);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3e3e46}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}@keyframes bpm-pulse{0%{border-color:#ffffff2e;box-shadow:0 0 6px #ffffff08}50%,to{border-color:var(--c-border);box-shadow:0 0 #fff0}}.bpm-pulsing{animation:bpm-pulse var(--bpm-pulse-duration,.5s) infinite ease-out}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}.animate-ping{animation:1s cubic-bezier(0,0,.2,1) infinite ping}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(0)}}.animate-bounce{animation:1s infinite bounce}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.flex-1{flex:1}.flex-grow{flex-grow:1}.items-center{align-items:center}.items-start{align-items:start}.items-end{align-items:end}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.shrink-0{flex-shrink:0}.min-w-0{min-width:0}.grid{display:grid}.grid-2{grid-template-columns:repeat(2,1fr);display:grid}.gap-1{gap:var(--sp-1)}.gap-1-5{gap:var(--sp-1-5)}.gap-2{gap:var(--sp-2)}.gap-2-5{gap:var(--sp-2-5)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.w-full{width:100%}.h-full{height:100%}.h-screen{height:100vh}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.inset-0{inset:0}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.select-none{user-select:none}.pointer-events-none{pointer-events:none}.cursor-pointer{cursor:pointer}.block{display:block}.hidden{display:none}.inline-flex{display:inline-flex}.p-1{padding:var(--sp-1)}.p-1-5{padding:var(--sp-1-5)}.p-2{padding:var(--sp-2)}.p-2-5{padding:var(--sp-2-5)}.p-3{padding:var(--sp-3)}.p-4{padding:var(--sp-4)}.p-5{padding:var(--sp-5)}.p-6{padding:var(--sp-6)}.px-2{padding-left:var(--sp-2);padding-right:var(--sp-2)}.px-3{padding-left:var(--sp-3);padding-right:var(--sp-3)}.px-4{padding-left:var(--sp-4);padding-right:var(--sp-4)}.py-0-5{padding-top:var(--sp-0-5);padding-bottom:var(--sp-0-5)}.py-1{padding-top:var(--sp-1);padding-bottom:var(--sp-1)}.py-4{padding-top:var(--sp-4);padding-bottom:var(--sp-4)}.py-6{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}.pt-1{padding-top:var(--sp-1)}.pt-2{padding-top:var(--sp-2)}.pb-1{padding-bottom:var(--sp-1)}.pb-2{padding-bottom:var(--sp-2)}.pr-1{padding-right:var(--sp-1)}.pr-2{padding-right:var(--sp-2)}.m-0{margin:0}.mt-0-5{margin-top:var(--sp-0-5)}.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mb-1{margin-bottom:var(--sp-1)}.mb-1-5{margin-bottom:var(--sp-1-5)}.mb-2{margin-bottom:var(--sp-2)}.ml-0-5{margin-left:var(--sp-0-5)}.ml-1{margin-left:var(--sp-1)}.ml-2{margin-left:var(--sp-2)}.mx-auto{margin-left:auto;margin-right:auto}.space-y-1>*+*{margin-top:var(--sp-1)}.space-y-1-5>*+*{margin-top:var(--sp-1-5)}.space-y-2>*+*{margin-top:var(--sp-2)}.space-y-2-5>*+*{margin-top:var(--sp-2-5)}.space-y-3>*+*{margin-top:var(--sp-3)}.space-y-4>*+*{margin-top:var(--sp-4)}.space-y-5>*+*{margin-top:var(--sp-5)}.space-y-6>*+*{margin-top:var(--sp-6)}.font-sans{font-family:var(--font-sans)}.font-mono{font-family:var(--font-mono)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.uppercase{text-transform:uppercase}.text-center{text-align:center}.text-left{text-align:left}.leading-relaxed{line-height:1.625}.leading-none{line-height:1}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.tracking-tighter{letter-spacing:-.05em}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.whitespace-pre-line{white-space:pre-line}.select-all{user-select:all}.resize-none{resize:none}.text-7px{font-size:7px}.text-8px{font-size:8px}.text-8-5px{font-size:8.5px}.text-9px{font-size:9px}.text-10px{font-size:10px}.text-11px{font-size:11px}.text-xs{font-size:12px;line-height:16px}.text-sm{font-size:14px;line-height:20px}.text-base{font-size:16px;line-height:24px}.text-lg{font-size:18px;line-height:28px}.text-6xl{font-size:3.75rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}.text-9xl{font-size:8rem;line-height:1}.text-white{color:var(--c-text-white)}.text-black{color:#000}.text-muted{color:var(--c-text-muted)}.text-dim{color:var(--c-text-dim)}.text-faint{color:var(--c-text-faint)}.bg-bg{background-color:var(--c-bg)}.bg-surface{background-color:var(--c-surface)}.bg-surface-alt{background-color:var(--c-surface-alt)}.bg-white{background-color:#fff}.bg-black{background-color:#000}.bg-transparent{background-color:#0000}.border{border:1px solid var(--c-border)}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom:1px solid var(--c-border)}.border-t{border-top:1px solid var(--c-border)}.border-dashed{border-style:dashed}.border-black{border-color:#000}.border-white{border-color:#fff}.border-subtle{border-color:var(--c-border)}.border-white-10{border-color:#ffffff1a}.border-white-20{border-color:#fff3}.border-white-30{border-color:#ffffff4d}.border-white-50{border-color:#ffffff80}.border-black-20{border-color:#0003}.rounded-sm{border-radius:var(--radius-sm)}.rounded{border-radius:var(--radius-md)}.rounded-full{border-radius:var(--radius-full)}.panel{background-color:var(--c-surface);border:1px solid var(--c-border);padding:var(--sp-4);border-radius:var(--radius-md)}.btn{justify-content:center;align-items:center;gap:var(--sp-1-5);font-family:var(--font-mono);text-transform:uppercase;border-radius:var(--radius-sm);cursor:pointer;padding:var(--sp-1-5) var(--sp-3);border:1px solid;font-size:9px;font-weight:700;line-height:1;transition:all .15s;display:inline-flex}.btn:disabled{cursor:not-allowed}.btn-header{background-color:var(--c-surface);color:var(--c-text-white);border-color:#fff3;box-shadow:0 4px 6px -1px #0000001a}.btn-header:hover{background-color:var(--c-hover-bg);border-color:#fff6}.btn-primary{background-color:var(--c-text-white);color:#000;border-color:var(--c-text-white);box-shadow:0 4px 6px -1px #ffffff0d}.btn-primary:hover{background-color:#e5e5e5}.btn-primary:disabled{opacity:.4}.btn-ghost{color:var(--c-text-white);background-color:#ffffff0d;border-color:#ffffff1a}.btn-ghost:hover{background-color:#ffffff26}.btn-ghost:disabled{opacity:.5}.label{font-family:var(--font-mono);color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--sp-1-5);font-size:9px;font-weight:700;display:block}.heading{font-family:var(--font-mono);color:var(--c-text-white);text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:700}.section-header{align-items:center;gap:var(--sp-1-5);border-bottom:1px solid var(--c-border);padding-bottom:var(--sp-2);display:flex}.input-field{background-color:var(--c-surface-alt);border:1px solid var(--c-border);width:100%;color:var(--c-text-white);font-family:var(--font-mono);padding:var(--sp-3);border-radius:var(--radius-md);font-size:12px;line-height:1.625;transition:border-color .15s}.input-field:focus{border-color:var(--c-text-white);outline:none}.badge{font-family:var(--font-mono);color:var(--c-text-white);border-radius:var(--radius-sm);letter-spacing:.05em;background-color:#ffffff1a;border:1px solid #fff3;padding:2px 6px;font-size:7px;font-weight:700}.toast{bottom:var(--sp-4);right:var(--sp-4);border-radius:var(--radius-md);padding:var(--sp-4);z-index:50;align-items:center;gap:var(--sp-3);backdrop-filter:blur(12px);background-color:#0e0e12f2;border:1px solid #ffffff4d;display:flex;position:fixed;box-shadow:0 25px 50px -12px #00000040}.overlay{backdrop-filter:blur(12px);z-index:50;background-color:#000c;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.controls-bar{align-items:center;gap:var(--sp-1);border-radius:var(--radius-md);background-color:#05050766;border:1px solid #1e1e2433;flex-shrink:0;padding:2px;display:flex}.tab-btn{padding-bottom:var(--sp-1);padding-left:var(--sp-2);padding-right:var(--sp-2);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--c-text-dim);cursor:pointer;background:0 0;border-bottom:2px solid #0000;flex-shrink:0;font-size:8px;font-weight:700;transition:all .15s}.tab-btn:hover{color:var(--c-text-white)}.tab-btn.active{border-bottom-color:var(--c-text-white);color:var(--c-text-white)}.icon-btn{padding:var(--sp-1);color:var(--c-text-faint);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:color .15s;display:inline-flex}.icon-btn:hover{color:var(--c-text-white)}.icon-btn:disabled{color:var(--c-text-faint);cursor:not-allowed;opacity:.45}.icon-btn:disabled:hover{color:var(--c-text-faint)}.play-btn{border-radius:var(--radius-full);background-color:var(--c-text-white);color:#000;cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:background-color .15s;display:flex}.play-btn:hover{background-color:#e5e5e5}.track-item{padding:var(--sp-2);border-radius:var(--radius-md);border:1px solid var(--c-border);cursor:pointer;justify-content:space-between;align-items:center;gap:var(--sp-3);background-color:var(--c-surface-alt);transition:all .15s;display:flex}.track-item:hover{border-color:var(--c-border-hover);background-color:#08080c}.track-item.selected{background-color:var(--c-border);border-color:#ffffff80}.track-play-btn{border-radius:var(--radius-full);background-color:var(--c-surface);width:28px;height:28px;color:var(--c-text-dim);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.track-play-btn:hover{color:var(--c-text-white)}.track-play-btn.active{background-color:var(--c-text-white);color:#000;font-weight:700}.gauge-track{background-color:var(--c-surface-alt);border-radius:var(--radius-full);border:1px solid #1e1e1e;width:100%;height:6px;overflow:hidden}.gauge-fill{background-color:var(--c-text-white);height:100%;transition:width .3s}.progress-track{background-color:var(--c-border);border-radius:var(--radius-full);width:100%;height:4px;overflow:hidden}.progress-fill{background-color:var(--c-text-white);height:100%;transition:width 1s}.status-dot{flex-shrink:0;width:8px;height:8px;display:flex;position:relative}.status-dot .ping{border-radius:var(--radius-full);background-color:var(--c-text-white);opacity:.75;width:100%;height:100%;animation:1s cubic-bezier(0,0,.2,1) infinite ping;display:inline-flex;position:absolute}.status-dot .dot{border-radius:var(--radius-full);background-color:var(--c-text-white);width:8px;height:8px;display:inline-flex;position:relative}@media (width>=640px){.sm-flex-row{flex-direction:row}.sm-items-center{align-items:center}.sm-items-baseline{align-items:baseline}.sm-gap-3{gap:var(--sp-3)}.sm-grid-2{grid-template-columns:repeat(2,1fr)}.sm-text-sm{font-size:14px;line-height:20px}.sm-text-9xl{font-size:8rem;line-height:1}.sm-text-8xl{font-size:6rem;line-height:1}.sm-text-7xl{font-size:4.5rem;line-height:1}.sm-p-6{padding:var(--sp-6)}.sm-gap-2{gap:var(--sp-2)}}.transition-all{transition:all .15s}.transition-colors{transition:color .15s,background-color .15s,border-color .15s}.transition-none{transition:none}.opacity-0{opacity:0}.opacity-75{opacity:.75}.opacity-100,.group:hover .group-hover-visible{opacity:1}.hover-text-white:hover{color:var(--c-text-white)}.z-50{z-index:50}.shadow-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.shadow-2xl{box-shadow:0 25px 50px -12px #00000040}input[type=range].eink-slider{appearance:none;background:0 0;width:100%}input[type=range].eink-slider:focus{outline:none}input[type=range].eink-slider::-webkit-slider-runnable-track{background:#fff;border:1px solid #000;height:8px}input[type=range].eink-slider::-moz-range-track{background:#fff;border:1px solid #000;height:8px}input[type=range].eink-slider::-moz-range-progress{background:#fff}input[type=range].eink-slider::-ms-fill-lower{background:#fff}input[type=range].eink-slider::-ms-fill-upper{background:#fff}input[type=range].eink-slider::-webkit-slider-thumb{appearance:none;background:#000;border:2px solid #fff;border-radius:50%;width:24px;height:24px;margin-top:-8px}input[type=range].eink-slider::-moz-range-thumb{box-sizing:border-box;background:#000;border:2px solid #fff;border-radius:50%;width:24px;height:24px}input[type=range].eink-slider-inverted{appearance:none;background:0 0;width:100%}input[type=range].eink-slider-inverted:focus{outline:none}input[type=range].eink-slider-inverted::-webkit-slider-runnable-track{background:#000;border:1px solid #fff;height:8px}input[type=range].eink-slider-inverted::-moz-range-track{background:#000;border:1px solid #fff;height:8px}input[type=range].eink-slider-inverted::-moz-range-progress{background:#000}input[type=range].eink-slider-inverted::-ms-fill-lower{background:#000}input[type=range].eink-slider-inverted::-ms-fill-upper{background:#000}input[type=range].eink-slider-inverted::-webkit-slider-thumb{appearance:none;background:#fff;border:2px solid #000;border-radius:50%;width:24px;height:24px;margin-top:-8px}input[type=range].eink-slider-inverted::-moz-range-thumb{box-sizing:border-box;background:#fff;border:2px solid #000;border-radius:50%;width:24px;height:24px}.theme-eink,.theme-eink *{color:#000;stroke:#000;fill:currentColor;box-shadow:none;text-shadow:none;background-color:#fff;border-color:#000;transition:none;animation:none}.theme-eink button:hover,.theme-eink a.button:hover,.theme-eink .btn:hover{text-decoration:underline}.theme-eink svg,.theme-eink svg *{background-color:#0000}.theme-eink textarea,.theme-eink input[type=text]{border:1px solid #000}.theme-eink ::placeholder{color:#000;opacity:1}.theme-eink ::selection{color:#000;background-color:#0000;text-decoration:underline}.theme-eink :focus-visible{outline-offset:1px;outline:2px solid #000}.theme-eink input[type=range].eink-slider,.theme-eink input[type=range].eink-slider-inverted{background:0 0}.theme-eink input[type=range]::-webkit-slider-runnable-track{background-color:#fff;border:1px solid #000}.theme-eink input[type=range]::-moz-range-track{background-color:#fff;border:1px solid #000}.theme-eink input[type=range]::-webkit-slider-thumb{background-color:#fff;border:2px solid #000}.theme-eink input[type=range]::-moz-range-thumb{background-color:#fff;border:2px solid #000}.theme-eink input[type=range]::-ms-fill-lower{background-color:#fff}.theme-eink input[type=range]::-ms-fill-upper{background-color:#fff}.theme-eink ::-webkit-scrollbar-track{background:#fff}.theme-eink ::-webkit-scrollbar-thumb{background:#fff;border:1px solid #000}.theme-eink .tab-btn{border-bottom-width:0}.theme-eink .tab-btn.active{border-bottom:2px solid #000}.theme-eink .gauge-fill{background-color:#0000;border-right:2px solid #000}.theme-eink .track-item.selected{border-style:double;border-width:2px}.theme-eink .track-play-btn{border:1px solid #000}.theme-eink .track-play-btn.active{border:2px solid #000}.theme-eink .active-theme{border-style:double;border-width:2px}.max-w-xs{max-width:20rem}.max-w-sm{max-width:24rem}