/* ConfaHub pixel home: owner geometry and flat palette, plus a desktop composition. */
@font-face{font-family:ConfaHubBlock;src:url('/static/fonts/ConfaHubBlock-Bold.woff2?v=72d06ac20a9c74f9') format('woff2');font-weight:700;font-style:normal;font-display:swap}

.confahub-body.pixel-surface{
  --ink:#242424;
  --panel:#3b3b3b;
  --muted:#909090;
  --paper:#fff;
  --u:calc(min(100vw,966px)/966);
  --gutter:0px;
  --font-display:ConfaHubBlock,monospace;
  --font-text:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  margin:0!important;
  padding:0!important;
  min-height:100svh;
  background:var(--ink)!important;
  background-image:none!important;
  color:var(--paper);
  font-family:var(--font-text);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  font-synthesis:none;
  letter-spacing:0;
  color-scheme:dark;
  accent-color:#fff;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html{background:#242424}
.pixel-surface.drawer-open{overflow:hidden}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.confahub-body.pixel-surface::before,
.confahub-body.pixel-surface::after,
.confahub-body.pixel-surface .site-ambience{display:none!important;background:none!important}
.confahub-body.pixel-surface *{box-sizing:border-box}
.confahub-body.pixel-surface img{max-width:100%}

/* Mobile reference geometry. */
.confahub-body.pixel-surface .site-shell{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  max-width:min(100%,966px);
  min-height:100svh;
  margin:0 auto;
  padding:0;
  background:var(--ink);
  border:0;
  border-radius:0;
  box-shadow:none;
}
.confahub-body.pixel-surface .site-shell>.sidebar{display:none}
.confahub-body.pixel-surface .site-main{
  position:relative;
  display:flex;
  flex:1;
  flex-direction:column;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  gap:0;
}
.confahub-body.pixel-surface .main-content{
  display:flex;
  flex:1;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  padding:0 0 calc(198 * var(--u));
  background:none;
  gap:0;
}

.reference-header{
  --header-control:clamp(44px,12vw,64px);
  position:relative;
  display:grid;
  grid-template-columns:var(--header-control) minmax(0,1fr) var(--header-control);
  align-items:center;
  gap:clamp(8px,2vw,20px);
  flex:none;
  min-height:calc(clamp(72px,15.6vw,100px) + env(safe-area-inset-top,0px));
  margin:0;
  padding:10px max(clamp(12px,2.4vw,26px),env(safe-area-inset-right,0px)) 10px max(clamp(12px,2.4vw,26px),env(safe-area-inset-left,0px));
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:var(--ink);
  color:var(--paper);
  border:0;
  border-radius:0;
  box-shadow:none;
}
.reference-menu{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:var(--header-control);
  height:var(--header-control);
  padding:8px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--paper);
  cursor:pointer;
}
.reference-menu span{display:block;width:100%;height:clamp(6px,1.65vw,9px);background:var(--paper)}
.reference-wordmark{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:44px;
  margin:0;
  padding:0;
  color:var(--paper);
  line-height:1;
  text-decoration:none;
}
.reference-wordmark .reference-label{display:flex;align-items:center;justify-content:center;max-width:100%;font:700 clamp(20px,8vw,56px)/1.2 var(--font-display);white-space:nowrap}
.reference-header-actions{
  position:absolute;
  right:calc(12 * var(--u));
  top:0;
  display:flex;
  align-items:center;
}
.reference-login,
.reference-desktop-nav{display:none}
.reference-profile{
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--header-control);
  height:var(--header-control);
  aspect-ratio:1;
  border-radius:50%;
  background:#000;
  overflow:hidden;
  text-decoration:none;
}
.reference-profile img{display:block;width:100%;height:100%;object-fit:cover}
.reference-profile>.pixel-icon{width:82%;height:82%;fill:currentColor}

/* Compact shared homepage: the news feed lives in its own window. */
.confahub-body.pixel-surface.page-home .main-content{display:block;padding:0}
.reference-home{display:block;flex:none;width:min(100%,760px);min-width:0;margin:24px auto 110px;color:var(--paper)}
.reference-services{padding:20px;background:var(--panel);scroll-margin-top:16px}
.reference-count{display:flex;align-items:center;justify-content:center;min-height:84px;margin:0 0 14px;padding:12px;background:var(--ink)}
.reference-count-text{margin:0;font:700 32px/1.4 var(--font-display);text-align:center}
.reference-service-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.reference-service{display:flex;align-items:center;gap:14px;min-width:0;min-height:88px;padding:16px 20px;background:var(--ink);color:var(--paper);text-decoration:none;border:0;border-radius:0}
.reference-service .pixel-icon,.reference-vpn img{display:block;flex:none;width:40px;height:40px;object-fit:contain;image-rendering:pixelated;fill:currentColor}
.reference-service-name{min-width:0;font:700 28px/1.4 var(--font-display)}
.reference-messenger{grid-column:1/-1}
.reference-socials{margin-top:24px;padding:24px 20px 20px;background:var(--panel)}
.reference-socials h2{margin:0 0 20px;font:700 24px/1.5 var(--font-display)}
.reference-social-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.reference-social{display:flex;align-items:center;gap:12px;min-width:0;min-height:88px;padding:16px 12px;border-top:3px solid var(--social-accent);background:var(--ink);color:var(--paper);text-decoration:none}
.reference-social-telegram{--social-accent:#35a9e8}
.reference-social-discord{--social-accent:#8894ff}
.reference-social-tiktok{--social-accent:#ff527b}
.reference-social span{font:700 20px/1.4 var(--font-display)}
.reference-social>.pixel-icon{flex:none;width:32px;height:32px}
.reference-social>.pixel-icon:first-child{color:var(--social-accent)}
.reference-social>.pixel-icon:last-child{width:16px;height:16px;margin-left:auto;color:var(--muted)}
.confahub-body.pixel-surface .reference-social:hover{background:#303030}
@media(max-width:720px){.reference-socials{margin-top:16px;padding:20px 14px 14px}.reference-socials h2{font-size:20px;margin-bottom:16px}.reference-social-links{grid-template-columns:1fr;gap:10px}.reference-social{min-height:64px;padding:14px 16px;gap:16px}}
.reference-label{display:block;flex:none;overflow:visible}
.reference-label text{font-family:ConfaHubBlock,monospace;letter-spacing:0;word-spacing:0;text-shadow:none!important;stroke:none}
.home-footer{display:none}
@media(max-width:480px){.reference-home{margin-top:12px}.reference-services{padding:14px}.reference-count-text{font-size:28px}.reference-service{gap:8px;padding:12px;min-height:76px}.reference-service .pixel-icon,.reference-vpn img{width:30px;height:30px}.reference-service-name{font-size:20px}}

/* Navigation, drawer and dialogs. */
.confahub-body.pixel-surface :is(a,button):focus-visible{outline:2px solid #fff;outline-offset:-3px}
.confahub-body.pixel-surface .reference-service:hover,
.confahub-body.pixel-surface .reference-nav :is(a,button):hover{filter:brightness(1.08)}

.confahub-body.pixel-surface .reference-home,
.confahub-body.pixel-surface .reference-home *,
.confahub-body.pixel-surface .reference-header *,
.confahub-body.pixel-surface .reference-nav *{animation:none!important;text-shadow:none!important;box-shadow:none;filter:none}
.confahub-body.pixel-surface .reference-home{transform:none!important}

.confahub-body.pixel-surface .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.confahub-body.pixel-surface .skip-link{position:fixed;left:8px;top:-100px;z-index:110;padding:12px;background:var(--ink);color:#fff;text-decoration:none}
.confahub-body.pixel-surface .skip-link:focus{top:8px}
.confahub-body.pixel-surface [hidden]{display:none!important}

.confahub-body.pixel-surface .mobile-drawer{position:fixed;inset:0;z-index:90;isolation:isolate}
.confahub-body.pixel-surface .mobile-drawer__backdrop{position:absolute;inset:0;background:#0009;cursor:pointer}
.confahub-body.pixel-surface .mobile-drawer .reference-drawer{
  display:block;
  position:absolute;
  inset:0 auto 0 0;
  width:min(88vw,360px);
  height:100%;
  padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));
  overflow-y:auto;
  background:var(--ink);
  background-image:none;
  color:#fff;
  border:0;
  border-right:1px solid var(--muted);
  border-radius:0;
  box-shadow:none;
  font-family:var(--font-display);
  transform:translateX(-100%);
  transition:transform .2s ease;
}
.confahub-body.pixel-surface .mobile-drawer.is-open .reference-drawer{transform:translateX(0)}
.reference-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:32px;font-size:24px}
.reference-drawer__head button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:12px;background:var(--panel);color:#fff;border:0;border-radius:0}
.reference-drawer__head svg{width:20px;height:20px}
.reference-drawer nav{display:grid;gap:10px}
.reference-drawer nav a{display:flex;align-items:center;gap:16px;min-height:52px;padding:12px;background:var(--panel);color:#fff;font-size:20px;font-weight:700;line-height:1.5;text-decoration:none}
.reference-drawer .pixel-icon{flex:none;width:24px;height:24px;object-fit:contain;image-rendering:pixelated}

.confahub-body.pixel-surface .email-verify-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.confahub-body.pixel-surface .email-verify-modal__backdrop{position:absolute;inset:0;background:#000b}
.confahub-body.pixel-surface .email-verify-modal__card{position:relative;width:min(100%,480px);padding:24px;background:var(--ink);color:#fff;border:1px solid var(--muted)}
.confahub-body.pixel-surface .email-verify-modal__row,
.confahub-body.pixel-surface .email-verify-modal__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.confahub-body.pixel-surface .email-verify-modal input{max-width:100%;min-height:44px;padding:12px;background:var(--panel);color:#fff;border:1px solid var(--muted)}
.confahub-body.pixel-surface .email-verify-modal button{min-height:44px;padding:12px;background:var(--panel);color:#fff;border:1px solid var(--muted);font:inherit}


@media(min-width:1024px){
 .confahub-body.pixel-surface{--u:.8px}
 .confahub-body.pixel-surface .site-shell{max-width:1120px}
 .reference-header{--header-control:60px;min-height:92px}
 .reference-menu{padding:12px 8px}
 .reference-menu span{height:8px}
 .reference-home{margin-top:36px}
}
@media(prefers-reduced-motion:reduce){.confahub-body.pixel-surface *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* New posts are counted separately from the homepage. */
[data-news-link]{position:relative}
.pixel-news-badge{position:absolute;right:-5px;top:-6px;z-index:2;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:2px 5px;background:#d84343;color:white;font:700 14px/1 var(--font-text);clip-path:polygon(25% 0,75% 0,75% 12%,88% 12%,88% 25%,100% 25%,100% 75%,88% 75%,88% 88%,75% 88%,75% 100%,25% 100%,25% 88%,12% 88%,12% 75%,0 75%,0 25%,12% 25%,12% 12%,25% 12%)}
.pixel-news-badge[hidden]{display:none}
.reference-drawer [data-news-badge]{right:10px;top:50%;transform:translateY(-50%)}

/* Owner-requested continuous 3D turns, including reduced-motion mode.
   Only these five rotors override the surface's general animation reset. */
.pixel-spin-icon,.pixel-spin-letter{display:inline-grid;flex:none;perspective:420px;overflow:visible;--spin-step:1px}
.reference-service .pixel-spin-icon{width:40px;height:40px}
.pixel-spin-letter{--spin-step:.5px}
.pixel-spin-rotor{display:grid;width:100%;height:100%;transform-style:preserve-3d;transform-origin:center}
.pixel-spin-layer{grid-area:1/1;display:block;backface-visibility:visible;color:#909090;transform:translateZ(calc(var(--spin-depth) * var(--spin-step)))}
.pixel-spin-layer-0{--spin-depth:-3;color:#fff}
.pixel-spin-layer-1{--spin-depth:-2}
.pixel-spin-layer-2{--spin-depth:-1}
.pixel-spin-layer-3{--spin-depth:0}
.pixel-spin-layer-4{--spin-depth:1}
.pixel-spin-layer-5{--spin-depth:2}
.pixel-spin-layer-6{--spin-depth:3;color:#fff}
.reference-service .pixel-spin-layer :is(svg,img){width:100%;height:100%}
.pixel-spin-vpn .pixel-spin-layer:not(:first-child):not(:last-child) img{filter:brightness(.565)}
.confahub-body.pixel-surface .reference-home .pixel-spin-rotor,
.confahub-body.pixel-surface .reference-header .pixel-spin-rotor{animation:pixel-depth-turn 8s linear infinite!important}
.confahub-body.pixel-surface .pixel-spin-vpn .pixel-spin-rotor{animation-delay:-1.2s!important}
.confahub-body.pixel-surface .pixel-spin-chat .pixel-spin-rotor{animation-delay:-2.4s!important}
.confahub-body.pixel-surface .pixel-spin-h .pixel-spin-rotor{animation-delay:-1s!important}
@keyframes pixel-depth-turn{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@media(max-width:480px){.reference-service .pixel-spin-icon{width:30px;height:30px}}

/* Keep the top and service area usable when a phone is turned sideways. */
@media(orientation:landscape) and (max-height:500px){
 .reference-header{--header-control:44px;min-height:calc(64px + env(safe-area-inset-top,0px));padding-bottom:8px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
 .reference-wordmark .reference-label{font-size:40px}
 .reference-menu{padding:8px 0}
}