/* Everyone Happy — Balloon Sky */
:root{
  --bg: #070b14;
  --fg: #e8eefc;
  --muted:#94a3b8;
  --accent:#e2b714;
  --panel:#0c1322;
  --ring: rgba(226, 183, 20, .6);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1200px 800px at 50% 20%, #0b1224 0%, #070b14 40%, #050912 100%);color:var(--fg);}
.page{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;}

.hero{padding:7vh 5vw 2rem;text-align:center}
h1{font-weight:800;letter-spacing:.4px;font-size:clamp(36px,5vw,64px);margin:0}
.tagline{margin:.5rem 0 1.5rem;color:var(--muted);font-size:clamp(16px,2.2vw,22px)}
.cta{appearance:none;border:none;background:linear-gradient(180deg,#1a2339,#121a2c);color:#fff;
  padding:.95rem 1.25rem;border-radius:14px;box-shadow:0 0 0 2px rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.35);
  font-weight:700;letter-spacing:.2px;cursor:pointer;transition:.2s transform, .2s box-shadow}
.cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.45), 0 0 0 3px rgba(255,255,255,.07) inset}

.canvas-wrap{position:relative; height:62vh; margin:0 4vw 2rem; border-radius:20px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05) inset; background:radial-gradient(900px 600px at 50% 100%, rgba(255,214,102,.06), transparent 60%);}
#sky{display:block;width:100%;height:100%}

.tooltip{position:absolute;max-width:280px;background:rgba(12,19,34,.92);padding:.7rem .85rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);backdrop-filter: blur(6px);filter: drop-shadow(0 12px 20px rgba(0,0,0,.45));pointer-events:none}
.tooltip p{margin:0 0 .2rem}
.tooltip .meta{color:var(--muted);font-size:12px}

.foot{display:flex;justify-content:space-between;align-items:center;padding:1rem 4vw 2.5rem;color:var(--muted)}
.ghost{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--fg);padding:.6rem .85rem;border-radius:12px;cursor:pointer}
.ghost:hover{border-color:rgba(255,255,255,.25)}
.dot{margin:0 .5rem}

dialog{border:none;border-radius:16px;padding:0;background:rgba(10,16,30,.92);
  color:var(--fg);width:min(540px,92vw); box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset}
dialog::backdrop{background:rgba(3,6,12,.55);backdrop-filter: blur(3px)}

.composer{padding:1.1rem 1.1rem 0}
.composer h2{margin:.2rem 0 1rem;font-size:22px}
.field{display:block;margin:.8rem 0}
.field span{display:block;margin:0 0 .4rem;color:var(--muted);font-size:14px}
textarea{width:100%;min-height:100px;border-radius:12px;border:1px solid rgba(255,255,255,.15);padding:.8rem;background:rgba(255,255,255,.03);color:var(--fg);resize:vertical}
.hint{display:flex;justify-content:flex-end;color:var(--muted);font-size:12px;margin-top:.2rem}

.colors{display:flex;gap:.6rem;margin-top:.2rem;flex-wrap:wrap}
.colors button{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:var(--c);cursor:pointer;box-shadow:0 0 0 2px rgba(0,0,0,.35) inset}
.colors button.selected{outline:3px solid var(--ring)}

.actions{display:flex;justify-content:flex-end;gap:.6rem;padding:0 1.1rem 1.1rem}
.primary{background:linear-gradient(180deg,#f3c84c,#e2b714);color:#1a1300;border:none;border-radius:12px;padding:.6rem .9rem;font-weight:800;cursor:pointer}
.primary:hover{filter:brightness(1.05)}