:root{--cream:#fff7ef;--cloud:#fff;--ink:#2f2a45;--slate:#6b7a90;--sky:#3fa9e0;--sky-deep:#1f7db3;--sky-mist:#e6f4fc;--sprout:#5fb86a;--sprout-deep:#3e9a4a;--sprout-mist:#e4f4e6;--blush:#ffaec0;--blush-deep:#e8718c;--blush-mist:#ffedf1;--coral:#f2876f;--coral-mist:#fdeae4;--sunny:#ffd36e;--r-sm:12px;--r-md:20px;--r-lg:32px;--r-pill:999px;--shadow-soft:0 8px 24px #2f2a4514, 0 2px 6px #2f2a450d;--shadow-lift:0 16px 40px #2f2a451f;--squish:inset 0 -5px 0 #2f2a451a;--font-display:"Fredoka","Trebuchet MS",system-ui,sans-serif;--font-body:"Nunito",system-ui,-apple-system,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--ease:cubic-bezier(.34,1.56,.64,1)}*{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}html,body{margin:0;padding:0}body{background:var(--cream);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6}h1,h2,h3{font-family:var(--font-display);color:var(--ink);margin:0}:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}button{font-family:var(--font-display)}.btn{font-family:var(--font-display);cursor:pointer;border-radius:var(--r-pill);box-shadow:var(--squish);transition:transform .12s var(--ease), filter .15s;border:0;padding:14px 26px;font-size:1rem;font-weight:600}.btn:hover{filter:brightness(1.04)}.btn:active{transform:translateY(3px);box-shadow:inset 0 -2px #2f2a451a}.btn:disabled{color:#a99e8e;cursor:not-allowed;box-shadow:none;background:#e7ded2;transform:none}.btn-primary{background:var(--sky);color:#fff}.btn-ghost{background:var(--cloud);color:var(--sky-deep);box-shadow:var(--shadow-soft)}.btn-sprout{background:var(--sprout);color:#fff}.btn-sm{padding:9px 18px;font-size:.9rem}@keyframes screenIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes idle{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes toastPop{0%{opacity:0;transform:translate(-50%,-50%)scale(.85)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes popIn{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.07)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}.wrap{max-width:1040px;margin:0 auto;padding:16px 16px 40px}.card{background:var(--cloud);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);padding:18px}.chip{font-family:var(--font-display);cursor:pointer;background:var(--cloud);color:var(--sky-deep);border:2px solid var(--sky-mist);border-radius:var(--r-pill);box-shadow:var(--shadow-soft);transition:transform .12s var(--ease), box-shadow .15s;padding:9px 16px;font-size:.95rem;font-weight:600}.chip:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}.chip:active{transform:translateY(1px)}.builder-grid{grid-template-columns:1fr;gap:16px;display:grid}.preview-box{height:56vh;min-height:320px}@media (min-width:860px){.builder-grid{grid-template-columns:1.05fr .95fr;align-items:stretch}.preview-box{height:70vh;min-height:460px}}.slot-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}@media (min-width:620px){.slot-grid{grid-template-columns:repeat(3,1fr)}}