:root{
  --cyan:#3ef0ff;
  --magenta:#ff3ec8;
  --violet:#a86bff;
  --yellow:#ffe95e;
  --bg1:#241a4a;
  --bg2:#3a1e63;
  --bg3:#5a2a7a;
  --panel:rgba(20,14,40,0.55);
  --panel-border:rgba(255,255,255,0.14);
  --text:#f2eefc;
  --sub:#c6b8ec;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100vh}
body{
  font-family:'Share Tech Mono',ui-monospace,monospace;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(62,240,255,.18), transparent 60%),
    radial-gradient(1000px 900px at 90% 20%, rgba(255,62,200,.20), transparent 55%),
    radial-gradient(1400px 1000px at 50% 100%, rgba(168,107,255,.25), transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2) 45%, var(--bg3) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
@font-face{
  font-family:'Orbitron-fallback';
  src:local('Arial');
}
h1,h2,.brand{font-family:'Orbitron',var(--Orbitron-fallback),ui-monospace,monospace}
.glyphs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.glyph{
  position:absolute;
  font-family:'Orbitron','Arial',sans-serif;
  font-weight:900;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,0.06);
  filter:blur(1px);
  user-select:none;
  animation:drift 26s ease-in-out infinite alternate;
}
.glyph.a{ top:-8%; left:-10%; font-size:56vw; color:rgba(62,240,255,0.06); transform:rotate(-8deg); animation-duration:34s;}
.glyph.b{ bottom:-18%; right:-14%; font-size:48vw; color:rgba(255,62,200,0.07); transform:rotate(6deg); animation-duration:29s; animation-delay:-6s;}
.glyph.c{ top:20%; right:-8%; font-size:22vw; color:rgba(255,233,94,0.06); transform:rotate(-4deg); animation-duration:22s; animation-delay:-3s;}
@keyframes drift{
  from{ transform:translate(0,0) rotate(var(--r,0deg)); }
  to{ transform:translate(1.5vw,2vw) rotate(calc(var(--r,0deg) + 2deg)); }
}
.scanlines{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 2px, transparent 4px);
  mix-blend-mode:overlay;
  opacity:.5;
}
.wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:2.2rem 1.4rem 4rem}
header{text-align:center;margin-bottom:1.6rem}
header .back{
  display:inline-block;margin-bottom:.8rem;font-size:.8rem;letter-spacing:.08em;
  color:var(--sub);text-decoration:none;border:1px solid var(--panel-border);
  padding:.3rem .8rem;border-radius:999px;background:var(--panel);backdrop-filter:blur(6px);
}
header .back:hover{color:var(--cyan);border-color:var(--cyan)}
h1{
  font-size:clamp(2.2rem,6vw,4rem);
  margin:.2rem 0;
  letter-spacing:.06em;
  background:linear-gradient(90deg,var(--cyan),var(--magenta) 50%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(168,107,255,.35);
}
header p{color:var(--sub);margin:.2rem 0 0;font-size:.95rem;letter-spacing:.04em}
.card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:22px;
  padding:1.8rem;
  backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(255,255,255,0.03), 0 20px 60px rgba(0,0,0,.35), 0 0 60px rgba(168,107,255,.08);
}
.pickers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:start;
}
@media (max-width:820px){
  .pickers{grid-template-columns:1fr}
}
.section-title{
  font-family:'Orbitron',sans-serif;
  font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;margin:0 0 1.4rem;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 20px rgba(168,107,255,.35);
}
#gridCanvas{
  width:100%;
  aspect-ratio:12/8;
  border-radius:16px;
  cursor:crosshair;
  border:1px solid var(--panel-border);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  display:block;
  image-rendering:pixelated;
}
.wheel-area{display:flex;gap:1.1rem;align-items:center;justify-content:center}
#wheelCanvas{
  border-radius:50%;
  cursor:crosshair;
  box-shadow:0 0 0 4px rgba(255,255,255,0.05), 0 8px 30px rgba(0,0,0,.4), 0 0 50px rgba(255,62,200,.15);
  touch-action:none;
}
.slider-track{
  position:relative;width:34px;height:220px;border-radius:20px;
  border:1px solid var(--panel-border);
  box-shadow:inset 0 0 10px rgba(0,0,0,.4);
  cursor:pointer;
  touch-action:none;
}
.slider-thumb{
  position:absolute;left:-6px;width:46px;height:14px;border-radius:8px;
  background:#fff;border:2px solid rgba(0,0,0,.4);
  box-shadow:0 0 10px rgba(255,255,255,.8), 0 0 18px var(--cyan);
  transform:translateY(-50%);
  pointer-events:none;
}
.divider{
  height:1px;margin:2rem 0 1.6rem;
  background:linear-gradient(90deg,transparent,var(--panel-border) 20%,var(--panel-border) 80%,transparent);
}
.bottom{
  display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:center;
}
.preview{
  width:110px;height:110px;border-radius:20px;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.25);
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.4);
  transition:box-shadow .2s;
}
.fields{
  display:grid;
  grid-template-columns:repeat(4,minmax(90px,120px));
  gap:.9rem;
  flex:1 1 auto;
  justify-content:center;
}
.field label{
  display:block;font-size:.72rem;letter-spacing:.14em;color:var(--sub);margin-bottom:.35rem;text-transform:uppercase;
}
.field input{
  width:100%;
  background:rgba(0,0,0,.28);
  border:1px solid var(--panel-border);
  border-radius:10px;
  color:var(--text);
  font-family:inherit;
  font-size:1.05rem;
  padding:.55rem .6rem;
  text-align:center;
  letter-spacing:.06em;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(62,240,255,.18), 0 0 20px rgba(62,240,255,.25);
}
.field.hex{position:relative}
.field.hex input{text-transform:uppercase;cursor:pointer}
.copied-badge{
  position:absolute;top:-1.9rem;left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--cyan);color:#0a1420;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  padding:.25rem .6rem;border-radius:999px;text-transform:uppercase;
  box-shadow:0 0 16px rgba(62,240,255,.7);
  opacity:0;pointer-events:none;
  transition:opacity .18s, transform .18s;
}
.copied-badge.show{opacity:1;transform:translateX(-50%) translateY(0)}
footer{text-align:center;margin-top:2.2rem;color:var(--sub);font-size:.78rem;letter-spacing:.06em}
footer span{color:var(--yellow)}