:root {
  --ink: #05070a;
  --navy: #0c1420;
  --ice: #d8e9fa;
  --white: #f6f8fa;
  --lime: #b9ff00;
  --font-geist-sans: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  --font-geist-mono: Consolas, "SFMono-Regular", "Liberation Mono", "Courier New", monospace;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body { margin: 0; min-height: 100vh; color: var(--white); font-family: var(--font-geist-sans), Arial, sans-serif; }
a { color: inherit; }

.shell {
  position: relative; isolation: isolate; min-height: 100vh; overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: clamp(22px, 4vh, 38px);
  padding: clamp(18px, 4vw, 46px); max-width: 760px; margin: 0 auto;
  background:
    linear-gradient(135deg, transparent 0 38%, rgba(90,135,180,.12) 38.2%, transparent 38.7%),
    radial-gradient(circle at 85% 12%, rgba(27,52,83,.7), transparent 30%),
    linear-gradient(145deg, #06080b, #0b111b 60%, #040608);
  border-inline: 1px solid rgba(216,233,250,.08);
}
.noise { position: absolute; inset: 0; z-index: -2; opacity: .28; background-image: repeating-linear-gradient(125deg, transparent 0 5px, rgba(255,255,255,.025) 5px 7px); }
.scanlines { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, transparent, black 12%, black 90%, transparent); }
.topbar, footer { display: flex; align-items: center; justify-content: space-between; font: 700 10px/1 var(--font-geist-mono), monospace; letter-spacing: .14em; color: #9ca8b7; }
.topbar { border-bottom: 1px solid rgba(216,233,250,.22); padding-bottom: 14px; }
.system-label::before { content: "■"; color: var(--lime); margin-right: 9px; }
.status { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; }
.status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); margin-right: 7px; }
.status-offline i { background: #ff3b45; box-shadow: 0 0 12px rgba(255,59,69,.8); }
.status-unknown i, .status-loading i { background: #8290a0; box-shadow: none; }
.status:hover span, .status:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }

.profile { display: flex; align-items: center; gap: clamp(18px, 4vw, 30px); }
.brand-mark { position: relative; width: clamp(82px, 20vw, 120px); aspect-ratio: 1; flex: none; display: grid; place-items: center; border: 2px solid rgba(246,248,250,.8); background: linear-gradient(145deg, #151d29, #050608); clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%); box-shadow: inset 0 0 25px #000, 7px 7px 0 rgba(216,233,250,.06); }
.brand-mark::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(216,233,250,.2); clip-path: inherit; }
.brand-mark img { position: relative; z-index: 1; width: 72%; height: 72%; object-fit: contain; }
.identity { min-width: 0; flex: 1; }
.eyebrow { margin: 0 0 3px; font: 800 clamp(10px, 2.5vw, 13px)/1 var(--font-geist-mono), monospace; letter-spacing: .34em; }
.eyebrow span { background: var(--white); color: var(--ink); padding: 2px 6px; }
.wordmark { display: block; width: min(100%, 430px); height: auto; margin-top: 8px; filter: drop-shadow(6px 6px 0 rgba(255,255,255,.06)); }

.link-panel { align-self: center; position: relative; border: 2px solid var(--white); padding: 10px; background: rgba(3,6,10,.56); box-shadow: 10px 10px 0 rgba(216,233,250,.06); }
.link-panel::before, .link-panel::after { content: ""; position: absolute; background: var(--lime); }
.link-panel::before { width: 74px; height: 3px; right: 26px; top: -3px; }
.link-panel::after { width: 3px; height: 46px; left: -3px; bottom: 28px; }
.panel-heading { display: flex; justify-content: space-between; padding: 5px 6px 12px; color: #91a0b2; font: 700 9px/1 var(--font-geist-mono), monospace; letter-spacing: .16em; }
.links { display: grid; gap: 7px; }
.social-link { position: relative; display: grid; grid-template-columns: 38px 48px 1fr 42px; min-height: 69px; align-items: center; overflow: hidden; text-decoration: none; background: linear-gradient(100deg, rgba(17,25,36,.98), rgba(7,11,16,.94)); border: 1px solid rgba(216,233,250,.26); clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.social-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(185,255,0,.16), transparent 55%); transform: translateX(-102%); transition: transform .28s ease; }
.social-link:hover, .social-link:focus-visible { transform: translateX(5px); border-color: var(--lime); outline: none; }
.social-link:hover::before, .social-link:focus-visible::before { transform: translateX(0); }
.index { align-self: stretch; display: grid; place-items: center; border-right: 1px solid rgba(216,233,250,.14); color: #526070; font: 700 9px/1 var(--font-geist-mono), monospace; }
.platform-mark { width: 34px; aspect-ratio: 1; display: grid; place-items: center; justify-self: center; border: 1px solid #566376; color: var(--white); font: 900 11px/1 var(--font-geist-mono), monospace; transform: skew(-5deg); }
.mark-0 { border-color: #9b6cff; box-shadow: inset 3px 0 #9b6cff; }
.mark-1 { border-color: #ff4f9a; box-shadow: inset 3px 0 #ff4f9a; }
.mark-2 { border-color: #d9e4ee; box-shadow: inset 3px 0 #d9e4ee; }
.mark-3 { border-color: #1686ff; box-shadow: inset 3px 0 #1686ff; }
.mark-4 { border-color: #ff3645; box-shadow: inset 3px 0 #ff3645; }
.mark-5 { border-color: #39f4ef; box-shadow: inset 3px 0 #39f4ef; }
.link-copy { display: flex; flex-direction: column; gap: 4px; padding-left: 9px; }
.link-copy strong { font-size: clamp(17px, 4vw, 23px); line-height: 1; text-transform: uppercase; letter-spacing: .04em; }
.link-copy small { color: #7f8d9d; font: 700 8px/1 var(--font-geist-mono), monospace; letter-spacing: .15em; }
.arrow { font-size: 20px; color: #758395; transition: color .2s ease, transform .2s ease; }
.social-link:hover .arrow, .social-link:focus-visible .arrow { color: var(--lime); transform: translate(2px,-2px); }

.imprint { color: #9ca8b7; font: 700 10px/1.55 var(--font-geist-mono), monospace; font-style: normal; letter-spacing: .1em; border-left: 2px solid var(--lime); padding-left: 12px; }
.imprint strong { display: block; color: var(--white); font-size: 9px; letter-spacing: .16em; margin-bottom: 4px; }

footer { border-top: 1px solid rgba(216,233,250,.18); padding-top: 15px; }
.signal { display: flex; align-items: end; gap: 3px; height: 14px; }
.signal i { display: block; width: 3px; background: var(--lime); }
.signal i:nth-child(1) { height: 4px; }.signal i:nth-child(2) { height: 7px; }.signal i:nth-child(3) { height: 10px; }.signal i:nth-child(4) { height: 14px; }

@media (max-width: 480px) {
  .shell { padding: 16px; gap: 20px; }
  .profile { align-items: flex-start; }
  .brand-mark { width: 78px; }
  .wordmark { margin-top: 6px; }
  .social-link { grid-template-columns: 30px 44px 1fr 30px; min-height: 64px; }
  .panel-heading { font-size: 8px; }
  footer { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }