/* OFFON design revision 2026-10-09 */
:root{--line:#4c5059;--muted:#b0b7c2;background:#303238;color:#e5e8ed;font-family:'Apple SD Gothic Neo',sans-serif}
body{background:#303238}
.preview-nav{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#25272c;color:#aab5c6;font-size:11px;border-bottom:1px solid #40444c}
.preview-nav nav{display:flex;gap:6px}.preview-nav button{height:26px;padding:0 10px;border:0;background:transparent;font-size:11px;color:#ced7e4;border-radius:3px}
header{height:66px;background:#303238;border-color:#484c55;padding:0 28px;gap:20px}
.brand img{width:164px;height:auto}.header-label{font-size:13px;color:#b8c0cd;border-color:#555b65}.filename{font-size:13px;color:#c7ced8}
button,input,select{font-family:inherit}button{font-weight:400}button:focus-visible,input:focus-visible,select:focus-visible{outline:none;border-color:#abc8f4;box-shadow:none}
.start{min-height:calc(100dvh - 66px);background:none;padding:40px 24px 60px}
.upload-card{width:620px;min-height:0;max-width:100%;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.hero-eyebrow{font-size:12px;letter-spacing:.13em;color:#9fbbe7;margin-bottom:17px}
.upload-card h1{font-size:36px;line-height:1.3;letter-spacing:-1.2px;font-weight:600;margin:0 0 14px;color:#f0f2f6}
.upload-card p{max-width:100%;font-size:16px;color:#b9c2d0;line-height:1.7;margin-bottom:0}
.hero-preview{width:460px;max-width:100%;margin:35px 0 30px;border:1px solid #535965;border-radius:6px;overflow:hidden;box-shadow:0 16px 38px #00000012}
.hero-lane{display:flex;height:62px;align-items:center;background:#91afe3;color:#2f496e}.hero-lane+.hero-lane{border-top:1px solid #434b5a;background:#e8a276;color:#70462e}
.hero-lane>span{background:#393e48;color:#e3e8ef;height:100%;width:72px;flex:none;display:grid;place-items:center;font-size:13px;font-weight:400;border-right:1px solid #535965}
.hero-lane>div{flex:1;min-width:0;height:100%;padding:0 8px;overflow:hidden}.hero-lane img{display:block;width:100%;height:100%;opacity:.95}
.upload-card .primary{height:46px;min-width:154px;font-size:15px;background:#91afe3;border-color:#91afe3;color:#243b5c;border-radius:5px}.drop-hint{font-size:13px;margin-top:14px;color:#aeb9c9}.upload-card small{font-size:12px;color:#98a4b4;margin-top:24px;line-height:1.8}.upload-limit{color:#98a4b4;display:inline;margin-left:12px}
.processing{width:600px;min-height:410px;justify-content:center}.processing .processing-file{margin:25px 0 12px;font-size:13px;color:#aeb8c8;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.processing .progress-current{font-size:24px;font-weight:500;margin-bottom:12px;line-height:1.5;color:#f0f3f8}.processing .progress-hint{font-size:14px;line-height:1.7;max-width:460px;min-height:48px;color:#b9c2d0}.processing .busy-dots{display:none}
.progress-ring{width:112px;height:112px;position:relative;display:grid;place-items:center;--pct:0}.progress-ring svg{position:absolute;inset:0;width:112px;height:112px;transform:rotate(-90deg);fill:none;stroke-width:3.5}.ring-base{stroke:#454b55}.ring-value{stroke:#91afe3;stroke-dasharray:307.876;stroke-dashoffset:calc(307.876 * (1 - var(--pct)/100));transition:stroke-dashoffset .2s linear;stroke-linecap:round}.progress-ring>span{font-size:27px;font-weight:400;font-variant-numeric:tabular-nums;color:#d5e3fb}.progress-ring.indeterminate svg{animation:ring-spin 2.2s linear infinite}.progress-ring.indeterminate>span{font-size:21px}
.progress-steps{width:100%;max-width:430px;gap:0;display:flex;margin:20px 0 26px;justify-content:space-between}.progress-steps li{font-size:12px;flex:1;gap:8px;color:#8694a8}.progress-steps .step-marker{width:23px;height:23px;font-size:11px;border-color:#647082;background:#353a43}.progress-steps li:not(:last-child)::after{top:11px;background:#4f5a6b}.progress-steps .active .step-marker{animation:none;background:#91afe3;color:#243b5c;border-color:#91afe3}.progress-steps .done .step-marker{background:#4b617f;border-color:#4b617f;color:#d7e6ff}.progress-steps .done:not(:last-child)::after{background:#6784ab}.progress-steps .active{color:#d9e6fa}.processing .quiet{font-size:13px;color:#aeb8c8}
.result:not(.comparison-dashboard){max-width:1600px;padding:20px 28px 0;min-height:calc(100dvh - 66px);display:grid;grid-template-rows:24px 72px auto auto minmax(110px,1fr);gap:0;--work-offset:0px}
.result-bar{height:24px;color:#99a8bc!important;font-size:11px!important;gap:8px}.result-bar .music-summary{margin-left:auto;font-size:13px;gap:16px;color:#c2ccda}
.result:not(.comparison-dashboard) .edit-toolbar{margin-top:0!important;padding:0 0 10px!important;align-self:end;min-height:42px;gap:10px}.edit-actions{gap:5px}.result:not(.comparison-dashboard) .edit-actions button{height:32px;width:34px;padding:0;border-color:transparent;background:transparent;color:#bdc8d8;border-radius:4px}.result:not(.comparison-dashboard) .edit-actions button:hover:enabled{background:#424956}.result:not(.comparison-dashboard) .edit-actions button:disabled{opacity:.3}.edit-actions svg{width:18px;height:18px}.edit-scope{font-size:12px!important;color:#93a1b4!important}
.result:not(.comparison-dashboard) .timeline{border:1px solid #565d68;border-radius:4px;background:#363a43;align-self:start;overflow:hidden;min-height:0;height:auto}
.result:not(.comparison-dashboard) .ruler-row{height:30px}.result:not(.comparison-dashboard) .ruler span{top:8px;font-size:11px;height:22px;color:#b5c0d0;border-color:#4e5663}.result:not(.comparison-dashboard) .ruler-label{width:176px;background:#363a43;border-color:#565d68}
.result:not(.comparison-dashboard) .stem{height:104px!important;min-height:104px!important;flex-basis:104px!important;border-top:1px solid #565d68}.result:not(.comparison-dashboard) .stem-controls{width:176px;background:#3a3f49;border-color:#565d68;padding:16px 14px}.result:not(.comparison-dashboard) .stem-name{font-size:16px;font-weight:400;color:#ecf0f6;padding-left:8px;letter-spacing:0;margin-bottom:0}.result:not(.comparison-dashboard) .power{width:28px;height:28px;top:13px;right:12px}.result:not(.comparison-dashboard) .volume{margin-top:22px;gap:7px}.result:not(.comparison-dashboard) .volume input[type=range]{flex:1;min-width:0}.result:not(.comparison-dashboard) .volume-value{font-size:12px;min-width:36px}.result:not(.comparison-dashboard) .wave{margin:0;border-radius:0}.result:not(.comparison-dashboard) .wave canvas{height:100%;margin:0}.result:not(.comparison-dashboard) .fade-handle{opacity:.55}.grid-floor{display:none}
.result:not(.comparison-dashboard) .selection-bar{padding:16px 0 0!important;border:0;gap:12px;align-items:center}.result:not(.comparison-dashboard) .selection-bar .transport{margin:0!important;padding:0!important;gap:12px;flex-basis:auto;flex-wrap:nowrap}.result:not(.comparison-dashboard) #clock{font-size:15px;min-width:144px}.result:not(.comparison-dashboard) .play-buttons{gap:6px}.result:not(.comparison-dashboard) .play-buttons button{width:38px;height:38px}.result:not(.comparison-dashboard) .play{background:#91afe3;color:#223b60}.result:not(.comparison-dashboard) .speed-settings summary{height:38px;font-size:14px;min-width:132px}.result:not(.comparison-dashboard) .pitch-control{gap:10px;font-size:14px}.result:not(.comparison-dashboard) .pitch-control button{height:36px;width:34px}.result:not(.comparison-dashboard) .selection-times{gap:8px;font-size:12px}.result:not(.comparison-dashboard) .selection-times input{height:34px;width:88px;font-size:12px}.result:not(.comparison-dashboard) .selection-times button{height:34px;padding:0 10px;font-size:12px}.result:not(.comparison-dashboard) .selection-hint{margin-top:12px!important;padding-top:10px!important;font-size:12px!important;color:#96a4b8!important;border-color:#454d5a!important}
.result:not(.comparison-dashboard) .downloads{height:78px!important;align-self:end;border-top:1px solid #4b5360;padding:14px 0 16px;gap:10px}.download-note{font-size:13px;font-weight:400}.download-note span{font-size:11px!important;color:#98a6b9!important}.export-format{font-size:13px}.export-select{min-width:150px}.result:not(.comparison-dashboard) .downloads button{height:40px;font-size:14px;border-color:#58616f;background:#404753;font-weight:400}.result:not(.comparison-dashboard) .downloads #instrumental{background:#465b7a;border-color:#637fa7;color:#e2ecfb}.result:not(.comparison-dashboard) .downloads #vocal{background:#695041;border-color:#937157;color:#f6e1d3}.result:not(.comparison-dashboard) .downloads #mix{background:#404753;border-color:#58616f}
@keyframes ring-spin{to{transform:rotate(270deg)}}
@media(max-width:1100px){.result:not(.comparison-dashboard) .selection-times{width:100%;margin-left:0}.result:not(.comparison-dashboard) .selection-bar .transport{flex-wrap:wrap}.result:not(.comparison-dashboard){grid-template-rows:24px 64px auto auto minmax(80px,1fr)}}
@media(max-width:650px){.preview-nav{padding:0 12px;font-size:10px}.preview-nav>span{max-width:140px}.preview-nav button{padding:0 6px}header{padding:0 16px;height:60px;gap:12px}.brand img{width:132px}.header-label{font-size:10px;padding-left:12px}.filename{display:none}.start{min-height:calc(100dvh - 60px);padding:35px 22px}.upload-card h1{font-size:28px}.upload-card p{font-size:14px}.hero-preview{margin:28px 0}.hero-lane{height:56px}.upload-limit{display:block;margin:0}.processing .progress-current{font-size:23px}.result:not(.comparison-dashboard){padding:14px 14px 0;min-height:calc(100dvh - 60px);grid-template-rows:auto 56px auto auto minmax(90px,1fr)}.result:not(.comparison-dashboard) .result-bar{font-size:10px!important;flex-wrap:wrap;height:auto;gap:6px}.result-bar .music-summary{font-size:11px;gap:8px}.result:not(.comparison-dashboard) .stem-controls,.result:not(.comparison-dashboard) .ruler-label{width:120px}.result:not(.comparison-dashboard) .stem-controls{padding:15px 10px}.result:not(.comparison-dashboard) .stem-name{padding-left:5px;font-size:15px}.result:not(.comparison-dashboard) .power{right:8px;width:24px;height:24px}.result:not(.comparison-dashboard) .volume{gap:3px}.result:not(.comparison-dashboard) .volume-value{min-width:30px;font-size:11px}.result:not(.comparison-dashboard) .selection-bar .transport{flex-wrap:wrap;gap:10px}.result:not(.comparison-dashboard) #clock{min-width:140px}.result:not(.comparison-dashboard) .selection-times{flex-wrap:wrap;gap:6px}.result:not(.comparison-dashboard) .selection-times input{width:78px}.result:not(.comparison-dashboard) .downloads{flex-wrap:wrap;height:auto!important;padding-bottom:16px}.download-note{width:100%}.result:not(.comparison-dashboard) .downloads button{padding:0 12px}.export-select{min-width:140px}.export-format{margin-left:0}}
@media(prefers-reduced-motion:reduce){.progress-ring svg{animation:none!important}.ring-value{transition:none}}

.result:not(.comparison-dashboard) .music-summary{font-size:13px;color:#c3cddd;font-weight:400}
@media(max-width:650px){
 .result:not(.comparison-dashboard) .selection-bar .transport{flex:1 1 100%;width:100%;min-width:0;column-gap:10px;row-gap:12px}
 .result:not(.comparison-dashboard) .stem-name{padding-left:5px;padding-right:26px;margin:0;max-width:100%}
 .result:not(.comparison-dashboard) .power{left:auto;right:8px;top:13px}
 .result:not(.comparison-dashboard) .volume{margin-top:24px}
 .result:not(.comparison-dashboard) .speed-settings{margin-left:0;padding-left:0;border-left:0}
 .result:not(.comparison-dashboard) .speed-panel{left:0;right:auto;width:270px;max-width:calc(100vw - 40px)}
 .result:not(.comparison-dashboard) .ruler span:nth-child(5){display:none}
 .result:not(.comparison-dashboard) .edit-toolbar{flex-wrap:nowrap}
 .result:not(.comparison-dashboard) .edit-scope{font-size:10px!important}
 .result:not(.comparison-dashboard) .selection-times{justify-content:flex-start}
 .result:not(.comparison-dashboard) .music-summary{font-size:11px}
 .result:not(.comparison-dashboard) .edit-actions{display:flex;flex:none;flex-wrap:nowrap;gap:3px}
 .result:not(.comparison-dashboard) .edit-scope{flex:0 0 auto;margin-left:auto}
}


.hero-lane>div{display:flex;align-items:center;justify-content:space-between;padding:0 10px;flex:1;min-width:0;height:100%;overflow:hidden}
.hero-lane i{display:block;width:2px;min-width:2px;background:currentColor;opacity:.9}
.home-confirm{position:fixed;inset:66px 0 0;width:100%;max-width:none;height:calc(100dvh - 66px);max-height:none;margin:0;padding:32px 24px;border:0;background:#303238;color:#edf0f5;overflow:auto}
.home-confirm::backdrop{background:#303238e8}
.home-confirm-content{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:48px}
.home-confirm h2{font-size:28px;font-weight:500;letter-spacing:-.7px;line-height:1.4;margin:0 0 25px}
.home-confirm p{max-width:520px;font-size:16px;line-height:1.8;color:#bdc6d4;margin:0 0 42px}
.home-confirm-actions{display:flex;justify-content:center;align-items:center;gap:15px;flex-wrap:wrap}
.home-confirm-actions button{height:44px;font-size:14px;padding:0 21px}
.home-confirm-accept{background:#e87976;color:#24282f;border-color:#e87976;border-radius:22px}
.home-confirm-cancel{color:#dce3ed}
.home-confirm-actions button:focus-visible{outline:2px solid #b8cff2;outline-offset:4px}
@media(max-width:650px){.home-confirm{inset:60px 0 0;height:calc(100dvh - 60px);padding:24px}.home-confirm h2{font-size:24px}.home-confirm p{font-size:15px}.home-confirm-content{padding-bottom:24px}}

.how-it-works{max-width:1040px;margin:0 auto;padding:56px 28px 72px;border-top:1px solid #484c55}
.how-it-works h2{margin:0 0 36px;font-size:24px;font-weight:500;color:#e9edf4;text-align:center;letter-spacing:-.5px}
.how-it-works ol{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;list-style:none;padding:0;margin:0}
.how-it-works li{text-align:center}.how-it-works li>span{font-size:12px;color:#9fbbe7;letter-spacing:.08em}
.how-it-works h3{margin:12px 0 10px;font-size:17px;font-weight:400;color:#e1e7ef}
.how-it-works p{margin:0;font-size:14px;line-height:1.8;color:#aeb9c9}
@media(max-width:650px){
 .result:not(.comparison-dashboard) .edit-toolbar{flex-wrap:nowrap;padding-bottom:10px!important;min-height:44px}
 .result:not(.comparison-dashboard){grid-template-rows:auto 56px auto auto minmax(90px,1fr)}
 .how-it-works{margin:0 22px;padding:40px 0 48px}.how-it-works h2{font-size:22px;margin-bottom:30px}
 .how-it-works ol{grid-template-columns:1fr;gap:28px}
}