@font-face{font-family:"Lilita One";src:url("fonts/LilitaOne-Regular.woff2") format("woff2");font-display:swap}
/* Lilita One (c) Juan Montoreano, SIL Open Font License 1.1, see fonts/OFL.txt */
/* Superdoop "Ink Blob" theme: red / black / white.
   Usage: <link rel="stylesheet" href="/pwas/inkblob.css"> then add class="ink" to <body>
   (or "ink ink-dark" for white-on-black). Display text: .ink-title */
:root{
  --ink-red:#e10600; --ink-red-dark:#7a0a12; --ink-black:#111; --ink-white:#fff;
  --ink-paper:#fff7f2; --ink-muted:#6b6b6b; --ink-outline:4px;
  --ink-display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --ink-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.ink{background:var(--ink-paper);color:var(--ink-black);font-family:var(--ink-body)}
.ink-dark{background:var(--ink-black);color:var(--ink-white)}
/* Wordmark/titles: white Lilita One, slight slant, hard black drop shadow; red only as glow */
.ink-title{font-family:var(--ink-display);font-weight:400;color:var(--ink-white);
  transform:skewX(-8deg);display:inline-block;letter-spacing:.03em;line-height:1;
  text-shadow:4px 4px 0 #000,6px 6px 0 #000,0 0 18px rgba(225,6,0,.55)}
.ink-dark .ink-title{color:var(--ink-white)}
.ink-btn{display:inline-block;font-family:var(--ink-display);font-weight:900;letter-spacing:.06em;
  padding:.6em 1.4em;border:3px solid var(--ink-black);border-radius:999px;background:var(--ink-red);
  color:var(--ink-white);text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--ink-black);transform:skewX(-6deg)}
.ink-btn:active{transform:skewX(-6deg) translateY(4px);box-shadow:0 1px 0 var(--ink-black)}
.ink-btn.alt{background:var(--ink-white);color:var(--ink-black)}
.ink-card{background:var(--ink-white);color:var(--ink-black);border:3px solid var(--ink-black);
  border-radius:18px 22px 16px 24px;box-shadow:6px 6px 0 var(--ink-black);padding:16px 20px}
.ink-dark .ink-card{background:#1b1b1b;color:var(--ink-white);border-color:var(--ink-red);box-shadow:6px 6px 0 var(--ink-red)}
.ink-input{font:inherit;padding:.5em .8em;border:3px solid var(--ink-black);border-radius:12px;background:var(--ink-white);color:var(--ink-black)}
.ink-input:focus{outline:3px solid var(--ink-red);outline-offset:2px}
.ink-badge{display:inline-block;padding:.15em .6em;border:2px solid var(--ink-black);border-radius:999px;background:var(--ink-red);color:var(--ink-white);font-size:.75em;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
@media (prefers-reduced-motion:reduce){.ink-btn,.ink-btn:active{transform:none}}

/* Superdooper wordmark: no blob, just white letters with a red underline accent */
.ink-logo{display:inline-block;text-decoration:none;padding-bottom:.12em;border-bottom:4px solid var(--ink-red);
  box-shadow:0 6px 14px -6px rgba(225,6,0,.8)}
.ink-logo .ink-title{font-size:inherit}
/* Dark arcade scanlines: add class="ink-scan" to body */
.ink-scan{position:relative}
.ink-scan::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
/* Subtle film grain: add class="ink-grain" to body. Inline SVG noise, tiled 160px, fixed, no extra request. */
.ink-grain::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:49;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}