*{box-sizing:border-box}
:root{--g:#9cff00;--g2:#ddff91}
html,body{width:100%;height:100%;scroll-behavior:smooth;background:#000}
body{margin:0;min-height:100%;overflow:hidden;background:#000;color:#e8f0df;font-family:"Courier New",ui-monospace,monospace}
button{font:inherit}
.hero{height:100svh;min-height:650px;position:relative;overflow:hidden;background:#000;isolation:isolate}
.art{position:absolute;inset:0;z-index:1;overflow:hidden}.art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:brightness(1.03) contrast(1.09) saturate(1.06);animation:breath 18s ease-in-out infinite alternate}
.ambient{position:absolute;inset:-10%;z-index:2;pointer-events:none;mix-blend-mode:screen}.a1{background:radial-gradient(circle at 50% 45%,rgba(156,255,0,.15),transparent 33%);filter:blur(20px);animation:amb1 4s infinite}.a2{background:radial-gradient(ellipse at 50% 90%,rgba(156,255,0,.13),transparent 44%);filter:blur(30px);animation:amb2 5s infinite}
.orbit{position:absolute;z-index:3;left:50%;top:47%;border:1px solid rgba(156,255,0,.15);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen}.o1{width:min(76vw,1180px);aspect-ratio:1;border-style:dashed;animation:spin 28s linear infinite}.o2{width:min(57vw,880px);aspect-ratio:1;border-color:rgba(221,255,145,.12);animation:spinr 19s linear infinite}.o3{width:min(100vw,1500px);height:38vh;border-color:rgba(156,255,0,.08);animation:orbitc 14s ease-in-out infinite}.orbit:before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;left:50%;top:-3px;background:var(--g);box-shadow:0 0 18px 5px var(--g)}
.holo{position:absolute;z-index:4;border:1px solid rgba(156,255,0,.10);border-radius:50%;pointer-events:none;mix-blend-mode:screen}.h1{left:10%;top:18%;width:190px;height:190px;animation:spin 12s linear infinite}.h2{right:10%;bottom:18%;width:140px;height:140px;animation:spinr 9s linear infinite}.holo:after{content:"";position:absolute;inset:12%;border:1px dashed rgba(156,255,0,.13);border-radius:50%}
.energy-line{position:absolute;z-index:5;height:1px;background:linear-gradient(90deg,transparent,var(--g),transparent);box-shadow:0 0 15px var(--g);opacity:.38}.e1{left:3%;top:31%;width:44%;animation:line1 6s infinite}.e2{right:3%;top:66%;width:36%;animation:line2 8s infinite}
.hud{position:absolute;inset:2.2%;z-index:6;border:1px solid rgba(156,255,0,.14);pointer-events:none}.hud-c{position:absolute;z-index:7;width:82px;height:82px;border-color:var(--g);border-style:solid;opacity:.5;pointer-events:none}.c1{left:2.2%;top:2.2%;border-width:2px 0 0 2px}.c2{right:2.2%;top:2.2%;border-width:2px 2px 0 0}.c3{left:2.2%;bottom:2.2%;border-width:0 0 2px 2px}.c4{right:2.2%;bottom:2.2%;border-width:0 2px 2px 0}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#matrix{z-index:8;opacity:.17;mix-blend-mode:screen}#particles{z-index:10}#lightning{z-index:11;mix-blend-mode:screen}#sparks{position:absolute;inset:0;z-index:12;pointer-events:none}.spark{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--g);box-shadow:0 0 13px 3px rgba(156,255,0,.8);animation:spark var(--d) linear infinite;animation-delay:var(--delay)}
.scanlines{position:absolute;inset:0;z-index:13;pointer-events:none;opacity:.48;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(156,255,0,.045) 4px,transparent 5px);animation:scan .9s linear infinite}.scan-sweep{position:absolute;left:0;right:0;top:-15%;height:11%;z-index:14;background:linear-gradient(transparent,rgba(156,255,0,.13),transparent);filter:blur(2px);animation:sweep 6.5s linear infinite}.data-sweep{position:absolute;top:0;bottom:0;left:-15%;width:8%;z-index:14;background:linear-gradient(90deg,transparent,rgba(156,255,0,.1),transparent);filter:blur(7px);animation:dataSweep 9s linear infinite}
.noise{position:absolute;inset:-20%;z-index:15;opacity:.035;mix-blend-mode:screen;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:noise .14s steps(2) infinite}.edge{position:absolute;inset:0;z-index:16;pointer-events:none;box-shadow:inset 0 0 90px rgba(156,255,0,.07),inset 0 0 240px rgba(0,0,0,.68);animation:edge 4s infinite}.vignette{position:absolute;inset:0;z-index:17;pointer-events:none;background:radial-gradient(ellipse at center,transparent 33%,rgba(0,0,0,.2) 64%,rgba(0,0,0,.82) 100%)}.glitch{position:absolute;inset:0;z-index:18;pointer-events:none;opacity:0;background:linear-gradient(transparent 41%,rgba(156,255,0,.16) 42%,transparent 44%);mix-blend-mode:screen;animation:glitch 8s steps(1) infinite}.flash{position:absolute;inset:0;z-index:19;background:rgba(156,255,0,.14);opacity:0;pointer-events:none}.shock{position:absolute;z-index:19;left:50%;top:48%;width:8px;height:8px;border:1px solid var(--g);border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}

.system-window{
  position:absolute;
  z-index:29;
  top:4%;
  right:3%;
  width:min(31vw,430px);
  aspect-ratio:16/9;
  padding:5px;
  border:1px solid rgba(156,255,0,.65);
  border-radius:5px;
  background:rgba(0,6,2,.86);
  box-shadow:
    0 0 22px rgba(156,255,0,.20),
    0 0 70px rgba(156,255,0,.08),
    inset 0 0 18px rgba(156,255,0,.08);
  overflow:hidden;
  pointer-events:none;
  backdrop-filter:blur(3px);
}
.system-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:1px solid rgba(156,255,0,.22);
  border-radius:2px;
  filter:brightness(.92) contrast(1.08) saturate(.9);
}
.system-window:before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:2;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(156,255,0,.045) 3px,
      transparent 4px
    );
  mix-blend-mode:screen;
}
.system-window:after{
  content:"";
  position:absolute;
  z-index:3;
  left:5%;
  right:5%;
  top:-20%;
  height:12%;
  background:linear-gradient(transparent,rgba(156,255,0,.20),transparent);
  filter:blur(2px);
  animation:systemScan 5.5s linear infinite;
  pointer-events:none;
}
.system-window-glow{
  position:absolute;
  inset:-20%;
  z-index:1;
  background:radial-gradient(ellipse at center,rgba(156,255,0,.10),transparent 58%);
  animation:systemGlow 3.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes systemScan{
  0%{transform:translateY(-80%);opacity:0}
  12%{opacity:1}
  100%{transform:translateY(900%);opacity:0}
}
@keyframes systemGlow{
  50%{opacity:.45;transform:scale(1.06)}
}
.fx-off .system-window:before,
.fx-off .system-window:after,
.fx-off .system-window-glow{animation-play-state:paused!important}

.status{position:absolute;z-index:30;left:3%;top:4%;padding:12px 17px;background:rgba(0,7,0,.65);border:1px solid rgba(156,255,0,.58);box-shadow:0 0 20px rgba(156,255,0,.12),inset 0 0 18px rgba(156,255,0,.05);color:var(--g);font-size:12px;letter-spacing:2px;text-shadow:0 0 10px var(--g);backdrop-filter:blur(5px)}.status small{display:block;margin-top:7px;color:var(--g2);font-size:10px}.led,#fx span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 15px 4px rgba(156,255,0,.7);margin-right:8px;animation:led 1.2s infinite}
.side{position:absolute;z-index:30;color:rgba(156,255,0,.82);font-size:12px;line-height:2.15;letter-spacing:4px;text-shadow:0 0 8px rgba(156,255,0,.45)}.left{left:3.7%;top:22%}.right{right:3.7%;top:26%;text-align:center}
.tele{position:absolute;z-index:30;font-size:8px;line-height:1.85;letter-spacing:1.5px;color:rgba(156,255,0,.5)}.tele b{color:rgba(221,255,145,.75)}.t1{left:4%;bottom:8%}.t2{right:4%;bottom:8%;text-align:right}
.signal{position:absolute;z-index:30;height:1px;background:linear-gradient(90deg,transparent,var(--g),transparent);box-shadow:0 0 10px var(--g);opacity:.42}.s1{left:5%;top:57%;width:100px;animation:sig 3s infinite}.s2{right:6%;top:39%;width:130px;animation:sig 4s infinite reverse}.s3{left:44%;bottom:8%;width:180px;animation:sig 2.4s infinite}
.bar{position:absolute;z-index:30;width:110px;height:3px;background:rgba(156,255,0,.1);overflow:hidden}.bar i{display:block;width:35%;height:100%;background:var(--g);box-shadow:0 0 10px var(--g)}.b1{left:4%;top:49%}.b2{right:4%;top:55%}.b1 i{animation:progress 2.1s infinite}.b2 i{animation:progress 3s infinite reverse}
#fx{position:absolute;z-index:40;right:3%;bottom:4%;min-width:200px;height:43px;border:1px solid var(--g);background:rgba(0,7,0,.82);color:var(--g);font-weight:700;letter-spacing:2px;cursor:pointer;box-shadow:0 0 18px rgba(156,255,0,.28),inset 0 0 18px rgba(156,255,0,.06);transition:.2s}#fx:hover{box-shadow:0 0 30px rgba(156,255,0,.65),inset 0 0 25px rgba(156,255,0,.13);transform:translateY(-1px)}#fx span{margin-right:8px}
.scroll{position:absolute;z-index:30;left:50%;bottom:4%;transform:translateX(-50%);font-size:8px;letter-spacing:3px;color:rgba(221,255,145,.45);animation:hint 2s infinite}

.fx-off .ambient,.fx-off .orbit,.fx-off .holo,.fx-off .energy-line,.fx-off .scanlines,.fx-off .scan-sweep,.fx-off .data-sweep,.fx-off .noise,.fx-off .edge,.fx-off .glitch,.fx-off .spark,.fx-off #matrix,.fx-off #particles,.fx-off #lightning,.fx-off .signal,.fx-off .bar{animation-play-state:paused!important}.fx-off .ambient,.fx-off .orbit,.fx-off .holo,.fx-off .energy-line,.fx-off #matrix,.fx-off #particles,.fx-off #lightning,.fx-off #sparks,.fx-off .signal,.fx-off .bar{display:none}
.shock-on .shock{animation:shock .9s ease-out}.shock-on .hero{animation:hit .36s linear}
@keyframes breath{from{transform:scale(1)}to{transform:scale(1.035)}}@keyframes amb1{50%{opacity:.9;transform:scale(1.12)}}@keyframes amb2{50%{opacity:.7;transform:scale(1.16)}}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes spinr{to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes orbitc{50%{transform:translate(-50%,-50%) rotate(10deg) scale(1.08)}}@keyframes line1{50%{transform:rotate(5deg) scaleX(1.08)}}@keyframes line2{50%{transform:rotate(-5deg) scaleX(.76)}}@keyframes scan{to{background-position:0 10px}}@keyframes sweep{0%{transform:translateY(-20vh);opacity:0}12%{opacity:1}100%{transform:translateY(130vh);opacity:0}}@keyframes dataSweep{0%{transform:translateX(-30vw);opacity:0}12%{opacity:1}100%{transform:translateX(150vw);opacity:0}}@keyframes noise{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}@keyframes glitch{0%,91%,95%,100%{opacity:0}92%{opacity:.75;transform:translate(0,3px)}94%{opacity:.25;transform:translate(-5px,-2px)}}@keyframes edge{50%{opacity:.9}}@keyframes led{50%{opacity:.2;box-shadow:0 0 4px rgba(156,255,0,.2)}}@keyframes sig{50%{opacity:.12;transform:scaleX(.45)}}@keyframes progress{0%{transform:translateX(-120px)}100%{transform:translateX(120px)}}@keyframes spark{0%{transform:translate3d(0,20px,0) scale(.2);opacity:0}8%{opacity:1}100%{transform:translate3d(var(--x),-110vh,0) scale(1.5);opacity:0}}@keyframes shock{0%{width:8px;height:8px;opacity:1}100%{width:88vw;height:88vw;opacity:0}}@keyframes flash{0%{opacity:.3}100%{opacity:0}}@keyframes hit{0%,100%{transform:translate(0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,1px)}}@keyframes hint{50%{opacity:.3;transform:translateX(-50%) translateY(4px)}}
@media(max-width:700px){.hero{min-height:720px}.art img{object-position:center}.o1{width:112vw}.o2{width:78vw}.o3{width:135vw}.h1{left:4%;top:24%;width:100px;height:100px}.h2{right:4%;bottom:25%;width:85px;height:85px}
.system-window{
  position:absolute;
  z-index:29;
  top:4%;
  right:3%;
  width:min(31vw,430px);
  aspect-ratio:16/9;
  padding:5px;
  border:1px solid rgba(156,255,0,.65);
  border-radius:5px;
  background:rgba(0,6,2,.86);
  box-shadow:
    0 0 22px rgba(156,255,0,.20),
    0 0 70px rgba(156,255,0,.08),
    inset 0 0 18px rgba(156,255,0,.08);
  overflow:hidden;
  pointer-events:none;
  backdrop-filter:blur(3px);
}
.system-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:1px solid rgba(156,255,0,.22);
  border-radius:2px;
  filter:brightness(.92) contrast(1.08) saturate(.9);
}
.system-window:before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:2;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(156,255,0,.045) 3px,
      transparent 4px
    );
  mix-blend-mode:screen;
}
.system-window:after{
  content:"";
  position:absolute;
  z-index:3;
  left:5%;
  right:5%;
  top:-20%;
  height:12%;
  background:linear-gradient(transparent,rgba(156,255,0,.20),transparent);
  filter:blur(2px);
  animation:systemScan 5.5s linear infinite;
  pointer-events:none;
}
.system-window-glow{
  position:absolute;
  inset:-20%;
  z-index:1;
  background:radial-gradient(ellipse at center,rgba(156,255,0,.10),transparent 58%);
  animation:systemGlow 3.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes systemScan{
  0%{transform:translateY(-80%);opacity:0}
  12%{opacity:1}
  100%{transform:translateY(900%);opacity:0}
}
@keyframes systemGlow{
  50%{opacity:.45;transform:scale(1.06)}
}
.fx-off .system-window:before,
.fx-off .system-window:after,
.fx-off .system-window-glow{animation-play-state:paused!important}

.status{left:12px;top:68px;padding:9px 11px;font-size:9px}.status small{font-size:8px}.side{font-size:9px;letter-spacing:3px}.left{left:14px;top:28%}.right{right:13px;top:32%}.tele{font-size:7px;bottom:11%}.t1{left:14px}.t2{right:14px}.bar{width:65px}.b1{left:14px}.b2{right:14px}#fx{right:12px;bottom:max(16px,env(safe-area-inset-bottom));min-width:170px;height:39px;font-size:9px}.scroll{display:none}.hud{inset:3%}.hud-c{width:58px;height:58px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:700px){
  .system-window{
    top:12px;
    right:12px;
    width:42vw;
    max-width:300px;
    min-width:190px;
    padding:3px;
  }
}



/* DOBI logo — fixed bottom-left, clear of all technical text */
.corner-logo{
  position:fixed !important;
  left:22px !important;
  bottom:20px !important;
  top:auto !important;
  right:auto !important;
  z-index:9999 !important;
  width:120px !important;
  height:120px !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.corner-logo img{
  background:transparent !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  mix-blend-mode:normal !important;
  border-radius:50% !important;
}
@media(max-width:700px){
  .corner-logo{
    left:12px !important;
    bottom:14px !important;
    width:82px !important;
    height:82px !important;
  }
}