:root{--ivory:#f5f1e8;--black:#17161a;--charcoal:#4a4842;--charcoal-soft:#8b8780;--hairline:#17161a2e;--font-serif:"Fraunces", Georgia, serif;--font-sans:"Inter", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{min-height:100vh;margin:0}body{background:var(--ivory);color:var(--black);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--font-serif);letter-spacing:.01em;margin:0;font-weight:500}button{font-family:var(--font-sans)}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-header{border-bottom:1px solid var(--hairline);padding:2.5rem clamp(1.5rem,4vw,3.5rem) 1.5rem}.app-header h1{font-size:clamp(1.75rem,3vw,2.5rem)}.app-header p{color:var(--charcoal);margin:.4rem 0 0;font-size:.95rem}.app-main{flex:1;grid-template-columns:360px 1fr;gap:0;display:grid}@media (width<=860px){.app-main{grid-template-columns:1fr}}.controls-panel{border-right:1px solid var(--hairline);flex-direction:column;gap:1.75rem;padding:clamp(1.5rem,3vw,2.5rem);display:flex}@media (width<=860px){.controls-panel{border-right:none;border-bottom:1px solid var(--hairline)}}.preview-panel{flex-direction:column;gap:1.5rem;padding:clamp(1.5rem,3vw,2.5rem);display:flex}.swatch-frame{aspect-ratio:4/3;border:1px solid var(--hairline);background:#fff;overflow:hidden}.mockup-row{gap:1.5rem;display:flex}.mockup{width:160px;margin:0}.mockup svg{border:1px solid var(--hairline);background:#fff;width:100%;height:auto}.mockup figcaption{color:var(--charcoal);text-align:center;margin-top:.4rem;font-size:.8rem}.vibe-input form{gap:.5rem;display:flex}.vibe-input label{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.vibe-input input[type=text]{border:1px solid var(--hairline);font-family:var(--font-sans);background:#fff;flex:1;padding:.55rem .7rem;font-size:.9rem}.vibe-input button[type=submit]{border:1px solid var(--black);background:var(--black);color:var(--ivory);cursor:pointer;padding:.55rem 1rem;font-size:.85rem}.vibe-input button[type=submit]:disabled{color:var(--charcoal-soft);border-color:var(--hairline);cursor:not-allowed;background:0 0}.vibe-hint{color:var(--charcoal);margin:.5rem 0 0;font-size:.8rem}.vibe-error{color:#8a2b2b;margin:.5rem 0 0;font-size:.8rem}.vibe-chips{flex-wrap:wrap;gap:.4rem;margin-top:.75rem;display:flex}.vibe-chip{border:1px solid var(--hairline);cursor:pointer;color:var(--charcoal);background:0 0;border-radius:999px;padding:.3rem .7rem;font-size:.78rem}.vibe-chip:hover:not(:disabled){border-color:var(--black);color:var(--black)}.vibe-chip:disabled{opacity:.5;cursor:not-allowed}.scale-control{color:var(--charcoal);align-items:center;gap:.6rem;margin-bottom:.75rem;font-size:.85rem;display:flex}.scale-control input[type=range]{flex:1}.regenerate-button{border:1px solid var(--hairline);cursor:pointer;background:0 0;padding:.45rem .9rem;font-size:.85rem}.regenerate-button:disabled{opacity:.4;cursor:not-allowed}.download-button{border:1px solid var(--black);background:var(--black);color:var(--ivory);cursor:pointer;width:100%;padding:.55rem 1rem;font-size:.85rem}.download-button:disabled{opacity:.5;cursor:not-allowed}.controls-panel h2{margin-bottom:.75rem;font-size:1rem}.palette-picker{flex-direction:column;gap:.6rem;display:flex}.palette-swatch-row{flex-direction:column;gap:.3rem;display:flex}.palette-swatch{cursor:pointer;align-items:center;gap:.6rem;display:flex}.palette-swatch input[type=color]{opacity:0;width:1px;height:1px;position:absolute}.palette-swatch-chip{border:1px solid var(--hairline);border-radius:50%;flex-shrink:0;width:28px;height:28px}.palette-swatch-label{color:var(--charcoal);font-size:.85rem}.palette-swatch-actions{gap:.4rem;display:flex}.palette-swatch-actions button{border:1px solid var(--hairline);cursor:pointer;background:0 0;border-radius:2px;width:26px;height:26px}.palette-swatch-actions button:disabled{opacity:.3;cursor:not-allowed}.palette-warning{color:#8a5a2b;margin:0;font-size:.8rem}.palette-warning button{cursor:pointer;color:inherit;font-size:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.palette-add{border:1px solid var(--hairline);cursor:pointer;background:0 0;align-self:flex-start;padding:.4rem .8rem;font-size:.85rem}.palette-add:disabled{opacity:.3;cursor:not-allowed}.palette-suggestion{color:var(--charcoal);margin-top:.75rem;font-size:.85rem}.palette-suggestion button{cursor:pointer;color:var(--black);font-size:inherit;background:0 0;border:none;padding:0;text-decoration:underline}