:root{
  --green:#238f87;
  --green2:#32a35b;
  --dark:#10201f;
  --muted:#60706e;
  --line:#d8e3e1;
  --bg:#f6faf9;
  --card:#ffffff;
  --danger:#c43b3b;
  --warn:#f0b429;
  --blue:#256e93;
  --navy:#173e59;
  --orange:#e88b28;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#fff,var(--bg));
  color:var(--dark);
}
.wrap{max-width:1200px;margin:0 auto;padding:34px 28px 42px}
header{
  display:flex;justify-content:space-between;gap:24px;align-items:flex-start;
  border-left:18px solid var(--green);
  padding-left:28px;margin-bottom:26px
}
.kicker{margin:0 0 6px;color:var(--green);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
h1{font-size:clamp(2rem,4vw,4rem);margin:0 0 10px;line-height:1}
.lead{font-size:1.15rem;max-width:760px;margin:0;color:var(--muted)}
.formula{
  min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 22px;
  box-shadow:0 14px 35px rgba(18,60,55,.08)
}
.formula span{display:block;color:var(--green);font-weight:900;margin-bottom:6px}
.formula strong{font-size:1.45rem}
.controls{
  display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 24px
}
button{
  border:1px solid var(--line);background:#fff;color:var(--dark);padding:12px 15px;border-radius:999px;
  cursor:pointer;font-weight:750;font-size:.98rem;transition:.15s ease
}
button:hover{transform:translateY(-1px);border-color:var(--green)}
button.active{background:var(--green);color:white;border-color:var(--green)}
.stage{
  display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:stretch
}
.explain,.raid,.summary article{
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:22px;
  box-shadow:0 14px 40px rgba(18,60,55,.08)
}
.explain{padding:22px}
.explain h2{margin:0 0 10px;font-size:1.7rem}
.explain p{font-size:1.05rem;line-height:1.55;color:var(--muted)}
.xorbox{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.xorbox h3{margin:0 0 12px}
.bits{display:grid;gap:8px}
.bits div:not(.line){display:flex;justify-content:space-between;align-items:center;background:#f3f7f6;border-radius:10px;padding:8px 10px}
.bits span{font-weight:900;color:var(--green)}
.bits code{font-size:1.1rem;font-weight:900}
.bits .line{height:1px;background:var(--line);margin:2px 0}
.small{font-size:.92rem!important}
.raid{padding:22px;min-height:580px;position:relative;display:flex;flex-direction:column;gap:14px}
.drives{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;flex:1}
.drive{
  position:relative;border:2px solid #243836;border-radius:18px;padding:48px 12px 14px;
  background:linear-gradient(180deg,#eef6f4,#d7e8e4);
  min-height:500px;transition:.25s ease
}
.drive::before{
  content:attr(data-name);position:absolute;top:12px;left:12px;right:12px;
  text-align:center;font-weight:900;font-size:1.1rem
}
.drive.failed{
  border-color:var(--danger);background:linear-gradient(180deg,#fff1f1,#f6d4d4);
  opacity:.72;transform:translateY(6px)
}
.drive.failed::after{
  content:"AUSFALL";position:absolute;inset:auto 18px 18px 18px;background:var(--danger);color:white;
  text-align:center;border-radius:999px;padding:8px;font-weight:900
}
.drive.new{
  border-color:var(--green2);background:linear-gradient(180deg,#f0fff5,#d8f7e2)
}
.block{
  height:54px;border-radius:12px;margin-bottom:10px;color:white;font-weight:900;
  display:flex;align-items:center;justify-content:center;border:2px solid rgba(0,0,0,.18);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28);
  transition:.25s ease;position:relative
}
.block.data1{background:var(--green2)}
.block.data2{background:var(--blue)}
.block.data3{background:var(--orange)}
.block.parity{background:var(--navy)}
.block.missing{background:repeating-linear-gradient(45deg,#f2dddd,#f2dddd 8px,#fff 8px,#fff 16px);color:var(--danger);border-style:dashed}
.block.calc{outline:4px solid var(--warn);transform:scale(1.04)}
.block.rebuild{outline:4px solid var(--green2);animation:pulse 1s infinite alternate}
@keyframes pulse{from{filter:brightness(1)}to{filter:brightness(1.25)}}
.legend{
  display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-weight:700;
  padding:2px 0 0 2px;
}
.legend span{display:inline-flex;gap:6px;align-items:center}
.dot{width:14px;height:14px;border-radius:4px;display:inline-block}
.dot.d{background:var(--green2)}.dot.p{background:var(--navy)}.dot.m{background:var(--danger)}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.summary article{padding:18px}
.summary h3{margin:0 0 8px}
.summary p{margin:0;color:var(--muted);line-height:1.5}
@media(max-width:900px){
  header,.stage,.summary{display:block}
  .formula{margin-top:18px}
  .explain{margin-bottom:18px}
  .drives{grid-template-columns:repeat(2,1fr)}
}