@font-face{font-family:ibm plex mono;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibmplexmono-400-ext.woff2)format('woff2');unicode-range:U+61,U+69,U+75,U+101,U+12B,U+16B,U+304}@font-face{font-family:ibm plex mono;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibmplexmono-400-latin.woff2)format('woff2');unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:ibm plex mono;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibmplexmono-600-ext.woff2)format('woff2');unicode-range:U+61,U+69,U+75,U+101,U+12B,U+16B,U+304}@font-face{font-family:ibm plex mono;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibmplexmono-600-latin.woff2)format('woff2');unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'press start 2p';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/pressstart2p-400-ascii.woff2)format('woff2');unicode-range:U+20-7E,U+A9,U+AE,U+B0,U+D7,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2122,U+2190-2193}@layer reset,tokens,base,layout,components,content,utilities;@layer reset{*, *::before, *::after { box-sizing: border-box; }

  :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre) {
    margin: 0;
  }

  :where(ul[class], ol[class]) { padding-inline-start: 0; list-style: none; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
  }

  :where(img, svg, video, canvas) { display: block; max-width: 100%; }
  :where(img, video) { height: auto; }
  :where(input, button, textarea, select) { font: inherit; color: inherit; }
  :where(button) { background: none; border: 0; }
}@layer tokens{:root {
    color-scheme: light dark;

    --font-display: 'Press Start 2P', 'Courier New', ui-monospace, monospace;
    --font-body: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo,
                 Consolas, 'Liberation Mono', monospace;

    
    --step--1: clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);
    --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
    --step-1:  clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
    --step-2:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --step-3:  clamp(1.4375rem, 1.27rem + 0.84vw, 1.875rem);

    
    --display--2: clamp(0.5rem, 0.49rem + 0.08vw, 0.5625rem);
    --display--1: clamp(0.625rem, 0.6rem + 0.12vw, 0.6875rem);
    --display-0:  clamp(0.6875rem, 0.65rem + 0.18vw, 0.8125rem);
    --display-1:  clamp(0.875rem, 0.78rem + 0.45vw, 1.125rem);
    --display-2:  clamp(1rem, 0.82rem + 0.9vw, 1.625rem);

    --measure: 68ch;
    --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
    --shell: 56rem;

    --px: 3px;              
    --radius: 0px;          

    
    --code-bg: #272822;
    --code-ink: #f8f8f2;
    --code-border: #3e3d32;
  }

  
  :root,
  :root[data-palette="pacman"] {
    --brand: #ffcc00;
    --brand-2: #2fb457;
    --brand-3: #d1332a;
    --brand-4: #0d7f9e;
    --on-brand: #14161c;

    --bg: #f7f4ea;
    --surface: #fffdf6;
    --surface-2: #efe9d8;
    --border: #cfc6ad;
    --border-strong: #968b70;
    --ink: #14161c;
    --ink-dim: #4b5262;
    --ink-faint: #5f6678;
    --brand-text: #6b4e00;
    --link: #0a5f7c;
    --link-hover: #8a1f14;
    --focus: #0a5f7c;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]),
    :root[data-palette="pacman"]:not([data-theme="light"]) {
      --bg: #0b0d12;
      --surface: #12151d;
      --surface-2: #1a1e29;
      --border: #2b3240;
      --border-strong: #566483;
      --ink: #e9ebf2;
      --ink-dim: #aab2c4;
      --ink-faint: #949db3;
      --brand-text: #ffcc00;
      --link: #74e0ff;
      --link-hover: #ffcc00;
      --focus: #ffcc00;
      --brand-2: #3df07a;
      --brand-3: #ff6a5e;
      --brand-4: #74e0ff;
    }
  }

  :root[data-theme="dark"],
  :root[data-palette="pacman"][data-theme="dark"] {
    --bg: #0b0d12;
    --surface: #12151d;
    --surface-2: #1a1e29;
    --border: #2b3240;
    --border-strong: #566483;
    --ink: #e9ebf2;
    --ink-dim: #aab2c4;
    --ink-faint: #949db3;
    --brand-text: #ffcc00;
    --link: #74e0ff;
    --link-hover: #ffcc00;
    --focus: #ffcc00;
    --brand-2: #3df07a;
    --brand-3: #ff6a5e;
    --brand-4: #74e0ff;
  }

  
  :root[data-palette="invader"] {
    --brand: #3df07a;
    --brand-2: #ffcc00;
    --brand-3: #d1332a;
    --brand-4: #0d7f9e;
    --on-brand: #04170c;

    --bg: #f2f6f1;
    --surface: #ffffff;
    --surface-2: #e4ece3;
    --border: #bfcdbd;
    --border-strong: #7f917d;
    --ink: #0f1a12;
    --ink-dim: #41524a;
    --ink-faint: #55675c;
    --brand-text: #116331;
    --link: #0a5f4c;
    --link-hover: #8a1f14;
    --focus: #0a5f4c;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-palette="invader"]:not([data-theme="light"]) {
      --bg: #050a07;
      --surface: #0a140d;
      --surface-2: #112019;
      --border: #22382b;
      --border-strong: #466b54;
      --ink: #e6f2e9;
      --ink-dim: #a4bdac;
      --ink-faint: #90ac9a;
      --brand-text: #3df07a;
      --link: #6ff0c0;
      --link-hover: #ffcc00;
      --focus: #3df07a;
      --brand-2: #ffcc00;
      --brand-3: #ff6a5e;
      --brand-4: #74e0ff;
    }
  }

  :root[data-palette="invader"][data-theme="dark"] {
    --bg: #050a07;
    --surface: #0a140d;
    --surface-2: #112019;
    --border: #22382b;
    --border-strong: #466b54;
    --ink: #e6f2e9;
    --ink-dim: #a4bdac;
    --ink-faint: #90ac9a;
    --brand-text: #3df07a;
    --link: #6ff0c0;
    --link-hover: #ffcc00;
    --focus: #3df07a;
    --brand-2: #ffcc00;
    --brand-3: #ff6a5e;
    --brand-4: #74e0ff;
  }

  
  :root[data-palette="mario"] {
    --brand: #d1332a;
    --brand-2: #ffcc00;
    --brand-3: #0d7f9e;
    --brand-4: #2fb457;
    --on-brand: #fff6f5;

    --bg: #fbf3ec;
    --surface: #ffffff;
    --surface-2: #f2e4d9;
    --border: #d8c3b4;
    --border-strong: #a18675;
    --ink: #1b1512;
    --ink-dim: #574a43;
    --ink-faint: #6b5c54;
    --brand-text: #a5271f;
    --link: #0a5f7c;
    --link-hover: #a5271f;
    --focus: #a5271f;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-palette="mario"]:not([data-theme="light"]) {
      --bg: #100a09;
      --surface: #19110f;
      --surface-2: #241917;
      --border: #3a2823;
      --border-strong: #805b50;
      --ink: #f4eae7;
      --ink-dim: #c0aaa3;
      --ink-faint: #ab958e;
      --brand-text: #ff8a80;
      --link: #74d0ff;
      --link-hover: #ffcc00;
      --focus: #ff8a80;
      --brand-2: #ffcc00;
      --brand-3: #74e0ff;
      --brand-4: #3df07a;
    }
  }

  :root[data-palette="mario"][data-theme="dark"] {
    --bg: #100a09;
    --surface: #19110f;
    --surface-2: #241917;
    --border: #3a2823;
    --border-strong: #805b50;
    --ink: #f4eae7;
    --ink-dim: #c0aaa3;
    --ink-faint: #ab958e;
    --brand-text: #ff8a80;
    --link: #74d0ff;
    --link-hover: #ffcc00;
    --focus: #ff8a80;
    --brand-2: #ffcc00;
    --brand-3: #74e0ff;
    --brand-4: #3df07a;
  }
}@layer base{body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.7;
    font-synthesis-weight: none;
    text-underline-offset: 0.2em;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow-wrap: break-word;
  }

  
  body[data-scanlines="on"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgb(0 0 0 / 0.035) 0 1px,
      transparent 1px 3px
    );
  }

  a { color: var(--link); text-decoration-thickness: 1px; }
  a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

  
  :focus-visible {
    outline: var(--px) solid var(--focus);
    outline-offset: var(--px);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-wrap: balance;
    color: var(--ink);
  }

  ::selection { background: var(--brand); color: var(--on-brand); }

  ::placeholder { color: var(--ink-faint); opacity: 1; }

  :root { accent-color: var(--brand-text); }
}@layer layout{.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .site-main { flex: 1 0 auto; padding-block: clamp(1.5rem, 1rem + 3vw, 3rem); }

  .skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    z-index: 10000;
  }
  .skip-link:focus {
    inset-inline-start: var(--gutter);
    inset-block-start: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: var(--brand);
    color: var(--on-brand);
    font-family: var(--font-display);
    font-size: var(--display--1);
    text-decoration: none;
  }

  
  .marquee {
    border-block-end: var(--px) solid var(--border-strong);
    background: var(--surface);
  }
  .marquee-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem clamp(0.75rem, 2vw, 1.5rem);
    padding-block: clamp(0.75rem, 2vw, 1.25rem);
  }

  .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    padding-block: 0.2rem;
    font-family: var(--font-display);
    font-size: var(--display-1);
    color: var(--brand-text);
    text-decoration: none;
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.2;
  }
  .logo:hover { color: var(--brand-text); }
  .logo-sprite { width: 1.5em; height: 1.5em; color: var(--brand); flex: none; }
  .logo-cursor {
    display: inline-block;
    width: 0.62em;
    height: 1em;
    background: var(--brand);
    animation: blink 1.1s steps(1) infinite;
    vertical-align: -0.12em;
  }
  @keyframes blink { 50% { opacity: 0; } }

  .site-nav { margin-inline-start: auto; }
  .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .site-nav a {
    display: block;
    font-family: var(--font-display);
    font-size: var(--display--1);
    color: var(--ink-dim);
    text-decoration: none;
    
    padding: 0.85rem 0.6rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .site-nav a:hover,
  .site-nav a[aria-current="page"] { color: var(--brand-text); }
  .site-nav a[aria-current="page"] {
    box-shadow: inset 0 calc(var(--px) * -1) 0 var(--brand);
  }

  
  .site-footer {
    border-block-start: var(--px) solid var(--border);
    background: var(--surface);
    color: var(--ink-dim);
    font-size: var(--step--1);
    padding-block: 1.5rem 2rem;
  }
  .site-footer a { color: var(--link); }
  .footer-grid { display: grid; gap: 1rem; }
  .build-stamp {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-display);
    font-size: var(--display--2);
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
  }
  .build-label { color: var(--brand-text); }

  .lives { display: flex; align-items: center; gap: 0.4rem; }
  .lives svg { width: 1rem; height: 1rem; color: var(--brand-3); }
  .footer-note { margin: 0; }
}@layer components{.board { container-type: inline-size; }

  .world + .world { margin-block-start: 2.5rem; }

  .world-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--display-0);
    color: var(--ink-faint);
    margin-block-end: 0.75rem;
  }
  .world-label::after {
    content: "";
    flex: 1;
    height: var(--px);
    background: repeating-linear-gradient(
      to right, var(--border) 0 var(--px), transparent var(--px) calc(var(--px) * 2)
    );
  }

  .scores { display: grid; gap: 0.15rem; }

  .score { display: grid; }

  .score-link {
    display: grid;
    grid-template-columns: 4.5ch 1fr auto;
    align-items: baseline;
    gap: 0 clamp(0.6rem, 2vw, 1.25rem);
    padding: 0.7rem 0.6rem;
    text-decoration: none;
    color: var(--ink);
    border: var(--px) solid transparent;
  }
  .score-link:hover,
  .score-link:focus-visible {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--ink);
  }

  .score-rank {
    font-family: var(--font-display);
    font-size: var(--display--1);
    font-variant-numeric: tabular-nums;
    color: var(--brand-text);
  }
  .score-title { font-size: var(--step-0); line-height: 1.45; }
  .score-link:hover .score-title { text-decoration: underline; }
  .score-date {
    font-family: var(--font-display);
    font-size: var(--display--2);
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
    white-space: nowrap;
  }
  .score-draft {
    font-family: var(--font-display);
    font-size: var(--display--2);
    color: var(--on-brand);
    background: var(--brand-2);
    padding: 0.15em 0.4em;
    margin-inline-start: 0.5em;
  }

  .score-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    padding-inline-start: calc(4.5ch + clamp(0.6rem, 2vw, 1.25rem) + 0.6rem);
    margin-block-end: 0.35rem;
  }

  
  @container (max-width: 34rem) {
    .score-link {
      grid-template-columns: 4.5ch 1fr;
      row-gap: 0.15rem;
    }
    .score-title { grid-column: 2; }
    .score-date { grid-column: 2; grid-row: 2; }
    .score-tags { padding-inline-start: 0.6rem; }
  }

  
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: var(--step--1);
    line-height: 1;
    padding: 0.4em 0.55em;
    color: var(--ink-dim);
    background: var(--surface-2);
    border: 1px solid var(--border);
    text-decoration: none;
  }
  .chip::before { content: "\25b8"; color: var(--brand-text); }
  a.chip:hover { color: var(--ink); border-color: var(--brand); background: var(--surface); }

  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    font-family: var(--font-display);
    font-size: var(--display--1);
    color: var(--ink);
    background: var(--surface-2);
    border: var(--px) solid var(--border-strong);
    text-decoration: none;
    cursor: pointer;
    
    box-shadow: var(--px) var(--px) 0 var(--border-strong);
  }
  .btn:hover { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
  .btn:active { box-shadow: none; translate: var(--px) var(--px); }

  .theme-toggle { min-width: 44px; padding-inline: 0.7rem; }
  .theme-toggle svg { width: 1.1em; height: 1.1em; }
  
  .theme-toggle .is-dark { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .is-dark { display: inline-flex; }
    :root:not([data-theme="light"]) .theme-toggle .is-light { display: none; }
  }
  :root[data-theme="dark"] .theme-toggle .is-dark { display: inline-flex; }
  :root[data-theme="dark"] .theme-toggle .is-light { display: none; }

  
  .pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-block-start: 2.5rem;
    font-family: var(--font-display);
    font-size: var(--display--1);
  }
  .pager-count { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

  
  .post-header { margin-block-end: 2rem; }
  .post-title { font-size: var(--display-2); margin-block-end: 0.75rem; }
  .page-title { font-size: var(--display-2); margin-block-end: 1.5rem; }

  .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-family: var(--font-display);
    font-size: var(--display--2);
    color: var(--ink-faint);
  }
  .post-meta time { font-variant-numeric: tabular-nums; }

  .post-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 1rem; }

  .post-footer {
    margin-block-start: 3rem;
    padding-block-start: 1.5rem;
    border-block-start: var(--px) solid var(--border);
  }

  
  .post-nav {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
  .post-nav a {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem;
    border: var(--px) solid var(--border);
    background: var(--surface);
    text-decoration: none;
    color: var(--ink);
  }
  .post-nav a:hover { border-color: var(--brand); }
  .post-nav .dir {
    font-family: var(--font-display);
    font-size: var(--display--2);
    color: var(--brand-text);
  }
  .post-nav .next { text-align: end; }

  
  .share { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
  .share-label {
    font-family: var(--font-display);
    font-size: var(--display--2);
    color: var(--ink-faint);
  }

  .social { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--ink-dim);
  }
  .social a:hover { color: var(--brand-text); }
  .social svg { width: 1.25rem; height: 1.25rem; }

  
  .attract { text-align: center; padding-block: clamp(2rem, 6vw, 5rem); }
  .attract-title { font-size: var(--display-2); margin-block-end: 1rem; }
  .attract-sub { color: var(--ink-dim); margin-block-end: 2rem; }
  .attract-sprite {
    width: clamp(3rem, 12vw, 5rem);
    height: auto;
    aspect-ratio: 1;
    margin-inline: auto;
    margin-block-end: 1.5rem;
    color: var(--brand);
  }
  .attract-sprite.alt { color: var(--brand-3); }

  .insert-coin {
    font-family: var(--font-display);
    font-size: var(--display-0);
    color: var(--brand-text);
    animation: blink 1.4s steps(1) infinite;
  }
}@layer content{.prose { max-width: var(--measure); }
  .prose > * + * { margin-block-start: 1.25em; }

  .prose h2 { font-size: var(--display-1); margin-block-start: 2.5em; }
  .prose h3 { font-size: var(--display-0); margin-block-start: 2em; }
  .prose h4 { font-size: var(--display--1); margin-block-start: 1.75em; }
  .prose :is(h2, h3, h4) + * { margin-block-start: 0.75em; }

  .prose :is(ul, ol) { padding-inline-start: 1.5em; }
  .prose li + li { margin-block-start: 0.4em; }
  .prose ul { list-style: none; }
  .prose ul > li { position: relative; }
  .prose ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.15em;
    inset-block-start: 0.62em;
    width: 0.5em;
    height: 0.5em;
    background: var(--brand);
  }
  .prose ol { list-style: decimal; }
  .prose ol::marker { font-variant-numeric: tabular-nums; }

  .prose blockquote {
    padding: 0.25em 0 0.25em 1.1em;
    border-inline-start: var(--px) solid var(--brand);
    color: var(--ink-dim);
    font-style: normal;
  }
  .prose blockquote > * + * { margin-block-start: 0.75em; }

  .prose a { overflow-wrap: anywhere; }

  .prose :not(pre) > code {
    font-size: 0.9em;
    padding: 0.15em 0.35em;
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow-wrap: anywhere;
  }

  
  .prose pre,
  .prose .highlight > pre,
  .prose .highlight {
    background: var(--code-bg);
    color: var(--code-ink);
    border: 1px solid var(--code-border);
  }
  .prose pre {
    padding: 1rem;
    overflow-x: auto;
    font-size: var(--step--1);
    line-height: 1.55;
    tab-size: 4;
  }
  .prose .highlight { border: 0; }
  .prose pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
  }
  
  .prose .highlight table { display: block; overflow-x: auto; border: 0; }
  .prose .highlight td { border: 0; padding: 0; }

  
  .prose .table-scroll { overflow-x: auto; }
  .prose > table {
    display: block;
    overflow-x: auto;
    max-inline-size: 100%;
  }
  .prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
  }
  .prose :is(th, td) {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    text-align: start;
  }
  .prose th {
    font-family: var(--font-display);
    font-size: var(--display--2);
    font-weight: 400;
    background: var(--surface-2);
  }

  .prose hr {
    height: var(--px);
    border: 0;
    background: repeating-linear-gradient(
      to right, var(--border-strong) 0 var(--px), transparent var(--px) calc(var(--px) * 3)
    );
    margin-block: 2.5em;
  }

  
  .prose figure { margin-block: 2em; }
  .prose figure img {
    border: var(--px) solid var(--border-strong);
    background: var(--surface-2);
    margin-inline: auto;
  }
  .prose figcaption {
    margin-block-start: 0.6em;
    font-size: var(--step--1);
    color: var(--ink-faint);
    line-height: 1.5;
  }
  .prose figcaption a { color: var(--link); }

  
  .fig-center { text-align: center; }
  .fig-center img { margin-inline: auto; }
  .fig-left { text-align: start; }
  .fig-left img { margin-inline-start: 0; }
  .fig-right { text-align: end; }
  .fig-right img { margin-inline-end: 0; margin-inline-start: auto; }

  .prose .video-embed {
    aspect-ratio: 16 / 9;
    width: 100%;
    border: var(--px) solid var(--border-strong);
    background: var(--code-bg);
  }
  .prose .video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

  .prose sup a { text-decoration: none; }
  .prose .footnotes {
    margin-block-start: 3em;
    padding-block-start: 1em;
    border-block-start: var(--px) solid var(--border);
    font-size: var(--step--1);
    color: var(--ink-dim);
  }

  
  .prose.justify p { text-align: justify; text-wrap: pretty; hyphens: auto; }
}@layer utilities{.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .sprite { width: 1em; height: 1em; flex: none; }
  .sprite-sheet { display: none; }
  .center { text-align: center; }
}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.logo-cursor,.insert-coin{animation:none!important;opacity:1!important}body[data-scanlines=on]::before{display:none!important}}@media print{body{background:#fff;color:#000;font-size:11pt}body[data-scanlines=on]::before{display:none}.marquee,.site-nav,.site-footer,.pager,.share,.post-nav,.theme-toggle{display:none!important}.prose{max-width:none}.prose pre{background:#f4f4f4;color:#000;border:1px solid #999}.prose a::after{content:" (" attr(href)")";font-size:9pt;word-break:break-all}}