:root{
  --black:#000000;
  --near:#080808;
  --panel:#101010;
  --panel2:#151515;
  --pink:#ffbee1;
  --pink-dark:#c985a8;
  --pink-soft:#ffdff0;
  --purple:#cdbbff;
  --blue:#9ddfff;
  --mint:#aee6c7;
  --yellow:#ffe39b;
  --white:#f7f7f7;
  --gray:#bdbdbd;
  --mid:#666666;
  --border:#4f3c46;
}

*{box-sizing:border-box}
html{font-size:14px}
body{
  margin:0;
  min-height:100vh;
  background:var(--black);
  color:var(--white);
  font-family:"MS Sans Serif","Microsoft Sans Serif",Tahoma,Arial,sans-serif;
}

a{color:var(--pink);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--pink);color:#000}

#dog-cursor{
  position:fixed;
  left:0;
  top:0;
  z-index:9999;
  pointer-events:none;
  font-size:22px;
  line-height:1;
  transform:translate(-50%,-50%);
  filter:drop-shadow(1px 1px 0 #000);
  will-change:transform;
}

.site-shell{width:min(1080px,calc(100% - 18px));margin:12px auto 30px}
.desktop-strip{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:0 2px 6px;
  color:var(--gray);
  font:11px "Courier New",monospace;
}

.window{
  background:var(--panel);
  border:2px solid;
  border-color:#777 #222 #222 #777;
  box-shadow:2px 2px 0 #000;
}
.window+.window{margin-top:12px}

.titlebar{
  min-height:24px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:2px 3px 2px 5px;
  background:var(--pink);
  color:#000;
  border-bottom:1px solid #000;
  font:700 11px Tahoma,Arial,sans-serif;
}
.titlebar-icon{font-size:13px}
.window-controls{margin-left:auto;display:flex;gap:2px}
.ctrl{
  width:18px;height:16px;
  display:grid;place-items:center;
  background:#ddd;
  color:#000;
  border:2px solid;
  border-color:#fff #555 #555 #fff;
  font:700 11px Arial,sans-serif;
  line-height:11px;
}
.ctrl.close{background:#eee}

.menu{
  display:flex;
  gap:18px;
  padding:4px 7px;
  background:#d9d9d9;
  color:#000;
  border-bottom:2px solid #000;
  font:11px "MS Sans Serif",Tahoma,sans-serif;
}
.menu span:first-letter{text-decoration:underline}

.toolbar{
  display:flex;
  gap:5px;
  align-items:center;
  padding:4px;
  background:#cfcfcf;
  border-bottom:2px solid #000;
}
.tool-btn,.nav-btn,.submit{
  font:11px "MS Sans Serif",Tahoma,sans-serif;
  color:#000;
  background:#ddd;
  border:2px solid;
  border-color:#fff #555 #555 #fff;
  padding:3px 8px;
  cursor:pointer;
}
.tool-btn:active,.nav-btn:active,.submit:active{border-color:#555 #fff #fff #555}
.tool-btn:hover,.nav-btn:hover,.submit:hover{text-decoration:none;background:#eee}
.address{
  flex:1;
  min-width:0;
  padding:4px 6px;
  background:#fff;
  color:#222;
  border:1px inset #777;
  font:11px "Courier New",monospace;
}

.content{padding:12px;background:var(--black)}
.hero{
  position:relative;
  padding:24px;
  min-height:210px;
  border:2px solid var(--pink);
  background:#000;
}
.hero h1{
  margin:0;
  color:var(--pink);
  font:700 clamp(30px,5vw,48px) Tahoma,Arial,sans-serif;
  letter-spacing:-1px;
}
.hero .sub{color:var(--pink-soft);font-size:15px;margin:8px 0 0}
.hero p{max-width:680px;line-height:1.55}
.hero .dog{position:absolute;right:28px;bottom:20px;font-size:56px}
.hero .spark{position:absolute;color:var(--pink);font-size:16px}
.hero .s1{right:160px;top:28px}.hero .s2{right:85px;top:54px;color:var(--purple)}

.page-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.nav-btn{display:inline-block;background:#050505;color:var(--pink);border-color:var(--pink) #7b4d62 #7b4d62 var(--pink);}
.nav-btn:hover{background:var(--pink);color:#000;text-decoration:none}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:760px){.grid{grid-template-columns:1fr}}
.inner{padding:12px;background:#080808}
.inner h2{margin:0 0 9px;color:var(--pink);font:700 17px Tahoma,Arial,sans-serif}
.inner p{line-height:1.5}
.muted{color:#bcbcbc}

.server-card{border:2px solid #3d3d3d;padding:10px;background:#050505;margin-top:8px}
.server-card:first-child{margin-top:0}
.server-card h3{margin:0 0 8px;color:var(--pink-soft);font-size:13px}
.server-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stat{padding:6px;border:2px solid #292929;background:#000}
.stat small{display:block;color:#8e8e8e;font-size:10px;margin-bottom:2px}.stat span{font-size:12px}
.online{color:var(--mint)}.offline{color:#ff8c9f}
@media(max-width:520px){.server-meta{grid-template-columns:1fr}}

.about{display:grid;grid-template-columns:92px 1fr;gap:12px}
@media(max-width:520px){.about{grid-template-columns:1fr}}
.avatar{
  width:92px;height:92px;
  display:grid;place-items:center;
  background:#000;
  border:2px solid;
  border-color:var(--pink) #6a4254 #6a4254 var(--pink);
  color:var(--pink);
  font-size:42px;
}
.socials{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.social{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 7px;
  color:#fff;
  background:#080808;
  border:2px solid;
  border-color:#595959 #171717 #171717 #595959;
  font:11px Arial,sans-serif;
}
.social:hover{background:var(--pink);color:#000;border-color:#fff #555 #555 #fff;text-decoration:none}
.rgl-icon{width:17px;height:17px;display:block;fill:currentColor}

.form-row{display:grid;gap:4px;margin-bottom:9px}label{font-size:11px;color:var(--pink-soft)}
input,textarea{
  width:100%;
  padding:7px;
  color:#fff;
  background:#000;
  border:2px inset #666;
  font:12px Tahoma,Arial,sans-serif;
}
textarea{min-height:125px;resize:vertical}
input:focus,textarea:focus{outline:1px solid var(--pink);border-color:var(--pink)}
.submit{color:#000;background:var(--pink);border-color:#fff #804e67 #804e67 #fff;font-weight:700}
.submit:hover{background:var(--pink-soft)}

.comments{display:grid;gap:8px}
.comment{padding:9px;border:2px solid #333;background:#050505}
.comment-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:11px}
.comment-name{color:var(--pink);font-weight:700}.comment-date{color:#888}.comment-body{white-space:pre-wrap;line-height:1.45;font-size:12px}

.statusbar{display:flex;gap:8px;justify-content:space-between;padding:3px 5px;background:#cfcfcf;color:#000;border-top:2px solid #000;font:10px Tahoma,Arial,sans-serif}
footer{padding-top:10px;text-align:center;color:#777;font:10px "Courier New",monospace}.heart{color:var(--pink)}

@media(max-width:620px){
  .desktop-strip{display:block}.desktop-strip div+div{margin-top:4px}
  .menu{gap:11px;overflow:auto}
  .toolbar{flex-wrap:wrap}.address{width:100%;flex-basis:100%;order:3}
  .hero{padding:18px;min-height:240px}.hero .dog{right:16px;bottom:10px;font-size:44px;opacity:.72}
}