* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  font-family: 'Inter', sans-serif;
  color: #fff;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shooting stars canvas */
#stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Card */
.card {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 420px;
  background: rgba(10, 10, 20, 0.85);
  border: 1px solid rgba(88, 101, 242, 0.3);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Banner */
.banner {
  width: 100%;
  height: 140px;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Profile */
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 16px;
  margin-top: -48px;
}

.pfp {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid #0a0a14;
  object-fit: cover;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.profile h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 10px;
  letter-spacing: 0.5px;
}

/* Discord button */
.discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 24px;
  background: #5865F2;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(88, 101, 242, 0);
}

.discord-btn:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
}

/* Tabs */
.tabs {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 20px;
}

.tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
}

.tab.active {
  color: #5865F2;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 2px;
  background: #5865F2;
  border-radius: 2px;
}

/* Tab content */
.tab-content {
  display: none;
  padding: 20px;
  animation: fadeIn 0.4s ease-out;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tab-content p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
}

.tab-content code {
  background: rgba(88, 101, 242, 0.15);
  color: #a5b4fc;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
}

.chosen-image {
  width: 100%;
  border-radius: 12px;
  display: block;
}

.image-hint {
  text-align: center;
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-top: 12px;
}

/* Responsive */
@media (max-width: 480px) {
  .card {
    width: 95%;
  }
  .banner {
    height: 100px;
  }
  .pfp {
    width: 80px;
    height: 80px;
  }
}

:root {
  --ink: #f2f1f7;
  --paper: #070912;
  --paper-deep: #111625;
  --orange: #ff6b4a;
  --blue: #8d70ee;
  --line: rgba(242, 241, 247, .14);
  --muted: #9699ad;
  --mono: 'DM Mono', monospace;
  --display: 'Space Grotesk', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  display: block;
  font-family: var(--display);
  justify-content: initial;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  background-image: radial-gradient(rgba(23, 22, 21, .1) .7px, transparent .7px);
  background-size: 7px 7px;
  content: '';
  inset: 0;
  opacity: .34;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

#stars { height: 100%; inset: 0; pointer-events: none; position: fixed; width: 100%; z-index: 0; }
.site-shell { margin: 0 auto; max-width: 1180px; padding: 0 42px 26px; position: relative; z-index: 1; }

.topbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 20px; }
.wordmark { color: var(--ink); font-size: 1.18rem; font-weight: 700; letter-spacing: -.08em; text-decoration: none; }
.wordmark-mark { background: var(--orange); display: inline-grid; height: 25px; margin-right: 2px; place-items: center; transform: rotate(-8deg); width: 25px; }
.accent, .signature span { color: var(--orange); }
.topbar-meta, .sound-toggle, .eyebrow, .panel-kicker, .portrait-label, footer, .ticker { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.topbar-meta { color: var(--muted); margin-left: auto; margin-right: 30px; }
.status-dot { background: #2e9d68; border-radius: 50%; box-shadow: 0 0 0 4px rgba(46, 157, 104, .14); display: inline-block; height: 7px; margin-right: 8px; width: 7px; }
.sound-toggle { align-items: center; background: none; border: 0; color: var(--ink); cursor: pointer; display: flex; gap: 10px; padding: 4px 0; }
.sound-bars { align-items: center; display: flex; gap: 2px; height: 14px; }
.sound-bars i { background: var(--orange); display: block; height: 6px; width: 2px; }
.sound-bars i:nth-child(2) { height: 13px; }.sound-bars i:nth-child(3) { height: 9px; }
.sound-toggle.is-muted .sound-bars i { height: 2px; }

.hero-grid { align-items: center; display: grid; gap: 8%; grid-template-columns: 1.08fr .92fr; min-height: 500px; padding: 76px 7% 68px; }
.eyebrow { color: var(--orange); margin-bottom: 24px; }.eyebrow span { color: var(--muted); margin-right: 12px; }
.hero-copy h1 { font-size: clamp(3.4rem, 6.8vw, 6.4rem); font-weight: 600; letter-spacing: -.095em; line-height: .9; }
.hero-copy h1 em { color: var(--blue); font-style: normal; }
.hero-intro { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 29px 0 31px; max-width: 360px; }
.hero-actions { align-items: center; display: flex; gap: 22px; }
.primary-button { align-items: center; background: var(--ink); color: var(--paper); display: inline-flex; font-size: .85rem; font-weight: 600; gap: 9px; padding: 14px 19px; text-decoration: none; transition: background .25s, transform .25s; }
.primary-button:hover { background: var(--blue); transform: translateY(-3px); }.discord-icon { color: var(--orange); font-size: 1.1rem; }
.copy-button { background: none; border: 0; border-bottom: 1px solid var(--ink); color: var(--ink); cursor: pointer; font-family: var(--mono); font-size: .7rem; padding: 5px 0; text-transform: uppercase; }
.copy-button span { color: var(--orange); margin-left: 6px; }.copy-button.copied { border-color: var(--blue); color: var(--blue); }

.portrait-wrap { position: relative; transform: none; }.portrait-label { color: var(--muted); left: 4px; position: absolute; top: -26px; }.portrait-label span { color: var(--orange); margin: 0 9px; }
.portrait-frame { aspect-ratio: 4 / 5; background: #11131e; border: 1px solid var(--ink); box-shadow: 16px 16px 0 var(--orange); overflow: hidden; position: relative; }
.profile-banner { height: 48%; overflow: hidden; position: relative; }.profile-banner > img { animation:bannerPulse 8s ease-in-out infinite; height:100%; object-fit:cover; opacity:.9; width:100%; }.portrait-overlay { background:linear-gradient(135deg,rgba(169,140,255,.32),rgba(5,7,16,.12) 58%,rgba(5,7,16,.65)); inset:0; position:absolute; z-index:2; }.profile-surface { background:linear-gradient(180deg,#11131e,#0b0d16); height:52%; position:relative; }
.pfp { border:5px solid #11131e; border-radius:50%; height:108px; left:10%; object-fit:cover; position:absolute; top:-54px; width:108px; z-index:8; }.portrait-caption { bottom:8%; color:var(--paper); font-family:var(--mono); font-size:.7rem; position:absolute; right:9%; }
.profile-name { bottom:auto; color:#fff; font-size:1.45rem; left:10%; letter-spacing:-.04em; position:absolute; text-shadow:0 3px 18px rgba(0,0,0,.7); top:60px; z-index:10; }.profile-handle { color:#b7bbca; font-size:.72rem; left:10%; position:absolute; top:91px; }.profile-handle span { color:#777c91; padding:0 5px; }.profile-badges { display:flex; gap:7px; left:10%; position:absolute; top:117px; }.profile-badge { align-items:center; border:1px solid rgba(255,255,255,.2); border-radius:6px; display:inline-flex; height:25px; justify-content:center; overflow:hidden; position:relative; width:28px; }.profile-badge i { display:block; position:relative; }.nitro-badge { background:linear-gradient(145deg,#f1c8ff,#a870e8); box-shadow:0 3px 10px rgba(168,112,232,.35); }.nitro-badge i { border:2px solid #fff; border-radius:50%; height:13px; width:13px; }.nitro-badge i::after { background:#fff; border-radius:2px; content:''; height:5px; left:4px; position:absolute; top:2px; transform:rotate(-35deg); width:3px; }.hypesquad-badge { background:linear-gradient(145deg,#8794ff,#4755d7); box-shadow:0 3px 10px rgba(71,85,215,.35); }.hypesquad-badge i { border-bottom:8px solid #fff; border-left:6px solid transparent; border-right:6px solid transparent; height:0; width:0; }.hypesquad-badge i::after { border-bottom:6px solid #6577ff; border-left:4px solid transparent; border-right:4px solid transparent; content:''; left:-4px; position:absolute; top:3px; }.quest-badge { background:linear-gradient(145deg,#82f0c6,#27a978); box-shadow:0 3px 10px rgba(39,169,120,.32); }.quest-badge i { border:2px solid #fff; border-radius:50%; height:13px; transform:rotate(45deg); width:13px; }.quest-badge i::after { background:#fff; content:''; height:2px; left:2px; position:absolute; top:4px; transform:rotate(-45deg); width:6px; }

.ticker { align-items: center; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); color: var(--muted); display: flex; gap: 25px; overflow: hidden; padding: 16px 0; white-space: nowrap; }.ticker strong { color: var(--ink); font-weight: 500; }.ticker-symbol { color: var(--orange); font-size: 1rem; }
.details-grid { display: grid; gap: 16px; grid-template-columns: 1.2fr 1fr 1fr; padding: 58px 0 82px; }.panel { border: 1px solid var(--line); min-height: 260px; padding: 27px; }.panel-kicker { color: var(--orange); }.about-panel { background: var(--blue); color: var(--paper); }.about-panel .panel-kicker { color: #f6a28d; }.about-panel h2 { font-size: 2rem; letter-spacing: -.06em; margin: 45px 0 15px; }.about-panel h2 span { color: #f6a28d; }.about-panel > p:last-of-type { color: rgba(235, 232, 223, .75); font-size: .9rem; line-height: 1.6; max-width: 300px; }.signature { font-family: var(--mono); font-size: .7rem; margin-top: 25px; text-transform: uppercase; }
.panel-heading { align-items: flex-start; display: flex; justify-content: space-between; }.live-pill { background: #d8edda; color: #287343; font-family: var(--mono); font-size: .58rem; padding: 5px 7px; text-transform: uppercase; }.now-panel { background: rgba(255, 255, 255, .24); }.now-row { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 15px; padding: 18px 0; }.now-row:last-child { border: 0; }.now-number { color: var(--orange); font-family: var(--mono); font-size: .72rem; }.now-row strong, .now-row small { display: block; }.now-row strong { font-size: .85rem; font-weight: 600; }.now-row small { color: var(--muted); font-size: .7rem; margin-top: 4px; }
.links-panel { background: var(--paper-deep); }.links-panel .panel-kicker { margin-bottom: 32px; }.link-row { align-items: center; border-bottom: 1px solid var(--line); color: var(--ink); display: flex; font-size: .85rem; justify-content: space-between; padding: 15px 0; text-decoration: none; transition: color .2s, padding .2s; }.link-row:hover { color: var(--orange); padding-left: 5px; }.link-icon { color: var(--orange); font-size: 1rem; font-weight: 400; margin-right: 10px; }
footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; padding-top: 18px; }footer i { color: var(--orange); font-style: normal; margin-left: 5px; }

@media (max-width: 800px) { .site-shell { padding: 22px 22px 20px; }.topbar-meta { display: none; }.hero-grid { gap: 52px; grid-template-columns: 1fr; padding: 70px 4% 75px; }.hero-copy h1 { font-size: clamp(3.5rem, 14vw, 5.7rem); }.portrait-wrap { margin: 0 auto; max-width: 440px; width: 80%; }.details-grid { grid-template-columns: 1fr 1fr; }.about-panel { grid-column: span 2; } }
@media (max-width: 520px) { .hero-grid { padding-left: 0; padding-right: 0; }.portrait-wrap { width: 84%; }.portrait-frame { box-shadow: 10px 10px 0 var(--orange); }.pfp { height: 82px; width: 82px; }.details-grid { display: block; padding-top: 40px; }.panel { margin-bottom: 14px; min-height: auto; }.about-panel { min-height: 270px; }.now-panel, .links-panel { padding-bottom: 20px; }footer { flex-wrap: wrap; gap: 14px; line-height: 1.5; }footer span:last-child { display: none; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

.topbar { background:linear-gradient(110deg,rgba(82,57,171,.72),rgba(35,35,96,.52)); border:1px solid rgba(154,137,255,.3); box-shadow:0 14px 45px rgba(40,25,100,.2); padding:14px 18px; }
.wordmark-mark { background:#a98cff; color:#100d22; }.nav-link { color:rgba(255,255,255,.62); }.nav-link:hover,.nav-link.active { color:#fff; }.topbar-meta { color:rgba(255,255,255,.64); }
.hero-grid { min-height:calc(100vh - 100px); padding-bottom:90px; padding-top:72px; }.hero-copy h1 { text-shadow:0 0 35px rgba(141,112,238,.18); }.hero-copy h1 em { color:#a98cff; }.portrait-frame { background:#17132f; border-color:rgba(169,140,255,.5); box-shadow:16px 16px 0 #5e43b8; }.portrait-caption { color:#fff; }.pfp { border-color:#100d22; }
.primary-button { background:#8d70ee; color:#0d0b18; box-shadow:0 8px 25px rgba(141,112,238,.24); }.primary-button:hover { background:#b39cff; }.copy-button { border-color:rgba(255,255,255,.65); color:var(--ink); }.copy-button:hover { border-color:#a98cff; color:#a98cff; }
.nav-links { display:flex; gap:22px; margin-left:42px; }.nav-link { font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.nav-links { gap:28px; }.nav-link { font-size:.75rem; padding:8px 2px; }.profile-name { bottom:calc(12% - 34px); color:#fff; font-size:1.35rem; left:12%; letter-spacing:-.04em; position:absolute; text-shadow:0 3px 18px rgba(0,0,0,.7); z-index:4; }.footer-status-dot { background:#55e889; border-radius:50%; box-shadow:0 0 12px rgba(85,232,137,.9); display:inline-block; height:7px; margin-right:7px; width:7px; }
.portrait-frame::after { animation:soulDrift 7s ease-in-out infinite; background:radial-gradient(ellipse,rgba(169,140,255,.22),transparent 62%); content:''; inset:-20%; pointer-events:none; position:absolute; transform:rotate(-20deg); z-index:1; }.portrait-frame > img:first-child { animation:bannerPulse 8s ease-in-out infinite; }.portrait-overlay { z-index:2; }.pfp,.discord-status,.profile-name,.portrait-caption,.portrait-actions { z-index:4; }
@keyframes bannerPulse { 0%,100% { filter:saturate(1) brightness(.88); transform:scale(1); } 50% { filter:saturate(1.3) brightness(1.08); transform:scale(1.045); } } @keyframes soulDrift { 0%,100% { opacity:.2; transform:translate3d(-5%,3%,0) rotate(-20deg); } 50% { opacity:.7; transform:translate3d(8%,-4%,0) rotate(-8deg); } }
.topbar { animation:navReveal .7s ease both; overflow:hidden; position:relative; }.topbar::after { animation:navSweep 5s ease-in-out infinite; background:linear-gradient(90deg,transparent,rgba(207,192,255,.42),transparent); content:''; height:1px; left:-30%; position:absolute; top:0; width:30%; }.nav-link { position:relative; transition:color .25s,transform .25s; }.nav-link::after { background:#b39cff; bottom:-9px; content:''; height:2px; left:0; position:absolute; transform:scaleX(0); transform-origin:left; transition:transform .25s; width:100%; }.nav-link:hover { transform:translateY(-2px); }.nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); }.wordmark { transition:filter .25s,transform .25s; }.wordmark:hover { filter:drop-shadow(0 0 10px rgba(169,140,255,.6)); transform:translateY(-2px); }
.portrait-actions { align-items:flex-end; bottom:9%; display:flex; flex-direction:column; gap:14px; position:absolute; right:7%; z-index:4; }.portrait-actions .copy-button { background:rgba(7,9,18,.72); border:1px solid rgba(255,255,255,.5); padding:10px 12px; }.portrait-actions .join-server-button { bottom:auto; position:relative; right:auto; }.portrait-actions .copy-button.copied { border-color:#a98cff; }
@keyframes navReveal { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } } @keyframes navSweep { 0%,60% { left:-30%; } 100% { left:110%; } }
.join-server-button { animation:joinPulse 2.4s ease-in-out infinite; border-width:2px; box-shadow:0 0 0 rgba(141,112,238,0); font-size:.78rem; padding:15px 20px; }.join-server-button:hover { animation-play-state:paused; box-shadow:0 0 28px rgba(169,140,255,.5); }
.discord-status { background:#ed4245; border:4px solid #11131e; border-radius:50%; bottom:auto; height:30px; left:calc(10% + 77px); position:absolute; top:-24px; width:30px; z-index:20; }.discord-status::after { background:#17132f; border-radius:3px; content:''; height:6px; left:5px; position:absolute; right:5px; top:8px; }.discord-status::before { background:#ed4245; border-radius:50%; content:''; height:8px; left:7px; position:absolute; top:8px; width:8px; z-index:1; }.banner-online-dot { background:#55e889; border-radius:50%; box-shadow:0 0 12px rgba(85,232,137,.95); display:inline-block; height:8px; margin-right:7px; width:8px; }
@keyframes joinPulse { 0%,100% { box-shadow:0 0 0 rgba(169,140,255,0); transform:translateY(0); } 50% { box-shadow:0 0 24px rgba(169,140,255,.3); transform:translateY(-4px); } }
.hero-grid { grid-template-columns:1fr 1fr; min-height:calc(100vh - 120px); padding-top:54px; }.hero-copy { align-items:flex-start; display:flex; }.hero-actions { flex-direction:column; align-items:flex-start; gap:18px; }.portrait-frame { box-shadow:16px 16px 0 #5e43b8; }.join-server-button { align-items:center; background:rgba(15,12,35,.88); border:1px solid rgba(169,140,255,.65); bottom:6%; color:#fff; display:flex; font-family:var(--mono); font-size:.67rem; gap:12px; padding:11px 14px; position:absolute; right:8%; text-decoration:none; text-transform:uppercase; transition:background .2s,transform .2s; }.join-server-button span { color:#a98cff; }.join-server-button:hover { background:#8d70ee; color:#0d0b18; transform:translateY(-3px); }
@media (max-width:800px) { .hero-grid { grid-template-columns:1fr; min-height:0; }.hero-copy { justify-content:center; }.hero-actions { width:100%; }.nav-links { gap:12px; margin-left:auto; }.discord-status { left:calc(10% + 58px); } }

/* Profile surface cleanup */
.profile-name { bottom:auto; left:10%; top:60px; }
.profile-placeholder { background:linear-gradient(100deg,rgba(101,119,255,.22),rgba(169,140,255,.13)); border:1px solid rgba(169,140,255,.38); border-radius:6px; color:#c5c9ff; font-family:var(--mono); font-size:.68rem; left:10%; overflow:hidden; padding:9px 12px; position:absolute; top:119px; white-space:nowrap; width:58%; }
.profile-placeholder span { animation:typeLine 3.8s steps(26,end) infinite,caretBlink .8s step-end infinite; border-right:2px solid #a98cff; display:block; overflow:hidden; width:0; }
.profile-placeholder span.typing-active { animation:typeLine 3.8s steps(26,end) both,caretBlink .8s step-end infinite; }
.profile-terminal { background:#050609; border:1px solid rgba(98,220,136,.28); border-radius:6px; bottom:8%; color:#8ee6a9; font-family:var(--mono); font-size:.58rem; left:10%; overflow:hidden; position:absolute; width:58%; }.terminal-bar { align-items:center; background:#0e1214; border-bottom:1px solid rgba(142,230,169,.12); color:#647b6b; display:flex; gap:4px; padding:6px 8px; }.terminal-bar span { background:#506656; border-radius:50%; height:5px; width:5px; }.terminal-bar b { font-size:.52rem; font-weight:400; margin-left:auto; }.terminal-line,.terminal-output { overflow:hidden; padding:7px 9px; text-overflow:ellipsis; white-space:nowrap; }.terminal-line { color:#d5ffdf; padding-bottom:2px; }.terminal-line i { color:#62dc88; font-style:normal; margin-right:7px; }.terminal-output { color:#789781; padding-top:0; }
.discord-status { bottom:auto; left:calc(10% + 82px); top:19px; }
@keyframes typeLine { 0%,12% { width:0; } 55%,78% { width:100%; } 94%,100% { width:0; } } @keyframes caretBlink { 50% { border-color:transparent; } }
@media (max-width:520px) { .profile-terminal { width:68%; }.profile-placeholder { width:68%; } }

/* Profile controls and animated panels */
.profile-placeholder { left:10%; top:119px; width:80%; }
.profile-terminal { bottom:67px; left:10%; width:80%; }
.portrait-actions { align-items:stretch; bottom:10px; flex-direction:row; gap:14px; left:10%; right:10%; }
.portrait-actions .copy-button,.portrait-actions .join-server-button { align-items:center; background:rgba(101,119,255,.14); border:1px solid rgba(169,140,255,.55); border-radius:5px; color:#e8e3ff; display:flex; flex:1; justify-content:center; min-height:42px; padding:11px 12px; transition:background .25s,box-shadow .25s,transform .25s; }
.portrait-actions .copy-button:hover,.portrait-actions .join-server-button:hover { background:rgba(141,112,238,.35); box-shadow:0 0 18px rgba(169,140,255,.24); transform:translateY(-3px); }
.portrait-actions .join-server-button { animation:none; margin:0; }
@media (max-width:520px) { .profile-placeholder { left:7%; width:86%; }.profile-terminal { bottom:67px; left:7%; width:86%; }.portrait-actions { left:7%; right:7%; }.portrait-actions .copy-button,.portrait-actions .join-server-button { font-size:.6rem; padding-left:7px; padding-right:7px; } }

/* Shared Discord visual marker for product and tool art */
.product-art::after { align-items:center; background:#5865f2; border:2px solid var(--panel); border-radius:50%; bottom:-7px; color:#fff; content:'◈'; display:flex; font-size:.7rem; height:21px; justify-content:center; position:absolute; right:-7px; width:21px; }
.about-card { position:relative; }.about-card::after { align-items:center; background:#5865f2; border:2px solid var(--panel); border-radius:50%; color:#fff; content:'◈'; display:flex; font-size:.65rem; height:21px; justify-content:center; position:absolute; right:13px; top:13px; width:21px; }
.product-art { flex:0 0 84px; min-width:84px; }.product-art img { aspect-ratio:1; display:block; flex:0 0 72px; height:72px; max-width:72px; object-fit:contain; width:72px; }.product-art::after { content:none; }.about-icon { aspect-ratio:1; display:block; height:58px; margin-bottom:42px; object-fit:contain; width:58px; }.about-card::after { content:none; }
.terminal-line .command-typing { border-right:2px solid #62dc88; display:inline-block; max-width:calc(100% - 15px); overflow:hidden; vertical-align:bottom; white-space:nowrap; width:0; }
.terminal-line .command-typing-active { animation:commandType 1.7s steps(26,end) both,terminalCaret .8s step-end infinite; }
@keyframes commandType { from { width:0; } to { width:100%; } } @keyframes terminalCaret { 50% { border-color:transparent; } }

/* Viewport-safe sizing */
img { max-width:100%; }
.site-shell { width:100%; }
.hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.portrait-wrap { max-width: min(100%, 440px); width:100%; }
.server-console { max-width:100%; }
.portrait-frame { width:100%; }
@media (max-width:800px) {
  .hero-grid { grid-template-columns:minmax(0,1fr); }
  .hero-copy { order:2; }
  .portrait-wrap { order:1; }
  .server-console { width:100%; }
  .shop-heading,.about-heading { padding-left:0; padding-right:0; }
}
@media (max-width:520px) {
  .site-shell { padding-left:16px; padding-right:16px; }
  .topbar { flex-wrap:wrap; row-gap:8px; }
  .wordmark { flex:1 1 auto; }
  .nav-links { gap:12px; margin-left:auto; }
  .topbar-meta { display:none; }
  .hero-grid { gap:36px; padding-bottom:54px; padding-top:54px; }
  .portrait-wrap { width:min(100%, 390px); }
  .profile-placeholder,.profile-terminal { left:7%; width:86%; }
  .portrait-actions { left:7%; right:7%; }
  .portrait-actions .copy-button,.portrait-actions .join-server-button { font-size:.6rem; padding-left:7px; padding-right:7px; }
}
@media (max-height:760px) and (min-width:801px) {
  .hero-grid { min-height:calc(100vh - 90px); padding-bottom:42px; padding-top:42px; }
  .portrait-wrap { max-width:min(38vw, 360px); }
}
@media (max-height:620px) {
  .site-shell { padding-top:14px; }
  .hero-grid { padding-bottom:34px; padding-top:34px; }
  .portrait-label { display:none; }
}

/* Keep the top edge and visual details crisp on every viewport */
.site-shell { padding-top:0; }
.portrait-wrap,.server-console,.profile-placeholder,.profile-terminal { filter:none; }
.profile-banner > img { opacity:1; image-rendering:auto; }
.profile-banner > img,.pfp { backface-visibility:hidden; }
@keyframes bannerPulse { 0%,100% { filter:saturate(1) brightness(.96); } 50% { filter:saturate(1.18) brightness(1.04); } }
@media (max-width:520px) { .site-shell { padding-top:0; } }

/* Profile terminal and Discord-style DND status */
.profile-terminal { bottom:70px; left:10%; min-height:76px; width:80%; }
.profile-terminal .terminal-bar { padding:8px 11px; }
.profile-terminal .terminal-line,.profile-terminal .terminal-output { font-size:.64rem; padding-left:11px; padding-right:11px; }
.discord-status { background:#ed4245; box-shadow:0 0 0 2px rgba(237,66,69,.18),0 0 12px rgba(237,66,69,.35); left:calc(10% + 82px); top:23px; }
.discord-status { background:none; border:0; border-radius:0; box-shadow:none; height:38px; object-fit:contain; padding:0; width:38px; }
.discord-status::before,.discord-status::after { display:none; }
.discord-status::before { display:none; }
.discord-status::after { background:#17131e; border-radius:4px; height:5px; left:5px; right:5px; top:9px; }
.server-console { animation:consoleReveal .8s .15s both; background:rgba(5,6,10,.86); border:1px solid rgba(169,140,255,.32); border-radius:8px; box-shadow:0 20px 70px rgba(0,0,0,.35),0 0 35px rgba(101,119,255,.08); overflow:hidden; width:min(100%,430px); }.server-console-head { align-items:center; background:linear-gradient(100deg,#19152e,#101321); border-bottom:1px solid rgba(169,140,255,.22); color:#bcb3e9; display:flex; font-family:var(--mono); font-size:.66rem; gap:9px; padding:12px 14px; }.console-lights { display:flex; gap:4px; }.console-lights i { background:#675f85; border-radius:50%; height:6px; width:6px; }.console-lights i:first-child { background:#ff6b6b; }.console-lights i:nth-child(2) { background:#f5cc6d; }.console-lights i:nth-child(3) { background:#64d995; }.console-live { color:#62dc88; font-size:.58rem; margin-left:auto; text-transform:uppercase; }.server-console-body { padding:20px 18px 17px; }.console-section-label { color:#a98cff; font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; margin-bottom:10px; text-transform:uppercase; }.stock-row { align-items:center; border-bottom:1px solid rgba(242,241,247,.09); color:#e7e5f1; display:flex; font-family:var(--mono); font-size:.68rem; justify-content:space-between; padding:10px 0; }.stock-row strong { color:#62dc88; font-size:.58rem; font-weight:400; text-transform:uppercase; }.stock-dot { border-radius:50%; display:inline-block; height:6px; margin-right:8px; width:6px; }.stock-dot.available { background:#62dc88; box-shadow:0 0 8px rgba(98,220,136,.7); }.stock-dot.limited { background:#f5cc6d; box-shadow:0 0 8px rgba(245,204,109,.5); }.stock-dot.soon { background:#a98cff; box-shadow:0 0 8px rgba(169,140,255,.5); }.stock-row:nth-of-type(4) strong { color:#a98cff; }.about-label { border-top:1px solid rgba(242,241,247,.09); margin-top:22px; padding-top:19px; }.console-about { color:#8990a5; font-size:.78rem; line-height:1.6; }.console-prompt { color:#c9c5f0; font-family:var(--mono); font-size:.65rem; margin-top:18px; }.console-prompt span { color:#62dc88; }.console-prompt b { font-weight:400; }.console-prompt i { animation:consoleCursor .9s step-end infinite; border-right:2px solid #62dc88; margin-left:4px; }.hero-copy { align-items:flex-start; justify-content:center; }
@keyframes consoleReveal { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:translateX(0); } } @keyframes consoleCursor { 50% { border-color:transparent; } }
@media (max-width:800px) { .server-console { margin:0 auto; width:min(100%,520px); } }