:root {
  --ink: #101010;
  --paper: #f5f3ee;
  --panel: #eeece6;
  --muted: #6c6962;
  --line: #171717;
  --accent: #d9ff00;
  --accent-2: #60f0ff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(16, 16, 16, .035) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 32px;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

button,
input,
select { font: inherit; }

button { cursor: pointer; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.app-shell {
  width: min(1540px, 100%);
  min-height: 100vh;
  margin: auto;
  padding: 26px 42px 20px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: flex;
  gap: 10px;
  align-items: center;
  color: inherit;
  font: 700 11px/.92 "Space Grotesk", sans-serif;
  letter-spacing: -.02em;
  text-decoration: none;
}

.mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #111;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  font-size: 15px;
  transition: background .2s;
}

.topbar-note {
  margin-left: auto;
  margin-right: 24px;
  color: var(--muted);
  font: 10px "DM Mono", monospace;
  letter-spacing: .12em;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 75%);
}

.export-button {
  min-width: 152px;
  padding: 10px 14px;
  color: #111;
  border: 1px solid #161616;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  transition: color .2s, background .2s, transform .2s;
}

.export-button span { margin-left: 10px; font-size: 15px; }
.export-button:not(:disabled):hover { color: var(--paper); background: var(--ink); transform: translateY(-2px); }
.export-button:disabled { cursor: not-allowed; opacity: .35; }

.hero-copy { padding: 56px 0 42px; }

.eyebrow {
  margin: 0 0 12px;
  font: 10px "DM Mono", monospace;
  letter-spacing: .15em;
}

.hero-copy h1 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(46px, 5vw, 78px);
  letter-spacing: -.075em;
  line-height: .92;
}

.hero-copy h1 em { position: relative; z-index: 0; font-style: normal; }
.hero-copy h1 em::after {
  position: absolute;
  z-index: -1;
  right: -5px;
  bottom: 5px;
  left: -5px;
  height: 19%;
  background: var(--accent);
  content: "";
  transition: background .2s;
}

.intro {
  max-width: 620px;
  margin: 20px 0 0;
  color: #5d5b55;
  font-size: 13px;
  line-height: 1.9;
}

.feature-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.feature-pills span {
  padding: 5px 8px;
  color: #5d5a54;
  border: 1px solid #aaa69d;
  font: 8px "DM Mono", monospace;
  letter-spacing: .08em;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 405px;
  gap: 18px;
  align-items: start;
}

.stage-column { position: sticky; top: 18px; min-width: 0; }

.preview-frame {
  position: relative;
  width: 100%;
  height: clamp(520px, 62vh, 680px);
  min-width: 0;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #141414;
  background: #111;
}

/* The shared canvas paints the complete scene so preview and video match. */
.grid-texture,
.preview-background,
.preview-overlay,
.corner-label,
.track-title { display: none; }

#waveCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.empty-state {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: min(320px, 80%);
  padding: 38px 24px;
  text-align: center;
  color: #f1f1ef;
  border: 1px solid rgba(255, 255, 255, .17);
  background: rgba(9, 9, 9, .58);
  backdrop-filter: blur(10px);
  transform: translate(-50%, -56%);
}

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

.drop-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin: auto auto 16px;
  place-items: center;
  color: var(--accent);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  font-size: 23px;
}

.empty-state p { margin: 0 0 5px; font-size: 15px; font-weight: 700; }
.empty-state > span { color: #aaa9a3; font: 9px "DM Mono", monospace; letter-spacing: .1em; }

.choose-file {
  display: inline-block;
  margin-top: 23px;
  padding: 10px 17px;
  color: #111;
  background: var(--accent);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s;
}

.choose-file:hover { transform: translateY(-2px); }
.preview-frame.dragging { outline: 4px solid var(--accent); outline-offset: -9px; }
.preview-frame.dragging .empty-state { opacity: .75; }

.transport {
  position: absolute;
  z-index: 6;
  right: 22px;
  bottom: 17px;
  display: flex;
  width: min(440px, 61%);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(8, 8, 8, .55);
  backdrop-filter: blur(8px);
}

.play-button,
.mute-button {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  color: var(--ink);
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  font-size: 11px;
}

.mute-button { color: #d7d7d2; border: 1px solid #72726e; background: transparent; }
.play-button:disabled, .mute-button:disabled { cursor: not-allowed; opacity: .35; }
.progress-wrap { flex: 1; }
.progress-wrap input { width: 100%; height: 3px; margin: 0; appearance: none; background: #6c6c68; cursor: pointer; }
.progress-wrap input:disabled { cursor: default; }
.progress-wrap input::-webkit-slider-thumb { width: 9px; height: 9px; appearance: none; border-radius: 50%; background: var(--accent); }
.time-row { display: flex; justify-content: space-between; margin-top: 4px; color: #bcbcb5; font: 8px "DM Mono", monospace; }

.stage-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 1px;
  border-bottom: 1px solid #aaa79f;
  color: #615f59;
  font: 8px "DM Mono", monospace;
  letter-spacing: .05em;
}

.stage-meta p { margin: 0; }
.stage-meta b { font-weight: 500; }
#audioStateDot { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #99968f; }
#audioStateDot.ready { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 75%); }

.control-panel { border: 1px solid var(--line); background: var(--panel); }
.panel-section { padding: 19px; border-bottom: 1px solid var(--line); }
.panel-section:last-child { border-bottom: 0; }

.section-heading { display: flex; gap: 9px; align-items: baseline; margin-bottom: 15px; }
.section-heading > span { color: #77746d; font: 9px "DM Mono", monospace; }
.section-heading h2 { margin: 0; font: 700 11px "Space Grotesk", sans-serif; letter-spacing: .05em; }
.section-heading small { margin-left: auto; color: #7f7c75; font: 7px "DM Mono", monospace; letter-spacing: .06em; }

.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.style-card {
  position: relative;
  min-width: 0;
  min-height: 94px;
  padding: 8px;
  overflow: hidden;
  text-align: left;
  color: #292927;
  border: 1px solid #b7b5ad;
  background: #f7f5f0;
  transition: border .18s, transform .18s, box-shadow .18s, background .18s;
}

.style-card:hover { border-color: #242424; transform: translateY(-2px); }
.style-card.active { color: #101010; border-color: #101010; background: var(--accent); box-shadow: 3px 3px 0 #111; }
.style-number { display: block; margin-bottom: 6px; color: #68665f; font: 7px "DM Mono", monospace; }
.style-card strong, .style-card small { position: relative; z-index: 1; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-card strong { margin-top: 7px; font: 700 8px "Space Grotesk", sans-serif; letter-spacing: .03em; }
.style-card small { margin-top: 2px; font-size: 7px; }
.mini-wave { position: relative; display: block; width: 100%; height: 19px; overflow: hidden; }

.mini-pulse { background: repeating-linear-gradient(90deg, #20201f 0 2px, transparent 2px 6px); clip-path: polygon(0 45%, 8% 25%, 16% 72%, 24% 8%, 32% 82%, 40% 32%, 48% 61%, 56% 12%, 64% 76%, 72% 42%, 80% 4%, 88% 64%, 100% 38%, 100% 62%, 0 62%); }
.mini-orbit { width: 25px; margin: auto; border: 2px solid #20201f; border-radius: 50%; box-shadow: 0 0 0 3px transparent, 0 0 0 4px #20201f; }
.mini-spectrum { background: repeating-linear-gradient(90deg, #20201f 0 2px, transparent 2px 5px); clip-path: polygon(0 50%, 5% 16%, 12% 75%, 19% 36%, 27% 78%, 35% 8%, 43% 52%, 51% 21%, 59% 69%, 67% 4%, 75% 52%, 83% 13%, 91% 88%, 100% 31%, 100% 100%, 0 100%); }
.mini-ribbon { background: #20201f; clip-path: polygon(0 56%, 10% 16%, 20% 79%, 30% 21%, 40% 54%, 50% 87%, 60% 17%, 70% 72%, 80% 3%, 90% 61%, 100% 55%, 100% 68%, 90% 70%, 80% 14%, 70% 83%, 60% 29%, 50% 96%, 40% 64%, 30% 32%, 20% 90%, 10% 27%, 0 66%); }
.mini-mirror { background: repeating-linear-gradient(90deg, #20201f 0 2px, transparent 2px 6px); clip-path: polygon(0 46%, 12% 18%, 24% 37%, 36% 2%, 48% 31%, 50% 50%, 52% 31%, 64% 2%, 76% 37%, 88% 18%, 100% 46%, 100% 54%, 88% 82%, 76% 63%, 64% 98%, 52% 69%, 50% 50%, 48% 69%, 36% 98%, 24% 63%, 12% 82%, 0 54%); }
.mini-dots { background: radial-gradient(circle, #20201f 0 1.5px, transparent 2px); background-size: 11px 9px; }
.mini-tunnel { width: 42px; margin: auto; border: 1px solid #20201f; border-radius: 50%; box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px #20201f, inset 0 0 0 7px transparent, inset 0 0 0 8px #20201f; }
.mini-skyline { background: repeating-linear-gradient(90deg, #20201f 0 4px, transparent 4px 7px); clip-path: polygon(0 100%, 0 62%, 12% 62%, 12% 20%, 25% 20%, 25% 72%, 38% 72%, 38% 4%, 51% 4%, 51% 48%, 64% 48%, 64% 29%, 77% 29%, 77% 78%, 90% 78%, 90% 41%, 100% 41%, 100% 100%); }
.mini-petals { width: 27px; margin: auto; border: 2px solid #20201f; border-radius: 50% 5px; transform: rotate(45deg); box-shadow: 5px 5px 0 -3px #20201f, -5px -5px 0 -3px #20201f; }
.mini-matrix { background: repeating-linear-gradient(90deg, #20201f 0 4px, transparent 4px 7px), repeating-linear-gradient(0deg, transparent 0 3px, #20201f 3px 5px); }
.mini-eclipse { width: 42px; margin: auto; border: 2px solid #20201f; border-radius: 50%; transform: rotate(-10deg); }.mini-eclipse::after { position: absolute; inset: 5px -7px; border: 1px solid #20201f; border-radius: 50%; content: ""; }
.mini-terrain { border-bottom: 1px solid #20201f; background: repeating-linear-gradient(170deg, transparent 0 4px, #20201f 5px 6px, transparent 7px 10px); clip-path: polygon(0 74%, 12% 51%, 25% 62%, 38% 19%, 52% 49%, 65% 8%, 78% 54%, 90% 25%, 100% 65%, 100% 100%, 0 100%); }

.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.swatch { min-width: 0; padding: 6px; color: #595750; border: 1px solid transparent; background: transparent; font: 7px "DM Mono", monospace; text-align: center; }
.swatch i { display: block; width: 100%; height: 17px; margin-bottom: 5px; border: 1px solid #161616; background: linear-gradient(90deg, var(--c1) 0 50%, var(--c2) 50%); }
.swatch b { font-weight: 500; }
.swatch.active { color: #111; border-color: #111; background: #f8f6f1; box-shadow: 2px 2px 0 #111; }

.range-stack { display: grid; grid-template-columns: 1fr; }
.range-stack.compact { margin-top: 2px; }
.range-label { display: flex; justify-content: space-between; margin: 11px 0 6px; color: #55534e; font: 8px "DM Mono", monospace; }
.range-stack .range-label:first-child { margin-top: 0; }
.range-label output { color: #151515; font-weight: 500; }
.range { width: 100%; height: 3px; margin: 0; appearance: none; background: #9a9790; accent-color: var(--ink); }
.range::-webkit-slider-thumb { width: 10px; height: 10px; appearance: none; border: 0; border-radius: 0; background: #111; }
.range::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 0; background: #111; }

.switch-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; cursor: pointer; }
.switch-row > span b, .switch-row > span small { display: block; }
.switch-row > span b { font: 500 8px "DM Mono", monospace; }
.switch-row > span small { margin-top: 2px; color: #74716a; font-size: 8px; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row > i { position: relative; width: 34px; height: 18px; border: 1px solid #111; background: #c8c5be; transition: background .2s; }
.switch-row > i::after { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: #111; content: ""; transition: transform .2s; }
.switch-row input:checked + i { background: var(--accent); }
.switch-row input:checked + i::after { transform: translateX(16px); }

.background-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 11px; }
.bg-preset { min-width: 0; padding: 4px; color: #65625c; border: 1px solid transparent; background: transparent; }
.bg-preset i { display: block; height: 30px; margin-bottom: 4px; border: 1px solid #89867f; background: #141414; }
.bg-preset span { font: 6px "DM Mono", monospace; }
.bg-preset:nth-child(1) i { background: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px), #151515; background-size: 7px 7px; }
.bg-preset:nth-child(2) i { background: #050505; }
.bg-preset:nth-child(3) i { background: radial-gradient(circle at 25% 20%, #195fff, transparent 38%), linear-gradient(145deg, #020925, #0d32a0); }
.bg-preset:nth-child(4) i { background: linear-gradient(145deg, #ff356d, #ff9e00 53%, #381061); }
.bg-preset:nth-child(5) i { background: repeating-linear-gradient(0deg, #e6e0d4 0 2px, #d3cbbb 3px 4px); }
.bg-preset:nth-child(6) i { background: linear-gradient(130deg, #070707, #aaa 42%, #202020 53%, #ececec 72%, #0b0b0b); }
.bg-preset.active { color: #111; border-color: #111; background: #fff; }

.background-drop {
  position: relative;
  min-height: 78px;
  overflow: hidden;
  border: 1px dashed #8d8a82;
  background: #e4e1da;
  background-position: center;
  background-size: cover;
  cursor: pointer;
}

.background-drop.dragging { outline: 3px solid var(--accent); outline-offset: 2px; }
.bg-placeholder { display: grid; height: 78px; place-content: center; text-align: center; }
.bg-placeholder .plus { color: #55534e; font-size: 20px; line-height: .8; }
.bg-placeholder p { margin: 5px 0 2px; font-size: 9px; font-weight: 700; }
.bg-placeholder small { color: #77746e; font: 7px "DM Mono", monospace; letter-spacing: .08em; }
.background-drop.has-image .bg-placeholder { visibility: hidden; }
.remove-bg { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; padding: 0; color: white; border: 0; background: #111; font-size: 18px; line-height: 1; }

.field-label { display: flex; justify-content: space-between; margin: 13px 0 6px; color: #55534e; font: 8px "DM Mono", monospace; }
.field-label small { color: #85827b; font-size: 7px; }
.text-input, select { width: 100%; color: #111; border: 1px solid #9f9c94; border-radius: 0; background: #f8f6f1; }
.text-input { height: 35px; padding: 0 9px; font-size: 10px; }
.text-input::placeholder { color: #98958e; }
.segment { display: grid; grid-template-columns: repeat(3, 1fr); }
.segment button { padding: 7px; color: #5d5a54; border: 1px solid #9f9c94; border-right: 0; background: #f7f5f0; font: 8px "DM Mono", monospace; }
.segment button:last-child { border-right: 1px solid #9f9c94; }
.segment button.active { color: #111; background: var(--accent); box-shadow: inset 0 0 0 1px #111; }
.select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.select-grid label { color: #5c5953; font: 7px "DM Mono", monospace; }
.select-grid select { height: 32px; margin-top: 5px; padding: 0 7px; font-size: 8px; }
.select-grid select:disabled { opacity: .45; }
.monitor-row { margin-top: 14px; }
.export-note { margin: 15px 0 12px; color: #706d66; font-size: 9px; line-height: 1.65; }
.panel-export { width: 100%; padding: 12px 10px; color: #111; border: 1px solid #111; background: var(--accent); font-size: 10px; font-weight: 900; box-shadow: 3px 3px 0 #111; transition: transform .2s, box-shadow .2s; }
.panel-export span { color: #f0443c; margin-right: 5px; }
.panel-export:not(:disabled):hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #111; }
.panel-export:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .45; box-shadow: none; }

.footer-band { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 13px; color: #66635d; border-top: 1px solid #111; font: 9px "DM Mono", monospace; letter-spacing: .05em; }
.footer-band p { margin: 0; }
.footer-band a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-band a:hover { color: #111; }

.export-dialog { width: min(470px, calc(100% - 32px)); padding: 0; color: #f3f2ed; border: 1px solid #777; background: #111; box-shadow: 12px 12px 0 var(--accent); }
.export-dialog::backdrop { background: rgba(245, 243, 238, .72); backdrop-filter: blur(6px); }
.recording-card { padding: 34px; text-align: center; }
.recording-icon { display: inline-flex; gap: 7px; align-items: center; padding: 6px 9px; color: #ff645e; border: 1px solid #ff645e; font: 8px "DM Mono", monospace; letter-spacing: .1em; }
.recording-icon i { width: 7px; height: 7px; border-radius: 50%; background: #ff4c45; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.dialog-kicker { margin: 24px 0 8px; color: var(--accent); font: 8px "DM Mono", monospace; letter-spacing: .13em; }
.recording-card h2 { margin: 0; font: 700 23px "Space Grotesk", sans-serif; }
.recording-card > p:not(.dialog-kicker) { margin: 12px auto 24px; max-width: 330px; color: #aaa8a1; font-size: 10px; line-height: 1.8; }
.export-progress { height: 5px; overflow: hidden; background: #3f3f3c; }
.export-progress i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .15s linear; }
.export-time { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; margin-top: 8px; color: #8e8d87; font: 8px "DM Mono", monospace; }
.export-time span:first-child { text-align: left; }.export-time span:last-child { text-align: right; }
.export-time strong { color: #f3f2ed; font-size: 11px; }
#cancelExport { margin-top: 27px; padding: 9px 14px; color: #d4d3cd; border: 1px solid #72716c; background: transparent; font-size: 9px; }
#cancelExport:hover { color: #111; background: #f1f0eb; }

.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; max-width: min(380px, calc(100% - 48px)); padding: 12px 15px; color: #f5f3ee; border-left: 4px solid var(--accent); background: #111; box-shadow: 5px 5px 0 rgba(0, 0, 0, .2); font-size: 10px; line-height: 1.6; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: #ff5a52; }

body[data-theme="coral"] { --accent: #ff5a52; --accent-2: #ffb1a4; }
body[data-theme="ice"] { --accent: #67e6ff; --accent-2: #d9ff00; }
body[data-theme="mono"] { --accent: #f5f5f1; --accent-2: #8d8d8d; }
body[data-theme="neon"] { --accent: #ff40c6; --accent-2: #7b61ff; }
body[data-theme="ember"] { --accent: #ff9f1c; --accent-2: #ffef5a; }
body[data-theme="aqua"] { --accent: #40ffb3; --accent-2: #22a6ff; }
body[data-theme="violet"] { --accent: #c6a7ff; --accent-2: #ffcae7; }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 365px; }
  .preview-frame { height: clamp(500px, 60vh, 620px); }
  .style-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .app-shell { padding: 20px; }
  .topbar-note { display: none; }
  .hero-copy { padding: 42px 0 30px; }
  .workspace { grid-template-columns: 1fr; }
  .stage-column { position: static; }
  .preview-frame { height: min(62vh, 570px); min-height: 470px; }
  .control-panel { display: grid; grid-template-columns: 1fr 1fr; }
  .style-section, .export-section { grid-column: 1 / -1; }
  .style-grid { grid-template-columns: repeat(4, 1fr); }
  .transport { width: calc(100% - 44px); }
}

@media (max-width: 620px) {
  .app-shell { padding: 16px; }
  .topbar { padding-bottom: 19px; }
  .export-button { min-width: auto; padding: 8px 10px; font-size: 9px; }
  .hero-copy h1 { font-size: 45px; }
  .hero-copy { padding-top: 38px; }
  .feature-pills span { font-size: 7px; }
  .preview-frame { height: 460px; min-height: 0; }
  .control-panel { display: block; }
  .style-grid { grid-template-columns: repeat(3, 1fr); }
  .transport { right: 12px; bottom: 12px; width: calc(100% - 24px); }
  .stage-meta { display: block; line-height: 1.9; }
  .footer-band { display: block; font-size: 7px; }
  .footer-band p + p { margin-top: 5px; }
  .recording-card { padding: 28px 22px; }
}