:root{
  --reddit:#FF4500; --ink:#0f172a; --ink-2:#1e293b; --shell:#fef6e4;
  --mint:#c7f9cc; --sky:#e0f2fe;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Apple Color Emoji,Noto Color Emoji,sans-serif}
.font-display{font-family:"Press Start 2P", monospace}
.bg-ink{background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.skip-link{position:absolute;left:-999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.5rem 1rem;border-radius:.5rem}
.h2{font-family:"Press Start 2P";letter-spacing:.5px;font-size:1.25rem;margin-bottom:1rem}
.nav{color:rgb(203,213,225)}
.nav:hover{color:#fff}
.btn{display:inline-flex; align-items:center; gap:.5rem; border:1px solid #334155; padding:.6rem 1rem; border-radius:.8rem}
.btn--primary{background:var(--reddit); border-color:transparent; color:white}
.btn--ghost:hover{border-color:#64748b}

.shell{
  width:min(360px,92vw); margin-inline:auto; position:relative; 
  background:radial-gradient(120% 100% at 50% 0%, var(--shell), #fff0);
  border:6px solid #fee4c8; border-radius:28px; padding:18px; box-shadow:0 20px 60px #0006;
}
.shell__img{position:absolute; inset:0; opacity:.08; pointer-events:none}
.lcd{
  background:linear-gradient(#cbd5e1,#e2e8f0); border:4px solid #64748b; border-radius:12px;
  aspect-ratio: 5/3; display:grid; place-items:center; position:relative; overflow:hidden;
}
.lcd::after{ /* scanlines */
  content:""; position:absolute; inset:0; background:
  repeating-linear-gradient(to bottom, #0001 0 2px, transparent 2px 4px);
  pointer-events:none; mix-blend-mode:multiply;
}
.pixel-img{image-rendering: pixelated; width:140px; height:140px}
.lcd__hud{position:absolute; inset:auto 8px 8px 8px; display:flex; gap:6px; justify-content:center}
.hud-pill{font-family:"Press Start 2P"; font-size:.6rem; color:#0b1320; background:#94a3b8; padding:.25rem .5rem; border-radius:.5rem}
.controls{display:flex; gap:10px; justify-content:center; margin-top:12px}
.c-btn{font-size:1.1rem; background:#0b1320; color:#e2e8f0; border:1px solid #334155; border-radius:.7rem; padding:.45rem .8rem}
.c-btn:active{transform:translateY(1px)}
.feature-grid{display:grid; gap:14px; grid-template-columns: repeat(auto-fit,minmax(240px,1fr))}
.card{background:linear-gradient(180deg,#0b1320,#0d1625); border:1px solid #223047; border-radius:14px; padding:16px}
.card__title{font-weight:700; margin-bottom:.3rem}
.card__body{color:#cbd5e1}
.list{list-style:inside square; color:#cbd5e1}
.doc-link{display:block; padding:14px 16px; border:1px dashed #334155; border-radius:12px}
.doc-link:hover{border-style:solid; border-color:var(--reddit)}
.blog-header{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
.blog-subtitle{color:#cbd5e1; max-width:32rem}
.blog-grid{display:grid; margin-top:1.5rem; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.blog-card{position:relative; border:1px solid #223047; border-radius:16px; padding:20px; background:linear-gradient(135deg,#0c1322,#131f33)}
.blog-card::before{content:""; position:absolute; inset:12px; border-radius:14px; border:1px dashed #334155; opacity:.7; pointer-events:none}
.blog-card--feature{padding:28px}
.blog-card--feature::before{inset:16px}
.blog-card:hover{border-color:var(--reddit); box-shadow:0 0 0 2px #ff450022}
.blog-card__meta{font-size:.75rem; font-family:"Press Start 2P"; letter-spacing:.5px; text-transform:uppercase; color:#f97316}
.blog-card__title{margin-top:.8rem; font-size:1.1rem; font-weight:700}
.blog-card__excerpt{margin-top:.5rem; color:#cbd5e1}
.blog-card--feature .blog-card__title{font-size:1.45rem; line-height:1.3}
.blog-card--feature .blog-card__excerpt{font-size:1.02rem; color:#e2e8f0}
.blog-card--feature .blog-card__cta{margin-top:1.3rem}
.blog-card__cta{margin-top:1.1rem; display:inline-flex; align-items:center; gap:.4rem; color:var(--mint); font-weight:600}
.blog-card__cta::after{content:"→"; font-family:"Press Start 2P"; font-size:.55rem}
.blog-card--loading{background:repeating-linear-gradient(135deg,#0c1322 0 20px,#111b2c 20px 40px)}
.blog-empty{margin-top:1.5rem; color:#94a3b8; font-size:.9rem}
.blog-empty code{font-family:"Press Start 2P",monospace; font-size:.7rem; color:#f97316}
.blog-article{margin-top:2.5rem; max-width:65ch; font-size:1.05rem; line-height:1.75}
.blog-article h2{font-size:1.65rem; margin-top:2.4rem; margin-bottom:1rem; font-weight:700}
.blog-article h3{font-size:1.3rem; margin-top:1.8rem; margin-bottom:.7rem; font-weight:700}
.blog-article p{margin-top:1rem; color:#e2e8f0}
.blog-article a{color:var(--mint); text-decoration:underline dotted}
.blog-article ul,.blog-article ol{margin:1.2rem 0 1.2rem 1.2rem; padding:0; color:#e2e8f0}
.blog-article li{margin-bottom:.6rem}
.blog-article blockquote{margin:1.4rem 0; padding:1rem 1.2rem; border-left:4px solid var(--reddit); background:#1b293f; color:#f8fafc; border-radius:12px}
.blog-article code{font-family:"Press Start 2P",monospace; font-size:.7rem; background:#0b1320; padding:.2rem .35rem; border-radius:.4rem}
.blog-article pre{background:#0b1320; color:#f1f5f9; padding:1rem 1.2rem; border-radius:14px; overflow:auto; font-size:.85rem; line-height:1.6}
.blog-error{margin-top:2rem; padding:1.5rem; border:1px dashed #334155; border-radius:14px; background:#0b1320; color:#f8fafc; max-width:42ch}
@media (prefers-reduced-motion:no-preference){
  #pet.blink{animation:blink .8s steps(1) 1}
  .shell{animation:float 6s ease-in-out infinite}
}
@media (min-width:768px){
  .blog-card--feature{grid-column:span 2; display:grid; align-content:start; gap:.75rem}
  .blog-card--feature .blog-card__title{font-size:1.8rem}
  .blog-card--feature .blog-card__excerpt{font-size:1.08rem}
}
@keyframes blink{
  0%,49%,100%{filter:none}
  50%{filter:brightness(.6)}
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}