@font-face{font-family:Round;src:url('./fonts/NanumSquareRoundR.woff2') format('woff2');font-weight:400 500;font-display:swap}
:root{font-family:Round,'Apple SD Gothic Neo',sans-serif;font-size:13px;color:#303638;background:#c9ccca;--line:#adb3b0;--muted:#68726e;--dark:#363c3e}*{box-sizing:border-box}body{margin:0}button,input{font:inherit;color:inherit}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #adb4b0;border-radius:5px;background:#d8dcd8;padding:0 16px;height:36px;cursor:pointer}button:hover{filter:brightness(1.06)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #4a7466;outline-offset:4px}svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.primary{background:#333b3b;color:#f0f3ef;border-color:#333b3b}.quiet{background:transparent;border-color:transparent}.mint{background:#92cbb5;border-color:#7aaf9a}.secondary{background:#d3d8d3}header{display:flex;align-items:center;gap:22px;height:64px;padding:0 28px;border-bottom:1px solid var(--line);background:#d3d6d3}.brand{text-decoration:none;color:#2d3335;font:bold 24px Arial,sans-serif;letter-spacing:-1.2px;display:flex;align-items:center;gap:4px}.brand-dot{width:5px;height:5px;background:#e89386;border-radius:50%;align-self:flex-end;margin-bottom:5px}.header-label{font-size:12px;padding-left:22px;border-left:1px solid #b4bab6;color:#626d68}.filename{margin-left:auto;font-size:12px;color:#657069;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40%}main{min-height:calc(100dvh - 108px)}.start{display:flex;align-items:center;justify-content:center;background-image:linear-gradient(90deg,#77827a09 1px,transparent 1px),linear-gradient(#77827a09 1px,transparent 1px);background-size:70px 70px;padding:40px 20px}.upload-card{width:450px;min-height:360px;text-align:center;border:1px dashed #a4b0a7;border-radius:10px;background:#d7dbd6b3;padding:40px 35px;display:flex;align-items:center;flex-direction:column}.empty-logo{font:bold 29px Arial,sans-serif;letter-spacing:-1.5px;display:flex;gap:4px;align-items:flex-end}.empty-logo span{width:6px;height:6px;background:#e49183;border-radius:50%;margin-bottom:6px}.upload-symbol{margin:32px 0 12px;color:#7b8980}.upload-symbol svg{width:25px;height:25px}h1{font-size:15px;font-weight:500;margin:8px 0 10px}p{font-size:12px;color:#647169;line-height:1.7;margin:0 0 23px;max-width:340px}small{font-size:11px;color:#7c8880;margin-top:17px}.error p{color:#895d52}.mini-mark{margin:25px 0 25px}.progress{width:100%;height:4px;border-radius:4px;background:#b7c2b7;overflow:hidden;margin:15px 0 25px}.progress span{display:block;width:35%;height:100%;background:#849b8a;animation:progress 1.5s ease-in-out infinite alternate}@keyframes progress{from{transform:translateX(-100%)}to{transform:translateX(300%)}}.result{padding:30px 36px 50px;max-width:1600px;margin:auto}.result-bar{height:36px;display:flex;align-items:center;gap:8px;font-size:11px;color:#657169}.status-dot{width:5px;height:5px;background:#598270;border-radius:50%}.duration{margin-left:auto;font-family:ui-monospace,monospace}.timeline{border:1px solid #858e88;border-radius:6px;overflow:hidden;background:var(--dark)}.ruler-row{display:flex;height:48px;color:#b6c0ba;font-size:10px}.ruler-label{width:170px;flex:none;padding:19px 17px;border-right:1px solid #5e6761;color:#9ea9a2}.ruler{flex:1;position:relative;margin:0 20px}.ruler span{position:absolute;top:16px;border-left:1px solid #748078;height:32px;padding-left:6px;font-family:ui-monospace,monospace}.ruler span:last-child{transform:translateX(-100%);border-left:0;padding:0}.stem{display:flex;min-height:174px;border-top:1px solid #58615b}.stem-controls{width:170px;flex:none;padding:25px 17px;background:#434a4b;border-right:1px solid #616b63;color:#e0e6de}.stem-name{display:flex;align-items:center;gap:14px;font-size:13px;margin-bottom:14px}.stem-name span{font-size:10px;color:#a6b0a8}.power{padding:0;width:27px;height:26px;background:#555f5c;border:0;color:#a1aba4}.power.on{background:var(--color);color:#35463c}.volume{display:flex;align-items:center;gap:8px;margin-top:13px}.volume input[type="range"]{width:84px;accent-color:var(--color)}output{font-size:10px;min-width:33px;color:#bac6bc}.wave{margin:17px 20px;flex:1;min-width:0;position:relative;background:var(--color);border-radius:4px;overflow:hidden}.clip-label{position:absolute;top:10px;left:12px;font-size:11px;color:#394a3f;pointer-events:none}.wave canvas{display:block;width:100%;height:115px;margin-top:23px;cursor:crosshair}.playhead{position:absolute;top:0;bottom:0;width:1px;background:#f1f5eb;pointer-events:none;box-shadow:0 0 2px #263d30}.grid-floor{height:110px;background-image:linear-gradient(90deg,#ffffff06 1px,transparent 1px),linear-gradient(#ffffff06 1px,transparent 1px);background-size:70px 55px;margin-left:170px}.transport{height:74px;display:flex;align-items:center;gap:24px;padding:0 20px;border-bottom:1px solid #acb5ac}.play-buttons{display:flex;gap:10px;align-items:center}.icon{padding:0;width:32px}.play{width:38px;height:38px;border-radius:50%;background:#363f3e;color:#e6ebe2;border:0}.play svg{width:18px;height:18px}.play svg path{fill:currentColor}#clock{font-size:11px;font-family:ui-monospace,monospace;white-space:nowrap}#seek{flex:1;min-width:40px;accent-color:#758a7b}.downloads{display:flex;align-items:center;gap:10px;padding:24px 20px}.download-note{margin-right:auto;font-size:12px}.download-note span{display:block;color:#768178;font-size:10px;margin-top:6px}footer{height:44px;border-top:1px solid #b0b9b0;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;color:#7b857e}footer>span:first-child{letter-spacing:1px}.dragging main{outline:2px dashed #729a81;outline-offset:-10px}#toast{display:none}@media(max-width:650px){header{padding:0 18px;gap:14px}.brand{font-size:21px}.header-label{padding-left:14px;font-size:11px}.filename{display:none}header #new{margin-left:auto;font-size:11px}.result{padding:16px 12px 30px}.result-bar{font-size:10px;height:40px}.ruler-label,.stem-controls{width:102px}.stem-controls{padding:23px 10px}.stem-name{gap:7px}.volume{flex-wrap:wrap;gap:5px}.volume input[type="range"]{width:77px}.stem{min-height:164px}.wave{margin:14px 10px}.wave canvas{height:112px}.ruler{margin:0 10px}.ruler span:nth-child(even){display:none}.grid-floor{margin-left:102px;height:80px}.transport{padding:0 5px;gap:10px;height:65px}.play-buttons{gap:3px}#clock{font-size:10px}.downloads{padding:20px 0;flex-wrap:wrap}.download-note{flex-basis:100%;margin-bottom:5px}.downloads button{flex:1;font-size:12px}footer{padding:0 16px;font-size:9px}.upload-card{width:100%;padding:30px 22px}.start{min-height:calc(100dvh - 108px)}}@media(prefers-reduced-motion:reduce){.progress span{animation:none;width:100%;opacity:.6}}

.download{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #adb4b0;border-radius:5px;padding:0 16px;height:36px;color:inherit;text-decoration:none;white-space:nowrap}.download:hover{filter:brightness(1.06)}.download.mint{border-color:#7aaf9a}@media(max-width:650px){.downloads .download{flex:1;font-size:12px}}

/* Compact editing controls share the existing two-track timeline. */
button:disabled{opacity:.38;cursor:default;filter:none}
.edit-toolbar{display:flex;align-items:center;gap:14px;padding:9px 0 14px}
.edit-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.edit-actions button{height:30px;padding:0 11px;font-size:11px}
.tool-divider{width:1px;height:19px;background:#aab3ac;margin:0 3px}
.edit-scope{margin-left:auto;color:#6b766e;font-size:10px;white-space:nowrap}
.selection{position:absolute;top:0;bottom:0;background:#f8f5d746;border-left:2px solid #fff9d9;border-right:2px solid #fff9d9;pointer-events:none}
.selection[hidden]{display:none}
.wave canvas{touch-action:none}
.selection-bar{display:flex;align-items:center;gap:12px;padding:12px 3px;border-bottom:1px solid #acb5ac;font-size:10px;flex-wrap:wrap}
.selection-hint{color:#6b766e;margin-right:auto}
.selection-times{display:flex;align-items:center;gap:7px}
.selection-times label{display:flex;align-items:center;gap:7px;color:#626d67}
.selection-times input{width:91px;background:#d7dcd7;border:1px solid #a8b3aa;border-radius:4px;padding:6px;font:11px ui-monospace,monospace}
.selection-bar button{height:28px;font-size:10px;padding:0 6px}
.grid-floor{height:65px}
.downloads{flex-wrap:wrap}
.downloads button{font-size:12px}
#toast.visible{display:block;position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 30px);width:max-content;padding:11px 16px;background:#303a36;color:#eef2ed;border:1px solid #67786c;border-radius:6px;font-size:12px;line-height:1.6;z-index:10;box-shadow:0 3px 16px #25372b26}
@media(max-width:650px){.edit-toolbar{align-items:flex-start;flex-wrap:wrap;gap:8px}.edit-scope{flex-basis:100%;margin-left:0}.edit-actions button{padding:0 8px;font-size:10px}.selection-bar{gap:8px}.selection-hint{flex-basis:100%}.selection-times{flex:1;gap:5px}.selection-times label{gap:4px}.selection-times input{width:80px}.selection-bar button{padding:0 4px}.downloads button{flex:1}.grid-floor{height:40px}}
.export-format{display:flex;align-items:center;gap:7px;color:#657169;font-size:11px}
.export-format select{font:inherit;color:#303638;background:#d8dcd8;border:1px solid #adb4b0;border-radius:5px;height:36px;padding:0 8px}
@media(max-width:650px){.export-format{flex-basis:100%;margin-bottom:3px}}

.compare-toolbar{padding:4px 0 14px}.compare-models{display:flex;gap:8px;flex-wrap:wrap}.compare-models button{flex:1;height:44px;justify-content:space-between;min-width:175px}.compare-models small{margin:0;font-size:10px}.compare-toolbar button[aria-pressed="true"]{background:#92cbb5;border-color:#679a84}.compare-roles{display:flex;align-items:center;gap:7px;margin-top:10px;flex-wrap:wrap}.compare-roles button{height:29px;font-size:11px}.compare-roles>span{margin-left:auto;color:#69756f;font-size:10px}.comparison-dashboard .stem{min-height:86px}.comparison-dashboard .stem-controls{width:220px;padding:10px 13px;position:relative}.comparison-dashboard .stem-name{font-size:11px;gap:8px;margin-bottom:8px;padding-right:30px}.comparison-dashboard .power{position:absolute;right:12px;top:10px}.comparison-dashboard .volume{margin-top:4px}.comparison-dashboard .volume input[type="range"]{width:145px}.comparison-dashboard .wave{margin:7px 12px}.comparison-dashboard .clip-label{top:5px;font-size:10px}.comparison-dashboard .wave canvas{height:48px;margin-top:22px}.comparison-dashboard .ruler-label{width:220px}.comparison-dashboard .ruler-row{height:32px}.comparison-dashboard .ruler span{top:9px;height:23px}.comparison-dashboard .ruler-label{padding-top:10px}.comparison-dashboard .grid-floor{margin-left:220px;height:20px}.comparison-dashboard .stem.muted .wave{opacity:.42}.comparison-dashboard .edit-toolbar{display:none}.comparison-dashboard .selection-bar{display:none}.comparison-dashboard .transport{position:sticky;bottom:0;background:#c9ccca;z-index:3;box-shadow:0 -2px 8px #30363815}.comparison-dashboard .downloads .export-format option[value="wav"]{display:none}@media(max-width:650px){.compare-models button{min-width:calc(50% - 8px);height:40px;padding:0 8px;font-size:10px}.compare-roles>span{flex-basis:100%}.comparison-dashboard .stem-controls,.comparison-dashboard .ruler-label{width:155px}.comparison-dashboard .volume input[type="range"]{width:95px}.comparison-dashboard .stem-name{font-size:10px;gap:3px}.comparison-dashboard .grid-floor{margin-left:155px}}
.comparison-dashboard.result{display:flex;flex-direction:column}.comparison-dashboard .compare-toolbar{order:-3}.comparison-dashboard .result-bar{order:-2}.comparison-dashboard .transport{order:-1;top:0;bottom:auto;flex:none;margin-bottom:12px;border-top:1px solid #acb5ac}.comparison-dashboard .downloads{order:1}

.progress-steps{list-style:none;display:flex;padding:0;margin:18px 0 28px;width:100%;gap:8px}.progress-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:10px;color:#859087;line-height:1.6}.step-marker{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;border:1px solid #aeb9af;background:#dce1da;font-size:10px}.progress-steps .done{color:#536e5c}.progress-steps .done .step-marker{background:#9fbeaa;border-color:#9fbeaa}.progress-steps .active{color:#344c3e}.progress-steps .active .step-marker{border-color:#718e79;background:#a7bca9}.progress-current{display:flex;align-items:baseline;justify-content:center;gap:2px}.busy-dots{display:inline-flex;width:13px;gap:1px}.busy-dots i{font-style:normal;animation:busy-dot 1.4s ease-in-out infinite;opacity:.25}.busy-dots i:nth-child(2){animation-delay:.2s}.busy-dots i:nth-child(3){animation-delay:.4s}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes busy-dot{0%,70%,100%{opacity:.25}35%{opacity:1}}@media(prefers-reduced-motion:reduce){.busy-dots i{animation:none;opacity:1}}

/* Keep the desktop editor within the viewport; small screens retain natural scrolling. */
.transport-shortcut button:focus-visible,.transport-shortcut a:focus-visible,.transport-shortcut input[type="range"]:focus-visible{outline:none}
@media(min-width:900px){
 header{height:56px;padding:0 28px}
 footer{height:30px}
 main{min-height:calc(100dvh - 86px)}
 .result:not(.comparison-dashboard){height:max(514px,calc(100dvh - 86px));min-height:0;padding:12px 28px;display:grid;grid-template-rows:28px 38px minmax(180px,1fr) 46px 52px 60px auto;width:100%}
 .result:not(.comparison-dashboard) .result-bar{height:auto}
 .result:not(.comparison-dashboard) .edit-toolbar{padding:0 0 8px}
 .result:not(.comparison-dashboard) .timeline{min-height:0;display:flex;flex-direction:column}
 .result:not(.comparison-dashboard) .ruler-row{height:32px;flex:none}
 .result:not(.comparison-dashboard) .ruler-label{padding:10px 17px}
 .result:not(.comparison-dashboard) .ruler span{top:9px;height:23px}
 .result:not(.comparison-dashboard) .stem{flex:1;min-height:0}
 .result:not(.comparison-dashboard) .stem-controls{padding:12px 17px;position:relative}
 .result:not(.comparison-dashboard) .stem-name{margin-bottom:20px;padding-right:30px}
 .result:not(.comparison-dashboard) .power{position:absolute;right:17px;top:9px}
 .result:not(.comparison-dashboard) .volume{margin-top:0}
 .result:not(.comparison-dashboard) .wave{margin:9px 20px}
 .result:not(.comparison-dashboard) .clip-label{top:7px}
 .result:not(.comparison-dashboard) .wave canvas{height:calc(100% - 24px);margin-top:24px}
 .result:not(.comparison-dashboard) .grid-floor{height:12px;flex:none}
 .result:not(.comparison-dashboard) .selection-bar{padding:8px 3px;flex-wrap:nowrap}
 .result:not(.comparison-dashboard) .transport{height:auto;padding:0 8px}
 .result:not(.comparison-dashboard) .downloads{padding:10px 8px;flex-wrap:nowrap}
 .result:not(.comparison-dashboard) .downloads button{padding:0 12px;white-space:nowrap}
}

.volume-value{display:flex;align-items:center;gap:2px;color:#bac6bc;font-size:10px}.volume-percent{width:35px;min-width:0;padding:3px 2px;text-align:right;border:1px solid #66726b;border-radius:3px;background:#394240;appearance:textfield;-moz-appearance:textfield}.volume-percent::-webkit-inner-spin-button,.volume-percent::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.volume-display{height:22px;width:43px;padding:0;gap:0;border:0;background:transparent;color:#bac6bc;font-size:10px;justify-content:flex-end}.volume-entry{display:flex;align-items:center;gap:2px}.volume-display[hidden],.volume-entry[hidden]{display:none}

.music-summary{display:flex;gap:16px;margin-left:14px;font-size:10px;color:#68766e}.speed-control{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:11px;color:#637168}.speed-control select{font:inherit;color:#35453d;background:#d8dcd8;border:1px solid #aeb8af;border-radius:4px;padding:4px 7px}.speed-status{font-size:10px;color:#69776d;white-space:nowrap}.speed-status:empty{display:none}@media(max-width:650px){.music-summary{gap:8px;margin-left:4px;font-size:9px}.transport{flex-wrap:wrap;height:auto;min-height:85px;gap:9px;padding:8px 5px}.speed-control{font-size:10px}.speed-status{flex-basis:100%}.transport #seek{flex-basis:100%}.download-note span{font-size:9px}}

.fade-guide{position:absolute;top:0;bottom:0;pointer-events:none;border-bottom:1px solid #ffffff8c;background:#ffffff0c;z-index:1}.fade-guide-in{left:0;clip-path:polygon(0 0,0 100%,100% 0);background:linear-gradient(to bottom right,#ffffff40 49.5%,#ffffffb0 50%,transparent 50.5%)}.fade-guide-out{right:0;clip-path:polygon(0 0,100% 100%,100% 0);background:linear-gradient(to top right,transparent 49.5%,#ffffffb0 50%,#ffffff40 50.5%)}.fade-guide[hidden]{display:none}@media(min-width:900px){.result:not(.comparison-dashboard) .transport{gap:14px}}@media(max-width:899px){.transport{flex-wrap:wrap;height:auto;min-height:86px;padding:8px 5px;gap:10px}.transport #seek{flex-basis:100%}}

.fade-handle{position:absolute;top:0;width:22px;height:22px;padding:0;border:0;background:transparent;border-radius:0;transform:translateX(-50%);z-index:4;cursor:ew-resize;touch-action:none;left:0;min-width:0;max-width:22px}.fade-grip{display:block;width:8px;height:8px;background:#eef2e6;border:1px solid #53695e;border-radius:1px;box-shadow:0 1px 2px #283c3440}.fade-handle:hover .fade-grip,.fade-handle.dragging .fade-grip{background:#fff;transform:scale(1.15)}.fade-tooltip{display:none;position:absolute;top:22px;left:50%;transform:translateX(-50%);padding:3px 5px;background:#34443e;color:#f2f5ec;border-radius:3px;font-size:10px;white-space:nowrap;pointer-events:none}.fade-handle:hover .fade-tooltip,.fade-handle:focus-visible .fade-tooltip,.fade-handle.dragging .fade-tooltip{display:block}.fade-handle[data-fade="in"] .fade-tooltip{left:0;transform:none}.fade-handle[data-fade="out"] .fade-tooltip{left:auto;right:0;transform:none}.fade-handle:disabled{opacity:.4;cursor:default}