:root{--ink:#121212;--cream:#f4f1e8;--paper:#fbfaf6;--blue:#1f33ff;--blue-d:#1424c9;--blue-l:#c9d1ff}
[data-accent=green]{--blue:#137a43;--blue-d:#0b5a30;--blue-l:#cdeedb}
[data-accent=ink]{--blue:#161616;--blue-d:#000;--blue-l:#e4e0d5}
html,body{margin:0;font-family:'IBM Plex Mono',ui-monospace,monospace;background:var(--cream);color:var(--ink)}
html{scroll-behavior:smooth}
::selection{background:#121212;color:#fbfaf6}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
[hidden]{display:none!important}

/* Hover / active states (inline styles in the markup need !important to be overridden) */
.btn-paper:hover{background:#fff!important;text-decoration:none}
.btn-blue:hover{background:var(--blue-d)!important;text-decoration:none}
.btn-ghost:hover{background:rgba(255,255,255,.12)!important;text-decoration:none}
.press-2:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #121212!important}
.press-3:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #121212!important}