@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap";:root{--bg: #0f0f14;--panel: #171a22;--panel-light: #1e2230;--text: #f5f5f5;--muted: #9aa2b2;--accent: #ff5a5f;--border: rgba(255, 255, 255, .08);color-scheme:dark;font-family:Space Grotesk,system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(circle at top left,#202637,#0f0f14 60%);color:var(--text);min-height:100vh}button{font-family:inherit;border:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.app{display:flex;flex-direction:column;gap:24px;padding:24px clamp(16px,4vw,48px) 32px}.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--muted)}h1{font-size:clamp(28px,4vw,44px);margin-top:8px}.subtext{margin-top:8px;color:var(--muted);max-width:420px}.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.primary{padding:12px 20px;background:var(--accent);color:#111;border-radius:999px;font-weight:600;box-shadow:0 12px 30px #ff5a5f4d}.primary:hover{transform:translateY(-1px)}.ghost{padding:12px 18px;background:transparent;border:1px solid var(--border);color:var(--text);border-radius:999px}.status{font-family:Space Mono,monospace;font-size:12px;padding:6px 12px;border-radius:999px;background:var(--panel-light);border:1px solid var(--border)}.status.ready{color:#3ddc97}.stage{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px}.canvas-wrap{position:relative;border-radius:24px;overflow:hidden;background:#0b0d14;border:1px solid var(--border);aspect-ratio:16 / 9}.video{position:absolute;width:180px;height:120px;right:16px;bottom:16px;border-radius:16px;object-fit:cover;border:1px solid var(--border);opacity:.8;transform:scaleX(-1)}.paint-canvas,.overlay-canvas{width:100%;height:100%;display:block}.paint-canvas{background:#fdfdfb}.overlay-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.toolbar{display:flex;flex-direction:column;gap:16px;padding:18px;background:var(--panel);border-radius:20px;border:1px solid var(--border)}.section h3{font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.swatch{width:36px;height:36px;border-radius:10px;border:2px solid transparent}.swatch.active{border-color:#fff;box-shadow:0 0 0 3px #ffffff1a}.size{min-width:44px;padding:8px 12px;border-radius:999px;background:var(--panel-light);color:var(--text);border:1px solid transparent}.size.active{border-color:#fff}.tips{color:var(--muted);font-size:14px;line-height:1.5}@media (max-width: 900px){.stage{grid-template-columns:1fr}.toolbar{order:-1}}