:root{
  --bg:#141414; --ink:#e6e6e6; --muted:#9b9b9b; --line:#3a3a3a; --surface:#1f1f1f;
  --paper:#e8e8e8; --paper-ink:#171717; --panel:#fafafa; --panel-ink:#171717; --panel-line:#8c97a3;
  --accent:#ff8a1f; --on-accent:#1a0f05; --slate:#566478; --frame:#cfd6df;
  --glow:rgba(255,255,255,.35);
  --display:"Pixelify Sans","Courier New",monospace;
  --tick:"Silkscreen","Courier New",monospace;
}
[data-theme="light"]{
  --bg:#e8e8e8; --ink:#171717; --muted:#555; --line:#bdbdbd; --surface:#f6f6f6;
  --paper:#141414; --paper-ink:#e6e6e6; --panel:#1f1f1f; --panel-ink:#e6e6e6; --panel-line:#555;
  --glow:rgba(0,0,0,0);
}
*{box-sizing:border-box}
html{color-scheme:dark light}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1rem/1.5 var(--display);letter-spacing:.01em}
a{color:var(--accent);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
main{max-width:64rem;margin:0 auto;padding:2.5rem 1.25rem 5rem}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;margin:0}

/* ghost echo headings */
.ghost{position:relative;text-shadow:0 0 12px var(--glow)}
.ghost::before,.ghost::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  pointer-events:none;filter:blur(1.5px);opacity:.16}
.ghost::before{transform:translateY(-.95em)}
.ghost::after{transform:translateY(.95em);opacity:.1}

/* header: status line, banner, nav */
.hub-status{display:flex;gap:.6rem;align-items:center;padding:.3rem .8rem;background:#0c0c0c;color:#d8d8d8;
  border-bottom:1px solid #2c2c2c;font-size:.95rem}
.hub-status .dot{width:.6rem;height:.6rem;background:#37d158;box-shadow:0 0 6px #37d158}
.hub-top{position:relative;z-index:20;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1.1rem 1rem .8rem;color:#e6e6e6;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 3px,transparent 3px 6px),
    linear-gradient(180deg,#26262c,#1a1a1c)}
.hub-banner{width:min(650px,100%);height:5.5rem;display:grid;place-items:center;text-decoration:none;
  border:2px solid var(--frame);color:#fff;font:700 3.2rem/1 var(--display);letter-spacing:.04em;
  text-shadow:0 0 16px rgba(255,255,255,.75);
  background:
    radial-gradient(ellipse 40% 30% at 80% 20%,rgba(255,255,255,.12),transparent),
    radial-gradient(ellipse 50% 20% at 25% 100%,rgba(20,28,40,.7),transparent),
    var(--slate)}
.hub-banner span{color:var(--accent);text-shadow:0 0 14px rgba(255,138,31,.9)}
.hub-nav{width:min(650px,100%);display:grid;grid-template-columns:repeat(3,1fr);align-items:center;
  background:#0a0a0a;border:2px solid var(--frame);text-align:center;position:relative}
.hub-nav>a,.hub-nav summary{display:block;padding:.3rem .5rem;color:#a9a9a9;text-decoration:none;cursor:pointer;
  list-style:none;font-size:1.05rem}
.hub-nav summary::-webkit-details-marker{display:none}
.hub-nav>a:hover,.hub-nav summary:hover,.hub-nav [aria-current="page"],.hub-menu[open] summary{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.7)}
.hub-menu ul{position:absolute;left:-2px;right:-2px;top:100%;margin:0;padding:.4rem;list-style:none;
  background:#f1f1f1;color:#171717;border:2px solid var(--frame);max-height:60vh;overflow:auto;text-align:left}
.hub-menu li a{display:block;padding:.4rem .6rem;color:#171717;text-decoration:none}
.hub-menu li a small{display:block;color:#555;font-size:.9rem}
.hub-menu li a:hover,.hub-menu li a[aria-current="page"]{background:#d9dde3}

/* sections */
.dark{background:var(--bg);color:var(--ink)}
.paper{background:var(--paper);color:var(--paper-ink)}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.25rem}
.hero{padding:3rem 0 0;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:1rem;min-height:30rem}
.hero h1{font-size:clamp(3rem,9vw,5rem);margin-bottom:2.2rem}
.hero .sub{color:var(--muted);margin:-1.6rem 0 1.6rem}
.hero p{max-width:30rem;margin:0 0 1rem}
.lexi{justify-self:end;width:min(100%,25rem);height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 0 26px rgba(255,138,31,.45))}
.ticker{overflow:hidden;border-block:1px solid var(--line);background:var(--bg);padding:.35rem 0;
  font:400 .95rem var(--tick);color:var(--muted);white-space:nowrap}
.ticker .track{display:inline-flex;animation:tick 40s linear infinite}
.ticker span{padding-right:1.4rem}
@keyframes tick{to{transform:translateX(-50%)}}
.dither{background:var(--paper)}
.dither.to-dark{background:var(--bg)}
.paper .wrap{padding-block:3rem 4rem}
.paper h2{font-size:clamp(2.2rem,6vw,3rem);margin-bottom:2rem}
.paper .lede{margin:0 0 2rem;max-width:32rem}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
.card{background:var(--panel);color:var(--panel-ink);border:2px solid var(--panel-line);padding:1.1rem 1.2rem 1.3rem;
  display:flex;flex-direction:column;gap:.5rem}
.card h3{font-size:1.5rem}
.card h3 a{color:inherit;text-decoration:none}
.card .tag{font:400 .85rem var(--tick);color:var(--muted)}
.card p{margin:0;flex:1}
.pxbtn{align-self:flex-start;display:inline-block;border:2px solid currentColor;padding:.3rem .9rem;color:inherit;
  text-decoration:none;font-size:1rem;background:transparent}
.pxbtn:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.empty{color:var(--muted)}
.closing{text-align:center;padding:3rem 1.25rem 2rem}
.closing h2{font-size:clamp(2rem,6vw,3rem);margin-bottom:2rem}
.closing p{max-width:30rem;margin:0 auto 1.5rem}
.closing .pxbtn{align-self:auto;color:var(--ink)}
.foot{border-top:1px solid var(--line);max-width:44rem;margin:3rem auto 0;padding:1.5rem 0 4rem;color:var(--muted);font-size:.95rem}
.sleepy{display:block;margin:1.5rem auto;width:12rem;height:auto;image-rendering:pixelated;filter:drop-shadow(0 0 20px rgba(255,138,31,.4))}

/* theme toggle */
.theme-btn{position:fixed;left:.6rem;bottom:.6rem;z-index:50;width:2.2rem;height:2.2rem;display:grid;place-items:center;
  background:#2a2a2a;color:#ddd;border:2px solid #555;cursor:pointer;font:700 1.1rem var(--display)}

@media (max-width:640px){
  .hero .wrap{grid-template-columns:1fr;min-height:0}
  .lexi{justify-self:center;width:min(70%,16rem);order:-1}
  .hub-banner{font-size:2.4rem;height:4.5rem}
  .hub-nav>a,.hub-nav summary{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none}}
.dither{height:72px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='0' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='1' y='2' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='0' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='1' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='0' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='1' y='2' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='0' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='1' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E");-webkit-mask-size:12px 12px,12px 12px,12px 12px,12px 12px,12px 12px,12px 12px;mask-size:12px 12px,12px 12px,12px 12px,12px 12px,12px 12px,12px 12px;-webkit-mask-position:0 0px,0 12px,0 24px,0 36px,0 48px,0 60px;mask-position:0 0px,0 12px,0 24px,0 36px,0 48px,0 60px;-webkit-mask-repeat:repeat-x,repeat-x,repeat-x,repeat-x,repeat-x,repeat-x;mask-repeat:repeat-x,repeat-x,repeat-x,repeat-x,repeat-x,repeat-x}
