:root { color-scheme: dark; font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif; color: #f7f7f2; background: #070a12; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 84% 0%, rgba(255, 91, 116, .24), transparent 30rem), radial-gradient(circle at 8% 80%, rgba(50, 125, 255, .18), transparent 28rem), #070a12; }
.page { width: min(980px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 48px; }
nav { display: flex; justify-content: space-between; gap: 20px; color: #8f98ae; font-size: 13px; }
nav a { color: #f7f7f2; text-decoration: none; }
.hero { padding: 84px 0 48px; }
.kicker, .label { color: #ffb25f; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
h1 { max-width: 780px; margin: 12px 0 20px; font-size: clamp(48px, 9vw, 92px); line-height: .92; letter-spacing: -.07em; }
.hero p { max-width: 650px; margin: 0; color: #b2b8c7; font-size: 18px; line-height: 1.7; }
.hero .privacy { margin-top: 12px; color: #ffcf91; font-size: 14px; }
.drop-zone { position: relative; padding: 50px 32px; border: 1px dashed rgba(255, 178, 95, .6); border-radius: 26px; background: rgba(255, 255, 255, .045); text-align: center; transition: border-color .2s, background .2s; }
.drop-zone[data-dragging="true"] { border-color: #fff; background: rgba(255, 178, 95, .12); }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-icon { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 22px; background: linear-gradient(145deg, #ffb25f, #ff446c); color: #2d1114; font-size: 32px; box-shadow: 0 20px 50px rgba(255, 91, 116, .3); }
.drop-zone h2 { margin: 0 0 8px; font-size: 30px; }
.drop-zone p { margin: 0 0 22px; color: #aeb6c7; }
.file-summary { display: grid; gap: 4px; max-width: 560px; margin: 24px auto 0; padding: 13px 16px; border-radius: 12px; background: rgba(0, 0, 0, .2); text-align: left; }
.file-summary span { color: #aeb6c7; font-size: 12px; }
.engine-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 22px 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: linear-gradient(135deg, rgba(83, 53, 120, .42), rgba(19, 26, 48, .7)); }
.engine-panel strong, .engine-panel small { display: block; margin-top: 5px; }
.engine-panel strong { font-size: 20px; }
.engine-panel small { color: #aeb6c7; font-size: 12px; }
.engine-badge { color: #ffe0aa; font-size: 13px; line-height: 1.45; text-align: right; }
.engine-badge span { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #25f2b6; box-shadow: 0 0 14px #25f2b6; }
.engine-badge small { display: inline; }
.actions { display: flex; gap: 12px; margin: 22px 0; }
button, .download { border: 0; border-radius: 10px; font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
.primary, .secondary { padding: 13px 19px; color: #fff; }
.primary { background: linear-gradient(135deg, #ffb25f, #ff466e); box-shadow: 0 12px 30px rgba(255, 91, 116, .24); }
.secondary { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #f7f7f2; }
.status { padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,.06); }
.status-head { display: flex; justify-content: space-between; gap: 20px; color: #ffd59a; }
.progress { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb25f, #ff466e); transition: width .2s; }
.notice { min-height: 22px; color: #aeb6c7; line-height: 1.6; }
.notice[data-kind="error"] { color: #ff9aa4; }
.notice[data-kind="success"] { color: #85e8c7; }
.results { margin-top: 32px; padding: 26px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.045); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.section-head h2 { margin: 8px 0 0; font-size: 34px; }
.hint { color: #aeb6c7; font-size: 12px; }
audio { width: 100%; margin: 22px 0; }
.track-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.track-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(0,0,0,.16); }
.track-card button { flex: 1; padding: 0; background: transparent; color: #f7f7f2; text-align: left; }
.track-card button[aria-pressed="true"] { color: #ffcf91; }
.track-card button span, .track-card button small { display: block; }
.track-card button small { margin-top: 4px; color: #8f98ae; font-size: 11px; }
.download { padding: 7px 9px; background: rgba(255,178,95,.16); color: #ffd9a5; font-size: 12px; text-decoration: none; white-space: nowrap; }
.debug { margin-top: 24px; color: #8f98ae; font-size: 12px; }
.debug summary { cursor: pointer; }
.debug dl { display: grid; gap: 6px; margin: 12px 0 0; }
.debug dl div { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.debug dt { color: #717a8f; }
.debug dd { margin: 0; color: #c6cbd6; text-align: right; }
footer { margin-top: 28px; color: #717a8f; font-size: 12px; line-height: 1.6; }
@media (max-width: 700px) { .page { width: calc(100% - 24px); padding-top: 22px; } .hero { padding: 62px 0 34px; } .engine-panel, .section-head { align-items: flex-start; flex-direction: column; } .engine-badge { text-align: left; } .track-list { grid-template-columns: 1fr; } .track-card { min-height: 70px; } }

.progress-detail{display:block;color:#aeb6c7;font-size:12px;margin-top:8px}
[hidden]{display:none!important}