/* hacktoday.to — shared styles */
:root{
  --bg:#000;
  --green:#00ff41;
  --green-dim:#0a8f2c;
  --green-rgb:0,255,65;
  --ink:#d7ffe3;
  --mute:#4e7a5b;
  --cyan:#00e5ff;
  --magenta:#ff2f6d;
  --line:rgba(0,255,65,0.16);
  color-scheme: dark;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Consolas,monospace;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:1px solid var(--green);outline-offset:3px;}

/* ---------- background layers ---------- */
#matrix{position:fixed;inset:0;z-index:0;display:block;}
.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.88) 45%, rgba(0,0,0,0.96) 100%);
}
.scan{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,255,65,0.045) 0px, rgba(0,255,65,0.045) 1px, transparent 1px, transparent 3px);
}
.scan::after{
  content:"";position:absolute;left:0;right:0;height:140px;
  background:linear-gradient(to bottom, transparent, rgba(0,255,65,0.055), transparent);
  animation:sweep 7s linear infinite;
}
@keyframes sweep{ from{transform:translateY(-160px);} to{transform:translateY(100vh);} }

/* ---------- chrome ---------- */
.shell{position:relative;z-index:3;min-height:100vh;display:flex;flex-direction:column;}

header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1rem,4vw,2.4rem);
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:.82rem;letter-spacing:.18em;color:var(--green);}
.brand svg{width:16px;height:16px;flex:none;}
nav{display:flex;align-items:center;gap:1.15rem;}
.lnk{
  font-size:.72rem;letter-spacing:.12em;color:var(--mute);
  background:none;border:none;padding:.25rem 0;cursor:pointer;
  font-family:inherit;position:relative;transition:color .18s ease;
}
.lnk::before{content:"[";margin-right:.3rem;opacity:0;transition:opacity .18s ease;}
.lnk::after{content:"]";margin-left:.3rem;opacity:0;transition:opacity .18s ease;}
.lnk:hover,.lnk:focus-visible,.lnk.on{color:var(--green);text-shadow:0 0 10px rgba(var(--green-rgb),.55);}
.lnk:hover::before,.lnk:hover::after,.lnk:focus-visible::before,.lnk:focus-visible::after,.lnk.on::before,.lnk.on::after{opacity:1;}

/* equalizer */
#eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px;margin-left:.55rem;vertical-align:-2px;}
#eq i{display:block;width:2px;height:13px;background:var(--green-dim);transform:scaleY(.08);transform-origin:bottom;transition:background .2s ease;}
.audio-live #eq i{background:var(--green);box-shadow:0 0 6px rgba(var(--green-rgb),.8);}

/* ---------- content ---------- */
main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,7vw,4.5rem) clamp(1rem,5vw,2.4rem);}

.status{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.68rem;letter-spacing:.2em;color:var(--mute);margin-bottom:1.5rem;
}
.status b{color:var(--green);font-weight:400;}
.blip{width:6px;height:6px;background:var(--green);box-shadow:0 0 8px var(--green);animation:blip 1.6s steps(1) infinite;}
@keyframes blip{50%{opacity:.25;}}

/* glitch wordmark */
.glitch{
  position:relative;display:inline-block;
  font-size:clamp(2.6rem,12.5vw,8.5rem);
  font-weight:700;line-height:.92;letter-spacing:-.02em;
  color:var(--ink);
  text-shadow:0 0 28px rgba(var(--green-rgb),.5), 0 0 80px rgba(var(--green-rgb),.22);
  margin:0;
}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;
  clip-path:inset(100% 0 0 0);
  pointer-events:none;
}
.glitch::before{color:var(--cyan);animation:gl1 6s steps(1) infinite;}
.glitch::after{color:var(--magenta);animation:gl2 5.3s steps(1) infinite;}
@keyframes gl1{
  0%,89%,100%{clip-path:inset(100% 0 0 0);transform:translate(0);}
  90%{clip-path:inset(12% 0 66% 0);transform:translate(-5px);}
  93%{clip-path:inset(58% 0 24% 0);transform:translate(4px);}
  96%{clip-path:inset(36% 0 48% 0);transform:translate(-3px);}
}
@keyframes gl2{
  0%,91%,100%{clip-path:inset(100% 0 0 0);transform:translate(0);}
  92%{clip-path:inset(70% 0 14% 0);transform:translate(5px);}
  95%{clip-path:inset(24% 0 56% 0);transform:translate(-4px);}
  98%{clip-path:inset(46% 0 38% 0);transform:translate(3px);}
}

[data-decode] i{font-style:normal;color:var(--green-dim);}

.cursor{display:inline-block;width:.6em;height:1.05em;background:var(--green);vertical-align:-.16em;animation:cur 1s steps(1) infinite;}
@keyframes cur{50%{opacity:0;}}

/* ---------- footer / hud ---------- */
footer{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.85rem clamp(1rem,4vw,2.4rem);
  border-top:1px solid var(--line);
  font-size:.66rem;letter-spacing:.12em;color:var(--mute);
  background:rgba(0,0,0,0.55);
}
footer b{color:var(--green-dim);font-weight:400;}
#hint{color:var(--green);animation:blip 1.8s steps(1) infinite;}

@media (prefers-reduced-motion: reduce){
  .scan::after,.blip,.cursor,#hint{animation:none;}
  .glitch::before,.glitch::after{animation:none;}
}
@media (max-width:620px){
  .hide-sm{display:none;}
}