:root{
  --bg:#070a12;
  --bg2:#0b1020;
  --fg:#e7f3ff;
  --muted:rgba(231,243,255,.72);

  --cyan:#37f7ff;
  --cyan2:#00c2ff;
  --blue:#3a66ff;
  --amber:#ffb000;
  --mag:#ff2bd6;

  --glass:rgba(8,12,24,.55);
  --stroke:rgba(55,247,255,.18);
  --stroke2:rgba(255,176,0,.16);
  --shadow: 0 18px 60px rgba(0,0,0,.65);

  --r: 18px;
  --max: 1120px;

  /* Color Mixer (0 = Legacy Cyan, 100 = Ares Amber) */
  --mix: 0;
  --legacy-r: 55;  --legacy-g: 247; --legacy-b: 255;
  --ares-r:   255; --ares-g:   176; --ares-b:   0;

  /* Ergebnisfarbe (JS setzt diese) */
  --accent-r: 55;
  --accent-g: 247;
  --accent-b: 255;
}

/* Derived accents */
:root{
  --accent: rgb(var(--accent-r) var(--accent-g) var(--accent-b));
  --accent18: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .18);
  --accent35: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .35);
  --accent55: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .55);
}

*{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";
  color:var(--fg);
  background: radial-gradient(1200px 700px at 70% 0%, rgba(55,247,255,.08), transparent 60%),
              radial-gradient(900px 600px at 20% 10%, rgba(255,43,214,.06), transparent 60%),
              radial-gradient(1100px 700px at 50% 120%, rgba(255,176,0,.06), transparent 62%),
              linear-gradient(180deg, var(--bg), var(--bg2) 45%, var(--bg));
  overflow-x:hidden;
}

/* Background FX */
.fx{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:-1;
}
canvas#grid{ width:100%; height:100%; display:block; }
.scanlines{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.045) 0px,
    rgba(255,255,255,.02) 2px,
    rgba(0,0,0,0) 6px,
    rgba(0,0,0,0) 10px
  );
  mix-blend-mode: overlay;
  opacity:.35;
}
.vignette{
  position:absolute; inset:-40px;
  background:
    radial-gradient(closest-side at 50% 40%, transparent 55%, rgba(0,0,0,.65) 100%),
    radial-gradient(closest-side at 50% 115%, transparent 30%, rgba(0,0,0,.55) 100%);
  opacity:.9;
}
.noise{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.08;
  mix-blend-mode: soft-light;
}

/* Layout */
.wrap{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,10,18,.78), rgba(7,10,18,.35));
  border-bottom:1px solid var(--accent18);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
  flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--fg);
  letter-spacing:.12em;
  font-weight:700;
}
.sig{
  width:14px; height:14px;
  border:1px solid rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .7);
  box-shadow: 0 0 24px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .35),
              0 0 64px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .18);
  transform: rotate(45deg);
}
.links{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}
.chip{
  position:relative;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--accent18);
  background: rgba(8,12,24,.35);
  color:rgba(231,243,255,.72);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover{ transform: translateY(-1px); border-color: var(--accent35); color:var(--fg); }
.chip[data-accent="amber"]{
  border-color: rgba(255,176,0,.22);
}
.chip[data-accent="amber"]:hover{ border-color: rgba(255,176,0,.55); }

.mixer{
  display:flex; align-items:center; gap:10px;
  margin-left:auto;
}
.mixerLabel{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(231,243,255,.65);
  white-space:nowrap;
}
#mixer, input[type="range"]{ accent-color: var(--accent); }
input[type="range"]{
  width:170px;
}

/* Hero */
.hero{
  padding:72px 0 44px;
  position:relative;
}
.gridline{
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--accent35), transparent);
  opacity:.55;
}
.heroInner{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:26px;
  align-items:start;
}
@media (max-width: 900px){
  .heroInner{ grid-template-columns:1fr; }
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border:1px solid var(--accent18);
  background: rgba(8,12,24,.35);
  border-radius:999px;
  color:rgba(231,243,255,.78);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 24px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .35),
              0 0 64px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .18);
}
.glitch{
  position:relative;
  margin:18px 0 10px;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: .08em;
  text-transform:uppercase;
  text-shadow: 0 0 22px rgba(55,247,255,.15);
}
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position:absolute; left:0; top:0;
  width:100%;
  opacity:.7;
  pointer-events:none;
  clip-path: inset(0 0 0 0);
}
.glitch::before{
  transform: translate(2px, -1px);
  color: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .75);
  animation: glitch 2.6s infinite linear alternate-reverse;
  mix-blend-mode: screen;
}
.glitch::after{
  transform: translate(-2px, 1px);
  color: rgba(255,176,0,.62);
  animation: glitch 3.1s infinite linear alternate-reverse;
  mix-blend-mode: screen;
}
@keyframes glitch{
  0%{ clip-path: inset(0 0 92% 0); }
  12%{ clip-path: inset(18% 0 66% 0); }
  26%{ clip-path: inset(52% 0 22% 0); }
  40%{ clip-path: inset(8% 0 82% 0); }
  55%{ clip-path: inset(76% 0 6% 0); }
  70%{ clip-path: inset(36% 0 40% 0); }
  85%{ clip-path: inset(60% 0 18% 0); }
  100%{ clip-path: inset(0 0 92% 0); }
}
.lead{
  margin:0;
  color: rgba(231,243,255,.78);
  font-size: 16px;
  line-height: 1.6;
  max-width: 62ch;
}
.ctaRow{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:22px;
}
.btn{
  appearance:none;
  border:1px solid var(--accent35);
  background: linear-gradient(180deg, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .16), rgba(8,12,24,.25));
  color: var(--fg);
  padding:12px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size: 13px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
  display:inline-flex; align-items:center; gap:10px;
  cursor:pointer;
}
.btn:hover{ transform: translateY(-2px); border-color: var(--accent55); filter: brightness(1.08); }
.btn .arr{ opacity:.85 }
.btn.secondary{
  background: rgba(8,12,24,.35);
  border-color: rgba(255,176,0,.25);
}
.btn.secondary:hover{ border-color: rgba(255,176,0,.6); }

.panel{
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(8,12,24,.6), rgba(8,12,24,.25));
  border: 1px solid var(--accent18);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(600px 240px at 20% 0%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .13), transparent 55%),
    radial-gradient(520px 240px at 80% 10%, rgba(255,176,0,.10), transparent 55%),
    linear-gradient(90deg, transparent, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .08), transparent);
  opacity:.85;
  pointer-events:none;
}
.panelBody{ position:relative; padding:18px; }
.meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  color: rgba(231,243,255,.6);
  font-size: 12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.muted{ color: rgba(231,243,255,.6); }
.muted2{ color: rgba(231,243,255,.68); }
.meter{
  display:flex; gap:6px; align-items:center;
  min-width:140px; justify-content:flex-end;
}
.bar{
  width:24px; height:6px; border-radius:999px;
  background: rgba(55,247,255,.16);
  border:1px solid rgba(55,247,255,.18);
}
.bar.on{ background: rgba(55,247,255,.35); }
.bar.amber{ border-color: rgba(255,176,0,.22); background: rgba(255,176,0,.14); }
.bar.amber.on{ background: rgba(255,176,0,.32); }

.aside{
  padding:18px;
  display:grid;
  gap:14px;
}
.stat{
  padding:14px;
  border-radius: 14px;
  border:1px solid var(--accent18);
  background: rgba(8,12,24,.35);
}
.stat h4{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(231,243,255,.65);
}
.stat .big{
  font-size:22px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.stat .sub{
  color:rgba(231,243,255,.72);
  font-size:13px;
  line-height:1.45;
  margin-top:6px;
}

/* Sections */
section{ padding:34px 0; }
.sectionTitle{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.sectionTitle h2{
  margin:0;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(231,243,255,.7);
}
.rule{
  height:1px; flex:1;
  background: linear-gradient(90deg, var(--accent35), rgba(255,176,0,.12), transparent);
  opacity:.8;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){
  .cards{ grid-template-columns: 1fr; }
}
.card{
  padding:18px;
  border-radius: var(--r);
  background: rgba(8,12,24,.35);
  border:1px solid var(--accent18);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  min-height: 170px;
  transition: transform .15s ease;
  isolation:isolate;
}
.card::after{
  content:"";
  position:absolute; inset:-2px;
  /* Cursor-follow Glow */
  background:
    radial-gradient(320px 220px at var(--cx, 50%) var(--cy, 30%),
      rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .16),
      transparent 62%
    );
  opacity:.95;
  pointer-events:none;
}
.card h3{
  margin:0 0 10px;
  font-size:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.card p{
  margin:0;
  color:rgba(231,243,255,.76);
  line-height:1.6;
  font-size:14px;
}
.tag{
  display:inline-flex;
  margin-top:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,176,0,.22);
  background: rgba(255,176,0,.08);
  color: rgba(255,224,150,.95);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.tag.cyan{
  border-color: var(--accent18);
  background: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .08);
  color: rgba(200,255,255,.95);
}

/* ===== LIGHT-CYCLE HOVER (Cards) ===== */
.card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  padding:2px;

  /* Zwei Conic-Highlights = “Cycle streak + trail” */
  background:
    conic-gradient(
      from 0deg,
      rgba(0,0,0,0) 0%,
      rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .95) 10%,
      rgba(255,176,0,.70) 16%,
      rgba(0,0,0,0) 24%,
      rgba(0,0,0,0) 100%
    ),
    conic-gradient(
      from 180deg,
      rgba(0,0,0,0) 0%,
      rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .45) 6%,
      rgba(0,0,0,0) 14%,
      rgba(0,0,0,0) 100%
    );

  opacity:0;
  transform: translateZ(0);
  transition: opacity .18s ease, filter .18s ease;

  /* mask = nur Rand sichtbar */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events:none;
  z-index:0;
}

.card:hover::before{
  opacity: .95;
  animation: spin .9s linear infinite;
  filter: drop-shadow(0 0 14px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .20));
}

.card:hover{
  transform: translateY(-2px) scale(1.01);
}

@keyframes spin{ to{ transform: rotate(360deg); } } }

/* Download / Contact */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
}
.callout{
  padding:18px;
  border-radius: var(--r);
  border:1px solid rgba(255,176,0,.22);
  background: linear-gradient(180deg, rgba(255,176,0,.08), rgba(8,12,24,.3));
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.callout::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 240px at 10% 0%, rgba(255,176,0,.18), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.callout h3{
  position:relative;
  margin:0 0 8px;
  font-size:18px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.callout p{
  position:relative;
  margin:0 0 14px;
  color:rgba(231,243,255,.78);
  line-height:1.6;
  font-size:14px;
  max-width:60ch;
}
.miniNote{
  margin-top:12px;
  color: rgba(231,243,255,.66);
  font-size: 13px;
}
.miniNote code{
  padding:2px 6px;
  border-radius:10px;
  border:1px solid var(--accent18);
  background: rgba(7,10,18,.55);
  color: rgba(231,243,255,.86);
}

.form{
  padding:18px;
  border-radius: var(--r);
  border:1px solid var(--accent18);
  background: rgba(8,12,24,.35);
  box-shadow: var(--shadow);
}
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 620px){ .row{ grid-template-columns:1fr; } }
label{
  display:block;
  color:rgba(231,243,255,.72);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 6px;
}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--accent18);
  background: rgba(7,10,18,.55);
  color:var(--fg);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea{ min-height: 120px; resize: vertical; }
input:focus, textarea:focus{
  border-color: var(--accent55);
  box-shadow: 0 0 0 4px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .08);
}
.mt10{ margin-top:10px; }
.mt12{ margin-top:12px; }
.btnRow{ display:flex; gap:10px; flex-wrap:wrap; }

/* Terminal */
.terminalPanel{ margin-top:14px; }
.termStatus{ color: rgba(231,243,255,.6); }
.terminal{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--accent18);
  background: rgba(7,10,18,.55);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  line-height:1.6;
  color: rgba(231,243,255,.82);
  min-height: 210px;
  max-height: 260px;
  overflow:auto;
  white-space: pre-wrap;
}

/* Footer */
footer{
  padding:30px 0 50px;
  color:rgba(231,243,255,.62);
  font-size:13px;
}
.foot{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--accent18);
  padding-top:18px;
}
.footLinks{ display:flex; gap:14px; flex-wrap:wrap; }
.foot a{
  color:rgba(231,243,255,.72);
  text-decoration:none;
  border-bottom:1px dashed var(--accent18);
}
.foot a:hover{ color:var(--fg); border-bottom-color: var(--accent55); }
.footerNote{
  margin-top:12px;
  color:rgba(231,243,255,.52);
  font-size:12px;
}

/* ===== BOOT INTRO ===== */
.boot{
  position:fixed; inset:0; z-index:99999;
  display:grid; place-items:center;
  background: rgba(7,10,18,.92);
  transition: opacity .45s ease, transform .45s ease;
}
.boot.hidden{
  opacity:0; transform: translateY(-8px);
  pointer-events:none;
}
.bootVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: blur(10px) saturate(1.15) contrast(1.05);
  opacity:.35;
}
.bootShade{
  position:absolute; inset:0;
  background:
    radial-gradient(700px 360px at 50% 35%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .10), transparent 60%),
    radial-gradient(680px 360px at 45% 55%, rgba(255,176,0,.08), transparent 62%),
    linear-gradient(180deg, rgba(7,10,18,.75), rgba(7,10,18,.92));
}
.bootInner{
  position:relative;
  width:min(820px, calc(100% - 40px));
  border-radius: 18px;
  border:1px solid var(--accent18);
  background: rgba(8,12,24,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
  padding:18px;
  overflow:hidden;
}
.bootInner::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(620px 240px at 15% 0%, rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .18), transparent 60%);
  opacity:.9; pointer-events:none;
}
.bootTitle{
  position:relative;
  display:flex; align-items:center; gap:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  color: rgba(231,243,255,.92);
}
.bootSig{
  width:12px; height:12px;
  transform: rotate(45deg);
  border:1px solid rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .75);
  box-shadow: 0 0 24px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .35),
              0 0 64px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .18);
}
.bootLog{
  position:relative;
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--accent18);
  background: rgba(7,10,18,.55);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  line-height:1.6;
  color: rgba(231,243,255,.80);
  min-height: 170px;
  max-height: 220px;
  overflow:auto;
}
.bootBar{
  position:relative;
  margin-top:12px;
  height:10px;
  border-radius:999px;
  border:1px solid var(--accent18);
  background: rgba(7,10,18,.55);
  overflow:hidden;
}
.bootBarFill{
  height:100%; width:0%;
  background: linear-gradient(90deg,
    rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .15),
    rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .55),
    rgba(255,176,0,.45)
  );
  box-shadow: 0 0 24px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .25);
  transition: width .18s ease;
}
.bootHint{
  position:relative;
  margin-top:10px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(231,243,255,.62);
}

@media (prefers-reduced-motion: reduce){
  .glitch::before, .glitch::after{ animation:none; }
  .bootVideo{ display:none; }
}


/* honeypot anti-spam field (hidden) */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* Grid access check */
.humanCheck{ margin-top:10px; }
.humanRow{ display:grid; grid-template-columns: 1fr 180px; gap:10px; align-items:center; }
@media (max-width: 620px){ .humanRow{ grid-template-columns:1fr; } }

.humanQ{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--accent18);
  background: rgba(7,10,18,.55);
}
.humanTag{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--accent18);
  background: rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .08);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  color: rgba(231,243,255,.86);
}
.humanText{
  letter-spacing:.08em;
  color: rgba(231,243,255,.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

/* ===== Status Power Switch ===== */
.statusRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.switch{ position:relative; width:54px; height:30px; display:inline-flex; user-select:none; flex:0 0 auto; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.slider{
  width:100%; height:100%;
  border-radius:999px;
  border:1px solid var(--accent35);
  background: rgba(8,12,24,.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 10px 28px rgba(0,0,0,.35);
  transition: filter .22s ease, opacity .22s ease;
}
.slider::before{
  content:"";
  position:absolute;
  top:4px; left:4px;
  width:22px; height:22px;
  border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 22px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .35);
  transition: transform .22s ease, filter .22s ease;
}
.switch input:checked + .slider::before{ transform: translateX(24px); }
.switch input:not(:checked) + .slider{
  filter: saturate(.5) brightness(.85);
  opacity:.85;
}

/* ===== Crash visuals: glitch → BSOD panel → reboot console ===== */
.hidden{
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden !important;
  transform: translate3d(0,10px,0) scale(.99);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

/* Screen-tear overlay */
.tearLayer{
  position:fixed;
  inset:-10vh -10vw;
  z-index: 9996;
  pointer-events:none;
  opacity:0;
  mix-blend-mode: screen;
  filter: contrast(1.25) saturate(1.35);
  transition: opacity .18s ease;
}
body.tearing .tearLayer{ opacity:.92; }
.tearLayer::before,
.tearLayer::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0px,
      rgba(255,255,255,.10) 2px,
      transparent 7px,
      rgba(55,247,255,.06) 10px),
    repeating-linear-gradient(to right,
      rgba(255,0,153,0) 0px,
      rgba(255,0,153,0) 18px,
      rgba(255,0,153,.10) 19px,
      rgba(255,0,153,0) 24px);
  opacity:.75;
  transform: translate3d(0,0,0);
  animation: tearMove 1.15s infinite steps(2,end);
}
.tearLayer::after{
  opacity:.55;
  filter: blur(.7px);
  animation: tearMove2 .85s infinite steps(2,end);
}
@keyframes tearMove{
  0%{ transform: translate3d(-10px, 0px, 0) skewX(-2deg); clip-path: inset(0 0 40% 0); }
  25%{ transform: translate3d(14px,-10px,0) skewX(3deg); clip-path: inset(10% 0 20% 0); }
  50%{ transform: translate3d(-18px, 12px,0) skewX(-5deg); clip-path: inset(0 0 55% 0); }
  75%{ transform: translate3d(22px, 2px, 0) skewX(4deg); clip-path: inset(35% 0 0 0); }
  100%{ transform: translate3d(-10px,0px,0) skewX(-2deg); clip-path: inset(0 0 45% 0); }
}
@keyframes tearMove2{
  0%{ transform: translate3d(12px,-12px,0) skewY(2deg); clip-path: inset(55% 0 0 0); }
  33%{ transform: translate3d(-16px, 8px,0) skewY(-4deg); clip-path: inset(0 0 60% 0); }
  66%{ transform: translate3d(18px, 0px,0) skewY(5deg); clip-path: inset(20% 0 15% 0); }
  100%{ transform: translate3d(12px,-12px,0) skewY(2deg); clip-path: inset(55% 0 0 0); }
}

/* Page destabilize */
body.crashing header,
body.crashing main,
body.crashing .fx{
  animation: crashJitter .28s infinite steps(2,end);
  filter: contrast(1.18) saturate(1.22) hue-rotate(10deg);
}
@keyframes crashJitter{
  0%{ transform: translate3d(0,0,0); }
  25%{ transform: translate3d(2px,-1px,0) skewX(.9deg); }
  50%{ transform: translate3d(-3px,2px,0) skewX(-1.2deg); }
  75%{ transform: translate3d(1px,3px,0) skewX(.7deg); }
  100%{ transform: translate3d(0,0,0); }
}
body.hardCrash header,
body.hardCrash main,
body.hardCrash .fx{
  opacity:.08;
  transition: opacity .55s ease;
}

/* Cursor desync */
body.desync{ cursor:none; }
.ghostCursor{
  position:fixed;
  left:0; top:0;
  width:16px; height:16px;
  border-radius:50%;
  border:1px solid rgba(231,243,255,.85);
  box-shadow: 0 0 22px rgba(55,247,255,.25), 0 0 48px rgba(255,176,0,.18);
  pointer-events:none;
  z-index: 9997;
  opacity:0;
  transform: translate3d(-999px,-999px,0);
  transition: opacity .18s ease;
}
body.desync .ghostCursor{ opacity:.95; }

/* BSOD panel */
.bsod{
  position:fixed;
  inset:0;
  z-index: 9998;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  opacity:1;
  transform: translate3d(0,0,0);
  transition: opacity .25s ease, transform .25s ease;
}
.bsod .bsodInner{
  width:min(820px, calc(100% - 36px));
  border-radius: 18px;
  padding: 28px 22px;
  background: #0011aa;
  color:#eaf2ff;
  box-shadow: 0 22px 80px rgba(0,0,0,.65);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  line-height:1.5;
}
.bsodTitle{ font-size: 76px; margin-bottom: 8px; }
.bsodText{ font-size: 18px; margin-bottom: 14px; }
.bsodPercent{ font-size: 20px; margin: 12px 0 10px; }
.bsodMini{ font-size: 14px; opacity:.95; }
.bsodCode{ display:inline-block; padding:2px 6px; background: rgba(255,255,255,.12); border-radius:6px; }
.bsodHint{ margin-top: 18px; font-size: 13px; opacity:.85; }

/* Reboot console panel */
.rebootOverlay{
  position:fixed;
  inset:0;
  z-index: 9999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(900px 600px at 50% 20%, rgba(55,247,255,.08), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(255,176,0,.06), transparent 60%),
    rgba(2,4,10,.88);
  backdrop-filter: blur(10px);
  opacity:1;
  transform: translate3d(0,0,0);
  transition: opacity .25s ease, transform .25s ease;
}
.rebootInner{
  width:min(900px, calc(100% - 36px));
  border-radius: 18px;
  padding: 22px;
  border:1px solid rgba(55,247,255,.18);
  background: rgba(8,12,24,.55);
  box-shadow: 0 22px 80px rgba(0,0,0,.65);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}
.rebootTitle{
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  opacity:.95;
  margin-bottom:12px;
}
.rebootLog{
  height:min(42vh, 320px);
  overflow:auto;
  border:1px solid rgba(55,247,255,.14);
  background: rgba(8,12,24,.35);
  border-radius: 14px;
  padding:14px;
}
.rebootLog div{ padding:2px 0; opacity:.98; }
.rebootBar{
  margin-top:14px;
  height:12px;
  border-radius:999px;
  border:1px solid rgba(55,247,255,.14);
  background: rgba(8,12,24,.35);
  overflow:hidden;
}
.rebootBarFill{
  height:100%;
  width:0%;
  background: var(--accent);
  box-shadow: 0 0 22px rgb(var(--accent-r) var(--accent-g) var(--accent-b) / .35);
  transition: width .35s ease;
}
.rebootHint{
  margin-top:12px;
  opacity:.78;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}

@media (prefers-reduced-motion: reduce){
  .tearLayer::before, .tearLayer::after{ animation:none; }
  body.crashing header, body.crashing main, body.crashing .fx{ animation:none; }
}