/* Wave Studio UI shell. Colours and type come from the design handoff (README "Design tokens"). */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/newsreader-500-latin.woff2?v=d411a65041) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/newsreader-500-latin-ext.woff2?v=2c3f4a0da8) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --page: #141418;
  --panel: #17171c;
  --ink: #0f1014;
  --cream: #ebe6dc;
  --cream-hover: #f5f1e9;
  --line: rgba(235, 230, 220, 0.1);
  --line-strong: rgba(235, 230, 220, 0.14);
  --fill: rgba(235, 230, 220, 0.06);
  --fill-hover: rgba(235, 230, 220, 0.11);
  --muted: rgba(235, 230, 220, 0.6);
  --soft: rgba(235, 230, 220, 0.74);
  --readout: rgba(235, 230, 220, 0.7);
  --error: #e8906a;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --h-btn: 32px;
  --h-seg: 28px;
  --swatch: 26px;
  --switch-w: 34px;
  --switch-h: 20px;
  color-scheme: dark;
}
@media (pointer: coarse) {
  /* Mouse-sized controls are too small for fingers. */
  :root { --h-btn: 40px; --h-seg: 36px; --swatch: 34px; --switch-w: 44px; --switch-h: 26px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--cream);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
}
a { color: var(--cream); }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* Header */
.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 22px 28px 8px;
  flex-wrap: wrap;
}
.title {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}
.tagline { font-size: 13px; color: var(--muted); }

/* Layout */
.main {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 12px 28px 40px;
  align-items: flex-start;
  flex: 1 0 auto;
}
.preview {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Side by side, the preview stays in view while the settings scroll past it. */
@media (min-width: 838px) {
  .preview { position: sticky; top: 16px; }
}

/* The stage is the preview area. JS sizes the canvas inside it to the exact export frame, so
   Green screen and Transparent colour only the frame, not the letterbox around it. */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 72vh;
  max-height: 72svh;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ink);
}
.stage canvas {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ink);
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.stage.ready canvas { opacity: 1; }
.drop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 16, 20, 0.78);
  border: 2px dashed rgba(235, 230, 220, 0.45);
  border-radius: 12px;
  pointer-events: none;
}
.drop p { font-size: 14px; font-weight: 500; }

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

/* Arrange: handles over the parts, centre guides while snapping, and in 9:16 the areas the apps cover */
.arrange-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; margin-top: -4px; }
.arrange-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
@media (pointer: coarse) {
  .keys-hint { display: none; }
}
.arrange-layer { position: absolute; }
.handle {
  position: absolute;
  padding: 0;
  border: 1px dashed rgba(235, 230, 220, 0.6);
  border-radius: 6px;
  background: rgba(235, 230, 220, 0.04);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.handle:hover { border-color: var(--cream); background: rgba(235, 230, 220, 0.09); }
.handle.dragging { cursor: grabbing; border-style: solid; border-color: var(--cream); background: rgba(235, 230, 220, 0.12); }
.handle:focus-visible { outline: 2px solid var(--cream); outline-offset: 1px; border-style: solid; }
.handle-tag {
  position: absolute;
  left: -1px;
  bottom: 100%;
  margin-bottom: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--cream);
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.handle.tag-below .handle-tag { bottom: auto; top: 100%; margin: 3px 0 0; }
.guide { position: absolute; background: var(--cream); opacity: 0.85; pointer-events: none; }
.guide-x { top: 0; bottom: 0; left: 50%; width: 1px; }
.guide-y { left: 0; right: 0; top: 50%; height: 1px; }
.safe { position: absolute; inset: 0; pointer-events: none; }
/* 220 px top, 480 px bottom, a 140 px button column from 840 px down, of a 1080 × 1920 frame */
.safe i { position: absolute; background: repeating-linear-gradient(135deg, rgba(232, 144, 106, 0.16) 0 6px, rgba(232, 144, 106, 0.05) 6px 12px); }
.safe-top { left: 0; right: 0; top: 0; height: 11.46%; }
.safe-bottom { left: 0; right: 0; bottom: 0; height: 25%; }
.safe-right { right: 0; width: 12.96%; top: 43.75%; bottom: 25%; }
.scrub { flex: 1; min-width: 0; margin: 0; }
input[type=range] { accent-color: var(--cream); cursor: pointer; }
input[type=range]:disabled { cursor: default; opacity: 0.5; }
.readout {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--readout);
  text-align: right;
}
.readout.time { min-width: 86px; }
.readout.opacity { width: 38px; flex: none; }
.readout.pct { min-width: 36px; color: var(--cream); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h-btn);
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--fill);
  color: var(--cream);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--fill-hover); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--fill); }
.btn-play { height: max(34px, var(--h-btn)); min-width: 72px; padding: 0 14px; font-weight: 500; }
.btn-primary { background: var(--cream); color: var(--ink); border-color: var(--cream); padding: 0 14px; font-weight: 500; }
.btn-primary:hover { background: var(--cream-hover); }
.btn-sm { height: var(--h-seg); padding: 0 10px; border-radius: 7px; font-size: 12px; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn-quiet:hover { background: var(--fill); color: var(--cream); }
.btn-export {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
  font-size: 14px;
  font-weight: 600;
}
.btn-export:hover { background: var(--cream-hover); }
.btn-export:disabled:hover { background: var(--cream); }
/* After the base rules, so they win over .btn and .btn:hover (a hover sticks after a tap on phones). */
.btn-arrange[aria-pressed="true"], .btn-done { background: var(--cream); color: var(--ink); border-color: var(--cream); font-weight: 500; }
.btn-arrange[aria-pressed="true"]:hover, .btn-done:hover { background: var(--cream-hover); }

/* Settings panel: blocks separated by hairlines, serif block titles, a label column for fields */
.panel {
  /* The handoff's 340px/260px were content-box sizes; + 18px padding and 1px border each side. */
  flex: 0 1 378px;
  min-width: 298px;
  display: flex;
  flex-direction: column;
  padding: 4px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.settings { display: flex; flex-direction: column; transition: opacity 160ms ease-out; }
.settings[inert], .sub[inert] { opacity: 0.5; }
.block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.settings > .block:first-child { border-top: 0; }
.block.export { padding-bottom: 0; }
.block-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
}
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help { font-size: 12px; line-height: 1.45; color: var(--muted); }
.help.error { color: var(--error); }
.sub { display: flex; flex-direction: column; gap: 12px; transition: opacity 160ms ease-out; }
.field {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}
.field-stack { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
.field-label { font-size: 12px; color: var(--muted); }
.slider { display: flex; align-items: center; gap: 10px; min-width: 0; }
.slider input { flex: 1; min-width: 0; margin: 0; }

/* Segmented control: one track, the chosen option filled cream */
.seg {
  display: inline-flex;
  justify-self: start;
  max-width: 100%;
  padding: 2px;
  gap: 2px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(235, 230, 220, 0.035);
}
.seg-fill { display: flex; }
.seg-fill .seg-opt { flex: 1 1 auto; }
.seg-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--h-seg);
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--soft);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.seg-opt:hover { background: rgba(235, 230, 220, 0.07); color: var(--cream); }
.seg-opt[aria-checked="true"] { background: var(--cream); color: var(--ink); }
.seg-opt:focus-visible { outline-offset: 0; }
.font-serif { font-family: var(--serif); font-size: 14px; }
.ratio { display: inline-block; flex: none; border: 1.5px solid currentColor; border-radius: 2px; }
.ratio-v { width: 8px; height: 13px; }
.ratio-l { width: 14px; height: 8px; }
.ratio-s { width: 11px; height: 11px; }
.ratio-f { width: 10px; height: 12px; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(235, 230, 220, 0.35); }
.dot-ink { background: #0f1014; }
.dot-green { background: #00b140; }
.dot-clear { background: repeating-conic-gradient(#6a6b73 0 25%, #2a2b33 0 50%) 0 0 / 4px 4px; }
.dot-photo { background: #3a3530 center / cover no-repeat; }
.dot-accent { background: var(--accent, #9a93b5); }
.seg-opt[aria-checked="true"] .dot { border-color: rgba(15, 16, 20, 0.35); }
.shape { flex: none; width: 10px; height: 10px; border: 1.5px solid currentColor; }
.shape-circle { border-radius: 50%; }
.shape-rounded { border-radius: 3px; }
.mini { flex: none; width: 16px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* Four longer options: two rows of two, same track and fill as the single-row control */
.seg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; }
.seg-grid .seg-opt { justify-content: flex-start; min-width: 0; }

/* Thumbnails drawn by the engine (Design, Wave style) */
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.thumb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 5px 5px 7px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(235, 230, 220, 0.025);
  color: var(--soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.thumb:hover { border-color: rgba(235, 230, 220, 0.28); color: var(--cream); }
.thumb[aria-checked="true"] { border-color: var(--cream); background: rgba(235, 230, 220, 0.06); color: var(--cream); }
.thumb-frame { display: grid; place-items: center; height: 84px; border-radius: 6px; background: var(--ink); overflow: hidden; }
.thumbs-wave .thumb-frame { height: 40px; }
/* Seven designs: four across in a full-width panel, three when it narrows */
.thumbs-design { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.thumbs-design .thumb-frame { height: 80px; }
.thumbs-design .thumb-label { white-space: normal; line-height: 1.15; }
.thumb canvas { display: block; }
.glyph { display: block; width: 72px; height: 28px; max-width: 92%; }
.g-fill { fill: var(--accent, #9a93b5); fill-opacity: 0.55; }
.g-line { fill: none; stroke: var(--cream); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.g-soft { fill: none; stroke: var(--accent, #9a93b5); stroke-width: 1.2; stroke-linecap: round; opacity: 0.75; }
.g-bar { fill: var(--accent, #9a93b5); }
.g-hi { fill: var(--cream); }
.thumb-label { line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Accent */
.swatches { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.swatch-set { display: flex; gap: 8px; }
.swatch {
  width: var(--swatch);
  height: var(--swatch);
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(235, 230, 220, 0.15);
  background: var(--c, transparent);
  cursor: pointer;
  transition: border-color 120ms ease-out;
}
.swatch:hover { border-color: rgba(235, 230, 220, 0.4); }
.swatch[aria-checked="true"] { border-color: var(--cream); }
.custom { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.custom input {
  width: var(--swatch);
  height: var(--swatch);
  padding: 0;
  border: 2px solid rgba(235, 230, 220, 0.15);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.custom input::-webkit-color-swatch-wrapper { padding: 0; }
.custom input::-webkit-color-swatch { border: none; border-radius: 50%; }
.custom input::-moz-color-swatch { border: none; border-radius: 50%; }
.custom.on input { border-color: var(--cream); }
.custom.on { color: var(--cream); }

/* Switches */
.field > .switch { justify-self: start; }
.switch-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
label.field-label { cursor: pointer; }
.switch {
  position: relative;
  flex: none;
  width: var(--switch-w);
  height: var(--switch-h);
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(235, 230, 220, 0.08);
  cursor: pointer;
  transition: background-color 140ms ease-out, border-color 140ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--switch-h) - 6px);
  height: calc(var(--switch-h) - 6px);
  border-radius: 50%;
  background: rgba(235, 230, 220, 0.7);
  transition: transform 140ms ease-out, background-color 140ms ease-out;
}
.switch[aria-checked="true"] { background: var(--cream); border-color: var(--cream); }
.switch[aria-checked="true"]::after { transform: translateX(calc(var(--switch-w) - var(--switch-h))); background: var(--ink); }

/* Voiceover */
.voice-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px dashed rgba(235, 230, 220, 0.22);
  border-radius: 10px;
}
.voice-file { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 10px 12px; border-radius: 10px; background: rgba(235, 230, 220, 0.04); }
.voice-spark { display: block; width: 100%; height: 30px; }
.voice-row { display: flex; align-items: center; gap: 6px; }
.voice-name { flex: 1; min-width: 0; display: flex; gap: 8px; font-size: 13px; }
.voice-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-dur { flex: none; color: var(--readout); font-variant-numeric: tabular-nums; }

/* Moved by hand */
.moved { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 8px; background: rgba(235, 230, 220, 0.05); }

/* Profile picture */
.pic-row { display: flex; align-items: center; gap: 14px; }
.pic { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); background: #2a2b33; }
.pic-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Name caption */
.caption-fields { display: flex; flex-direction: column; gap: 12px; transition: opacity 160ms ease-out; }
.caption-fields.off { opacity: 0.45; }
.text {
  width: 100%;
  height: var(--h-btn);
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--fill);
  color: var(--cream);
  font-size: 13px;
  outline: none;
  transition: border-color 120ms ease-out;
}
.text::placeholder { color: rgba(235, 230, 220, 0.35); }
.text:focus, .num:focus { border-color: rgba(235, 230, 220, 0.45); }
.text:focus-visible, .num:focus-visible { outline: none; }

/* Export */
.len-custom { display: flex; align-items: center; gap: 6px; }
.num {
  width: 52px;
  height: var(--h-seg);
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: var(--fill);
  color: var(--cream);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.num::-webkit-inner-spin-button, .num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.unit { font-size: 12px; color: var(--muted); margin-right: 6px; }
.progress { display: flex; flex-direction: column; gap: 10px; }
.progress-row { display: flex; align-items: center; gap: 10px; }
.progress-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(235, 230, 220, 0.12);
  overflow: hidden;
}
.progress-fill { height: 100%; width: 0; background: var(--cream); }
.download { display: flex; gap: 8px; }
.btn-download {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(235, 230, 220, 0.3);
  color: var(--cream);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.btn-download:hover { background: var(--fill); border-color: rgba(235, 230, 220, 0.5); }
.btn-share { height: 42px; border-radius: 10px; padding: 0 14px; font-size: 14px; }

@media (pointer: coarse) {
  /* iOS zooms the page when a focused input is under 16px. */
  .text, .num { font-size: 16px; }
}

.missing { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 16px; }
.missing p { font-size: 14px; color: var(--muted); }
.missing .label { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.foot { padding: 0 28px 28px; }
.foot p { font-size: 12px; color: rgba(235, 230, 220, 0.45); }

/* Under 838px the columns wrap (380 + 24 + 378 + 56 gutters); the panel then spans the page. */
@media (max-width: 837px) {
  .panel { flex: 1 1 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}