/* Dragon Docs - Rust-Book-inspired layout.
 *
 * Two-pane layout: fixed sidebar (~280px) on the left, narrow centered
 * content column on the right. Light + dark themes via [data-theme]. No
 * JS required for layout; the theme toggle is the only optional script.
 *
 * Typography: Inter / system sans-serif for body copy at 18px, ~1.65
 * line-height. JetBrains Mono for code. We don't ship web fonts -
 * platforms supply Inter (or a near-equivalent system sans) by default
 * on modern OSes, and the fallback chain reads well even where they
 * don't.
 */

/* ---------- design tokens ---------- */

:root[data-theme="light"] {
    --bg:               #ffffff;
    --bg-sidebar:       #fafafa;
    --bg-code:          #f6f7f6;
    --bg-codebar:       #f0eee2;
    --bg-codeblock:     #fbfaf6;     /* warm off-white, editor-like */
    --bg-tablestripe:   #faf9f5;
    --bg-quote:         #f6f7f6;
    --fg:               #1d2330;
    --fg-codeblock:     #2a2f3a;
    --fg-muted:         #6e6e6e;
    --fg-faded:         #aeaeae;
    --border:           #e2e2e2;
    --border-hard:      #cdd0d3;
    --border-codeblock: #d9d4c0;
    --link:             #3873b3;
    --link-hover:       #2a5a90;
    --active:           #f4ede1;
    --shadow:           0 1px 3px rgba(0,0,0,0.05);

    /* dragon accent - marketing CTAs / primary download buttons */
    --accent:           #cf3a2e;
    --accent-hover:     #ad2d23;
    --accent-fg:        #ffffff;
    --accent-soft:      rgba(207,58,46,0.10);

    /* dragon logo palette (blue + gold) - used on the registry/auth pages
       (login, signup, account, packages). The marketing + download pages keep
       the red --accent above. */
    --brand-blue:       #2080c0;
    --brand-blue-deep:  #0a5fa0;
    --brand-blue-soft:  rgba(32,128,192,0.12);
    --brand-gold:       #f0c40f;
    --brand-gold-deep:  #d0a000;

    /* syntax tokens (GitHub-light-inspired) */
    --tok-comment:      #6e7781;
    --tok-kw:           #cf222e;
    --tok-string:       #0a3069;
    --tok-number:       #0550ae;
    --tok-const:        #0550ae;
    --tok-type:         #953800;
    --tok-builtin:      #8250df;
    --tok-fn:           #8250df;
    --tok-decorator:    #8250df;
    --tok-self:         #953800;
    --tok-var:          #953800;
    --tok-op:           #57606a;
    --tok-prompt:       #99989a;
}

:root[data-theme="dark"] {
    --bg:               #1d1f21;
    --bg-sidebar:       #161719;
    --bg-code:          #2a2e33;
    --bg-codebar:       #353a40;
    --bg-codeblock:     #1a1c1f;     /* darker than page bg → "panel" feel */
    --bg-tablestripe:   #232629;
    --bg-quote:         #25282c;
    --fg:               #e6e6e6;
    --fg-codeblock:     #e1e4ea;
    --fg-muted:         #b8b8b8;
    --fg-faded:         #707070;
    --border:           #303236;
    --border-hard:      #45484c;
    --border-codeblock: #2a2d31;
    --link:             #6aa9e9;
    --link-hover:       #99c5f5;
    --active:           #2c3e57;
    --shadow:           0 1px 3px rgba(0,0,0,0.4);

    /* dragon accent - marketing CTAs / primary download buttons */
    --accent:           #e8553f;
    --accent-hover:     #f06a55;
    --accent-fg:        #ffffff;
    --accent-soft:      rgba(232,85,63,0.16);

    /* dragon logo palette (blue + gold) - lifted a touch for contrast on the
       dark background. Used on the registry/auth pages only. */
    --brand-blue:       #3a9fe0;
    --brand-blue-deep:  #2080c0;
    --brand-blue-soft:  rgba(58,159,224,0.18);
    --brand-gold:       #f0c40f;
    --brand-gold-deep:  #d0a000;

    /* syntax tokens (GitHub-dark-inspired) */
    --tok-comment:      #8b949e;
    --tok-kw:           #ff7b72;
    --tok-string:       #a5d6ff;
    --tok-number:       #79c0ff;
    --tok-const:        #79c0ff;
    --tok-type:         #ffa657;
    --tok-builtin:      #d2a8ff;
    --tok-fn:           #d2a8ff;
    --tok-decorator:    #d2a8ff;
    --tok-self:         #ffa657;
    --tok-var:          #ffa657;
    --tok-op:           #8b949e;
    --tok-prompt:       #6e7681;
}

/* Default theme is light. The toggle button flips data-theme via a tiny JS
 * fragment in app.js; it persists in localStorage. */

/* ---------- reset + base ---------- */

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    /* System sans-serif stack - Inter / SF Pro on Apple, Segoe UI on
       Windows, Roboto on Android, falling back to whatever sans-serif
       the platform ships. Reads cleaner on screens at this body size
       than the previous Source Serif. */
    font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sticky footer: the page is a flex column at least as tall as the viewport, so
   the footer's auto top margin (below) absorbs any leftover space and sits at the
   bottom on short pages - e.g. a near-empty packages list - while staying flush
   with the content on tall pages. */
body.www-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--link);
    text-decoration: none;
}
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ---------- top bar ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.5px;
    color: var(--fg);
    text-decoration: none;
}
.brand:hover { color: var(--link); text-decoration: none; }
.brand:hover .brand-logo { transform: rotate(-6deg); }

.brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    transition: transform 0.18s ease-out;
}

.brand-name {
    font-size: 16px;
}

/* ---------- hero (landing page only) ---------- */

.hero {
    width: 100%;
    max-width: 750px;
    text-align: center;
    margin: 32px 0 40px 0;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.hero-logo {
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto 16px auto;
    image-rendering: -webkit-optimize-contrast;
}

.hero-title {
    margin: 0 0 8px 0;
    font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -0.5px;
    color: var(--fg);
}

.hero-tagline {
    margin: 0;
    font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-style: italic;
    font-size: 18px;
    color: var(--fg-muted);
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.theme-toggle:hover {
    border-color: var(--border-hard);
    background: var(--bg-code);
}

/* ---------- two-pane layout ---------- */

.layout {
    display: grid;
    /* Sidebar grows to fit its longest entry so titles never wrap or
       truncate; falls back to a 280px minimum on narrow pages. */
    grid-template-columns: minmax(280px, max-content) 1fr;
    min-height: calc(100vh - 50px);
}

@media (max-width: 800px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { display: none; }
}

/* ---------- sidebar ---------- */

.sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    /* Flex column: the brand heading + search box are pinned at the top
       (flex:0 0 auto) and only the nav list (.sb-list) scrolls, so the reader
       never has to scroll the TOC back up to reach search. The sidebar itself
       does not scroll - overflow stays visible so the search dropdown can
       overlay the list below it. */
    display: flex;
    flex-direction: column;
    padding: 18px 12px 0 18px;      /* bottom padding moves onto .sb-list */
    position: sticky;
    top: 50px;
    height: calc(100vh - 50px);
    font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
/* Re-assert the narrow-viewport hide: the base rule above sets display:flex,
   which (equal specificity, later in source) would otherwise beat the
   max-width:800px `display:none` declared earlier in the file. */
@media (max-width: 800px) {
    .sidebar { display: none; }
}

.sb-heading {
    flex: 0 0 auto;                 /* pinned - never scrolls with the TOC */
    font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin: 22px 8px 10px 8px;
}
.sb-heading:first-child { margin-top: 4px; }

/* The scrolling TOC. flex:1 + min-height:0 lets it shrink below its content
   height so its own overflow scrolls (the classic flexbox-scroll fix); the
   scrollbar is hidden but wheel/touch scrolling stays. */
.sb-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge / IE */
    margin: 0;
    padding-bottom: 60px;
}
.sb-list::-webkit-scrollbar { width: 0; height: 0; }  /* WebKit / Blink */

/* Numbers - bold, tabular so columns line up vertically across rows. */
.sb-num {
    margin-right: 4px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}

/* Title text is the SAME size and weight everywhere - chapter heading,
   section, front matter all read with one consistent rhythm. The
   number's bolding alone provides the visual hierarchy. */
.sb-title {
    font-weight: 400;
    color: var(--fg);
}

/* Front matter (Foreword, Introduction): flat top-level links, no number,
   outside any foldable group. */
.sb-front {
    display: block;
    border-radius: 4px;
    padding: 5px 8px;
    color: var(--fg);
    white-space: nowrap;
}
.sb-front:hover {
    background: var(--bg-code);
    color: var(--link);
    text-decoration: none;
}
.sb-front.sb-active {
    background: var(--active);
    color: var(--fg);
}

/* Foldable chapter group. <details>/<summary> give native folding with no
   JS; we suppress the default disclosure marker and draw our own caret. */
.sb-chapter {
    margin-top: 12px;
}

.sb-chapter-head {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    list-style: none;            /* Firefox: hide the default triangle */
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1.4;
}
.sb-chapter-head::-webkit-details-marker { display: none; }  /* WebKit/Blink */
.sb-chapter-head:hover { background: var(--bg-code); }

/* Custom caret - a CSS triangle pointing right when collapsed; rotates to
   point down when the chapter is open. */
.sb-caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-right: 4px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--fg-muted);
    transition: transform 0.12s ease-out;
}
.sb-chapter[open] > .sb-chapter-head .sb-caret {
    transform: rotate(90deg);
}

/* Section list inside a chapter. */
.sb-sections {
    list-style: none;
    padding: 0;
    margin: 2px 0 0 0;
}
.sb-sections li { margin: 1px 0; }
.sb-sections li a {
    display: block;
    border-radius: 4px;
    padding: 5px 8px 5px 28px;   /* indent under the caret + number column */
    color: var(--fg);
    white-space: nowrap;
}
.sb-sections li a:hover {
    background: var(--bg-code);
    color: var(--link);
    text-decoration: none;
}
.sb-sections li.sb-active > a {
    background: var(--active);
    color: var(--fg);
}
.sb-sections li.sb-active > a .sb-num { color: var(--fg); }

/* Third level: a page's own in-page headings (##/###), shown only under the
   active page. A quiet left rail groups them under their parent section. */
.sb-subsections {
    list-style: none;
    padding: 0;
    margin: 2px 0 6px 0;
    border-left: 1px solid var(--border);
    margin-left: 14px;
}
.sb-subsections li { margin: 0; }
.sb-subsections li a {
    display: block;
    border-radius: 4px;
    padding: 4px 8px 4px 14px;
    color: var(--fg-muted);
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-sub-3 a { padding-left: 28px; }        /* h3 nests under its h2 */
.sb-subsections li a:hover {
    background: var(--bg-code);
    color: var(--link);
    text-decoration: none;
}
.sb-subsections li a.sb-sub-active {
    color: var(--fg);
    font-weight: 600;
}
.sb-subnum {
    margin-right: 5px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-muted);
    font-size: 12px;
}

/* ---------- docs search ---------- */
.sb-search {
    flex: 0 0 auto;                 /* pinned above the scrolling TOC */
    position: relative;
    margin: 0 6px 14px 6px;
}
.sb-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--fg);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.sb-search-input:focus {
    border-color: var(--link);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 20%, transparent);
}
.docsearch-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 4px;
}
.docsearch-item {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--fg);
    cursor: pointer;
}
.docsearch-item:hover,
.docsearch-item.active {
    background: var(--active);
    text-decoration: none;
}
.docsearch-title {
    font-weight: 600;
    font-size: 14px;
}
.docsearch-title mark {
    background: color-mix(in srgb, var(--link) 30%, transparent);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
.docsearch-page {
    font-size: 12px;
    color: var(--fg-muted);
    margin-left: 6px;
}
.docsearch-snippet {
    display: block;
    font-size: 12.5px;
    color: var(--fg-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.docsearch-empty {
    padding: 10px 12px;
    color: var(--fg-muted);
    font-size: 13.5px;
}

/* ---------- content ---------- */

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 32px 64px 32px;
    overflow-x: auto;
}

article {
    width: 100%;
    max-width: 750px;
}

article h1, article h2, article h3, article h4, article h5, article h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                 "Arial", sans-serif;
    line-height: 1.25;
    color: var(--fg);
    font-weight: 600;
}

article h1 {
    font-size: 30px;
    margin: 12px 0 22px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
article h2 {
    font-size: 23px;
    margin: 36px 0 14px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
article h3 { font-size: 18px;  margin: 28px 0 10px 0; }
article h4 { font-size: 16px;  margin: 22px 0 8px 0; }

article p   { margin: 0 0 14px 0; }
article ul, article ol { margin: 0 0 14px 0; padding-left: 24px; }
article li  { margin: 4px 0; }

article hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 28px 0;
}

article blockquote {
    margin: 16px 0;
    padding: 4px 16px;
    border-left: 4px solid var(--border-hard);
    background: var(--bg-quote);
    color: var(--fg-muted);
    border-radius: 0 4px 4px 0;
}
article blockquote p { margin: 8px 0; }

/* ---------- code ---------- */

/* Inline code (within a paragraph): subtle background, tight padding so it
   doesn't disrupt line height. */
article code {
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 14px;
    background: var(--bg-code);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    color: var(--fg);
}

/* Fenced code block: editor-like panel - solid background, rounded corners,
   subtle accent bar on the left, breathing room on top/bottom, horizontal
   scroll for long lines. */
article pre {
    background: var(--bg-codeblock);
    color: var(--fg-codeblock);
    border: 1px solid var(--border-codeblock);
    border-left: 3px solid var(--link);
    border-radius: 6px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 18px 0 22px 0;
    line-height: 1.55;
    box-shadow: var(--shadow);
    font-size: 13.5px;
    -webkit-font-smoothing: subpixel-antialiased;
    tab-size: 4;
    -moz-tab-size: 4;
}

article pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
    /* Inside a <pre>, browsers preserve whitespace; a thin font weight reads
       cleaner at small sizes than the bolded look. */
    font-weight: 400;
}

article a code { color: inherit; }

/* Syntax-highlight tokens. Emitted server-side by highlight.dr inside
   <pre><code>; a single class beats the `article pre code` element selector
   on specificity, so these colors win. */
.tok-comment   { color: var(--tok-comment); font-style: italic; }
.tok-kw        { color: var(--tok-kw); }
.tok-string    { color: var(--tok-string); }
.tok-number    { color: var(--tok-number); }
.tok-const     { color: var(--tok-const); }
.tok-type      { color: var(--tok-type); }
.tok-builtin   { color: var(--tok-builtin); }
.tok-fn        { color: var(--tok-fn); }
.tok-decorator { color: var(--tok-decorator); }
.tok-self      { color: var(--tok-self); font-style: italic; }
.tok-var       { color: var(--tok-var); }
.tok-op        { color: var(--tok-op); }
.tok-prompt    { color: var(--tok-prompt); user-select: none; -webkit-user-select: none; }

/* ---------- tables ---------- */

/* GFM tables - bordered, header cell highlight, zebra rows for readability
   on dense reference tables (function signatures, type kinds, etc.). */
article table {
    border-collapse: collapse;
    width: 100%;
    margin: 18px 0 22px 0;
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

article table thead {
    background: var(--bg-codebar);
}

article table th,
article table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

article table th {
    font-weight: 600;
    color: var(--fg);
    border-bottom: 2px solid var(--border-hard);
}

article table tbody tr:nth-child(even) {
    background: var(--bg-tablestripe);
}

article table tbody tr:last-child td {
    border-bottom: 0;
}

article table code {
    font-size: 13px;
    padding: 1px 5px;
}

/* ---------- prev / next ---------- */

.prev-next {
    width: 100%;
    max-width: 750px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                 "Arial", sans-serif;
    font-size: 14px;
}

.prev-next a {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--fg);
    background: var(--bg);
    transition: border-color 0.1s ease, background 0.1s ease;
    line-height: 1.4;
}
.prev-next a:hover {
    border-color: var(--link);
    background: var(--bg-code);
    color: var(--link);
    text-decoration: none;
}
.pn-prev { text-align: left; }
.pn-next { text-align: right; }
.pn-empty { flex: 1; }

/* ---------- print ---------- */

@media print {
    .topbar, .sidebar, .prev-next { display: none; }
    .layout { display: block; }
    .content { padding: 0; }
    article { max-width: none; }
    article a { color: inherit; text-decoration: underline; }
}

/* ===================================================================
   Marketing pages - landing (/), download (/download), login (/login).
   Full-width layout that reuses the docs design tokens, so the light/dark
   theme toggle applies here too. The shared top-nav links and footer also
   appear on the docs pages.
   =================================================================== */

/* ---------- shared top-nav links ---------- */

.nav-links {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.nav-link {
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--fg-muted);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}
.nav-link:hover { background: var(--bg-code); color: var(--fg); text-decoration: none; }
.nav-active { color: var(--fg); }
.nav-active:hover { color: var(--fg); }

@media (max-width: 560px) {
    .nav-link { padding: 6px 8px; font-size: 14px; }
}

/* ---------- page wrapper + buttons ---------- */

.www {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px 72px 24px;
}

.btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-fg); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border-hard); }
.btn-secondary:hover { background: var(--bg-code); color: var(--fg); text-decoration: none; }

/* ---------- landing hero ---------- */

.lp-hero {
    text-align: center;
    padding: 60px 0 44px 0;
}
.lp-logo {
    width: 132px;
    height: 132px;
    image-rendering: -webkit-optimize-contrast;
}
.lp-title {
    margin: 18px 0 6px 0;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
}
.lp-tagline {
    margin: 0 0 28px 0;
    font-size: 21px;
    color: var(--fg-muted);
}
.lp-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.lp-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}
.lp-license {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-muted);
    border: 1px solid var(--border-hard);
    border-radius: 999px;
    padding: 3px 12px;
}
.lp-license:hover { color: var(--fg); text-decoration: none; }
.lp-stars { display: inline-flex; align-items: center; }
.lp-stars img { display: block; }
.lp-term {
    display: inline-block;
    margin-top: 26px;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--bg-codeblock);
    border: 1px solid var(--border-codeblock);
    color: var(--fg-codeblock);
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 14px;
}
.lp-term-prompt { color: var(--tok-prompt); margin-right: 8px; user-select: none; }

/* ---------- "Why Dragon?" feature grid ---------- */

.lp-why { text-align: center; margin-top: 32px; }
.lp-why h2,
.lp-sample h2,
.lp-cta-bottom h2 {
    font-size: 28px;
    font-weight: 700;
    border: 0;
    margin: 0 0 8px 0;
    padding: 0;
}
.lp-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 26px;
    text-align: left;
}
@media (max-width: 900px) { .lp-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lp-features { grid-template-columns: 1fr; } }

.feature {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    background: var(--bg-sidebar);
}
.feature-icon { font-size: 26px; line-height: 1; }
.feature h3 { margin: 10px 0 6px 0; font-size: 18px; border: 0; padding: 0; }
.feature p { margin: 0; font-size: 15px; color: var(--fg-muted); line-height: 1.55; }

/* ---------- code sample ---------- */

.lp-sample { text-align: center; margin-top: 56px; }
.lp-code {
    text-align: left;
    max-width: 760px;
    margin: 22px auto 0 auto;
}

/* ---------- bottom call to action ---------- */

.lp-cta-bottom {
    text-align: center;
    margin-top: 60px;
    padding: 44px 24px;
    border-top: 1px solid var(--border);
}
.lp-cta-bottom .lp-cta { margin-top: 18px; }

/* ---------- download page ---------- */

.dl-head { text-align: center; padding: 52px 0 4px 0; }
.dl-head h1 { font-size: 40px; border: 0; margin: 0; padding: 0; }
.dl-ver { color: var(--fg-muted); margin: 10px 0 0 0; }

.dl-quick { text-align: center; margin: 30px auto 0 auto; max-width: 720px; }
.dl-quick h2 { font-size: 20px; font-weight: 700; border: 0; margin: 0 0 14px 0; }
.dl-cmd {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 620px;
    margin: 0 auto;
    padding: 12px 12px 12px 18px;
    border-radius: 10px;
    background: var(--bg-codeblock);
    border: 1px solid var(--border-codeblock);
    box-shadow: 0 0 0 0 transparent;
}
.dl-cmd-prompt { color: var(--tok-prompt); user-select: none; flex: 0 0 auto; }
.dl-cmd code {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    text-align: left;
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 15px;
    color: var(--fg-codeblock);
    white-space: nowrap;
    background: none;
    padding: 0;
}
/* Clipboard button: two stacked icons, clip by default, tick when copied */
.dl-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-hard);
    border-radius: 7px;
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.dl-copy:hover { color: var(--fg); border-color: var(--fg-muted); }
.dl-copy .dl-copy-tick { display: none; }
.dl-copy.copied { color: #22c55e; border-color: #22c55e; }
.dl-copy.copied .dl-copy-clip { display: none; }
.dl-copy.copied .dl-copy-tick { display: inline; }
/* Glow pulse when the macOS "Install via curl" button points here */
.dl-cmd.dl-glow {
    animation: dl-glow-pulse 1.6s ease-out 1;
    border-color: var(--link);
}
@keyframes dl-glow-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--link) 65%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--link) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.dl-quick-note { color: var(--fg-muted); font-size: 14px; margin: 14px auto 0 auto; max-width: 620px; }

.dl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 36px 0 0 0;
}
@media (max-width: 860px) { .dl-grid { grid-template-columns: 1fr; } }

.dl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    background: var(--bg-sidebar);
}
.dl-card.featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.dl-rec {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.dl-os { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dl-os-icon { line-height: 1; }
/* SVGs ship with width="800px" attributes; the CSS size wins. */
.dl-os-icon img { width: 30px; height: 30px; display: block; }
/* apple.svg / linux.svg are near-black monochrome and vanish on the dark
   theme; invert just those. microsoft.svg is multicolor, leave it alone. */
:root[data-theme="dark"] .dl-card[data-os="linux"] .dl-os-icon img,
:root[data-theme="dark"] .dl-card[data-os="macos"] .dl-os-icon img {
    filter: invert(1);
}
.dl-os h3 { margin: 0; font-size: 20px; border: 0; padding: 0; }
/* "coming soon" status pill, pushed to the far right of the card header. */
.dl-soon-badge {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-muted);
    background: var(--bg-code);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.dl-btns { display: flex; flex-direction: column; gap: 10px; }
.dl-btn {
    display: block;
    text-align: center;
    padding: 11px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-hard);
    color: var(--fg);
    font-weight: 500;
    font-size: 15px;
}
.dl-btn:hover { background: var(--bg-code); color: var(--fg); text-decoration: none; }
.dl-btn-primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.dl-btn-primary:hover { background: var(--accent-hover); color: var(--accent-fg); }
.dl-soon { opacity: 0.5; cursor: not-allowed; }
.dl-soon:hover { background: transparent; }
.dl-btn-primary.dl-soon { background: var(--accent); }
.dl-soon em { font-style: normal; font-size: 12px; opacity: 0.9; }

.dl-note { margin: 16px 0 0 0; font-size: 13px; color: var(--fg-muted); line-height: 1.5; }

.dl-source { margin-top: 40px; }
.dl-source h2 { font-size: 22px; }
.dl-source ul { padding-left: 22px; }
.dl-source li { margin: 8px 0; color: var(--fg-muted); }
.dl-source strong { color: var(--fg); }

/* ---------- login stub ---------- */

.stub { text-align: center; max-width: 620px; margin: 0 auto; padding: 72px 0; }
.stub-logo { width: 96px; height: 96px; opacity: 0.92; }
.stub h1 { border: 0; font-size: 32px; margin: 20px 0 0 0; padding: 0; }
.stub p { color: var(--fg-muted); font-size: 17px; margin: 14px 0 28px 0; }
.stub .lp-cta { margin-top: 8px; }

/* ---------- shared footer ---------- */

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-sidebar);
    margin-top: auto;   /* push to the bottom on short pages; flush on tall ones */
}
.footer-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 26px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--fg-muted);
}
.footer-brand { font-weight: 700; color: var(--fg); }
.footer-links { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--fg-muted); }
.footer-links a:hover { color: var(--link); }
.footer-legal {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px 24px 24px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fg-muted);
    opacity: 0.8;
}

/* ---------- benchmarks (landing teaser + /benchmarks page) ---------- */

.lp-bench { text-align: center; margin-top: 56px; }
.lp-bench-sub {
    color: var(--fg-muted);
    max-width: 640px;
    margin: 8px auto 0 auto;
    font-size: 15px;
}
.lp-bench-link { margin-top: 18px; font-weight: 600; }

/* inline code chips reused in bench/download subtitles */
.lp-bench-sub code, .dl-ver code, .bench-notes code {
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: var(--bg-code);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.bench-wrap { overflow-x: auto; margin: 24px 0 0 0; }

.bench-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    font-size: 15px;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.bench-table thead { background: var(--bg-codebar); }
.bench-table th { font-weight: 600; }
.bench-table th, .bench-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.bench-table tbody tr:nth-child(even) { background: var(--bg-tablestripe); }
.bench-table tbody tr:last-child td { border-bottom: 0; }
.b-name { font-weight: 500; }
.b-num {
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.v-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.v-win  { background: rgba(35,160,85,0.16);  color: #1a7f4b; }
.v-loss { background: rgba(207,58,46,0.14);   color: #c0392b; }
.v-tie  { background: var(--bg-code);         color: var(--fg-muted); }
:root[data-theme="dark"] .v-win  { background: rgba(63,185,80,0.18);  color: #3fb950; }
:root[data-theme="dark"] .v-loss { background: rgba(255,123,114,0.18); color: #ff7b72; }

/* analysis writeup on the /benchmarks page */
.bench-notes {
    max-width: 760px;
    margin: 40px auto 0 auto;
}
.bench-notes h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 28px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.bench-notes p { color: var(--fg); line-height: 1.6; }
.bench-notes ol { padding-left: 22px; }
.bench-notes li { margin: 10px 0; line-height: 1.6; }

/* ======================================================================== */
/* Accounts: login / signup                                                  */
/* ======================================================================== */
.auth-card {
    max-width: 420px;
    margin: 64px auto;
    padding: 32px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.auth-card h1 {
    margin: 0 0 22px 0;
    font-size: 24px;
    font-weight: 700;
    border: 0;
    padding: 0;
}
.auth-card form { display: flex; flex-direction: column; gap: 16px; }
.auth-card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-muted);
}
/* Shared field styling for every text input on the account/registry pages */
.auth-card input,
.token-create input,
.egg-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--border-hard);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-card input:focus,
.token-create input:focus,
.egg-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-card input::placeholder,
.token-create input::placeholder,
.egg-search input::placeholder { color: var(--fg-faded); }
.auth-card button.btn { margin-top: 6px; width: 100%; text-align: center; }
.auth-alt {
    margin: 20px 0 0 0;
    font-size: 14px;
    color: var(--fg-muted);
    text-align: center;
}
.form-error {
    margin: 0 0 18px 0;
    padding: 11px 14px;
    font-size: 14px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 8px;
}

/* ======================================================================== */
/* Logo-colored theme for the registry + auth pages (.www-brand).            */
/* Scoped via a class on <main> to login / signup / account / packages; the  */
/* marketing and download pages are untouched and keep the red --accent.     */
/* Errors stay red (--accent) everywhere - that is semantic, not branding.   */
/* ======================================================================== */

/* The Dragon logo, sitting above the login / signup forms. */
.auth-logo {
    display: block;
    width: 76px;
    height: 76px;
    margin: 0 auto 18px auto;
    image-rendering: -webkit-optimize-contrast;
}

/* Blue → gold accent stripe across the top of the auth card. */
.www-brand .auth-card {
    position: relative;
    overflow: hidden;
}
.www-brand .auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-gold));
}

/* Primary buttons take the logo blue instead of the marketing red. */
.www-brand .btn-primary { background: var(--brand-blue); color: #ffffff; }
.www-brand .btn-primary:hover { background: var(--brand-blue-deep); color: #ffffff; }

/* Inputs focus to blue, not red. */
.www-brand input:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px var(--brand-blue-soft);
}

/* Brand-blue links on these pages. */
.www-brand .auth-alt a,
.www-brand .egg-name { color: var(--brand-blue-deep); }

/* Packages list: blue hover, gold install accent. */
.www-brand .egg-card:hover {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 1px var(--brand-blue-soft);
}
.www-brand .egg-install { border-left: 3px solid var(--brand-gold); }

/* "New token" success highlight uses the brand blue (not the error red). */
.www-brand .token-new {
    background: var(--brand-blue-soft);
    border-color: var(--brand-blue);
}

/* Download page (.dl-*): the featured card, "recommended" badge, and primary
   download buttons take the logo blue in place of the marketing red. */
.www-brand .dl-card.featured {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px var(--brand-blue-soft);
}
.www-brand .dl-rec { background: var(--brand-blue); color: #ffffff; }
.www-brand .dl-btn-primary {
    background: var(--brand-blue);
    color: #ffffff;
    border-color: transparent;
}
.www-brand .dl-btn-primary:hover { background: var(--brand-blue-deep); color: #ffffff; }
.www-brand .dl-btn-primary.dl-soon { background: var(--brand-blue); }

/* Page headings get a short blue → gold underline tying the two logo colors
   together (drawn as a background bar so it works without border-image). */
.www-brand .egg-head h1,
.www-brand .egg-detail h1,
.www-brand .acct h1,
.www-brand .dl-head h1 {
    display: inline-block;
    padding-bottom: 8px;
    background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-gold));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 3px;
}

/* ======================================================================== */
/* Account page: publish tokens                                              */
/* ======================================================================== */
.acct { max-width: 720px; margin: 44px auto; }
.acct h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px 0; border: 0; padding: 0; }
.acct h2 { font-size: 18px; font-weight: 700; margin: 30px 0 8px 0; border: 0; padding: 0; }
.acct-hint { color: var(--fg-muted); font-size: 14px; margin: 0 0 16px 0; line-height: 1.55; }
.acct-empty { color: var(--fg-faded); font-size: 14px; }
.token-new {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    margin: 0 0 20px 0;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 10px;
}
.token-new code {
    font-size: 14px;
    word-break: break-all;
    background: var(--bg-code);
    padding: 6px 10px;
    border-radius: 6px;
}
.token-table { width: 100%; border-collapse: collapse; margin: 0 0 22px 0; }
.token-table th,
.token-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.token-table th { color: var(--fg-muted); font-weight: 600; }
.token-create { display: flex; align-items: flex-end; gap: 12px; margin-top: 8px; }
.token-create label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-muted);
}
.btn-sm { padding: 8px 16px; font-size: 14px; }
.inline { display: inline; }

/* ======================================================================== */
/* Packages (eggs): index, search, detail                                    */
/* ======================================================================== */
.egg-head { max-width: 820px; margin: 44px auto 8px auto; }
.egg-head h1 { font-size: 28px; font-weight: 700; margin: 0 0 6px 0; border: 0; padding: 0; }
.egg-sub { color: var(--fg-muted); font-size: 15px; margin: 0 0 18px 0; line-height: 1.55; }
.egg-search { display: flex; gap: 10px; max-width: 820px; margin: 0 auto; }
.egg-search button.btn { white-space: nowrap; }
.egg-list {
    list-style: none;
    padding: 0;
    max-width: 820px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.egg-card {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.egg-card:hover { border-color: var(--border-hard); box-shadow: var(--shadow); }
.egg-name { font-size: 17px; font-weight: 600; }
.egg-ver {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 9px;
    font-size: 12px;
    color: var(--fg-muted);
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.egg-desc { margin: 6px 0 0 0; color: var(--fg-muted); font-size: 14px; line-height: 1.5; }
.egg-empty { max-width: 820px; margin: 24px auto; color: var(--fg-faded); }
.egg-detail { max-width: 820px; margin: 44px auto; }
.egg-detail h1 { font-size: 30px; font-weight: 700; margin: 0 0 6px 0; border: 0; padding: 0; }
.egg-detail h2 { font-size: 18px; font-weight: 700; margin: 28px 0 10px 0; border: 0; padding: 0; }
.egg-install {
    margin: 14px 0;
    padding: 12px 16px;
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.egg-install code { font-size: 14px; }
.ver-table { width: 100%; border-collapse: collapse; }
.ver-table th,
.ver-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.ver-table th { color: var(--fg-muted); font-weight: 600; }
.ver-table code { font-size: 13px; color: var(--fg-muted); }

@media (max-width: 560px) {
    .auth-card { margin: 28px 16px; padding: 24px; }
    .acct, .egg-head, .egg-list, .egg-detail, .egg-search { padding-left: 16px; padding-right: 16px; }
    .token-create { flex-direction: column; align-items: stretch; }
}