:root{--bg:#f6f8fb;--surface:#fff;--text:#17202a;--muted:#62717d;--border:#d9e0e5;--focus:#2f7de1;--ink:#17202a;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;margin:0}button,select{font:inherit}button{border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;border-radius:6px;min-height:40px;padding:0 16px}button:hover{background:#253341}button:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}select{border:1px solid var(--border);background:var(--surface);min-width:132px;min-height:40px;color:var(--text);border-radius:6px;padding:0 36px 0 12px}.lab-shell{grid-template-rows:auto 1fr;min-height:100svh;display:grid}.lab-toolbar{border-bottom:1px solid var(--border);background:#ffffffeb;justify-content:space-between;align-items:center;gap:20px;padding:16px 24px;display:flex}.lab-title{font-size:18px;font-weight:700;line-height:1.2}.lab-controls{flex-wrap:wrap;align-items:end;gap:12px;display:flex}.control{gap:5px;display:grid}.control span{color:var(--muted);text-transform:uppercase;font-size:12px;font-weight:700;line-height:1.2}.preview{place-items:center;padding:24px;display:grid}.preview-frame{aspect-ratio:16/10;border:1px solid var(--border);background:linear-gradient(90deg, #17202a0a 1px, transparent 1px), linear-gradient(#17202a0a 1px, transparent 1px), var(--surface);background-size:32px 32px;border-radius:8px;place-items:center;width:min(920px,100%);min-height:360px;display:grid;overflow:hidden}.animation-stage{aspect-ratio:1;place-items:center;width:min(420px,72%);display:grid}.lovable-mark,.fox-mascot{width:100%;height:100%;display:block;overflow:visible}.lovable-mark,.lovable-mark__shape,.fox-mascot,.fox-mascot__tail,.fox-mascot__paw,.fox-mascot__head,.fox-mascot__ears,.fox-mascot__eye{will-change:opacity, transform}@media (width<=720px){.lab-toolbar{flex-direction:column;align-items:stretch;padding:14px}.lab-controls{align-items:stretch}.control{flex:140px}select,button{width:100%}.preview{padding:14px}.preview-frame{min-height:300px}.animation-stage{width:min(320px,82%)}}