/* Basic reset and variables */
:root{
  --bg:#0c0c0c;
  --fg:#f2f2f2;
  --muted:#b7b7b7;
  --brand:#8af;
  --accent:#ff6ad5;
  --card:#161616;
  --ring:#2a2a2a;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f7f7;
    --fg:#111;
    --muted:#444;
    --card:#ffffff;
    --ring:#e6e6e6;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  background:var(--bg);
  color:var(--fg);
  line-height:1.5;
  overflow-x:hidden;
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
}

#swirl{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-1;
  display:block;
  background: radial-gradient(circle at 50% 50%, #222 0%, #111 60%, #000 100%);
}

.site-header{
  position:sticky; top:0; backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom:1px solid var(--ring);
  display:flex; align-items:center; justify-content:space-between;
  padding:0.6rem 1rem; z-index:2;
}

.brand { font-weight: 800; font-size: 1.2rem; letter-spacing: 0.5px; }
.brand .dot{ color:var(--accent) }

.controls{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.chip{
  background:var(--card); color:var(--fg);
  border:1px solid var(--ring); border-radius:999px;
  padding:0.4rem 0.8rem; cursor:pointer;
}
.chip[aria-pressed="true"]{ outline:2px solid var(--accent) }

main{ max-width:1100px; margin:0 auto; padding:2rem 1rem; }

.hero h1{ margin:0; font-size: clamp(2rem, 4vw + 1rem, 4rem); letter-spacing: 1px; }
.sub{ color:var(--muted); max-width:60ch }

.meters{ display:flex; gap:1rem; margin-top:1rem }
.meter{ 
  background:var(--card); border:1px solid var(--ring); border-radius:12px; padding:0.75rem 1rem; display:flex; flex-direction:column; align-items:flex-start
}
.meter span{ font-size:1.5rem; font-variant-numeric: tabular-nums; }

.lab h2 { margin-top:3rem }
.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; }
.card{
  background:var(--card); border:1px solid var(--ring); border-radius:14px; padding:1rem;
}

.moire{
  height:200px;
  border:1px solid var(--ring); border-radius:10px;
  background:
    repeating-linear-gradient(0deg, #0000 0 6px, color-mix(in oklab, var(--fg) 20%, transparent) 6px 12px),
    repeating-linear-gradient(var(--angle, 24deg), color-mix(in oklab, var(--fg) 50%, transparent) 0 3px, transparent 3px 6px);
}

.mini-canvas{ width:100%; height:200px; display:block; background:#0000; border:1px solid var(--ring); border-radius:10px; }

textarea, input[type="range"]{
  width:100%; background:var(--bg); color:var(--fg);
  border:1px solid var(--ring); border-radius:10px; padding:0.6rem;
}

.cta{
  margin-top:0.5rem; width:100%; padding:0.7rem 1rem;
  background:linear-gradient(90deg, var(--accent), var(--brand));
  color:#111; border:0; border-radius:12px; font-weight:700; cursor:pointer;
}

.output{
  margin-top:0.75rem;
  background: #0a0a0a; color:#eaeaea;
  border:1px solid var(--ring); border-radius:12px; padding:0.75rem;
  min-height:3rem; white-space:pre-wrap; word-break:break-word;
}

.site-footer{ text-align:center; color:var(--muted); padding:4rem 1rem; }

/* High contrast mode */
.hc :root, .hc body{ color-scheme: light only; }
.hc body{ background:#000; color:#fff }
.hc .card, .hc .meter{ background:#000; border-color:#fff }