/* Reel Maker: soft pastel theme, easy on the eyes in light and dark. */
:root {
  /* Surfaces and text: warm cream and soft plum ink instead of white and black. */
  --bg: #fbf7f3; --card: #fffdfb; --text: #3b3552; --muted: #7d7690; --line: #ede5ef;
  --chip: #f4eef7;
  /* Pastels */
  --lavender: #cbbcf6; --rose: #f7c6d4; --peach: #ffd8c2; --mint: #bfe6d3; --sky: #c8e2f4;
  --butter: #fbefc0;
  /* Accents dark enough to read on cream (links, focus, progress). */
  --accent: #8f78dc; --accent-2: #e98fae; --accent-text: #3b3552;
  --ok: #4f9f7e; --err: #c2456b;
  --primary: linear-gradient(120deg, #cbbcf6 0%, #f7c6d4 55%, #ffd8c2 100%);
  --shadow: 0 1px 2px rgba(110, 90, 160, .05), 0 10px 30px rgba(110, 90, 160, .08);
  --radius: 22px;
  --wash-1: rgba(203, 188, 246, .45); --wash-2: rgba(255, 216, 194, .45); --wash-3: rgba(191, 230, 211, .4);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1a26; --card: #26222f; --text: #ece7f6; --muted: #aaa3bf; --line: #383246;
    --chip: #2f2a3b;
    --lavender: #8d7cc4; --rose: #b98597; --peach: #c39a86; --mint: #7fae98; --sky: #86a6bd;
    --butter: #4a4330;
    --accent: #b9a8f2; --accent-2: #f2aac2; --accent-text: #241f30;
    --ok: #8fd1b4; --err: #f19ab4;
    --primary: linear-gradient(120deg, #c3b4f2 0%, #f1bccd 55%, #f7cdb6 100%);
    --shadow: 0 10px 30px rgba(0, 0, 0, .25);
    --wash-1: rgba(141, 124, 196, .18); --wash-2: rgba(195, 154, 134, .14); --wash-3: rgba(127, 174, 152, .12);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Soft colour washes behind everything. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40rem 30rem at 0% 0%, var(--wash-1), transparent 70%),
    radial-gradient(36rem 28rem at 100% 10%, var(--wash-2), transparent 70%),
    radial-gradient(40rem 30rem at 50% 110%, var(--wash-3), transparent 70%); }
main { max-width: 680px; margin: 0 auto; padding: 24px 16px 80px; }
a { color: var(--accent); }
header { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.logo { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center;
  background: var(--primary); color: var(--accent-text); font-size: 20px; box-shadow: var(--shadow); }
h1 { font-size: 24px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
header p { margin: 0; color: var(--muted); font-size: 14px; }
section.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
h2 { font-size: 17px; font-weight: 800; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
h2 .n { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--lavender); font-size: 13px; font-weight: 800; color: var(--accent-text); }
section.card:nth-of-type(2) h2 .n { background: var(--peach); }
section.card:nth-of-type(3) h2 .n { background: var(--mint); }
.muted { color: var(--muted); font-size: 14px; }
button, .btn { font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 14px;
  padding: 11px 18px; cursor: pointer; background: var(--chip); color: var(--text); display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-height: 44px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
button:hover:not(:disabled), .btn:hover { transform: translateY(-1px); }
button:focus-visible, .btn:focus-visible, .chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: not-allowed; }
.primary { background: var(--primary); color: var(--accent-text); font-weight: 800;
  box-shadow: 0 6px 18px rgba(203, 160, 220, .35); }
.primary:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(203, 160, 220, .5); }
.wide { width: 100%; }
#generateBtn { min-height: 54px; font-size: 17px; border-radius: 18px; }
.drop { border: 2px dashed var(--lavender); border-radius: 18px; padding: 26px 16px; text-align: center;
  background: color-mix(in srgb, var(--lavender) 10%, transparent);
  transition: border-color .15s, background .15s; }
.drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--lavender) 22%, transparent); }
.drop p { margin: 8px 0 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-top: 16px; }
.tile { position: relative; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: var(--chip);
  cursor: grab; box-shadow: 0 2px 8px rgba(110, 90, 160, .08); }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.tile .ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 6px; font-size: 11px; color: var(--muted); word-break: break-all; }
.tile .x { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; min-height: 0; padding: 0;
  border-radius: 50%; background: rgba(59, 53, 82, .55); color: #fff; font-size: 15px; }
.tile .badge { position: absolute; left: 5px; bottom: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: rgba(255, 253, 251, .85); color: #3b3552; }
.tile .bar { position: absolute; left: 0; bottom: 0; height: 5px; background: var(--primary); transition: width .2s; }
.tile.err { outline: 2px solid var(--err); }
.tile.dragging { opacity: .4; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
input[type=text] { font: inherit; flex: 1; min-width: 0; padding: 11px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); min-height: 44px; }
input[type=text]::placeholder { color: var(--muted); }
input[type=text]:focus { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px;
  border-color: var(--accent); }
.tracks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr); }
.track { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card); min-width: 0; }
.track button { flex: none; }
.track img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--chip); }
.track .meta { flex: 1; min-width: 0; }
.track .meta b, .track .meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track .meta span { color: var(--muted); font-size: 13px; }
.track button { padding: 8px 14px; min-height: 40px; }
.chosen { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--mint) 35%, var(--card)); border: 1px solid var(--mint); }
.chosen img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.chosen .meta { flex: 1; min-width: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 18px;
  font-weight: 600; }
.chip[aria-pressed=true] { background: var(--lavender); color: var(--accent-text); border-color: var(--lavender); }
.chip:disabled { opacity: .45; }
.label { font-size: 13px; font-weight: 700; color: var(--muted); margin: 16px 0 8px; }
.progress { height: 12px; border-radius: 999px; background: var(--chip); overflow: hidden; margin: 14px 0 8px; }
.progress div { height: 100%; width: 0; transition: width .4s ease;
  background: linear-gradient(90deg, var(--lavender), var(--rose), var(--peach), var(--mint)); }
.results { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.result { display: flex; flex-direction: column; gap: 8px; }
.result video { width: 100%; aspect-ratio: 9/16; border-radius: 18px; background: #000; object-fit: cover;
  box-shadow: var(--shadow); }
.result h3 { margin: 4px 0 0; font-size: 16px; font-weight: 800; text-transform: capitalize; }
.result .btn, .result button { padding: 9px 12px; min-height: 40px; font-size: 14px; }
.hint { padding: 12px 16px; border-radius: 16px; background: var(--butter); font-size: 14px; margin-top: 14px; }
.notes { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.error { color: var(--err); font-size: 14px; margin-top: 8px; }
.hidden { display: none !important; }
.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Intro, "How it works" and contact */
.pitch { margin: -6px 0 20px; color: var(--muted); font-size: 15px; }
.pitch a, .site-footer a { color: var(--accent); font-weight: 700; }
.about { margin-top: 28px; }
.steps { list-style: none; counter-reset: step; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; }
.steps li::before { content: counter(step); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--accent-text);
  background: var(--lavender); }
.steps li:nth-child(2)::before { background: var(--peach); }
.steps li:nth-child(3)::before { background: var(--mint); }
.steps li:nth-child(4)::before { background: var(--rose); }
.steps b { font-size: 15px; font-weight: 800; }
.steps span { color: var(--muted); font-size: 14px; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.compare div { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 4px;
  background: var(--card); }
.compare span { color: var(--muted); font-size: 14px; }
.compare .ours { border-color: var(--lavender); background: color-mix(in srgb, var(--lavender) 22%, var(--card)); }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  background: color-mix(in srgb, var(--peach) 18%, var(--card)); }
.contact h2, .contact p { flex-basis: 100%; margin-bottom: 0; }
.contact h2 { margin-bottom: -4px; }
.site-footer { text-align: center; color: var(--muted); font-size: 13px; margin-top: 24px; }