:root{
  --bg:#0a0d16;--panel:#111827;--panel2:#1c2438;--panel3:#242f45;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);
  --accent:#f59e0b;--accent2:#6366f1;--accent3:#10b981;--accent4:#ef4444;
  --text:#e8edf8;--muted:#8b93a0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;}
body{display:flex;flex-direction:column;}

.hero{padding:32px 16px 24px;text-align:center;background:linear-gradient(180deg,rgba(245,158,11,.08) 0%,transparent 100%);}
.hero-badge{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(245,158,11,.3);border-radius:999px;padding:4px 12px;margin-bottom:12px;}
.hero h1{font-family:'Fredoka',cursive;font-size:clamp(1.6rem,5vw,2.4rem);font-weight:700;color:white;margin-bottom:8px;}
.hero p{font-size:.82rem;color:var(--muted);max-width:520px;margin:0 auto;line-height:1.7;}

.main{max-width:900px;margin:0 auto;padding:24px 14px 80px;width:100%;}

.toast{position:fixed;bottom:36px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--accent3);color:var(--accent3);padding:5px 14px;border-radius:7px;font-size:.7rem;z-index:10005;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;}
.toast.show{opacity:1;}

.palette-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px;transition:border-color .15s;}
.palette-card:hover{border-color:var(--border2);}

.palette-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.palette-name{font-family:'Fredoka',cursive;font-size:1.1rem;font-weight:600;color:var(--accent);}
.palette-desc{font-size:.72rem;color:var(--muted);}
.palette-tag{font-size:.5rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);padding:3px 8px;border-radius:999px;}

.swatches{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.swatch{flex:1;min-width:60px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.swatch-color{width:100%;height:72px;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative;}
.swatch-color:hover{transform:scale(1.06);border-color:rgba(255,255,255,.3);}
.swatch-hex{font-size:.6rem;color:var(--muted);font-family:'JetBrains Mono',monospace;cursor:pointer;transition:color .12s;}
.swatch-hex:hover{color:var(--text);}

.copy-row{display:flex;gap:8px;flex-wrap:wrap;}
.copy-btn{padding:6px 12px;border-radius:8px;border:1px solid var(--border2);background:transparent;color:var(--muted);font-size:.6rem;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:all .12s;}
.copy-btn:hover{background:var(--panel2);color:var(--text);}
.copy-btn.primary{background:var(--accent);color:#000;border-color:var(--accent);}
.copy-btn.primary:hover{filter:brightness(1.1);}
@media(max-width:700px){.copy-btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}}

.section-label{font-family:'Fredoka',cursive;font-size:.85rem;font-weight:600;color:var(--muted);margin:24px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border);}