:root{
  --bg:#070a0d;
  --metal:#11181d;
  --metal2:#1b252b;
  --copper:#b77743;
  --copper2:#e0a464;
  --acid:#baff3d;
  --acid2:#69ff9e;
  --gold:#ffd36f;
  --cyan:#65eaff;
  --red:#ff6d6d;
  --text:#f2f7ed;
  --muted:#aeb8b6;
  --panel:rgba(255,255,255,.075);
  --line:rgba(186,255,61,.20);
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  overflow-x:hidden;
  background:
    radial-gradient(circle at 15% 15%,rgba(186,255,61,.12),transparent 22%),
    radial-gradient(circle at 84% 18%,rgba(224,164,100,.14),transparent 24%),
    radial-gradient(circle at 50% 90%,rgba(101,234,255,.09),transparent 30%),
    linear-gradient(135deg,#070a0d 0%,#11181d 46%,#17121f 100%);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.25;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 45%,black,transparent 78%);
}
.ambient{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.ambient span{
  position:absolute;
  border-radius:999px;
  filter:blur(28px);
  opacity:.26;
  animation:drift 11s ease-in-out infinite;
}
.a1{width:300px;height:300px;left:-100px;top:12%;background:#baff3d}
.a2{width:340px;height:340px;right:-110px;bottom:10%;background:#e0a464;animation-delay:2s}
.a3{width:220px;height:220px;left:44%;bottom:-80px;background:#65eaff;animation-delay:4s}

.main{
  position:relative;
  z-index:2;
  width:min(1320px,calc(100% - 24px));
  margin:0 auto;
  min-height:calc(100vh - 78px);
  display:grid;
  align-items:start;
  padding:16px 0 8px;
}
.engine-card{
  width:100%;
  border-radius:36px;
  padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
  border:1px solid rgba(224,164,100,.20);
  box-shadow:0 38px 120px rgba(0,0,0,.44),inset 0 0 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(14px);
}
.topbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  margin-bottom:12px;
}
.intro{
  padding:14px 18px;
  border-radius:28px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
}
.intro h1{
  margin:0 0 5px;
  color:var(--acid);
  font-size:clamp(30px,3.5vw,48px);
  line-height:1;
  letter-spacing:3px;
}
.intro p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.42;
}
.hud{
  min-width:390px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.hud-item{
  padding:13px 14px;
  border-radius:20px;
  text-align:center;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}
.hud-item strong{
  display:block;
  margin-top:4px;
  color:var(--text);
  font-size:23px;
}

.machine-wrap{
  display:grid;
  grid-template-columns:minmax(760px,1fr) 320px;
  gap:16px;
  align-items:stretch;
}
.machine{
  position:relative;
  min-height:620px;
  border-radius:34px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 47%,rgba(186,255,61,.10),transparent 28%),
    radial-gradient(circle at 16% 84%,rgba(224,164,100,.12),transparent 22%),
    linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 0 80px rgba(0,0,0,.35);
}
.machine:before{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:26px;
  border:1px dashed rgba(224,164,100,.17);
}
.machine:after{
  content:"";
  position:absolute;
  width:760px;
  height:760px;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,transparent 44%,rgba(186,255,61,.07) 45%,transparent 46%),
    conic-gradient(from 40deg,transparent,rgba(224,164,100,.14),transparent,rgba(101,234,255,.12),transparent,rgba(186,255,61,.12),transparent);
  opacity:.7;
  animation:slowSpin 22s linear infinite;
  pointer-events:none;
}
.connector-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
}
.pipe{
  stroke:rgba(255,255,255,.13);
  stroke-width:10;
  stroke-linecap:round;
}
.pipe.active{
  stroke:var(--acid);
  filter:drop-shadow(0 0 10px rgba(186,255,61,.65));
}
.node{
  position:absolute;
  z-index:5;
  width:74px;
  height:74px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff,var(--copper2) 30%,#5b3722 72%);
  border:4px solid rgba(255,211,111,.50);
  box-shadow:0 0 30px rgba(224,164,100,.24),inset 0 0 24px rgba(255,255,255,.16);
  font-size:30px;
}
.node.start{left:7%;top:75%}
.node.core{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:142px;
  height:142px;
  font-size:54px;
  background:radial-gradient(circle at 35% 30%,#fff,var(--cyan) 20%,#1f3f44 55%,#0c1518 80%);
  border-color:rgba(101,234,255,.55);
  box-shadow:0 0 52px rgba(101,234,255,.25),inset 0 0 42px rgba(255,255,255,.12);
}
.node.core.ready{
  background:radial-gradient(circle at 35% 30%,#fff,var(--acid) 24%,#4b7022 58%,#0c1518 82%);
  border-color:rgba(186,255,61,.75);
  box-shadow:0 0 72px rgba(186,255,61,.36),inset 0 0 50px rgba(255,255,255,.18);
  animation:pulse 1.5s ease-in-out infinite;
}
.node.core.online{
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold) 24%,#945d22 58%,#0c1518 82%);
  border-color:rgba(255,211,111,.80);
  box-shadow:0 0 88px rgba(255,211,111,.42),inset 0 0 58px rgba(255,255,255,.22);
}

.gear{
  --rot:0deg;
  position:absolute;
  z-index:6;
  width:132px;
  height:132px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:
    repeating-conic-gradient(from 0deg,var(--copper) 0 9deg,#6f422a 9deg 18deg),
    radial-gradient(circle,#2a3439 0 40%,transparent 41%);
  box-shadow:0 18px 42px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08);
  transform:translate(-50%,-50%) rotate(var(--rot));
  transition:transform .22s ease,filter .18s ease;
}
.gear:hover{filter:brightness(1.15)}
.gear.locked{cursor:not-allowed;opacity:.82}
.gear.online{
  animation:gearSpin 3.5s linear infinite;
}
.gear-inner{
  position:absolute;
  inset:15px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),rgba(19,26,29,.92) 45%,#0b1013 75%);
  border:4px solid rgba(224,164,100,.42);
  display:grid;
  place-items:center;
}
.gear-inner:before{
  content:"";
  position:absolute;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#071012;
  border:4px solid rgba(255,255,255,.10);
}
.channel{
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:44px;
  margin-left:-6px;
  margin-top:-44px;
  transform-origin:50% 44px;
  border-radius:10px;
  background:rgba(255,255,255,.16);
}
.channel.active{
  background:var(--acid);
  box-shadow:0 0 14px rgba(186,255,61,.75);
}
.channel.d0{transform:rotate(0deg)}
.channel.d1{transform:rotate(90deg)}
.channel.d2{transform:rotate(180deg)}
.channel.d3{transform:rotate(270deg)}
.lock-badge{
  position:absolute;
  right:-5px;
  top:-5px;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  font-size:18px;
}
.status-panel{
  border-radius:30px;
  padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:13px;
}
.message{
  min-height:230px;
  display:grid;
  align-content:center;
  text-align:center;
  font-size:18px;
  line-height:1.44;
}
.message strong{color:var(--acid)}
.message .small{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
}
.result-icon{
  font-size:74px;
  line-height:1;
  filter:drop-shadow(0 0 18px rgba(255,211,111,.35));
}
.actions{
  display:grid;
  gap:10px;
}
.btn,button.action{
  border:none;
  cursor:pointer;
  border-radius:999px;
  padding:15px 22px;
  font-size:17px;
  font-weight:950;
  color:#07100c;
  background:linear-gradient(135deg,var(--acid),var(--acid2));
  box-shadow:0 18px 42px rgba(186,255,61,.18),0 0 22px rgba(186,255,61,.16);
  text-decoration:none;
  text-align:center;
  transition:transform .16s ease,opacity .16s ease;
}
.btn:hover,button.action:hover{transform:translateY(-2px)}
.secondary{
  background:rgba(255,255,255,.08)!important;
  color:var(--text)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;
}
.reveal{
  padding:19px 26px;
  font-size:23px;
  letter-spacing:.4px;
  text-transform:uppercase;
  background:linear-gradient(135deg,#fff0a8,var(--gold),#ffab39)!important;
  box-shadow:0 24px 58px rgba(255,211,111,.25)!important;
}
.hint-list{
  padding:14px;
  border-radius:22px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.hint-list b{color:var(--gold)}

.bottom-brand{
  position:relative;
  z-index:2;
  width:min(1220px,calc(100% - 32px));
  margin:2px auto 0;
  text-align:center;
  color:var(--acid);
  font-size:clamp(25px,3.2vw,38px);
  font-weight:950;
  text-shadow:0 14px 38px rgba(0,0,0,.35);
}
.footer{
  position:relative;
  z-index:2;
  width:min(1220px,calc(100% - 32px));
  margin:0 auto;
  padding:8px 0 18px;
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.footer a{
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  font-weight:900;
}
.footer a:hover{color:var(--acid)}

.content-wrap{
  position:relative;
  z-index:2;
  width:min(900px,calc(100% - 32px));
  margin:34px auto 60px;
}
.content-card{
  padding:34px;
  border-radius:32px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
  border:1px solid rgba(224,164,100,.20);
  color:var(--muted);
  line-height:1.72;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
}
.content-card h1,.content-card h2{color:var(--text)}
.content-card h1{margin-top:0;font-size:clamp(32px,4vw,48px)}
.content-card a{color:var(--acid);font-weight:900}

@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-18px)}}
@keyframes slowSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(.98)}50%{transform:translate(-50%,-50%) scale(1.04)}}
@keyframes gearSpin{from{transform:translate(-50%,-50%) rotate(var(--rot))}to{transform:translate(-50%,-50%) rotate(calc(var(--rot) + 360deg))}}
@media(max-width:1120px){
  .topbar{grid-template-columns:1fr}
  .hud{min-width:0}
  .machine-wrap{grid-template-columns:1fr}
  .machine{min-height:560px}
}
@media(max-width:760px){
  .hud{grid-template-columns:1fr 1fr}
  .machine{min-height:520px}
  .gear{width:104px;height:104px}
  .node.core{width:116px;height:116px}
  .node.start{width:62px;height:62px}
}