:root{
  --bg: #070707;
  --surface: #0f0f0f;
  --text: #f5f5f5;
  --muted: #bdbdbd;
  --accent: #e6e6e6;
}

[data-theme="light"]{
  --bg: #ffffff;
  --surface: #f6f6f6;
  --text: #0b0b0b;
  --muted: #8a8a8a;
  --accent: #111111;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.site-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem 1.5rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.title{font-weight:600;letter-spacing:0.06em;margin:0;text-align:center}

.theme-toggle{
  position:absolute;
  right:1.5rem;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:1px solid var(--muted);
  color:var(--text);
  padding:0.5rem 0.75rem;
  border-radius:6px;
  cursor:pointer;
  font-size:0.9rem;
}

.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}
.hero-inner{padding:3.5rem 1.5rem;text-align:center}
.tagline{margin:0;font-size:1.15rem;color:var(--muted)}

.buffer-wrap{display:flex;align-items:center;justify-content:center;padding:2rem 0 6vh;}
.cbuffer{width:60vmin;max-width:540px;height:auto;display:block}

.ring{fill:none;stroke-linecap:round;}
.ring--bg{stroke:var(--surface);stroke-width:12;opacity:0.9}
.ring--1{stroke:var(--accent);stroke-width:6;stroke-dasharray:20 200;}
.ring--2{stroke:var(--muted);stroke-width:6;stroke-dasharray:16 180;}
.ring--3{stroke:var(--accent);stroke-width:4;stroke-dasharray:10 140;}
.ring--4{stroke:var(--muted);stroke-width:3;stroke-dasharray:6 100;}

/* Animations */
.ring--1{animation:dash1 3s linear infinite, spin1 12s linear infinite; transform-origin:100px 100px}
.ring--2{animation:dash2 2.6s linear infinite reverse, spin2 9s linear infinite reverse}
.ring--3{animation:dash3 3.8s linear infinite, spin3 14s linear infinite}
.ring--4{animation:dash4 2.2s linear infinite reverse, spin4 6.5s linear infinite}

@keyframes dash1{to{stroke-dashoffset:-360}}
@keyframes dash2{to{stroke-dashoffset:360}}
@keyframes dash3{to{stroke-dashoffset:-420}}
@keyframes dash4{to{stroke-dashoffset:240}}

@keyframes spin1{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spin2{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes spin3{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes spin4{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .ring--1,.ring--2,.ring--3,.ring--4{animation:none}
}

/* small screens */
@media (max-width:520px){
  .cbuffer{width:86vmin}
  .title{font-size:1rem}
}