@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --bg:#07050a; --panel:#0e0a13; --text:#f4eff7; --muted:#a79eac;
  --pink:#ff27bd; --violet:#8d3cff; --green:#a8ff68; --cyan:#72e8ff;
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Space Grotesk",sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:
radial-gradient(circle at 78% 14%,rgba(255,39,189,.12),transparent 25%),
radial-gradient(circle at 18% 65%,rgba(141,60,255,.10),transparent 30%);z-index:-2}
.noise{position:fixed;inset:0;opacity:.035;pointer-events:none;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:19;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.025) 4px)}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:99}
.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:sticky;top:0;background:rgba(7,5,10,.82);backdrop-filter:blur(12px);z-index:10}
.brand{font-family:"IBM Plex Mono";font-weight:700;letter-spacing:.04em}.brand span{color:var(--pink)}.brand small{color:var(--green);margin-left:5px}
.dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 14px var(--green);margin-right:9px}
nav{display:flex;gap:28px}nav a{color:var(--muted);text-decoration:none;font:600 11px "IBM Plex Mono";letter-spacing:.14em}nav a:hover{color:#fff}
.sound{font:600 10px "IBM Plex Mono";background:none;border:1px solid var(--line);color:var(--muted);padding:9px 12px;cursor:pointer}
.hero{min-height:calc(100vh - 72px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:7vw 8vw;gap:5vw}
.eyebrow{font:600 10px "IBM Plex Mono";letter-spacing:.18em;color:var(--pink);margin:0 0 20px}
h1,h2,h3,p{margin-top:0}h1{font-size:clamp(55px,8vw,120px);line-height:.84;letter-spacing:-.065em;margin-bottom:28px}
h1 em,h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--pink)}
.lead{max-width:580px;color:var(--muted);font-size:16px;line-height:1.7}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0}
.btn{display:inline-flex;align-items:center;gap:18px;padding:15px 18px;font:700 11px "IBM Plex Mono";letter-spacing:.08em;text-decoration:none;cursor:pointer}
.primary{background:var(--pink);color:#09050a;border:1px solid var(--pink)}.primary:hover{filter:brightness(1.2)}
.ghost{background:transparent;color:#fff;border:1px solid var(--line)}.ghost:hover{border-color:var(--pink);color:var(--pink)}
.status{font:500 10px "IBM Plex Mono";color:#716876}.online{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:6px}.sep{margin:0 10px;color:#39313e}
.hero-art{position:relative;max-width:570px;justify-self:end}.art-frame{position:relative;border:1px solid rgba(255,39,189,.4);padding:10px;background:#000;box-shadow:20px 20px 0 rgba(141,60,255,.10),0 0 80px rgba(255,39,189,.12);transform:rotate(1.5deg)}
.art-frame img{display:block;width:100%;max-height:620px;object-fit:cover;filter:saturate(1.15) contrast(1.05)}
.art-label{position:absolute;bottom:18px;left:18px;background:rgba(7,5,10,.8);border-left:2px solid var(--green);padding:8px 12px;font:600 9px "IBM Plex Mono";letter-spacing:.12em}.art-label span{color:var(--green)}
.reticle{position:absolute;width:45px;height:45px;border:1px solid var(--cyan);opacity:.65}.r1{top:-14px;right:-14px;border-left:0;border-bottom:0}.r2{bottom:-14px;left:-14px;border-right:0;border-top:0}
.floating-code{position:absolute;right:-55px;top:30%;font:500 9px/1.8 "IBM Plex Mono";color:var(--green);opacity:.5}
.ticker{border-block:1px solid var(--line);height:44px;display:flex;align-items:center;justify-content:space-around;overflow:hidden;font:600 9px "IBM Plex Mono";letter-spacing:.2em;color:#817684;white-space:nowrap}
.section{padding:110px 8vw}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:50px}.section-head h2{font-size:clamp(44px,7vw,90px);line-height:.86;letter-spacing:-.06em;margin:0}.section-head h2 span{color:var(--pink)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card{min-height:270px;padding:28px;border-right:1px solid var(--line);position:relative;background:linear-gradient(140deg,rgba(255,255,255,.015),transparent)}.card:last-child{border:0}.card:hover{background:rgba(255,39,189,.04)}
.card-no{font:600 10px "IBM Plex Mono";color:var(--green)}.card h3{font-size:30px;margin:65px 0 12px}.card p{color:var(--muted);font-size:13px;line-height:1.6;max-width:330px}.card a{position:absolute;bottom:25px;color:var(--pink);text-decoration:none;font:600 10px "IBM Plex Mono"}
.gallery{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:14px}.gallery figure{margin:0;background:#000;border:1px solid var(--line);overflow:hidden}.gallery figure.large{grid-row:span 2}.gallery img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover;transition:transform .5s,filter .5s}.gallery figure:hover img{transform:scale(1.03);filter:saturate(1.3)}figcaption{padding:10px 12px;color:#887d8c;font:600 9px "IBM Plex Mono";letter-spacing:.1em;border-top:1px solid var(--line)}
.terminal-section{background:linear-gradient(180deg,transparent,rgba(141,60,255,.035),transparent)}.terminal{max-width:900px;margin:auto;background:#030304;border:1px solid #2a2030;box-shadow:0 0 50px rgba(0,0,0,.5)}.term-top{height:38px;border-bottom:1px solid #201b23;display:flex;align-items:center;gap:6px;padding:0 12px}.term-top span{width:8px;height:8px;border-radius:50%;background:#4a414d}.term-top b{margin-left:10px;font:500 9px "IBM Plex Mono";color:#6d6570}.output{height:330px;overflow:auto;padding:20px;font:500 12px/1.7 "IBM Plex Mono";color:#bfb5c4}.output div{white-space:pre-wrap}.output strong{color:var(--green)}.out-pink{color:var(--pink)}.out-green{color:var(--green)}
#termForm{border-top:1px solid #201b23;padding:14px 20px}#termForm label{display:flex;gap:10px;font:500 12px "IBM Plex Mono";color:var(--green)}#cmd{flex:1;background:none;border:0;outline:0;color:#fff;font:500 12px "IBM Plex Mono"}
.hint{text-align:center;color:#665d69;font:500 10px "IBM Plex Mono";margin-top:15px}
.secrets{min-height:560px;display:grid;grid-template-columns:1fr 1fr;align-items:center;border-top:1px solid var(--line)}.secret-panel{max-width:550px}.secret-panel h2{font-size:clamp(55px,8vw,105px);line-height:.8;letter-spacing:-.06em}.secret-panel p:not(.eyebrow){color:var(--muted);line-height:1.7}.secret-code{font:700 26px "IBM Plex Mono";letter-spacing:.35em;color:var(--green);margin:35px 0}
.eye{font-size:260px;text-align:center;color:var(--pink);text-shadow:0 0 50px rgba(255,39,189,.35);animation:pulse 3s infinite;cursor:pointer;user-select:none}@keyframes pulse{50%{transform:scale(1.05);opacity:.75}}
footer{border-top:1px solid var(--line);padding:28px 8vw;display:flex;justify-content:space-between;gap:20px;color:#6e6571;font:600 9px "IBM Plex Mono";letter-spacing:.08em}footer span{color:var(--pink)}footer b{color:var(--green)}
.toast{position:fixed;right:20px;bottom:20px;max-width:320px;background:#0d0910;border:1px solid var(--pink);padding:14px 16px;color:#fff;font:500 11px/1.5 "IBM Plex Mono";transform:translateY(140%);transition:.35s;z-index:50}.toast.show{transform:translateY(0)}
body.chaos .hero-art{animation:shake .12s 8}body.chaos #flash{animation:flash .4s}@keyframes shake{25%{transform:translate(5px,-3px) rotate(-1deg)}75%{transform:translate(-4px,3px) rotate(2deg)}}@keyframes flash{0%{opacity:.55}100%{opacity:0}}
@media(max-width:850px){nav{display:none}.hero{grid-template-columns:1fr;padding-top:70px}.hero-art{justify-self:center;width:90%}.floating-code{display:none}.cards,.gallery,.secrets{grid-template-columns:1fr}.card{border-right:0;border-bottom:1px solid var(--line)}.gallery figure.large{grid-row:auto}.gallery img{min-height:220px}.section-head{display:block}.section-head h2{margin-top:20px}.secrets{gap:50px}.eye{font-size:180px}footer{flex-direction:column}}


/* --- SECRET COMMAND EFFECTS --- */
.joker-card{
  position:fixed; z-index:90; width:190px; padding:10px;
  background:#09060d; border:1px solid rgba(255,39,189,.75);
  box-shadow:0 0 35px rgba(255,39,189,.28), 8px 8px 0 rgba(141,60,255,.12);
  pointer-events:none; transform:rotate(var(--rot));
  animation:cardIn .28s ease-out forwards;
}
.joker-card img{width:100%;height:210px;object-fit:cover;display:block}
.joker-card span{display:block;padding:8px 2px 2px;color:#a8ff68;font:700 8px "IBM Plex Mono";letter-spacing:.12em}
@keyframes cardIn{from{opacity:0;transform:scale(.6) rotate(var(--rot))}to{opacity:1;transform:scale(1) rotate(var(--rot))}}

.osnt-image{
  display:none; position:fixed; z-index:88; left:50%; top:50%;
  transform:translate(-50%,-50%); width:min(650px,86vw);
  background:#050407; border:1px solid var(--pink); padding:10px;
  box-shadow:0 0 100px rgba(255,39,189,.3);
}
.osnt-image.open{display:block;animation:pop .35s ease-out}
.osnt-image img{width:100%;max-height:70vh;object-fit:contain;display:block}
.osnt-image button{position:absolute;right:18px;top:18px;background:#07050a;color:#fff;border:1px solid var(--line);padding:7px 10px;font:700 9px "IBM Plex Mono";cursor:pointer}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.screen-break{
  display:none;position:fixed;inset:0;z-index:100;background:rgba(3,2,5,.96);
  overflow:hidden;align-items:center;justify-content:center;
}
.screen-break.open{display:flex;animation:bug .11s infinite}
.screen-break:before,.screen-break:after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,39,189,.13) 6px,transparent 7px);
}
.crack{
  position:absolute;width:70vw;height:70vh;opacity:.8;
  background:
   linear-gradient(25deg,transparent 48%,#fff 49%,transparent 50%),
   linear-gradient(110deg,transparent 48%,#fff 49%,transparent 50%),
   linear-gradient(165deg,transparent 49%,#fff 50%,transparent 51%);
  filter:drop-shadow(0 0 8px #fff);
}
.break-msg{
  position:relative;text-align:center;color:#fff;font:800 22px "IBM Plex Mono";
  letter-spacing:.12em;text-shadow:4px 0 var(--pink),-4px 0 var(--cyan);
}
.break-msg small{font-size:9px;color:var(--green)}
@keyframes bug{0%{transform:translate(0)}25%{transform:translate(3px,-2px)}50%{transform:translate(-2px,3px)}75%{transform:translate(2px,1px)}100%{transform:translate(0)}}

.joker-rain{position:fixed;inset:0;z-index:87;pointer-events:none;overflow:hidden}
.rain-joker{
  position:absolute;width:75px;aspect-ratio:1/1.35;object-fit:cover;
  border:1px solid rgba(255,39,189,.55);box-shadow:0 0 18px rgba(255,39,189,.18);
  animation:fall linear forwards;
}
@keyframes fall{from{transform:translateY(-130px) rotate(0deg);opacity:0}10%{opacity:1}to{transform:translateY(115vh) rotate(360deg);opacity:0}}