/* songling.app — Console design (built by site-src/build.py; edit the sources there) */
/* Shared layout for the mock designs; each theme sets the tokens and the character. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--ui); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left)); }
main { padding-block: 48px 72px; }
main .wrap > * + * { margin-top: var(--gap, 88px); }

.mockbar { font-size: 12.5px; text-align: center; padding: 6px 16px; background: var(--mock-bg); color: var(--mock-fg); }
.mockbar a { color: inherit; text-decoration: underline; }

/* Level 1 */
header.g .wrap { display: flex; align-items: center; gap: 16px; height: 60px; }
.logo { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none !important; }
.logo img { width: 28px; height: 28px; }
.logo span { font: 700 20px var(--display); letter-spacing: -0.01em; }
.logo em { font-style: normal; color: var(--accent); }
.apps { display: flex; gap: 4px; margin-left: 20px; }
.app-tile { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 7px; color: var(--muted); text-decoration: none !important; }
.app-tile img { width: 26px; height: 26px; border-radius: 7px; }
.app-tile b { display: block; font: 600 14px/1.15 var(--ui); color: inherit; }
.app-tile small { display: block; font-size: 11px; color: var(--faint); line-height: 1.2; }
.app-tile:hover, .app-tile[aria-current="true"] { color: var(--text); }
.g-right { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: 14px; }
.g-right .support { color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; font: 600 14.5px var(--ui); white-space: nowrap; cursor: pointer; text-decoration: none !important; }
.appmenu { display: none; }

/* Level 2 */
nav.p .wrap { display: flex; align-items: center; gap: 26px; min-height: 48px; }
.p-name { font: 600 15px var(--display); white-space: nowrap; }
.p-name small { font: 400 12px var(--ui); color: var(--faint); margin-left: 7px; }
.p-links { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; font-size: 14px; }
.p-links a { color: var(--muted); white-space: nowrap; padding-block: 13px; text-decoration: none !important; }
.p-links a:hover, .p-links a[aria-current="page"] { color: var(--text); }

@media (max-width: 860px) {
  .apps, .g-right .support { display: none; }
  .appmenu { display: block; margin-left: auto; position: static; }
  .appmenu summary { list-style: none; cursor: pointer; font-size: 14px; padding: 8px 12px; }
  .appmenu summary::-webkit-details-marker { display: none; }
  .appmenu summary::after { content: " ▾"; }
  .appmenu .sheet { position: absolute; left: 0; right: 0; top: 60px; z-index: 20; padding: 12px 16px 16px; display: grid; gap: 4px; }
  .appmenu .sheet .app-tile { padding: 10px; }
  .appmenu .sheet .app-tile img { width: 34px; height: 34px; }
  .appmenu .plain { padding: 10px; color: var(--muted); }
  header.g { position: relative; }
  .g-right { margin-left: 8px; }
  .btn { height: 36px; padding: 0 12px; font-size: 13.5px; }
  nav.p .wrap { gap: 16px; }
  .p-name small { display: none; }
}

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero-text > * + * { margin-top: 16px; }
.hero h1 { font-size: clamp(36px, 3vw + 1.4rem, 64px); line-height: 1.02; letter-spacing: -0.025em; }
.hero h1 em { font-style: normal; color: var(--accent-text); }
.lede { color: var(--muted); font-size: 17.5px; max-width: 56ch; }
.where { font-size: 13px; color: var(--faint); }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.beta { display: flex; gap: 8px; flex-wrap: wrap; max-width: 30rem; }
.beta input { flex: 1 1 14rem; min-width: 0; height: 44px; padding: 0 14px; font: 15px var(--ui); color: var(--text); }
.beta .btn { height: 44px; }
.beta-msg { font-size: 13px; color: var(--faint); min-height: 1em; margin-top: 6px !important; }
.hero-note { font-size: 14px; color: var(--muted); }
.phones { display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
.phones img { width: calc((100% - 28px) / 3); max-width: 220px; height: auto; }
.phones img:nth-child(2) { transform: translateY(-24px); }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* Search demo (static) */
.search-demo { padding: 16px; }
.sd-bar { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 15px; }
.sd-found { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin: 14px 2px 8px !important; }
.sd-card { padding: 14px; margin-top: 10px; }
.sd-kind { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.sd-card b { font-size: 15px; }
.sd-chords { display: flex; gap: 6px; margin: 10px 0; }
.sd-chords span { display: grid; place-items: center; min-width: 48px; padding: 6px 8px; font: 600 16px var(--display); }
.sd-chords small { font: 400 11px var(--ui); color: var(--faint); }
.sd-tags { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.sd-tags span { padding: 2px 9px; }
.sd-reach { font-size: 13px; color: var(--muted); margin-top: 12px !important; }

.stats { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 40px !important; }
.stats b { display: block; font: 700 32px/1 var(--display); }
.stats span { font-size: 13px; color: var(--muted); }

/* Blocks */
.kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 10px !important; }
.block > h2, .split h2 { font-size: clamp(26px, 1.4vw + 1.2rem, 38px); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 12px; }
.block > .lede { margin-bottom: 26px; }
.app-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 16px; }
.app-card { display: grid; gap: 12px; align-content: start; padding: 20px; color: var(--text); text-decoration: none !important; }
.app-card header { display: flex; gap: 12px; align-items: center; }
.app-card header img { width: 48px; height: 48px; border-radius: 12px; }
.app-card header b { display: block; font: 600 18px var(--display); }
.app-card header small { font-size: 12.5px; color: var(--faint); }
.app-card p { color: var(--muted); font-size: 14.5px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 11.5px; padding: 3px 9px; }
.go { font-weight: 600; font-size: 14px; color: var(--accent-text); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps > div { padding: 22px; min-width: 0; }
.steps .num { display: inline-grid; place-items: center; width: 26px; height: 26px; font: 700 13px var(--ui); margin-bottom: 12px; }
.steps b { display: block; font: 600 18px var(--display); margin-bottom: 6px; }
.steps p { color: var(--muted); font-size: 14.5px; }
.steps small { display: block; margin-top: 12px; color: var(--faint); font-size: 12px; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; }
.card { padding: 20px; }
.card h3 { font-size: 17px; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 14.5px; }
.pro { display: inline-block; font: 600 10px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px 3px; vertical-align: 3px; margin-right: 4px; }
.vs { overflow: hidden; }
.vs-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.vs-row > span { padding: 14px 18px; font-size: 15px; min-width: 0; }
.vs-head > span { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding-block: 10px; }
@media (max-width: 600px) { .vs-row { grid-template-columns: minmax(0, 1fr); } .vs-head { display: none; } .vs-row > span:first-child { padding-bottom: 0; text-decoration: line-through; font-size: 13.5px; } }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 16px; }
.tile { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; color: var(--text); text-decoration: none !important; }
.tile img { width: 84px; height: 110px; object-fit: cover; object-position: top; }
.tile b { display: block; font: 600 17px var(--display); margin-bottom: 4px; }
.tile small { color: var(--muted); font-size: 14px; line-height: 1.45; display: block; }
.pagehead { max-width: 760px; }
.pagehead h1 { font-size: clamp(34px, 2.6vw + 1.2rem, 56px); line-height: 1.04; letter-spacing: -0.02em; margin: 8px 0 16px; }
.eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split.flip .split-text { order: 2; }
.split .lede { margin-bottom: 18px; }
.shot { margin: 0; display: flex; justify-content: center; }
.shot img { width: min(280px, 80%); height: auto; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); gap: 30px; } .split.flip .split-text { order: 0; } }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.points li { color: var(--muted); font-size: 15.5px; max-width: 58ch; }
.points b { color: var(--text); font-weight: 600; }
.flow { list-style: none; counter-reset: f; padding: 0; margin: 0; display: grid; gap: 10px; }
.flow li { counter-increment: f; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; }
.flow li::before { content: counter(f); grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; font: 600 13px var(--ui); }
.flow span { color: var(--muted); font-size: 14.5px; }
.ladder { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ladder span { font-size: 13px; font-weight: 600; padding: 5px 11px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.ladder .yours { border-style: dashed; }
.inspector { margin: 0; max-width: 760px; font: 13px/1.6 ui-monospace, "SF Mono", Menlo, monospace; overflow: hidden; }
.inspector figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.inspector dl { display: grid; grid-template-columns: 54px minmax(0, 1fr); margin: 0; padding: 12px 16px; row-gap: 3px; }
.inspector dd { margin: 0; overflow-wrap: anywhere; }
.inspector dd i { font-style: normal; opacity: .6; }
.inspector .t { margin-right: 8px; }
.inspector .beside { padding: 10px 16px 14px; display: grid; gap: 6px; }
.inspector .beside p { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inspector .beside span:first-child { overflow-wrap: anywhere; min-width: 0; }
.looks { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 16px; }
.look { margin: 0; overflow: hidden; }
.look img { display: block; width: 100%; height: auto; }
.look figcaption { padding: 12px 14px 14px; display: grid; gap: 3px; }
.look b { font: 600 16px var(--display); }
.look span { color: var(--muted); font-size: 14px; }
.note { color: var(--muted); font-size: 14px; margin-top: 16px !important; }
.faq { max-width: 760px; }
.faq details { padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; font: 600 16.5px var(--ui); padding: 14px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; display: inline-block; width: 22px; color: var(--accent-text); }
.faq details[open] summary::before { content: "–"; }
.faq details p { color: var(--muted); padding: 0 0 16px 22px; }
.prevnext { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; font-weight: 600; }

footer.f .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 24px; padding-block: 36px 28px; }
footer.f h4 { font: 600 13px var(--ui); margin: 0 0 8px; }
footer.f ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13.5px; color: var(--faint); }
footer.f a { color: var(--muted); }
footer.f .who { grid-column: 1 / -1; font-size: 12.5px; color: var(--faint); padding-top: 14px; }

/* Console: a studio rack. Near-black panels, hairline rules, mono labels, square corners, amber as the one lit LED. */
:root {
  --bg: #0A0A0B; --panel: #121214; --panel2: #18181B; --rule: #26262B; --rule2: #34343A;
  --text: #EDEAE2; --muted: #A09B91; --faint: #6C685F; --accent: #E8B54B; --accent-text: #E8B54B; --link: #EDEAE2;
  --display: "Bricolage Grotesque", system-ui, sans-serif; --ui: "Inter", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --mock-bg: #E8B54B; --mock-fg: #0A0A0B; color-scheme: dark;
}
body { background: var(--bg) linear-gradient(var(--rule) 1px, transparent 1px) 0 0 / 100% 120px; background-attachment: fixed; background-image: none; }
main { background-image: linear-gradient(to right, color-mix(in srgb, var(--rule) 45%, transparent) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
header.g { background: #070708; border-bottom: 1px solid var(--rule); }
.apps { border-left: 1px solid var(--rule); padding-left: 14px; gap: 0; }
.app-tile { border-right: 1px solid var(--rule); padding: 8px 16px; border-radius: 0; }
.app-tile[aria-current="true"] { background: var(--panel2); box-shadow: inset 0 2px 0 var(--accent); }
.app-tile img { border-radius: 4px; }
.btn { border-radius: 3px; font: 600 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule2); color: var(--text); background: var(--panel2); }
.btn.primary { background: var(--accent); color: #0A0A0B; border-color: var(--accent); }
nav.p { background: var(--panel); border-bottom: 1px solid var(--rule); }
.p-name { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.p-links a { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.p-links a[aria-current="page"] { color: var(--text); }
.p-links a[aria-current="page"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); margin-right: 8px; vertical-align: 2px; }
.appmenu summary { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule2); border-radius: 3px; }
.appmenu .sheet { background: #070708; border-bottom: 1px solid var(--rule); }
.eyebrow, .kicker, .where, .sd-found, .sd-kind, .vs-head span, .chip, .steps small, .stats span { font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.hero h1 { font-weight: 800; letter-spacing: -0.035em; }
.hero h1 em, .pagehead h1 em { color: var(--accent); }
.beta input { background: var(--panel); border: 1px solid var(--rule2); border-radius: 3px; }
.search-demo { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; }
.sd-bar { background: #0A0A0B; border: 1px solid var(--rule2); border-radius: 3px; font-family: var(--mono); }
.sd-found { color: var(--accent); }
.sd-card { background: var(--panel2); border: 1px solid var(--rule); border-left: 2px solid var(--accent); border-radius: 2px; }
.sd-chords span { background: #0A0A0B; border: 1px solid var(--rule2); border-radius: 3px; }
.sd-tags span { border: 1px solid var(--rule2); border-radius: 2px; color: var(--muted); }
.stats { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: 18px; gap: 0; }
.stats > div { padding-right: 40px; margin-right: 40px; border-right: 1px solid var(--rule); }
.stats > div:last-child { border-right: 0; }
.stats b { font-family: var(--mono); font-weight: 500; font-size: 30px; color: var(--accent); }
.app-card, .card, .tile, .look, .vs, .flow li, .search-demo { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; }
.app-card.lead { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.app-card:hover, .tile:hover { border-color: var(--rule2); background: var(--panel2); }
.chip { border: 1px solid var(--rule2); border-radius: 2px; color: var(--muted); }
.chip.ok { color: #7CD67C; border-color: #2F5A2F; }
.chip.soon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.steps { border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
.steps > div + div { border-left: 1px solid var(--rule); }
.steps .num { border: 1px solid var(--accent); color: var(--accent); border-radius: 2px; font-family: var(--mono); }
@media (max-width: 760px) { .steps > div + div { border-left: 0; border-top: 1px solid var(--rule); } }
.pro { color: var(--accent); border: 1px solid var(--accent); border-radius: 2px; font-family: var(--mono); }
.vs-row + .vs-row > span { border-top: 1px solid var(--rule); }
.vs-row > span:last-child { border-left: 1px solid var(--rule); background: var(--panel2); }
.vs-row > span:first-child { color: var(--faint); }
.vs-head > span:last-child { color: var(--accent); }
.tile img { border: 1px solid var(--rule2); border-radius: 3px; }
.phones img, .shot img { border: 1px solid var(--rule2); border-radius: 18px; background: var(--panel); box-shadow: 0 0 0 6px #121214, 0 0 0 7px var(--rule); }
.pagehead { border-bottom: 1px solid var(--rule); padding-bottom: 28px; }
.flow li::before { border: 1px solid var(--accent); color: var(--accent); border-radius: 2px; font-family: var(--mono); }
.ladder span { border-radius: 2px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.inspector { background: #070708; border: 1px solid var(--rule2); border-radius: 4px; color: var(--muted); }
.inspector figcaption { background: var(--panel2); border-bottom: 1px solid var(--rule); color: var(--text); }
.inspector dt { color: var(--accent); }
.inspector dd b, .inspector .t { color: var(--text); font-weight: 500; }
.inspector .beside { border-top: 1px dashed var(--rule2); color: var(--text); }
.dim { color: var(--faint); }
.faq details { border-bottom: 1px solid var(--rule); }
.prevnext { border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.prevnext a { color: var(--accent); }
footer.f { background: #070708; border-top: 1px solid var(--rule); }
footer.f h4 { font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; color: var(--accent); }

/* Components carried over from the previous stylesheet: the chord demo, the tour, downloads, prose, shared links. */

/* ── the app's own furniture ──────────────────────────────────────────
   These are not impressions of Songling's cards: the sizes, colours, radii
   and type below were read off the running app (2026-09-20) so a card here
   is drawn the way a card is drawn there. */
.stage { background: #17171C; border: 1px solid #26262E; border-radius: 14px; padding: 14px; position: relative; }
.stage .bar {
  display: flex; align-items: center; gap: 8px; background: #1F1F25;
  border: 1px solid #2C2C34; border-radius: 9px; padding: 8px 12px; font-size: 13px; color: var(--muted);
}
.stage .bar .typed { color: var(--text); }
.stage .bar .caret { display: inline-block; width: 1.5px; height: 14px; background: var(--amber); translate: 0 2px; }
.stage .found { font-size: 8.5px; letter-spacing: .5px; text-transform: uppercase; color: #9BBB58; margin: 13px 2px 7px; }
.cards { display: grid; gap: 8px; }

/* a progression card */
.pcard {
  background: #17171C; border: 1px solid #26262E; border-radius: 12px; padding: 12px 14px;
  box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--tone, #9BBB58) 65%, transparent);
  opacity: 0; translate: 0 6px;
  transition: opacity .3s var(--ease), translate .3s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.pcard.in { opacity: 1; translate: 0 0; }
.pcard.lit { border-color: var(--amber); box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--tone, #9BBB58) 65%, transparent), 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent); }
.pcard .kind { font-size: 8.5px; letter-spacing: .5px; color: #A9B780; text-transform: uppercase; }
.pcard .name { font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--text); margin-top: 1px; }
/* a chord row, wherever it appears — inside a card or on its own */
.rns { display: flex; gap: 5px; flex-wrap: wrap; }
.pcard .rns { margin-top: 8px; }

/* a chord chip: the numeral over the chord as it is spelled in this key,
   in a box tinted with the card's own feeling colour */
.rn {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: color-mix(in srgb, var(--tone, #9BBB58) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone, #9BBB58) 34%, transparent);
  border-radius: 9px; padding: 4px 10px 5px; min-width: 40px;
  transition: background .12s var(--ease), scale .12s var(--ease);
}
.rn b {
  font-family: var(--display); font-size: 15px; font-weight: 500; letter-spacing: -.2px;
  color: color-mix(in srgb, var(--tone, #9BBB58) 78%, white);
}
.rn small { font-family: var(--ui); font-size: 9.5px; font-weight: 400; color: var(--muted); }
.rn.on { background: color-mix(in srgb, var(--tone, #9BBB58) 30%, transparent); scale: 1.05; }

/* the feelings, as the app pills them */
.pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text);
  border: 1px solid #34343C; border-radius: 7px; padding: 2px 9px 2px 7px;
}
.pill i { width: 6px; height: 6px; border-radius: 99px; background: var(--dot); }
/* the weighted tags underneath */
.tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
.tag {
  font-size: 9px; padding: 1.5px 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--tone, #9BBB58) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone, #9BBB58) 34%, transparent);
  color: color-mix(in srgb, var(--tone, #9BBB58) 70%, white);
}
.stage .reach { font-size: 11px; color: #8F8C82; line-height: 1.5; margin: 11px 2px 0; min-height: 3.2em; }
.stage .reach b { color: #F1ECE2; font-weight: 600; font-size: 11.5px; }
.stage .pause {
  position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid #2C2C34; background: color-mix(in srgb, #17171C 70%, transparent);
  color: var(--muted); font-size: 10px; display: grid; place-items: center; cursor: pointer;
}
.stage .pause:hover { color: var(--text); border-color: var(--line-strong); }

/* ── counts ──────────────────────────────────────────────────────────── */
.counts { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; }
.counts > div { display: flex; align-items: baseline; gap: 7px; }
.counts .n { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.counts .what { font-size: 13px; color: var(--faint); }

/* ── tour tabs ───────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.tabs button {
  font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--hairline); background: transparent; color: var(--muted);
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--amber-ink); background: var(--amber); border-color: var(--amber); font-weight: 600; }
/* All four panels live in ONE grid cell, so the box is always as tall as the
   tallest of them and switching tabs moves nothing on the page. The inactive
   ones keep their space but are invisible, out of the tab order and out of
   the accessibility tree (visibility + inert), so nothing jumps and nothing
   is read out twice. */
.panels { display: grid; }
.panel {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .18s var(--ease);
}
.panel.is-on { opacity: 1; visibility: visible; }
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; gap: 22px; } }
.panel h2 { font-size: clamp(21px, 1.2vw + 1.4svh, 30px); margin-bottom: 10px; }
.panel p { color: var(--muted); max-width: 54ch; font-size: 15px; }
.panel .detail { font-size: 13px; color: var(--faint); border-top: 1px solid var(--hairline); padding-top: 10px; margin-top: 14px; }

/* a frame for a clip; until one exists it holds the app's own furniture
   rather than an empty box */
.frame { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; position: relative; }
.frame video, .frame img { display: block; width: 100%; height: auto; }
.frame figcaption { font-size: 12px; color: var(--faint); padding: 9px 13px; border-top: 1px solid var(--hairline); }

/* ── platform cards ──────────────────────────────────────────────────── */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; margin: 22px 0 6px; }
.platform { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 20px; }
.platform.here { border-color: var(--line-strong); }
.platform h3 { font-size: 18px; margin-bottom: 3px; }
.platform .req { font-size: 12.5px; color: var(--faint); margin: 0 0 14px; }
.platform .ver { font-size: 12px; color: var(--faint); margin: 10px 0 0; }
.platform .yours { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 6px; }

/* ── rows, prose ─────────────────────────────────────────────────────── */
ul.rows { list-style: none; margin: 16px 0 0; padding: 0; }
ul.rows li { padding: 11px 0; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 14.5px; }
ul.rows li b { color: var(--text); font-weight: 500; }
.prose h1 { font-size: clamp(27px, 1.6vw + 1.8svh, 38px); margin-bottom: 8px; }
.prose .when { color: var(--faint); font-size: 13px; margin: 0 0 24px; }
.prose h2 { font-size: 19px; margin: 26px 0 8px; }
.prose h3 { font-size: 15px; margin: 18px 0 4px; font-weight: 500; color: var(--text); }
.prose p, .prose li { color: var(--muted); }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--text); font-weight: 500; }

/* ── footer ──────────────────────────────────────────────────────────── */

/* ── less room: the short-laptop pass, last so it wins ──────────────── */
/* the short-laptop pass: a 1280x720 machine gives about 620px of page, and
   that is the size everything above has to survive in */
@media (max-height: 700px) {
  .counts { margin-top: 14px; gap: 18px; }
  .stage { padding: 12px; }
  .stage .found { margin: 10px 2px 7px; }
  .pcard { padding: 8px 11px; }
  .stage .reach { min-height: 2.6em; margin-top: 9px; }
  ul.rows { margin-top: 10px; }
  ul.rows li { padding: 8px 0; }
  .under { margin-top: 8px; }
}
/* On a shorter screen the demo sheds detail from the bottom up rather than
   pushing the buttons off the page: first the weighted tags, then the third
   find. A card keeps its chords and its feelings at every size. */
@media (max-height: 900px) and (min-width: 980px) {
  .tags { display: none; }
}
@media (max-height: 800px) and (min-width: 980px) {
  .stage { padding: 12px; }
  .pcard { padding: 10px 12px; }
  .stage .reach { min-height: 2.4em; margin-top: 9px; }
  .pills { margin-top: 7px; }
}
@media (max-height: 720px) and (min-width: 980px) {
  .cards .pcard:nth-child(3) { display: none; }
}

/* ── motion: between pages, and only if it is wanted ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ── help: one DAW at a time ──────────────────────────────────────────────
   A reference page is long by nature, and the reader wants ONE of these
   seven. Each stays shut until it is asked for. */
.prose details {
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 0 14px; margin: 0 0 8px; background: var(--card);
}
.prose details[open] { padding-bottom: 6px; }
.prose summary {
  cursor: pointer; padding: 11px 0; color: var(--text);
  font-weight: 500; list-style: none;
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::before {
  content: "›"; display: inline-block; width: 16px;
  color: var(--faint); transition: transform 140ms ease;
}
.prose details[open] summary::before { transform: rotate(90deg); }
.prose summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.prose details ol { margin: 0 0 10px; padding-left: 32px; color: var(--muted); }
.prose details li { margin-bottom: 6px; }
.prose .paths { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.prose .paths th { text-align: left; font-weight: 500; color: var(--text); padding: 7px 12px 7px 0; }
.prose .paths td { color: var(--muted); padding: 7px 12px 7px 0; border-top: 1px solid var(--hairline); }
.prose .paths td code { font-size: 12.5px; word-break: break-all; }
@media (prefers-reduced-motion: reduce) { .prose summary::before { transition: none; } }

/* ── the price, on the download page ──────────────────────────────────────
   One line, stated plainly. The figure carries the weight; the sentence
   under it answers the only question a price raises when there is no demo
   button next to it — can I try it first. */
.price { margin: 18px 0 10px; font-size: 15px; color: var(--muted); }
.price strong { font-family: var(--display); font-size: 30px; font-weight: 600; color: var(--text); margin-right: 4px; }
.price span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--faint); }
.buy { margin: 4px 0 14px; }
.buy span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--faint); }

/* ── /p/ — a progression someone shared (2026-09-24) ── */
.shared { max-width: 860px; }
.shared .eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 6px; }
.shared h1 { font-size: clamp(26px, 1.5vw + 1.8svh, 38px); margin: 0 0 4px; text-wrap: balance; }
.shared .meta { color: var(--muted); font-size: 14px; margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.shared .chips { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
/* a chip is as wide as it lasts (a bar = 2 units), as the app draws them;
   the filler keeps a short last row from stretching */
.shared .chips::after { content: ""; flex: 1000 0 0; }
.shared .chip { flex: 0 1 calc(var(--u, 2) * 34px); min-width: 58px; background: var(--card); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; transition: border-color .12s var(--ease), background .12s var(--ease); }
.shared .chip .deg { font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1.1; }
.shared .chip .sym { font-size: 13px; color: var(--muted); }
.shared .chip.on { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--card)); }
.shared .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.shared .hint { font-size: 13px; color: var(--amber); margin: 0 0 10px; }
.shared .about { color: var(--muted); font-size: 14px; margin: 14px 0 14px; max-width: 62ch; }
.shared .small { font-size: 13px; color: var(--muted); margin: 6px 0; max-width: 62ch; }
.shared .small.faint { color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .shared .chip { transition: none; } }

/* ── the iPhone apps' own pages: /metronome/ and /memos/ (2026-10-08) ──────
   A product page scrolls, unlike the home page: a hero with the store button


/* Console tokens the carried-over components use */
:root {
  --card: #121214; --raised: #18181B; --hairline: #26262B; --line-strong: #34343A;
  --amber: #E8B54B; --amber-ink: #0A0A0B; --pad: 24px; --ease: cubic-bezier(.23, 1, .32, 1);
  --longing: #C09578; --melancholy: #66779B; --triumph: #F0B62E; --tender: #F2A0B5; --dread: #3C464B; --hope: #FFDD82; --defiance: #E06565;
}
/* Squarer corners and mono labels on the carried-over pieces, to match the rack */
.stage, .frame, .platform, .pcard, .shared .chip { border-radius: 4px; }
.stage { background: var(--panel); border-color: var(--rule); }
.tabs button { border-radius: 3px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tabs button[aria-selected="true"] { color: #0A0A0B; }
.panel h2 { font-family: var(--display); }
.frame figcaption, .platform .req, .platform .ver, .platform .yours, .prose .when, .counts .what { font-family: var(--mono); letter-spacing: .06em; font-size: 11px; text-transform: uppercase; }
.counts .n { font-family: var(--mono); font-weight: 500; color: var(--accent); }
ul.rows li { border-color: var(--rule); }

/* Legacy pages sit inside the new main */
main.legacy { padding-block: 40px 64px; }
main.legacy .wrap > * + * { margin-top: 0; }
main.legacy .wrap { max-width: 1160px; }

/* Long reading pages become collapsible sections, so nothing scrolls for ever */
.doc { max-width: 820px; }
.doc .doc-intro > * + * { margin-top: 12px; }
.doc .doc-intro h1 { font-size: clamp(30px, 2vw + 1.2rem, 46px); line-height: 1.05; letter-spacing: -0.02em; }
.doc .doc-intro p { color: var(--muted); }
.sections { margin-top: 28px; border-top: 1px solid var(--rule); }
.sections > details { border-bottom: 1px solid var(--rule); }
.sections > details > summary { cursor: pointer; list-style: none; padding: 16px 0; font: 600 17px var(--display); display: flex; gap: 14px; align-items: baseline; }
.sections > details > summary::-webkit-details-marker { display: none; }
.sections > details > summary::before { content: "+"; font: 500 14px var(--mono); color: var(--accent); width: 14px; flex: none; }
.sections > details[open] > summary::before { content: "–"; }
.sections > details > .body { padding: 0 0 20px 28px; color: var(--muted); }
.sections .body > * + * { margin-top: 12px; }
.sections .body h3 { font: 600 15px var(--ui); color: var(--text); margin-top: 18px; }
.sections .body strong, .sections .body b { color: var(--text); font-weight: 600; }
.sections .body ul, .sections .body ol { padding-left: 20px; }
.sections .body li { margin-bottom: 6px; }
.sections .body code { font: 12.5px var(--mono); color: var(--text); background: var(--panel2); padding: 2px 5px; border-radius: 3px; }
.toolbar { display: flex; gap: 10px; margin-top: 18px; }
.toolbar button { font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--muted); border: 1px solid var(--rule2); border-radius: 3px; padding: 6px 10px; cursor: pointer; }

/* Support hub */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 16px; }
.support-grid .card ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: 14.5px; }
.support-grid .card a { color: var(--text); }
.support-grid .card header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.support-grid .card header img { width: 30px; height: 30px; border-radius: 6px; }
.contact { padding: 22px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.contact b { font: 600 20px var(--display); }
.contact p { color: var(--muted); max-width: 60ch; }

/* Home: compact so it fits a screen or two */
.home-hero { padding-bottom: 8px; }
.promises { display: flex; gap: 10px 26px; flex-wrap: wrap; font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 18px !important; }
.promises span::before { content: "■ "; color: var(--accent); }

/* Tiles in a gallery strip */
.gallery-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 14px; }
.gallery-row figure { margin: 0; }
.gallery-row img { width: 100%; height: auto; border: 1px solid var(--rule2); border-radius: 14px; }
.gallery-row figcaption { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* Keep pages short: screenshots sized to the window, tighter spacing, a compact footer */
main { padding-block: 32px 48px; }
main .wrap > * + * { margin-top: 56px; }
.shot img { width: auto; max-width: min(260px, 80%); max-height: min(540px, 64vh); }
.phones img { max-height: min(500px, 58vh); width: auto; }
.split { gap: 44px; }
.pagehead { padding-bottom: 20px; }
.pagehead h1 { margin: 6px 0 10px; }
.points { gap: 10px; }
.block > h2, .split h2 { margin-bottom: 10px; }
.tile img { height: 92px; }
footer.f .wrap { padding-block: 24px 18px; gap: 16px 24px; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
footer.f ul { gap: 2px; font-size: 13px; }
footer.f .who { padding-top: 6px; }
@media (max-width: 860px) {
  .shot img { max-height: 420px; }
  .phones img { max-height: 340px; }
  .split { gap: 22px; }
  main .wrap > * + * { margin-top: 40px; }
}
@media (max-width: 600px) {
  footer.f .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phones img:nth-child(3) { display: none; }
  .phones img { width: calc((100% - 14px) / 2); max-height: none; }
}
footer.f .who { display: flex; gap: 6px 20px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 12px; }
footer.f .who a { color: var(--faint); }
.hero .counts { gap: 8px 22px; margin-top: 18px; }
.hero .counts .n { font-size: 22px; }
.steps > div { padding: 16px 18px; }
.steps .num { margin-bottom: 8px; }
.appmenu summary { white-space: nowrap; }
@media (max-width: 600px) {
  .hero .counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .g-right .btn { display: none; }
  .logo span { font-size: 18px; }
}
.hero .counts { gap: 8px 16px; }
.hero .counts .what { letter-spacing: .03em; }
.phones img { max-width: calc((100% - 28px) / 3); }

/* Songling for iPad: its screens are landscape, so they sit in .pad frames, wider than a phone's */
.pad { margin: 0; }
.pad img, .pad video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 1px solid var(--rule2); border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 8px #121214, 0 0 0 9px var(--rule); }
/* Songling Stand: an iPad upright, as it is on a music stand */
.pad.tall { display: flex; justify-content: center; }
.pad.tall img { aspect-ratio: 3 / 4; width: auto; max-width: 100%; max-height: min(720px, 78vh); }
.pad figcaption { font-size: 13.5px; line-height: 1.5; color: var(--faint); margin-top: 18px; }
.split.wide { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.hero.wide { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.wide-tiles .tile { grid-template-columns: 112px minmax(0, 1fr); }
.wide-tiles .tile img { width: 112px; height: 84px; object-fit: cover; object-position: left top; }
.btn.soon { cursor: default; }
@media (max-width: 900px) { .hero.wide { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .split.wide { grid-template-columns: minmax(0, 1fr); } }
.wide-tiles .tiles { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
.cards3:has(> .card:nth-child(6):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
/* four apps in the header: fold them into the Apps menu sooner than three needed */
@media (max-width: 1000px) {
  .apps, .g-right .support { display: none; }
  .appmenu { display: block; margin-left: auto; position: static; }
  .appmenu summary { list-style: none; cursor: pointer; font-size: 14px; padding: 8px 12px; }
  .appmenu summary::-webkit-details-marker { display: none; }
  .appmenu summary::after { content: " ▾"; }
  .appmenu .sheet { position: absolute; left: 0; right: 0; top: 60px; z-index: 20; padding: 12px 16px 16px; display: grid; gap: 4px; }
  .appmenu .sheet .app-tile { padding: 10px; }
  .appmenu .sheet .app-tile img { width: 34px; height: 34px; }
  .appmenu .plain { padding: 10px; color: var(--muted); }
  header.g { position: relative; }
  .g-right { margin-left: 8px; }
}

/* The app tiles fill the bar: taller, larger icons, spread evenly between the logo and Support (26 October 2026) */
header.g .wrap { height: 68px; }
.apps { flex: 1; align-self: stretch; margin-left: 18px; }
.app-tile { flex: 1; justify-content: center; gap: 11px; padding: 0 14px; min-width: 0; }
.app-tile img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.app-tile b { font-size: 15px; }
.app-tile small { white-space: nowrap; }
@media (max-width: 1180px) { .app-tile small { display: none; } .app-tile img { width: 34px; height: 34px; } }
@media (max-width: 1000px) {
  header.g .wrap { height: 60px; }
  .appmenu .sheet { top: 60px; }
  .appmenu .sheet .app-tile { justify-content: flex-start; padding: 10px; }
  .appmenu .sheet .app-tile img { width: 40px; height: 40px; }
  .appmenu .sheet .app-tile small { display: block; }
}

/* A narrow window: the app's pages wrap onto more lines, never hide off the side */
@media (max-width: 1000px) {
  nav.p .wrap { flex-wrap: wrap; gap: 0 18px; padding-block: 8px; }
  .p-name { width: 100%; padding-top: 4px; }
  .p-links { flex-wrap: wrap; overflow: visible; gap: 0 18px; }
  .p-links a { padding-block: 9px; }
}