:root{
  --bg:#f6f9ff;
  --panel:#ffffff;
  --text:#0f1724;
  --accent:#4a9eff;
  --muted:#6b7280;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  background:linear-gradient(180deg,var(--bg),#eef4ff);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.page{width:680px;max-width:96%;}
h1{margin:0 0 20px;font-size:20px}
.demo{background:var(--panel);padding:24px;border-radius:12px;box-shadow:0 6px 18px rgba(15,23,36,0.06)}
.bulb{
  width:160px;height:160px;border-radius:50%;margin:0 auto 14px;background:radial-gradient(circle at 35% 30%, #ffffff 0%, #f7fbff 25%, #f1f5ff 70%), #fafafa;
  position:relative;transition:box-shadow 240ms ease, filter 240ms ease, background 240ms ease;
  border:1px solid rgba(15,23,36,0.06);
}
.bulb::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-18px;width:90px;height:36px;border-radius:8px;background:linear-gradient(180deg,#dfe7f8,#c9d6f0);
}
.bulb.on{
  background: radial-gradient(circle at 35% 30%, #fffde6 0%, #fff4c2 20%, #ffeda0 55%, #ffd067 80%);
  box-shadow:0 0 40px 12px rgba(74,158,255,0.14), inset 0 10px 40px rgba(200,228,255,0.12);
  filter:brightness(1.03) saturate(1.05);
}
.controls{display:flex;gap:12px;align-items:center;justify-content:center;margin-bottom:8px}
.btn{background:transparent;border:1px solid rgba(15,23,36,0.08);color:var(--text);padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:600}
.btn:focus{outline:3px solid rgba(74,158,255,0.18);outline-offset:2px}
.btn.secondary{border-style:dashed;color:var(--muted)}
.hint{color:var(--muted);text-align:center;margin:8px 0 0}
footer{margin-top:14px;color:var(--muted);font-size:13px;text-align:center}

/* small responsive tweaks */
@media (max-width:420px){
  .bulb{width:120px;height:120px}
}

/* Credit line styling */
.credit {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}