/* the Earhorn Music code browser: the Earhorn Music page's look */
:root {
  --bg: #f8fafc; --panel: #ffffff; --ink: #0f172a; --muted: #475569; --line: #e2e8f0;
  --brand: #8A5524; --brand-ink: #ffffff; --brand-soft: rgba(138, 85, 36, .08);
  --code: #f1f5f9; --code-ink: #0f172a; --copper: #8f5320;
  --add: rgba(22, 163, 74, .13); --del: rgba(220, 38, 38, .11); --mark: rgba(234, 179, 8, .22);
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #020617; --panel: #0b1220; --ink: #f8fafc; --muted: #94a3b8; --line: #1e293b;
    --brand: #B87333; --brand-ink: #1A1208; --brand-soft: rgba(184, 115, 51, .12);
    --code: #0f172a; --code-ink: #e2e8f0; --copper: #c98545;
    --add: rgba(34, 197, 94, .16); --del: rgba(248, 113, 113, .15); --mark: rgba(234, 179, 8, .2);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--sans); }
.wrap { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
@media (min-width: 40rem) { .wrap { padding-left: 2rem; padding-right: 2rem; } }
a { color: var(--brand); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
h1 { margin: 1.25rem 0 .25rem; font: 600 clamp(1.5rem, 5vw, 2rem)/1.2 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
h2 { margin: 2rem 0 .5rem; font: 600 1.35rem/1.25 var(--serif); }
h3 { margin: 1.5rem 0 .5rem; font: 600 1.05rem/1.35 var(--sans); overflow-wrap: anywhere; }
p, li { text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
code { font: .88em/1.4 var(--mono); background: var(--code); color: var(--code-ink); padding: .08em .22em; border-radius: .3em; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* top */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; font: 600 1.5rem/1 var(--serif); letter-spacing: -.02em; }
.tabs-top { display: flex; gap: 1.25rem; font-size: .95rem; }
.tabs-top a { text-decoration: none; }
.tabs-top a:hover { text-decoration: underline; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: .9rem; }
.crumbs { font-size: .95rem; overflow-wrap: anywhere; }
.crumbs span[aria-hidden] { color: var(--muted); margin: 0 .2rem; }
.crumbs [aria-current] { font-weight: 600; }
/* release picker */
.picker { position: relative; font-size: .92rem; }
.picker summary { cursor: pointer; list-style: none; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--panel); }
.picker summary::-webkit-details-marker { display: none; }
.picker summary::after { content: " ▾"; color: var(--muted); }
.picker ul { position: absolute; right: 0; z-index: 5; min-width: 15rem; margin: .35rem 0 0; padding: .35rem 0; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 .75rem 2rem rgb(2 6 23 / .18); }
@media (max-width: 40rem) { .picker { position: static; } .picker ul { left: 1rem; right: 1rem; min-width: 0; } }   /* full width, never off-screen */
.picker li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .85rem; }
.picker li span { color: var(--muted); }
.picker a[aria-current] { font-weight: 700; }
/* search */
.search { position: relative; margin-top: .9rem; }
.search input { width: 100%; padding: .6rem .85rem; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; }
.search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.results { margin-top: .5rem; }
.results:empty { display: none; }
.results > p { margin: .4rem 0; color: var(--muted); font-size: .92rem; }
.results ol { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: .6rem; background: var(--panel); max-height: 60vh; overflow: auto; }
.results li { padding: .5rem .85rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.results li:first-child { border-top: 0; }
.results .rf { font-weight: 600; }
.results .rl { display: block; font: .85rem/1.45 var(--mono); color: var(--muted); white-space: pre-wrap; }
.results mark { background: var(--mark); color: inherit; border-radius: .15em; }
/* release head and file list */
.relhead h1 { margin-top: 1.5rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: .9rem 0 0; }
.btn { display: inline-block; padding: .5rem 1rem; border-radius: .6rem; background: var(--brand); color: var(--brand-ink); font-weight: 650; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
table.files { width: 100%; margin-top: 1.25rem; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; font-size: .95rem; }
.files th { text-align: left; font: 700 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .75rem .9rem; border-bottom: 1px solid var(--line); }
.files td { padding: .55rem .9rem; border-top: 1px solid var(--line); vertical-align: top; }
.files tr:first-child td { border-top: 0; }
.files .name { font-family: var(--mono); font-size: .9rem; overflow-wrap: anywhere; }
.files .dir a { font-weight: 600; }
.files .when .muted { font-size: .88rem; }
.files .size { color: var(--muted); white-space: nowrap; text-align: right; }
@media (max-width: 40rem) { .files .when { display: none; } .files th:nth-child(2) { display: none; } }
/* README */
.readme { margin-top: 1.75rem; padding: 1.25rem 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: .8rem; }
.readme-h { margin: 0 0 .75rem; font: 600 .85rem/1 var(--mono); color: var(--muted); }
.readme h2 { font-size: 1.6rem; margin-top: .25rem; }
.readme h3 { font: 600 1.2rem/1.3 var(--serif); }
.readme pre { padding: .85rem 1rem; background: var(--code); border-radius: .6rem; overflow-x: auto; font: .88rem/1.55 var(--mono); }
.readme pre code { background: none; padding: 0; overflow-wrap: normal; }
.readme img { max-width: 100%; height: auto; }
.mdtable { overflow-x: auto; margin: 1rem 0; }
.mdtable table { border-collapse: collapse; font-size: .95rem; }
.mdtable th, .mdtable td { border: 1px solid var(--line); padding: .35rem .65rem; text-align: left; vertical-align: top; }
/* a file */
.fname { font-family: var(--mono); font-size: clamp(1.15rem, 4vw, 1.5rem); font-weight: 600; letter-spacing: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: .75rem 0 .25rem; border-bottom: 1px solid var(--line); }
.tabs a { padding: .45rem .8rem; border-radius: .5rem .5rem 0 0; text-decoration: none; font-size: .95rem; }
.tabs a[aria-current] { background: var(--panel); border: 1px solid var(--line); border-bottom-color: var(--panel); margin-bottom: -1px; color: var(--ink); font-weight: 600; }
.filehist { margin: .4rem 0 0; font-size: .92rem; color: var(--muted); }
.code { margin-top: .9rem; background: var(--code); border: 1px solid var(--line); border-radius: .7rem; overflow-x: auto; }
.code table { border-collapse: collapse; min-width: 100%; font: .86rem/1.55 var(--mono); color: var(--code-ink); }
.code td { padding: 0 .9rem 0 0; vertical-align: top; }
.code td.src { white-space: pre; padding-left: .9rem; }
.code td.num { width: 1%; padding: 0 .6rem; text-align: right; color: var(--muted); user-select: none; border-right: 1px solid var(--line); }
.code td.num a { color: inherit; text-decoration: none; }
.code td.num a:hover { color: var(--brand); text-decoration: underline; }
.code tr:first-child td { padding-top: .6rem; }
.code tr:last-child td { padding-bottom: .6rem; }
.code tr:target td { background: var(--mark); }
.code tr { scroll-margin-top: 6rem; }
.blame td.who { width: 1%; padding: 0 .75rem; white-space: nowrap; font-family: var(--sans); font-size: .8rem; border-right: 1px solid var(--line); }
.blame tr.first td { border-top: 1px solid var(--line); }
.blame tr:first-child td { border-top: 0; }
pre.plain { margin-top: .9rem; padding: .9rem 1rem; background: var(--code); color: var(--code-ink); border: 1px solid var(--line); border-radius: .7rem; overflow-x: auto; font: .86rem/1.55 var(--mono); }
.preview img { max-width: 100%; height: auto; background: repeating-conic-gradient(var(--line) 0 25%, transparent 0 50%) 0 0 / 1rem 1rem; border-radius: .5rem; }
/* changes */
ul.plain { padding-left: 1.2rem; }
ul.plain li { margin: .35rem 0; }
.diffstat { margin: .75rem 0 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel); }
.diffstat li { padding: .45rem .85rem; border-top: 1px solid var(--line); font-size: .92rem; overflow-wrap: anywhere; }
.diffstat li:first-child { border-top: 0; }
.diffstat a { font-family: var(--mono); font-size: .88rem; }
.plus { color: #15803d; font-weight: 600; }
.minus { color: #b91c1c; font-weight: 600; }
@media (prefers-color-scheme: dark) { .plus { color: #4ade80; } .minus { color: #f87171; } }
.st { font: 700 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: .2rem .4rem; border-radius: .3rem; background: var(--brand-soft); color: var(--muted); vertical-align: .15em; }
.dfile { margin-top: 1.75rem; scroll-margin-top: 1rem; }
.diff tr.add td.src, .diff tr.add td.num { background: var(--add); }
.diff tr.del td.src, .diff tr.del td.num { background: var(--del); }
.diff tr.hunk td { color: var(--muted); background: var(--brand-soft); }
.diff td.num { min-width: 3rem; }
.newfiles { columns: 2 18rem; padding-left: 1.2rem; font: .88rem/1.7 var(--mono); }
.newfiles li { min-width: 0; overflow-wrap: anywhere; }
/* history */
.history { margin: 1rem 0 0; padding: 0; list-style: none; }
.history li { padding: 1rem 1.1rem; margin-top: .75rem; background: var(--panel); border: 1px solid var(--line); border-radius: .8rem; }
.history p { margin: .25rem 0 0; }
.h-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.h-v { font: 600 1.3rem/1.2 var(--serif); text-decoration: none; }
.h-top time { color: var(--muted); font-size: .92rem; }
.foot-mini { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
/* from the Earhorn page, verbatim */
:root {
    /* Earhorn brand surfaces — exact match with the app's theme. */
    --surface-base:    #17130F;
    --surface-raised:  #1F1A14;
    --surface-hover:   #2A2319;
    --surface-divider: #3A3024;

    --on-primary: #EFE7D8;
    --on-muted:   #B9AE98;
    --on-quiet:   #7F7665;

    --copper:      #B87333;
    --copper-soft: #2E1B0E;
    --sage:        #8FA68A;
    --rose:        #C97A74;

    --on-copper: #1A1208;

    --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --body:    'Fraunces', 'Iowan Old Style', Georgia, serif;
    --tech:    'Inter', system-ui, -apple-system, sans-serif;

    --maxw: 64rem;
    --gutter: 1.5rem;
  }
  body {
    margin: 0;
    background: var(--surface-base);
    color: var(--on-primary);
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.55;
    font-feature-settings: "kern", "liga", "onum", "ss01";

    /* Subtle grain texture — bronze foundry feel without screaming. */
    background-image:
      radial-gradient(ellipse at top, rgba(184,115,51,0.06), transparent 60%),
      radial-gradient(ellipse at bottom right, rgba(184,115,51,0.04), transparent 50%);
  }
  header.site {
    position: sticky; top: 0; z-index: 10;
    background: rgba(23,19,15,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--surface-divider);
  }
  header.site .inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0.875rem var(--gutter);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
  }
  .wordmark-img {
    height: 1.75rem;
    width: auto;
    margin-right: 0.625rem;
    flex-shrink: 0;
    /* Subtle filter to lift the bronze artwork slightly on the dark
       translucent header — keeps definition without looking flat. */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  }
  .wordmark-badge {
    /* Steampunk gramophone — transparent PNG, so no border-radius;
       sized to match the EARHORN wordmark height for a unified lockup. */
    height: 2.25rem;
    width: auto;
    margin-right: 0.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  }
  .wordmark-qualifier {
    height: 1.75rem;
    width: auto;
    margin-left: 0.125rem;
    flex-shrink: 0;
    /* Match the EARHORN wordmark drop shadow for a unified lockup. */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  }
  .wordmark {
    display: inline-flex;
    align-items: center;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.125rem;
    font-variation-settings: "opsz" 14;
    color: var(--on-primary);
    letter-spacing: 0.01em;
    border: none;
  }
  .wordmark .ampersand {
    color: var(--copper);
    font-style: italic;
    margin: 0 0.05em;
  }
  .header-tag {
    font-family: var(--tech);
    font-size: 0.75rem;
    color: var(--on-quiet);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }


/* the code browser in the Earhorn page's colours and type, in light and dark alike */
:root, :root:not(.x) {
  --bg: #17130F; --panel: #1F1A14; --ink: #EFE7D8; --muted: #B9AE98; --line: #3A3024;
  --brand: #B87333; --brand-ink: #1A1208; --brand-soft: rgba(184, 115, 51, .12);
  --code: #1F1A14; --code-ink: #EFE7D8; --copper: #B87333;
  --add: rgba(143, 166, 138, .18); --del: rgba(201, 122, 116, .18); --mark: rgba(184, 115, 51, .25);
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
}
@media (prefers-color-scheme: dark) { :root, :root:not(.x) {
  --bg: #17130F; --panel: #1F1A14; --ink: #EFE7D8; --muted: #B9AE98; --line: #3A3024;
  --brand: #B87333; --brand-ink: #1A1208; --brand-soft: rgba(184, 115, 51, .12);
  --code: #1F1A14; --code-ink: #EFE7D8; --copper: #B87333;
  --add: rgba(143, 166, 138, .18); --del: rgba(201, 122, 116, .18); --mark: rgba(184, 115, 51, .25);
} }
body { color-scheme: dark; font-family: var(--tech); font-size: 1rem; line-height: 1.6; }
.wrap { max-width: var(--maxw); padding-left: var(--gutter); padding-right: var(--gutter); }
a { color: var(--copper); text-decoration: none; border-bottom: 1px solid rgba(184,115,51,0.4); transition: border-color 120ms ease; }
a:hover { border-bottom-color: var(--copper); text-decoration: none; }
.wordmark, .wordmark:hover { border: none; }
h1, h2 { font-family: var(--display); font-weight: 500; }
.bar .tabs-top { margin-left: auto; }
.plus { color: #8FA68A; } .minus { color: #C97A74; }
.code td.num a, .tabs a { border-bottom: none; }

.hl .c { color: #8B949E; font-style: italic }
.hl .err { color: #F85149 }
.hl .esc { color: #E6EDF3 }
.hl .g { color: #E6EDF3 }
.hl .k { color: #FF7B72 }
.hl .l { color: #A5D6FF }
.hl .n { color: #E6EDF3 }
.hl .o { color: #FF7B72; font-weight: bold }
.hl .x { color: #E6EDF3 }
.hl .p { color: #E6EDF3 }
.hl .ch { color: #8B949E; font-style: italic }
.hl .cm { color: #8B949E; font-style: italic }
.hl .cp { color: #8B949E; font-weight: bold; font-style: italic }
.hl .cpf { color: #8B949E; font-style: italic }
.hl .c1 { color: #8B949E; font-style: italic }
.hl .cs { color: #8B949E; font-weight: bold; font-style: italic }
.hl .gd { color: #FFA198; }
.hl .ge { color: #E6EDF3; font-style: italic }
.hl .ges { color: #E6EDF3; font-weight: bold; font-style: italic }
.hl .gr { color: #FFA198 }
.hl .gh { color: #79C0FF; font-weight: bold }
.hl .gi { color: #56D364; }
.hl .go { color: #8B949E }
.hl .gp { color: #8B949E }
.hl .gs { color: #E6EDF3; font-weight: bold }
.hl .gu { color: #79C0FF }
.hl .gt { color: #FF7B72 }
.hl .g-Underline { color: #E6EDF3; text-decoration: underline }
.hl .kc { color: #79C0FF }
.hl .kd { color: #FF7B72 }
.hl .kn { color: #FF7B72 }
.hl .kp { color: #79C0FF }
.hl .kr { color: #FF7B72 }
.hl .kt { color: #FF7B72 }
.hl .ld { color: #79C0FF }
.hl .m { color: #A5D6FF }
.hl .s { color: #A5D6FF }
.hl .na { color: #E6EDF3 }
.hl .nb { color: #E6EDF3 }
.hl .nc { color: #F0883E; font-weight: bold }
.hl .no { color: #79C0FF; font-weight: bold }
.hl .nd { color: #D2A8FF; font-weight: bold }
.hl .ni { color: #FFA657 }
.hl .ne { color: #F0883E; font-weight: bold }
.hl .nf { color: #D2A8FF; font-weight: bold }
.hl .nl { color: #79C0FF; font-weight: bold }
.hl .nn { color: #FF7B72 }
.hl .nx { color: #E6EDF3 }
.hl .py { color: #79C0FF }
.hl .nt { color: #7EE787 }
.hl .nv { color: #79C0FF }
.hl .ow { color: #FF7B72; font-weight: bold }
.hl .pm { color: #E6EDF3 }
.hl .w { color: #6E7681 }
.hl .mb { color: #A5D6FF }
.hl .mf { color: #A5D6FF }
.hl .mh { color: #A5D6FF }
.hl .mi { color: #A5D6FF }
.hl .mo { color: #A5D6FF }
.hl .sa { color: #79C0FF }
.hl .sb { color: #A5D6FF }
.hl .sc { color: #A5D6FF }
.hl .dl { color: #79C0FF }
.hl .sd { color: #A5D6FF }
.hl .s2 { color: #A5D6FF }
.hl .se { color: #79C0FF }
.hl .sh { color: #79C0FF }
.hl .si { color: #A5D6FF }
.hl .sx { color: #A5D6FF }
.hl .sr { color: #79C0FF }
.hl .s1 { color: #A5D6FF }
.hl .ss { color: #A5D6FF }
.hl .bp { color: #E6EDF3 }
.hl .fm { color: #D2A8FF; font-weight: bold }
.hl .vc { color: #79C0FF }
.hl .vg { color: #79C0FF }
.hl .vi { color: #79C0FF }
.hl .vm { color: #79C0FF }
.hl .il { color: #A5D6FF }