:root { --ink:#e7fff1; --muted:#8ba99a; --line:#1d5442; --surface:#07140f; --accent:#00ff8c; --good:#00ff8c; --warn:#ffd000; --bad:#ff416c; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#020705; font:16px/1.5 "Cascadia Code","Fira Code",Consolas,monospace; }
.site-nav { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; width:min(1080px,calc(100% - 32px)); min-height:62px; margin:0 auto; border-bottom:1px solid #1c4c39; }.brand { color:#e7fff1; text-decoration:none; font-size:1.12rem; font-weight:900; letter-spacing:-.06em; }.brand::before { content:"⬢ "; color:var(--accent); text-shadow:0 0 10px var(--accent); }.brand span { color:var(--accent); font-weight:600; }.nav-links { display:flex; align-items:center; gap:4px; }.nav-links a,.nav-links button { min-height:auto; padding:7px 10px; border:1px solid transparent; background:transparent; color:#8aaf9a; box-shadow:none; font-size:.76rem; text-decoration:none; }.nav-links a:hover,.nav-links a.active { border-color:#286149; color:var(--accent); background:#06140d; box-shadow:none; }.nav-links button { border-color:#4c2632; color:#ff99ac; }.nav-links button:hover { background:#260911; box-shadow:none; }
#matrix-rain { position:fixed; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; opacity:.5; mask-image:linear-gradient(to bottom,black,black 78%,transparent); }
body::before { content:"01001000 01000001 01000011 01001011 00100000 01010100 01001000 01000101 00100000 01000011 01001111 01000100 01000101"; position:fixed; inset:0; overflow:hidden; padding:3vh 2vw; pointer-events:none; opacity:.075; color:#00ff8c; font-size:1.35rem; letter-spacing:.45em; line-height:2.1; word-break:break-all; background:linear-gradient(rgba(0,255,140,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,140,.05) 1px,transparent 1px),radial-gradient(ellipse at 50% 0%,#0b39255c,transparent 54%); background-size:36px 36px,36px 36px,100% 100%; animation:matrix 14s linear infinite; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; opacity:.15; background:repeating-linear-gradient(0deg,transparent 0 3px,#00ff8c 4px); mix-blend-mode:screen; }
.shell { position:relative; z-index:1; width:min(1080px,calc(100% - 32px)); margin:0 auto; padding:72px 0; display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:start; }
.shell [data-view][hidden] { display:none !important; }
.intro { padding:38px 18px 0 0; }.eyebrow { margin:0 0 8px; color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.12em; }.eyebrow::before { content:">_ "; }.intro h1 { position:relative; isolation:isolate; white-space:nowrap; font-size:clamp(3rem,5.4vw,4.7rem); line-height:.95; margin:0; letter-spacing:-.07em; text-shadow:0 0 22px #00ff8c8a; }.intro h1::before { content:attr(data-text); position:absolute; inset:0; z-index:-1; color:#ff416c; opacity:.55; clip-path:inset(47% 0 36% 0); transform:translate(-3px,1px); animation:glitch .8s steps(2,end) infinite alternate-reverse; }.intro h1 span { display:inline-block; }.intro h1 span.corrupt { color:#ff416c; text-shadow:-4px 0 #00e5ff,4px 0 #ff416c,0 0 16px #fff; transform:translate(calc((var(--i) % 3 - 1) * 7px),-3px) skewX(-16deg); animation:character-jump .09s steps(2,end) infinite; }.intro h1::after { content:"_"; color:var(--accent); animation:blink 1s step-end infinite; }.lede { max-width:34rem; font-size:1.13rem; color:var(--muted); }
.legend { display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }.legend span { padding:6px 10px; border:1px solid var(--line); border-radius:2px; font-size:.82rem; color:var(--accent); background:#061b12; box-shadow:inset 0 0 12px #00ff8c0f; }.legend span::before { content:"✓ "; }
.card,.telemetry { position:relative; padding:28px; border:1px solid var(--line); border-radius:3px; background:linear-gradient(145deg,#091b13eF,#040b08ef); box-shadow:0 0 0 1px #00ff8c10,0 0 35px #00ff8c14,inset 0 0 35px #00ff8c08; }.card::before,.telemetry::before { content:""; position:absolute; inset:-2px; pointer-events:none; background:linear-gradient(var(--accent),var(--accent)) left top/26px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) left top/2px 26px no-repeat,linear-gradient(var(--accent),var(--accent)) right bottom/26px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) right bottom/2px 26px no-repeat; filter:drop-shadow(0 0 5px #00ff8c); }.card::after,.telemetry::after { content:"[ ENCRYPTED_CHANNEL :: ACTIVE ]"; position:absolute; top:9px; right:12px; color:#4a8064; font-size:.6rem; letter-spacing:.08em; }.card h2,.telemetry h2 { margin:0; letter-spacing:-.035em; }.card h2::before,.telemetry h2::before { content:"// "; color:var(--accent); }.card header>p:last-child { margin-top:4px; color:var(--muted); }
.login-card { grid-column:1 / -1; width:min(530px,100%); margin:35px auto; padding:30px; border:1px solid var(--line); background:linear-gradient(145deg,#091b13ef,#040b08ef); box-shadow:0 0 35px #00ff8c1d,inset 0 0 35px #00ff8c08; }.login-card h2 { margin:0; letter-spacing:-.04em; }.login-card h2::before { content:"// "; color:var(--accent); }.login-card header p:last-child { color:var(--muted); }.login-card form { margin-top:22px; }
.presets { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:18px; }.preset { min-height:35px; padding:6px 7px; border:1px solid #287053; background:#07170f; color:#bcebd0; box-shadow:none; font-size:.69rem; white-space:nowrap; }.preset:hover { box-shadow:0 0 13px #00ff8c47; }.preset-captcha { border-color:#8c7028; color:#ffe28a; }.preset-captcha:hover { background:#2c2105; box-shadow:0 0 13px #ffd0004d; }.preset-block { border-color:#7a3144; color:#ff9bad; }.preset-block:hover { background:#2b0711; box-shadow:0 0 13px #ff416c4d; }
form { margin-top:22px; display:grid; gap:14px; } label { display:grid; gap:6px; font-weight:650; color:#bdeccf; } input { min-height:46px; padding:10px 12px; border:1px solid #287053; border-radius:2px; color:var(--ink); background:#020705; font:inherit; outline:none; } input::placeholder { color:#4d7762; } input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #00ff8c1f,0 0 18px #00ff8c26; } .turnstile-wrap { padding:13px; border:1px dashed #287053; border-radius:2px; background:#031108; color:#a0dab5; font-size:.9rem; }.turnstile-wrap>span { display:block; margin-bottom:10px; font-weight:650; } button { min-height:46px; padding:10px 16px; border:1px solid var(--accent); border-radius:2px; background:var(--accent); color:#021009; font:800 1rem inherit; cursor:pointer; box-shadow:0 0 18px #00ff8c4d; } button:hover { background:#b4ffd8; box-shadow:0 0 28px #00ff8c8c; }.result { min-height:24px; margin:16px 0 0; font-weight:650; }.result.error { color:var(--bad); }.result.success { color:var(--good); }
.telemetry { grid-column:1 / -1; }.telemetry::after { content:"[ SIEM_FEED :: LIVE ]"; }.telemetry-header { display:flex; align-items:start; justify-content:space-between; gap:12px; }.clear { min-height:auto; padding:7px 10px; border-color:#395649; background:#0b2117; color:#b9d9c7; box-shadow:none; font-size:.82rem; }.clear:hover { background:#143b27; box-shadow:none; }.risk-row,.attempts { display:flex; justify-content:space-between; margin-top:22px; color:var(--muted); }.risk-row strong,.attempts strong { color:var(--ink); }.meter { overflow:hidden; height:9px; margin-top:8px; border:1px solid #23533f; border-radius:0; background:#020705; }.meter i { display:block; width:0%; height:100%; transition:width .25s,background .25s; background:var(--good); box-shadow:0 0 12px currentColor; }.signals { margin:20px 0 0; padding:0; list-style:none; display:grid; gap:8px; }.signals li { padding:9px 11px; border-left:3px solid #287053; border-radius:0; background:#06130d; color:#a7c7b4; font-size:.92rem; }.signals li::before { content:"[LOG] "; color:var(--accent); }.signals li.warn { border-color:var(--warn); }.signals li.warn::before { color:var(--warn); content:"[WARN] "; }.signals li.bad { border-color:var(--bad); }.signals li.bad::before { color:var(--bad); content:"[BLOCK] "; }
.group-sim { position:relative; grid-column:1 / -1; padding:28px; border:1px solid #245941; background:linear-gradient(145deg,#081a12f0,#040c08f0); box-shadow:0 0 26px #00ff8c12,inset 0 0 32px #00ff8c08; }.group-sim::before { content:""; position:absolute; inset:-2px; pointer-events:none; background:linear-gradient(var(--accent),var(--accent)) right top/26px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) right top/2px 26px no-repeat; filter:drop-shadow(0 0 5px #00ff8c); }.group-header { display:flex; justify-content:space-between; align-items:start; gap:20px; }.group-header h2 { margin:0; letter-spacing:-.03em; }.group-header h2::before { content:"// "; color:var(--accent); }.group-header p:last-child { max-width:700px; margin:5px 0 0; color:var(--muted); font-size:.92rem; }.group-feed { display:grid; gap:10px; margin-top:22px; }.post { position:relative; padding:15px 17px; border:1px solid #153c2b; background:#06130d; }.post-new { border-color:#00d975; box-shadow:inset 3px 0 var(--accent),0 0 16px #00ff8c19; }.post-meta { display:flex; justify-content:space-between; gap:12px; color:#76ad8b; font-size:.76rem; }.post-author { color:#c9fadd; font-weight:800; }.post-body { margin:8px 0 0; color:#d7f2e1; }.new-badge { color:#07140f; background:var(--accent); padding:2px 5px; font-weight:900; font-size:.65rem; }.feed-loading { color:var(--muted); }
.auth-shell { position:relative; z-index:1; width:min(520px,calc(100% - 32px)); min-height:calc(100vh - 62px); margin:0 auto; display:grid; place-items:center; }.auth-card { width:100%; padding:32px; border:1px solid var(--line); background:linear-gradient(145deg,#091b13ef,#040b08ef); box-shadow:0 0 45px #00ff8c19,inset 0 0 35px #00ff8c08; }.auth-card h1 { margin:0; letter-spacing:-.055em; }.auth-card h1::before { content:"// "; color:var(--accent); }.auth-card>p:not(.result):not(.auth-alt) { color:var(--muted); }.auth-alt { margin:18px 0 0; color:var(--muted); font-size:.84rem; }.auth-alt a { color:var(--accent); }.social-shell { position:relative; z-index:1; width:min(1280px,calc(100% - 32px)); margin:28px auto 0; display:grid; grid-template-columns:220px minmax(0,640px) 230px; gap:18px; align-items:start; }.social-sidebar,.social-right,.social-main { border:1px solid #1d503b; background:#06130dee; box-shadow:inset 0 0 25px #00ff8c08; }.social-sidebar { padding:14px; position:sticky; top:15px; }.profile-block { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:0 10px; padding:8px 6px 18px; border-bottom:1px solid #174330; }.profile-block small { color:var(--muted); font-size:.65rem; }.avatar { display:grid; grid-row:span 2; place-items:center; width:40px; height:40px; color:#06130d; background:var(--accent); font-size:.7rem; font-weight:900; box-shadow:0 0 14px #00ff8c6b; }.side-link { display:block; padding:10px 7px; margin-top:8px; color:#a9d3b8; text-decoration:none; font-size:.82rem; }.side-link:hover,.side-link.active { color:var(--accent); background:#0b2117; }.side-status { margin:25px 7px 5px; color:#6f9a7f; font-size:.63rem; }.side-status span,.green-dot { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }.group-cover { padding:27px 27px 20px; border-bottom:1px solid #1d503b; background:radial-gradient(ellipse at top right,#0d4c2d8a,transparent 58%); }.group-cover h1 { margin:0; font-size:1.65rem; letter-spacing:-.05em; }.group-cover h1::before { content:"// "; color:var(--accent); }.group-cover p:not(.eyebrow) { color:var(--muted); font-size:.88rem; }.group-stats { display:flex; gap:14px; flex-wrap:wrap; color:#8fc4a2; font-size:.7rem; }.feed-toolbar { display:flex; justify-content:space-between; align-items:center; padding:16px 20px 0; }.feed-status { min-height:18px; margin:6px 20px 0; color:#69957a; font-size:.7rem; }.social-main .group-feed { margin:10px 14px 18px; }.social-right { padding:17px; position:sticky; top:15px; color:#9fc3ac; font-size:.78rem; }.social-right h2 { margin:0 0 14px; font-size:.9rem; }.social-right h2::before { content:"// "; color:var(--accent); }.tip { margin-top:18px; padding:10px; border-left:2px solid var(--warn); background:#241d08; color:#e5c867; font-size:.7rem; }
.post-actions { display:flex; gap:6px; margin-top:13px; padding-top:10px; border-top:1px solid #143525; }.post-actions button { min-height:30px; padding:5px 8px; border:1px solid transparent; background:transparent; color:#8db99e; box-shadow:none; font-size:.72rem; }.post-actions button:hover { border-color:#245b42; background:#0b2117; color:var(--accent); box-shadow:none; }.post-actions button.liked { color:#ff7d9b; }.post-actions span { color:#d3f5df; }.comments { display:grid; gap:7px; margin:13px 0 0; padding:12px 0 0; list-style:none; border-top:1px dashed #1d4c38; }.comment { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:baseline; padding:8px 10px; background:#071a11; color:#b7d9c4; font-size:.76rem; }.comment strong { color:#d4fce3; }.comment small { color:#6d997d; white-space:nowrap; font-size:.62rem; }.comment-empty { padding:8px 10px; color:#789f87; font-size:.76rem; }
@keyframes blink { 50% { opacity:0; } } @keyframes glitch { 0%,100% { transform:translate(-3px,1px); } 30% { transform:translate(4px,-1px); } 60% { transform:translate(-1px,2px); } } @keyframes character-jump { 50% { transform:translate(5px,2px) skewX(13deg); } } @keyframes matrix { to { background-position:0 0,0 0,0 0; transform:translateY(22px); } }
@media (max-width:900px) { .social-shell { grid-template-columns:190px minmax(0,1fr); }.social-right { display:none; } } @media (max-width:720px) { .site-nav { min-height:56px; }.brand { font-size:.96rem; }.nav-links { gap:0; }.nav-links a,.nav-links button { padding:6px 5px; font-size:.66rem; }.shell { padding:30px 0; grid-template-columns:1fr; }.intro { padding:0; }.intro h1 { font-size:clamp(2.25rem,10vw,3.5rem); letter-spacing:-.1em; }.presets { grid-template-columns:1fr; }.telemetry,.group-sim { grid-column:auto; }.group-header { display:grid; }.card,.telemetry,.group-sim { padding:22px; }.auth-card { padding:24px; }.social-shell { grid-template-columns:1fr; margin-top:16px; }.social-sidebar { position:static; display:flex; align-items:center; gap:4px; padding:8px; }.profile-block { display:none; }.side-link { margin:0; }.side-status { display:none; } }