/* Veslate site. The Editorial direction: a dark header and footer, full-width bands that alternate between a warm light ground and a dark
   one, a serif for headings and Inter for text, and the single teal accent taken from the application's own palette. The fonts are served
   from /static/fonts; each has a system fallback, so the page reads the same, a little less finely, if a file is missing. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/fraunces-latin.069cb90e11a3.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/inter-latin.260c81a4759b.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin.b636a65da4f0.woff2") format("woff2"); }

:root {
    /* The brand palette, the same five colours the application draws from:
       SLATE #1E2933, CREAM #F4F6F8, VESLATE TEAL #2DD4C8, ACCENT CORAL #FF8A65,
       ACCENT GOLD #E6B663. The tints below are derived from those and nothing
       here is an invention of the website's. */
    --bg: #f6f0e7;
    --bg-deep: #eee5d8;
    --surface: #fffdf9;
    --surface-sunken: #f8f2e9;
    --border: #e4dacb;
    --border-strong: #cfc2ae;
    --ink-dark: #0f1d23;          /* the header, the footer and the dark bands */
    --ink-dark-2: #16272f;
    --on-dark: #d9e3e8;
    --on-dark-muted: #9fb2bb;

    --text: #1e2933;
    --text-soft: #4a5661;
    --muted: #6c7883;

    --brand-300: #7ee6dd;
    --brand-400: #2dd4c8;
    --brand-500: #22b3a8;
    --brand-600: #199289;
    --brand-700: #12716b;
    --accent: #ff8a65;
    --accent-deep: #e56a45;
    --gold: #e6b663;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 22px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 2px 6px rgba(16, 24, 40, .06);
    --shadow: 0 10px 30px rgba(16, 24, 40, .08);
    --shadow-lg: 0 26px 60px rgba(16, 24, 40, .14);

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --header-height: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; }
h1, h2 { font-family: var(--serif); font-weight: 650; letter-spacing: -.012em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.125rem; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* Content that reads better short, inside a section that is the same width as
   every other section. Narrowing the container instead moves the page's left and
   right edges from one section to the next, which is what made some sections
   look pinched beside their neighbours. */
.measure { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-height);
    background: var(--ink-dark);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: var(--on-dark);
}
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(0, 0, 0, .25); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; }
/* 35 by 30 is the mark's own 168:145, not a square. A square box letterboxes
   it and the glyph reads noticeably smaller than the type beside it. */
.brand-mark { width: 35px; height: 30px; flex: none; }
.brand-name { font-size: 1.3rem; color: #f4f1ea; }
.brand-name span { color: var(--brand-400); }

.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.site-nav a {
    font-size: .93rem;
    font-weight: 500;
    color: var(--on-dark);
    transition: color .15s ease;
}
.site-nav a:hover { color: #fff; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.menu-toggle {
    display: none;
    margin-left: auto;
    width: 38px; height: 38px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
}
.menu-toggle span {
    position: absolute; left: 10px; width: 18px; height: 1.8px;
    background: #f4f1ea; border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px;
    border: 1px solid transparent; border-radius: 999px;
    font: inherit; font-size: .95rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.btn-primary {
    background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
    color: #fff;
    box-shadow: 0 6px 18px rgba(25, 146, 137, .3);
}
.btn-primary:hover { box-shadow: 0 10px 26px rgba(25, 146, 137, .38); }

.btn-ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { border-color: var(--border-strong); }

.btn-sm { height: 38px; padding: 0 16px; font-size: .9rem; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 1rem; }

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

.hero { padding: clamp(56px, 8vw, 104px) 0 0; }
.hero-inner { text-align: center; max-width: 800px; margin: 0 auto; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    height: 30px; padding: 0 14px 0 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    font-size: .8rem; font-weight: 600; letter-spacing: .01em;
    color: var(--text-soft);
}
.eyebrow b { color: var(--brand-700); font-weight: 700; }
.eyebrow::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(45, 212, 200, .25);
}

.hero h1 { margin: 22px 0 0; }
.hero h1 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--brand-500), var(--brand-700));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead {
    margin: 20px auto 0;
    max-width: 620px;
    font-size: clamp(1.02rem, 1.6vw, 1.16rem);
    color: var(--text-soft);
}
.hero-actions { margin-top: 30px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-size: .85rem; color: var(--muted); }

/* the framed screenshot */
.shot {
    margin: clamp(38px, 6vw, 64px) auto 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.shot-bar {
    display: flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 15px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-sunken);
}
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.shot-bar b {
    margin-left: 10px; font-size: .74rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.shot img { width: 100%; }
.shot-caption {
    padding: 13px 18px;
    border-top: 1px solid var(--border);
    font-size: .84rem; color: var(--muted);
    background: var(--surface-sunken);
}

/* ---------- facts strip ---------- */

.facts { margin-top: clamp(38px, 5vw, 56px); }
.facts-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.fact { padding: 20px 22px; border-left: 1px solid var(--border); }
.fact:first-child { border-left: 0; }
.fact b { display: block; font-size: .95rem; }
.fact span { display: block; margin-top: 2px; font-size: .845rem; color: var(--muted); }

/* ---------- sections ---------- */

.section { padding: clamp(64px, 9vw, 108px) 0; }
.section-alt { background: var(--bg-deep); border-block: 1px solid var(--border); }

.section-head { max-width: 640px; }
.section-head.centred { margin: 0 auto; text-align: center; }
.section-tag {
    display: block; margin-bottom: 12px;
    font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-600);
}
.section-head p { margin-top: 14px; color: var(--text-soft); font-size: 1.04rem; }

.cards { display: grid; gap: 20px; margin-top: 42px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow-xs);
}
.card-icon {
    width: 40px; height: 40px; margin-bottom: 18px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: linear-gradient(140deg, rgba(79, 209, 197, .2), rgba(31, 154, 144, .12));
    color: var(--brand-700);
}
.card-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card p { margin-top: 9px; color: var(--text-soft); font-size: .95rem; }

/* split: copy beside a picture */
.split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 60px); align-items: center; }
.split.flip > :first-child { order: 2; }
.split-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.split-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-soft); font-size: .96rem; }
.split-list svg {
    flex: none; width: 19px; height: 19px; margin-top: 2px;
    fill: none; stroke: var(--brand-600); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.split-list b { color: var(--text); font-weight: 600; }

/* ---------- code and command blocks ---------- */

.command {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 16px 15px 20px;
    background: #101a24;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.command code {
    flex: 1; min-width: 0;
    font-family: var(--mono); font-size: .9rem; color: #dbe7ef;
    white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.command code::-webkit-scrollbar { display: none; }
.command code .prompt { color: #4fd1c5; user-select: none; }
.copy {
    flex: none; height: 34px; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px;
    background: rgba(255, 255, 255, .06); color: #e6eef4;
    font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.copy:hover { background: rgba(255, 255, 255, .13); }
html:not(.js) .copy { display: none; }   /* the buttons need scripting; the command stays on screen to select */
.copy.is-done { background: var(--brand-500); border-color: transparent; color: #04211f; }

.code-panel {
    background: #101a24; border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden;
}
.code-panel header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px; border-bottom: 1px solid rgba(255, 255, 255, .09);
    font-family: var(--mono); font-size: .78rem; color: #8ba3b4;
}
.code-panel pre {
    margin: 0; padding: 18px 20px; overflow-x: auto;
    font-family: var(--mono); font-size: .82rem; line-height: 1.65; color: #cddbe6;
}
.code-panel .k { color: #7fe0d6; }
.code-panel .s { color: #ffb59b; }
.code-panel .n { color: #b8c6f0; }

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

.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.dl-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-xs);
}
.dl-card-head { display: flex; align-items: center; gap: 13px; }
.dl-logo {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    border-radius: 12px; background: var(--surface-sunken); border: 1px solid var(--border);
    color: var(--text-soft);
}
.dl-logo svg { width: 22px; height: 22px; }
.dl-card h3 { font-size: 1.05rem; }
.dl-card-head span { display: block; font-size: .85rem; color: var(--muted); }
.dl-meta {
    margin: 20px 0 22px; padding-top: 18px; border-top: 1px solid var(--border);
    display: grid; gap: 7px; font-size: .87rem; color: var(--text-soft);
}
.dl-meta div { display: flex; justify-content: space-between; gap: 16px; }
.dl-meta span { color: var(--muted); }
.dl-meta code { font-family: var(--mono); font-size: .78rem; }
.dl-card .btn { width: 100%; margin-top: auto; }
.dl-hint { margin-top: 12px; font-size: .8rem; color: var(--muted); text-align: center; }

.dl-empty {
    grid-column: 1 / -1; padding: 34px; text-align: center;
    border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted);
}

.checksum-note { margin-top: 26px; font-size: .85rem; color: var(--muted); }
.checksum-note code { font-family: var(--mono); }

/* ---------- signup ---------- */

.signup {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: clamp(30px, 5vw, 46px); text-align: center;
}
.signup-form { margin: 26px auto 0; max-width: 460px; display: flex; gap: 10px; }
.signup-form input {
    flex: 1; min-width: 0; height: 48px; padding: 0 16px;
    border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--surface-sunken); font: inherit; color: var(--text);
}
.signup-form input:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; border-color: transparent; }
.form-note { margin-top: 14px; font-size: .88rem; min-height: 1.3em; color: var(--brand-700); }
.form-note.is-error { color: var(--accent-deep); }

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

.site-footer { background: var(--ink-dark); color: var(--on-dark-muted); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; padding: 34px 24px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 30px; margin-left: auto; }
.footer-links a { font-size: .92rem; color: var(--on-dark); }
.footer-links a:hover { color: #fff; }
.footer-copy { font-size: .84rem; }

/* ---------- reveal ---------- */

/* Only hidden when scripting is available to bring it back. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .cards-3 { grid-template-columns: 1fr 1fr; }
    .facts-grid { grid-template-columns: 1fr 1fr; }
    .fact:nth-child(3) { border-left: 0; }
    .fact:nth-child(n + 3) { border-top: 1px solid var(--border); }
    .split { grid-template-columns: 1fr; }
    .split.flip > :first-child { order: 0; }
}

@media (max-width: 760px) {
    .menu-toggle { display: block; }
    .site-nav {
        position: absolute; top: var(--header-height); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 24px 18px;
        background: var(--ink-dark); border-bottom: 1px solid rgba(255, 255, 255, .08);
        display: none;
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .header-actions { display: none; }
    .cards-3, .cards-2, .dl-grid { grid-template-columns: 1fr; }
    .facts-grid { grid-template-columns: 1fr; }
    .fact { border-left: 0; }
    .fact + .fact { border-top: 1px solid var(--border); }
    .signup-form { flex-direction: column; }
    .signup-form .btn { width: 100%; }
    .shot-caption { font-size: .8rem; }
}

/* ================= Editorial home page ================= */

.band { position: relative; overflow: hidden; padding: clamp(52px, 7vw, 96px) 0; }
.band-light { background: var(--bg); color: var(--text); }
.band-dark { background: var(--ink-dark); color: var(--on-dark); }
.band-dark h2 { color: #f4f1ea; }
.band .container { position: relative; z-index: 1; }
.band-head { max-width: 760px; }
.band-head p { margin-top: 10px; color: var(--text-soft); }
.band-text p { margin-top: 14px; max-width: 30ch; color: var(--text-soft); font-size: 1rem; }
.band-dark .band-text p { color: var(--on-dark-muted); }
.band-link {
    display: inline-block; margin-top: 18px;
    font-size: .95rem; font-weight: 600; color: var(--brand-700);
    border-bottom: 1px solid currentColor;
}
.band-dark .band-link { color: var(--brand-300); }
.band-after { margin-top: 36px; }

.band-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; }

/* hero */
.hero-ed { position: relative; overflow: hidden; background: var(--bg); }
.hero-mist { position: absolute; right: 0; top: 0; width: min(78%, 1400px); height: 100%; object-fit: cover; object-position: 18% 40%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%); mask-image: linear-gradient(to right, transparent 0, #000 38%); }
.hero-ed-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); align-items: center;
    min-height: clamp(380px, 40vw, 600px); padding-block: 36px; }
.wordmark { font-family: var(--serif); font-weight: 700; font-size: clamp(3.6rem, 8.4vw, 8rem); letter-spacing: -.035em; line-height: 1; color: #10262e; }
.wordmark .slate { color: var(--brand-500); }

.devices { position: relative; aspect-ratio: 1.55; width: 100%; }
.device { position: absolute; margin: 0; background: #0b1519; border: 2px solid #1b2c33; border-radius: 10px; padding: 5px;
    box-shadow: 0 20px 50px rgba(8, 20, 26, .35), 0 3px 8px rgba(8, 20, 26, .25); }
.device img { width: 100%; border-radius: 5px; }
.device-main { left: 18%; top: 3%; width: 64%; border-radius: 12px; padding: 7px; }
.device-a { left: 0; bottom: 4%; width: 31%; }
.device-b { left: 34%; bottom: -2%; width: 36%; z-index: 2; }
.device-c { right: 0; bottom: 6%; width: 31%; }

/* instruments and effects */
.band-instruments { padding-left: 0; }
.band-violin { position: absolute; left: -3%; bottom: -8%; width: min(30%, 420px); transform: rotate(-24deg); transform-origin: 50% 100%; opacity: .96; z-index: 0;
    filter: drop-shadow(0 18px 24px rgba(40, 24, 8, .25)); }
.band-instruments .band-text { align-self: start; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 22px; }
.tiles-6 { grid-template-columns: repeat(3, 1fr); }
.tiles-3 { grid-template-columns: repeat(3, 1fr); }
.tile a { display: block; }
.tile-face { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top;
    background: #0b1519; border: 2px solid #1b2c33; border-radius: 8px; box-shadow: 0 14px 30px rgba(8, 20, 26, .22); transition: transform .2s ease, box-shadow .2s ease; }
.tile a:hover .tile-face { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(8, 20, 26, .3); }
.tile-name { display: block; margin-top: 10px; text-align: center; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }
.band-dark .tile-name { color: #f4f1ea; }

.band-effects { padding-block: clamp(48px, 6vw, 80px); }
.band-glow { position: absolute; right: 0; top: 0; height: 100%; width: min(62%, 1000px); object-fit: cover; object-position: right center; opacity: .75;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55%); mask-image: linear-gradient(to right, transparent 0, #000 55%); }
.band-effects .tiles { max-width: 820px; }

/* featured sounds */
.packs { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 34px; }
.pack { display: flex; flex-direction: column; align-items: center; }
.pack-box { position: relative; display: block; width: min(210px, 62%); aspect-ratio: 5 / 7; padding: 0; border: 0; background: none; cursor: pointer;
    perspective: 900px; transform-style: preserve-3d; font: inherit; color: inherit; }
.pack-box[aria-hidden="true"] { cursor: default; }
.pack-front, .pack-spine { position: absolute; inset: 0; display: block; }
.pack-front { overflow: hidden; border-radius: 2px 5px 5px 2px; transform: rotateY(-16deg); transform-origin: left center;
    box-shadow: 8px 14px 26px rgba(20, 14, 6, .32), inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .3s ease, box-shadow .3s ease; background: var(--ink-dark); }
.pack-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pack-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6, 14, 18, .5) 0, rgba(6, 14, 18, 0) 26%, rgba(6, 14, 18, 0) 56%, rgba(6, 14, 18, .82) 100%); }
.pack-mark { position: absolute; left: 12%; top: 7%; width: 20%; }
.pack-mark .brand-mark { width: 100%; height: auto; }
.pack-title { position: absolute; left: 12%; right: 10%; bottom: 7%; text-align: left; font-family: var(--serif); font-weight: 650; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.1; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.pack-spine { left: -12px; width: 12px; right: auto; background: linear-gradient(to right, #07161b, #12303a); border-radius: 2px 0 0 2px; transform: rotateY(-16deg) skewY(4deg); transform-origin: right center; }
.pack-box:hover .pack-front, .pack-box:focus-visible .pack-front { transform: rotateY(-6deg) translateY(-4px); box-shadow: 10px 20px 32px rgba(20, 14, 6, .38), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pack-box:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 8px; }
.pack-play { position: absolute; left: 50%; top: 46%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .92); color: #0f1d23; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); opacity: 0; transform: scale(.9); transition: opacity .2s ease, transform .2s ease; }
.pack-play svg { width: 24px; height: 24px; fill: currentColor; }
.pack-play .icon-stop { display: none; }
.pack-box:hover .pack-play, .pack-box:focus-visible .pack-play, .pack-box[aria-pressed="true"] .pack-play { opacity: 1; transform: none; }
.pack-box[aria-pressed="true"] .icon-play { display: none; }
.pack-box[aria-pressed="true"] .icon-stop { display: block; }
.pack-info { margin-top: 24px; text-align: center; max-width: 300px; }
.pack-info h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.pack-info p { margin-top: 6px; font-size: .93rem; color: var(--text-soft); }
.pack-info .pack-use a { color: var(--brand-700); border-bottom: 1px solid currentColor; }
.pack-info .pack-meta { font-size: .82rem; color: var(--muted); }
.pack-info audio { display: block; width: 100%; margin-top: 12px; height: 34px; }
.pack-button { margin-top: 12px; height: 36px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
    font: inherit; font-size: .86rem; font-weight: 600; color: var(--text); cursor: pointer; }
.pack-button[aria-pressed="true"] { background: var(--ink-dark); color: #fff; border-color: transparent; }
.pack-button:hover { border-color: var(--brand-500); }

/* download */
.band-download { padding-bottom: clamp(64px, 8vw, 110px); }
.band-land { position: absolute; right: 0; bottom: 0; width: min(58%, 880px); height: 100%; object-fit: cover; object-position: right bottom; opacity: .85; z-index: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60%); mask-image: linear-gradient(to right, transparent 0, #000 60%); }
.version { font-size: 1rem; color: var(--text-soft); letter-spacing: .01em; }
.dl-tabs { margin-top: 30px; max-width: 760px; }
.dl-tablist { display: none; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.js .dl-tablist { display: flex; }
.dl-tab { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
    font: inherit; font-size: .98rem; font-weight: 600; color: var(--text); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.dl-tab:hover { border-color: var(--brand-500); }
.dl-tab[aria-selected="true"] { background: linear-gradient(135deg, #1b958f, #127c78); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(25, 146, 137, .28); }
.dl-tab-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.dl-tab-icon svg { width: 20px; height: 20px; }
.dl-panel { margin-top: 26px; }
.dl-panel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.js .dl-panel { display: none; margin-top: 0; }
.js .dl-panel.is-active { display: block; }
.js .dl-panel-title { display: none; }
.dl-files { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.dl-files li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 18px; padding: 13px 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.dl-file { display: block; min-width: 0; }
.dl-file-label { display: block; font-weight: 600; }
.dl-file:hover .dl-file-label { color: var(--brand-700); }
.dl-file-name { display: block; font-family: var(--mono); font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }
.dl-file-size { font-size: .86rem; color: var(--text-soft); white-space: nowrap; }
.dl-file-sha { font-family: var(--mono); font-size: .78rem; color: var(--brand-700); border-bottom: 1px solid currentColor; }
.dl-note { margin-top: 14px; font-size: .92rem; color: var(--muted); }
.early { margin-top: 46px; max-width: 520px; }
.early h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.early .signup-form { margin: 16px 0 0; max-width: none; }
.dl-sounds { margin-top: 30px; max-width: 620px; font-size: .9rem; color: var(--text-soft); }
.dl-sounds code { font-family: var(--mono); font-size: .82rem; white-space: nowrap; }
.dl-sounds a { color: var(--brand-700); border-bottom: 1px solid currentColor; }

@media (max-width: 1000px) {
    .band-grid { grid-template-columns: 1fr; }
    .band-violin { position: relative; left: auto; bottom: auto; transform: none; width: min(46%, 260px); margin: 0 0 -10px 4%; }
    .band-instruments .container { order: 2; }
    .packs { grid-template-columns: repeat(2, 1fr); }
    .hero-ed-inner { grid-template-columns: 1fr; min-height: 0; padding-block: 30px 40px; }
    .wordmark { text-align: left; }
    .devices { margin-top: 10px; }
    .hero-mist { width: 100%; opacity: .75; }
}
@media (max-width: 640px) {
    .tiles-6, .tiles-3 { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
    .tiles-3 .tile:last-child { grid-column: 1 / -1; max-width: 70%; justify-self: center; }
    .packs { grid-template-columns: 1fr 1fr; gap: 40px 14px; }
    .pack-box { width: min(150px, 80%); }
    .pack-info { max-width: none; }
    .pack-info h3 { font-size: 1.1rem; }
    .dl-files li { grid-template-columns: 1fr auto; }
    .dl-file-sha { justify-self: end; }
    .band-land { opacity: .35; width: 100%; }
    .footer-links { margin-left: 0; }
}

/* ================= Inner pages ================= */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page-head { background: var(--bg); padding: clamp(44px, 6vw, 84px) 0 clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--border); }
.page-sub { margin-top: 10px; font-size: 1.05rem; color: var(--text-soft); max-width: 60ch; }
.page-body { padding: clamp(28px, 4vw, 52px) 0 clamp(60px, 8vw, 110px); }
.page-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: clamp(32px, 4vw, 52px); }
.page-body h2 small { font-family: var(--font); font-size: .9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.page-note { max-width: 70ch; color: var(--text-soft); }
.page-note code, .info code, .credit code { font-family: var(--mono); font-size: .85em; white-space: nowrap; }
.page-note a, .info a:not(.band-link), .credit a, .attributions a { color: var(--brand-700); border-bottom: 1px solid currentColor; }
.crumbs { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; font-size: .9rem; color: var(--muted); }
.crumbs a { color: var(--brand-700); }
.crumbs span { color: var(--border-strong); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.chips a { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
    font-size: .9rem; font-weight: 600; color: var(--text); transition: border-color .15s ease, color .15s ease; }
.chips a:hover { border-color: var(--brand-500); color: var(--brand-700); }
.family { scroll-margin-top: calc(var(--header-height) + 16px); }

/* tables of packs */
.data-table { width: 100%; margin-top: 16px; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs); }
.data-table th { padding: 12px 18px; text-align: left; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--surface-sunken); border-bottom: 1px solid var(--border); }
.data-table td { padding: 14px 18px; border-top: 1px solid var(--border); font-size: .95rem; vertical-align: top; }
.data-table tbody tr:first-child td { border-top: 0; }
.data-table code { font-family: var(--mono); font-size: .8rem; color: var(--text-soft); }
.data-table tr:target td { background: rgba(45, 212, 200, .1); }
.data-action { text-align: right; white-space: nowrap; }
.file-link { color: var(--brand-700); font-weight: 600; border-bottom: 1px solid currentColor; }
.tag { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: rgba(45, 212, 200, .16); color: var(--brand-700); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }

/* credits */
.attributions { display: grid; gap: 12px; margin-top: 16px; }
.attributions p { overflow-wrap: anywhere; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand-500); border-radius: var(--radius-sm); }
.credit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.credit { padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); scroll-margin-top: calc(var(--header-height) + 16px); }
.credit h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.credit h3 span { display: block; margin-bottom: 2px; font-family: var(--font); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.credit ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .9rem; color: var(--text-soft); overflow-wrap: anywhere; }
.credit p { margin-top: 10px; font-size: .9rem; color: var(--text-soft); }

/* instruments, effects, a product */
.product-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 22px; }
.product-card a { display: block; }
.product-face { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; background: #0b1519; border: 2px solid #1b2c33; border-radius: 8px;
    box-shadow: 0 14px 30px rgba(8, 20, 26, .2); transition: transform .2s ease, box-shadow .2s ease; }
.product-card a:hover .product-face { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(8, 20, 26, .28); }
.product-name { display: block; margin-top: 10px; text-align: center; font-family: var(--serif); font-size: 1.1rem; font-weight: 500; }
.product-card p { margin-top: 6px; font-size: .9rem; color: var(--text-soft); text-align: center; }
.product-shot { margin: 0; padding: 8px; background: #0b1519; border: 2px solid #1b2c33; border-radius: 12px; box-shadow: 0 24px 56px rgba(8, 20, 26, .3); max-width: 1000px; }
.product-shot img { width: 100%; border-radius: 6px; }
.pack-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; max-width: 560px; }
.pack-list li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pack-list a { color: var(--brand-700); }
.pack-list span { color: var(--muted); font-size: .9rem; }

/* download page */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: clamp(36px, 5vw, 60px); }
.info { min-width: 0; padding: 24px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.info h2 { margin: 0 0 10px; font-size: 1.35rem; }
.info p { margin-top: 10px; color: var(--text-soft); font-size: .95rem; }
.facts-list { margin: 14px 0 0; display: grid; gap: 8px; }
.facts-list div { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; border-top: 1px solid var(--border); font-size: .9rem; }
.facts-list dt { color: var(--muted); }
.facts-list dd { margin: 0; text-align: right; color: var(--text-soft); }
.facts-list code { font-family: var(--mono); font-size: .76rem; }
.command-small { margin-top: 14px; padding: 12px 14px 12px 16px; }
.command-small code { font-size: .78rem; }

@media (max-width: 900px) {
    .info-grid, .credit-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
    .data-table tr { padding: 14px 16px; border-top: 1px solid var(--border); }
    .data-table tbody tr:first-child { border-top: 0; }
    .data-table td { padding: 3px 0; border: 0; }
    .data-table td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 72px; margin-right: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
    .data-action { text-align: left; padding-top: 8px !important; }
    .product-grid { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
}

/* a face that has no picture yet: the mark on the dark ground, instead of a bare dark box */
.tile-empty, .product-empty { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 15 168 145'%3E%3Cpath d='M15 19 L76 19 C80.5 19 83.1 21.2 85.4 25.5 L119.1 88.2 C122.2 94.1 122 98.4 119.7 103.2 L95.1 148.8 C93.2 152.4 91.7 155.4 89.8 155.5 C88 155.6 86.8 153.2 84.800 149.8 L14.3 24 C12.2 20.4 12.8 19 15 19 Z' fill='%23ffffff' fill-opacity='.14'/%3E%3Cpath d='M113.4 38.2 L171.8 38.2 C173 38.2 173.5 39 172.7 40.5 L101.1 155 L126.5 108.4 C129 103.9 130.4 99.6 130.3 95 C130.2 90.3 128.8 86.2 126.2 81.5 L108.4 49.3 C106.2 45.5 106.4 42.3 108.9 40.1 C110.1 39 111.5 38.2 113.4 38.2 Z' fill='%2348dfe1' fill-opacity='.3'/%3E%3C/svg%3E") center / 22% no-repeat, radial-gradient(ellipse at 50% 40%, #16303a, #0b1519 75%); }

/* project format and its specification */
.prose { max-width: 70ch; margin-top: 14px; }
.prose p { margin-top: 12px; color: var(--text-soft); }
.prose p:first-child { margin-top: 0; }
.prose code, .spec code { font-family: var(--mono); font-size: .86em; }
.info-wide { grid-column: 1 / -1; }
.info h3 { margin: 20px 0 0; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.file-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .92rem; }
.file-list a { overflow-wrap: anywhere; }
.page-sub .page-link { color: var(--brand-700); border-bottom: 1px solid currentColor; }
.spec { max-width: 860px; }
.spec-version { margin: 0; font-family: var(--mono); font-size: .85rem; color: var(--muted); }
.spec-contents { margin-top: 14px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.spec-contents h2 { margin: 0 0 8px; font-size: 1.1rem; }
.spec-contents ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; font-size: .95rem; }
.spec-contents a, .spec-text a { color: var(--brand-700); border-bottom: 1px solid currentColor; }
.spec-text { margin-top: 8px; }
.spec-text h2 { scroll-margin-top: calc(var(--header-height) + 16px); }
.spec-text h3 { margin-top: 28px; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; scroll-margin-top: calc(var(--header-height) + 16px); }
.spec-text p, .spec-text li { color: var(--text-soft); }
.spec-text p { margin-top: 12px; }
.spec-text ul, .spec-text ol { margin: 12px 0 0; padding-left: 1.4em; display: grid; gap: 6px; }
.spec-text li > p { margin-top: 6px; }
.spec-text pre { margin: 16px 0 0; padding: 16px 20px; background: #101a24; border-radius: var(--radius-sm); overflow-x: auto; }
.spec-text pre code { font-size: .8rem; line-height: 1.55; color: #dbe7ef; white-space: pre; }
.spec-text :not(pre) > code { padding: 1px 5px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 5px; overflow-wrap: anywhere; }
.table-scroll { margin-top: 16px; overflow-x: auto; }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--surface); }
.table-scroll th, .table-scroll td { padding: 9px 14px; text-align: left; vertical-align: top; border: 1px solid var(--border); }
.table-scroll th { background: var(--surface-sunken); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.table-scroll td code, .table-scroll th code { white-space: nowrap; }
.command-wrap code { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }