:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; color: #f9f6ff; background: #0d0b14; }[hidden] { display: none !important; }* { box-sizing: border-box; }body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 10% 0, #3d1e46 0, transparent 30rem), radial-gradient(circle at 90% 90%, #172a5a 0, transparent 32rem), #0d0b14; }.app { width: min(900px, calc(100% - 32px)); margin: auto; padding: 42px 0 64px; }header, .control-head, .toolbar { display: flex; align-items: center; }header, .control-head { justify-content: space-between; gap: 18px; }.eyebrow { margin: 0 0 5px; color: #e1a8d8; font-size: .68rem; font-weight: 800; letter-spacing: .15em; }h1, h2 { margin: 0; letter-spacing: -.045em; }h1 { font-size: clamp(1.8rem, 5vw, 2.75rem); }.status, output { padding: 8px 11px; border-radius: 9px; color: #dfd1fa; background: #262039; font-size: .78rem; font-weight: 750; white-space: nowrap; }.status.ready { color: #adedd3; background: #16382e; }.status.error { color: #ffb8c2; background: #4a1d2a; }.studio { overflow: hidden; margin-top: 27px; border: 1px solid #3b304c; border-radius: 21px; background: #17121e; box-shadow: 0 25px 80px #00000075; }.preview { position: relative; aspect-ratio: 16 / 9; background: #050407; }video, canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }video { transform: scaleX(-1); }canvas { pointer-events: none; }.empty { position: absolute; inset: 0; display: grid; gap: 10px; place-content: center; color: #d8cce1; text-align: center; background: linear-gradient(140deg, #1d142499, #061015aa); }.empty span { font-size: 3.4rem; color: #efa6d5; }.empty p { margin: 0; }.face-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 7px 10px; border-radius: 99px; color: #fee2ec; background: #371927cc; font-size: .76rem; white-space: nowrap; }.toolbar { gap: 10px; padding: 15px; }button { padding: 11px 15px; border: 0; border-radius: 10px; color: #fff; font: inherit; font-weight: 750; cursor: pointer; }button:disabled { opacity: .5; cursor: wait; }.primary { background: linear-gradient(135deg, #b84c87, #705dcc); }.secondary { border: 1px solid #4b405f; background: #251e30; }.controls { margin-top: 18px; padding: 22px; border: 1px solid #3b304c; border-radius: 17px; background: #17121ecc; }h2 { font-size: 1.35rem; }.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin: 19px 0 23px; }.swatch { aspect-ratio: 1; padding: 0; border: 3px solid transparent; border-radius: 50%; background: var(--color); box-shadow: inset 0 0 0 2px #ffffff44; }.swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--color); }.slider-label { display: flex; justify-content: space-between; margin-bottom: 5px; color: #d4cbdc; font-size: .84rem; font-weight: 700; }.slider-label output { padding: 0; color: #eab3d9; background: transparent; }input[type="range"] { width: 100%; accent-color: #d768a8; }.notice { margin: 16px 0 0; color: #9f94ab; font-size: .76rem; line-height: 1.55; }@media (max-width: 560px) { .app { width: min(100% - 24px, 900px); padding-top: 27px; }header { align-items: flex-start; flex-direction: column; }.swatches { grid-template-columns: repeat(6, 1fr); }.toolbar { flex-wrap: wrap; }.toolbar button { flex: 1; } }