/* Monochrome, premium, responsive stylesheet with animated galaxy-ish background (CSS animated) */
:root{
  --bg:#000;
  --panel:#0b0b0b;
  --muted:#9aa0a6;
  --white:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:var(--white);}

.bg{position:fixed;inset:0;z-index:-3;overflow:hidden}
.bg::before{
  content:"";position:absolute;inset:-20%;background:
    radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.03) 0%, transparent 20%),
    radial-gradient(ellipse at 80% 80%, rgba(255,255,255,0.02) 0%, transparent 25%),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.018) 0%, transparent 30%);
  filter:grayscale(100%);
  animation: drift 40s linear infinite;
}
.bg::after{
  content:"";position:absolute;inset:0;background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
  mix-blend-mode:screen;opacity:0.18;filter:grayscale(100%);
}

@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-8%,6%,0) scale(1.02)}}

.overlay{position:fixed;inset:0;background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.5));z-index:-1}

.site-header{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:16px}
.avatar{width:140px;height:140px;border-radius:50%;border:2px solid rgba(255,255,255,0.9);box-shadow:0 6px 30px rgba(255,255,255,0.06);object-fit:cover}
.titles{display:flex;flex-direction:column}
.handle{font-size:28px;color:var(--white);text-decoration:none;font-weight:700}
.handle:focus,.handle:hover{text-decoration:underline}
.subtitle{color:var(--muted);margin-top:6px;font-size:13px}

.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--white);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600}
.nav a:hover{background:rgba(255,255,255,0.03)}

.container{max-width:1100px;margin:48px auto;padding:0 20px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border-radius:12px;padding:28px;border:1px solid rgba(255,255,255,0.04)}
.card h1{margin-top:0;font-size:30px}
.lead{color:var(--muted);margin-bottom:18px}

.link-list{list-style:none;padding:0;margin:12px 0 0}
.link-list li{padding:12px 0;border-top:1px dashed rgba(255,255,255,0.03);display:flex;gap:12px;align-items:center}
.link-list li:first-child{border-top:0}
.link-list a{color:var(--white);text-decoration:none;font-weight:700}
.link-list span{color:var(--muted);font-size:13px}

.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;list-style:none;padding:0;margin:18px 0}
.link-grid li a{display:block;padding:14px;border-radius:10px;background:rgba(255,255,255,0.02);text-align:center;text-decoration:none;color:var(--white);font-weight:700}
.link-grid li a:hover{background:rgba(255,255,255,0.04)}

.note{color:var(--muted);margin-top:18px;font-size:13px}

.newtab-btn{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);color:var(--white);text-decoration:none;font-size:28px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.newtab-btn:hover{background:rgba(255,255,255,0.09)}

/* Sidebar / Hamburger */
.hamburger{width:44px;height:38px;display:inline-flex;flex-direction:column;justify-content:space-between;cursor:pointer;padding:6px;border-radius:8px}
.hamburger span{display:block;height:3px;background:var(--white);border-radius:3px;opacity:0.95}
.hamburger:focus{outline:2px dashed rgba(255,255,255,0.12)}

.sidebar{position:fixed;right:-420px;top:0;height:100%;width:380px;max-width:92vw;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:-40px 0 80px rgba(0,0,0,0.6);padding:28px;transition:right .34s cubic-bezier(.2,.9,.2,1);z-index:40;backdrop-filter:blur(8px);border-left:1px solid rgba(255,255,255,0.03)}
.sidebar.open{right:0}
.sidebar .close{position:absolute;left:12px;top:12px;border:none;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.sidebar h3{margin:6px 0 12px;font-size:18px}
.search-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--white);font-size:15px}
.search-input::placeholder{color:rgba(255,255,255,0.35)}
.results{margin-top:14px;max-height:46vh;overflow:auto}
.result-item{padding:10px;border-radius:8px;margin-bottom:8px;background:rgba(255,255,255,0.015);display:flex;flex-direction:column}
.result-item a{color:var(--white);text-decoration:none;font-weight:700}
.result-item p{color:var(--muted);font-size:13px;margin:6px 0 0}
.admin-btn{display:none;margin-top:12px;padding:10px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);cursor:pointer;color:var(--white);font-weight:700}
.admin-btn.visible{display:block}

.cloak-set{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cloak-btn{padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.02);color:var(--white);text-decoration:none;font-weight:700;font-size:13px;border:1px solid rgba(255,255,255,0.03)}
.cloak-btn:hover{background:rgba(255,255,255,0.035)}

/* smaller devices adjust sidebar padding */
@media (max-width:600px){
  .sidebar{width:100%;right:-100%}
  .sidebar.open{right:0}
}

/* Responsive */
@media (max-width:900px){
  .avatar{width:84px;height:84px}
  .handle{font-size:20px}
  .site-header{padding:16px}
  .container{margin:20px auto}
}

@media (max-width:600px){
  .site-header{flex-direction:column;align-items:flex-start;gap:12px}
  .nav{width:100%;overflow:auto}
  .nav a{padding:8px 10px}
  .card{padding:18px}
}

/* Accessibility focus */
a:focus{outline:2px dashed rgba(255,255,255,0.18);outline-offset:3px}