/* PALETTE */

:root {
  --black: #000000;
  --white: #ffffff;
  --red: #ff3d40;
  --orange: #ff8f2c;
  --yellow: #ffd100;
  --green: #32cc58;
  --mint: #00d1bb;
  --teal: #00cad8;
  --cyan: #1ec9f3;
  --blue: #008cff;
  --indigo: #6768fa;
  --purple: #d332e9;
  --pink: #ff325a;
  --brown: #b18462;
  --gray: #8e8e93;
}

/* LINK */

:root {
  --red-link: #e50004;
  --orange-link: #b85600;
  --yellow-link: #876f00;
  --green-link: #208238;
  --mint-link: #007f72;
  --teal-link: #007e86;
  --cyan-link: #087c99;
  --blue-link: #0073d1;
  --indigo-link: #5b5cfa;
  --purple-link: #c117d8;
  --pink-link: #e4002d;
  --brown-link: #926849;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --red-link: #ff3d40;
    --orange-link: #ff8f2c;
    --yellow-link: #ffd100;
    --green-link: #32cc58;
    --mint-link: #00d1bb;
    --teal-link: #00cad8;
    --cyan-link: #1ec9f3;
    --blue-link: #008cff;
    --indigo-link: #6768fa;
    --purple-link: #d332e9;
    --pink-link: #ff325a;
    --brown-link: #b18462;
  }
}

:root[data-theme="dark"] {
  --red-link: #ff3d40;
  --orange-link: #ff8f2c;
  --yellow-link: #ffd100;
  --green-link: #32cc58;
  --mint-link: #00d1bb;
  --teal-link: #00cad8;
  --cyan-link: #1ec9f3;
  --blue-link: #008cff;
  --indigo-link: #6768fa;
  --purple-link: #d332e9;
  --pink-link: #ff325a;
  --brown-link: #b18462;
}
/* THEME */

:root {
  color-scheme: light;
  --ground: var(--white);
  --bg: #f8f8f9;
  --panel: #f1f1f2;
  --deep: #e8e8e9;
  --line: #dddddf;
  --fg: var(--black);
  --dim: #555558;
  --accent: var(--blue);
  --link: var(--blue-link);
  --on-accent: var(--white);
}

/* SURFACE */

:root {
  --art: var(--ground);
  --scrim: color-mix(in srgb, var(--black) 40%, transparent);
  --mix: 45%;
}

/* TYPE */

:root {
  --sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Noto Sans Symbols 2", "Noto Color Emoji";
  --serif: "Noto Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif, "Noto Sans Symbols 2", "Noto Color Emoji";
  --mono: "Noto Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, "Noto Sans Symbols 2", "Noto Color Emoji";
  --t1: 0.6875rem;
  --t2: 0.75rem;
  --t3: 0.8125rem;
  --t4: 0.9375rem;
  --t5: 1.0625rem;
  --t6: 1.25rem;
  --t7: 1.75rem;
  --lh1: 1.2;
  --lh2: 1.4;
  --lh3: 1.6;
  --text: var(--t4);
  --read-text: var(--t5);
}

/* SPACE */

:root {
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
}

/* SHAPE */

:root {
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --round: 999px;
  --hair: 1px solid var(--line);
  --ring: 2px solid var(--accent);
  --float: 0 0 0 1px var(--line), 0 8px 24px color-mix(in srgb, var(--black) 12%, transparent);
}

/* FRAME */

:root {
  --head: 3rem;
  --foot: 3rem;
  --side: 16rem;
  --sheet: 50svh;
  --read: 72ch;
  --page: 72rem;
  --frame: calc(var(--page) + var(--side));
  --touch: 44px;
}

/* LAYER */

:root {
  --z-plate: 1;
  --z-scrim: 30;
  --z-drawer: 40;
  --z-sheet: 45;
  --z-bar: 50;
  --z-lock: 54;
  --z-welcome: 55;
  --z-skip: 60;
}

/* MOTION */

:root {
  --pace: 150ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* FACE */

:root[data-font="sans"] { --face: var(--sans); }
:root[data-font="serif"] { --face: var(--serif); }
:root[data-font="mono"] { --face: var(--mono); }
:root[data-font="mrly"] { --face: "MrlyFont", var(--mono); }

/* DARK */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: var(--black);
    --bg: #070707;
    --panel: #111112;
    --deep: var(--black);
    --line: #1f1f20;
    --fg: var(--white);
    --dim: var(--gray);
    --scrim: color-mix(in srgb, var(--black) 55%, transparent);
    --float: 0 0 0 1px var(--line);
    --mix: 100%;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: var(--black);
  --bg: #070707;
  --panel: #111112;
  --deep: var(--black);
  --line: #1f1f20;
  --fg: var(--white);
  --dim: var(--gray);
  --scrim: color-mix(in srgb, var(--black) 55%, transparent);
  --float: 0 0 0 1px var(--line);
  --mix: 100%;
}
/* RESET */

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font: var(--text)/var(--lh3) var(--face, var(--sans)); min-height: 100dvh; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img, canvas, svg, video { max-width: 100%; }
svg { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[id] { scroll-margin-top: calc(var(--head) + var(--s4)); }

/* TEXT */

h1, h2, h3, h4 { line-height: var(--lh1); letter-spacing: -0.01em; font-weight: 650; }
h1 { font-size: var(--t7); }
@media (max-width: 40rem) { h1 { font-size: 1.4rem; } }
h2 { font-size: var(--t6); }
h3 { font-size: var(--t5); }
.lead { color: var(--dim); max-width: var(--read); margin-top: var(--s2); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.fine { color: var(--dim); font-size: var(--t3); }

/* LINKS */

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: var(--ring); outline-offset: 2px; border-radius: var(--r1); }

/* PROSE */

.prose { font: var(--read-text)/var(--lh3) var(--face, var(--serif)); font-variant-numeric: tabular-nums; max-width: var(--read); margin-inline: auto; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--face, var(--serif)); margin: 1.6em 0 0.6em; }
.prose h1 { font-size: 1.85em; margin-top: 0.2em; }
.prose h2 { font-size: 1.35em; }
.prose h3 { font-size: 1.1em; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose .table { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0.25em 0; }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 0.15em; }
.prose a:hover { text-decoration-color: currentColor; }
code { font-family: var(--mono); font-size: 0.85em; }
.prose code { line-height: var(--lh2); background: var(--deep); padding: 0.1em 0.3em; border-radius: var(--r1); }
.prose pre { background: var(--deep); padding: var(--s3) var(--s4); border-radius: var(--r2); overflow-x: auto; font: 0.8em/var(--lh3) var(--mono); }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose blockquote { border-left: 3px solid var(--line); padding-left: var(--s4); color: var(--dim); }
.prose figure { margin: 1.6em 0; }
.prose figure img { display: block; height: auto; margin: 0 auto; }
.prose figcaption { font-size: 0.85em; line-height: var(--lh2); color: var(--dim); margin-top: var(--s3); }
.prose .table { overflow-x: auto; }
.prose table { width: auto; border-collapse: collapse; font-size: 0.84em; line-height: var(--lh2); }
.prose th, .prose td { padding: 5px 10px; border-bottom: var(--hair); text-align: left; vertical-align: top; }
.prose th { color: inherit; font-size: inherit; font-weight: 650; border-bottom: 2px solid var(--line); }
.prose td code, .prose th code { white-space: nowrap; }
.prose .right { text-align: right; }
.prose .center { text-align: center; }
.prose .meta { color: var(--dim); font: var(--t3)/var(--lh3) var(--mono); margin: 0 0 1.4em; }
.prose .meta a { color: var(--dim); }
.prose math { font-size: 1.05em; }
.prose math[display="block"] { display: block; max-width: 100%; overflow-x: auto; margin: 1em 0; }
.prose code, .prose li, .prose p { overflow-wrap: anywhere; }

/* MOTION */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* PRINT */

@media print {
  @page { margin: 20mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: inherit; text-decoration: underline; }
  a[href^="http"]::after, a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  .prose { max-width: none; }
  .prose pre { white-space: pre-wrap; overflow: visible; background: none; padding: 0; }
  .prose code { background: none; }
  .prose math[display="block"] { overflow: visible; }
  h1, h2, h3, h4 { break-after: avoid; }
  figure, table, pre, li, math[display="block"] { break-inside: avoid; }
}
/* FACE */

.skip, .top, .subheader, .pane, .frame, .base { font-family: var(--sans); }

/* SKIP */

.skip { position: absolute; top: var(--s2); left: var(--s2); z-index: var(--z-skip); background: var(--panel); color: var(--fg); padding: var(--s2) var(--s4); border: var(--hair); border-radius: var(--r2); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* HEADER */

.top { --cell: 3px; display: grid; grid-template-columns: var(--head) minmax(0, 1fr) var(--head); align-items: center; height: var(--head); padding-inline: max(0px, calc((100% - var(--frame)) / 2)); background: var(--bg); border-bottom: var(--hair); }
.top .glyph:first-child { grid-column: 1; }
.top .glyph:last-child { grid-column: 3; }
.top .glyph { width: var(--head); height: var(--head); display: grid; place-items: center; background: none; border: 0; border-radius: 0; padding: 0; color: var(--fg); }
.top .glyph:hover { color: var(--accent); text-decoration: none; }
.top .glyph:focus-visible { outline-offset: -4px; }
.top .glyph svg, .top .mark svg { width: calc(var(--cols) * var(--cell)); height: calc(var(--rows) * var(--cell)); }
.top .mark svg { max-width: 100%; }
.top .dot { opacity: 0; transition: opacity var(--pace) var(--ease); }
.top .dot.on { opacity: 1; }
.top .mark { grid-column: 2; justify-self: center; display: flex; align-items: center; height: var(--head); min-width: 0; padding: 0 var(--s3); color: var(--fg); touch-action: manipulation; }
.top .mark:hover { color: var(--accent); text-decoration: none; }
.top .mark:focus-visible { outline-offset: -4px; }
.glyphs { fill: currentColor; shape-rendering: crispEdges; display: block; }

/* SUBHEADER */

.subheader { position: sticky; top: 0; z-index: var(--z-bar); display: flex; align-items: center; height: var(--head); padding-inline: max(0px, calc((100% - var(--frame)) / 2)); background: var(--bg); border-bottom: var(--hair); }
.subheader .crumbs { flex: 1; min-width: 0; padding-inline: var(--s2); overflow-x: auto; scrollbar-width: none; font-size: var(--t3); }
.subheader ol { display: flex; list-style: none; padding: 0; white-space: nowrap; }
.subheader li { display: flex; align-items: center; color: var(--dim); }
.subheader li + li::before { content: "/"; }
.subheader li a { padding: 0 var(--s2); line-height: var(--head); color: inherit; }
.subheader li a[aria-current] { color: var(--fg); }
.subheader li a:focus-visible { outline-offset: -4px; }
.subheader .actions { display: flex; margin-left: auto; }
.subheader .actions .icon { width: var(--head); height: var(--head); border: 0; border-radius: 0; }
.subheader .actions .icon:focus-visible { outline-offset: -4px; }
[data-pane] svg { opacity: 0.6; transition: opacity var(--pace) var(--ease); }
[data-pane]:hover svg, html[data-left="open"] [data-pane="left"] svg, html[data-right="open"] [data-pane="right"] svg { opacity: 1; }
html:not(.js) .subheader .actions [data-pane] { display: none; }

/* PANES */

.panes { display: flex; flex-direction: column; }
main { min-width: 0; width: 100%; max-width: var(--page); margin-inline: auto; padding: var(--s5) var(--s5) var(--s8); }
main:focus { outline: none; }
main:has(.heroes) { max-width: none; padding: 0; }
.panes:has(.heroes) { max-width: none; }
main:not(.wide) > .lede { max-width: var(--read); margin-inline: auto; }
.lede { margin-bottom: var(--s5); }
.pane { background: var(--bg); padding: var(--s3) var(--s2); font-size: var(--t3); }
.pane h2, .pane h3, .contents summary, .controls h3 { font: 600 var(--t1)/var(--lh1) var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin: 0; padding: var(--s3) var(--s2) var(--s2); }
.pane section + section, .pane nav + section { border-top: var(--hair); margin-top: var(--s3); }
html:not(.js) .pane:has(> .controls:empty:only-child) { display: none; }
.scrim { position: fixed; inset: var(--head) 0 0; z-index: var(--z-scrim); background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity var(--pace) var(--ease), visibility var(--pace); }

@media (max-width: 73.99rem) {
  .pane.left, html.js .pane.right { position: fixed; top: var(--head); bottom: 0; z-index: var(--z-drawer); width: min(20rem, 88vw); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transition: transform var(--pace) var(--ease), visibility var(--pace); }
  .pane.left { left: 0; border-right: var(--hair); transform: translateX(-100%); }
  html.js .pane.right { right: 0; border-left: var(--hair); transform: translateX(100%); }
  html:not(.js) .pane.right { order: -1; border-bottom: var(--hair); }
  html[data-left="open"] .pane.left, html[data-right="open"] .pane.right { transform: none; visibility: visible; transition: transform var(--pace) var(--ease); }
  html[data-left="open"] .scrim, html[data-right="open"] .scrim { opacity: 1; visibility: visible; }
}

@media (min-width: 74rem) {
  .panes { flex-direction: row; align-items: flex-start; max-width: var(--frame); margin-inline: auto; }
  .pane { flex: none; width: var(--side); position: sticky; top: var(--head); max-height: calc(100dvh - var(--head)); overflow-y: auto; overscroll-behavior: contain; }
  .pane.left { border-right: var(--hair); }
  .pane.right { border-left: var(--hair); }
  .contents details::details-content { content-visibility: visible; }
  .scrim { display: none; }
  .subheader .actions [data-pane] { display: none; }
}

@media (max-width: 40rem) {
  main { padding: var(--s4) var(--s4) var(--s7); }
}

/* TREE */

.tree, .tree ul { list-style: none; padding: 0; }
.tree ul { margin-left: var(--s2); padding-left: var(--s2); border-left: var(--hair); }
.tree a, .tree summary { display: flex; align-items: center; gap: var(--s2); min-height: 2rem; padding: var(--s1) var(--s2); border-radius: var(--r2); color: var(--dim); overflow-wrap: anywhere; }
.tree a:hover, .tree summary:hover { background: var(--panel); color: var(--fg); text-decoration: none; }
.tree a[aria-current], .tree summary:has(> a[aria-current]) { color: var(--link); font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tree .si { flex: none; width: 1.1em; text-align: center; font-size: 0.95em; }
.tree .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree summary { cursor: pointer; list-style: none; user-select: none; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before { content: ""; flex: none; width: 0.4em; height: 0.4em; margin: 0 0.3em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--pace) var(--ease); }
.tree details[open] > summary::before { transform: rotate(45deg); }
.tree summary a { padding: 0; min-height: 0; flex: 1; border-radius: 0; }
.tree summary a:hover { background: none; }
.tree summary a[aria-current] { background: none; }
.tree ul:empty { display: none; }

/* CONTENTS */

.contents summary { cursor: pointer; }
html.js .contents summary { list-style: none; pointer-events: none; }
html.js .contents summary::-webkit-details-marker { display: none; }
.contents ol { list-style: none; padding: 0; }
.contents a { display: block; padding: var(--s1) var(--s3); min-height: 2rem; color: var(--dim); border-left: 2px solid transparent; overflow-wrap: anywhere; }
.contents li.h3 a { padding-left: var(--s6); font-size: var(--t2); }
.contents a:hover { color: var(--fg); text-decoration: none; }
.contents a[aria-current] { color: var(--fg); border-left-color: var(--accent); }

/* MENU */

.menu { display: grid; gap: var(--s7); }
.menu section > h2 { border-bottom: var(--hair); padding-bottom: var(--s2); margin-bottom: var(--s4); }
.menu .gallery.grid { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); }
.menu .grid .tile h2 { font-size: var(--t3); overflow-wrap: anywhere; }
.menu form { display: grid; gap: var(--s5); }
.menu form input { width: 100%; min-height: 2.75rem; padding: 0 var(--s4); background: var(--panel); color: var(--fg); border: var(--hair); border-radius: var(--r2); font-size: var(--t5); }
.menu form p { grid-column: 1 / -1; }

/* GRID */

.gallery.grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s3); }
.grid .tile { padding: var(--s3); }
.grid .tile img { aspect-ratio: 1; image-rendering: auto; }
.grid .tile h2 { font-size: var(--t4); margin: var(--s2) 0 0; }
.grid .tile p { font-size: var(--t2); margin-top: var(--s1); }
.grid .tile .dates { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); color: var(--dim); font: var(--t1) var(--mono); margin-top: var(--s2); }
.grid .tile.plain { display: grid; align-content: center; min-height: 6rem; text-align: center; }

/* FOOTER */

.base { padding: var(--s5) var(--s4); border-top: var(--hair); text-align: center; }
.legal { margin: 0; font-size: var(--t1); line-height: var(--lh2); }

/* KNOBS */

.row { display: flex; gap: var(--s3) var(--s5); flex-wrap: wrap; align-items: center; margin: var(--s3) 0; }
.set { display: contents; }
.set[hidden] { display: none; }
label { color: var(--dim); font-size: var(--t3); display: inline-flex; gap: var(--s2); align-items: center; }
input[type=range] { width: 150px; accent-color: var(--accent); }
input[type=checkbox] { accent-color: var(--accent); width: 1rem; height: 1rem; }
input[type=checkbox][role=switch] { appearance: none; position: relative; flex: none; width: 2.25rem; height: 1.375rem; margin: 0; border-radius: var(--round); background: var(--line); cursor: pointer; transition: background-color var(--pace) var(--ease); }
input[type=checkbox][role=switch]::before { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px color-mix(in srgb, var(--black) 30%, transparent); transition: translate var(--pace) var(--ease); }
input[type=checkbox][role=switch]:checked { background: var(--accent); }
input[type=checkbox][role=switch]:checked::before { translate: 0.875rem 0; }
select, input[type=text], input[type=number] { background: var(--panel); color: var(--fg); border: var(--hair); border-radius: var(--r1); padding: var(--s1) var(--s2); min-height: 2rem; font: var(--t3) var(--mono); }
input[type=text] { width: 9ch; }
input[type=number] { width: 6ch; }
input.wide { width: 34ch; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); background: var(--panel); color: var(--fg); border: var(--hair); border-radius: var(--r2); padding: 0 var(--s4); min-height: 2.25rem; font: var(--t3) var(--sans); cursor: pointer; transition: border-color var(--pace) var(--ease); }
button:hover, .button:hover { border-color: var(--dim); text-decoration: none; }
button.primary, button.on, .button.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
button.primary, .button.primary { font-weight: 600; }
button:disabled, input[role=switch]:disabled { opacity: 0.5; cursor: not-allowed; }
button svg { flex: none; }
.icon { min-width: 2.25rem; padding: 0; background: none; border-color: transparent; color: var(--fg); }
.icon:hover { border-color: transparent; color: var(--accent); }
.tabs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.controls { padding: 0 var(--s2); }
.controls .row { flex-direction: column; align-items: stretch; gap: var(--s2); margin: 0 0 var(--s3); }
.controls label, .controls .segment { display: flex; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); min-width: 0; max-width: 100%; min-height: 2.25rem; padding: var(--s1) var(--s2) var(--s1) var(--s4); background: var(--panel); border: var(--hair); border-radius: var(--r2); color: var(--fg); font: var(--t3)/var(--lh2) var(--sans); }
.controls label > :is(select, input[type=text], input[type=number]) { flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 1.75rem; padding: 0 var(--s2); border: 0; background: none; color: var(--dim); font: var(--t3) var(--sans); text-align: right; }
.controls label > :is(input[type=text], input[type=number]) { background: var(--bg); border-radius: var(--r1); color: var(--fg); font-family: var(--mono); }
.controls label:has(> input[type=range]), .controls .segment { flex-wrap: wrap; }
.controls label > input[type=number] { width: 10ch; }
.controls label > input[type=range] { order: 1; flex: 1 0 100%; width: 100%; min-width: 0; margin: 0 0 var(--s1); }
.controls label > input[type=checkbox] { order: 1; margin-left: auto; }
.controls label > .num { margin-left: auto; color: var(--dim); font: var(--t3) var(--mono); font-variant-numeric: tabular-nums; }
.controls button, .controls .tabs, .controls .cards { max-width: 100%; }
.controls button { white-space: normal; }
.controls button > b { margin-left: auto; font-weight: 500; color: var(--dim); text-transform: capitalize; }
html:not(.js) main .controls { opacity: 0.5; pointer-events: none; }
.segment .options { display: inline-flex; margin-left: auto; gap: 2px; padding: 2px; border-radius: var(--r2); background: var(--deep); }
.segment .options label { position: relative; min-height: 1.75rem; padding: 0 var(--s3); border: 0; border-radius: var(--r1); background: none; color: var(--dim); cursor: pointer; }
.segment .options label:has(:checked) { background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--line); }
.segment .options label:has(:focus-visible) { outline: var(--ring); }
.segment .options input { position: absolute; opacity: 0; pointer-events: none; }
.formats { padding: var(--s1); border: 0; border-radius: var(--r2); background: var(--bg); color: var(--fg); box-shadow: var(--float); }
.formats:popover-open { display: grid; min-width: 8rem; }
.formats button { justify-content: flex-start; min-height: 2rem; border: 0; background: none; }
.formats button:hover { background: var(--panel); }
@supports (position-area: bottom) { .formats { inset: auto; margin: var(--s1) 0; position-area: bottom span-left; position-try-fallbacks: flip-block; } }
@supports not (position-area: bottom) { .frame .formats { inset: auto var(--s3) calc(var(--foot) + var(--s1)) auto; margin: 0; } }

@media (pointer: coarse) {
  button, .button, select, input[type=text], input[type=number], input[type=range], input[type=checkbox]:not([role=switch]), .controls label, .controls .segment, .tree a, .tree summary, .contents a { min-height: var(--touch); }
  input[type=checkbox]:not([role=switch]) { width: 1.25rem; height: 1.25rem; }
  .icon { min-width: var(--touch); }
}

@media (prefers-reduced-motion: reduce) {
  .pane * { transition-property: none; }
  .lock, [data-welcome] .top .mark { transition: none; }
}

/* KEYS */

html:has(dialog.keys[open]) { overflow: hidden; }
dialog.keys { inset: 0; width: min(24rem, calc(100vw - 2 * var(--s4))); height: fit-content; max-width: none; max-height: calc(100svh - 2 * var(--s6)); margin: auto; padding: var(--s2) var(--s2) var(--s4) var(--s4); border: 0; border-radius: var(--r3); background: var(--bg); color: var(--fg); box-shadow: var(--float); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity var(--pace) var(--ease), overlay var(--pace) allow-discrete, display var(--pace) allow-discrete; }
dialog.keys[open] { opacity: 1; }
@starting-style { dialog.keys[open] { opacity: 0; } }
dialog.keys::backdrop { background: transparent; }
.keys form { display: flex; align-items: center; justify-content: space-between; }
.keys h2 { font: 600 var(--t1)/var(--lh1) var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.keys dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s4); align-items: center; margin: var(--s2) var(--s2) 0 0; font-size: var(--t3); }
.keys dl > div { display: contents; }
.keys dt { display: flex; gap: var(--s1); }
.keys dd { margin: 0; }
.keys dd span { display: block; color: var(--dim); font-size: var(--t2); }
kbd { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.5rem; padding: 0 var(--s2); border: var(--hair); border-bottom-width: 2px; border-radius: var(--r1); background: var(--panel); color: var(--fg); font: 500 var(--t2)/1 var(--sans); }
.hints { display: flex; gap: var(--s4); margin: 0; color: var(--dim); font-size: var(--t2); white-space: nowrap; }
.hints span { display: inline-flex; align-items: center; gap: var(--s1); }

@media (hover: none) {
  .hints { display: none; }
}

/* FRAME */

.frame { position: relative; overflow: clip; display: grid; grid-template: "left canvas right" minmax(0, 1fr) "bottom bottom bottom" auto / auto minmax(0, 1fr) auto; height: calc(100svh - 2 * var(--head)); }
.frame > .canvas { grid-area: canvas; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--art); }
.frame > .canvas > canvas { display: block; width: 100%; height: 100%; }
.frame > .canvas[data-gestures] { touch-action: none; }
.frame > .bottom { grid-area: bottom; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: var(--s3); min-height: var(--foot); padding-inline: var(--s3); background: var(--bg); border-top: var(--hair); color: var(--dim); font-size: var(--t3); }
.frame .status { grid-column: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; white-space: nowrap; }
.frame .status > * { flex: none; }
.frame .status > span:last-of-type { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.frame .status > span + span { margin-left: var(--s4); }
.frame .hints { grid-column: 2; }
.frame .end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--s2); }
.frame .actions, .frame .openers { display: flex; align-items: center; gap: var(--s2); }
.frame .actions .primary { order: -1; }
.frame .done { display: none; }
.panes:has(.frame), main:has(.frame) { max-width: none; }
main:has(.frame) { padding: 0; }
.panes:has(.frame) ~ .base { display: none; }
html:has(.frame) { overscroll-behavior: none; }

@media (width < 74rem) {
  html.js .frame > .pane { position: absolute; top: 0; bottom: var(--foot); }
  .frame > .bottom { position: relative; z-index: var(--z-bar); }
}

@media (width >= 74rem) {
  .frame > .pane { position: static; max-height: none; }
  .frame > .pane.left { grid-area: left; }
  .frame > .pane.right { grid-area: right; }
  .frame .openers { display: none; }
  .frame > .bottom:not(:has(.status, .hints, .actions)) { display: none; }
}

@media (width < 40rem) {
  html.js .frame > .pane.right { top: auto; left: 0; right: 0; display: flex; flex-direction: column; width: auto; height: var(--sheet); z-index: var(--z-sheet); border-left: 0; border-top: var(--hair); box-shadow: var(--float); transform: translateY(100%); }
  html.js[data-right="open"] .frame > .pane.right { transform: none; }
  html[data-right="open"] .frame > .scrim { opacity: 0; visibility: hidden; }
  html.js[data-right="open"] .frame > .canvas { margin-bottom: var(--sheet); }
  .frame > .bottom { grid-template-columns: minmax(0, 1fr) auto max-content; }
  .frame .done { display: inline-flex; order: -1; align-self: flex-end; margin: 0 var(--s2) var(--s2); }
  .frame .hints { display: none; }
  .frame .actions .keep { display: none; }
  .frame .actions .export { gap: 0; min-width: var(--touch); padding: 0; font-size: 0; }
}

/* STATS */

.stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--dim); font-size: var(--t3); margin-top: var(--s3); }
.stats b { color: var(--fg); font-weight: 500; font-family: var(--mono); }
.chip { display: inline-block; border-radius: var(--round); padding: 0 var(--s2); font: var(--t1)/var(--lh3) var(--mono); border: var(--hair); color: var(--dim); }
.chip.proved { color: color-mix(in srgb, var(--green) var(--mix), var(--fg)); border-color: color-mix(in srgb, var(--green) var(--mix), var(--fg)); }
.chip.verified { color: color-mix(in srgb, var(--blue) var(--mix), var(--fg)); border-color: color-mix(in srgb, var(--blue) var(--mix), var(--fg)); }
.chip.conjecture { color: color-mix(in srgb, var(--yellow) var(--mix), var(--fg)); border-color: color-mix(in srgb, var(--yellow) var(--mix), var(--fg)); }
.chip.refuted { color: color-mix(in srgb, var(--orange) var(--mix), var(--fg)); border-color: color-mix(in srgb, var(--orange) var(--mix), var(--fg)); }
.badge { font: var(--t2) var(--mono); }

/* FILTER */

.filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); font-family: var(--sans); }
.filter button { gap: var(--s1); min-height: 2rem; padding: 0 var(--s2); border-radius: var(--round); }
.filter button span { color: var(--dim); font: var(--t2) var(--mono); }
.filter button.on { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--link); border-color: var(--accent); }
.filter button.on span { color: inherit; }
.filter input[type=date] { background: var(--panel); border: var(--hair); border-radius: var(--r1); padding: 0 var(--s2); min-height: 2rem; font: var(--t3) var(--mono); }
.filter output { margin-left: auto; color: var(--dim); font: var(--t3) var(--mono); white-space: nowrap; }

/* TABLES */

.scroll { overflow-x: auto; margin-top: var(--s3); }
table { width: 100%; border-collapse: collapse; font-size: var(--t3); }
th, td { text-align: left; padding: 6px 8px; border-bottom: var(--hair); vertical-align: top; }
td.num { white-space: nowrap; }
th { color: var(--dim); font-weight: 500; font-size: var(--t2); }

/* CARDS */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.card { display: block; color: inherit; background: var(--panel); border: var(--hair); border-radius: var(--r3); padding: var(--s3); cursor: pointer; transition: border-color var(--pace) var(--ease); }
.card:hover, .card.on { border-color: var(--accent); text-decoration: none; }
.card canvas, .card svg, .card img { width: 100%; height: auto; aspect-ratio: 1; display: block; border-radius: var(--r2); background: var(--art); image-rendering: pixelated; object-fit: cover; }
.card .code { font: var(--t4) var(--mono); margin-top: var(--s2); }
.card .name { font: var(--t1) var(--mono); color: var(--dim); overflow-wrap: anywhere; }

/* GALLERY */

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s4); }
.tile { color: inherit; background: var(--panel); border: var(--hair); border-radius: var(--r3); padding: var(--s4); display: block; transition: border-color var(--pace) var(--ease); }
.tile:hover { border-color: var(--accent); text-decoration: none; }
.tile canvas, .tile svg, .tile img { width: 100%; height: auto; aspect-ratio: 1.5; display: block; border-radius: var(--r2); background: var(--art); image-rendering: pixelated; object-fit: contain; }
.tile h2 { font-size: var(--t5); margin: var(--s3) 0 var(--s1); }
.tile p { color: var(--dim); font-size: var(--t3); }

/* SHELVES */

h2.group { font: var(--t2)/var(--lh1) var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); border-bottom: var(--hair); padding-bottom: 10px; margin: 34px 0 4px; }
.lede + section h2.group { margin-top: 4px; }
h2.group ~ .shelf { margin: 22px 0 12px; }
h2.group ~ .shelf h2 { font-size: var(--t5); font-weight: 650; }
h2.group ~ .shelf p { color: var(--dim); font-size: var(--t3); margin-top: 3px; max-width: 76ch; }

/* OPENER */

.opener { position: relative; margin: 0 auto var(--s6); max-width: 32rem; }
.opener img { width: 100%; height: auto; display: block; border: var(--hair); border-radius: var(--r3); background: var(--art); }
.opener canvas { position: absolute; inset: 0; width: 100%; height: 100%; border: var(--hair); border-color: transparent; border-radius: var(--r3); }

/* PRINT */

@media print {
  .skip, .top, .subheader, .pane, .scrim, .base, .lock { display: none !important; }
  .panes { display: block; }
  main { max-width: none; padding: 0; }
  .opener { max-width: 20rem; margin-bottom: 1.5rem; }
  .opener img, .tile img { border: 0; }
  .opener canvas { display: none; }
  .tile { break-inside: avoid; }
}

/* WELCOME */

@property --size { syntax: "<length>"; inherits: false; initial-value: 3px; }

.welcome { display: none; }
.fold .l { visibility: hidden; }
.fold .glint { display: none; }
[data-welcome] .subheader { display: none; }
[data-welcome] .top { position: sticky; top: 0; z-index: var(--z-welcome); container-type: inline-size; border-bottom-color: transparent; }
[data-welcome] :is(.panes, .base) { transition: opacity 400ms var(--ease); }
[data-welcome="open"] :is(.panes, .base) { opacity: 0; transition-duration: 250ms; }
[data-welcome] .top::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--line); }
[data-welcome] .top .mark { --big: round(down, min((100vw - 4rem) / var(--cols), 2rem), 1px); --peak: max(var(--big), round(down, min(40vw, 12rem) / 5, 1px)); --step: round(var(--size), 1px); position: absolute; grid-column: auto; display: block; height: auto; padding: 0; width: calc(var(--cols) * var(--step)); top: round(calc(var(--head) / 2 - 2.5 * var(--step)), 1px); left: round(calc(50% - var(--cols) / 2 * var(--step)), 1px); transition: opacity 600ms var(--ease); }
[data-welcome] .top .mark svg { width: 100%; height: auto; }

@supports (animation-timeline: scroll()) {
  [data-welcome="open"] { scrollbar-color: transparent transparent; }
  [data-welcome="open"]::-webkit-scrollbar { display: none; }
  [data-welcome="open"] .welcome { display: block; height: 100svh; }
  [data-welcome="open"] .top, [data-welcome="open"] .top::after, [data-welcome="open"] .top .glyph, [data-welcome="open"] .top .mark, [data-welcome="open"] .fold, [data-welcome="open"] .fold .l, [data-welcome="open"] .fold .x, [data-welcome="open"] .fold .glint { animation-timeline: scroll(root); animation-fill-mode: both; }
  [data-welcome="open"] .top { animation-name: welcome-ground; animation-range: 85svh 100svh; }
  [data-welcome="open"] .top::after { animation-name: welcome-draw; animation-range: 85svh 100svh; animation-timing-function: steps(16); }
  [data-welcome="open"] .top .glyph:first-child { animation-name: welcome-left; animation-range: 82svh 96svh; animation-timing-function: steps(12); }
  [data-welcome="open"] .top .glyph:last-child { animation-name: welcome-right; animation-range: 82svh 96svh; animation-timing-function: steps(12); }
  [data-welcome="open"] .top .mark { animation-name: welcome-rise; animation-range: 40svh 85svh; }
  [data-welcome="open"] .fold { animation-name: welcome-ticks; animation-range: 45svh 85svh; }
  [data-welcome="open"] .fold .l { visibility: visible; animation-name: welcome-gather, welcome-leave; animation-range: 0svh 40svh, 40svh 41svh; }
  [data-welcome="open"] .fold .x { animation-name: welcome-arrive; animation-range: 40svh 41svh; }
  [data-welcome="open"] .fold .glint { display: inline; fill: var(--bg); animation-name: welcome-fade; animation-range: 85svh 95svh; }
  [data-welcome="open"] .fold .glint rect { opacity: 0; animation: welcome-shimmer 3.2s steps(3) infinite; animation-delay: calc(var(--k) * 40ms - 3.2s); }
}

@keyframes welcome-ground { from { background: transparent; } }
@keyframes welcome-draw { from { transform: scaleX(0); } }
@keyframes welcome-fade { to { opacity: 0; } }
@keyframes welcome-leave { to { visibility: hidden; } }
@keyframes welcome-arrive { from { visibility: hidden; } }
@keyframes welcome-shimmer { 0%, 12% { opacity: 0; } 6% { opacity: 0.6; } }
@keyframes welcome-left { from { opacity: 0; translate: calc(50cqw - max(0px, (100cqw - var(--frame)) / 2) - var(--head) / 2) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes welcome-right { from { opacity: 0; translate: calc(max(0px, (100cqw - var(--frame)) / 2) + var(--head) / 2 - 50cqw) 0; } to { opacity: 1; translate: 0 0; } }

@keyframes welcome-rise {
  0% { --size: var(--big); translate: 0 round(calc(50svh - var(--head) / 2), 1px); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  22% { --size: var(--peak); translate: 0 round(calc(50svh - var(--head) / 2), 1px); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { --size: 3px; translate: 0 0; }
}

@keyframes welcome-ticks {
  0%, 10% { rotate: 0deg; animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1); }
  25%, 35% { rotate: 90deg; animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1); }
  50%, 60% { rotate: 180deg; animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1); }
  75%, 85% { rotate: 270deg; animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1); }
  100% { rotate: 360deg; }
}

@keyframes welcome-gather {
  0% { transform: translateX(0); animation-timing-function: steps(6); }
  25% { transform: translateX(calc(var(--a) * 1px)); animation-timing-function: steps(6); }
  50% { transform: translateX(calc(var(--b) * 1px)); animation-timing-function: steps(6); }
  75% { transform: translateX(calc(var(--c) * 1px)); animation-timing-function: steps(3); }
  100% { transform: translateX(calc(var(--d) * 1px)); }
}

/* LOCK */

.lock { position: fixed; inset: 0; z-index: var(--z-lock); pointer-events: none; opacity: 0; transition: opacity 800ms var(--ease); }
.lock canvas { display: block; width: 100%; height: 100%; }
[data-lock] .lock { opacity: 1; @starting-style { opacity: 0; } }
[data-lock="rest"] .top .mark { opacity: 0; }
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 700;
  src: url("/ui/fonts/sans-afc7a910.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Serif";
  font-style: normal;
  font-weight: 400 700;
  src: url("/ui/fonts/serif-9f36107f.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-weight: 400 700;
  src: url("/ui/fonts/mono-82b5f644.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/fonts/emoji.0-bce7d279.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+1f1e6-1f1ff;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/fonts/emoji.1-468c5ba4.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/fonts/emoji.2-73923554.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f507, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9d1-1f9d2, U+1f9e1, U+1fa75-1fa77, U+1faaf;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/fonts/emoji.3-2cc247dc.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d, U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4a5, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f508-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa8e-1fa8f, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/fonts/emoji.4-a835e58a.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa8a, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9, U+1fadf;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/fonts/emoji.5-e0218651.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/fonts/emoji.6-30a6e1c2.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d, U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f344-1f37f, U+1f382, U+1f52a, U+1f7e9, U+1f7eb, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadc;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/fonts/emoji.7-cd7642b4.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f6d8, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabf, U+1facd-1facf, U+1fae7;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/fonts/emoji.8-b5f75a86.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+27a1, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f430, U+1f466-1f469, U+1f46b-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa70, U+1fa82, U+1fac3-1fac5, U+1fac8, U+1faef;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/fonts/emoji.9-1bdb7519.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+200d, U+2194-2195, U+2603, U+261d, U+2620, U+2639-263a, U+2665, U+26a1, U+26c4, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f389-1f38a, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a2, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fac6, U+1fae0-1fae6, U+1fae8-1faea, U+1faef-1fafa;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/fonts/emoji.10-77829308.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+1f6d9, U+1fa8b-1fa8d, U+1facc, U+1fadd, U+1faeb;
}

@font-face {
  font-family: "MrlyFont";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/ui/fonts/mrly-bd56a0b6.woff2) format("woff2");
}

@font-face {
  font-family: "Noto Sans Symbols 2";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/ui/fonts/symbols-c9509a6c.woff2) format("woff2");
  unicode-range: U+00a0, U+00a9, U+00b7, U+00d7, U+00e4, U+00f6, U+0141, U+0144, U+0151, U+2026, U+2212, U+2218, U+22c5, U+25a1;
}
/* HOME */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.heroes, .heroes ~ .shelf { --gap: var(--s4); container-type: inline-size; display: grid; gap: var(--gap); }
.heroes { padding-block: var(--gap); }
.hero, .half { isolation: isolate; display: grid; color: var(--fg); content-visibility: auto; }
.hero:hover, .half:hover { text-decoration: none; }
.hero:focus-visible, .half:focus-visible { outline-offset: -6px; }
.hero { --across: 16; --w: round(down, min(100cqw, 3072px), 16px); --cell: calc(var(--w) / 16); grid-template: repeat(9, 1fr) / repeat(16, 1fr); width: var(--w); aspect-ratio: 16 / 9; margin-left: round(down, (100cqw - var(--w)) / 2, 1px); contain-intrinsic-size: var(--w) calc(var(--w) * 9 / 16); }
.half { --across: 8; --w: round(down, (100cqw - var(--gap)) / 2, 8px); --cell: calc(var(--w) / 8); --lead: round(down, (100cqw - 2 * var(--w) - var(--gap)) / 2, 1px); grid-template: repeat(9, 1fr) / repeat(8, 1fr); width: var(--w); aspect-ratio: 8 / 9; contain-intrinsic-size: var(--w) calc(var(--w) * 9 / 8); }
.art { grid-area: 1 / 1 / -1 / -1; display: grid; grid-template: subgrid / subgrid; }
:is(.hero, .half) .plate { z-index: var(--z-plate); display: grid; align-content: center; padding-inline: calc(var(--cell) * 0.3); background: var(--bg); box-shadow: 0 0 0 var(--cell) transparent; font-family: var(--sans); transition: box-shadow var(--pace) var(--ease); }
.hero .plate { grid-column: var(--col) / span 6; grid-row: var(--row) / span 2; }
.half .plate { grid-column: var(--col) / span 5; grid-row: var(--row) / span 1; }
:is(.hero, .half):is(:hover, :focus-visible) .plate { box-shadow: 0 0 0 var(--cell) var(--accent); }
:is(.hero, .half) .plate h2 { margin: 0; font-size: clamp(1.4rem, var(--cell) * 0.55, 3.5rem); font-weight: 650; line-height: 1.05; letter-spacing: -0.02em; }
.hero .plate p { margin: calc(var(--cell) * 0.08) 0 0; color: var(--dim); font-size: clamp(0.875rem, var(--cell) * 0.19, 1.05rem); line-height: var(--lh2); }
.art i { background: var(--k); }
.art .r { --k: var(--red); }
.art .o { --k: var(--orange); }
.art .y { --k: var(--yellow); }
.art .g { --k: var(--green); }
.art .m { --k: var(--mint); }
.art .t { --k: var(--teal); }
.art .c { --k: var(--cyan); }
.art .b { --k: var(--blue); }
.art .i { --k: var(--indigo); }
.art .p { --k: var(--purple); }
.art .k { --k: var(--pink); }
.art .n { --k: var(--brown); }
.art .a { --k: var(--accent); }
@media (orientation: portrait) { .hero { --w: round(down, min(100cqw, 3072px), 9px); --cell: calc(var(--w) / 9); grid-template: repeat(16, 1fr) / repeat(9, 1fr); aspect-ratio: 9 / 16; contain-intrinsic-size: var(--w) calc(var(--w) * 16 / 9); } .hero .art { grid-auto-flow: column; } .hero .plate { grid-column: var(--pcol) / span 7; grid-row: var(--prow) / span 3; } }
@supports (order: sibling-index()) { .art i { --n: calc(sibling-index() - 1); animation: hero-shimmer 6s linear infinite; animation-delay: calc((mod(var(--n), var(--across)) + round(down, var(--n) / var(--across))) * 60ms - 6s); } }
@keyframes hero-shimmer { 0%, 8% { background-color: var(--k); } 4% { background-color: color-mix(in oklab, var(--k), white 30%); } }
.heroes ~ .shelf, .home { max-width: var(--page); margin-inline: auto; padding-inline: var(--s5); }
.heroes ~ .shelf { grid-template-columns: repeat(2, auto); justify-content: start; }
.half:nth-child(odd) { margin-left: var(--lead); }
.home { padding-block: var(--s7) var(--s8); }
.home section > h2 { margin-bottom: var(--s4); }
.home [id] { scroll-margin-top: var(--s4); }
.home section + section { margin-top: var(--s8); }
.what { max-width: var(--read); }
.what p { margin-top: var(--s3); }

@media (max-width: 40rem) {
  .heroes ~ .shelf, .home { padding-inline: var(--s4); }
  .heroes ~ .shelf { grid-template-columns: auto; }
  .half { --w: round(down, 100cqw, 9px); --cell: calc(var(--w) / 9); --lead: round(down, (100cqw - var(--w)) / 2, 1px); margin-left: var(--lead); grid-template: repeat(8, 1fr) / repeat(9, 1fr); aspect-ratio: 9 / 8; contain-intrinsic-size: var(--w) calc(var(--w) * 8 / 9); }
  .half .art { grid-auto-flow: column; }
  .half .plate { grid-column: var(--pcol) / span 5; grid-row: var(--prow) / span 1; }
}

/* PRINT */

@media print {
  .heroes, .heroes ~ .shelf { display: none; }
  .plate.paper { break-after: avoid; }
  .plate.paper .avatar { max-width: 20rem; border: 0; }
}

/* PLATE */

.plate h1 { margin: var(--s5) 0 0; }
.plate .by { color: var(--dim); font: var(--t3)/var(--lh3) var(--mono); margin: var(--s2) 0 0; }
.plate .by + .by { margin-top: 0; }
.plate .by:last-child { margin-bottom: var(--s6); }
.plate.paper { text-align: center; }
.plate.paper .avatar { width: min(100%, 32rem); height: auto; display: block; margin: 0 auto; border: var(--hair); border-radius: var(--r3); background: var(--art); }

/* WIDGET */

.widget { margin: var(--s6) 0; }
.widget .mount:empty { min-height: 220px; border-radius: var(--r2); background: var(--art); }
.widget .bars { width: 100%; height: 220px; display: block; border-radius: var(--r2); background: var(--art); }
.widget .sheet { width: 100%; display: block; border-radius: var(--r2); background: var(--art); image-rendering: pixelated; }
.widget .sub { color: var(--dim); font-size: var(--t3); margin-top: var(--s2); }
.widget figcaption { color: var(--dim); font-size: var(--t3); margin-top: var(--s3); }

/* WIKI */

.graph .tile { padding: 0; display: grid; }
.graph .tile > a { color: inherit; padding: var(--s3); display: block; }
.graph .tile > a:hover { text-decoration: none; }
.graph .tile > a img { width: 100%; height: auto; aspect-ratio: 1; display: block; border-radius: var(--r2); background: var(--art); }
.graph .tile .needs { color: var(--dim); font: var(--t1) var(--mono); padding: 0 var(--s3) var(--s3); margin: 0; }
/* INK */

.tk-comment { color: var(--dim); }
.tk-punctuation { color: var(--dim); }
.tk-keyword { color: var(--link); }
.tk-string { color: color-mix(in srgb, var(--green) var(--mix), var(--fg)); }
.tk-string-expression { color: color-mix(in srgb, var(--green) var(--mix), var(--fg)); }
.tk-constant { color: color-mix(in srgb, var(--orange) var(--mix), var(--fg)); }
.tk-function { color: color-mix(in srgb, var(--blue) var(--mix), var(--fg)); }
.tk-parameter { color: color-mix(in srgb, var(--yellow) var(--mix), var(--fg)); }
.tk-link { color: var(--link); }

/* FACE */

.tk-bold { font-weight: 650; }
.tk-italic { font-style: italic; }
.tk-underline { text-decoration: underline; }

/* PATH */

.bar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; justify-content: space-between; font: 13px/1.7 var(--mono); padding-bottom: var(--s3); border-bottom: var(--hair); }
.bar .sep { color: var(--dim); padding: 0 var(--s1); }
.bar .tools { color: var(--dim); }
.bar b { font-weight: 600; }

/* FILES */

.files { list-style: none; margin: var(--s5) 0 0; padding: 0; border: var(--hair); border-radius: var(--r2); overflow: hidden; }
.files li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); font: 14px/1.6 var(--mono); border-top: var(--hair); }
.files li:first-child { border-top: 0; }
.files li a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files li .n { margin-left: auto; color: var(--dim); font-size: 12px; }
.files .ico { flex: none; width: 1.05rem; text-align: center; color: var(--dim); }
.files .ico::before { content: "/"; }
.readme { margin-top: var(--s6); max-width: var(--read); }

/* CODE */

.code { margin-top: var(--s5); border: var(--hair); border-radius: var(--r2); background: var(--panel); overflow: hidden; }
.code pre { margin: 0; padding: var(--s4) 0; overflow-x: auto; background: none; border: 0; }
.code code { font: 13px/1.7 var(--mono); }
.code.plain pre { padding: var(--s4); }
.code .line { display: block; }
.code .line .n { display: inline-block; box-sizing: content-box; width: 5ch; padding: 0 var(--s4) 0 var(--s3); text-align: right; color: var(--dim); text-decoration: none; user-select: none; }
.code .line .t { padding-right: var(--s4); }
.code .line:target { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.code .line:target .n { color: var(--link); }

/* GUTTER */

.code.d2 .line .n { width: 2ch; }
.code.d3 .line .n { width: 3ch; }
.code.d4 .line .n { width: 4ch; }
.code.d5 .line .n { width: 5ch; }

/* BLOB */

.shot { margin: var(--s5) 0 0; }
.shot img { max-width: 100%; height: auto; display: block; border: var(--hair); border-radius: var(--r2); background: var(--art); }
.doc { display: block; width: 100%; height: 80vh; margin-top: var(--s5); border: var(--hair); border-radius: var(--r2); }

/* PRINT */

@media print {
  .code { border: 0; background: none; }
  .code pre { white-space: pre-wrap; }
  .code .line .n { display: none; }
}
/* FACE */

@font-face {
  font-family: "seti";
  font-style: normal;
  font-weight: 400;
  src: url("/ui/seti/seti-9b09471d.woff2") format("woff2");
  font-display: block;
}

/* GLYPH */

.si {
  flex: none;
  font-family: "seti";
  font-size: 1.05rem;
  line-height: 1;
  text-align: center;
  width: 1.05rem;
}

.si::before {
  color: #d4d7d6;
  content: "\e023";
}

/* TYPES */

.si-c::before {
  color: #519aba;
  content: "\e00c";
}

.si-config::before {
  color: #6d8086;
  content: "\e019";
}

.si-css::before {
  color: #519aba;
  content: "\e01d";
}

.si-csv::before {
  color: #8dc149;
  content: "\e01e";
}

.si-cuda::before {
  color: #8dc149;
  content: "\e01f";
}

.si-favicon::before {
  color: #cbcb41;
  content: "\e02f";
}

.si-font::before {
  color: #cc3e44;
  content: "\e033";
}

.si-git::before {
  color: #41535b;
  content: "\e034";
}

.si-h::before {
  color: #a074c4;
  content: "\e00c";
}

.si-html::before {
  color: #e37933;
  content: "\e048";
}

.si-image::before {
  color: #a074c4;
  content: "\e04c";
}

.si-js::before {
  color: #cbcb41;
  content: "\e051";
}

.si-json::before {
  color: #cbcb41;
  content: "\e055";
}

.si-license::before {
  color: #cbcb41;
  content: "\e05a";
}

.si-lock::before {
  color: #8dc149;
  content: "\e05d";
}

.si-markdown::before {
  color: #519aba;
  content: "\e060";
}

.si-python::before {
  color: #519aba;
  content: "\e07b";
}

.si-react::before {
  color: #519aba;
  content: "\e07d";
}

.si-rust::before {
  color: #6d8086;
  content: "\e082";
}

.si-shell::before {
  color: #8dc149;
  content: "\e089";
}

.si-svg::before {
  color: #a074c4;
  content: "\e091";
}

.si-ts::before {
  color: #519aba;
  content: "\e099";
}