:root { --ink:#12211d; --muted:#65736e; --paper:#f6f6f1; --line:#d9ddd4; --mint:#dff66b; --aqua:#70e2c0; --danger:#b6422c; --panel:#fffefa; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font:16px/1.55 Arial, Helvetica, sans-serif; }
button, input { font:inherit; }
.shell { max-width:1440px; margin:auto; padding:24px 32px 64px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:0 0 30px; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-.06em; font-size:20px; }.brand span { color:#1b8e75; }.topbar p { margin:0; color:var(--muted); font-size:13px; }
.hero { padding:72px 0 38px; }.eyebrow,.kicker { color:#267d68; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.eyebrow span { display:inline-block; width:8px; height:8px; margin-right:8px; background:var(--mint); border:1px solid var(--ink); transform:rotate(45deg); }
h1,h2,p { margin-top:0; } h1 { max-width:760px; margin:12px 0 12px; font-size:clamp(43px,6vw,86px); line-height:.94; letter-spacing:-.075em; } .lede { max-width:620px; margin-bottom:42px; color:var(--muted); font-size:18px; }
.workspace { display:grid; grid-template-columns:1fr 34px 1fr; gap:18px; align-items:start; }.input-panel,.generation-panel { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 12px 32px rgba(19,33,29,.04); }.panel-heading { display:flex; gap:12px; align-items:flex-start; margin-bottom:20px; }.step { flex:0 0 28px; height:28px; display:grid; place-items:center; background:var(--ink); color:var(--mint); border-radius:50%; font-size:11px; font-weight:bold; }.panel-heading h2 { margin:0; font-size:17px; line-height:1.15; letter-spacing:-.03em; }.panel-heading p { margin:2px 0 0; color:var(--muted); font-size:13px; }.flow-arrow { align-self:center; display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; color:#287c68; }
.drop-zone { min-height:204px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:22px; text-align:center; border:1.5px dashed #b9c9c1; border-radius:12px; background:#fbfcf8; cursor:pointer; transition:background .16s, border-color .16s, transform .16s; }.drop-zone:hover,.drop-zone:focus-within,.drop-zone.is-dragging { background:#f4ffe7; border-color:#3f9a80; transform:translateY(-2px); }.drop-zone input { width:1px; height:1px; opacity:0; position:absolute; }.upload-mark { display:grid; place-items:center; width:34px; height:34px; margin-bottom:10px; border-radius:50%; background:var(--mint); font-size:20px; line-height:1; }.drop-zone strong { font-size:15px; }.drop-zone small { margin:4px 0 13px; color:var(--muted); font-size:12px; }.browse { padding:6px 11px; border:1px solid var(--ink); border-radius:99px; font-size:12px; font-weight:bold; }
.file-card { display:flex; gap:10px; align-items:center; margin-top:10px; padding:9px 10px; border-radius:9px; background:#eef6ed; font-size:12px; }.file-type { color:#176d5b; font-size:10px; font-weight:800; }.file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }.remove { width:23px; height:23px; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; }.remove:hover { background:#dae6dc; color:var(--ink); }
.generation-panel { grid-column:1/-1; margin-top:2px; }.result-empty { min-height:132px; display:flex; align-items:center; justify-content:center; gap:12px; border-radius:12px; background:linear-gradient(120deg,#eef6ed,#f9f7ed); color:var(--muted); text-align:center; }.spark { color:#14735f; font-size:25px; }.result-empty p { margin:0; max-width:260px; }.result-ready video { display:block; width:100%; max-height:460px; border-radius:12px; background:#10231e; }.download { display:inline-flex; gap:10px; margin-top:14px; padding:11px 15px; color:var(--ink); text-decoration:none; background:var(--aqua); border-radius:8px; font-size:14px; font-weight:800; }.download:focus-visible,.generate:focus-visible,.remove:focus-visible { outline:3px solid #277a67; outline-offset:3px; }.generate-row { display:flex; align-items:center; gap:15px; margin-top:20px; }.generate { border:0; border-radius:9px; padding:13px 17px; color:var(--ink); background:var(--mint); cursor:pointer; font-weight:800; transition:transform .15s,background .15s; }.generate:hover { transform:translateY(-1px); background:#d1f04b; }.generate:active { transform:translateY(1px); }.status { color:var(--muted); font-size:13px; }.status.error { color:var(--danger); }.status.working { color:#267d68; }.local-note { margin:15px 2px 0; color:var(--muted); font-size:12px; }
.details { display:grid; grid-template-columns:1.05fr .9fr 1fr; gap:22px; padding-top:42px; border-top:1px solid var(--line); }.details article { padding:24px 0; }.details h2 { max-width:340px; margin-bottom:11px; font-size:28px; line-height:1.03; letter-spacing:-.05em; }.details p { max-width:440px; color:var(--muted); }.details ol { list-style:none; margin:0; padding:0; }.details li { padding:10px 0; border-bottom:1px solid var(--line); }.details li b { display:inline-block; width:38px; color:#267d68; font-size:11px; } details { border-bottom:1px solid var(--line); padding:10px 0; } summary { cursor:pointer; font-size:14px; font-weight:700; } details p { margin:8px 0 0; font-size:14px; }
@media (max-width:700px) { .shell { padding:18px 16px 40px; }.topbar { padding-bottom:22px; }.hero { padding:45px 0 26px; }.lede { font-size:16px; }.workspace { grid-template-columns:1fr; gap:12px; }.flow-arrow { width:30px; height:30px; justify-self:center; transform:rotate(90deg); }.input-panel,.generation-panel { padding:18px; border-radius:14px; }.drop-zone { min-height:176px; }.generation-panel { grid-column:auto; }.generate-row { align-items:stretch; flex-direction:column; gap:9px; }.generate { min-height:48px; width:100%; }.details { grid-template-columns:1fr; gap:0; padding-top:24px; }.details article { padding:20px 0; border-bottom:1px solid var(--line); }.details h2 { font-size:25px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }
.generate:disabled { cursor:not-allowed; opacity:.53; }
.generate:hover:disabled,.generate:active:disabled { transform:none; background:var(--mint); }
.site-footer { display:flex; justify-content:center; gap:18px; padding:20px 16px 34px; color:var(--muted); font-size:13px; }.site-footer a,.quiet-link { color:inherit; text-decoration:none; }.site-footer a:hover,.quiet-link:hover { color:#267d68; text-decoration:underline; }.legal-shell { min-height:calc(100vh - 84px); }.legal { max-width:720px; padding:72px 0 42px; }.legal h1 { font-size:clamp(42px,6vw,76px); }.legal p { max-width:640px; color:var(--muted); font-size:17px; }.legal strong { color:var(--ink); }