[hidden] { display: none !important; }
:root {
  --bg: #0e0e10;
  --panel: #17171b;
  --panel2: #1f1f25;
  --line: #2b2b33;
  --text: #ecebe8;
  --muted: #8f8e96;
  --accent: #ff5b3a;
  --accent2: #ffb23f;
  --ok: #49d39a;
  --radius: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 14px/1.55 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; min-height: 100vh; }
button, select, input { font: inherit; color: inherit; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand h1 { margin: 0; font-size: 22px; letter-spacing: .12em; font-weight: 800; }
.brand p { margin: 0; color: var(--muted); font-size: 13px; }
.logo { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 34px; height: 34px; }
.logo i { border-radius: 50%; background: #55545c; }
.logo i:nth-child(1) { background: var(--accent); animation: dot 3.2s infinite; }
.logo i:nth-child(2) { animation: dot2 3.2s infinite .8s; }
.logo i:nth-child(3) { animation: dot3 3.2s infinite 1.6s; }
.logo i:nth-child(4) { animation: dot4 3.2s infinite 2.4s; }
@keyframes dot { 0%,100% { background: var(--accent); } 50% { background: #55545c; } }
@keyframes dot2 { 0%,40% { background: #55545c; } 50%,90% { background: var(--accent2); } }
@keyframes dot3 { 0%,40% { background: #55545c; } 50%,90% { background: #4fb8ff; } }
@keyframes dot4 { 0%,40% { background: #55545c; } 50%,90% { background: var(--ok); } }
.privacy { color: var(--muted); font-size: 12px; border: 1px solid var(--line); padding: 5px 10px; border-radius: 99px; }

.layout { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 24px; padding: 22px 28px; align-items: start; }
.panel { display: flex; flex-direction: column; gap: 14px; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 14px; }
.step h2 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.step h2 b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line); font-size: 12px; color: var(--accent2); }

.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed #3a3a44; border-radius: 10px; padding: 22px 12px; cursor: pointer; text-align: center; transition: .15s; background: #131317; }
.drop.small { padding: 14px 12px; }
.drop:hover, .drop.drag { border-color: var(--accent); background: #1b1514; }
.drop.has { border-style: solid; border-color: #3f3f49; }
.drop-main { font-weight: 600; }
.drop-sub { color: var(--muted); font-size: 12px; word-break: break-all; }

.row { margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row.two label { display: flex; flex-direction: column; gap: 6px; }
.row.checks { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.row > label { display: flex; justify-content: space-between; color: #c9c8cf; }
.row.two > label { color: #c9c8cf; }
output { color: var(--accent2); font-variant-numeric: tabular-nums; }
select, input[type=number] { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; width: 100%; }
select:focus, input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=range] { width: 100%; accent-color: var(--accent); }
.check { display: inline-flex !important; align-items: center; gap: 7px; cursor: pointer; color: #c9c8cf; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.check.small { font-size: 12px; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: #111114; padding: 4px; border-radius: 10px; border: 1px solid var(--line); }
.seg button { background: none; border: 0; border-radius: 7px; padding: 8px 6px; cursor: pointer; color: var(--muted); display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.seg button small { font-size: 11px; opacity: .75; }
.seg button.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px #3a3a44; }
.seg.small button { padding: 5px 4px; font-size: 12px; }

.btn { margin-top: 12px; border: 1px solid #3a3a44; background: var(--panel2); border-radius: 9px; padding: 9px 14px; cursor: pointer; width: 100%; font-weight: 600; text-decoration: none; text-align: center; display: inline-block; }
.btn:hover:not(:disabled) { border-color: #55555f; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, var(--accent), #ff7d3a); border-color: transparent; color: #1a0d08; font-size: 15px; padding: 11px 14px; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.small { width: auto; padding: 5px 10px; font-size: 12px; margin-top: 8px; }

.status { margin-top: 10px; color: var(--muted); font-size: 12.5px; min-height: 1em; }
.status.busy::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 2px solid var(--accent2); border-right-color: transparent; border-radius: 50%; margin-right: 7px; vertical-align: -1px; animation: spin .8s linear infinite; }
.status.err { color: #ff7a6a; }
@keyframes spin { to { transform: rotate(360deg); } }
.sub { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sub-title { display: block; color: #c9c8cf; margin-bottom: 6px; }
.hint { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.summary { margin-top: 12px; background: #111114; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; color: #c9c8cf; font-size: 13px; }
.summary b { color: var(--accent2); font-weight: 600; }

.progress { margin-top: 12px; }
.bar { height: 8px; background: #111114; border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #777, var(--accent), var(--accent2)); transition: width .2s; }
.prog-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.result { margin-top: 12px; }
.result video { width: 100%; max-height: 420px; background: #000; border-radius: 9px; }

.stage { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.screen { position: relative; background: repeating-conic-gradient(#141418 0 25%, #18181d 0 50%) 0 0 / 22px 22px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; height: min(70vh, 760px); overflow: hidden; }
#preview { max-width: 100%; max-height: 100%; display: block; box-shadow: 0 10px 40px rgba(0,0,0,.55); cursor: default; }
#preview.clickable { cursor: crosshair; }
.empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); background: var(--bg); }
.empty-art { width: 120px; height: 120px; border-radius: 18px; background:
  radial-gradient(circle at 30% 35%, var(--accent) 0 18%, transparent 19%),
  radial-gradient(circle at 70% 30%, #4fb8ff 0 14%, transparent 15%),
  radial-gradient(circle at 60% 72%, var(--ok) 0 20%, transparent 21%),
  radial-gradient(circle at 28% 75%, var(--accent2) 0 12%, transparent 13%),
  #26262d; filter: saturate(.25); animation: wake 4s ease-in-out infinite; }
@keyframes wake { 0%,100% { filter: saturate(.1); } 50% { filter: saturate(1.2); } }
.transport { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; }
.play { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); cursor: pointer; display: grid; place-items: center; flex: none; }
.play:disabled { opacity: .4; cursor: not-allowed; }
.play svg { width: 20px; height: 20px; fill: #1a0d08; }
#scrub { flex: 1; }
.time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.wave-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.wave-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.wave-tools .seg { width: 180px; }
.wave-tools .btn.small { margin-top: 0; }
.legend { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; }
.lg-beat { background: #6d6d78; } .lg-used { background: var(--accent2); } .lg-range { background: rgba(255,91,58,.35); }
#wave { width: 100%; height: 96px; display: block; cursor: pointer; border-radius: 6px; background: #111114; }

.foot { color: var(--muted); font-size: 12px; text-align: center; padding: 10px 0 26px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; padding: 14px 16px; }
  .top { padding: 14px 16px; }
  .stage { position: static; order: -1; }
  .screen { height: 56vh; }
  .legend { margin-left: 0; }
}