*{box-sizing:border-box}
:root{--bg:#000;--text:#eee;--muted:#858585;--line:#ffffff20;--gold:#d9a72f;--max:760px}
html,body{margin:0;background:#000;color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100svh;overflow-x:hidden}
button,input{font:inherit}
#snow{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.app{position:relative;z-index:1;min-height:100svh;background:transparent}
.header{height:106px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;max-width:var(--max);margin:auto}
.headerTitle{font-size:25px;font-weight:400}
.dotsBtn{width:44px;height:55px;border:0;background:transparent;color:#eee;font-size:34px;line-height:1;cursor:pointer}
.brand{height:255px;max-width:var(--max);margin:auto;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.brand:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,#000 100%);pointer-events:none}
.brand img{width:100%;height:100%;object-fit:cover;display:block}
.controls{max-width:var(--max);margin:auto;padding:0 25px}
.search{height:76px;border:1px solid #333;border-radius:22px;background:#050505;display:flex;align-items:center;padding:0 20px}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#eee;font-size:20px}
.search input::placeholder{color:#888}
.searchIcon{width:20px;height:20px;border:2px solid #eee;border-radius:50%;position:relative;margin-right:3px}
.searchIcon:after{content:"";position:absolute;width:9px;height:2px;background:#eee;right:-7px;bottom:-4px;transform:rotate(-47deg)}
.chips{display:flex;gap:12px;overflow-x:auto;padding:18px 0 15px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{height:55px;padding:0 20px;white-space:nowrap;border:1px solid #333;border-radius:28px;background:#030303;color:#eee}
.chip.active{background:#151515;border-color:#555}
.feed{max-width:var(--max);margin:auto;padding:8px 25px 35px}
.person{display:grid;grid-template-columns:145px minmax(0,1fr) 32px;gap:22px;align-items:center;min-height:145px;padding:14px 0;border-bottom:1px solid #171717;cursor:pointer}
.person img{width:145px;height:145px;object-fit:cover;border-radius:20px;filter:grayscale(1);background:#111}
.personText{min-width:0}
.name{font-size:21px;font-weight:700;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desc{font-size:17px;line-height:1.5;color:#c0c0c0;margin-top:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arr{font-size:43px;font-weight:200;color:#eee}
.empty{text-align:center;color:#777;font-size:20px;padding:58px 20px}
footer{text-align:center;color:#777;padding:10px 0 40px}
.overlay{position:fixed;inset:0;z-index:20;background:#000b;backdrop-filter:blur(12px);display:grid;place-items:center;padding:16px}
.overlay[hidden]{display:none}
.glass{width:min(620px,95vw);max-height:91svh;overflow:auto;position:relative;background:linear-gradient(145deg,#202328eb,#070809ef);border:1px solid #ffffff24;border-radius:28px;box-shadow:0 30px 100px #000;backdrop-filter:blur(28px)}
.profile{padding:26px;text-align:center;overflow:hidden}
.profile.gold{border-color:#d9a72f80;box-shadow:0 0 0 1px #d9a72f30,0 0 80px #d9a72f30,0 30px 100px #000}
.windowSnow{position:absolute;inset:0;border-radius:28px;pointer-events:none;background-image:radial-gradient(circle,rgba(255,220,120,.95) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.6px);background-size:20px 20px,34px 34px;opacity:.23}
.profile>*:not(.windowSnow){position:relative;z-index:2}
.close{position:absolute!important;right:13px;top:13px;width:44px;height:44px;border-radius:14px;border:1px solid #ffffff20;background:#050607d9;color:#fff;font-size:28px;z-index:4!important}
.pa{width:min(100%,360px);height:360px;object-fit:cover;border-radius:22px;filter:grayscale(1);margin:0 auto 18px;display:block}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid #ffffff25;color:#ccc;font-size:11px;text-transform:uppercase}
.profile h2{font-size:30px;text-decoration:underline;margin:12px 0 7px}
.profileUser{color:#aaa;margin-bottom:14px}
.profile p{color:#ccc;line-height:1.7}
.details{color:#999;line-height:1.65;text-align:left;white-space:pre-wrap;margin-top:18px}
.auth{padding:30px 25px}
.smallLabel{font-size:12px;letter-spacing:3px;color:#aaa}
.auth h2{font-size:28px;margin:10px 0}
.hint{color:#888;line-height:1.55}
.auth input{width:100%;padding:15px;border:1px solid #292929;border-radius:14px;background:#050505;color:#fff;outline:0;margin:7px 0}
.primary{width:100%;padding:15px;border:0;border-radius:14px;background:#eee;color:#111;font-weight:700;margin:8px 0}
.drawerShade{position:fixed;inset:0;z-index:29;background:#0008;backdrop-filter:blur(4px);display:none}
.drawerShade.open{display:block}
.drawer{position:fixed;right:0;top:0;z-index:30;width:min(350px,88vw);height:100svh;padding:85px 25px 25px;background:#0a0b0dee;border-left:1px solid #ffffff16;backdrop-filter:blur(28px);transform:translateX(105%);transition:.28s}
.drawer.open{transform:translateX(0)}
.drawerClose{position:absolute;right:15px;top:15px;width:44px;height:44px;border-radius:14px;border:1px solid #ffffff20;background:#050505;color:#fff;font-size:27px}
.drawerTitle{font-weight:800;letter-spacing:3px;margin-bottom:18px}
.drawer button:not(.drawerClose),.drawer a{display:block;width:100%;padding:17px 0;border:0;border-bottom:1px solid #ffffff15;background:transparent;color:#ddd;text-align:left;text-decoration:none}
@media(max-width:600px){
.header{height:104px;padding:0 31px}
.headerTitle{font-size:24px}
.brand{height:220px}
.controls{padding:0 25px}
.search{height:75px}
.chip{height:54px;padding:0 19px}
.feed{padding-left:25px;padding-right:25px}
.person{grid-template-columns:145px minmax(0,1fr) 26px;gap:20px}
.person img{width:145px;height:145px}
.name{font-size:20px}
.desc{font-size:16px}
}
@media(max-width:470px){
.brand{height:210px}
.person{grid-template-columns:92px minmax(0,1fr) 24px;gap:14px;min-height:92px}
.person img{width:92px;height:92px;border-radius:18px}
.name{font-size:17px}
.desc{font-size:14px;margin-top:8px}
.arr{font-size:34px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Exact reference: no duplicate page header inside the site. */
.header{display:none!important}
.brand{margin-top:0;height:255px}
@media(max-width:600px){.brand{height:250px}}
/* Dense static dot-snow, no falling snowflakes. */
#snow{opacity:1}

/* FINAL FIX: the webpage itself has no duplicate title/menu header. */
header, .header, .page-header, .top-header, .site-header,
[class*="header"], [id*="header"] { display:none !important; }
.app { padding-top:0 !important; margin-top:0 !important; }
.brand { margin-top:0 !important; }
