spb/autoscholar
Public
1@import "tailwindcss";23@custom-variant dark (&:where(.dark, .dark *));45/* ───────────────────────────── Design tokens ─────────────────────────────6 Palette: graphite ink · warm ivory · muted stone · oxide accent (terracotta7 evolved toward a deeper, print-like oxide red) · cobalt as the scientific8 secondary for visualizations and interactive states. Light and dark are9 tuned separately (dark is not an inversion). */10@theme {11 --font-serif: var(--font-newsreader), "Iowan Old Style", "Palatino Linotype", Georgia, serif;12 --font-sans: var(--font-geist), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;13 --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;1415 --color-ivory-50: #fcfbf7;16 --color-ivory-100: #f6f3eb;17 --color-ivory-200: #ece7da;18 --color-stone-100: #e6e1d6;19 --color-stone-200: #d3ccbd;20 --color-stone-300: #b3aa98;21 --color-stone-400: #8a8273;22 --color-stone-500: #67604f;23 --color-stone-600: #4a453a;24 --color-ink-700: #33302a;25 --color-ink-800: #23211c;26 --color-ink-900: #16150f;27 --color-ink-950: #0d0d0a;28 --color-oxide-400: #c25d33;29 --color-oxide-500: #a84a25;30 --color-oxide-600: #8a3a1a;31 --color-oxide-700: #6b2c12;32 --color-cobalt-400: #4f7fd1;33 --color-cobalt-500: #2f5fb3;34 --color-cobalt-600: #244a8d;35 --color-ok-500: #2f6f4e;36 --color-warn-500: #9a6b12;37 --color-danger-500: #a2342f;38 --color-info-500: #2f5fb3;39 --color-accent-500: #a84a25;4041 --breakpoint-xs: 30rem;42}4344:root {45 --bg: var(--color-ivory-50);46 --bg-elev: #ffffff;47 --bg-muted: var(--color-ivory-100);48 --bg-sunken: var(--color-ivory-200);49 --fg: var(--color-ink-900);50 --fg-muted: var(--color-stone-500);51 --fg-subtle: #6e6758;52 --line: var(--color-stone-200);53 --line-strong: var(--color-stone-300);54 --accent: var(--color-oxide-500);55 --accent-strong: var(--color-oxide-600);56 --accent-soft: color-mix(in oklab, var(--color-oxide-500) 10%, transparent);57 --accent-fg: #ffffff;58 --sci: var(--color-cobalt-500);59 --sci-soft: color-mix(in oklab, var(--color-cobalt-500) 10%, transparent);60 --ring: var(--color-oxide-500);61 --shadow-1: 0 1px 2px rgb(22 21 15 / 0.05), 0 1px 1px rgb(22 21 15 / 0.03);62 --shadow-2: 0 10px 30px -12px rgb(22 21 15 / 0.18), 0 2px 6px -2px rgb(22 21 15 / 0.06);63 --radius: 0.75rem;64 --header-h: 3.5rem;65 --safe-t: env(safe-area-inset-top, 0px);66 --safe-b: env(safe-area-inset-bottom, 0px);67 --safe-l: env(safe-area-inset-left, 0px);68 --safe-r: env(safe-area-inset-right, 0px);69 color-scheme: light;70}7172.dark {73 --bg: var(--color-ink-950);74 --bg-elev: #15140f;75 --bg-muted: #1c1b16;76 --bg-sunken: #0a0a08;77 --fg: #efeadf;78 --fg-muted: #b5ac9c;79 --fg-subtle: #87806f;80 --line: #2c2a23;81 --line-strong: #44403a;82 --accent: #d8784d;83 --accent-strong: #e58a60;84 --accent-soft: color-mix(in oklab, #d8784d 14%, transparent);85 --accent-fg: #15140f;86 --sci: #7ea3e6;87 --sci-soft: color-mix(in oklab, #7ea3e6 14%, transparent);88 --ring: #d8784d;89 --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);90 --shadow-2: 0 14px 40px -14px rgb(0 0 0 / 0.7);91 color-scheme: dark;92}9394/* ───────────────────────────── Base ───────────────────────────── */95@layer base {96 html {97 background: var(--bg);98 color: var(--fg);99 font-family: var(--font-sans);100 font-size: 16px;101 -webkit-font-smoothing: antialiased;102 text-rendering: optimizeLegibility;103 scroll-behavior: smooth;104 scroll-padding-top: calc(var(--header-h) + 1rem);105 overflow-x: clip;106 }107 body {108 min-height: 100dvh;109 overflow-x: clip;110 line-height: 1.55;111 }112 @media (prefers-reduced-motion: reduce) {113 html {114 scroll-behavior: auto;115 }116 /* biome-ignore lint/complexity/noImportantStyles: reduced-motion must win over component transitions */117 *,118 *::before,119 *::after {120 animation-duration: 0.001ms !important;121 animation-iteration-count: 1 !important;122 transition-duration: 0.001ms !important;123 }124 }125 ::selection {126 background: color-mix(in oklab, var(--accent) 28%, transparent);127 }128 :focus-visible {129 outline: 2px solid var(--ring);130 outline-offset: 2px;131 border-radius: 3px;132 }133 h1,134 h2,135 h3,136 .serif {137 font-family: var(--font-serif);138 letter-spacing: -0.012em;139 text-wrap: balance;140 font-feature-settings:141 "kern",142 "liga",143 "onum" 0;144 }145 p {146 text-wrap: pretty;147 }148 a {149 text-underline-offset: 3px;150 text-decoration-thickness: 1px;151 }152 a:not([class]) {153 color: var(--accent);154 text-decoration: underline;155 }156 code,157 kbd,158 pre {159 font-family: var(--font-mono);160 font-feature-settings: "liga" 0;161 }162 img,163 svg,164 video,165 canvas {166 max-width: 100%;167 height: auto;168 }169 button,170 input,171 select,172 textarea {173 font: inherit;174 color: inherit;175 }176 summary {177 cursor: pointer;178 list-style: none;179 }180 summary::-webkit-details-marker {181 display: none;182 }183 table {184 border-collapse: collapse;185 }186 [hidden] {187 display: none;188 }189 /* grid/flex children default to min-width:auto, which lets long mono strings push layouts wider than the viewport */190 .grid > *,191 .flex > * {192 min-width: 0;193 }194 .surface,195 .surface-flat,196 .surface-muted {197 min-width: 0;198 overflow-wrap: anywhere;199 }200}201202/* ───────────────────────────── Components ───────────────────────────── */203@layer components {204 /* layout */205 .container-x {206 @apply mx-auto w-full max-w-7xl;207 padding-left: max(1rem, var(--safe-l));208 padding-right: max(1rem, var(--safe-r));209 }210 @media (min-width: 40rem) {211 .container-x {212 padding-left: max(1.5rem, var(--safe-l));213 padding-right: max(1.5rem, var(--safe-r));214 }215 }216 @media (min-width: 64rem) {217 .container-x {218 padding-left: max(2.5rem, var(--safe-l));219 padding-right: max(2.5rem, var(--safe-r));220 }221 }222 .container-narrow {223 @apply mx-auto w-full max-w-3xl;224 }225 .container-reading {226 @apply mx-auto w-full max-w-[42rem];227 }228 .section {229 @apply py-12 sm:py-16 lg:py-24;230 }231 .section-tight {232 @apply py-8 sm:py-12 lg:py-16;233 }234235 /* type scale (clamp between phone and desktop) */236 .display {237 font-family: var(--font-serif);238 font-weight: 500;239 font-size: clamp(2.125rem, 1.4rem + 3.3vw, 4.25rem);240 line-height: 1.02;241 letter-spacing: -0.022em;242 }243 .title-1 {244 font-family: var(--font-serif);245 font-weight: 500;246 font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);247 line-height: 1.1;248 letter-spacing: -0.018em;249 }250 .title-2 {251 font-family: var(--font-serif);252 font-weight: 500;253 font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);254 line-height: 1.18;255 }256 .title-3 {257 font-family: var(--font-serif);258 font-weight: 500;259 font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);260 line-height: 1.3;261 }262 .lede {263 font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);264 line-height: 1.55;265 color: var(--fg-muted);266 max-width: 38rem;267 text-wrap: pretty;268 }269 .eyebrow {270 font-family: var(--font-sans);271 @apply text-[11px] font-semibold uppercase tracking-[0.16em];272 color: var(--accent);273 }274 .eyebrow-sci {275 color: var(--sci);276 }277 .label {278 @apply block text-[11px] font-medium uppercase tracking-[0.12em];279 color: var(--fg-subtle);280 }281 .muted {282 color: var(--fg-muted);283 }284 .subtle {285 color: var(--fg-subtle);286 }287 .hairline {288 border-color: var(--line);289 }290 .rule {291 height: 1px;292 background: var(--line);293 }294 .rule-ornament {295 display: flex;296 align-items: center;297 gap: 0.75rem;298 color: var(--fg-subtle);299 }300 .rule-ornament::before,301 .rule-ornament::after {302 content: "";303 flex: 1;304 height: 1px;305 background: var(--line);306 }307308 /* surfaces */309 .surface {310 background: var(--bg-elev);311 border: 1px solid var(--line);312 border-radius: var(--radius);313 box-shadow: var(--shadow-1);314 }315 .surface-flat {316 background: var(--bg-elev);317 border: 1px solid var(--line);318 border-radius: var(--radius);319 }320 .surface-muted {321 background: var(--bg-muted);322 border: 1px solid var(--line);323 border-radius: var(--radius);324 }325 .surface-ink {326 background: var(--color-ink-900);327 color: #efeadf;328 border-radius: var(--radius);329 }330 .dark .surface-ink {331 background: #0a0a08;332 border: 1px solid var(--line);333 }334 .card-link {335 transition:336 transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),337 box-shadow 220ms cubic-bezier(0.2, 0.7, 0.2, 1),338 border-color 220ms;339 }340 @media (hover: hover) {341 .card-link:hover {342 transform: translateY(-2px);343 box-shadow: var(--shadow-2);344 border-color: var(--line-strong);345 }346 }347 .paper-ruled {348 background-image: linear-gradient(var(--line) 1px, transparent 1px);349 background-size: 100% 1.65rem;350 background-position: 0 0.4rem;351 }352353 /* controls — 44px minimum touch targets on coarse pointers */354 .btn {355 @apply inline-flex items-center justify-center gap-2 rounded-lg px-3.5 text-sm font-medium;356 min-height: 2.5rem;357 border: 1px solid var(--line-strong);358 background: var(--bg-elev);359 color: var(--fg);360 text-decoration: none;361 transition:362 background 150ms,363 border-color 150ms,364 color 150ms,365 transform 150ms;366 white-space: nowrap;367 }368 @media (pointer: coarse) {369 .btn {370 min-height: 2.75rem;371 }372 }373 .btn:hover {374 background: var(--bg-muted);375 border-color: var(--line-strong);376 }377 .btn:active {378 transform: translateY(1px);379 }380 .btn:disabled {381 opacity: 0.5;382 cursor: not-allowed;383 }384 .btn-primary {385 background: var(--accent);386 color: var(--accent-fg);387 border-color: transparent;388 }389 .btn-primary:hover {390 background: var(--accent-strong);391 }392 .btn-ghost {393 border-color: transparent;394 background: transparent;395 }396 .btn-ghost:hover {397 background: var(--bg-muted);398 }399 .btn-danger {400 color: var(--color-danger-500);401 border-color: color-mix(in oklab, var(--color-danger-500) 40%, transparent);402 }403 .btn-sm {404 @apply px-2.5 text-xs;405 min-height: 2rem;406 }407 @media (pointer: coarse) {408 .btn-sm {409 min-height: 2.5rem;410 }411 }412 .btn-icon {413 @apply inline-flex items-center justify-center rounded-lg;414 width: 2.5rem;415 height: 2.5rem;416 border: 1px solid transparent;417 color: var(--fg-muted);418 background: transparent;419 transition:420 background 150ms,421 color 150ms;422 }423 .btn-icon:hover {424 background: var(--bg-muted);425 color: var(--fg);426 }427 .input {428 @apply w-full rounded-lg px-3 text-sm;429 min-height: 2.5rem;430 background: var(--bg-elev);431 border: 1px solid var(--line-strong);432 color: var(--fg);433 transition:434 border-color 150ms,435 box-shadow 150ms;436 }437 @media (pointer: coarse) {438 .input {439 min-height: 2.75rem;440 font-size: 16px; /* avoids iOS zoom on focus */441 }442 }443 .input:focus {444 outline: none;445 border-color: var(--accent);446 box-shadow: 0 0 0 3px var(--accent-soft);447 }448 textarea.input {449 min-height: 8rem;450 padding-top: 0.6rem;451 line-height: 1.5;452 }453 select.input {454 appearance: none;455 padding-right: 2.25rem;456 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%238a8273' stroke-width='1.5' d='M2.5 4.5 6 8l3.5-3.5'/></svg>");457 background-repeat: no-repeat;458 background-position: right 0.75rem center;459 }460 .chip {461 @apply inline-flex items-center gap-1.5 rounded-full px-3 text-xs font-medium;462 min-height: 2rem;463 border: 1px solid var(--line-strong);464 background: var(--bg-elev);465 color: var(--fg);466 text-decoration: none;467 white-space: nowrap;468 }469 .chip-active {470 border-color: var(--accent);471 background: var(--accent-soft);472 color: var(--accent-strong);473 }474 .badge {475 @apply inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium uppercase tracking-[0.08em];476 border: 1px solid var(--line-strong);477 color: var(--fg-muted);478 white-space: nowrap;479 }480 .badge-accent {481 border-color: color-mix(in oklab, var(--accent) 45%, transparent);482 color: var(--accent-strong);483 background: var(--accent-soft);484 }485 .badge-sci {486 border-color: color-mix(in oklab, var(--sci) 45%, transparent);487 color: var(--sci);488 background: var(--sci-soft);489 }490 .kbd {491 @apply inline-flex items-center rounded px-1.5 py-0.5 text-[11px];492 border: 1px solid var(--line-strong);493 color: var(--fg-muted);494 font-family: var(--font-mono);495 }496 .mono-id {497 font-family: var(--font-mono);498 font-size: 0.75rem;499 letter-spacing: 0.02em;500 color: var(--fg-muted);501 }502503 /* header */504 .site-header {505 position: sticky;506 top: 0;507 z-index: 40;508 padding-top: var(--safe-t);509 background: color-mix(in oklab, var(--bg) 82%, transparent);510 backdrop-filter: saturate(160%) blur(14px);511 -webkit-backdrop-filter: saturate(160%) blur(14px);512 border-bottom: 1px solid transparent;513 transition:514 border-color 200ms,515 box-shadow 200ms;516 }517 .site-header[data-scrolled="true"] {518 border-bottom-color: var(--line);519 box-shadow: 0 1px 0 color-mix(in oklab, var(--line) 60%, transparent);520 }521 .nav-link {522 @apply rounded-md px-2.5 py-1.5 text-sm;523 color: var(--fg-muted);524 text-decoration: none;525 transition:526 color 150ms,527 background 150ms;528 }529 .nav-link:hover,530 .nav-link[aria-current="page"] {531 color: var(--fg);532 background: var(--bg-muted);533 }534 .drawer-backdrop {535 position: fixed;536 inset: 0;537 z-index: 50;538 background: color-mix(in oklab, var(--color-ink-950) 45%, transparent);539 backdrop-filter: blur(2px);540 animation: fade-in 180ms ease-out;541 }542 .drawer-panel {543 position: fixed;544 top: 0;545 right: 0;546 bottom: 0;547 z-index: 51;548 width: min(22rem, 88vw);549 background: var(--bg);550 border-left: 1px solid var(--line);551 padding: calc(var(--safe-t) + 0.75rem) max(1rem, var(--safe-r)) calc(var(--safe-b) + 1rem) 1rem;552 overflow-y: auto;553 animation: slide-in-right 240ms cubic-bezier(0.2, 0.7, 0.2, 1);554 box-shadow: var(--shadow-2);555 }556 .sheet-panel {557 position: fixed;558 left: 0;559 right: 0;560 bottom: 0;561 z-index: 51;562 max-height: min(88dvh, 100dvh - var(--safe-t) - 2rem);563 background: var(--bg);564 border-top: 1px solid var(--line);565 border-radius: 1.25rem 1.25rem 0 0;566 padding: 0.5rem max(1rem, var(--safe-r)) calc(var(--safe-b) + 1rem) max(1rem, var(--safe-l));567 overflow-y: auto;568 animation: slide-in-up 260ms cubic-bezier(0.2, 0.7, 0.2, 1);569 box-shadow: var(--shadow-2);570 }571 .sheet-handle {572 width: 2.5rem;573 height: 0.3rem;574 border-radius: 999px;575 background: var(--line-strong);576 margin: 0.25rem auto 0.75rem;577 }578579 /* prose for paper content */580 .prose-paper {581 font-family: var(--font-serif);582 font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);583 line-height: 1.65;584 font-feature-settings: "kern", "liga";585 }586 .prose-paper p {587 margin: 0 0 1em;588 }589 .prose-paper p:last-child {590 margin-bottom: 0;591 }592 .prose-paper h1,593 .prose-paper h2,594 .prose-paper h3 {595 margin: 1.6em 0 0.5em;596 line-height: 1.2;597 font-weight: 500;598 }599 .prose-paper h1 {600 font-size: 1.6rem;601 }602 .prose-paper h2 {603 font-size: 1.3rem;604 }605 .prose-paper h3 {606 font-size: 1.1rem;607 }608 .prose-paper ul,609 .prose-paper ol {610 padding-left: 1.4em;611 margin: 0 0 1em;612 }613 .prose-paper li {614 margin: 0.3em 0;615 }616 .prose-paper code {617 font-family: var(--font-mono);618 font-size: 0.82em;619 background: var(--bg-muted);620 padding: 0.1em 0.35em;621 border-radius: 4px;622 }623 .prose-paper pre {624 background: var(--bg-muted);625 padding: 1em;626 border-radius: 8px;627 overflow: auto;628 font-size: 0.85rem;629 line-height: 1.5;630 }631 .prose-paper pre code {632 background: none;633 padding: 0;634 }635 .prose-paper blockquote {636 border-left: 3px solid var(--line-strong);637 padding-left: 1em;638 color: var(--fg-muted);639 margin: 0 0 1em;640 }641 .prose-paper table {642 border-collapse: collapse;643 width: 100%;644 font-family: var(--font-sans);645 font-size: 0.9rem;646 margin: 0 0 1em;647 }648 .prose-paper th,649 .prose-paper td {650 border-bottom: 1px solid var(--line);651 padding: 0.4em 0.6em;652 text-align: left;653 }654 .prose-paper a {655 color: var(--accent);656 text-decoration: underline;657 }658 .prose-editorial {659 font-family: var(--font-serif);660 font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);661 line-height: 1.6;662 }663 .prose-editorial p {664 margin: 0 0 1.1em;665 }666 .prose-editorial p:first-of-type::first-letter {667 font-size: 3.1em;668 float: left;669 line-height: 0.82;670 padding: 0.08em 0.1em 0 0;671 font-weight: 500;672 color: var(--accent);673 }674 .dropcap-off p:first-of-type::first-letter {675 all: unset;676 }677678 /* math */679 .math-inline,680 .math-display {681 font-size: 1.02em;682 }683 .math-display {684 display: block;685 overflow-x: auto;686 overflow-y: hidden;687 padding: 0.4rem 0;688 -webkit-overflow-scrolling: touch;689 }690 .math-display .katex-display {691 margin: 0.25rem 0;692 }693694 /* tables */695 .table {696 @apply w-full text-sm;697 }698 .table th {699 @apply text-left text-[11px] font-semibold uppercase tracking-[0.1em] py-2 pr-4;700 color: var(--fg-subtle);701 border-bottom: 1px solid var(--line-strong);702 white-space: nowrap;703 }704 .table td {705 @apply py-2.5 pr-4 align-top;706 border-bottom: 1px solid var(--line);707 }708 .table tbody tr:hover td {709 background: color-mix(in oklab, var(--bg-muted) 60%, transparent);710 }711 .table-wrap {712 overflow-x: auto;713 -webkit-overflow-scrolling: touch;714 margin-inline: -0.25rem;715 padding-inline: 0.25rem;716 }717718 .skip-link {719 position: absolute;720 left: -999px;721 top: 0;722 z-index: 100;723 background: var(--accent);724 color: var(--accent-fg);725 padding: 0.5rem 1rem;726 border-radius: 0 0 0.5rem 0;727 }728 .skip-link:focus {729 left: 0;730 }731732 /* skeletons */733 .skeleton {734 position: relative;735 overflow: hidden;736 background: var(--bg-muted);737 border-radius: 6px;738 }739 .skeleton::after {740 content: "";741 position: absolute;742 inset: 0;743 background: linear-gradient(744 90deg,745 transparent,746 color-mix(in oklab, var(--bg-elev) 70%, transparent),747 transparent748 );749 animation: shimmer 1.4s infinite;750 }751752 /* motion */753 .reveal {754 animation: rise-in 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both;755 }756 .reveal-2 {757 animation-delay: 80ms;758 }759 .reveal-3 {760 animation-delay: 160ms;761 }762 .reveal-4 {763 animation-delay: 240ms;764 }765766 /* pipeline timeline */767 .pipeline {768 position: relative;769 }770 .pipeline::before {771 content: "";772 position: absolute;773 left: 1.1rem;774 top: 1.25rem;775 bottom: 1.25rem;776 width: 1px;777 background: linear-gradient(var(--line-strong), var(--line) 60%, transparent);778 }779 .pipeline-node {780 position: relative;781 width: 2.25rem;782 height: 2.25rem;783 border-radius: 999px;784 display: inline-flex;785 align-items: center;786 justify-content: center;787 font-family: var(--font-mono);788 font-size: 0.8rem;789 border: 1px solid var(--line-strong);790 background: var(--bg-elev);791 color: var(--fg);792 flex: none;793 }794 .pipeline-node[data-tone="worker"] {795 border-color: color-mix(in oklab, var(--sci) 55%, transparent);796 color: var(--sci);797 }798 .pipeline-node[data-tone="control"] {799 border-color: color-mix(in oklab, var(--accent) 55%, transparent);800 color: var(--accent-strong);801 }802803 /* sticky action bar on mobile paper page */804 .mobile-bar {805 position: fixed;806 left: 0;807 right: 0;808 bottom: 0;809 z-index: 30;810 padding: 0.5rem max(1rem, var(--safe-r)) calc(var(--safe-b) + 0.5rem) max(1rem, var(--safe-l));811 background: color-mix(in oklab, var(--bg) 88%, transparent);812 backdrop-filter: blur(12px);813 -webkit-backdrop-filter: blur(12px);814 border-top: 1px solid var(--line);815 }816}817818@keyframes fade-in {819 from {820 opacity: 0;821 }822 to {823 opacity: 1;824 }825}826@keyframes slide-in-right {827 from {828 transform: translateX(24px);829 opacity: 0;830 }831 to {832 transform: translateX(0);833 opacity: 1;834 }835}836@keyframes slide-in-up {837 from {838 transform: translateY(32px);839 opacity: 0;840 }841 to {842 transform: translateY(0);843 opacity: 1;844 }845}846@keyframes rise-in {847 from {848 transform: translateY(10px);849 }850 to {851 transform: translateY(0);852 }853}854@keyframes shimmer {855 from {856 transform: translateX(-100%);857 }858 to {859 transform: translateX(100%);860 }861}862863/* KaTeX stylesheet is imported from the package in the root layout; dark-mode colours inherit via currentColor. */864.katex {865 color: inherit;866}867