/* SPDX-License-Identifier: GPL-3.0-only */
/* AURORA's site and emulator pages, in the instrument's own colours: the night sky of its panel, its silk and
 * legend greys, and the four knob colours (green, blue, violet, amber) as the accents. Dark only: it is a night sky.
 * After X0X's page styles (charlesvestal/fm1-x0x, GPL-3.0). */
:root { --ground: #0e1018; --ink: #d6dee8; --muted: #8a96aa; --leg: #687488; --rule: #2a3242; --card: #141824; --panel: #0a0c12;
        --k1: #78e6be; --k2: #5aaaff; --k3: #dc78e6; --k4: #f0be46; --accent: var(--k1); color-scheme: dark; }
:root[data-theme="light"], :root[data-theme="dark"] { color-scheme: dark; }
body { background: var(--ground); color: var(--ink); margin: 0; padding-inline: 16px; padding-block: 28px 48px;
       font: 400 16px/1.55 "Barlow", "Helvetica Neue", Arial, sans-serif; }
main { max-width: 960px; margin: 0 auto; }
header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; margin: 0 0 1rem; }
h1 { font: 700 2rem/1.1 "Barlow Semi Condensed", "Barlow", sans-serif; margin: 0; letter-spacing: .12em; }
h1 a { color: var(--k1); text-decoration: none; }
header p { margin: 0; color: var(--muted); }
header nav { margin-left: auto; display: flex; gap: 1.2rem; flex-wrap: wrap; }
header nav a { font: 600 .85rem "Barlow Semi Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
header nav a:hover { color: var(--k1); }
a { color: var(--k2); }
h2 { font: 700 1.5rem/1.2 "Barlow Semi Condensed", "Barlow", sans-serif; margin: 2.4rem 0 .6rem; letter-spacing: .06em; text-transform: uppercase; }
h2::before { content: ""; display: inline-block; width: 1.6rem; height: 4px; border-radius: 2px; background: var(--k1); vertical-align: middle; margin-right: .6rem; }
h2.b::before { background: var(--k2); } h2.v::before { background: var(--k3); } h2.a::before { background: var(--k4); }
h3 { font: 600 1.15rem/1.3 "Barlow Semi Condensed", "Barlow", sans-serif; margin: 1.6rem 0 .4rem; letter-spacing: .04em; }
kbd, code { font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace; background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 0 5px; }
pre { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; overflow-x: auto; }
pre code { border: 0; padding: 0; background: none; }
table { border-collapse: collapse; width: 100%; margin: .6rem 0 1.2rem; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: .4rem .6rem; border-bottom: 1px solid var(--rule); }
th { color: var(--muted); font-weight: 600; }
td.k { white-space: nowrap; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; letter-spacing: .06em; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.1rem; }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.shot { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; }
.shot figure { margin: 0; }
.shot img { width: 100%; height: auto; image-rendering: pixelated; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); }
.shot figcaption { color: var(--muted); font-size: 14px; margin-top: .3rem; }
.try { display: inline-block; background: var(--k1); color: #06120d; text-decoration: none; font: 600 .95rem "Barlow Semi Condensed", sans-serif; letter-spacing: .06em; padding: .45em 1.1em; border-radius: 999px; margin: .2rem .4rem .2rem 0; }
.try.b { background: var(--k2); color: #04101e; } .try.v { background: var(--k3); color: #16061a; } .try.a { background: var(--k4); color: #1a1204; }
.note { border-left: 3px solid var(--k4); padding: .2rem 0 .2rem .9rem; color: var(--muted); }
footer { margin-top: 3rem; color: var(--muted); font-size: 14px; border-top: 1px solid var(--rule); padding-top: 1rem; }
.toc { columns: 2; column-gap: 2rem; font-size: 15px; } .toc li { break-inside: avoid; }
@media (max-width: 640px) { .toc { columns: 1; } }

.lead { font-size: 1.25rem; line-height: 1.45; margin: .4rem 0; }
.lead + .lead { font-size: 1.05rem; color: var(--muted); }
.aside { margin: .8rem 0 1rem; padding-left: .9rem; border-left: 3px solid var(--k3); color: var(--ink); }

/* the sky: the hero, drawn live by the page with the firmware's own curtains */
.sky { position: relative; margin: 0 0 1.4rem; border-radius: 14px; overflow: hidden; background: var(--panel); border: 1px solid var(--rule); aspect-ratio: 3 / 1; }
.sky canvas { display: block; width: 100%; height: 100%; }
.sky .over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem 1.4rem; pointer-events: none; }
.sky .over h1 { font-size: clamp(2.2rem, 7vw, 4.2rem); letter-spacing: .2em; color: var(--k1); text-shadow: 0 0 24px rgba(120, 230, 190, .35); }
.sky .over p { margin: .2rem 0 0; color: var(--ink); font-size: clamp(.95rem, 2.4vw, 1.15rem); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.sky .k { position: absolute; left: 1.4rem; right: 1.4rem; bottom: .6rem; display: flex; gap: 6px; pointer-events: none; }
.sky .k i { flex: 1; height: 3px; border-radius: 2px; background: var(--rule); position: relative; }
.sky .k i::after { content: ""; position: absolute; inset: 0; width: var(--v, 50%); border-radius: 2px; background: var(--c); }

/* the knobs' legend: a coloured mark before a name */
.kn { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
.kn::before { content: ""; display: inline-block; width: .9em; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: .35em; background: var(--c, var(--k1)); }
.k1 { --c: var(--k1); } .k2 { --c: var(--k2); } .k3 { --c: var(--k3); } .k4 { --c: var(--k4); }

/* the pages: a screen each, its knobs under it in their colours */
.pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.2rem 1rem; margin: 1rem 0; }
.pages figure { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: .6rem .6rem .8rem; }
.pages img { width: 100%; height: auto; image-rendering: pixelated; border-radius: 8px; display: block; }
.pages figcaption { margin-top: .5rem; font-size: 14px; color: var(--muted); }
.pages figcaption b { display: block; color: var(--ink); font: 600 1rem "Barlow Semi Condensed", sans-serif; letter-spacing: .08em; margin-bottom: .15rem; }
.pages .knobs { display: flex; gap: 4px; margin: .4rem 0 .3rem; }
.pages .knobs i { flex: 1; height: 3px; border-radius: 2px; }
.pages .knobs i:nth-child(1) { background: var(--k1); } .pages .knobs i:nth-child(2) { background: var(--k2); }
.pages .knobs i:nth-child(3) { background: var(--k3); } .pages .knobs i:nth-child(4) { background: var(--k4); }

/* the presets: a strip from the slow and vast to the short and struck */
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin: 1rem 0; }
.presets div { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: .6rem .8rem; }
.presets b { display: block; font: 600 1rem "Barlow Semi Condensed", sans-serif; letter-spacing: .1em; color: var(--k1); }
.presets div:nth-child(n+6) b { color: var(--k2); } .presets div:nth-child(n+9) b { color: var(--k3); } .presets div:nth-child(n+10) b { color: var(--k4); }
.presets span { font-size: 14px; color: var(--muted); }

/* the panel: what each button and encoder does */
.panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .4rem 2rem; margin: .6rem 0 1rem; }
.panel div { display: flex; gap: .8rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--rule); }
.panel b { font: 600 .9rem "Barlow Semi Condensed", sans-serif; letter-spacing: .1em; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: .1em .5em; white-space: nowrap; min-width: 6.5em; text-align: center; }
.panel span { color: var(--muted); font-size: 15px; }

/* the demo, beside the intro: a big play button over the poster until it plays */
.intro { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 1.8rem; align-items: center; margin: 1.2rem 0 .6rem; }
.about .lead { margin: 0 0 .8rem; }
.layers { list-style: none; margin: 0; padding: 0; }
.layers li { padding: .38rem 0; border-top: 1px solid var(--rule); font-size: 15px; color: var(--muted); }
.layers li:first-child { border-top: 0; }
.layers .kn { color: var(--ink); margin-right: .4em; }
@media (max-width: 640px) { .intro { grid-template-columns: 1fr; } }
.player { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: var(--panel); }
.demo { display: block; width: 100%; height: auto; }
.listen { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5em; padding: .55em 1.2em .55em 1em; border-radius: 999px;
          background: rgba(14, 16, 24, .82); border: 2px solid var(--k1); color: var(--k1); cursor: pointer; font: 600 1rem "Barlow Semi Condensed", sans-serif; letter-spacing: .16em;
          box-shadow: 0 4px 18px rgba(0, 0, 0, .6); transition: transform .15s, background .15s; }
.listen svg { width: 1.4em; height: 1.4em; }
.listen svg path { fill: var(--k1); }
.listen svg .wave { fill: none; stroke: var(--k1); stroke-width: 7; stroke-linecap: round; }
.listen:hover { transform: translateX(-50%) scale(1.05); background: rgba(14, 16, 24, .95); }
.player.sound .listen { display: none; }
.ctas { text-align: center; margin: 1.4rem 0 .4rem; }
.ctas .try { font-size: 1.05rem; letter-spacing: .14em; padding: .6em 1.6em; margin: .3rem .5rem; }