@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/inter-latin-700-normal.woff2') format('woff2'); }
html.version-pending body > :not(#versionGate) { visibility: hidden; }
#versionGate { width: min(90vw, 460px); box-sizing: border-box; border: 0; border-radius: 16px; padding: 28px; font-family: Inter, sans-serif; color: #18241c; }
#versionGate::backdrop { background: rgb(0 0 0 / 75%); }
#versionGate h1 { font-size: 1.5rem; }
#versionGate p { line-height: 1.5; }
#versionGate button, .support-link { display: inline-block; border: 0; border-radius: 8px; background: #147a36; color: white; padding: 12px 16px; margin: 6px; font: inherit; cursor: pointer; text-decoration: none; }
#versionGate button:disabled { opacity: .6; cursor: wait; }
#offlineReady, #supportMessage { text-align: center; font-size: .85rem; }
#guitarryDonation { text-align: center; padding: 16px; }

body[data-startup] {
    box-sizing: border-box;
    margin: 0;
    min-height: 100dvh;
    padding: 1rem;
    display: grid;
    place-items: center;
    background: #f5f7f4;
    font: 1rem/1.5 Inter, system-ui, sans-serif;
}

#first-run {
    width: min(100%, 460px);
    border-radius: 16px;
    background: #fff;
    color: #18241c;
    box-shadow: 0 8px 30px rgb(24 36 28 / 12%);
}

#first-run header {
    padding: 1rem;
    border-radius: 16px 16px 0 0;
    border-bottom: 3px solid #1db954;
    background: #000;
}

#first-run h1 { margin: 0; }

#first-run img {
    display: block;
    width: min(100%, 272px);
    height: auto;
    margin-inline: auto;
}

#first-run form {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 4vw, 1.75rem);
}

#first-run label { display: grid; gap: .35rem; font-weight: 600; }

#first-run :is(select, button) {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: .5rem .75rem;
    border-radius: 8px;
    font: inherit;
}

#first-run select { background: #fff; border: 1px solid #849589; color: inherit; font-weight: 400; }
#first-run button { background: #176e36; color: #fff; border: 0; font-weight: 600; cursor: pointer; }
#first-run :focus-visible { outline: 2px solid #176e36; outline-offset: 3px; }