@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #090a0d;
  --surface: #121419;
  --surface-2: #181b21;
  --surface-3: #20242b;
  --text: #f5f6f8;
  --muted: #9097a2;
  --line: #2b2f38;
  --accent: #75e8d1;
  --accent-soft: rgba(117, 232, 209, 0.11);
  --blue: #8cb4ff;
  --danger: #ff858d;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 50% -20%, #212631 0, transparent 42%), var(--bg);
  color: var(--text);
  font-family: "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", sans-serif;
}

button,
input,
select {
  font: inherit;
}

button,
a,
label,
input,
select {
  outline: none;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
}

svg {
  flex: 0 0 auto;
}

.audio-topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  height: 68px;
  align-items: center;
  gap: 28px;
  padding: 0 max(24px, calc((100% - 1320px) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 10, 13, 0.84);
  backdrop-filter: blur(20px);
}

.audio-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}

.audio-brand-mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  background: var(--accent);
  color: #08100f;
  font-size: 0.78rem;
  font-weight: 800;
}

.audio-brand > span:last-child {
  display: grid;
  gap: 1px;
}

.audio-brand b {
  font-size: 0.84rem;
  letter-spacing: -0.01em;
}

.audio-brand small {
  color: var(--muted);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.privacy-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.67rem;
}

.mode-switch {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.mode-switch button {
  min-height: 31px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
}

.mode-switch button.is-active {
  background: var(--accent);
  color: #07110f;
}

.simple-app {
  width: min(900px, calc(100% - 36px));
  margin: 0 auto;
  padding: 56px 0 80px;
}

.simple-hero {
  margin-bottom: 28px;
  text-align: center;
}

.simple-kicker {
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.simple-hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(2rem, 5vw, 3.3rem);
  letter-spacing: -0.055em;
}

.simple-hero p {
  max-width: 610px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.75;
}

.simple-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(18, 20, 25, 0.94);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.3);
}

.simple-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 18px 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
  list-style: none;
}

.simple-steps li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #626975;
  font-size: 0.64rem;
  font-weight: 700;
  min-width: 0;
}

.simple-steps li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  left: calc(50% + 37px);
  width: calc(100% - 74px);
  height: 1px;
  background: var(--line);
  content: "";
}

.simple-steps b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #383d47;
  border-radius: 50%;
  font-size: 0.58rem;
}

.simple-steps li.is-active,
.simple-steps li.is-done {
  color: var(--text);
}

.simple-steps li.is-active b,
.simple-steps li.is-done b {
  border-color: var(--accent);
  background: var(--accent);
  color: #07110f;
}

.simple-step {
  min-height: 520px;
  padding: 48px 56px 38px;
}

.simple-step > header {
  margin-bottom: 30px;
}

.simple-step > header > span {
  color: var(--accent);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.simple-step h2 {
  margin: 7px 0 5px;
  font-size: clamp(1.45rem, 4vw, 2.2rem);
  letter-spacing: -0.04em;
}

.simple-step header p,
.simple-message,
.simple-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.6;
}

.goal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.goal-card {
  position: relative;
  display: grid;
  min-height: 205px;
  align-content: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease;
}

.goal-card:hover { transform: translateY(-2px); }
.goal-card.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.goal-card i { color: var(--accent); font-size: 0.58rem; font-style: normal; font-weight: 800; }
.goal-card strong { margin-top: 30px; font-size: 1.05rem; }
.goal-card small { margin-top: 6px; color: var(--muted); font-size: 0.65rem; }
.goal-card em { margin-top: 22px; color: var(--accent); font-size: 0.68rem; font-style: normal; font-weight: 700; }

.simple-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
}

.simple-actions--end { justify-content: flex-end; }
.simple-primary, .simple-download, .simple-secondary, .simple-back, .simple-tune button {
  min-height: 45px;
  border-radius: 11px;
  font-size: 0.69rem;
  font-weight: 800;
}
.simple-primary { padding: 0 19px; border: 0; background: var(--accent); color: #07110f; }
.simple-primary:disabled { opacity: 0.4; }
.simple-back { padding: 0; border: 0; background: transparent; color: var(--muted); }
.simple-secondary { padding: 0 16px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }

.simple-upload {
  display: grid;
  min-height: 245px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #4b535f;
  border-radius: 19px;
  background: var(--surface-2);
  cursor: pointer;
}
.simple-upload:hover { border-color: var(--accent); }
.simple-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.simple-upload-icon { display: grid; width: 46px; height: 46px; margin-bottom: 6px; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 1.5rem; }
.simple-upload strong { font-size: 0.95rem; }
.simple-upload small { color: var(--muted); font-size: 0.64rem; }
.simple-track-inputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.simple-track-slot { min-width: 0; }
.simple-track-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.simple-track-heading b { font-size: 0.7rem; }
.simple-track-heading span { color: var(--muted); font-size: 0.57rem; }
.simple-upload--compact { min-height: 180px; }
.simple-upload--compact .simple-upload-icon { width: 38px; height: 38px; font-size: 1.15rem; }
.simple-file-card { display: flex; min-height: 76px; align-items: center; gap: 14px; margin-top: 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.simple-file-card > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.simple-file-card div { display: grid; min-width: 0; gap: 4px; }
.simple-file-card strong { overflow: hidden; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.simple-file-card small { color: var(--muted); font-size: 0.6rem; }
.simple-file-card button { margin-left: auto; border: 0; background: transparent; color: var(--accent); font-size: 0.64rem; font-weight: 700; }
.simple-file-card .simple-file-actions { display: flex; flex: 0 0 auto; gap: 8px; margin-left: auto; }
.simple-file-card .simple-file-actions button { margin: 0; padding: 5px 0; }
.simple-file-card .simple-file-actions button:last-child { color: var(--muted); }
.simple-message { margin-top: 13px; }
.ratio-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 17px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.ratio-panel > div:first-child { display: grid; gap: 4px; }
.ratio-panel strong { font-size: 0.68rem; }
.ratio-panel span { color: var(--muted); font-size: 0.58rem; }
.ratio-options { display: flex; gap: 5px; }
.ratio-options button { min-height: 33px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 0.6rem; font-weight: 700; }
.ratio-options button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.part-count-panel { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
.part-count-panel > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 0.58rem; font-weight: 700; }
.part-count-panel > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.part-count-panel button { min-height: 33px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 0.58rem; font-weight: 700; }
.part-count-panel button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.simple-preview { overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: #0c0e12; }
.simple-preview canvas { display: block; width: 100%; height: 120px; }
.simple-progress-line { height: 3px; background: #2c3139; }
.simple-progress-line span { display: block; width: 0; height: 100%; background: var(--accent); }
.simple-player { display: flex; align-items: center; gap: 12px; padding-top: 14px; }
.simple-player button { display: grid; width: 41px; height: 41px; place-items: center; border: 0; border-radius: 50%; background: var(--accent); color: #07110f; }
.simple-player div { display: grid; gap: 3px; }
.simple-player strong { font-size: 0.7rem; }
.simple-player small { color: var(--muted); font-size: 0.6rem; }
.beat-status { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.beat-status span { padding: 6px 9px; border: 1px solid rgba(117,232,209,.22); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.56rem; font-weight: 700; }
.simple-plan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 13px; }
.simple-plan article { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.simple-plan b { display: block; font-size: 0.66rem; }
.simple-plan span { color: var(--muted); font-size: 0.58rem; }
.simple-plan small { display: block; margin-top: 6px; color: var(--accent); font-size: 0.54rem; }
.simple-plan article.is-disabled { opacity: .48; border-style: dashed; }
.simple-plan article.is-disabled b { text-decoration: line-through; }
.simple-plan-actions { display: flex; gap: 5px; margin-top: 10px; }
.simple-plan-actions button { flex: 1; min-height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 0.52rem; font-weight: 700; }
.simple-plan-actions button:hover { border-color: var(--accent); color: var(--accent); }
.simple-plan-actions button.is-kept { border-color: rgba(117,232,209,.35); color: var(--accent); }
.simple-tune { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }
.simple-tune button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.simple-tune button:hover { border-color: var(--accent); }
.simple-note { margin-top: 12px; font-size: 0.6rem; }
.dice-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(117,232,209,.28); border-radius: 14px; background: var(--accent-soft); }
.dice-panel > div { display: grid; gap: 4px; }
.dice-panel strong { font-size: .72rem; }
.dice-panel span { color: var(--muted); font-size: .58rem; }
.dice-panel button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent); color: #07110f; font-size: .64rem; font-weight: 800; }

.revision-list { display: grid; gap: 12px; }
.revision-card { padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); }
.revision-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.revision-card header div { display: grid; gap: 4px; }
.revision-card header div { min-width: 0; }
.revision-card header b { font-size: 0.72rem; }
.revision-card header span { overflow: hidden; color: var(--muted); font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }
.revision-card header em { flex: 0 0 auto; color: var(--accent); font-size: 0.6rem; font-style: normal; font-weight: 700; }
.revision-range { display: grid; grid-template-columns: 48px 1fr 58px; align-items: center; gap: 10px; margin-top: 8px; }
.revision-range label { color: var(--muted); font-size: 0.58rem; }
.revision-range output { color: var(--text); font-size: 0.58rem; text-align: right; }
.revision-range input { width: 100%; accent-color: var(--accent); }
.revision-help { margin: 12px 0 0; color: var(--muted); font-size: 0.56rem; line-height: 1.5; }
.revision-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.revision-toolbar button { min-width: 190px; }
.revision-toolbar label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.6rem; cursor: pointer; }
.revision-toolbar input { accent-color: var(--accent); }
.revision-toolbar > span { color: var(--muted); font-size: .6rem; }
.revision-wave { position: relative; height: 108px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #0c0e12; user-select: none; touch-action: none; }
.revision-wave canvas { display: block; width: 100%; height: 100%; opacity: .42; }
.revision-selection { position: absolute; top: 0; bottom: 0; min-width: 12px; border: 1px solid var(--accent); border-width: 0 1px; background: rgba(117,232,209,.16); cursor: grab; }
.revision-selection::before { position: absolute; inset: 0; box-shadow: 0 0 24px rgba(117,232,209,.1) inset; content: ""; pointer-events: none; }
.revision-selection:active { cursor: grabbing; }
.revision-handle { position: absolute; z-index: 2; top: 50%; width: 16px; height: 44px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 6px; background: var(--accent); box-shadow: 0 3px 12px rgba(0,0,0,.35); cursor: ew-resize; }
.revision-handle::after { color: #07110f; content: "⋮"; font-size: 14px; font-weight: 900; }
.revision-handle--start { left: -8px; }
.revision-handle--end { right: -8px; }
.revision-wave-time { position: absolute; z-index: 3; right: 8px; bottom: 7px; padding: 4px 7px; border-radius: 6px; background: rgba(7,9,12,.82); color: var(--text); font-size: 0.54rem; pointer-events: none; }
.revision-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.revision-card-actions button { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 0.57rem; font-weight: 700; }
.revision-card-actions button:hover { border-color: var(--accent); color: var(--accent); }

.simple-finish { display: flex; align-items: center; gap: 15px; padding: 18px; border: 1px solid rgba(117,232,209,.3); border-radius: 15px; background: var(--accent-soft); }
.simple-finish-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--accent); color: #07110f; font-weight: 900; }
.simple-finish > div:last-child { display: grid; gap: 4px; }
.simple-finish strong { font-size: 0.8rem; }
.simple-finish span { color: var(--muted); font-size: 0.62rem; }
.simple-field { display: grid; gap: 7px; margin-top: 20px; color: var(--muted); font-size: 0.62rem; font-weight: 700; }
.simple-field input { width: 100%; min-height: 47px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); color: var(--text); }
.quality-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 20px 0 0; padding: 0; border: 0; }
.quality-choice legend { grid-column: 1 / -1; margin-bottom: 7px; color: var(--muted); font-size: 0.62rem; font-weight: 700; }
.quality-choice label { display: flex; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.quality-choice input { accent-color: var(--accent); }
.quality-choice span { display: grid; gap: 3px; }
.quality-choice b { font-size: 0.68rem; }
.quality-choice small { color: var(--muted); font-size: 0.56rem; line-height: 1.4; }
.simple-download { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: 20px; padding: 0 18px; border: 0; background: var(--accent); color: #07110f; }
.simple-pro-transfer { display: flex; width: 100%; min-height: 62px; align-items: center; justify-content: space-between; gap: 18px; margin-top: 10px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); text-align: left; }
.simple-pro-transfer span { display: grid; gap: 4px; }
.simple-pro-transfer b { font-size: .68rem; }
.simple-pro-transfer small { color: var(--muted); font-size: .56rem; }
.simple-pro-transfer > strong { color: var(--accent); font-size: 1.1rem; }
.simple-export-progress { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: var(--line); }
.simple-export-progress span { display: block; width: 3%; height: 100%; background: var(--accent); transition: width 160ms linear; }

@media (max-width: 760px) {
  .mode-switch button { padding: 0 8px; font-size: 0.58rem; }
  .simple-app { width: calc(100% - 18px); padding: 30px 0 55px; }
  .simple-hero { margin-bottom: 20px; padding: 0 12px; text-align: left; }
  .simple-hero h1 { font-size: 2rem; }
  .simple-hero p { font-size: 0.7rem; }
  .simple-shell { border-radius: 18px; }
  .simple-steps { padding: 13px 8px; }
  .simple-steps li { gap: 5px; font-size: 0.55rem; }
  .simple-steps li { flex-direction: column; gap: 3px; }
  .simple-steps li:not(:last-child)::after { display: none; }
  .simple-steps b { width: 22px; height: 22px; }
  .simple-step { min-height: 0; padding: 30px 18px 24px; }
  .simple-step > header { margin-bottom: 22px; }
  .goal-grid { grid-template-columns: 1fr; }
  .goal-card { min-height: 145px; padding: 18px; }
  .goal-card strong { margin-top: 18px; }
  .goal-card em { margin-top: 13px; }
  .simple-upload { min-height: 210px; }
  .simple-track-inputs { grid-template-columns: 1fr; }
  .dice-panel { align-items: stretch; flex-direction: column; }
  .dice-panel button { width: 100%; }
  .simple-upload--compact { min-height: 145px; }
  .ratio-panel { align-items: stretch; flex-direction: column; }
  .ratio-options { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ratio-options button { padding: 0 6px; }
  .simple-preview canvas { height: 90px; }
  .simple-plan { grid-template-columns: 1fr; }
  .simple-tune { display: flex; overflow-x: auto; }
  .simple-tune button { flex: 0 0 auto; padding: 0 13px; }
  .quality-choice { grid-template-columns: 1fr; }
  .revision-range { grid-template-columns: 42px 1fr 52px; }
  .revision-toolbar { align-items: stretch; flex-direction: column; }
  .revision-toolbar button { width: 100%; }
  .revision-wave { height: 92px; }
  .simple-actions { align-items: stretch; flex-direction: column-reverse; }
  .simple-actions .simple-primary, .simple-actions .simple-secondary { width: 100%; }
  .simple-back { align-self: flex-start; }
}

.privacy-note span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(117, 232, 209, 0.1);
}

.home-link {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c5cad2;
  font-size: 0.72rem;
  text-decoration: none;
}

.home-link svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.audio-app {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 62px 0 90px;
}

.audio-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}

.audio-intro h1 {
  margin: 0 0 9px;
  font-size: clamp(2rem, 4vw, 3.65rem);
  font-weight: 650;
  letter-spacing: -0.055em;
}

.audio-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.file-button {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid #a7f3e4;
  border-radius: 12px;
  background: var(--accent);
  box-shadow: 0 8px 26px rgba(117, 232, 209, 0.12);
  color: #07100e;
  cursor: pointer;
  font-size: 0.73rem;
  font-weight: 750;
  transition: filter 0.18s, transform 0.18s;
}

.file-button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.file-button.is-disabled {
  border-color: #333740;
  background: #24272e;
  box-shadow: none;
  color: #737a84;
  cursor: not-allowed;
  transform: none;
}

.file-button svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.studio-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(18, 20, 25, 0.97);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
}

.project-toolbar,
.active-toolbar {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}

.project-toolbar > div {
  display: grid;
  gap: 5px;
}

.project-toolbar strong {
  font-size: 0.77rem;
}

.project-toolbar span {
  color: var(--muted);
  font-size: 0.6rem;
}

.project-toolbar span b {
  color: #cfd3d9;
  font-weight: 600;
}

.tool-button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid #343944;
  border-radius: 9px;
  background: #1c1f25;
  color: #c8cdd5;
  font-size: 0.65rem;
}

.tool-button:hover:not(:disabled) {
  border-color: #4a505d;
  color: #fff;
}

.tool-button:disabled {
  opacity: 0.35;
}

.tool-button svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.track-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #0e1014;
}

.empty-track-card {
  grid-column: 1 / -1;
  display: grid;
  min-height: 102px;
  place-content: center;
  justify-items: center;
  gap: 5px;
  border: 1px dashed #3a404a;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
}

.empty-track-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.empty-track-card span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: #242831;
  color: var(--accent);
  font-size: 1rem;
}

.empty-track-card strong {
  color: #e2e5e9;
  font-size: 0.72rem;
}

.empty-track-card small {
  font-size: 0.56rem;
}

.track-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #303540;
  border-radius: 13px;
  background: #171a20;
  transition: border-color 0.18s, background 0.18s;
}

.track-card.is-active {
  border-color: rgba(117, 232, 209, 0.82);
  background: #1b2325;
  box-shadow: inset 0 0 0 1px rgba(117, 232, 209, 0.12);
}

.track-select {
  display: grid;
  width: 100%;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 9px;
  padding: 12px 12px 9px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.track-number {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 8px;
  background: #272c34;
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 800;
}

.track-card.is-active .track-number {
  background: var(--accent);
  color: #07100e;
}

.track-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.track-copy strong {
  overflow: hidden;
  color: #eef0f3;
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-copy small {
  color: var(--muted);
  font-size: 0.54rem;
}

.track-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px 10px 50px;
}

.mini-button {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #343a44;
  border-radius: 7px;
  background: #20242b;
  color: #9ba2ad;
}

.mini-button:hover:not(:disabled) {
  border-color: #59616f;
  color: #fff;
}

.mini-button:disabled {
  opacity: 0.28;
}

.mini-button.is-delete {
  margin-left: auto;
}

.mini-button.is-delete:hover {
  border-color: rgba(255, 133, 141, 0.5);
  color: var(--danger);
}

.mini-button svg {
  width: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.track-transition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid #2c3139;
  color: var(--muted);
  font-size: 0.55rem;
}

.track-transition select {
  min-width: 92px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid #3a404a;
  border-radius: 7px;
  background: #111318;
  color: #d7dbe1;
  font-size: 0.56rem;
}

.active-toolbar {
  min-height: 70px;
}

.track-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.track-icon {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #22262d;
  color: var(--accent);
}

.track-icon svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.track-identity > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.track-identity strong {
  max-width: min(58vw, 720px);
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-identity small {
  color: var(--muted);
  font-size: 0.6rem;
}

.clip-workspace {
  padding: 14px 18px 16px;
  border-bottom: 1px solid var(--line);
  background: #12151a;
}

.clip-workspace-heading,
.output-queue-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.clip-workspace-heading > div {
  display: grid;
  gap: 3px;
}

.clip-workspace-heading strong,
.output-queue-heading strong {
  color: #e8ebef;
  font-size: 0.68rem;
}

.clip-workspace-heading span,
.output-queue-heading span {
  color: var(--muted);
  font-size: 0.54rem;
}

.add-clip-button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(117, 232, 209, 0.42);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.59rem;
  font-weight: 700;
}

.add-clip-button:disabled {
  border-color: #343943;
  background: #20242a;
  color: #69717c;
}

.clip-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.clip-empty,
.output-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed #353b45;
  border-radius: 9px;
  color: #7c8490;
  font-size: 0.56rem;
  line-height: 1.5;
}

.clip-empty {
  grid-column: 1 / -1;
}

.clip-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #303640;
  border-radius: 10px;
  background: #191c22;
}

.clip-card.is-active {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(140, 180, 255, 0.14);
}

.clip-card.is-included::before {
  display: block;
  height: 2px;
  background: var(--accent);
  content: "";
}

.clip-select {
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.clip-select strong {
  color: #edf0f3;
  font-size: 0.63rem;
}

.clip-select span,
.clip-select small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-select small {
  color: #89919d;
}

.clip-card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px 8px;
}

.clip-output-toggle {
  display: flex;
  min-height: 27px;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  border: 1px solid #373d48;
  border-radius: 7px;
  background: #20242b;
  color: #a9b0ba;
  font-size: 0.51rem;
}

.clip-output-toggle svg {
  width: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.clip-card.is-included .clip-output-toggle {
  color: var(--accent);
}

.studio-grid {
  display: grid;
  min-height: 560px;
  grid-template-columns: minmax(0, 1fr) 330px;
}

.editor-panel {
  min-width: 0;
  padding: 28px;
  border-right: 1px solid var(--line);
}

.mix-overview {
  margin-bottom: 22px;
  padding: 15px;
  border: 1px solid #303640;
  border-radius: 13px;
  background: linear-gradient(145deg, #151a20, #101318);
}

.mix-overview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.mix-overview-heading > div {
  display: grid;
  gap: 3px;
}

.mix-overview-heading strong {
  color: #eff2f5;
  font-size: 0.68rem;
}

.mix-overview-heading span,
.mix-overview-heading output {
  color: var(--muted);
  font-size: 0.53rem;
}

.mix-overview-heading output {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 7px;
  background: #20252c;
  color: #b9c0c9;
  font-variant-numeric: tabular-nums;
}

.mix-timeline {
  display: flex;
  min-height: 94px;
  gap: 7px;
  padding: 3px 2px 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-color: #39404b transparent;
  scrollbar-width: thin;
}

.mix-segment {
  --segment-progress: 0%;
  position: relative;
  display: grid;
  flex: var(--segment-weight) 0 116px;
  min-width: 116px;
  max-width: 250px;
  min-height: 80px;
  overflow: hidden;
  align-content: end;
  gap: 2px;
  padding: 37px 10px 9px;
  border: 1px solid #343b46;
  border-radius: 9px;
  background: #1a1e24;
  color: inherit;
  text-align: left;
  transition: border-color 0.16s, transform 0.16s, opacity 0.16s;
}

.mix-segment::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--segment-progress);
  background: rgba(117, 232, 209, 0.1);
  content: "";
  pointer-events: none;
}

.mix-segment:hover {
  border-color: #56606e;
}

.mix-segment.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(117, 232, 209, 0.15), 0 8px 22px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.mix-segment.is-past {
  opacity: 0.63;
}

.mix-segment canvas {
  position: absolute;
  inset: 8px 8px auto;
  z-index: 1;
  width: calc(100% - 16px);
  height: 24px;
  pointer-events: none;
}

.mix-segment strong,
.mix-segment span {
  position: relative;
  z-index: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mix-segment strong {
  color: #e9edf1;
  font-size: 0.57rem;
}

.mix-segment span {
  color: #858e9a;
  font-size: 0.48rem;
}

.mix-segment-index {
  position: absolute;
  top: 6px;
  left: 7px;
  z-index: 3;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 5px;
  background: #282e37;
  color: var(--accent);
  font-size: 0.47rem;
  font-style: normal;
  font-weight: 800;
}

.mix-now-playing {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 1px 0;
  color: #858d98;
  font-size: 0.52rem;
}

.mix-now-playing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #545c67;
}

.mix-overview.is-playing .mix-now-playing span {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(117, 232, 209, 0.1);
}

.mix-overview--export {
  margin: 14px 0 0;
  padding: 12px;
}

.mix-overview--export .mix-overview-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.mix-overview--export .mix-overview-heading span {
  line-height: 1.4;
}

.mix-overview--export .mix-timeline {
  min-height: 88px;
}

.mix-overview--export .mix-segment {
  flex-basis: 106px;
  min-width: 106px;
  padding-right: 8px;
  padding-left: 8px;
}

.mix-now-playing b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wave-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.61rem;
}

.wave-status span:first-child {
  color: #cbd0d7;
}

.waveform-wrap {
  position: relative;
  height: 350px;
  overflow: hidden;
  border: 1px solid #252831;
  border-radius: 14px;
  background: #0c0d10;
  touch-action: none;
}

.waveform-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.wave-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  pointer-events: none;
  text-align: center;
}

.wave-empty[hidden] {
  display: none;
}

.wave-empty svg {
  width: 45px;
  margin-bottom: 8px;
  fill: none;
  stroke: #454b56;
  stroke-linecap: round;
  stroke-width: 1.2;
}

.wave-empty strong {
  color: #d8dce1;
  font-size: 0.78rem;
}

.wave-empty span {
  font-size: 0.61rem;
}

.transport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 20px;
}

.transport-main {
  display: flex;
  align-items: center;
  gap: 11px;
}

.transport-icon,
.play-button {
  display: grid;
  place-items: center;
  border: 1px solid #383d47;
}

.transport-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #1b1e24;
  color: #cdd1d8;
}

.play-button {
  width: 48px;
  height: 48px;
  border-color: #9af0df;
  border-radius: 50%;
  background: var(--accent);
  color: #07100e;
}

.transport-icon:disabled,
.play-button:disabled {
  opacity: 0.3;
}

.transport-icon svg,
.play-button svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.play-button svg {
  width: 22px;
  fill: currentColor;
  stroke: none;
}

.time-display {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
}

.time-display strong {
  font-size: 1.05rem;
}

.time-display span {
  color: var(--muted);
  font-size: 0.72rem;
}

.transport > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.6rem;
}

.inspector {
  background: #101217;
}

.inspector-section {
  padding: 23px;
  border-bottom: 1px solid var(--line);
}

.inspector-heading,
.range-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.inspector-heading {
  margin-bottom: 17px;
}

.inspector h2 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
}

.inspector-heading span {
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
}

.time-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.time-fields label {
  position: relative;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.57rem;
}

.time-fields input {
  width: 100%;
  height: 39px;
  padding: 0 30px 0 10px;
  border: 1px solid #343943;
  border-radius: 8px;
  background: #191c22;
  color: var(--text);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.time-fields input:focus {
  border-color: var(--accent);
}

.time-fields label span {
  position: absolute;
  right: 10px;
  bottom: 12px;
  color: #707784;
  font-size: 0.55rem;
}

.range-heading {
  margin-bottom: 9px;
  color: #d5d9df;
  font-size: 0.64rem;
}

.range-heading:not(:first-child) {
  margin-top: 20px;
}

.range-heading output {
  color: var(--muted);
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
}

.range-section input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 0;
  appearance: none;
  border-radius: 99px;
  background: #30343d;
}

.range-section input[type="range"]::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  appearance: none;
  border: 3px solid #101217;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px #7cebd5;
}

.range-section input[type="range"]:disabled {
  opacity: 0.35;
}

.effect-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.effect-button {
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid #353b45;
  border-radius: 8px;
  background: #191c22;
  color: #aeb4bd;
  font-size: 0.58rem;
}

.effect-button:hover:not(:disabled) {
  color: #fff;
}

.effect-button.is-active {
  border-color: rgba(117, 232, 209, 0.65);
  background: var(--accent-soft);
  color: var(--accent);
}

.effect-button:disabled {
  opacity: 0.35;
}

.quality-label {
  display: block;
  margin-bottom: 10px;
  color: #d5d9df;
  font-size: 0.64rem;
}

.output-queue-block {
  margin: -5px -5px 19px;
  padding: 13px;
  border: 1px solid #2d323b;
  border-radius: 11px;
  background: #0d0f13;
}

.output-queue {
  display: grid;
  max-height: 310px;
  gap: 7px;
  margin-top: 10px;
  overflow: auto;
  scrollbar-width: thin;
}

.output-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid #2d333c;
  border-radius: 9px;
  background: #171a20;
}

.output-position {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.54rem;
  font-weight: 800;
}

.output-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.output-copy strong,
.output-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.output-copy strong {
  color: #e7eaee;
  font-size: 0.57rem;
}

.output-copy small {
  max-width: 160px;
  color: #777f8a;
  font-size: 0.48rem;
}

.output-actions {
  display: flex;
  gap: 3px;
}

.output-actions .mini-button {
  width: 23px;
  height: 23px;
}

.output-transition,
.output-ending {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid #292e36;
  color: #7e8691;
  font-size: 0.49rem;
}

.output-transition select {
  height: 25px;
  padding: 0 6px;
  border: 1px solid #383e48;
  border-radius: 6px;
  background: #101217;
  color: #cdd1d7;
  font-size: 0.5rem;
}

.output-ending {
  justify-content: flex-end;
  color: #626a75;
}

.second-label {
  margin-top: 16px;
}

.select-wrap {
  position: relative;
}

.select-wrap select {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 12px;
  appearance: none;
  border: 1px solid #343943;
  border-radius: 9px;
  background: #191c22;
  color: var(--text);
  font-size: 0.66rem;
}

.select-wrap svg {
  position: absolute;
  top: 13px;
  right: 12px;
  width: 17px;
  fill: none;
  stroke: #8e95a0;
  stroke-width: 1.7;
  pointer-events: none;
}

.preview-export-button {
  display: flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  border: 1px solid rgba(117, 232, 209, 0.45);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.67rem;
  font-weight: 700;
}

.preview-export-button:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(117, 232, 209, 0.16);
}

.preview-export-button.is-playing {
  border-color: var(--blue);
  background: rgba(140, 180, 255, 0.12);
  color: var(--blue);
}

.preview-export-button:disabled {
  border-color: #333740;
  background: #20232a;
  color: #6f7681;
}

.preview-export-button svg {
  width: 17px;
  fill: currentColor;
  stroke: none;
}

.preview-export-button.is-playing svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.9;
}

.preview-export-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: #737b87;
  font-size: 0.52rem;
}

.preview-export-status output {
  color: #aeb5bf;
  font-variant-numeric: tabular-nums;
}

.export-button {
  display: flex;
  width: 100%;
  min-height: 47px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  border: 1px solid #a7f3e4;
  border-radius: 11px;
  background: var(--accent);
  color: #07100e;
  font-size: 0.72rem;
  font-weight: 800;
}

.export-button:disabled {
  border-color: #333740;
  background: #24272e;
  color: #737a84;
}

.export-button svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.export-progress {
  height: 3px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 99px;
  background: #292d35;
}

.export-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.15s;
}

.format-note {
  margin: 12px 0 0;
  color: #6f7681;
  font-size: 0.55rem;
  line-height: 1.55;
}

.editor-message {
  min-height: 44px;
  margin: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #0d0f13;
  color: #8f96a1;
  font-size: 0.61rem;
}

.editor-message.is-error {
  color: var(--danger);
}

.codec-credit {
  margin: 16px 0 0;
  color: #686f79;
  font-size: 0.55rem;
  text-align: right;
}

.codec-credit a {
  color: #858d98;
}

@media (max-width: 1040px) {
  .studio-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .editor-panel {
    padding: 22px;
  }
}

@media (max-width: 900px) {
  .audio-app {
    width: min(100% - 30px, 720px);
    padding-top: 42px;
  }

  .audio-intro {
    align-items: stretch;
    flex-direction: column;
  }

  .file-button {
    width: 100%;
  }

  .track-rail {
    grid-template-columns: 1fr;
  }

  .track-actions {
    padding-left: 50px;
  }

  .clip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-grid {
    grid-template-columns: 1fr;
  }

  .editor-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .waveform-wrap {
    height: 280px;
  }

  .inspector {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .inspector-section {
    border-right: 1px solid var(--line);
  }

  .outro-section,
  .export-section {
    border-right: 0;
  }

  .export-section {
    grid-column: 2;
    grid-row: 2 / 4;
  }

  .transport > p {
    display: none;
  }
}

@media (max-width: 600px) {
  .audio-topbar {
    height: 61px;
    padding: 0 12px;
  }

  .privacy-note {
    display: none;
  }

  .home-link {
    margin-left: auto;
  }

  .audio-app {
    width: calc(100% - 18px);
    padding: 32px 0 55px;
  }

  .audio-intro {
    gap: 22px;
    margin-bottom: 24px;
  }

  .audio-intro h1 {
    font-size: clamp(1.78rem, 9.2vw, 2.15rem);
  }

  .audio-intro p {
    font-size: 0.74rem;
  }

  .studio-shell {
    border-radius: 17px;
  }

  .project-toolbar,
  .active-toolbar {
    min-height: 64px;
    padding: 11px 12px;
  }

  .project-toolbar .tool-button {
    font-size: 0;
  }

  .track-rail {
    padding: 10px 12px;
  }

  .track-identity strong {
    max-width: 48vw;
  }

  .clip-workspace {
    padding: 12px;
  }

  .clip-workspace-heading {
    align-items: flex-end;
  }

  .clip-list {
    display: flex;
    margin-right: -12px;
    padding-right: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .clip-card {
    flex: 0 0 176px;
    scroll-snap-align: start;
  }

  .active-toolbar .tool-button {
    width: 32px;
    justify-content: center;
    padding: 8px;
    font-size: 0;
  }

  .editor-panel {
    padding: 13px;
  }

  .mix-overview {
    margin-bottom: 17px;
    padding: 12px;
  }

  .mix-overview-heading {
    align-items: flex-start;
  }

  .mix-overview-heading span {
    max-width: 190px;
    line-height: 1.45;
  }

  .mix-overview--export {
    margin: 14px 0 0;
  }

  .mix-segment {
    flex-basis: 110px;
    min-width: 110px;
  }

  .waveform-wrap {
    height: 225px;
  }

  .wave-status {
    font-size: 0.54rem;
  }

  .transport {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .transport-main {
    width: 100%;
  }

  .time-display {
    margin-left: auto;
  }

  .inspector {
    grid-template-columns: 1fr;
  }

  .inspector-section,
  .outro-section,
  .export-section {
    grid-column: auto;
    grid-row: auto;
    border-right: 0;
  }

  .time-fields input {
    font-size: 0.82rem;
  }

  .output-queue {
    max-height: 360px;
  }

  .output-copy small {
    max-width: 47vw;
  }

  .editor-message {
    padding: 13px 15px;
    font-size: 0.58rem;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
.beat-lab-entry{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:10px 14px;border:1px solid rgba(201,255,61,.34);border-radius:999px;background:rgba(201,255,61,.08);color:#eefdbd;text-decoration:none;font-size:13px;font-weight:750}.beat-lab-entry span{padding:3px 6px;border-radius:999px;background:#c9ff3d;color:#151810;font-size:9px;letter-spacing:.08em}