:root{
  --acid:#efff00;
  --green:#6fa900;
  --deep:#071005;
  --ink:#050505;
  --paper:#f7f7e8;
  --line:#8bab13;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#101010;
  color:#f4f4f4;
  font-family:Arial, Helvetica, sans-serif;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(92,145,0,.18), transparent 28%),
    radial-gradient(circle at 80% 45%, rgba(92,145,0,.12), transparent 30%);
}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
.site-shell{
  width:min(980px,100%);
  margin:0 auto;
  min-height:100vh;
  background:
    linear-gradient(rgba(3,10,2,.88),rgba(3,10,2,.88)),
    repeating-linear-gradient(135deg,transparent 0 26px,rgba(92,145,0,.08) 27px 29px);
  border-left:1px solid #4a4a4a;
  border-right:1px solid #4a4a4a;
  box-shadow:0 0 35px #000;
}
.topbar{
  min-height:78px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:var(--acid);
  color:#060606;
  border-bottom:5px solid #111;
}
.brand{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  text-decoration:none;
  font-weight:900;
  letter-spacing:-2px;
  white-space:nowrap;
}
.brand .my{font-size:20px;letter-spacing:-1px}
.brand .shout{font-size:30px}
.brand .us{font-size:26px}
.brand .megaphone{font-size:24px;margin-left:8px;transform:rotate(3deg)}
.brand small{
  position:absolute;
  left:20px;
  top:34px;
  font-size:10px;
  letter-spacing:0;
  font-weight:800;
}
.top-right{
  min-width:350px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.tiny-nav{
  font-size:9px;
  font-weight:900;
}
.tiny-nav a{text-decoration:none}
.tiny-nav a:hover{text-decoration:underline}
.search{
  display:flex;
  gap:5px;
  width:100%;
}
.search input{
  flex:1;
  min-width:0;
  border:2px solid #1b1b1b;
  background:#fff;
  height:25px;
  padding:3px 7px;
  font-size:11px;
  font-weight:700;
}
.search button,
.acid-btn{
  border:2px solid #111;
  background:var(--acid);
  color:#000;
  font-weight:1000;
  font-size:11px;
  padding:6px 10px;
  box-shadow:3px 3px 0 #000;
}
.search button{background:#141414;color:var(--acid);padding:2px 10px}
.acid-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}
.acid-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.acid-btn.dark{background:#111;color:var(--acid);border-color:var(--acid);box-shadow:3px 3px 0 var(--acid)}
.hero{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  min-height:505px;
  overflow:hidden;
  border-bottom:5px solid var(--acid);
  background:
    radial-gradient(circle at 70% 10%,rgba(140,194,13,.35),transparent 33%),
    linear-gradient(160deg,#0d1909,#030603 68%);
}
.collage-card{
  position:relative;
  overflow:hidden;
  min-height:505px;
  background:
    repeating-conic-gradient(from 18deg at 50% 50%,#0e2205 0deg 7deg,#050905 7deg 18deg);
}
.collage-card::before,
.collage-card::after{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 47px, rgba(98,153,0,.38) 48px 54px, transparent 55px 88px);
  transform:rotate(22deg);
  opacity:.28;
}
.collage-card img{
  position:absolute;
  inset:16px auto auto 16px;
  width:min(93%,530px);
  height:auto;
  z-index:2;
  filter:contrast(1.12) saturate(.9);
  border:2px solid #111;
  box-shadow:10px 10px 0 rgba(0,0,0,.5);
}
.tape{
  position:absolute;
  width:90px;
  height:22px;
  background:rgba(218,221,181,.78);
  z-index:3;
  transform:rotate(-8deg);
}
.tape-a{top:8px;left:80px}
.tape-b{right:17px;bottom:75px;transform:rotate(12deg)}
.sticker{
  position:absolute;
  z-index:4;
  background:#050505;
  color:#fff;
  font-weight:1000;
  font-size:28px;
  padding:7px 13px;
  transform:rotate(-10deg);
  border:3px solid #fff;
  box-shadow:4px 4px 0 var(--green);
}
.sticker-one{right:12px;bottom:34px}
.sticker-two{left:32px;bottom:20px;background:var(--acid);color:#000;transform:rotate(8deg)}
.profile-panel{
  position:relative;
  padding:30px 24px 24px;
  background:
    linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.42)),
    repeating-linear-gradient(112deg,transparent 0 24px,rgba(111,169,0,.14) 25px 28px);
  overflow:hidden;
}
.profile-panel::after{
  content:"";
  position:absolute;
  width:280px;height:280px;
  right:-150px;bottom:-135px;
  border:25px solid rgba(115,169,12,.34);
  border-radius:50%;
  box-shadow:
    0 0 0 25px transparent,
    0 0 0 45px rgba(115,169,12,.18);
}
.profile-kicker,.profile-title{
  position:relative;
  z-index:1;
  font-weight:1000;
  line-height:.75;
  text-align:right;
  text-shadow:3px 3px 0 #000;
}
.profile-kicker{font-size:33px}
.profile-title{font-size:48px;color:var(--acid)}
.script-logo{
  margin:18px 0 16px;
  font-family:"Comic Sans MS","Trebuchet MS",cursive;
  font-size:36px;
  transform:rotate(-4deg);
  display:inline-block;
}
.profile-facts{
  margin:0;
  display:grid;
  gap:6px;
  font-size:12px;
  line-height:1.3;
  position:relative;z-index:1;
}
.profile-facts div{display:grid;grid-template-columns:86px 1fr;gap:6px}
.profile-facts dt{font-weight:1000;color:var(--acid)}
.profile-facts dd{margin:0}
blockquote{
  border-left:4px solid var(--acid);
  margin:22px 0 16px;
  padding:8px 12px;
  background:rgba(0,0,0,.35);
  font:700 15px/1.4 "Trebuchet MS",sans-serif;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.mini-status{margin-top:18px;font-size:10px;font-weight:900}
.online-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#75ff24;box-shadow:0 0 10px #75ff24;margin-right:5px;
}
.divider{
  display:flex;align-items:center;justify-content:center;
  min-height:42px;background:#050505;
  color:var(--acid);font-weight:1000;letter-spacing:3px;
  border-bottom:1px dashed #6f8e1f;
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:18px;
}
.box{
  border:1px solid #516c0a;
  background:#070a06;
  margin-bottom:16px;
  box-shadow:5px 5px 0 #000;
}
.box h2{
  margin:0;
  padding:7px 10px;
  color:#000;
  background:var(--acid);
  font-size:15px;
  letter-spacing:.5px;
  border-bottom:3px solid #111;
}
.box h2 small{font-size:10px}
.box-body{padding:13px}
.about-copy{font-size:13px;line-height:1.5}
.about-copy p:first-child{margin-top:0}
.warning{
  display:inline-block;
  font-size:18px;
  font-weight:1000;
  background:#111;
  color:var(--acid);
  transform:rotate(-2deg);
  padding:5px 9px;
  border:2px solid var(--acid);
}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  padding:18px;
}
.photo-card{
  background:#eee;
  color:#111;
  padding:7px 7px 20px;
  margin:0;
  box-shadow:5px 6px 0 rgba(0,0,0,.6);
}
.tilt-l{transform:rotate(-3deg)}
.tilt-r{transform:rotate(3deg)}
.fake-photo{
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  border:3px solid #111;
  overflow:hidden;
  font-size:28px;
  font-weight:1000;
  text-shadow:2px 2px 0 #000;
}
.fake-photo span{transform:rotate(-8deg)}
.p1{background:linear-gradient(135deg,#621c13,#d6b14c 50%,#0e1410 51%);color:#fff}
.p2{background:radial-gradient(circle,#d4ff00 0 18%,#3c5e0b 19% 37%,#111 38%);color:#fff}
.p3{background:linear-gradient(45deg,#111 0 30%,#6f940d 31% 67%,#d0d0a1 68%);color:#fff}
.p4{background:repeating-linear-gradient(90deg,#171717 0 12px,#c8ff12 13px 20px);color:#fff}
.photo-card figcaption{
  margin-top:7px;
  text-align:center;
  font-family:"Comic Sans MS",cursive;
  font-weight:700;
}
.interests{
  display:flex;flex-wrap:wrap;gap:8px;
}
.interests span{
  background:#111;border:1px solid #6b9515;
  color:#d4ff39;padding:6px 8px;font-size:10px;font-weight:900;
}
.crew-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.crew-grid article{text-align:center;font-size:10px}
.crew-grid b,.crew-grid small{display:block;margin-top:5px}
.crew-grid small{color:#91a071}
.avatar{
  width:58px;height:58px;margin:auto;
  border:3px solid #d9d9d9;
  display:grid;place-items:center;
  color:#fff;font-weight:1000;font-size:18px;
  box-shadow:3px 3px 0 #000;
}
.a1{background:linear-gradient(135deg,#242424,#7b2d1f)}
.a2{background:linear-gradient(135deg,#1a1a1a,#374b1b)}
.a3{background:linear-gradient(135deg,#8b5e2f,#171717)}
.a4{background:linear-gradient(135deg,#303030,#602b4f)}
.a5{background:linear-gradient(135deg,#4b4815,#222)}
.a6{background:repeating-linear-gradient(45deg,#111 0 5px,#383838 6px 12px)}
.a7{background:linear-gradient(135deg,#111,#6c9e0a)}
.a8{background:var(--acid);color:#000}
.shout-list{padding:0}
.shout-item{
  display:grid;
  grid-template-columns:66px 1fr;
  gap:9px;
  padding:12px;
  border-bottom:1px dashed #526a17;
  background:linear-gradient(90deg,rgba(111,169,0,.08),transparent);
}
.shout-item .avatar{width:52px;height:52px}
.shout-item b{color:var(--acid);font-size:12px}
.shout-item time{float:right;color:#6e7d55;font-size:9px}
.shout-item p{margin:5px 0 0;font-size:12px;line-height:1.35}
.box-footer{padding:10px;border-top:1px solid #364a09}
.bulletin{margin:0 18px 18px}
.bulletin .box-body{padding:8px;background:#111;color:var(--acid);font-weight:1000}
footer{
  min-height:75px;
  padding:18px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap;
  background:#020202;
  color:#71804a;
  font-size:9px;
  border-top:4px solid var(--acid);
}
footer a{color:var(--acid)}
.modal{
  border:0;
  padding:0;
  background:transparent;
  color:#fff;
}
.modal::backdrop{background:rgba(0,0,0,.82)}
.modal-card{
  position:relative;
  width:min(440px,92vw);
  background:#0a0e08;
  border:4px solid var(--acid);
  padding:20px;
  box-shadow:10px 10px 0 #000;
}
.modal-card h2{margin-top:0;color:var(--acid)}
.modal-card label{display:block;font-size:10px;font-weight:1000;margin:14px 0}
.modal-card input,.modal-card textarea{
  display:block;width:100%;margin-top:5px;
  background:#111;color:#fff;border:1px solid #6f950a;padding:9px;
}
.modal-card textarea{min-height:100px;resize:vertical}
.modal-card small{display:block;margin-top:12px;color:#72805d}
.close{
  position:absolute;right:8px;top:5px;
  background:none;border:0;color:#fff;font-size:26px;
}
.toast{
  position:fixed;
  right:20px;bottom:20px;
  max-width:300px;
  background:#111;color:var(--acid);
  border:2px solid var(--acid);
  padding:10px 13px;
  font-size:11px;font-weight:900;
  opacity:0;pointer-events:none;
  transform:translateY(10px);
  transition:.2s ease;
}
.toast.show{opacity:1;transform:translateY(0)}
.search-hit{outline:3px solid var(--acid);outline-offset:2px}

@media (max-width:760px){
  .topbar{align-items:flex-start}
  .top-right{min-width:0;width:45%}
  .hero{grid-template-columns:1fr}
  .collage-card{min-height:390px}
  .profile-panel{padding-top:20px}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:520px){
  .topbar{flex-direction:column}
  .top-right{width:100%;align-items:stretch}
  .tiny-nav{text-align:right}
  .brand .shout{font-size:27px}
  .collage-card{min-height:340px}
  .collage-card img{width:92%;left:4%;top:14px}
  .sticker{font-size:20px}
  .profile-kicker{font-size:27px}
  .profile-title{font-size:42px}
  .crew-grid{grid-template-columns:repeat(2,1fr)}
  .photo-grid{grid-template-columns:1fr}
  .two-col{padding:12px}
  footer{flex-direction:column}
}