/* Chopinly pages (documents, tool pages, the blog) — the landing's palette and type, none of the app's JS. */
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-roman.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
:root {
  --sage: #8fae82; --ebony: #191410; --ebony-raised: #26201a; --ebony-edge: #3a3128;
  --ivory: #eee5d3; --ivory-dim: #a2947d; --brass: #c9a35c; --brass-bright: #e3c284; --felt: #b0463c;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ivory); font: 400 1.02rem/1.6 var(--sans); background: radial-gradient(ellipse at 50% -10%, #2a231b 0%, var(--ebony) 55%) fixed var(--ebony); -webkit-font-smoothing: antialiased; }
a { color: var(--brass); }
a:hover { color: var(--brass-bright); }
h1, h2, h3 { font-family: var(--serif); font-weight: 550; font-optical-sizing: auto; margin: 0; line-height: 1.2; }
.l-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; width: min(100% - 2rem, 44rem); margin: 0 auto; padding: calc(0.8rem + env(safe-area-inset-top, 0)) 0 0.8rem; }
.l-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ivory); font: 550 1.25rem var(--serif); }
.l-brand img { width: 32px; height: 32px; border-radius: 8px; }
.l-nav { display: flex; gap: 0.2rem 1rem; flex-wrap: wrap; font-size: 0.9rem; }
.l-nav a { text-decoration: none; color: var(--ivory-dim); }
.l-nav a[aria-current="page"] { color: var(--brass); }
.l-doc { width: min(100% - 2rem, 44rem); margin: 0 auto; padding: 1.5rem 0 3rem; }
.l-doc h1 { font-size: clamp(2rem, 7vw, 2.8rem); margin-bottom: 0.4rem; }
.l-meta { color: var(--ivory-dim); font: italic 1rem var(--serif); margin: 0 0 1.6rem; }
.l-summary { background: #1e1913; border: 1px solid var(--ebony-edge); border-left: 3px solid var(--brass); border-radius: 0.9rem; padding: 1.1rem 1.3rem; margin: 0 0 2rem; }
.l-summary h2 { font-size: 1.05rem; color: var(--brass); margin-bottom: 0.5rem; letter-spacing: 0.02em; }
.l-summary ul { margin: 0; padding-left: 1.1rem; }
.l-summary li + li { margin-top: 0.3rem; }
.l-doc h2 { font-size: 1.45rem; margin: 2rem 0 0.6rem; }
.l-doc h3 { font-size: 1.1rem; margin: 1.2rem 0 0.4rem; color: var(--ivory); }
.l-doc p, .l-doc li { color: #d8cfbd; }
.l-doc p { margin: 0 0 0.9rem; }
.l-doc ul, .l-doc ol { margin: 0 0 0.9rem; padding-left: 1.3rem; }
.l-doc li { margin-bottom: 0.3rem; }
.l-doc b, .l-doc strong { color: var(--ivory); font-weight: 600; }
.l-doc code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--brass-bright); background: var(--ebony-raised); padding: 0.05rem 0.35rem; border-radius: 0.3rem; }
.l-doc table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 1.2rem; font-size: 0.95rem; }
.l-doc th, .l-doc td { text-align: left; vertical-align: top; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--ebony-edge); color: #d8cfbd; }
.l-doc th { color: var(--ivory-dim); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.l-table-wrap { overflow-x: auto; }
.l-note { color: var(--ivory-dim); font-size: 0.92rem; }
.l-foot { width: min(100% - 2rem, 44rem); margin: 0 auto; padding: 1.2rem 0 calc(1.5rem + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--ebony-edge); color: var(--ivory-dim); font-size: 0.85rem; display: flex; justify-content: space-between; gap: 0.6rem 1.2rem; flex-wrap: wrap; }
.l-foot nav { display: flex; gap: 0.2rem 0.9rem; flex-wrap: wrap; }
.l-foot a { color: var(--ivory-dim); text-decoration: none; }
.l-foot a:hover { color: var(--brass); }

/* ---- WSHED-88: tool pages, the blog, the 404 (same shell as the documents) ---- */
.l-open { display: inline-block; text-decoration: none; font: 600 0.9rem var(--sans); color: var(--ebony); background: linear-gradient(180deg, var(--brass-bright), var(--brass)); border-radius: 999px; padding: 0.5rem 1.05rem; white-space: nowrap; }
.l-open:hover { color: var(--ebony); filter: brightness(1.05); }
.l-open-big { font-size: 1.05rem; padding: 0.9rem 1.8rem; box-shadow: 0 8px 28px rgba(201, 163, 92, 0.22); }
.l-nav .l-open { margin-left: 0.4rem; }
.l-crumbs { color: var(--ivory-dim); font-size: 0.85rem; margin: 0 0 0.8rem; }
.l-crumbs a { color: var(--ivory-dim); text-decoration: none; }
.l-crumbs a:hover { color: var(--brass); }
.l-lede { font: 400 1.2rem/1.5 var(--serif); color: #d8cfbd; margin: 0 0 1.4rem; }
.l-cta { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin: 0 0 2rem; }
.l-cta-fine { color: var(--ivory-dim); font-size: 0.85rem; letter-spacing: 0.03em; }
.l-doc blockquote { margin: 0 0 1rem; padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--brass); color: var(--ivory-dim); font-style: italic; }
.l-doc blockquote p { margin: 0; }
.l-doc pre { background: var(--ebony-raised); border: 1px solid var(--ebony-edge); border-radius: 0.6rem; padding: 0.8rem 1rem; overflow-x: auto; margin: 0 0 1rem; }
.l-doc pre code { background: none; padding: 0; color: var(--ivory); }
.l-doc hr { border: 0; border-top: 1px solid var(--ebony-edge); margin: 1.6rem 0; }
.l-doc .table-wrap { overflow-x: auto; }
.l-doc em { color: var(--ivory); }
.l-body h2 { scroll-margin-top: 1rem; }
.l-post-head .l-meta { margin-bottom: 0.9rem; }
.l-meta a { color: var(--ivory-dim); }
.l-toc { background: #1e1913; border: 1px solid var(--ebony-edge); border-radius: 0.9rem; padding: 0.9rem 1.2rem; margin: 0 0 1.6rem; font-size: 0.92rem; }
.l-toc b { display: block; color: var(--brass); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4rem; }
.l-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 1.5rem; }
.l-toc li { margin-bottom: 0.2rem; break-inside: avoid; }
.l-toc a { color: #d8cfbd; text-decoration: none; }
.l-toc a:hover { color: var(--brass); }
@media (max-width: 480px) { .l-toc ol { columns: 1; } }
.l-toolcard { background: #1e1913; border: 1px solid var(--ebony-edge); border-left: 3px solid var(--brass); border-radius: 0.9rem; padding: 1rem 1.2rem; margin: 1.6rem 0; }
.l-toolcard b { display: block; font: 550 1.1rem var(--serif); color: var(--ivory); margin-bottom: 0.3rem; }
.l-toolcard p { margin: 0 0 0.7rem; }
.l-quiet { color: var(--ivory-dim); text-decoration: none; font-size: 0.9rem; margin-left: 0.6rem; }
.l-quiet:hover { color: var(--brass); }
.l-post-foot { margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid var(--ebony-edge); }
.l-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.l-tags span { font-size: 0.78rem; letter-spacing: 0.05em; color: var(--ivory-dim); border: 1px solid var(--ebony-edge); border-radius: 999px; padding: 0.15rem 0.6rem; }
.l-author { color: var(--ivory-dim); font-size: 0.95rem; }
.l-author b { color: var(--ivory); }
.l-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 1.6rem 0 0; }
.l-prevnext a { display: block; background: #1e1913; border: 1px solid var(--ebony-edge); border-radius: 0.9rem; padding: 0.8rem 1rem; text-decoration: none; color: var(--ivory); font: 550 1rem var(--serif); }
.l-prevnext a:last-child { text-align: right; }
.l-prevnext a:hover { border-color: var(--brass); }
.l-prevnext small { display: block; font: 0.72rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ivory-dim); margin-bottom: 0.2rem; }
@media (max-width: 480px) { .l-prevnext { grid-template-columns: 1fr; } .l-prevnext a:last-child { text-align: left; } }
.l-related, .l-more-tools { margin-top: 2.2rem; }
.l-posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.l-posts li { background: #1e1913; border: 1px solid var(--ebony-edge); border-radius: 0.9rem; padding: 0.9rem 1.1rem; }
.l-posts li > a { font: 550 1.15rem var(--serif); color: var(--ivory); text-decoration: none; }
.l-posts li > a:hover { color: var(--brass-bright); }
.l-posts p { margin: 0.25rem 0 0; color: var(--ivory-dim); font-size: 0.95rem; }
.l-posts time { display: block; margin-top: 0.3rem; color: var(--ivory-dim); font: italic 0.85rem var(--serif); }
.l-posts-index { gap: 0.9rem; }
.l-posts-index li > a { font-size: 1.35rem; }
.l-toollist { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; }
.l-toollist li { background: #1e1913; border: 1px solid var(--ebony-edge); border-radius: 0.8rem; padding: 0.7rem 0.9rem; margin: 0; }
.l-toollist a { font: 550 1.05rem var(--serif); color: var(--ivory); text-decoration: none; display: block; }
.l-toollist a:hover { color: var(--brass-bright); }
.l-toollist span { display: block; color: var(--ivory-dim); font-size: 0.85rem; margin-top: 0.2rem; }
.l-toollist-big { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.9rem; margin: 1.4rem 0 2rem; }
.l-toollist-big a { font-size: 1.25rem; }
.l-toollist-big span { font-size: 0.95rem; }
.l-foot-site { display: block; }
.l-foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem 2rem; margin-bottom: 1rem; }
.l-foot-cols nav { display: flex; flex-direction: column; gap: 0.25rem; }
.l-foot-cols b { color: var(--ivory-dim); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.3rem; }
.l-foot-line { margin: 0; }