@font-face {
    font-family: "Unbounded";
    src: url("fonts/Unbounded-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --canvas: #000000;
    --surface: #333132;
    --surface-raised: #51534A;
    --text: #FFFFFF;
    --muted: #E0DED8;
    --accent: #FFFBCC;
    --accent-mid: #CBC37B;
    --accent-deep: #585532;
    --border: #51534A;
    --link: #CBC37B;
    --shadow: rgb(0 0 0 / 45%);
    --logo-filter: grayscale(1) brightness(0) invert(1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.65;
    transition: background-color 180ms ease, color 180ms ease;
}

.page-shell {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 80px;
}

.header {
    position: relative;
    display: grid;
    grid-template-columns: 220px 1fr 160px;
    gap: 24px;
    align-items: center;
    color: var(--text);
    padding: 12px 4px 28px;
}

.brand img {
    display: block;
    width: min(220px, 100%);
    height: auto;
    filter: var(--logo-filter);
}

.manual-heading {
    text-align: center;
}

.manual-heading h1,
.manual-heading p {
    margin: 0;
}

.manual-heading h1 {
    color: var(--accent);
    font-family: "Unbounded", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.2;
}

.manual-heading p {
    color: var(--muted);
    font-size: 0.9rem;
}

.chapter-button {
    border: 2px solid var(--accent-mid);
    border-radius: 8px;
    color: var(--accent);
    text-align: center;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.header-action {
    justify-self: center;
    color: var(--link);
    text-decoration: none;
}

.header-action:hover,
.header-action:focus {
    text-decoration: underline;
}

.chapter-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-bottom: 26px;
}

.chapter-button {
    padding: 9px 14px;
}

.chapter-button:hover,
.chapter-button:focus {
    border-color: var(--accent);
    background: var(--accent);
    color: #333132;
}

/* Promote Quick Start on its own row while retaining the other buttons' font size. */
.quick-start-row {
    flex-basis: 100%;
    text-align: center;
}

.chapter-button.quick-start {
    display: inline-block;
    width: min(280px, 100%);
    background: var(--accent);
    color: var(--canvas);
}

.chapter-button.quick-start:hover,
.chapter-button.quick-start:focus {
    background: var(--canvas);
    color: var(--accent);
}

.content {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 56px);
    overflow-wrap: anywhere;
    border: 1px solid var(--border);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: 0 15px 50px var(--shadow);
    color: var(--text);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.content h1 {
    margin: -20px -20px 36px;
    padding: 24px;
    border-radius: 22px 22px 12px 12px;
    background: var(--accent-deep);
    color: #FFFBCC;
    font-family: "Unbounded", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    line-height: 1.2;
    text-align: center;
}

.content h2,
.content h3 {
    color: var(--accent);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.25;
}

.content h2 {
    margin-top: 50px;
}

.content a {
    color: var(--link);
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.content a:hover {
    text-decoration: underline;
}

.underline {
  text-decoration: underline;
}

.strike {
  text-decoration: line-through;
}

.content a[href^="#basic-setting-annotation-"],
.content a[href^="#advanced-setting-annotation-"],
.content a[href^="#midi-command-annotation-"] {
    font-size: 0.75em;
    line-height: 0;
    vertical-align: super;
}

.content img {
    max-width: 100%;
    height: auto;
}

.content img:not(.inline-svg) {
    height: auto !important;
}

.content img.inline-svg {
    display: inline-block;
    vertical-align: middle;
}

.content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.content th,
.content td {
    border: 1px solid var(--border);
    padding: 10px;
    vertical-align: top;
}

.content th {
    background: var(--accent-deep);
    color: #FFFBCC;
}

.content table.settings-navigation-table thead th {
    background: #FFFFFF;
    color: #000000;
}

.content table.settings-navigation-table tbody td {
    color: #000000;
}

.content table.settings-navigation-table tbody tr:nth-child(1) td {
    background: #EBEBE4;
}

.content table.settings-navigation-table tbody tr:nth-child(2) td {
    background: #FFFBCC;
}

.content table.settings-navigation-table tbody tr:nth-child(3) td {
    background: #FFD6FB;
}

.content table.settings-navigation-table tbody tr:nth-child(4) td {
    background: #9673A6;
}

.content table.settingslongtable tbody td {
    min-width: 85px;
}

.content table.midi-command-table th,
.content table.midi-command-table td {
    padding: 6px 10px;
}

.content table.midi-command-table p {
    margin: 0;
}

.content table.midi-command-table tbody td[colspan="3"] {
    border-top: 2px solid var(--accent-mid);
    border-bottom: 2px solid var(--accent-mid);
    background: var(--surface-raised);
    color: var(--accent);
}

.content table.extrasettingstable tbody tr td:nth-child(1) {
    min-width: 80px;
}

.content table.extrasettingstable tbody tr td:nth-child(2) {
    width: 20%;
}

.admonition {
    border: 2px solid var(--accent-mid);
    border-radius: 10px;
    padding: 0 16px 10px;
    background: var(--surface-raised);
}

.admonition-title {
    margin: 0 -16px 10px;
    padding: 8px 16px;
    background: var(--accent-deep);
    color: #FFFBCC;
    font-weight: 700;
}

#themeToggle,
#scrollToTop {
    position: fixed;
    bottom: 24px;
    z-index: 20;
    width: 52px;
    height: 52px;
    border: 2px solid var(--accent-mid);
    border-radius: 10px;
    background: var(--surface);
    color: var(--accent);
    cursor: pointer;
    font-size: 1.25rem;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

#themeToggle:hover,
#themeToggle:focus,
#scrollToTop:hover,
#scrollToTop:focus {
    border-color: var(--accent);
    background: var(--accent);
    color: #333132;
}

#themeToggle {
    left: 24px;
}

#scrollToTop {
    right: 24px;
    display: none;
}

html.light-mode {
    color-scheme: light;
    --canvas: #E0DED8;
    --surface: #FFFFFF;
    --surface-raised: #FFFBCC;
    --text: #333132;
    --muted: #51534A;
    --accent: #585532;
    --accent-mid: #CBC37B;
    --accent-deep: #585532;
    --border: #CBC37B;
    --link: #585532;
    --shadow: rgb(0 0 0 / 20%);
    --logo-filter: none;
}

@media (max-width: 720px) {
    .header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .brand img {
        width: 180px;
        margin: 0 auto;
    }

    .content {
        padding: 22px;
        border-radius: 18px;
    }

    .content h1 {
        margin: -10px -10px 28px;
    }
}

/* Shared-reference context is unnecessary in the already personalized guide. */
.page-chapters-quick-start .qs-reference-only {
    display: none;
}

/* Keep the common editorial date legible but secondary to the manual content. */
.manual-updated {
    padding: 16px 0;
    color: var(--muted);
    font-size: 0.75rem;
    text-align: center;
}

/* Keep supplementary guides distinct from the manual chapter list. */
.all-contents-action { margin: 0 0 32px; }
.all-contents-action .header-action {
    display: inline-block; padding: 12px 18px; border: 2px solid var(--accent-mid); border-radius: 8px;
    background: var(--surface-raised); color: var(--accent); text-align: center;
}
.all-contents-action p { font-size: 0.85rem; margin-top: 10px; }
.related-guides { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); }
.combined-content { min-width: 0; }
.combined-content > .content + .content { margin-top: 32px; }

/* The same chapter cards become clean, unclipped sections when printed or saved as PDF. */
@media print {
    :root, :root.light-mode { color-scheme: light; --logo-filter: none; --surface-raised: #f3f3f3; --text: #111; --muted: #444; --surface: #fff; --border: #ccc; --accent: #41316b; }
    * { transition: none !important; }
    html, body, .page-shell { background: white; color: #111; }
    .chapter-menu, .header-action, #themeToggle, #scrollToTop, a.headerlink { display: none !important; }
    .content { max-width: none; margin: 0; padding: 16px; box-shadow: none; border: 0; overflow: visible; }
    .content h1 { margin: 0 0 24px; background: none; color: #111; padding: 0; }
    .combined-content > .combined-chapter { break-before: page; margin-top: 0; }
    .content img, .content svg { max-width: 100%; break-inside: avoid; }
    .content h1, .content h2, .content h3 { break-after: avoid; }
    .content table { overflow: visible; }
    .content a { color: #41316b; }
}