/* fonts: local woff2, same faces and fallback metrics next/font generated. */
@font-face {
font-family: fontSans;
src: url("/fonts/text/ibm-plex-sans/IBMPlexSans-Regular.woff2") format("woff2");
font-display: swap;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: fontSans;
src: url("/fonts/text/ibm-plex-sans/IBMPlexSans-Bold.woff2") format("woff2");
font-display: swap;
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: fontSans Fallback;
src: local(Arial);
ascent-override: 101.35%;
descent-override: 27.19%;
line-gap-override: 0.0%;
size-adjust: 101.13%;
}
@font-face {
font-family: fontSerif;
src: url("/fonts/text/source-serif-4/SourceSerif4-Variable.woff2") format("woff2");
font-display: swap;
font-weight: 200 900;
font-style: normal;
}
@font-face {
font-family: fontSerif;
src: url("/fonts/text/source-serif-4/SourceSerif4-VariableItalic.woff2") format("woff2");
font-display: swap;
font-weight: 200 900;
font-style: italic;
}
@font-face {
font-family: fontSerif Fallback;
src: local(Times New Roman);
ascent-override: 89.45%;
descent-override: 28.93%;
line-gap-override: 0.0%;
size-adjust: 115.81%;
}
@font-face {
font-family: fontMono;
src: url("/fonts/mono/go-mono/GoMono-Regular.woff2") format("woff2");
font-display: swap;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: fontMono;
src: url("/fonts/mono/go-mono/GoMono-Bold.woff2") format("woff2");
font-display: swap;
font-weight: 700;
font-style: normal;
}
:root {
--font-sans: "fontSans", "fontSans Fallback";
--font-serif: "fontSerif", "fontSerif Fallback", Georgia, Times New Roman, serif;
--font-mono: "fontMono";
}
/* themes: default (light/dark), solarized, plan9. Verbatim from the original. */
:root {
--white-shironeri: 0 0% 99.5%;
--white-gofun: 0 0% 99%;
--white-shiraha: 0 0% 98.5%;
--white-kinu: 0 0% 98%;
--white-washi: 0 0% 97.5%;
--white-hakushi: 0 0% 97%;
--white-unohana: 0 0% 96.5%;
--white-shiro: 0 0% 96%;
--white-byakuji: 0 0% 95.5%;
--white-hakuji: 0 0% 95%;
--white-kinari: 0 0% 94.5%;
--white-kaihaku: 0 0% 94%;
--white-soan: 0 0% 93.5%;
--white-tanpaku: 0 0% 93%;
--white-torinoko: 0 0% 92.5%;
--white-keshizumi: 0 0% 92%;
--white-shikkui: 0 0% 91.5%;
--white-nibai: 0 0% 91%;
--white-susu: 0 0% 90.5%;
--white-ginnezumi: 0 0% 90%;
--white-hai: 0 0% 89%;
--white-sunago: 0 0% 88%;
--white-kabe: 0 0% 87.5%;
--white-dobai: 0 0% 87%;
--white-nibi: 0 0% 86%;
--white-ishi: 0 0% 85%;
--white-namari: 0 0% 84%;
--white-nezumi: 0 0% 83%;
--white-fushi: 0 0% 82%;
--white-kurohai: 0 0% 80%;
}
:root {
--black-sumi: 0 0% 4%;
--black-kuro: 0 0% 5%;
--black-ro: 0 0% 6%;
--black-shikkoku: 0 0% 7%;
--black-karasu: 0 0% 8%;
--black-tetsu: 0 0% 9%;
--black-nurebairo: 0 0% 9.5%;
--black-kokutan: 0 0% 10%;
--black-binroji: 0 0% 11%;
--black-kenpo: 0 0% 12%;
--black-doburo: 0 0% 13%;
--black-yukoku: 0 0% 14%;
--black-nanban: 0 0% 15%;
--black-konro: 0 0% 16%;
--black-kurogane: 0 0% 17%;
--black-fukisei: 0 0% 18%;
--black-kachiiro: 0 0% 19%;
--black-yonezumi: 0 0% 20%;
--black-senryo: 0 0% 22%;
--black-usuzumi: 0 0% 24%;
--black-haiiro: 0 0% 26%;
--black-beniaka: 0 0% 28%;
--black-susutake: 0 0% 30%;
--black-rikyu: 0 0% 32%;
--black-aonibi: 0 0% 34%;
--black-nando: 0 0% 36%;
--black-kitsune: 0 0% 38%;
--black-rikyunezumi: 0 0% 40%;
--black-shinonome: 0 0% 42%;
--black-oboro: 0 0% 44%;
}
:root {
--background: 0 0% 100%;
--card: var(--white-gofun);
--popover: var(--white-hakushi);
--secondary: var(--white-ginnezumi);
--muted: var(--white-keshizumi);
--accent: var(--white-shiro);
--foreground: 0 0% 20%;
--card-foreground: 0 0% 15%;
--popover-foreground: 0 0% 25%;
--secondary-foreground: 0 0% 30%;
--muted-foreground: 0 0% 50%;
--accent-foreground: 0 0% 20%;
--primary: 0 0% 10%;
--primary-foreground: 0 0% 95%;
--destructive: 0 70% 55%;
--destructive-foreground: 0 0% 98%;
--border: var(--white-sunago);
--input: var(--white-ginnezumi);
--ring: 0 0% 40%;
--link: rgba(10, 132, 255, 1);
--link-visited: #af52de;
--radius: 0.5rem;
--radius-square: 0;
}
@media (prefers-color-scheme: dark) {
html:not(.dark):not(.light) {
color-scheme: dark;
}
html:not(.dark):not(.light),
html:not(.dark):not(.light) * {
--background: var(--black-shikkoku);
--card: var(--black-tetsu);
--popover: var(--black-tetsu);
--secondary: var(--black-yukoku);
--muted: var(--black-kenpo);
--accent: var(--black-kenpo);
--foreground: 0 0% 98%;
--card-foreground: 0 0% 98%;
--popover-foreground: 0 0% 98%;
--secondary-foreground: 0 0% 98%;
--muted-foreground: 0 0% 70%;
--accent-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--destructive: 0 62% 30%;
--destructive-foreground: 0 0% 98%;
--border: var(--black-kurogane);
--input: var(--black-kurogane);
--ring: 0 0% 83%;
}
}
.dark, [data-theme="dark"] {
--background: var(--black-shikkoku);
--card: var(--black-tetsu);
--popover: var(--black-tetsu);
--secondary: var(--black-yukoku);
--muted: var(--black-kenpo);
--accent: var(--black-kenpo);
--foreground: 0 0% 98%;
--card-foreground: 0 0% 98%;
--popover-foreground: 0 0% 98%;
--secondary-foreground: 0 0% 98%;
--muted-foreground: 0 0% 70%;
--accent-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--destructive: 0 62% 30%;
--destructive-foreground: 0 0% 98%;
--border: var(--black-kurogane);
--input: var(--black-kurogane);
--ring: 0 0% 83%;
}
:root {
--pastel-amber-bg: 45 40% 96%;
--pastel-amber-subtle: 45 35% 93%;
--pastel-amber-border: 45 28% 86%;
--pastel-amber-mid: 45 25% 75%;
--pastel-amber-fg: 45 30% 45%;
--pastel-amber-fg-bold: 45 35% 35%;
--pastel-amber-bright: 45 45% 55%;
--pastel-orange-bg: 25 40% 96%;
--pastel-orange-subtle: 25 35% 93%;
--pastel-orange-border: 25 28% 86%;
--pastel-orange-mid: 25 25% 75%;
--pastel-orange-fg: 25 30% 45%;
--pastel-orange-fg-bold: 25 35% 35%;
--pastel-orange-bright: 25 45% 55%;
--pastel-red-bg: 0 40% 96%;
--pastel-red-subtle: 0 35% 93%;
--pastel-red-border: 0 28% 86%;
--pastel-red-mid: 0 25% 75%;
--pastel-red-fg: 0 30% 45%;
--pastel-red-fg-bold: 0 35% 35%;
--pastel-red-bright: 0 45% 55%;
--pastel-rose-bg: 345 40% 96%;
--pastel-rose-subtle: 345 35% 93%;
--pastel-rose-border: 345 28% 86%;
--pastel-rose-mid: 345 25% 75%;
--pastel-rose-fg: 345 30% 45%;
--pastel-rose-fg-bold: 345 35% 35%;
--pastel-rose-bright: 345 45% 55%;
--pastel-purple-bg: 270 40% 96%;
--pastel-purple-subtle: 270 35% 93%;
--pastel-purple-border: 270 28% 86%;
--pastel-purple-mid: 270 25% 75%;
--pastel-purple-fg: 270 30% 45%;
--pastel-purple-fg-bold: 270 35% 35%;
--pastel-purple-bright: 270 45% 55%;
--pastel-lavender-bg: 255 40% 96%;
--pastel-lavender-subtle: 255 35% 93%;
--pastel-lavender-border: 255 28% 86%;
--pastel-lavender-mid: 255 25% 75%;
--pastel-lavender-fg: 255 30% 45%;
--pastel-lavender-fg-bold: 255 35% 35%;
--pastel-lavender-bright: 255 45% 55%;
--pastel-indigo-bg: 230 40% 96%;
--pastel-indigo-subtle: 230 35% 93%;
--pastel-indigo-border: 230 28% 86%;
--pastel-indigo-mid: 230 25% 75%;
--pastel-indigo-fg: 230 30% 45%;
--pastel-indigo-fg-bold: 230 35% 35%;
--pastel-indigo-bright: 230 45% 55%;
--pastel-blue-bg: 213 40% 96%;
--pastel-blue-subtle: 213 35% 93%;
--pastel-blue-border: 213 28% 86%;
--pastel-blue-mid: 213 25% 75%;
--pastel-blue-fg: 213 30% 45%;
--pastel-blue-fg-bold: 213 35% 35%;
--pastel-blue-bright: 213 45% 55%;
--pastel-cyan-bg: 190 40% 96%;
--pastel-cyan-subtle: 190 35% 93%;
--pastel-cyan-border: 190 28% 86%;
--pastel-cyan-mid: 190 25% 75%;
--pastel-cyan-fg: 190 30% 45%;
--pastel-cyan-fg-bold: 190 35% 35%;
--pastel-cyan-bright: 190 45% 55%;
--pastel-teal-bg: 170 40% 96%;
--pastel-teal-subtle: 170 35% 93%;
--pastel-teal-border: 170 28% 86%;
--pastel-teal-mid: 170 25% 75%;
--pastel-teal-fg: 170 30% 45%;
--pastel-teal-fg-bold: 170 35% 35%;
--pastel-teal-bright: 170 45% 55%;
--pastel-green-bg: 142 40% 96%;
--pastel-green-subtle: 142 35% 93%;
--pastel-green-border: 142 28% 86%;
--pastel-green-mid: 142 25% 75%;
--pastel-green-fg: 142 30% 45%;
--pastel-green-fg-bold: 142 35% 35%;
--pastel-green-bright: 142 45% 55%;
--pastel-lime-bg: 100 40% 96%;
--pastel-lime-subtle: 100 35% 93%;
--pastel-lime-border: 100 28% 86%;
--pastel-lime-mid: 100 25% 75%;
--pastel-lime-fg: 100 30% 45%;
--pastel-lime-fg-bold: 100 35% 35%;
--pastel-lime-bright: 100 45% 55%;
--pastel-amber: var(--pastel-amber-bg);
--pastel-amber-foreground: var(--pastel-amber-fg-bold);
--pastel-blue: var(--pastel-blue-bg);
--pastel-blue-foreground: var(--pastel-blue-fg-bold);
--pastel-green: var(--pastel-green-bg);
--pastel-green-foreground: var(--pastel-green-fg-bold);
--pastel-red: var(--pastel-red-bg);
--pastel-red-foreground: var(--pastel-red-fg-bold);
--pastel-purple: var(--pastel-purple-bg);
--pastel-purple-foreground: var(--pastel-purple-fg-bold);
}
@media (prefers-color-scheme: dark) {
html:not(.dark):not(.light),
html:not(.dark):not(.light) * {
--pastel-amber-bg: 45 12% 16%; --pastel-amber-subtle: 45 14% 20%; --pastel-amber-border: 45 16% 28%; --pastel-amber-mid: 45 20% 40%; --pastel-amber-fg: 45 24% 62%; --pastel-amber-fg-bold: 45 28% 74%; --pastel-amber-bright: 45 32% 84%;
--pastel-orange-bg: 25 12% 16%; --pastel-orange-subtle: 25 14% 20%; --pastel-orange-border: 25 16% 28%; --pastel-orange-mid: 25 20% 40%; --pastel-orange-fg: 25 24% 62%; --pastel-orange-fg-bold: 25 28% 74%; --pastel-orange-bright: 25 32% 84%;
--pastel-red-bg: 0 12% 16%; --pastel-red-subtle: 0 14% 20%; --pastel-red-border: 0 16% 28%; --pastel-red-mid: 0 20% 40%; --pastel-red-fg: 0 24% 62%; --pastel-red-fg-bold: 0 28% 74%; --pastel-red-bright: 0 32% 84%;
--pastel-rose-bg: 345 12% 16%; --pastel-rose-subtle: 345 14% 20%; --pastel-rose-border: 345 16% 28%; --pastel-rose-mid: 345 20% 40%; --pastel-rose-fg: 345 24% 62%; --pastel-rose-fg-bold: 345 28% 74%; --pastel-rose-bright: 345 32% 84%;
--pastel-purple-bg: 270 12% 16%; --pastel-purple-subtle: 270 14% 20%; --pastel-purple-border: 270 16% 28%; --pastel-purple-mid: 270 20% 40%; --pastel-purple-fg: 270 24% 62%; --pastel-purple-fg-bold: 270 28% 74%; --pastel-purple-bright: 270 32% 84%;
--pastel-lavender-bg: 255 12% 16%; --pastel-lavender-subtle: 255 14% 20%; --pastel-lavender-border: 255 16% 28%; --pastel-lavender-mid: 255 20% 40%; --pastel-lavender-fg: 255 24% 62%; --pastel-lavender-fg-bold: 255 28% 74%; --pastel-lavender-bright: 255 32% 84%;
--pastel-indigo-bg: 230 12% 16%; --pastel-indigo-subtle: 230 14% 20%; --pastel-indigo-border: 230 16% 28%; --pastel-indigo-mid: 230 20% 40%; --pastel-indigo-fg: 230 24% 62%; --pastel-indigo-fg-bold: 230 28% 74%; --pastel-indigo-bright: 230 32% 84%;
--pastel-blue-bg: 213 12% 16%; --pastel-blue-subtle: 213 14% 20%; --pastel-blue-border: 213 16% 28%; --pastel-blue-mid: 213 20% 40%; --pastel-blue-fg: 213 24% 62%; --pastel-blue-fg-bold: 213 28% 74%; --pastel-blue-bright: 213 32% 84%;
--pastel-cyan-bg: 190 12% 16%; --pastel-cyan-subtle: 190 14% 20%; --pastel-cyan-border: 190 16% 28%; --pastel-cyan-mid: 190 20% 40%; --pastel-cyan-fg: 190 24% 62%; --pastel-cyan-fg-bold: 190 28% 74%; --pastel-cyan-bright: 190 32% 84%;
--pastel-teal-bg: 170 12% 16%; --pastel-teal-subtle: 170 14% 20%; --pastel-teal-border: 170 16% 28%; --pastel-teal-mid: 170 20% 40%; --pastel-teal-fg: 170 24% 62%; --pastel-teal-fg-bold: 170 28% 74%; --pastel-teal-bright: 170 32% 84%;
--pastel-green-bg: 142 12% 16%; --pastel-green-subtle: 142 14% 20%; --pastel-green-border: 142 16% 28%; --pastel-green-mid: 142 20% 40%; --pastel-green-fg: 142 24% 62%; --pastel-green-fg-bold: 142 28% 74%; --pastel-green-bright: 142 32% 84%;
--pastel-lime-bg: 100 12% 16%; --pastel-lime-subtle: 100 14% 20%; --pastel-lime-border: 100 16% 28%; --pastel-lime-mid: 100 20% 40%; --pastel-lime-fg: 100 24% 62%; --pastel-lime-fg-bold: 100 28% 74%; --pastel-lime-bright: 100 32% 84%;
--pastel-amber: var(--pastel-amber-bg); --pastel-amber-foreground: var(--pastel-amber-bright);
--pastel-blue: var(--pastel-blue-bg); --pastel-blue-foreground: var(--pastel-blue-bright);
--pastel-green: var(--pastel-green-bg); --pastel-green-foreground: var(--pastel-green-bright);
--pastel-red: var(--pastel-red-bg); --pastel-red-foreground: var(--pastel-red-bright);
--pastel-purple: var(--pastel-purple-bg); --pastel-purple-foreground: var(--pastel-purple-bright);
}
}
.dark, [data-theme="dark"] {
--pastel-amber-bg: 45 12% 16%;
--pastel-amber-subtle: 45 14% 20%;
--pastel-amber-border: 45 16% 28%;
--pastel-amber-mid: 45 20% 40%;
--pastel-amber-fg: 45 24% 62%;
--pastel-amber-fg-bold: 45 28% 74%;
--pastel-amber-bright: 45 32% 84%;
--pastel-orange-bg: 25 12% 16%;
--pastel-orange-subtle: 25 14% 20%;
--pastel-orange-border: 25 16% 28%;
--pastel-orange-mid: 25 20% 40%;
--pastel-orange-fg: 25 24% 62%;
--pastel-orange-fg-bold: 25 28% 74%;
--pastel-orange-bright: 25 32% 84%;
--pastel-red-bg: 0 12% 16%;
--pastel-red-subtle: 0 14% 20%;
--pastel-red-border: 0 16% 28%;
--pastel-red-mid: 0 20% 40%;
--pastel-red-fg: 0 24% 62%;
--pastel-red-fg-bold: 0 28% 74%;
--pastel-red-bright: 0 32% 84%;
--pastel-rose-bg: 345 12% 16%;
--pastel-rose-subtle: 345 14% 20%;
--pastel-rose-border: 345 16% 28%;
--pastel-rose-mid: 345 20% 40%;
--pastel-rose-fg: 345 24% 62%;
--pastel-rose-fg-bold: 345 28% 74%;
--pastel-rose-bright: 345 32% 84%;
--pastel-purple-bg: 270 12% 16%;
--pastel-purple-subtle: 270 14% 20%;
--pastel-purple-border: 270 16% 28%;
--pastel-purple-mid: 270 20% 40%;
--pastel-purple-fg: 270 24% 62%;
--pastel-purple-fg-bold: 270 28% 74%;
--pastel-purple-bright: 270 32% 84%;
--pastel-lavender-bg: 255 12% 16%;
--pastel-lavender-subtle: 255 14% 20%;
--pastel-lavender-border: 255 16% 28%;
--pastel-lavender-mid: 255 20% 40%;
--pastel-lavender-fg: 255 24% 62%;
--pastel-lavender-fg-bold: 255 28% 74%;
--pastel-lavender-bright: 255 32% 84%;
--pastel-indigo-bg: 230 12% 16%;
--pastel-indigo-subtle: 230 14% 20%;
--pastel-indigo-border: 230 16% 28%;
--pastel-indigo-mid: 230 20% 40%;
--pastel-indigo-fg: 230 24% 62%;
--pastel-indigo-fg-bold: 230 28% 74%;
--pastel-indigo-bright: 230 32% 84%;
--pastel-blue-bg: 213 12% 16%;
--pastel-blue-subtle: 213 14% 20%;
--pastel-blue-border: 213 16% 28%;
--pastel-blue-mid: 213 20% 40%;
--pastel-blue-fg: 213 24% 62%;
--pastel-blue-fg-bold: 213 28% 74%;
--pastel-blue-bright: 213 32% 84%;
--pastel-cyan-bg: 190 12% 16%;
--pastel-cyan-subtle: 190 14% 20%;
--pastel-cyan-border: 190 16% 28%;
--pastel-cyan-mid: 190 20% 40%;
--pastel-cyan-fg: 190 24% 62%;
--pastel-cyan-fg-bold: 190 28% 74%;
--pastel-cyan-bright: 190 32% 84%;
--pastel-teal-bg: 170 12% 16%;
--pastel-teal-subtle: 170 14% 20%;
--pastel-teal-border: 170 16% 28%;
--pastel-teal-mid: 170 20% 40%;
--pastel-teal-fg: 170 24% 62%;
--pastel-teal-fg-bold: 170 28% 74%;
--pastel-teal-bright: 170 32% 84%;
--pastel-green-bg: 142 12% 16%;
--pastel-green-subtle: 142 14% 20%;
--pastel-green-border: 142 16% 28%;
--pastel-green-mid: 142 20% 40%;
--pastel-green-fg: 142 24% 62%;
--pastel-green-fg-bold: 142 28% 74%;
--pastel-green-bright: 142 32% 84%;
--pastel-lime-bg: 100 12% 16%;
--pastel-lime-subtle: 100 14% 20%;
--pastel-lime-border: 100 16% 28%;
--pastel-lime-mid: 100 20% 40%;
--pastel-lime-fg: 100 24% 62%;
--pastel-lime-fg-bold: 100 28% 74%;
--pastel-lime-bright: 100 32% 84%;
--pastel-amber: var(--pastel-amber-bg);
--pastel-amber-foreground: var(--pastel-amber-bright);
--pastel-blue: var(--pastel-blue-bg);
--pastel-blue-foreground: var(--pastel-blue-bright);
--pastel-green: var(--pastel-green-bg);
--pastel-green-foreground: var(--pastel-green-bright);
--pastel-red: var(--pastel-red-bg);
--pastel-red-foreground: var(--pastel-red-bright);
--pastel-purple: var(--pastel-purple-bg);
--pastel-purple-foreground: var(--pastel-purple-bright);
}
/* =============================================================================
* SOLARIZED THEME
* =============================================================================
*
* Based on Ethan Schoonover's Solarized color scheme - a carefully designed
* sixteen color palette for use with terminal and GUI applications.
* Known for its balanced contrast and pleasant color relationships.
*
* -----------------------------------------------------------------------------
* @file solarized.css
* @author Kris Yotam
* @created 2026-01-01
* @license MIT
* @see https://ethanschoonover.com/solarized/
* -----------------------------------------------------------------------------
*
* COLOR PALETTE
* -------------
* Base colors (monotone backgrounds):
* base03 #002b36 hsl(193, 100%, 11%) - darkest background
* base02 #073642 hsl(192, 90%, 14%) - dark background
* base01 #586e75 hsl(194, 14%, 40%) - dark content/comments
* base00 #657b83 hsl(195, 13%, 45%) - dark primary content
* base0 #839496 hsl(186, 8%, 55%) - light primary content
* base1 #93a1a1 hsl(180, 7%, 60%) - light content/comments
* base2 #eee8d5 hsl(44, 44%, 87%) - light background
* base3 #fdf6e3 hsl(44, 87%, 94%) - lightest background
*
* Accent colors:
* yellow #b58900 hsl(45, 100%, 35%)
* orange #cb4b16 hsl(18, 89%, 44%)
* red #dc322f hsl(1, 71%, 52%)
* magenta #d33682 hsl(331, 64%, 52%)
* violet #6c71c4 hsl(237, 45%, 59%)
* blue #268bd2 hsl(205, 82%, 49%)
* cyan #2aa198 hsl(175, 59%, 40%)
* green #859900 hsl(68, 100%, 30%)
*
* ============================================================================= */
/* =============================================================================
* SOLARIZED LIGHT
* =============================================================================
* Warm, paper-like backgrounds with dark blue-gray text.
* Uses base3/base2 for backgrounds, base00/base01 for text.
* ============================================================================= */
.theme-solarized {
/* Primary background - warm cream (base3) */
--background: 44 87% 94%;
/* Card surfaces - slightly darker cream (base2) */
--card: 44 44% 87%;
--popover: 44 44% 87%;
/* Secondary surfaces - between base2 and base1 */
--secondary: 44 30% 82%;
--muted: 44 35% 85%;
--accent: 44 50% 90%;
/* Primary text - dark blue-gray (base00) */
--foreground: 195 13% 45%;
/* Card text - slightly darker (base01) */
--card-foreground: 194 14% 40%;
--popover-foreground: 195 13% 45%;
/* Secondary text - lighter (base0) */
--secondary-foreground: 186 8% 55%;
/* Muted text - comments tone (base1) */
--muted-foreground: 180 7% 60%;
--accent-foreground: 194 14% 40%;
/* Primary - Solarized blue */
--primary: 205 82% 49%;
--primary-foreground: 44 87% 94%;
/* Destructive - Solarized red */
--destructive: 1 71% 52%;
--destructive-foreground: 44 87% 94%;
--border: 44 20% 75%;
--input: 44 35% 85%;
--ring: 175 59% 40%;
--radius: 0.5rem;
}
/* =============================================================================
* SOLARIZED DARK
* =============================================================================
* Deep blue-teal backgrounds with light gray text.
* Uses base03/base02 for backgrounds, base0/base1 for text.
* ============================================================================= */
.theme-solarized.dark {
/* Primary background - deep teal (base03) */
--background: 193 100% 11%;
/* Card surfaces - slightly lighter (base02) */
--card: 192 90% 14%;
--popover: 192 90% 14%;
--secondary: 192 70% 18%;
--muted: 192 80% 16%;
--accent: 192 60% 20%;
/* Primary text - light gray (base0) */
--foreground: 186 8% 55%;
--card-foreground: 186 8% 55%;
--popover-foreground: 186 8% 55%;
/* Secondary text - lighter (base1) */
--secondary-foreground: 180 7% 60%;
/* Muted text - comments tone (base01) */
--muted-foreground: 194 14% 40%;
--accent-foreground: 180 7% 60%;
/* Primary - Solarized cyan for dark mode */
--primary: 175 59% 40%;
--primary-foreground: 193 100% 11%;
/* Destructive - Solarized orange (more visible on dark) */
--destructive: 18 89% 44%;
--destructive-foreground: 193 100% 11%;
--border: 192 50% 22%;
--input: 192 80% 16%;
--ring: 45 100% 35%;
}
/* =============================================================================
* PLAN 9 THEME
* =============================================================================
*
* Derived from the Plan 9 from Bell Labs color palette. Colors taken from
* libdraw constants (plan9port / 9front), the acme text editor, and rio
* window manager. Cross-referenced with Kris's plan9.lua (nvim) and
* plan9.json (Zed) theme definitions.
*
* -----------------------------------------------------------------------------
* @file plan9.css
* @author Kris Yotam
* @created 2026-05-20
* @license MIT
* @see https://plan9.io/plan9/
* -----------------------------------------------------------------------------
*
* COLOR PALETTE (libdraw constants)
* ----------------------------------
* Surfaces:
* acme body #ffffea hsl(60, 100%, 96%) - warm cream (text body)
* acme tag #eaffff hsl(180, 100%, 96%) - cool cyan (tag bar)
* darkyellow #eeee9e hsl(60, 70%, 78%) - selection / highlight
* paleyellow #ffffaa hsl(60, 100%, 83%) - bright highlight
* palegreen #aaffaa hsl(120, 100%, 83%) - success surface
* palebluegreen #aaffff hsl(180, 100%, 83%) - info surface
*
* Text & accents:
* black #000000 hsl(0, 0%, 0%) - primary text
* scroll #444444 hsl(0, 0%, 27%) - secondary text
* medblue #000099 hsl(240, 100%, 30%) - keywords / links
* greyblue #005dbb hsl(210, 100%, 37%) - active links
* bluegreen #008888 hsl(180, 100%, 27%) - functions / ring
* darkgreen #448844 hsl(120, 33%, 40%) - types / success
* b2 red #aa0000 hsl(0, 100%, 33%) - mouse button 2 / destructive
* b3 green #006600 hsl(120, 100%, 20%) - mouse button 3
* purpleblue #8888cc hsl(240, 39%, 67%) - specials
* yellowgreen #99994c hsl(60, 33%, 45%) - muted accent
*
* ============================================================================= */
/* =============================================================================
* PLAN 9 LIGHT
* =============================================================================
* Acme body cream with cyan tag bar accents. Black text.
* The characteristic two-tone warmth of working in acme.
* ============================================================================= */
.theme-plan9 {
/* Primary background - acme body cream (#ffffea) */
--background: 60 100% 96%;
/* Card surfaces - acme tag bar cyan (#eaffff) */
--card: 180 100% 96%;
/* Popover surfaces - slightly muted tag bar */
--popover: 180 80% 95%;
/* Secondary surfaces - darkyellow (#eeee9e) */
--secondary: 60 70% 78%;
--muted: 60 60% 90%;
/* Accent surfaces - palebluegreen tint */
--accent: 180 60% 93%;
--foreground: 0 0% 0%;
--card-foreground: 0 0% 0%;
--popover-foreground: 0 0% 5%;
/* Secondary text - scroll grey (#444444) */
--secondary-foreground: 0 0% 27%;
/* Muted text - yellowgreen (#99994c) */
--muted-foreground: 60 33% 45%;
--accent-foreground: 0 0% 5%;
/* Primary - medblue (#000099) */
--primary: 240 100% 30%;
--primary-foreground: 60 100% 96%;
/* Destructive - B2 red (#aa0000) */
--destructive: 0 100% 33%;
--destructive-foreground: 60 100% 96%;
/* Border - darkyellow, muted (#eeee9e at lower sat) */
--border: 60 40% 80%;
--input: 60 60% 90%;
/* Focus ring - bluegreen (#008888) */
--ring: 180 100% 27%;
/* Links - medblue (#000099) */
--link: #000099;
/* Visited - purpleblue (#8888cc) */
--link-visited: #8888cc;
--radius: 0.25rem;
}
/* =============================================================================
* PLAN 9 DARK
* =============================================================================
* Inverted Plan 9: deep warm-black backgrounds, cream-tinted text.
* Preserves the two-tone body/tag relationship in dark tones.
* Like rio on a CRT with the lights off.
* ============================================================================= */
.theme-plan9.dark {
--background: 60 15% 7%;
/* Card surfaces - dark with cyan hint (inverted tag bar) */
--card: 180 15% 10%;
--popover: 180 12% 11%;
--secondary: 60 15% 16%;
--muted: 60 10% 13%;
--accent: 180 12% 14%;
--foreground: 60 50% 90%;
--card-foreground: 60 50% 90%;
--popover-foreground: 60 40% 88%;
--secondary-foreground: 60 20% 70%;
--muted-foreground: 60 15% 50%;
--accent-foreground: 180 30% 80%;
--primary: 210 100% 55%;
--primary-foreground: 60 15% 7%;
--destructive: 0 80% 50%;
--destructive-foreground: 60 15% 7%;
--border: 60 12% 20%;
--input: 60 10% 13%;
/* Focus ring - brighter bluegreen for visibility */
--ring: 180 70% 40%;
}
/* reset: Tailwind 3 preflight as compiled for the original, plus its base layer. */
*, :before, :after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
:before, :after {
--tw-content: "";
}
html, :host {
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
line-height: 1.5;
}
body {
line-height: inherit;
margin: 0;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-feature-settings: normal;
font-variation-settings: normal;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
button, input, optgroup, select, textarea {
font-feature-settings: inherit;
font-variation-settings: inherit;
font-family: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0;
}
button, select {
text-transform: none;
}
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
-webkit-appearance: button;
background-color: #0000;
background-image: none;
}
:-moz-focusring {
outline: auto;
}
:-moz-ui-invalid {
box-shadow: none;
}
progress {
vertical-align: baseline;
}
::-webkit-inner-spin-button {
height: auto;
}
::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
}
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol, ul, menu {
margin: 0;
padding: 0;
list-style: none;
}
dialog {
padding: 0;
}
textarea {
resize: vertical;
}
input::placeholder, textarea::placeholder {
opacity: 1;
color: #9ca3af;
}
button, [role="button"] {
cursor: pointer;
}
:disabled {
cursor: default;
}
img, svg, video, canvas, audio, iframe, embed, object {
vertical-align: middle;
display: block;
}
img, video {
max-width: 100%;
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
* {
border-color: hsl(var(--border));
}
@media print {
* {
box-shadow: none;
background: none;
border: none;
border-radius: 0;
}
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
font-feature-settings: "rlig" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
}
.content,
.essays-content {
font-family: var(--font-serif), 'Source Serif 4', Georgia, serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: hsl(var(--foreground));
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
font-variant-numeric: oldstyle-nums proportional-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
hyphens: auto;
/* Establish BFC so floated wiki cards are contained — prevents Citation
(which follows .content as a sibling) from being overlapped. */
display: flow-root;
}
.content h1, .essays-content h1,
.content h2, .essays-content h2,
.content h3, .essays-content h3,
.content h4, .essays-content h4 {
font-family: var(--font-serif), 'Source Serif 4', Georgia, serif;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.02em;
color: hsl(var(--foreground));
font-variant-numeric: lining-nums;
margin-top: 2rem;
margin-bottom: 0.5rem;
scroll-margin-top: 5rem;
/* Establish BFC so the underline (border-bottom) stops at a floated
sibling's edge instead of running underneath it. */
display: flow-root;
}
.content h1, .essays-content h1 {
font-size: 1.625rem;
border-bottom: 1px solid hsl(var(--foreground) / 0.25);
padding-bottom: 0.25rem;
}
.content h2, .essays-content h2 {
font-size: 1.5rem;
border-bottom: 1px solid hsl(var(--foreground) / 0.15);
padding-bottom: 0.125rem;
}
.content h3, .essays-content h3 {
font-size: 1.25rem;
border-bottom: 1px solid hsl(var(--foreground) / 0.1);
padding-bottom: 0.125rem;
}
.content h4, .essays-content h4 {
font-size: 1.125rem;
font-weight: 600;
}
.content > h1:first-child, .essays-content > h1:first-child,
.content > h2:first-child, .essays-content > h2:first-child,
.content > h3:first-child, .essays-content > h3:first-child {
margin-top: 0;
}
.content p, .essays-content p {
margin: 0 0 1rem 0;
padding: 0;
}
.content p:last-child, .essays-content p:last-child {
margin-bottom: 0;
}
.content p:empty, .essays-content p:empty {
display: none;
}
.content blockquote,
.essays-content blockquote {
margin: 1.5rem 0;
padding: 0 0 0 1.25em;
border: none;
border-left: 3px solid hsl(var(--foreground) / 0.2);
background: none;
color: hsl(var(--muted-foreground));
font-size: 0.95em;
line-height: 1.65;
overflow: visible;
}
.content blockquote blockquote,
.essays-content blockquote blockquote {
border-left-color: hsl(var(--foreground) / 0.35);
}
.content blockquote blockquote blockquote,
.essays-content blockquote blockquote blockquote {
border-left-color: hsl(var(--foreground) / 0.5);
}
.content blockquote p,
.essays-content blockquote p {
margin: 0;
text-align: left;
}
.content blockquote cite,
.essays-content blockquote cite {
display: block;
margin-top: 0.75rem;
font-size: 0.9em;
font-style: normal;
color: hsl(var(--muted-foreground));
}
.content a, .essays-content a {
color: hsl(var(--foreground));
text-decoration: none;
transition: opacity 0.15s ease;
}
.content a:hover, .essays-content a:hover {
opacity: 0.7;
}
.content ul, .essays-content ul,
.content ol, .essays-content ol {
margin: 1rem 0 1.25rem 0;
padding-left: 1.5rem;
}
.content ul, .essays-content ul {
list-style-type: circle;
}
.content ul ul, .essays-content ul ul {
list-style-type: disc;
}
.content ul ul ul, .essays-content ul ul ul {
list-style-type: circle;
}
.content ul ul ul ul, .essays-content ul ul ul ul {
list-style-type: disc;
}
.content ol, .essays-content ol {
list-style-type: decimal;
}
.content li, .essays-content li {
margin-bottom: 0.5rem;
line-height: 1.6;
}
.content li:last-child, .essays-content li:last-child {
margin-bottom: 0;
}
.content li > ul, .essays-content li > ul,
.content li > ol, .essays-content li > ol {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.content code, .essays-content code {
font-family: var(--font-mono), 'Go Mono', ui-monospace, Menlo, monospace;
font-size: 0.875em;
background: hsl(var(--muted));
padding: 0.15em 0.4em;
border-radius: 0;
white-space: nowrap;
}
.content pre, .essays-content pre {
font-family: var(--font-mono), 'Go Mono', ui-monospace, Menlo, monospace;
margin: 1.5rem 0;
padding: 1rem;
overflow-x: auto;
border: 1px solid hsl(var(--border));
border-radius: 0;
background: hsl(var(--muted) / 0.5);
font-size: 13px;
line-height: 1.45;
white-space: pre;
overflow-x: auto;
}
.content pre code, .essays-content pre code {
font-family: inherit;
background: transparent;
padding: 0;
font-size: inherit;
white-space: pre;
}
.content table, .essays-content table {
width: 100%;
border-collapse: collapse;
font-size: 0.95em;
line-height: 1.5;
margin: 1.5rem 0;
font-variant-numeric: lining-nums tabular-nums;
}
.content thead, .essays-content thead {
border-bottom: 2px solid hsl(var(--border));
}
.content th, .essays-content th,
.content td, .essays-content td {
border: 1px solid hsl(var(--border));
padding: 0.75rem;
text-align: left;
font-variant-numeric: lining-nums tabular-nums;
}
.content th, .essays-content th {
background: hsl(var(--muted) / 0.5);
font-weight: 600;
}
.content tbody tr:nth-child(even), .essays-content tbody tr:nth-child(even) {
background: hsl(var(--muted) / 0.2);
}
.content .wiki-card table,
.essays-content .wiki-card table {
margin: 0;
border-collapse: collapse;
font-size: inherit;
line-height: inherit;
}
.content .wiki-card th,
.content .wiki-card td,
.essays-content .wiki-card th,
.essays-content .wiki-card td {
border: none;
padding: 0.5rem;
background: transparent;
}
.content .wiki-card tbody tr:nth-child(even),
.essays-content .wiki-card tbody tr:nth-child(even) {
background: transparent;
}
.content .table-wrapper, .essays-content .table-wrapper {
max-width: 100%;
overflow-x: auto;
margin: 1.5rem 0;
border: 1px solid hsl(var(--border) / 0.5);
border-radius: 4px;
}
.content img, .essays-content img {
display: block;
max-width: 100%;
height: auto;
margin: 1.5rem auto;
border-radius: 4px;
}
.content figure, .essays-content figure {
margin: 1.5rem 0;
}
.content figcaption, .essays-content figcaption {
font-size: 0.9em;
text-align: center;
color: hsl(var(--muted-foreground));
margin-top: 0.5rem;
font-style: italic;
}
.content hr, .essays-content hr {
border: none;
border-top: 1px solid hsl(var(--border));
margin: 2rem 0;
}
.content dl, .essays-content dl {
margin: 1rem 0 1.5rem;
}
.content dt, .essays-content dt {
font-weight: 600;
margin-top: 1rem;
}
.content dt:first-child, .essays-content dt:first-child {
margin-top: 0;
}
.content dd, .essays-content dd {
margin-left: 1.5rem;
margin-bottom: 0.5rem;
color: hsl(var(--muted-foreground));
}
.content input[type="checkbox"], .essays-content input[type="checkbox"] {
margin-right: 0.5rem;
vertical-align: middle;
}
.content ul:has(input[type="checkbox"]), .essays-content ul:has(input[type="checkbox"]) {
list-style: none;
padding-left: 0;
}
.content .footnotes, .essays-content .footnotes {
border-top: 1px solid hsl(var(--border));
margin-top: 3rem;
padding-top: 1.5rem;
font-size: 0.9em;
}
.content .footnotes ol, .essays-content .footnotes ol {
padding-left: 1.5rem;
}
.content .footnotes li, .essays-content .footnotes li {
margin-bottom: 0.5rem;
}
.content .footnote-ref, .essays-content .footnote-ref {
font-size: 0.75em;
vertical-align: super;
line-height: 0;
text-decoration: none;
}
.content .footnote-backref, .essays-content .footnote-backref {
font-size: 0.8em;
text-decoration: none;
margin-left: 0.25rem;
}
.content abbr, .essays-content abbr {
text-decoration: underline dotted;
cursor: help;
}
.content kbd, .essays-content kbd {
font-family: var(--font-mono), 'Go Mono', ui-monospace, Menlo, monospace;
font-size: 0.85em;
background: hsl(var(--muted));
padding: 0.15em 0.4em;
border-radius: 3px;
border: 1px solid hsl(var(--border));
box-shadow: inset 0 -1px 0 hsl(var(--border));
}
.content strong, .essays-content strong {
font-weight: 600;
}
.content em, .essays-content em {
font-style: italic;
}
.content small, .essays-content small {
font-size: 0.875em;
color: hsl(var(--muted-foreground));
}
.content sup, .essays-content sup,
.content sub, .essays-content sub {
font-size: 0.75em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.content sup, .essays-content sup {
top: -0.5em;
}
.content sub, .essays-content sub {
bottom: -0.25em;
}
.content details, .essays-content details {
margin: 1rem 0;
padding: 0.75rem 1rem;
background: hsl(var(--muted) / 0.3);
border: 1px solid hsl(var(--border));
border-radius: 4px;
}
.content summary, .essays-content summary {
cursor: pointer;
font-weight: 500;
}
.content details[open] summary, .essays-content details[open] summary {
margin-bottom: 0.75rem;
}
/* =============================================================================
* MULTI-COLUMN LISTS (gwern.net .columns)
* Usage in MDX: \n\n- item\n- item\n\n
* ============================================================================= */
.content .columns ul, .essays-content .columns ul,
.content .columns ol, .essays-content .columns ol {
column-width: 18em;
column-gap: 3em;
text-align: left;
}
.content .columns li, .essays-content .columns li {
break-inside: avoid;
}
/* globals: the original globals.css, minus Tailwind directives. */
:root {
--site-gutter: 1rem;
--site-block-start: 2rem;
--site-block-end: 0;
--content-measure: 42rem;
--home-measure: 48rem;
--wide-measure: 75rem;
}
@media (min-width: 768px) {
:root {
--site-gutter: 2rem;
--site-block-start: 3rem;
}
}
@media (min-width: 1200px) {
:root {
--site-gutter: 3rem;
--site-block-start: 4rem;
}
}
@media (min-width: 1800px) {
:root {
--site-gutter: 4rem;
--site-block-start: 5rem;
--content-measure: 44rem;
--home-measure: 52rem;
}
}
.site-shell,
.content-shell,
.home-shell,
.wide-shell {
width: min(100%, var(--shell-measure));
margin-inline: auto;
padding-inline: var(--site-gutter);
padding-block-start: var(--site-block-start);
padding-block-end: var(--site-block-end);
}
.content-shell { --shell-measure: var(--content-measure); }
.home-shell {
--shell-measure: var(--home-measure);
--site-block-start: 1.9rem;
}
.wide-shell { --shell-measure: var(--wide-measure); }
.home-accordion-panel {
animation: home-accordion-enter 180ms ease-out;
transform-origin: top;
}
@keyframes home-accordion-enter {
from {
opacity: 0;
transform: translateY(-0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.home-accordion-panel {
animation: none;
}
}
.code-block pre {
margin: 0;
padding: 0;
overflow-x: auto;
}
.code-container span[style*="userSelect"] {
user-select: none !important;
border-right: 1px solid rgba(127, 127, 127, 0.25) !important;
margin-right: 1em !important;
padding-right: 1em !important;
opacity: 0.6 !important;
min-width: 3em !important;
text-align: right !important;
display: inline-block !important;
position: sticky;
left: 0;
background: inherit;
}
.code-container span[style*="display: block"] {
display: flex !important;
min-width: 100% !important;
}
.code-container span[style*="display: block"] > span:last-child {
padding-left: 1em !important;
flex: 1 !important;
min-width: 0 !important;
}
.code-container .linenumber {
min-width: 3em !important;
max-width: 3em !important;
text-align: right !important;
padding-right: 1em !important;
border-right: 1px solid rgba(127, 127, 127, 0.25) !important;
margin-right: 1em !important;
opacity: 0.6 !important;
user-select: none !important;
position: sticky;
left: 0;
background: inherit;
}
.code-container::-webkit-scrollbar {
}
.code-container::-webkit-scrollbar-track {
background: transparent;
}
.code-container::-webkit-scrollbar-thumb {
background-color: rgba(127, 127, 127, 0.4);
border-radius: 3px;
}
.hover-card-root { position: relative; }
.hover-card-content {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: calc(100% + 4px);
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.hover-card-root:hover > .hover-card-content,
.hover-card-root:focus-within > .hover-card-content {
display: block;
opacity: 1;
pointer-events: auto;
}
.tooltip-root { position: relative; }
.tooltip-content {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: calc(100% + 4px);
white-space: nowrap;
pointer-events: none;
}
.tooltip-root:hover > .tooltip-content,
.tooltip-root:focus-within > .tooltip-content {
display: block;
pointer-events: auto;
}
pre code.hljs {
display: block;
padding: 0;
overflow-x: auto;
font-family: var(--font-mono), 'Go Mono', ui-monospace, Menlo, monospace;
font-size: 0.875rem;
line-height: 1.5;
}
:is(.light) pre code.hljs {
color: #24292e;
background: transparent;
}
:is(.dark) pre code.hljs {
color: #e1e4e8;
background: transparent;
}
pre::-webkit-scrollbar {
}
pre::-webkit-scrollbar-track {
background: transparent;
}
pre::-webkit-scrollbar-thumb {
background-color: rgba(127, 127, 127, 0.4);
border-radius: 3px;
}
.book-content {
font-family: var(--font-serif), 'Source Serif 4', Georgia, serif;
font-size: 1.125rem;
line-height: 1.75;
max-width: 65ch;
margin: 0 auto;
}
.book-content p {
margin: 0;
padding: 0;
}
.no-outline {
outline: none !important;
border-style: solid;
transition: transform 0.3s ease, box-shadow 0.3s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.book-content h1,
.book-content h2,
.book-content h3,
.book-content h4,
.book-content h5,
.book-content h6 {
font-family: var(--font-serif), 'Source Serif 4', Georgia, serif;
font-weight: 600;
margin-top: 2em;
margin-bottom: 1em;
letter-spacing: -0.015em;
}
.book-content a {
color: inherit;
text-decoration: underline dotted;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
.book-content blockquote {
font-style: italic;
border-left: 3px solid currentColor;
padding-left: 1em;
margin-left: 0;
}
.book-content pre,
.book-content code {
font-family: var(--font-mono), 'Go Mono', ui-monospace, Menlo, monospace;
background-color: hsl(var(--muted));
padding: 0.2em 0.4em;
border-radius: 3px;
}
.book-content img {
max-width: 100%;
height: auto;
display: block;
margin: 2em auto;
}
.command-menu-open::after {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(5px);
z-index: 40;
}
.pe-details > summary {
list-style: none;
cursor: pointer;
}
.pe-details > summary::-webkit-details-marker {
display: none;
}
.pe-details > summary::marker {
display: none;
content: "";
}
.card-3d {
perspective: 1000px;
-webkit-perspective: 1000px;
height: 100%;
width: 100%;
}
.card-3d-inner {
display: grid;
grid-template-areas: "stack";
width: 100%;
height: 100%;
transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.card-3d:hover .card-3d-inner,
.card-3d.flip .card-3d-inner {
transform: rotateY(180deg);
}
.card-3d-front,
.card-3d-back {
grid-area: stack;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
width: 100%;
height: 100%;
}
.card-3d-back {
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.component {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
overflow-x: hidden;
display: flex;
justify-content: center;
}
.component > div {
width: 100%;
max-width: calc(100% - 2rem);
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 768px) {
.component > div {
max-width: calc(100% - 4rem);
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1200px) {
.component > div {
max-width: 1200px;
}
}
.component * {
max-width: none !important;
}
html {
scrollbar-gutter: stable;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
background: hsl(var(--muted-foreground) / 0.3);
border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / 0.5);
}
html.show-scrollbar {
overflow-y: scroll;
}
html.hide-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}
html.hide-scrollbar::-webkit-scrollbar {
width: 0;
background: transparent;
display: none;
}
span[data-nimg] {
display: block !important;
}
span[data-nimg]:not(.dropcap-image-wrapper span) {
display: block !important; /* kill inline‑block spacing */
margin: 0 !important;
padding: 0 !important;
vertical-align: top !important;
}
img:not(.dropcap-image) {
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
vertical-align: top !important;
}
.dropcap-image-wrapper {
float: left;
margin-right: 0.25em !important;
margin-top: 0.15em !important;
margin-bottom: 0 !important;
margin-left: -0.05em !important;
line-height: 0;
padding: 0 !important;
display: inline-block !important;
clear: none !important;
}
.dropcap-image-wrapper::after {
content: none !important;
display: none !important;
}
/* Ensure dropcap Next.js Image wrapper spans stay inline */
.dropcap-image-wrapper span[data-nimg] {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: top !important;
line-height: 0 !important;
}
.dropcap-image {
background: transparent;
border: none;
user-select: none;
margin: 0 !important;
padding: 0 !important;
display: inline-block !important; /* override global img block display */
vertical-align: top !important;
}
.dropcap-tabs.dropcap-image-wrapper {
margin-right: 0.2em !important;
margin-bottom: 0 !important;
}
.dropcap-image {
outline: none !important;
box-shadow: none !important;
opacity: 1 !important;
background: transparent !important;
}
.dark .dropcap-image.dark\:invert {
filter: invert(1) !important;
}
.dropcap-image {
width: 6em !important;
height: 6em !important;
object-fit: contain;
}
.post-content {
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
.post-content p {
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
margin: 0 !important;
padding: 0 !important;
}
.post-content p:has(.dropcap-image-wrapper),
.post-content p .dropcap-image-wrapper {
margin: 0 !important;
padding: 0 !important;
}
.post-content .dropcap-image-wrapper + p,
.post-content p:has(.dropcap-image-wrapper) + p {
margin-top: 0 !important;
}
img.logo-light,
span[data-nimg] img.logo-light {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
.dark img.logo-light,
.dark span[data-nimg] img.logo-light {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
img.logo-dark,
span[data-nimg] img.logo-dark {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
.dark img.logo-dark,
.dark span[data-nimg] img.logo-dark {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
.dark [data-note-index] {
border-color: hsl(0 0% 20%) !important;
}
.dark [data-note-index] .border,
.dark [data-note-index] .bg-border {
border-color: hsl(0 0% 20%) !important;
background-color: hsl(0 0% 20%) !important;
}
.dark [data-note-index] .border-t {
border-top-color: hsl(0 0% 20%) !important;
}
.dark [data-note-index] .border-dotted {
border-color: hsl(0 0% 35%) !important;
}
.katex-display {
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin: 0.5em auto !important;
max-width: 100%;
padding: 0 !important;
}
.katex-inline {
display: inline;
}
.katex-display .katex {
display: inline-block;
}
.problem-content .katex-display,
.proof-content .katex-display,
p .katex-display {
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin: 0.5em auto !important;
padding: 0 !important;
}
[class*="-content"] h1,
[class*="-content"] h2,
[class*="-content"] h3 {
position: relative;
}
[class*="-content"] h1[data-underline-width],
[class*="-content"] h2[data-underline-width],
[class*="-content"] h3[data-underline-width] {
overflow: hidden;
}
[class*="-content"] h1[data-underline-width]::after,
[class*="-content"] h2[data-underline-width]::after,
[class*="-content"] h3[data-underline-width]::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: calc(100% - var(--underline-width, 100%));
height: 1px;
background: var(--background, #fff);
z-index: 2;
}
.dark [class*="-content"] h1[data-underline-width]::after,
.dark [class*="-content"] h2[data-underline-width]::after,
.dark [class*="-content"] h3[data-underline-width]::after {
background: hsl(var(--background));
}
@keyframes spin-left {
100% { transform: rotate(-360deg); }
}
@keyframes spin-right {
100% { transform: rotate(360deg); }
}
/* Matches the 600ms timeout in settings.tsx so the class never drops mid-turn. */
.animate-spin-left {
animation: spin-left 600ms cubic-bezier(.22,1,.36,1) both;
}
.animate-spin-right {
animation: spin-right 600ms cubic-bezier(.22,1,.36,1) both;
}
@media (prefers-reduced-motion: reduce) {
.animate-spin-left, .animate-spin-right { animation: none; }
}
.footer-cube-wrapper {
perspective: 200px;
height: 16px;
overflow: hidden;
}
.footer-cube {
position: relative;
width: 100%;
height: 16px;
transform-style: preserve-3d;
transform: rotateX(0deg);
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.footer-cube[data-flipped="true"] {
transform: rotateX(-90deg);
}
.footer-cube-face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 16px;
backface-visibility: hidden;
display: flex;
align-items: center;
}
.footer-cube-front {
transform: rotateX(0deg) translateZ(8px);
}
.footer-cube-bottom {
transform: rotateX(90deg) translateZ(8px);
}
.link-icon-img {
filter: none;
transition: filter 150ms ease, opacity 150ms ease;
display: block;
}
.dark .link-icon-img {
filter: invert(1) grayscale(1) brightness(2) contrast(1.1);
}
@media (prefers-color-scheme: dark) {
.link-icon-img {
filter: invert(1) grayscale(1) brightness(2) contrast(1.1);
}
}
.comment-content {
font-family: var(--font-sans), 'IBM Plex Sans', system-ui, sans-serif;
font-size: 0.875rem;
line-height: 1.6;
color: hsl(var(--foreground));
}
.comment-content h1,
.comment-content h2,
.comment-content h3,
.comment-content h4,
.comment-content h5,
.comment-content h6 {
font-family: var(--font-sans), 'IBM Plex Sans', system-ui, sans-serif;
font-weight: 600;
line-height: 1.3;
margin-top: 1.25em;
margin-bottom: 0.5em;
padding-bottom: 0.3em;
border-bottom: 1px solid hsl(var(--border));
}
.comment-content h1:first-child,
.comment-content h2:first-child,
.comment-content h3:first-child,
.comment-content h4:first-child,
.comment-content h5:first-child,
.comment-content h6:first-child {
margin-top: 0;
}
.comment-content h1 { font-size: 1.5em; }
.comment-content h2 { font-size: 1.3em; }
.comment-content h3 { font-size: 1.15em; }
.comment-content h4 { font-size: 1em; border-bottom: none; }
.comment-content h5 { font-size: 0.95em; border-bottom: none; }
.comment-content h6 { font-size: 0.9em; border-bottom: none; color: hsl(var(--muted-foreground)); }
.comment-content p {
margin: 0 0 0.75em 0;
}
.comment-content p:last-child {
margin-bottom: 0;
}
.comment-content a {
color: hsl(217, 91%, 60%);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease;
}
.comment-content a:hover {
border-bottom-color: hsl(217, 91%, 60%);
}
.dark .comment-content a {
color: hsl(217, 91%, 70%);
}
.dark .comment-content a:hover {
border-bottom-color: hsl(217, 91%, 70%);
}
.comment-content ul,
.comment-content ol {
margin: 0.5em 0 0.75em 0;
padding-left: 1.5em;
}
.comment-content ul {
list-style-type: disc;
}
.comment-content ol {
list-style-type: decimal;
}
.comment-content li {
margin-bottom: 0.25em;
}
.comment-content li:last-child {
margin-bottom: 0;
}
.comment-content li > ul,
.comment-content li > ol {
margin-top: 0.25em;
margin-bottom: 0;
}
.comment-content ul.contains-task-list {
list-style: none;
padding-left: 0;
}
.comment-content li.task-list-item {
display: flex;
align-items: flex-start;
gap: 0.5em;
}
.comment-content li.task-list-item input[type="checkbox"] {
margin-top: 0.3em;
}
.comment-content blockquote {
margin: 0.75em 0;
padding: 0.5em 1em;
border-left: 3px solid hsl(var(--border));
background: hsl(var(--muted) / 0.3);
color: hsl(var(--muted-foreground));
font-style: italic;
}
.comment-content blockquote p {
margin: 0;
}
.comment-content blockquote blockquote {
margin-top: 0.5em;
}
.comment-content code:not(pre code) {
font-family: var(--font-mono), 'Go Mono', ui-monospace, Menlo, monospace;
font-size: 0.85em;
padding: 0.15em 0.4em;
background: hsl(var(--muted));
border-radius: 3px;
white-space: nowrap;
}
.comment-content pre {
margin: 0.75em 0;
padding: 0.75em 1em;
background: hsl(var(--muted));
border: 1px solid hsl(var(--border));
border-radius: 4px;
overflow-x: auto;
font-size: 0.85em;
}
.comment-content pre code {
font-family: var(--font-mono), 'Go Mono', ui-monospace, Menlo, monospace;
background: none;
padding: 0;
white-space: pre;
word-break: normal;
overflow-wrap: normal;
}
.comment-content table {
width: 100%;
margin: 0.75em 0;
border-collapse: collapse;
border: 1px solid hsl(var(--border));
font-size: 0.85em;
}
.comment-content thead {
background: hsl(var(--muted) / 0.5);
}
.comment-content th,
.comment-content td {
padding: 0.5em 0.75em;
border: 1px solid hsl(var(--border));
text-align: left;
}
.comment-content th {
font-weight: 600;
}
.comment-content tbody tr:nth-child(even) {
background: hsl(var(--muted) / 0.2);
}
.comment-content hr {
margin: 1em 0;
border: none;
border-top: 1px solid hsl(var(--border));
}
.comment-content img {
max-width: 100%;
height: auto;
margin: 0.75em 0;
border-radius: 4px;
border: 1px solid hsl(var(--border));
}
.comment-content strong {
font-weight: 600;
}
.comment-content em {
font-style: italic;
}
.comment-content del {
text-decoration: line-through;
color: hsl(var(--muted-foreground));
}
.comment-content dl {
margin: 0.75em 0;
}
.comment-content dt {
font-weight: 600;
margin-top: 0.5em;
}
.comment-content dd {
margin-left: 1.5em;
color: hsl(var(--muted-foreground));
}
.comment-content .footnotes {
margin-top: 1.5em;
padding-top: 1em;
border-top: 1px solid hsl(var(--border));
font-size: 0.85em;
color: hsl(var(--muted-foreground));
}
.comment-content .katex-display {
margin: 0.75em 0;
overflow-x: auto;
overflow-y: hidden;
}
.comment-content .katex {
font-size: 1em;
}
.comment-content kbd {
display: inline-block;
padding: 0.15em 0.4em;
font-family: var(--font-mono), 'Go Mono', ui-monospace, Menlo, monospace;
font-size: 0.8em;
background: hsl(var(--muted));
border: 1px solid hsl(var(--border));
border-radius: 3px;
box-shadow: inset 0 -1px 0 hsl(var(--border));
}
.comment-content abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
.comment-content details {
margin: 0.75em 0;
padding: 0.5em 0.75em;
background: hsl(var(--muted) / 0.3);
border: 1px solid hsl(var(--border));
border-radius: 4px;
}
.comment-content summary {
cursor: pointer;
font-weight: 500;
}
.comment-content details[open] summary {
margin-bottom: 0.5em;
}
.comment-content sup,
.comment-content sub {
font-size: 0.75em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.comment-content sup {
top: -0.5em;
}
.comment-content sub {
bottom: -0.25em;
}
:root {
--sidenote-max-width: 380px;
--sidenote-padding: 10px;
--sidenote-border-width: 3px;
--sidenote-border-color: hsl(var(--muted-foreground) / 0.5);
--sidenote-highlight-color: hsl(var(--muted-foreground) / 0.7);
--sidenote-self-link-border-color: hsl(var(--muted-foreground) / 0.5);
}
#sidenote-column-left,
#sidenote-column-right {
position: absolute;
max-width: var(--sidenote-max-width);
pointer-events: none;
z-index: 100;
}
#sidenote-column-left:empty,
#sidenote-column-right:empty {
display: none;
}
@media (max-width: 1399px) {
.sidenote-column,
#sidenote-column-left,
#sidenote-column-right {
display: none !important;
}
}
.sidenote {
position: absolute;
left: 0;
width: 100%;
opacity: 0.85;
padding: 2em 0 0 0;
font-size: 0.85em;
line-height: 1.5;
transition:
opacity 0.25s ease-in,
transform 0.25s ease-in,
top 0.15s ease-out;
pointer-events: auto;
}
.sidenote.hidden {
display: none;
}
.sidenote:hover,
.sidenote.targeted,
.sidenote.displaced,
.sidenote.highlighted {
background-color: hsl(var(--background));
opacity: 1.0;
box-shadow: 0 0 0 16px hsl(var(--background));
}
.sidenote.targeted {
z-index: 1;
}
.sidenote.displaced {
z-index: 2;
}
.sidenote.highlighted,
.sidenote:hover {
z-index: 3;
}
.sidenote::after {
content: "";
position: absolute;
width: calc(100% + 2 * var(--sidenote-padding));
height: calc(100% + 2 * var(--sidenote-padding));
top: calc(-1 * (var(--sidenote-padding) + var(--sidenote-border-width)));
left: calc(-1 * (var(--sidenote-padding) + var(--sidenote-border-width)));
border: 0px solid hsl(var(--background));
pointer-events: none;
transition:
border-color 0.15s ease 0.05s,
border-style 0.15s ease 0.05s;
}
.sidenote:hover::after,
.sidenote.targeted::after,
.sidenote.displaced::after,
.sidenote.highlighted::after {
border: 3px double var(--sidenote-highlight-color);
}
.sidenote.cut-off::before {
content: "…";
position: absolute;
border: 1px dotted var(--sidenote-border-color);
top: calc(100% - 1px);
left: 0;
right: 0;
margin: auto;
width: fit-content;
z-index: 2;
background-color: hsl(var(--background));
padding: 0.125em 0.5em 0.5em 0.5em;
font-size: 1.25em;
font-weight: 600;
line-height: 0.5;
pointer-events: none;
}
.sidenote.cut-off.hide-more-indicator::before {
visibility: hidden;
}
.sidenote-outer-wrapper {
max-height: 600px;
overflow: hidden;
position: relative;
z-index: 1;
border-style: dotted;
border-color: var(--sidenote-border-color);
border-width: 1px 0;
}
.sidenote:hover .sidenote-outer-wrapper,
.sidenote.displaced .sidenote-outer-wrapper,
.sidenote.highlighted .sidenote-outer-wrapper {
max-height: 60vh;
}
.sidenote.cut-off .sidenote-outer-wrapper {
overflow-y: scroll;
overscroll-behavior: none;
scrollbar-width: none;
-ms-overflow-style: none;
}
.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar {
display: none;
}
.sidenote-inner-wrapper {
position: relative;
margin: 0.5em 0;
}
.sidenote-inner-wrapper > * {
position: relative;
z-index: 1;
}
.sidenote-self-link {
font-weight: 600;
position: absolute;
top: -1px;
background-color: hsl(var(--background));
background-image: none !important;
border: 1px solid var(--sidenote-self-link-border-color);
width: 2em;
height: 2em;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
text-decoration: none !important;
color: hsl(var(--foreground)) !important;
transition:
border-color 0.15s ease 0.05s,
border-style 0.15s ease 0.05s;
}
#sidenote-column-left .sidenote-self-link {
right: 1px;
}
#sidenote-column-right .sidenote-self-link {
left: 1px;
}
.sidenote.targeted > .sidenote-self-link,
.sidenote > .sidenote-self-link:hover {
border-width: 3px;
border-style: double;
top: -3px;
}
#sidenote-column-left .sidenote.targeted > .sidenote-self-link,
#sidenote-column-left .sidenote > .sidenote-self-link:hover {
right: -2px;
}
#sidenote-column-right .sidenote.targeted > .sidenote-self-link,
#sidenote-column-right .sidenote > .sidenote-self-link:hover {
left: -2px;
}
.sidenote-citation-active {
background-color: hsl(var(--muted));
border-radius: 2px;
box-shadow: 0 0 0 2px hsl(var(--muted));
}
.sidenote-inner-wrapper p {
margin: 0 0 0.5em 0;
}
.sidenote-inner-wrapper p:last-child {
margin-bottom: 0;
}
.sidenote-inner-wrapper a {
color: hsl(var(--foreground));
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
.sidenote-inner-wrapper a:hover {
text-decoration-style: solid;
}
.sidenote-active {
border-color: hsl(var(--foreground)) !important;
border-style: double !important;
border-width: 3px !important;
}
.sidenote-ref-active {
background-color: hsl(var(--muted));
border-radius: 2px;
box-shadow: 0 0 0 2px hsl(var(--muted));
}
.footnotes-details {
margin-top: 3rem;
border-top: 1px solid hsl(var(--border));
padding-top: 1rem;
}
.footnotes-summary {
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono), monospace;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: hsl(var(--muted-foreground));
list-style: none;
}
.footnotes-summary::-webkit-details-marker { display: none; }
.footnotes-summary::marker { display: none; }
.footnotes-count {
font-variant-numeric: tabular-nums;
}
.footnotes-list {
list-style: none;
padding: 0;
margin: 0.75rem 0 0 0;
}
.footnotes-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.5rem 0;
border-bottom: 1px dotted hsl(var(--border));
font-size: 0.875rem;
line-height: 1.6;
}
.footnotes-item:last-child { border-bottom: none; }
.footnotes-number {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5em;
height: 1.5em;
border: 1px solid hsl(var(--border));
font-size: 0.7em;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: hsl(var(--muted-foreground));
}
.footnotes-content { flex: 1; }
.footnotes-content p { margin: 0; }
.footnotes-backref {
flex-shrink: 0;
color: hsl(var(--muted-foreground));
text-decoration: none;
font-size: 0.8em;
}
.footnotes-backref:hover { color: hsl(var(--foreground)); }
.footnotes-toggle {
display: block;
margin: 0.5rem 0;
padding: 0.25rem 0;
background: none;
border: none;
font-family: var(--font-mono), monospace;
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footnotes-toggle:hover { color: hsl(var(--foreground)); }
.sidenote-number {
display: inline-block;
font-size: 0.7em;
font-weight: 600;
font-variant-numeric: tabular-nums;
min-width: 1.5em;
text-align: center;
border: 1px solid hsl(var(--border));
padding: 0 0.3em;
margin-right: 0.5em;
vertical-align: super;
}
.footnotes {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid hsl(var(--border));
font-size: 0.875rem;
}
.footnotes hr {
display: none;
}
.footnotes ol {
padding-left: 1.5rem;
}
.footnotes li {
margin-bottom: 0.75rem;
}
.footnotes li p {
margin: 0;
}
.footnote-backref {
margin-left: 0.25rem;
text-decoration: none;
opacity: 0.6;
}
.footnote-backref:hover {
opacity: 1;
}
[data-survey-slug] .fmd-root {
--fmd-main-container-width: 100%;
}
[data-survey-slug] .fmd-root .fmd-form-control:focus,
[data-survey-slug] .fmd-root .fmd-form-control:focus-visible,
[data-survey-slug] .fmd-root input:focus,
[data-survey-slug] .fmd-root input:focus-visible,
[data-survey-slug] .fmd-root textarea:focus,
[data-survey-slug] .fmd-root textarea:focus-visible {
outline: none !important;
box-shadow: none !important;
border-color: inherit !important;
}
.lede-wrapper {
width: 100%;
}
.lede-card {
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
border-radius: 12px;
padding: 110px 40px;
min-height: 440px;
height: 440px;
display: flex;
flex-direction: column;
justify-content: center;
}
.lede-title {
font-family: var(--font-serif), 'Source Serif 4', Georgia, serif;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: hsl(var(--foreground));
margin: 0 0 20px 0;
}
.lede-excerpt {
font-family: var(--font-serif), 'Source Serif 4', Georgia, serif;
font-size: 0.9rem;
font-weight: 400;
line-height: 1.65;
color: hsl(var(--muted-foreground));
margin: 0 0 24px 0;
padding-left: 0;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lede-footer {
display: flex;
align-items: baseline;
gap: 8px;
}
.lede-author {
font-family: var(--font-serif), 'Source Serif 4', Georgia, serif;
font-size: 0.9rem;
font-weight: 600;
color: hsl(var(--foreground));
}
.lede-date {
font-family: var(--font-serif), 'Source Serif 4', Georgia, serif;
font-size: 0.9rem;
font-weight: 400;
color: hsl(var(--muted-foreground));
}
.lede-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
margin-top: 0;
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
}
.lede-nav button {
padding: 4px 8px;
background: none;
border: none;
color: hsl(var(--muted-foreground));
cursor: pointer;
transition: color 0.15s ease;
}
.lede-nav button:hover {
color: hsl(var(--foreground));
}
.lede-nav span {
font-variant-numeric: tabular-nums;
}
@media (max-width: 639px) {
.lede-card {
min-height: 320px;
height: auto;
padding: 3.5rem 1.25rem;
}
.lede-title {
font-size: 1.4rem;
margin-bottom: 0.875rem;
}
.lede-excerpt {
font-size: 0.85rem;
-webkit-line-clamp: 6;
}
}
@media print {
@page {
size: letter;
margin: 0.9in 1.25in 1in 1.25in;
}
* {
color: #1a1a1a !important;
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
html, body {
font-family: var(--font-serif), 'Source Serif 4', Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif !important;
font-size: 10.5pt !important;
line-height: 1.45 !important;
background: #fff !important;
color: #1a1a1a !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
header,
[data-print-hide],
nav,
.toc-container,
[class*="toc"],
[class*="TOC"],
#sidenote-column-left,
#sidenote-column-right,
.sidenote,
footer,
.site-footer,
[class*="expanded-footer"],
[class*="comment"],
[class*="Comments"],
[data-survey-slug],
[class*="audio-player"],
[class*="command-menu"],
.fixed,
[role="dialog"],
[class*="view-tracker"],
[class*="ViewTracker"],
[class*="time-stamp"],
[class*="TimeStamp"],
[class*="citation"],
[class*="Citation"],
[class*="footnotes"],
[class*="Footnotes"],
[class*="footnotes-section"],
[class*="bibliography"],
[class*="Bibliography"],
section[data-footnotes],
section.footnotes,
.footnotes-section,
.footnotes-divider {
display: none !important;
}
#print-header {
display: block !important;
text-align: center;
margin: 0 0 2.5em 0;
padding: 0;
}
#print-header .print-rule-top {
border: none !important;
border-top: 2pt solid #1a1a1a !important;
margin: 0 0 1.2em 0;
width: 100%;
}
#print-header .print-title {
font-family: var(--font-serif), Palatino, 'Book Antiqua', Georgia, serif !important;
font-size: 18pt !important;
font-weight: 400;
font-variant: small-caps;
letter-spacing: 0.08em;
margin: 0 0 0.15em 0;
line-height: 1.25;
color: #1a1a1a !important;
}
#print-header .print-subtitle {
font-family: var(--font-serif), Palatino, Georgia, serif !important;
font-size: 11pt !important;
font-style: italic;
font-weight: 400;
color: #444 !important;
margin: 0 0 1em 0;
line-height: 1.3;
}
#print-header .print-rule-mid {
border: none !important;
border-top: 0.5pt solid #999 !important;
margin: 0 auto 0.8em auto;
width: 25%;
}
#print-header .print-author {
font-family: var(--font-serif), Palatino, Georgia, serif !important;
font-size: 11pt !important;
font-weight: 400;
font-variant: small-caps;
letter-spacing: 0.06em;
margin: 0 0 0.15em 0;
color: #1a1a1a !important;
}
#print-header .print-date {
font-family: var(--font-serif), Palatino, Georgia, serif !important;
font-size: 9pt !important;
font-style: normal;
font-weight: 400;
color: #555 !important;
margin: 0 0 1em 0;
}
#print-header .print-meta-line {
font-family: var(--font-serif), Palatino, Georgia, serif !important;
font-size: 8.5pt !important;
font-variant: small-caps;
letter-spacing: 0.04em;
color: #555 !important;
margin: 0 0 0.3em 0;
}
#print-header .print-tags {
font-family: var(--font-serif), Palatino, Georgia, serif !important;
font-size: 8.5pt !important;
font-style: italic;
font-weight: 400;
color: #666 !important;
margin: 0.4em 0 0 0;
}
#print-header .print-rule-bottom {
border: none !important;
border-top: 2pt solid #1a1a1a !important;
margin: 1.2em 0 0 0;
width: 100%;
}
main, .container, #content {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.content p,
.post-content p,
.book-content p {
text-align: justify !important;
text-indent: 1.5em;
margin: 0 !important;
padding: 0 !important;
orphans: 3;
widows: 3;
font-size: 10.5pt !important;
line-height: 1.45 !important;
}
.content h1 + p,
.content h2 + p,
.content h3 + p,
.content h4 + p,
.content > p:first-child,
.content > div > p:first-child,
.post-content h1 + p,
.post-content h2 + p,
.post-content h3 + p,
.post-content h4 + p,
.post-content > p:first-child,
.content blockquote + p,
.post-content blockquote + p,
.content pre + p,
.post-content pre + p {
text-indent: 0 !important;
}
.content h1,
.post-content h1,
.book-content h1 {
font-size: 14pt !important;
font-weight: 400 !important;
font-variant: small-caps;
letter-spacing: 0.06em;
text-align: left;
text-transform: none !important;
margin: 1.8em 0 0.6em 0 !important;
padding-bottom: 0.2em;
border-bottom: 0.5pt solid #ccc !important;
page-break-after: avoid;
}
.content h2,
.post-content h2,
.book-content h2 {
font-size: 12pt !important;
font-weight: 400 !important;
font-variant: small-caps;
letter-spacing: 0.05em;
margin: 1.4em 0 0.5em 0 !important;
border-bottom: none !important;
page-break-after: avoid;
}
.content h3,
.post-content h3,
.book-content h3 {
font-size: 10.5pt !important;
font-weight: 400 !important;
font-style: italic;
margin: 1.2em 0 0.4em 0 !important;
page-break-after: avoid;
}
.content h4,
.content h5,
.content h6,
.post-content h4,
.post-content h5,
.post-content h6 {
font-size: 10.5pt !important;
font-weight: 400 !important;
font-style: italic;
margin: 1em 0 0.3em 0 !important;
page-break-after: avoid;
}
.content blockquote,
.post-content blockquote,
.book-content blockquote {
border-left: none !important;
border: none !important;
margin: 0.8em 2.5em !important;
padding: 0 !important;
font-style: italic;
font-size: 10pt !important;
line-height: 1.4 !important;
background: none !important;
}
.content pre,
.post-content pre,
.book-content pre {
border: 0.5pt solid #bbb !important;
border-radius: 0 !important;
padding: 0.6em 0.8em !important;
font-family: var(--font-mono), 'Go Mono', Consolas, monospace !important;
font-size: 8.5pt !important;
line-height: 1.35 !important;
page-break-inside: avoid;
overflow: visible !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
}
.content code,
.post-content code,
.book-content code {
font-size: 0.85em !important;
background: none !important;
border: none !important;
padding: 0 !important;
}
.content a,
.post-content a {
color: #1a1a1a !important;
text-decoration: none !important;
border-bottom: none !important;
}
.content a[href^="http"]:not([href*="krisyotam.com"])::after,
.post-content a[href^="http"]:not([href*="krisyotam.com"])::after {
content: " ‹" attr(href) "›";
font-size: 7.5pt;
font-family: var(--font-mono), monospace;
color: #888 !important;
word-break: break-all;
}
.content img,
.post-content img,
.book-content img {
max-width: 75% !important;
margin: 1.2em auto !important;
display: block !important;
page-break-inside: avoid;
}
.content table,
.post-content table {
border-collapse: collapse !important;
width: 100% !important;
font-size: 9pt !important;
line-height: 1.3 !important;
margin: 1em 0 !important;
page-break-inside: avoid;
border: none !important;
}
.content thead,
.post-content thead {
border-top: 1.5pt solid #1a1a1a !important;
border-bottom: 0.75pt solid #1a1a1a !important;
}
.content tbody,
.post-content tbody {
border-bottom: 1.5pt solid #1a1a1a !important;
}
.content th,
.post-content th {
font-weight: 400 !important;
font-variant: small-caps;
letter-spacing: 0.03em;
padding: 0.4em 0.6em !important;
text-align: left;
border: none !important;
}
.content td,
.post-content td {
padding: 0.3em 0.6em !important;
border: none !important;
border-bottom: 0.25pt solid #ddd !important;
}
.content tbody tr:last-child td,
.post-content tbody tr:last-child td {
border-bottom: none !important;
}
.content hr,
.post-content hr {
border: none !important;
text-align: center;
margin: 1.5em 0 !important;
height: auto !important;
overflow: visible !important;
}
.content hr::after,
.post-content hr::after {
content: "* * *";
display: block;
font-size: 10pt;
letter-spacing: 0.5em;
color: #999 !important;
}
.content ul,
.content ol,
.post-content ul,
.post-content ol {
margin: 0.5em 0 0.5em 2em !important;
padding: 0 !important;
font-size: 10.5pt !important;
}
.content li,
.post-content li {
margin-bottom: 0.15em !important;
line-height: 1.45 !important;
}
.katex-display {
margin: 0.8em 0 !important;
}
.katex {
font-size: 1em !important;
}
h1, h2, h3 {
page-break-after: avoid;
}
p, blockquote, table, figure, pre {
orphans: 3;
widows: 3;
}
figure, img, pre, table {
page-break-inside: avoid;
}
.dropcap-image-wrapper {
display: none !important;
}
.relative.min-h-screen {
padding-top: 0 !important;
min-height: auto !important;
}
.border,
.border-border,
.bg-card,
.shadow-sm,
.rounded-sm {
border: none !important;
box-shadow: none !important;
background: transparent !important;
border-radius: 0 !important;
}
}
/* frame: the body wrapper every page shares (app/layout.tsx). */
.site-frame {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main { flex-grow: 1; }
.search-overlay {
cursor: default;
}
.search-container {
background: hsl(var(--background));
padding: 0.5em;
font-size: 16px;
}
.search-form {
display: flex;
margin: 0;
}
.search-input {
appearance: none;
flex: 1 1 auto;
height: 2.5em;
padding: 0.25em 0.75em;
border: none;
outline: 2px solid hsl(var(--border));
background: hsl(var(--background));
color: hsl(var(--foreground));
font-size: 16px;
font-family: inherit;
}
.search-form:focus-within .search-input {
outline: 2px solid hsl(var(--border));
}
.search-input:focus {
outline: 3px solid hsl(var(--muted-foreground));
}
.search-input::placeholder {
color: hsl(var(--muted-foreground));
}
.search-btn {
appearance: none;
border: none;
background: hsl(var(--muted));
color: hsl(var(--foreground));
height: 2.5em;
padding: 0.25em 1em;
flex: 0 0 6em;
margin: 0 0 0 0.5em;
outline: 2px solid hsl(var(--border));
cursor: pointer;
font-size: 16px;
font-family: inherit;
}
.search-form:focus-within .search-btn {
outline: 2px solid hsl(var(--border));
}
.search-btn:hover {
background: hsl(var(--muted-foreground));
color: hsl(var(--background));
}
.search-btn:hover,
.search-btn:focus {
outline: 3px solid hsl(var(--muted-foreground));
}
.search-where-selector {
margin: 0.625em -1px 0 -1px;
border: 2px solid hsl(var(--border));
padding: 0.375em 0.5em 0.625em 0.5em;
}
.search-where-selector legend {
padding: 0 0.25em;
color: hsl(var(--muted-foreground));
font-size: 14px;
}
.search-where-selector label {
padding: 0.25em 0.5em;
font-size: 14px;
color: hsl(var(--foreground));
cursor: pointer;
}
.search-where-selector input[type="radio"] {
cursor: pointer;
}
.search-results {
overflow-y: auto;
max-height: 400px;
margin-top: 0.625em;
border: 2px solid hsl(var(--border));
}
.search-results:empty {
display: none;
}
.search-result-link {
display: block;
padding: 0.625em 0.75em;
border-bottom: 1px solid hsl(var(--border));
text-decoration: none;
color: hsl(var(--foreground));
}
.search-result-link:last-child {
border-bottom: none;
}
.search-result-link:hover {
background: hsl(var(--muted));
}
.search-result-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.search-result-title {
font-size: 15px;
font-weight: 500;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-type {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: hsl(var(--muted-foreground));
flex-shrink: 0;
}
.search-result-preview {
font-size: 13px;
color: hsl(var(--muted-foreground));
margin: 4px 0 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.search-result-meta {
font-size: 12px;
color: hsl(var(--muted-foreground));
margin-top: 4px;
}
.search-empty,
.search-loading {
padding: 1.5em 0.75em;
text-align: center;
font-size: 14px;
color: hsl(var(--muted-foreground));
}
.search-page {
font-size: 16px;
}
.search-page .search-stats {
font-size: 13px;
color: hsl(var(--muted-foreground));
padding: 0.5em 0;
}
.search-page .search-results {
max-height: none;
overflow: visible;
border: none;
margin-top: 0.5em;
}
.search-page .search-result-link {
display: block;
padding: 0.5em 0;
border-bottom: none;
cursor: default;
}
.search-page .search-result-link:hover {
background: transparent;
}
.search-page .search-result-url {
font-size: 13px;
color: hsl(var(--muted-foreground));
line-height: 1.3;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-page .search-result-url-sep {
color: hsl(var(--muted-foreground));
opacity: 0.7;
}
.search-page .search-result-title {
font-size: 20px;
font-weight: 400;
line-height: 1.3;
margin: 0 0 4px;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.search-page .search-result-title a {
color: #1a0dab;
text-decoration: none;
}
.search-page .search-result-title a:visited {
color: #681da8;
}
.search-page .search-result-title a:hover {
text-decoration: underline;
}
.dark .search-page .search-result-title a {
color: #8ab4f8;
}
.dark .search-page .search-result-title a:visited {
color: #c58af9;
}
.search-page .search-result-preview {
font-size: 14px;
line-height: 1.55;
color: hsl(var(--foreground));
margin: 0;
display: block;
overflow: visible;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
}
.search-page .search-result-date {
color: hsl(var(--muted-foreground));
}
.search-page .search-result-tags {
margin-top: 4px;
font-size: 12px;
color: hsl(var(--muted-foreground));
}
/* content components: book, paper, spoiler (verbatim from the original). */
/* Book component specific styles */
.book-component {
/* Remove inherited decoration and border */
text-decoration: none;
border: none;
}
.book-link {
text-decoration: none !important;
border-bottom: none !important;
color: inherit !important;
}
.book-link:hover {
text-decoration: none !important;
border-bottom: none !important;
}
.book-image-container {
position: relative !important;
width: 160px !important;
height: 240px !important;
margin-bottom: 0.5rem !important;
display: block !important;
background: none !important;
background-image: none !important;
background-size: auto !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.book-image {
object-fit: contain !important;
position: absolute !important;
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
transition: none !important;
background: none !important;
background-image: none !important;
background-size: auto !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 0 !important;
}
.book-title {
font-weight: 500 !important;
color: inherit !important;
text-align: center !important;
text-decoration: none !important;
}
.book-author {
font-weight: 400 !important;
color: inherit !important;
text-align: center !important;
text-decoration: none !important;
}
.paper-component {
text-decoration: none;
border: none;
}
.paper-link {
text-decoration: none !important;
border: none !important;
background: none !important;
cursor: pointer !important;
}
.paper-iframe-container {
position: relative !important;
width: 160px !important;
height: 206px !important;
margin-bottom: 0.5rem !important;
overflow: hidden !important;
background: none !important;
}
/* Disable pointer events so the handles the click */
.paper-iframe {
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
background: none !important;
}
.paper-title {
font-weight: 500 !important;
text-align: center !important;
}
.paper-author,
.paper-date {
font-weight: 400 !important;
text-align: center !important;
margin-top: 0.25rem !important;
}
/* spoiled 0.4.0: inline layout and the iris text transition. */
@property --iris-gradient-length {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --iris-radius {
syntax: " | ";
inherits: false;
initial-value: 16px;
}
.spoiler > .spoiler-iris {
--hide-duration: .15s;
--reveal-duration: .3s;
mask: radial-gradient(circle closest-corner, black var(--iris-gradient-length), transparent calc(var(--iris-gradient-length) + var(--iris-radius))) no-repeat center;
transition: --iris-gradient-length var(--reveal-duration) ease-out, opacity var(--reveal-duration) ease-out, filter var(--reveal-duration) ease-out;
}
.spoiler-hidden > .spoiler-iris {
--iris-gradient-length: 0%;
--iris-radius: 0px;
opacity: 0;
filter: blur(1px);
transition: --iris-gradient-length 0s linear var(--hide-duration), filter 0s linear var(--hide-duration), opacity var(--hide-duration) ease-out;
}
.spoiler:not(.spoiler-hidden) > .spoiler-iris {
mask-image: none;
}
/* partials: page-header, oc-header, section-header, nav-bar,
page-description (components/layout/*, components/nav/navigation.tsx).
Translated with tools/twcss from the original class strings. */
/* ---- tones: header-utils.ts colour maps ---- */
.tone-fg { color: hsl(var(--foreground)); }
.tone-fg80 { color: hsl(var(--foreground) / .8); }
.tone-muted { color: hsl(var(--muted-foreground)); }
.tone-muted60 { color: hsl(var(--muted-foreground) / .6); }
.tone-9 { color: rgb(17 24 39); }
.tone-8 { color: rgb(31 41 55); }
.tone-7 { color: rgb(55 65 81); }
.tone-6 { color: rgb(75 85 99); }
.tone-5 { color: rgb(107 114 128); }
.tone-4 { color: rgb(156 163 175); }
.tone-3 { color: rgb(209 213 219); }
.tone-2 { color: rgb(229 231 235); }
.dark .tone-9 { color: rgb(243 244 246); }
.dark .tone-8 { color: rgb(229 231 235); }
.dark .tone-7 { color: rgb(209 213 219); }
.dark .tone-6 { color: rgb(156 163 175); }
.dark .tone-5 { color: rgb(107 114 128); }
.dark .tone-4 { color: rgb(75 85 99); }
.dark .tone-3 { color: rgb(55 65 81); }
.dark .tone-2 { color: rgb(31 41 55); }
/* ---- page-header ---- */
.ph {
position: relative;
z-index: 20;
margin-bottom: 1rem;
}
.ph-back {
display: inline-flex;
align-items: center;
margin-bottom: 1.5rem;
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
font-size: .875rem;
line-height: 1.25rem;
font-style: italic;
color: hsl(var(--muted-foreground));
transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.ph-back:hover { color: hsl(var(--foreground)); }
.ph-back-icon {
margin-right: .5rem;
width: 1rem;
height: 1rem;
transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}
.ph-back:hover .ph-back-icon { transform: translateX(-.25rem); }
.ph-card {
border-radius: calc(var(--radius) - 4px);
border: 1px solid hsl(var(--border));
background-color: hsl(var(--card));
padding: 1.75rem 1.25rem;
color: hsl(var(--card-foreground));
box-shadow: none;
}
.dark .ph-card {
border-color: #ffffff14;
background-color: #ffffff06;
}
@media (min-width: 640px) {
.ph-card { padding: 2.25rem 2rem; }
}
.ph-title {
margin-bottom: .75rem;
text-align: center;
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
font-weight: 500;
letter-spacing: -.025em;
font-size: 1.875rem;
line-height: 2.25rem;
}
@media (min-width: 640px) {
.ph-title { font-size: 2.25rem; line-height: 2.5rem; }
}
.ph-title-long { font-size: 1.5rem; line-height: 2rem; }
@media (min-width: 640px) {
.ph-title-long { font-size: 1.875rem; line-height: 2.25rem; }
}
.ph-preview {
margin: 0 auto 1.5rem;
max-width: 42rem;
text-align: center;
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
font-size: .875rem;
line-height: 1.25rem;
font-style: italic;
color: hsl(var(--muted-foreground) / .9);
}
.dark .ph-preview { color: hsl(var(--muted-foreground) / .75); }
.ph-date-wrap { text-align: center; margin-bottom: 1rem; }
.ph-date, .ph-meta, .oc-date, .oc-cover-title, .oc-tag, .oc-label, .sh-count {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}
.ph-date {
font-size: .75rem;
line-height: 1rem;
color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) {
.ph-date { font-size: .875rem; line-height: 1.25rem; }
}
.ph-authors-wrap { text-align: center; margin-bottom: .75rem; }
.ph-authors, .ph-tag, .ph-filed, .ph-secondary {
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
font-size: .875rem;
line-height: 1.25rem;
color: hsl(var(--muted-foreground));
}
.ph-meta {
margin-bottom: .25rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
column-gap: .75rem;
row-gap: .25rem;
font-size: .75rem;
line-height: 1rem;
}
.ph-hover { display: inline-block; }
.ph-trigger {
display: flex;
cursor: help;
align-items: center;
gap: .25rem;
opacity: .8;
transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
}
.ph-trigger:hover { opacity: 1; }
.ph-info { width: .75rem; height: .75rem; }
.ph-label { font-weight: 500; }
.ph-hc {
border-radius: calc(var(--radius) - 2px);
border: 1px solid hsl(var(--border));
isolation: isolate;
z-index: 60;
width: 20rem;
background-color: hsl(var(--popover));
padding: 1rem;
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
font-size: .875rem;
line-height: 1.25rem;
color: hsl(var(--popover-foreground));
box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}
.ph-hc-body > * + * { margin-top: .5rem; }
.ph-hc-h { font-weight: 500; color: hsl(var(--foreground)); }
.ph-hc-p { color: hsl(var(--muted-foreground)); white-space: pre-wrap; }
.ph-dot { display: none; color: hsl(var(--muted-foreground)); }
@media (min-width: 640px) {
.ph-dot { display: inline; }
}
.ph-row { text-align: center; margin-top: .5rem; }
.ph-tag {
text-decoration-line: underline;
text-underline-offset: 2px;
transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.ph-filed {
font-style: italic;
transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.ph-tag:hover, .ph-filed:hover { color: hsl(var(--foreground)); }
.ph-comma { font-size: .875rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); }
.ph-secondary { font-style: italic; }
/* ---- oc-header ---- */
.oc { margin-bottom: 2rem; position: relative; }
.oc-card {
border: 1px solid hsl(var(--border));
background-color: hsl(var(--card));
}
.oc-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
.oc-grid { grid-template-columns: 280px 1fr; }
}
.oc-cover {
aspect-ratio: 3 / 4;
border-bottom: 1px solid hsl(var(--border));
background-color: hsl(var(--muted) / .3);
}
@media (min-width: 768px) {
.oc-cover {
aspect-ratio: auto;
min-height: 320px;
border-bottom-width: 0;
border-right: 1px solid hsl(var(--border));
}
}
.oc-cover-empty { display: flex; align-items: center; justify-content: center; }
.oc-cover-img { width: 100%; height: 100%; object-fit: cover; }
.oc-cover-title { color: hsl(var(--muted-foreground)); font-size: .875rem; line-height: 1.25rem; }
.oc-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.oc-title {
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
font-weight: 500;
letter-spacing: -.025em;
font-size: 1.5rem;
line-height: 2rem;
text-transform: uppercase;
margin-bottom: .75rem;
}
@media (min-width: 768px) {
.oc-title { font-size: 1.875rem; line-height: 2.25rem; }
}
.oc-preview {
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
font-size: .875rem;
line-height: 1.25rem;
color: hsl(var(--muted-foreground));
font-style: italic;
margin-bottom: 1rem;
-webkit-hyphens: auto;
hyphens: auto;
}
.oc-date {
font-size: .875rem;
line-height: 1.25rem;
color: hsl(var(--muted-foreground));
margin-bottom: .75rem;
}
.oc-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.oc-tag {
border: 1px solid hsl(var(--border));
background-color: hsl(var(--secondary) / .4);
padding: .25rem .5rem;
font-size: .75rem;
line-height: 1rem;
transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.oc-tag:hover { background-color: hsl(var(--secondary)); }
.oc-filed {
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
font-size: .875rem;
line-height: 1.25rem;
font-style: italic;
color: hsl(var(--muted-foreground));
}
.oc-filed-a { transition: color .15s cubic-bezier(.4, 0, .2, 1); }
.oc-filed-a:hover { color: hsl(var(--foreground)); }
.oc-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid hsl(var(--border));
}
.oc-stats > * + * { border-left: 1px solid hsl(var(--border)); }
.oc-stat { padding: 1rem .75rem; text-align: center; }
.oc-trigger {
display: flex;
align-items: center;
justify-content: center;
gap: .25rem;
cursor: help;
}
.oc-label { font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.oc-hc {
z-index: 50;
border-radius: calc(var(--radius) - 2px);
border: 1px solid hsl(var(--border));
box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
width: 20rem;
font-size: .875rem;
line-height: 1.25rem;
background-color: hsl(var(--card));
color: hsl(var(--card-foreground));
padding: 1rem;
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
}
/* ---- section-header ---- */
.sh { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.sh-bar { width: .25rem; height: 1.25rem; background-color: hsl(var(--foreground) / .8); }
.sh-title {
font-size: .875rem;
line-height: 1.25rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .025em;
color: hsl(var(--foreground));
}
.sh-rule { flex: 1; height: 1px; background-color: hsl(var(--border)); }
.sh-count {
font-size: .75rem;
line-height: 1rem;
color: hsl(var(--muted-foreground));
font-variant-numeric: tabular-nums;
}
/* ---- nav-bar ---- */
.nb {
margin-bottom: 1rem;
margin-top: .25rem;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.nb-search { flex: 1; min-width: 240px; position: relative; }
.nb-icon {
position: absolute;
left: .75rem;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
color: hsl(var(--muted-foreground));
pointer-events: none;
}
.nb-input {
width: 100%;
height: 2.25rem;
padding: .5rem .75rem .5rem 2.5rem;
border-width: 1px;
border-radius: 0;
font-size: .875rem;
line-height: 1.25rem;
background-color: hsl(var(--background));
}
.nb-input:hover { background-color: hsl(var(--secondary) / .5); }
.nb-input:focus {
outline: 2px solid #0000;
outline-offset: 2px;
background-color: hsl(var(--secondary) / .5);
}
.nb-group { display: flex; align-items: center; gap: .5rem; }
.nb-view {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border: 1px solid hsl(var(--input));
background-color: hsl(var(--background));
color: hsl(var(--foreground));
border-radius: 0;
text-decoration-line: none;
}
.nb-view:hover {
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
}
.nb-view.nb-view-on { background-color: hsl(var(--secondary) / .5); }
.nb-view-icon { width: 1rem; height: 1rem; }
/* custom-select.tsx (the nav-bar category filter) */
.cs { position: relative; }
.cs-btn {
display: flex;
height: 2.25rem;
width: 100%;
min-width: 160px;
align-items: center;
justify-content: space-between;
border: 1px solid hsl(var(--input));
background-color: hsl(var(--background));
padding: .5rem .75rem;
font-size: .875rem;
line-height: 1.25rem;
border-radius: 0;
}
.cs-btn:hover { background-color: hsl(var(--secondary) / .5); }
.cs-btn:focus {
outline: 2px solid #0000;
outline-offset: 2px;
background-color: hsl(var(--secondary) / .5);
}
.cs-val { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chev {
width: 1rem;
height: 1rem;
transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.cs-btn[aria-expanded="true"] .cs-chev { transform: rotate(180deg); }
.cs-pop { position: absolute; z-index: 100; margin-top: .25rem; width: 100%; }
.cs-list {
max-height: 15rem;
width: 100%;
overflow: auto;
border: 1px solid hsl(var(--input));
background-color: hsl(var(--background));
padding: .25rem 0;
font-size: .875rem;
line-height: 1.25rem;
box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
border-radius: 0;
}
.cs-opt {
position: relative;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
padding: .5rem .75rem;
transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.cs-opt:hover, .cs-opt.cs-opt-focus { background-color: hsl(var(--secondary) / .5); }
.cs-opt.cs-opt-sel { background-color: hsl(var(--secondary) / .3); }
.cs-opt-row { display: flex; align-items: center; justify-content: space-between; }
.cs-check { width: 1rem; height: 1rem; }
/* ---- page-description ---- */
.pd { position: fixed; bottom: 1rem; left: 1rem; z-index: 40; }
.pd-btn {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid hsl(var(--border));
background-color: hsl(var(--background));
transition: color .2s, background-color .2s, border-color .2s;
}
.pd-btn:hover { background-color: hsl(var(--muted) / .5); }
.pd-btn-icon { width: 1.25rem; height: 1.25rem; }
.pd-static {
position: absolute;
left: 0;
width: 20rem;
border: 1px solid hsl(var(--border));
background-color: hsl(var(--card));
color: hsl(var(--card-foreground));
}
@media (min-width: 768px) {
.pd-static { width: 24rem; }
}
.pd-head { border-bottom: 1px solid hsl(var(--border)); padding: 1rem; }
.pd-title {
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
font-size: 1.125rem;
letter-spacing: -.025em;
line-height: 1;
}
.pd-body { padding: 1rem; }
.pd-text {
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
font-size: .875rem;
line-height: 1.625;
color: hsl(var(--muted-foreground));
}
.pd-link { color: hsl(var(--foreground)); text-decoration-line: underline; }
.pd-link:hover { color: hsl(var(--primary)); }
.pd-icons { margin-top: 1rem; }
.pd-iconbar {
border-top: 1px solid hsl(var(--border));
padding-top: .75rem;
display: flex;
align-items: center;
justify-content: center;
}
.pd-icon { display: inline-block; padding: .25rem; }
.pd-icon:hover { opacity: .8; }
.pd-icon-sep { padding-left: 1rem; border-left: 1px solid hsl(var(--border)); margin-left: 1rem; }
.pd-icon-img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
/* the JS panel (hydrated PageDescription) */
.pd-backdrop {
position: fixed;
inset: 0;
z-index: 40;
background-color: hsl(var(--background) / .8);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity .2s cubic-bezier(.4, 0, .2, 1);
}
.pd-panel {
position: fixed;
bottom: 1rem;
left: 1rem;
z-index: 50;
width: 20rem;
border: 1px solid hsl(var(--border));
border-radius: 0;
box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
background-color: hsl(var(--card));
color: hsl(var(--card-foreground));
opacity: 0;
transform: translateY(1.25rem);
transition: all .3s cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 768px) {
.pd-panel { width: 24rem; }
}
.pd-full {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .3s cubic-bezier(.22, 1, .36, 1);
}
.pd-box {
border: 1px solid hsl(var(--border));
border-radius: 0;
box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
background-color: hsl(var(--card));
color: hsl(var(--card-foreground));
width: 90%;
max-height: 90vh;
overflow: auto;
}
@media (min-width: 768px) {
.pd-box { width: 720px; }
}
.pd-on .pd-backdrop, .pd-on .pd-full { opacity: 1; }
.pd-on .pd-panel { opacity: 1; transform: translateY(0); }
.pd-bar {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid hsl(var(--border));
padding: 1rem;
}
.pd-actions { display: flex; align-items: center; gap: .5rem; }
.pd-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 0;
transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.pd-ghost:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.pd-ghost:focus-visible {
outline: 2px solid #0000;
outline-offset: 2px;
box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}
.pd-ghost svg { width: 1rem; height: 1rem; }
.pd-ghost .pd-rot { transform: rotate(45deg); }
@media print {
.pd, .pd-backdrop, .pd-panel, .pd-full { display: none !important; }
}
/* chrome: body classes, the settings button + dropdown, the command-menu
button, the User Settings panel and the command menu
(components/layout/wrapper.tsx, nav/settings.tsx, nav/settings-panel.tsx,
nav/command-menu.tsx). Translated with tools/twcss. */
/* */
body {
min-height: 100vh;
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
/* ---- settings button and dropdown ---- */
.ks { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 50; }
.ks-btn, .kk {
display: flex;
width: 2.5rem;
height: 2.5rem;
align-items: center;
justify-content: center;
border: 1px solid hsl(var(--foreground) / .25);
background-color: hsl(var(--background));
transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1);
}
.ks-btn:hover, .kk:hover {
border-color: hsl(var(--foreground) / .4);
background-color: hsl(var(--muted));
}
.ks-spin { display: inline-block; }
.ks-gear { width: 1.25rem; height: 1.25rem; }
.ks-menu {
position: fixed;
inset: 68px 20px auto auto;
margin: 0;
padding: 0;
width: 2.5rem;
color: inherit;
overflow: visible;
transform-origin: top;
border: 1px solid hsl(var(--border));
background-color: hsl(var(--background));
box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
transform: translateY(0);
opacity: 1;
}
/* Native popovers dismiss outside and on Escape without a JS state machine.
Browsers without popovers keep the complete link column visible. */
@supports selector(:popover-open) {
.ks-menu { transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1), display .3s allow-discrete, overlay .3s allow-discrete; transform: translateY(-.5rem); opacity: 0; }
.ks-menu:popover-open { transform: translateY(0); opacity: 1; }
@starting-style { .ks-menu:popover-open { transform: translateY(-.5rem); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
.ks-menu { transition: none; }
}
.ks-col { display: flex; flex-direction: column; align-items: center; padding: .25rem; }
.ks-item {
position: relative;
display: flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
padding: .5rem;
transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.ks-item:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.ks-i { width: 1rem; height: 1rem; flex-shrink: 0; }
.ks-theme .lucide-sun, .dark .ks-theme .lucide-moon { display: none; }
.dark .ks-theme .lucide-sun { display: block; }
/* ---- command-menu button ---- */
.kk {
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
z-index: 50;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-size: 13px;
}
.kk:focus { outline: 2px solid #0000; outline-offset: 2px; }
.kk:focus-visible { box-shadow: 0 0 0 2px hsl(var(--ring)); }
.kk-label { display: none; }
.kk-icon { width: 1rem; height: 1rem; }
@media (min-width: 640px) {
.kk-label { display: inline; }
.kk-icon { display: none; }
}
@media print {
.ks, .kk { display: none !important; }
}
/* ---- User Settings panel ---- */
.sp {
position: fixed;
inset: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
background-color: hsl(var(--background) / .8);
padding: 1rem;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.sp-box {
width: 100%;
max-width: 48rem;
border-radius: 1.5rem;
border: 1px solid hsl(var(--border) / .6);
background-color: hsl(var(--background));
box-shadow: 0 25px 50px -12px #00000040;
}
.sp-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 2rem 1rem;
}
.sp-h { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -.025em; }
.sp-sub { margin-top: .25rem; font-size: .75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }
.sp-x {
border-radius: 9999px;
padding: .5rem;
transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.sp-x:hover { background-color: hsl(var(--muted)); }
.sp-i { width: 1rem; height: 1rem; }
.sp-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: .75rem;
padding: 0 1.5rem 1rem;
}
@media (min-width: 640px) {
.sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sp-cell {
border-radius: 1rem;
border: 1px solid hsl(var(--border) / .6);
background-color: hsl(var(--muted) / .3);
padding: 1.25rem;
transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.sp-cell:hover { background-color: hsl(var(--muted) / .5); }
.sp-cell-head { margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.sp-cell-icon { border-radius: var(--radius); background-color: hsl(var(--background) / .8); padding: .375rem; }
.sp-cell-title { font-size: .875rem; line-height: 1.25rem; font-weight: 600; }
.sp-radios > * + * { margin-top: .5rem; }
.sp-radio { display: flex; cursor: pointer; align-items: center; gap: .75rem; }
.sp-radio-input { width: 1rem; height: 1rem; flex-shrink: 0; }
.sp-radio-text { font-size: .875rem; line-height: 1.25rem; }
.sp-help { margin-top: .75rem; font-size: .75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }
.sp-ai { margin-bottom: .75rem; display: flex; align-items: center; gap: .375rem; }
.sp-ai-btn {
display: flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
border-radius: var(--radius);
transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.sp-ai-btn:hover, .sp-act:hover { background-color: hsl(var(--muted) / .6); }
.sp-acts > * + * { margin-top: .375rem; }
.sp-act {
display: flex;
width: 100%;
align-items: center;
gap: .5rem;
border-radius: var(--radius);
padding: .375rem .5rem;
font-size: .875rem;
line-height: 1.25rem;
transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.sp-act-icon { width: .875rem; height: .875rem; color: hsl(var(--muted-foreground)); }
.sp-fb { margin-top: .5rem; font-size: .75rem; line-height: 1rem; font-weight: 500; color: hsl(var(--foreground)); }
.sp-foot { display: flex; justify-content: flex-end; padding: .5rem 2rem 1.5rem; }
.sp-done {
border-radius: 9999px;
background-color: hsl(var(--foreground));
padding: .5rem 1.5rem;
font-size: .875rem;
line-height: 1.25rem;
font-weight: 500;
color: hsl(var(--background));
transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
}
.sp-done:hover { opacity: .9; }
/* ---- command menu (a native