/* the hanji chrome, static */
:root[data-theme]{--color-paper:#fcfcf8;--color-sheet:oklch(99.80% 0.0053 106.5);--color-well:oklch(97.80% 0.0053 106.5);--color-ink:#1e1c18;--color-accent:#1e8485;--color-accent-text:oklch(54.94% 0.0878 195.9);--color-on-accent:oklch(12.00% 0.0000 89.9);--color-mark:#2c2e32;color-scheme:light;}
:root[data-theme="dark"]{--color-paper:oklch(23.50% 0.0060 106.5);--color-sheet:oklch(25.70% 0.0060 106.5);--color-well:oklch(21.90% 0.0060 106.5);--color-ink:oklch(93.00% 0.0081 84.6);--color-accent:#1e8485;--color-accent-text:oklch(60.94% 0.0878 195.9);--color-on-accent:oklch(12.00% 0.0000 89.9);--color-mark:oklch(88.00% 0.0077 264.5);color-scheme:dark;}
@media (prefers-color-scheme:dark){:root[data-theme="auto"]{--color-paper:oklch(23.50% 0.0060 106.5);--color-sheet:oklch(25.70% 0.0060 106.5);--color-well:oklch(21.90% 0.0060 106.5);--color-ink:oklch(93.00% 0.0081 84.6);--color-accent:#1e8485;--color-accent-text:oklch(60.94% 0.0878 195.9);--color-on-accent:oklch(12.00% 0.0000 89.9);--color-mark:oklch(88.00% 0.0077 264.5);color-scheme:dark;}}
:root{
--color-ink-soft:color-mix(in oklab,var(--color-ink) 88%,var(--color-paper));
--color-muted:color-mix(in oklab,var(--color-ink) 62%,var(--color-paper));
--color-faint:color-mix(in oklab,var(--color-ink) 42%,var(--color-paper));
--color-hairline:color-mix(in oklab,var(--color-ink) 10%,var(--color-paper));
--color-accent-soft:color-mix(in oklab,var(--color-accent) 60%,var(--color-paper));
--font-serif:Newsreader,Georgia,"Times New Roman",serif;
--font-sans:Inter,ui-sans-serif,system-ui,sans-serif;
--font-mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,monospace;
--measure:680px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-sans)}
::selection{background:color-mix(in oklab,var(--color-accent) 22%,transparent)}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid color-mix(in oklab,var(--color-accent) 55%,transparent);outline-offset:2px}
/* A whisper of handmade-paper grain over everything. */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.02;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.025}
@media (prefers-color-scheme:dark){:root[data-theme="auto"] .grain{mix-blend-mode:screen;opacity:.025}}
.frame{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}
aside{border-right:1px solid var(--color-hairline);padding:2rem 1.25rem 2rem 1.5rem;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--color-ink) 14%,transparent) transparent}
aside::-webkit-scrollbar{width:5px}
aside::-webkit-scrollbar-track{background:transparent}
aside::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--color-ink) 12%,transparent);border-radius:9999px}
aside:hover::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--color-ink) 22%,transparent)}
.lockup{margin:0 0 1.25rem;display:flex;align-items:center;gap:.55rem;font-family:var(--font-serif);font-size:1.35rem;font-weight:600;line-height:1.5rem}
.lockup a{display:flex;align-items:center;gap:.55rem;color:var(--color-ink);text-decoration:none;line-height:1.5rem}
.lockup .mark{width:1.5rem;height:1.5rem;transform:translateY(-2px)}
.lockup .sep{color:var(--color-faint);font-weight:400}
.lockup a.site{color:var(--color-ink-soft)}
.lockup a:hover{color:var(--color-accent-text)}
nav{font-size:.85rem;line-height:1.5}
nav a{display:block;padding:.28rem .5rem;border-radius:6px;color:var(--color-ink-soft);text-decoration:none}
nav a:hover{background:color-mix(in oklab,var(--color-ink) 6%,transparent)}
nav a[aria-current]{background:color-mix(in oklab,var(--color-accent) 12%,transparent);color:var(--color-accent-text);font-weight:500}
nav details{padding-left:.1rem}nav details nav,nav details details,nav details a{margin-left:.8rem}
nav summary{cursor:pointer;padding:.28rem .5rem;color:var(--color-ink-soft);display:flex;align-items:center;gap:.45rem;border-radius:6px;list-style:none}
nav summary::-webkit-details-marker{display:none}
nav summary::before{content:"";flex:none;width:.4em;height:.4em;border-right:1.5px solid var(--color-faint);border-top:1.5px solid var(--color-faint);transform:rotate(45deg);transition:transform .15s}
nav details[open]>summary::before{transform:rotate(135deg)}
nav summary:hover{background:color-mix(in oklab,var(--color-ink) 6%,transparent)}
nav summary a{display:inline;padding:0;margin-left:0}
nav .mount-label{margin:1.1rem 0 .3rem;padding:0 .5rem;font-size:.68rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--color-faint)}
main{padding:3.2rem 2.5rem 4rem;display:flex;flex-direction:column;align-items:center}
.topline{width:100%;max-width:var(--measure);display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 .4rem}
.crumbs{margin:0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-faint)}
.crumbs a{color:var(--color-faint);text-decoration:none}.crumbs a:hover{color:var(--color-accent-text)}
/* A control that cannot work never appears: data-js is set by the pre-paint
   script, so a reader without JavaScript simply follows the OS. */
.theme-toggle{display:none}
:root[data-js] .theme-toggle{display:flex;flex:none;gap:.1rem;align-items:center}
.theme-toggle button{appearance:none;border:0;background:none;cursor:pointer;font-family:var(--font-sans);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-faint);padding:.2rem .45rem;border-radius:999px}
.theme-toggle button:hover{color:var(--color-ink-soft);background:color-mix(in oklab,var(--color-ink) 6%,transparent)}
.theme-toggle button[aria-pressed="true"]{color:var(--color-accent-text);background:color-mix(in oklab,var(--color-accent) 12%,transparent)}
article{width:100%;max-width:var(--measure)}
/* The masthead is chrome that lives INSIDE the article, so every rule here
   has to outrank the reading surface it sits in: .prose-hanji img and
   .cover-head img tie on specificity, and prose.css is appended last, which
   sized the mark at 92% of the measure. The article prefix settles it. */
article .cover-head{text-align:center;margin:1.5rem 0 3rem}
article .cover-head img{width:4.2rem;height:4.2rem;margin:0 auto 1rem;border-radius:0}
article .cover-head h1{font-family:var(--font-serif);font-size:2.7rem;letter-spacing:-.022em;margin:0 0 .5rem;line-height:1.1}
article .cover-head p{font-family:var(--font-serif);font-style:italic;font-size:1.15rem;color:var(--color-muted);margin:0 0 1.4rem}
article .cover-head .go{display:inline-block;background:var(--color-accent);color:var(--color-on-accent);padding:.6rem 1.2rem;border-radius:9px;font-family:var(--font-sans);font-size:.88rem;font-weight:500;text-decoration:none}
article .cover-head .go:hover{opacity:.92}
article .cover-rule{border:0;border-top:1px solid var(--color-hairline);margin:0 0 2.5rem}
footer{width:100%;max-width:var(--measure);margin-top:4rem;padding-top:1rem;border-top:1px solid var(--color-hairline);font-size:.75rem;color:var(--color-faint)}
footer a{color:var(--color-muted)}
@media (max-width:820px){.frame{grid-template-columns:1fr}aside{position:static;height:auto;border-right:0;border-bottom:1px solid var(--color-hairline)}main{padding:2rem 1.2rem 3rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}}

/* The reading surface, shared. The app imports this file; `hanji export`
   inlines it into the published site, so a page reads the same in the app
   and on the web - the drift between the two was a real bug (highlights and
   task lists shipped styled in the app and plain on the published site).
   Rules only: every colour is a var(--color-*) token each host defines for
   itself (the app from its @theme seeds and the owner's runtime palette, the
   exporter from a :root block of its own). Nothing here may reach for a
   Tailwind utility or the app's DOM - the exporter has neither. */
/* Editorial reading surface. */
.prose-hanji {
  font-family: var(--font-serif);
  color: var(--color-ink);
  /* The reading size. --content-size is the owner's "Content text size"
     setting; every in-prose size below is em, so one variable scales the
     whole reading surface. */
  font-size: var(--content-size, 1.3125rem);
  line-height: 1.72;
  font-weight: 400;
  font-optical-sizing: auto;
  /* Underscore-joined names and long URLs carry no break opportunities;
     let them wrap mid-token rather than overflow the measure. */
  overflow-wrap: break-word;
}
.prose-hanji > * + * {
  margin-top: 1.5em;
}
.prose-hanji h1,
.prose-hanji h2,
.prose-hanji h3,
.prose-hanji h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.011em;
  color: var(--color-ink);
}
/* The document title: view mode renders it as a static heading above the prose
   and strips the duplicate from the body; edit mode has no static title, so the
   editor's own first `# ` heading is the title and needs to read at title size. */
.prose-hanji h1 {
  font-size: 2.06em;
  line-height: 1.07;
  letter-spacing: -0.022em;
}
.prose-hanji h1 + * {
  margin-top: 0.7em;
}
.prose-hanji h2 {
  font-size: 1.31em;
  margin-top: 2.3em;
}
.prose-hanji h3 {
  font-size: 1.04em;
  margin-top: 1.9em;
}
.prose-hanji h4 {
  font-size: 0.87em;
  margin-top: 1.6em;
}
.prose-hanji h2 + *,
.prose-hanji h3 + *,
.prose-hanji h4 + * {
  margin-top: 0.7em;
}
.prose-hanji a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease;
}
.prose-hanji a:hover {
  color: var(--color-accent-text);
  text-decoration-color: var(--color-accent-text);
}
.prose-hanji strong {
  font-weight: 650;
}
.prose-hanji em {
  font-style: italic;
}
/* Highlights. The tint is mixed INTO the page's own paper rather than being a
   fixed colour, so the same four swatches stay legible when the workspace
   theme flips dark - exactly how inline code below picks up the accent. The
   default (a bare <mark>, written as portable ==x== on disk) is the yellow
   one; the three named colours only differ by their tint. */
.prose-hanji mark {
  --hl-tint: #e8b53a;
  background: color-mix(in oklab, var(--hl-tint) 30%, var(--color-paper));
  color: inherit;
  padding: 0.08em 0.14em;
  border-radius: 3px;
  /* A highlight that wraps across lines keeps its padding on both fragments
     instead of stretching one long box. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.prose-hanji mark.hl-blue {
  --hl-tint: #4c8dd8;
}
.prose-hanji mark.hl-green {
  --hl-tint: #4aa86b;
}
.prose-hanji mark.hl-pink {
  --hl-tint: #dd6aa4;
}

.prose-hanji code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: color-mix(in oklab, var(--color-accent) 9%, var(--color-paper));
  padding: 0.12em 0.36em;
  border-radius: 4px;
}
.prose-hanji pre {
  font-family: var(--font-mono);
  font-size: 0.69em;
  line-height: 1.6;
  /* A deep panel that carries the workspace's accent hue rather than a fixed
     slate, so code reads as part of the theme - a warm workspace gets a warm
     block, a green one a green block. Anchored dark against a near-black so it
     stays a legible dark surface in either mode; a quiet accent border sets it
     off from a dark page. */
  background: color-mix(in oklab, var(--color-accent) 16%, #201f1b);
  color: color-mix(in oklab, var(--color-accent) 7%, #f3eee3);
  border: 1px solid color-mix(in oklab, var(--color-accent) 30%, transparent);
  padding: 1.1rem 1.3rem;
  border-radius: 10px;
  overflow-x: auto;
}
.prose-hanji pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
.prose-hanji blockquote {
  border-left: 2.5px solid var(--color-accent);
  padding-left: 1.15rem;
  color: var(--color-ink-soft);
  font-style: italic;
}
.prose-hanji ul,
.prose-hanji ol {
  padding-left: 1.5rem;
}
.prose-hanji li {
  margin-top: 0.4em;
}
.prose-hanji ol {
  list-style: decimal;
}
.prose-hanji ol::marker {
  color: var(--color-faint);
}
/* Celadon-dot bullets, a signature detail. Suppressed for task-list items. */
.prose-hanji ul {
  list-style: none;
}
.prose-hanji ul > li {
  position: relative;
}
.prose-hanji ul > li::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent-soft);
}
.prose-hanji ul > li:has(> input[type="checkbox"])::before {
  display: none;
}
.prose-hanji input[type="checkbox"] {
  accent-color: var(--color-accent);
  margin-right: 0.5em;
  transform: translateY(1px);
}
.prose-hanji hr {
  border: none;
  border-top: 1px solid var(--color-hairline);
  margin: 2.5em 0;
}
.prose-hanji table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72em;
}
.prose-hanji th,
.prose-hanji td {
  border-bottom: 1px solid var(--color-hairline);
  padding: 0.55em 0.85em;
  text-align: left;
}
.prose-hanji th {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}
.prose-hanji img {
  display: block;
  /* Full width sits a touch inside the measure, not edge to edge: a small
     inset reads as embedded rather than pasted over the column. */
  width: 92%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 8px;
}
/* Width: a fixed set of steps, height follows via `height: auto` above. */
.prose-hanji img.w-100 { width: 92%; }
.prose-hanji img.w-75 { width: 75%; }
.prose-hanji img.w-50 { width: 50%; }
.prose-hanji img.w-25 { width: 25%; }
.prose-hanji img.w-12 { width: 12%; }
/* Alignment: block image, margin-auto based. Center is the default above. */
.prose-hanji img.align-left { margin-inline: 0 auto; }
.prose-hanji img.align-center { margin-inline: auto; }
.prose-hanji img.align-right { margin-inline: auto 0; }
/* An image (or media) with a description below it. */
.prose-hanji figure { margin: 0; }
/* Images breathe more than prose: a wider gap above than a paragraph gets,
   in every wrapper form - a captioned figure, a bare block image, or the
   paragraph markdown wraps a lone image in. */
.prose-hanji > * + figure,
.prose-hanji > * + img,
.prose-hanji > p:has(> img:only-child) {
  margin-top: 2.6em;
}
.prose-hanji figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.65em;
  line-height: 1.5;
  color: var(--color-muted);
}
.prose-hanji .wikilink-stub {
  color: var(--color-faint);
  border-bottom: 1px dotted var(--color-faint);
  cursor: help;
}