:root{--ink:#17151c;--acid:#dfff00;--pink:#ff62c0;--paper:#f4f1e8;--purple:#734bf6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;background-image:radial-gradient(#18151b22 1px,transparent 1px);background-size:8px 8px}a{color:inherit;text-decoration-thickness:2px;text-underline-offset:4px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--purple);outline-offset:5px}.desktop{max-width:1480px;margin:auto;padding:0 5%}header{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:30px 0}.brand{text-decoration:none;font-size:25px;font-weight:900;letter-spacing:-1px}.brand-icon{display:inline-block;width:40px;height:40px;vertical-align:middle}.brand small{display:block;font:9px monospace;letter-spacing:1.6px;margin:8px 0 0 46px}nav{display:flex;flex-wrap:wrap;gap:25px;font:bold 13px monospace}nav a{text-decoration:none}.system-bar{display:flex;justify-content:space-between;align-items:center;border-block:2px solid var(--ink);padding:10px 0;font:11px monospace;gap:15px}.system-bar i{display:inline-block;width:8px;height:8px;background:var(--purple);margin-right:6px}.system-bar button{border:0;background:transparent;text-transform:uppercase;font:11px monospace;text-decoration:underline}.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:50px;align-items:center;padding:65px 0 55px}.eyebrow{font:bold 11px monospace;letter-spacing:1.5px;margin-bottom:22px}.hero h1{font-size:clamp(48px,6.6vw,96px);line-height:.94;letter-spacing:-6px;margin:0 0 25px;font-weight:950}.hero h1 span{color:var(--purple)}.hero p{max-width:410px;line-height:1.6;font-size:16px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;background:var(--acid);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:17px 22px;text-decoration:none;font:bold 12px monospace;transition:transform .2s,box-shadow .2s}.button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}.hero-meta{font:9px monospace;letter-spacing:1px;margin-top:25px}.arcade-window{border:2px solid var(--ink);box-shadow:9px 9px 0 var(--ink);transform:rotate(2deg)}.window-bar{background:var(--pink);padding:12px 15px;border-bottom:2px solid var(--ink);font:bold 12px monospace;display:flex;justify-content:space-between}.arcade-art{height:310px;background:var(--purple);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.star{font-size:230px;color:var(--acid);line-height:1;animation:spin 30s linear infinite;z-index:1;text-shadow:6px 6px 0 var(--ink)}.orbit{position:absolute;border:1px solid #ffffff77;width:280px;height:200px;border-radius:50%;transform:rotate(-30deg)}.sticker{position:absolute;right:15px;top:18px;border:2px solid var(--ink);background:var(--acid);font:bold 12px monospace;padding:12px;transform:rotate(12deg);z-index:2}.pixel-gif{position:absolute;left:15px;top:15px;image-rendering:pixelated}.game-label{position:absolute;z-index:2;bottom:24px;text-align:center;background:var(--ink);color:white;padding:10px 20px;font:bold 14px monospace;letter-spacing:2px}.game-label span{color:var(--acid);font-size:8px}.grid-floor{position:absolute;inset:65% -30% -50%;background:linear-gradient(transparent 95%,#ffffff55 95%),linear-gradient(90deg,transparent 95%,#ffffff55 95%);background-size:30px 30px;transform:perspective(100px) rotateX(40deg)}.window-bottom{background:var(--acid);font:bold 9px monospace;padding:12px;display:flex;justify-content:space-between;border-top:2px solid}.ticker{background:var(--ink);color:var(--acid);overflow:hidden;padding:17px 0;transform:rotate(-1deg);margin:10px -1% 65px;font:bold 17px monospace;letter-spacing:2px}.ticker div{white-space:nowrap;width:max-content;animation:marquee 35s linear infinite}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.section-heading .eyebrow{margin-bottom:12px}h2{font-size:34px;letter-spacing:-1.2px;margin:0}h2 span{color:var(--purple)}.tag{border:1px solid;padding:7px 10px;font:10px monospace;display:inline-block}.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.post-card{background:var(--paper);border:2px solid;box-shadow:4px 4px 0 var(--ink);transition:transform .2s;position:relative}.post-card:hover{transform:translateY(-5px)}.card-top{font:bold 10px monospace;border-bottom:2px solid;padding:10px 14px;display:flex;justify-content:space-between;background:var(--pink)}.post-card:nth-child(3n+2) .card-top{background:var(--acid)}.post-card:nth-child(3n) .card-top{background:#b7a2ff}.card-body{padding:23px}.card-body time{font:10px monospace}.card-body h3,.card-body h2{font-size:23px;line-height:1.15;letter-spacing:-.7px;margin:18px 0}.card-body a{text-decoration:none}.card-body a:after{content:'';position:absolute;inset:0}.card-body p{font-size:13px;line-height:1.6}.read{display:block;font:bold 10px monospace;margin-top:28px}footer{margin-top:70px;padding:25px 0;display:flex;justify-content:space-between;gap:20px;border-top:2px solid;font:9px monospace}.listing{padding:60px 0}.listing h1,.article-body h1{font-size:clamp(32px,5vw,65px);letter-spacing:-2px;line-height:1.05;overflow-wrap:anywhere}.listing .post-grid{margin-top:35px}.article-window{max-width:950px;margin:55px auto;background:var(--paper);border:2px solid;box-shadow:8px 8px 0}.article-body{padding:clamp(20px,5vw,65px)}.prose{line-height:1.8;overflow-wrap:anywhere}.prose h2,.prose h3{margin:1.5em 0 .5em;line-height:1.2}.prose img,.prose video,.prose iframe{max-width:100%;height:auto}.prose pre{background:#17151c;color:#f4f1e8;padding:20px;overflow:auto;font-size:13px;line-height:1.6}.prose table{display:block;overflow:auto;border-collapse:collapse}.prose td,.prose th{border:1px solid;padding:8px}.prose blockquote,.alert{border-left:5px solid var(--purple);padding:5px 20px;background:#734bf610}.tags{display:flex;flex-wrap:wrap;gap:12px}.skip{position:absolute;top:-60px;background:var(--acid);padding:12px;z-index:5}.skip:focus{top:5px}.intro{margin:30px 0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes marquee{to{transform:translateX(-50%)}}.motion-paused *{animation:none!important;scroll-behavior:auto!important;transition:none!important}.motion-paused .pixel-gif{visibility:hidden}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}.pixel-gif{visibility:hidden}}@media(max-width:850px){.hero{gap:30px}.hero h1{letter-spacing:-3px}.arcade-art{height:270px}.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{align-items:start;flex-direction:column}}@media(max-width:600px){header{align-items:start;flex-direction:column;padding:22px 0}nav{gap:17px}.system-bar>span:nth-child(2){display:none}.hero{grid-template-columns:1fr;padding:40px 0;gap:35px}.hero h1{font-size:58px}.arcade-window{margin:0 10px 10px 0}.post-grid{grid-template-columns:1fr}.ticker{margin-bottom:40px}footer{flex-direction:column}h2{font-size:29px}}
/* GPU scene is a progressive enhancement; CSS remains the no-WebGL fallback. */
.arcade-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.webgl-ready .arcade-canvas{display:block}
.webgl-ready>.star,.webgl-ready>.orbit,.webgl-ready>.grid-floor{display:none}
.offscreen .star,.tab-hidden .star,.tab-hidden .ticker div{animation-play-state:paused}
.offscreen .pixel-gif,.tab-hidden .pixel-gif{visibility:hidden}

/* Manga panels: silhouettes live behind the content so text and focus rings
   remain unclipped. No extra animation loop or raster artwork is needed. */
:is(.button,.system-bar button){
  --button-shape:polygon(7% 0,100% 5%,94% 82%,73% 85%,68% 100%,65% 85%,0 94%);
  position:relative;isolation:isolate;background:transparent;border:0;
  box-shadow:none;padding:19px 30px 25px;max-width:100%;
  line-height:1.4;filter:drop-shadow(3px 4px 0 var(--ink));
  transition:transform .18s ease;
}
:is(.button,.system-bar button)::before,
:is(.button,.system-bar button)::after{
  content:"";position:absolute;pointer-events:none;clip-path:var(--button-shape);
}
:is(.button,.system-bar button)::before{inset:0;background:var(--ink);z-index:-2}
:is(.button,.system-bar button)::after{inset:3px;background:var(--acid);z-index:-1}
:is(.button,.system-bar button):hover{transform:translate(-2px,-3px) rotate(-1deg);box-shadow:none}
:is(.button,.system-bar button):active{transform:translate(2px,2px)}
.system-bar button{padding:9px 19px 14px;font-weight:bold;text-decoration:none;flex-shrink:0}
.system-bar button::after{background:var(--pink)}
.post-grid{gap:30px}
.post-card{
  --panel-shape:polygon(0 13px,93% 0,100% 18px,97% calc(100% - 13px),9% 100%,0 calc(100% - 21px));
  --panel-accent:var(--pink);
  isolation:isolate;background:transparent;border:0;box-shadow:none;
  padding:10px 8px 16px;filter:drop-shadow(5px 6px 0 var(--ink));
}
.post-card::before,.post-card::after{
  content:"";position:absolute;pointer-events:none;clip-path:var(--panel-shape);
}
.post-card::before{inset:0;background:var(--ink);z-index:-2}
.post-card::after{
  inset:3px;z-index:-1;background-color:var(--paper);
  background-image:radial-gradient(var(--panel-accent) .7px,transparent .8px);
  background-size:5px 5px;
}
.post-card:nth-child(3n+2){
  --panel-accent:var(--acid);
  --panel-shape:polygon(4% 0,100% 10px,97% calc(100% - 20px),90% 100%,0 calc(100% - 9px),0 19px);
}
.post-card:nth-child(3n){
  --panel-accent:#b7a2ff;
  --panel-shape:polygon(0 6px,91% 0,100% 23px,100% calc(100% - 9px),5% 100%,0 calc(100% - 26px));
}
.post-card:hover{transform:translateY(-5px) rotate(-.5deg)}
.post-card:focus-within{outline:3px dashed var(--purple);outline-offset:7px}
.post-card .card-top{
  background:var(--panel-accent);border-bottom:3px solid var(--ink);
  padding:13px 20px 11px;
  clip-path:polygon(0 8px,94% 0,100% 10px,98% 100%,0 95%);
  font-style:italic;letter-spacing:1px;
}
.post-card .card-body{padding:20px 24px 28px;background:var(--paper);margin:0 8px}
.post-card h3,.post-card h2{font-style:italic}
.post-card .read{font-style:italic;font-size:11px;letter-spacing:.5px}
.section-heading>.tag{transform:rotate(-3deg);background:var(--acid);border-width:2px;box-shadow:3px 3px 0 var(--ink)}
@media(max-width:600px){
  .post-grid{gap:26px}
  .post-card .card-body{padding:18px 16px 26px}
  .system-bar{gap:10px}
  .system-bar button{padding:9px 15px 14px}
}

/* Locally bundled bubble graffiti: inflated letters, ink contour and extrusion. */
@font-face{
  font-family:"DynaPuff";
  src:url("fonts/DynaPuff.ttf") format("truetype");
  font-weight:400 700;font-style:normal;font-display:swap;
}
.hero h1,.section-heading h2,.listing h1{
  font-family:"DynaPuff","Arial Rounded MT Bold",sans-serif;
  font-weight:700;font-style:normal;text-transform:uppercase;
  font-variation-settings:"wdth" 88;
  letter-spacing:-.045em;line-height:1.27;
  color:#00cee5;
  -webkit-text-stroke:5px var(--ink);
  paint-order:stroke fill;
  text-shadow:0 3px 0 #0088ad,2px 5px 0 var(--ink),4px 7px 0 var(--ink),5px 9px 0 var(--ink);
}
.hero h1{font-size:clamp(48px,6vw,86px);padding:4px 5px 10px 0}
.hero h1 span{display:inline-block;color:var(--pink)}
.section-heading h2{font-size:clamp(29px,3vw,42px)}
.section-heading h2,.listing h1{
  -webkit-text-stroke-width:3px;
  text-shadow:0 2px 0 #0088ad,2px 4px 0 var(--ink),3px 5px 0 var(--ink);
}
.listing h1{line-height:1.3;letter-spacing:-.035em;padding-bottom:8px}
@media(max-width:600px){
  .hero h1{font-size:clamp(36px,10.6vw,58px);-webkit-text-stroke-width:4px}
  .section-heading h2{font-size:29px}
}

/* 4 × 2 portrait atlas. Discrete poses, with long rests between gestures. */
.brand-icon{width:52px;height:52px;background-repeat:no-repeat;background-size:400% 200%;background-position:0 0}
.brand-icon img{display:block;width:100%;height:100%;object-fit:contain}
.brand-icon.sprite-ready{animation:portrait-gestures 28s steps(1,end) infinite}
.brand-icon.sprite-ready img{visibility:hidden}
.brand-icon.sprite-offscreen,.brand-icon.sprite-hidden{animation-play-state:paused}
@keyframes portrait-gestures{
  0%,19%{background-position:0 0;transform:scaleX(1)}
  20%{background-position:33.333333% 0;transform:scaleX(-1)}
  21%,24%{background-position:66.666667% 0}
  25%{background-position:33.333333% 0}
  26%,39%{background-position:0 0;transform:scaleX(1)}
  40%{background-position:0 100%}
  41%,44%{background-position:33.333333% 100%}
  45%{background-position:0 100%}
  46%,69%{background-position:0 0}
  70%{background-position:66.666667% 100%}
  72%,77%{background-position:100% 100%}
  79%{background-position:66.666667% 100%}
  81%,100%{background-position:0 0}
}
.motion-paused .brand-icon.sprite-ready{background-image:none!important}
.motion-paused .brand-icon.sprite-ready img{visibility:visible}
@media(prefers-reduced-motion:reduce){
  .brand-icon.sprite-ready{background-image:none!important}
  .brand-icon.sprite-ready img{visibility:visible}
}

.brand small{margin-left:62px}

/* Reserve the masthead's space so docking the brand never shifts content. */
.brand-slot{flex:1;min-width:0;min-height:80px}
.brand-scroll-marker{position:absolute;top:80px;left:0;width:1px;height:1px;pointer-events:none}
.brand{display:inline-block;transform-origin:top left}
.brand-pinned .brand{
  position:fixed;z-index:20;top:10px;
  left:max(5vw,calc((100vw - 1480px)/2 + 5vw));
  padding:7px 13px 7px 7px;background:var(--paper);
  border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  transform:scale(.85);
}
.brand-pinned .brand small{display:none}
@media(max-width:600px){.brand-slot{width:100%}}

/* Article headlines use bold fixed-width lettering for longer technical titles. */
.article-body h1{
  font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-weight:800;font-size:clamp(30px,4vw,52px);font-style:normal;
  line-height:1.18;letter-spacing:-.04em;text-transform:none;
  color:var(--ink);text-shadow:none;-webkit-text-stroke:0;
}

/* The homepage's primary title has its own street-art treatment. */
.hero h1.street-title{font-size:inherit;line-height:1;padding:0;margin:0 0 20px;
  text-shadow:none;-webkit-text-stroke:0}
.street-title img{display:block;width:100%;height:auto;max-width:640px}

/* Standard bold lettering with a static rainbow fill for these two headings. */
.section-heading .rainbow-title,.listing .rainbow-title{
  display:inline-block;font-family:Arial,Helvetica,sans-serif;font-weight:900;
  font-style:normal;font-variation-settings:normal;text-transform:none;
  letter-spacing:-.035em;line-height:1.15;color:var(--ink);
  -webkit-text-stroke:0;text-shadow:none;
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .section-heading .rainbow-title,.listing .rainbow-title{
    background-image:linear-gradient(100deg,#d92952 0%,#c84900 18%,#947000 34%,#168348 50%,#007bba 67%,#6745c2 83%,#b52d98 100%);
    background-clip:text;-webkit-background-clip:text;color:transparent;
  }
}
@media(forced-colors:active){
  .section-heading .rainbow-title,.listing .rainbow-title{background:none;color:CanvasText}
}