:root{
  --bg:#16100b;
  --deep:#090604;
  --honey:#f6bf2e;
  --honey2:#ffda54;
  --darkHoney:#8f4f13;
  --beeBlack:#1f1712;
  --text:#fff4c9;
  --muted:#d3b875;
  --danger:#e84a3c;
  --cyan:#64d5ee;
  --line:rgba(255,219,87,.35);
  --shadow:rgba(0,0,0,.65);
}
*{box-sizing:border-box;border-radius:0!important}
html{scroll-behavior:smooth;background:var(--deep)}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:"Trebuchet MS",Verdana,Arial,sans-serif;
  background:
    linear-gradient(90deg,rgba(255,205,50,.06) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,205,50,.05) 1px,transparent 1px),
    radial-gradient(circle at 75% 20%,rgba(255,218,84,.18),transparent 28rem),
    linear-gradient(135deg,#110b06,#221407 45%,#0a0704);
  background-size:32px 32px,32px 32px,auto,auto;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 6px);
  mix-blend-mode:overlay;
  animation:scanShift 3s steps(4) infinite;
  z-index:2;
}
a{color:inherit;text-decoration:none}
main{margin-left:150px;position:relative;z-index:4}
.scene{
  min-height:100vh;
  position:relative;
  padding:8vh 8vw 8vh 7vw;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-top:4px solid rgba(255,218,84,.14);
}
.signature{
  position:fixed;
  z-index:20;
  font-size:10px;
  letter-spacing:.08em;
  color:rgba(255,244,201,.65);
  text-transform:uppercase;
  pointer-events:none;
  text-shadow:2px 2px 0 rgba(0,0,0,.9);
  animation:sigBuzz 5s steps(2) infinite;
}
.sigTL{top:8px;left:8px}.sigTR{top:8px;right:8px}.sigBL{bottom:8px;left:8px}.sigBR{bottom:8px;right:8px}
.sideNav{
  position:fixed;
  inset:0 auto 0 0;
  width:150px;
  z-index:15;
  background:linear-gradient(180deg,#1b1006,#080604 70%);
  border-right:4px solid var(--honey);
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:58px 14px 24px;
  overflow-y:auto;
  box-shadow:10px 0 0 rgba(0,0,0,.35);
}
.navMark{
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  color:#1b1006;
  background:var(--honey);
  font-family:Consolas,monospace;
  font-weight:900;
  font-size:22px;
  box-shadow:6px 6px 0 #000;
  animation:markGlitch 2.8s steps(2) infinite;
}
.navLink{
  position:relative;
  padding:13px 8px;
  font-family:Consolas,"Courier New",monospace;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  border-left:5px solid transparent;
  text-shadow:2px 2px 0 #000;
  transition:transform .2s, color .2s, background .2s;
}
.navLink:hover,.navLink.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(246,191,46,.32),transparent);
  border-left-color:var(--honey);
  transform:translateX(5px);
}
.navLink.active:after{
  content:"";
  position:absolute;
  right:4px;top:50%;
  width:10px;height:10px;
  background:var(--cyan);
  transform:translateY(-50%);
  animation:navBlink .65s steps(2) infinite;
}
.navHoney{
  margin-top:auto;
  height:110px;
  background:linear-gradient(180deg,var(--honey2),var(--darkHoney));
  clip-path:polygon(0 0,100% 0,100% 75%,80% 75%,80% 100%,60% 100%,60% 70%,42% 70%,42% 92%,24% 92%,24% 66%,0 66%);
  animation:honeyWobble 3.5s steps(4) infinite;
}
.pixelOverlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(45deg,transparent 0 47%,rgba(255,214,73,.05) 47% 53%,transparent 53%),
    linear-gradient(135deg,transparent 0 47%,rgba(93,201,238,.04) 47% 53%,transparent 53%);
  background-size:96px 96px;
  z-index:1;
  animation:overlayWalk 8s steps(8) infinite;
}
.honeyRain,.cursorHive{position:fixed;inset:0;pointer-events:none;z-index:7;overflow:hidden}
.minecraftGrid{
  position:absolute;
  inset:8vh 6vw;
  opacity:.18;
  background:
    linear-gradient(90deg,var(--honey) 2px,transparent 2px),
    linear-gradient(0deg,var(--honey) 2px,transparent 2px);
  background-size:48px 48px;
  transform:skewY(-6deg);
  animation:gridJolt 5s steps(3) infinite;
}
.heroScene{justify-content:space-between;gap:4vw;background:linear-gradient(135deg,rgba(0,0,0,.25),rgba(255,191,46,.08))}
.heroCopy{max-width:760px;position:relative;z-index:3}
.eyebrow{
  margin:0 0 12px;
  font-family:Consolas,"Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--honey2);
  font-size:14px;
  text-shadow:2px 2px 0 #000;
}
.glitchTitle{
  position:relative;
  margin:0;
  font-family:Impact,Consolas,monospace;
  font-size:clamp(68px,12vw,180px);
  line-height:.8;
  text-transform:uppercase;
  color:var(--honey2);
  letter-spacing:.03em;
  text-shadow:8px 8px 0 #000,12px 12px 0 var(--darkHoney);
  animation:titleBump 4s steps(3) infinite;
}
.glitchTitle:before,.glitchTitle:after{
  content:attr(data-text);
  position:absolute;inset:0;
  pointer-events:none;
}
.glitchTitle:before{
  color:var(--cyan);
  transform:translate(4px,-3px);
  clip-path:polygon(0 0,100% 0,100% 32%,0 38%);
  opacity:.7;
  animation:glitchA 1.7s steps(2) infinite;
}
.glitchTitle:after{
  color:var(--danger);
  transform:translate(-5px,3px);
  clip-path:polygon(0 58%,100% 52%,100% 100%,0 100%);
  opacity:.65;
  animation:glitchB 2.1s steps(3) infinite;
}
.roleLine{
  display:inline-block;
  margin:28px 0 20px;
  padding:10px 12px;
  font-family:Consolas,"Courier New",monospace;
  font-size:clamp(18px,2.4vw,34px);
  font-weight:800;
  color:#120b05;
  background:var(--honey);
  box-shadow:8px 8px 0 #000;
  text-transform:uppercase;
  transform:skewX(-6deg);
}
.aboutLead{
  max-width:680px;
  margin:0 0 24px;
  font-size:20px;
  line-height:1.6;
  color:#fff7dc;
  text-shadow:2px 2px 0 rgba(0,0,0,.9);
}
.skillStream{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  max-width:800px;
}
.skillStream span{
  display:inline-block;
  padding:9px 11px;
  background:linear-gradient(90deg,rgba(246,191,46,.95),rgba(246,191,46,.15));
  color:#140d07;
  font-family:Consolas,"Courier New",monospace;
  font-weight:800;
  box-shadow:5px 5px 0 #000;
  animation:tagBuzz 4s steps(2) infinite;
}
.heroBeeWrap{
  position:relative;
  width:min(36vw,430px);
  min-width:240px;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  z-index:3;
}
.heroBeeWrap:before{
  content:"";
  position:absolute;
  inset:5% 0 0 10%;
  background:linear-gradient(90deg,var(--honey),transparent 70%);
  clip-path:polygon(0 12%,90% 0,100% 28%,35% 60%,100% 100%,0 75%);
  opacity:.4;
  animation:honeySlash 3s steps(5) infinite;
}
.heroBee{
  position:relative;
  width:100%;
  image-rendering:auto;
  filter:drop-shadow(20px 22px 0 rgba(0,0,0,.6));
  animation:beeFloat 4s steps(8) infinite, beeGlitchFilter 1.3s steps(2) infinite;
}
.scrollCue{
  position:absolute;
  right:4vw;
  bottom:7vh;
  font-family:Consolas,"Courier New",monospace;
  color:var(--muted);
  writing-mode:vertical-rl;
  text-transform:uppercase;
  letter-spacing:.16em;
  animation:cueJump 1.2s steps(2) infinite;
}
.sectionTitleBlock{position:relative;z-index:4;min-width:250px;margin-right:5vw}
.sectionTitleBlock h2{
  margin:0;
  font-family:Impact,Consolas,monospace;
  font-size:clamp(54px,8vw,126px);
  line-height:.85;
  text-transform:uppercase;
  color:var(--honey2);
  text-shadow:7px 7px 0 #000;
}
.expScene{background:linear-gradient(120deg,rgba(255,214,73,.09),rgba(0,0,0,.18));align-items:flex-start;padding-top:13vh}
.expScene:before,.reviewScene:before,.contactScene:before{
  content:"";
  position:absolute;
  inset:auto -10vw -10vh 12vw;
  height:28vh;
  background:linear-gradient(90deg,var(--honey),transparent);
  clip-path:polygon(0 40%,20% 0,37% 55%,58% 8%,100% 72%,100% 100%,0 100%);
  opacity:.18;
  animation:honeyTectonic 7s steps(5) infinite;
}
.scoutBee{
  position:absolute;
  right:5vw;
  top:8vh;
  width:min(24vw,330px);
  opacity:.9;
  filter:drop-shadow(14px 14px 0 rgba(0,0,0,.55));
  animation:scoutPath 7s steps(10) infinite;
}
.timeline{
  position:relative;
  z-index:4;
  flex:1;
  max-width:900px;
  padding-left:38px;
  border-left:8px solid var(--honey);
  box-shadow:inset 8px 0 0 rgba(0,0,0,.45);
}
.timeline article{
  position:relative;
  padding:0 0 36px 28px;
  margin:0 0 8px;
  background:linear-gradient(90deg,rgba(0,0,0,.42),transparent 85%);
}
.timeline .marker{
  position:absolute;
  left:-53px;top:8px;
  width:26px;height:26px;
  background:var(--honey2);
  box-shadow:6px 6px 0 #000,0 0 0 6px rgba(246,191,46,.25);
  animation:markerPop 2.8s steps(4) infinite;
}
.timeline h3{
  margin:0 0 12px;
  color:#120b05;
  background:var(--honey);
  display:inline-block;
  padding:8px 12px;
  font-family:Consolas,"Courier New",monospace;
  font-size:26px;
  text-transform:uppercase;
  box-shadow:6px 6px 0 #000;
}
.timeline p{
  margin:10px 0;
  font-size:20px;
  line-height:1.45;
  max-width:780px;
  text-shadow:2px 2px 0 #000;
}
.reviewScene{background:linear-gradient(210deg,rgba(74,42,12,.6),rgba(0,0,0,.16));flex-direction:column;align-items:flex-start;justify-content:center;gap:38px}
.reviewRibbons{
  position:relative;
  z-index:4;
  width:min(930px,100%);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.reviewRibbons p{
  margin:0;
  padding:18px 20px;
  font-size:21px;
  line-height:1.42;
  color:#fff7dc;
  background:linear-gradient(90deg,rgba(0,0,0,.64),rgba(143,79,19,.18),transparent);
  border-left:10px solid var(--honey);
  box-shadow:9px 9px 0 rgba(0,0,0,.45);
  transform:skewX(-2deg);
  animation:ribbonGlitch 5s steps(5) infinite;
}
.reviewRibbons strong{color:var(--honey2);font-family:Consolas,"Courier New",monospace;text-transform:uppercase}
.honeyConsole{
  z-index:4;
  width:min(930px,100%);
  padding:18px 20px;
  background:#060403;
  border:3px solid var(--honey);
  box-shadow:10px 10px 0 #000;
  font-family:Consolas,"Courier New",monospace;
  display:grid;
  gap:8px;
  animation:consolePulse 3.2s steps(4) infinite;
}
.honeyConsole span{color:var(--cyan);text-transform:uppercase;letter-spacing:.14em}.honeyConsole b{color:#fff;font-size:20px}
.contactScene{background:linear-gradient(160deg,rgba(255,218,84,.12),rgba(0,0,0,.28));flex-direction:column;align-items:flex-start;justify-content:center;gap:44px}
.contactLayout{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px;
  width:min(1050px,100%);
  align-items:start;
}
.contactText{
  font-size:22px;
  line-height:1.55;
  text-shadow:2px 2px 0 #000;
}
.contactLine{
  font-family:Consolas,"Courier New",monospace;
  color:var(--honey2);
  background:rgba(0,0,0,.42);
  padding:10px 12px;
  border-left:8px solid var(--honey);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.contactLine span{color:#fff;text-transform:uppercase;letter-spacing:.08em}
.contactLine b,.contactLine a{color:var(--honey2);text-decoration:none;word-break:break-word}
.contactLine a:hover{color:var(--cyan)}
.contactForm{
  display:grid;
  gap:14px;
  background:linear-gradient(135deg,rgba(0,0,0,.72),rgba(143,79,19,.24));
  border:4px solid var(--honey);
  padding:20px;
  box-shadow:12px 12px 0 #000;
  animation:formJitter 6s steps(6) infinite;
}
.contactForm label{
  display:grid;
  gap:7px;
  font-family:Consolas,"Courier New",monospace;
  color:var(--honey2);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.contactForm input,.contactForm textarea{
  width:100%;
  border:3px solid #000;
  background:#fff4c9;
  color:#120b05;
  padding:12px;
  font:inherit;
  outline:none;
  box-shadow:5px 5px 0 #000;
}
.contactForm input:focus,.contactForm textarea:focus{background:#fff;border-color:var(--cyan)}
.contactForm button{
  border:0;
  background:var(--honey);
  color:#140d07;
  font-family:Consolas,"Courier New",monospace;
  font-weight:900;
  font-size:18px;
  text-transform:uppercase;
  padding:14px 16px;
  box-shadow:7px 7px 0 #000;
  cursor:pointer;
  transition:transform .15s, background .15s;
}
.contactForm button:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 #000;background:var(--honey2)}
.formStatus{min-height:20px;margin:0;color:var(--cyan);font-family:Consolas,"Courier New",monospace;text-transform:uppercase;letter-spacing:.06em}
.honeyDrop{
  position:absolute;
  top:-40px;
  width:18px;height:30px;
  background:var(--honey);
  box-shadow:5px 5px 0 rgba(0,0,0,.45);
  animation:dropFall linear forwards;
}
.honeyDrop:after{content:"";position:absolute;left:4px;top:20px;width:10px;height:18px;background:var(--darkHoney)}
.buzzBee{
  position:absolute;
  width:60px;height:46px;
  left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  transition:left 1.4s steps(6),top 1.4s steps(6),transform .3s steps(2);
  filter:drop-shadow(6px 6px 0 rgba(0,0,0,.6));
  animation:buzzTiny .6s steps(2) infinite;
}
.buzzBee img{width:100%;height:100%;object-fit:contain}
.cursorPixel{
  position:absolute;
  width:10px;height:10px;
  background:var(--honey2);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
  animation:pixelFade .75s steps(4) forwards;
}
@keyframes scanShift{0%{transform:translateY(0)}50%{transform:translateY(8px)}100%{transform:translateY(0)}}
@keyframes sigBuzz{0%,95%,100%{transform:translate(0,0)}96%{transform:translate(2px,-1px)}97%{transform:translate(-1px,2px)}}
@keyframes markGlitch{0%,88%,100%{transform:translate(0,0)}90%{transform:translate(4px,0)}92%{transform:translate(-3px,3px)}}
@keyframes navBlink{50%{opacity:.1}}
@keyframes honeyWobble{0%,100%{clip-path:polygon(0 0,100% 0,100% 75%,80% 75%,80% 100%,60% 100%,60% 70%,42% 70%,42% 92%,24% 92%,24% 66%,0 66%)}50%{clip-path:polygon(0 0,100% 0,100% 62%,86% 62%,86% 94%,64% 94%,64% 78%,44% 78%,44% 100%,22% 100%,22% 74%,0 74%)}}
@keyframes overlayWalk{to{background-position:96px 96px,-96px 96px}}
@keyframes gridJolt{0%,92%,100%{transform:skewY(-6deg) translate(0,0)}94%{transform:skewY(-6deg) translate(10px,-6px)}96%{transform:skewY(-6deg) translate(-6px,8px)}}
@keyframes titleBump{0%,100%{transform:translate(0,0)}45%{transform:translate(0,0)}47%{transform:translate(4px,-2px)}49%{transform:translate(-2px,3px)}}
@keyframes glitchA{0%,84%,100%{transform:translate(4px,-3px)}86%{transform:translate(13px,-1px)}88%{transform:translate(-7px,-4px)}}
@keyframes glitchB{0%,76%,100%{transform:translate(-5px,3px)}78%{transform:translate(-15px,6px)}80%{transform:translate(9px,2px)}}
@keyframes tagBuzz{0%,82%,100%{transform:translate(0,0)}84%{transform:translate(2px,-2px)}86%{transform:translate(-2px,1px)}}
@keyframes honeySlash{0%,100%{transform:translate(0,0) skewX(-12deg)}50%{transform:translate(10px,8px) skewX(-8deg)}}
@keyframes beeFloat{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(-12px,18px) rotate(5deg)}}
@keyframes beeGlitchFilter{0%,92%,100%{filter:drop-shadow(20px 22px 0 rgba(0,0,0,.6))}94%{filter:drop-shadow(20px 22px 0 rgba(0,0,0,.6)) hue-rotate(18deg)}96%{filter:drop-shadow(20px 22px 0 rgba(0,0,0,.6)) contrast(1.2)}}
@keyframes cueJump{50%{transform:translateY(12px)}}
@keyframes honeyTectonic{0%,100%{transform:translateX(0)}50%{transform:translateX(30px)}}
@keyframes scoutPath{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(-20px,18px) rotate(5deg)}50%{transform:translate(-45px,-8px) rotate(-4deg)}75%{transform:translate(-12px,24px) rotate(3deg)}}
@keyframes markerPop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes ribbonGlitch{0%,90%,100%{transform:skewX(-2deg) translate(0,0)}92%{transform:skewX(-2deg) translate(8px,-2px)}94%{transform:skewX(-2deg) translate(-4px,3px)}}
@keyframes consolePulse{0%,100%{box-shadow:10px 10px 0 #000}50%{box-shadow:10px 10px 0 #000,0 0 22px rgba(100,213,238,.18)}}
@keyframes formJitter{0%,94%,100%{transform:translate(0,0)}96%{transform:translate(3px,-2px)}98%{transform:translate(-2px,3px)}}
@keyframes dropFall{to{transform:translateY(calc(100vh + 80px))}}
@keyframes buzzTiny{50%{transform:translate(-50%,-50%) translate(2px,-2px)}}
@keyframes pixelFade{to{opacity:0;transform:translateY(-28px) scale(.2)}}
@media(max-width:900px){
  main{margin-left:0;padding-top:74px}
  .sideNav{width:100%;height:74px;inset:0 0 auto 0;flex-direction:row;align-items:center;padding:8px 12px;border-right:0;border-bottom:4px solid var(--honey);overflow-x:auto;box-shadow:0 10px 0 rgba(0,0,0,.35)}
  .navMark{width:48px;height:48px;font-size:18px;flex:0 0 auto}
  .navLink{flex:0 0 auto;padding:12px 10px;font-size:12px;border-left:0;border-bottom:4px solid transparent}
  .navLink:hover,.navLink.active{transform:translateY(-2px);border-bottom-color:var(--honey)}
  .navHoney{display:none}
  .scene{padding:8vh 6vw;flex-direction:column;align-items:flex-start;justify-content:center}
  .heroScene{gap:20px}.heroBeeWrap{width:min(78vw,360px);align-self:center;order:-1}
  .sectionTitleBlock{margin:0 0 28px}.timeline{padding-left:26px}.scoutBee{opacity:.32;width:56vw;right:-8vw;top:18vh}
  .contactLayout{grid-template-columns:1fr}.signature{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}