/* Layout: one reading column on narrow screens (the name, centered, then the text); two columns from 820px (see the end of this sheet). */
:root {
  /* single night-sky look, by choice: the page stays dark in every viewer theme */
  color-scheme: dark;
  --bg: #0A0F24;
  --bg-glow: #1A2350;
  --surface: #121935;
  --surface-2: #1B2447;
  --ink: #E7EBF8;
  --muted: #9BA7CA;
  --line: #2A3561;
  --accent: #9DB4FF;
  --accent-ink: #0A0F24;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
body {
  background: radial-gradient(900px 420px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}
.app {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
button { font: inherit; color: inherit; cursor: pointer; }
.eyebrow { margin: 0; }
h1 {
  margin: 0;
  font-size: 2.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
}
/* the text: one thought to a paragraph */
.story { display: flex; flex-direction: column; gap: 14px; max-width: 60ch; margin-inline: auto; }
.story p { margin: 0; font-size: 1rem; line-height: 1.65; color: color-mix(in srgb, var(--ink) 86%, var(--muted)); }
.app.about .fineprint { margin-inline: auto; }
/* the text ends on two centred lines */
.story h2 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.story ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 10px; }
.story li { font-size: 1rem; line-height: 1.65; color: color-mix(in srgb, var(--ink) 86%, var(--muted)); }
.story li::marker { color: var(--accent); }
.story li strong { color: var(--ink); font-weight: 600; }
.story .verse { margin-top: 6px; text-align: center; font-size: 1.06rem; color: var(--ink); }
.fineprint { margin: 0; font-size: 0.82rem; color: var(--muted); max-width: 60ch; }
.legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;   /* small enough that the longest translation stays clearly shorter than the company name */
  color: var(--muted);
  text-align: center;
}
.legal p { margin: 0; }
.legal .org {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink);
}

/* the language drop-down (a flag) sits in the bar across the top. Moving between pages is done from the bar along the bottom
   on phones and tablets, and from the bar across the top on computers (see the end of this sheet). */
.app > header { display: block; }
.app > header::after { content: ""; display: block; clear: both; }
.app > header h1 + .lede, .app > header .titleline + .lede { margin-top: 6px; }
.tools { float: right; display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px 14px; }
.langpick { position: relative; }
.langbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.langbtn[aria-expanded="true"] { border-color: var(--accent); }
/* the one line at the bottom of every page sits in the middle, over the company name */
.fineprint, #awScreen .fineprint { max-width: none; margin-inline: auto; text-align: center; }
/* a short line set beside the title */
.titleline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.titleline .eyebrow { font-size: 0.64rem; letter-spacing: 0.06em; white-space: nowrap; }
.langpick svg { display: block; width: 26px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.langmenu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.langmenu button {
  display: flex;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.langmenu button:hover { background: var(--surface-2); }
.langmenu button[aria-selected="true"] { background: var(--surface-2); border-color: var(--accent); }
.langbtn:focus-visible, .langmenu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* longer words in other languages still fit the tabs on narrow phones */
@media (max-width: 380px) { .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; } }

/* ================= website format =================
   A bar across the top of every page: the mark and the name on the left, the flag in the right corner.
   On phones and tablets the pages run along the bottom, each a sign over its name; a play bar that sticks
   to the bottom of a page rests on top of them (--dock-bottom). On computers the pages move up into the
   bar across the top. */
:root { --nav-h: 56px; --tabbar-h: 60px; --dock-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
body { padding-top: var(--nav-h); padding-bottom: var(--tabbar-h); }

.topbar {
  position: fixed;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.topbar-in { display: flex; align-items: center; gap: 10px; height: var(--nav-h); max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.brand { flex: none; display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; border-radius: 8px; }
.brandmark { display: block; width: auto; height: 28px; overflow: visible; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.topbar .tools { flex: none; float: none; margin: 0 0 0 auto; }

/* the pages, along the bottom */
.navlinks {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: calc(var(--tabbar-h) - 1px);   /* with its top line, the bar is --tabbar-h tall */
  padding: 0 max(6px, calc(50% - 280px)) env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.navlinks a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.navlinks a svg { display: block; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.navlinks a:hover { color: var(--ink); }
.navlinks a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.navlinks a[aria-current="page"] svg { stroke-width: 2.1; }
.navlinks a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
/* a dot on Account says someone is signed in */
.navlinks a[data-in="true"]::after { content: ""; position: absolute; top: 7px; left: calc(50% + 6px); width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ok, #5FD3C0); }
/* six names side by side: smaller letters on narrower phones, so the longest (Générateur, Protocolos) still fit */
@media (max-width: 380px) { .navlinks { padding-inline: 2px; } .navlinks a { font-size: 0.64rem; letter-spacing: -0.01em; } }
@media (max-width: 340px) { .navlinks a { font-size: 0.58rem; } .navlinks a svg { width: 23px; height: 23px; } }

/* computers (a wide screen worked with a mouse or trackpad): the pages sit in the bar across the top */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root { --nav-h: 64px; --dock-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: 0; }
  .topbar { background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .topbar-in { gap: 14px; padding-inline: 32px; }
  .brandmark { height: 30px; }
  .topbar .tools { margin-left: 0; }
  .navlinks { position: static; display: flex; gap: 2px; height: auto; margin-left: auto; padding: 0; border: 0; background: none; }
  .navlinks a { flex-direction: row; gap: 8px; padding: 8px 13px; border-radius: 8px; font-size: 0.93rem; }
  .navlinks a svg { display: none; }
  .navlinks a:hover { background: var(--surface); }
  .navlinks a[aria-current="page"] { background: var(--surface-2); }
  .navlinks a:focus-visible { outline-offset: 3px; }
  .navlinks a[data-in="true"]::after { position: static; border: 0; }
}

/* the opening words of the page: the name, then the first thought, a little larger than the text that follows */
.app.about > header { display: flex; flex-direction: column; gap: 20px; margin-bottom: -6px; }
.app.about > header::after { content: none; }
.app.about .lead { margin: 0 auto; max-width: 60ch; font-size: 1.12rem; line-height: 1.55; color: var(--ink); }
.kicker, .wave { display: none; }

/* Below 820px the same opening as on a computer, stacked: the label, the name, the first thought and the wave,
   then the text, all aligned to the left. */
@media (max-width: 819.98px) {
  body { background: radial-gradient(900px 420px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg); }
  .app.about { padding-top: 34px; }
  .app.about > header { gap: 0; margin: 0 0 6px; }
  .kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--accent); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .kicker::before { content: ""; flex: none; width: 24px; height: 1px; background: currentColor; }
  .app.about h1 { font-size: clamp(2.5rem, 11vw, 3rem); letter-spacing: -0.025em; text-align: left; }
  .app.about .lead { max-width: 30ch; margin: 18px 0 0; font-size: clamp(1.22rem, 5.4vw, 1.4rem); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
  .wave { display: block; width: 100%; max-width: 460px; height: auto; margin: 28px 0 0; overflow: visible; }
  .app.about .story { margin: 0; gap: 18px; }
  .app.about .story .verse br { display: none; }
  .app.about .story .verse .l2::before { content: " "; }
  .app.about .story p { font-size: 1.02rem; line-height: 1.7; }
  .app.about .story .verse { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); text-align: left; font-size: 1.14rem; line-height: 1.5; color: var(--ink); }
  .app.about > .fineprint { margin-top: 36px; }
}

/* From 820px the page opens into two columns: the name, the first thought and a wave on the left;
   the text on the right. */
@media (min-width: 820px) {
  body { background: radial-gradient(1400px 520px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg); }
  .app.about { max-width: 1200px; padding-inline: clamp(20px, 3vw, 32px); padding-block: 64px 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(36px, 6vw, 88px); row-gap: 0; align-items: start; }
  .app.about > header { grid-column: 1; grid-row: 1; gap: 0; margin: 0; }
  .kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--accent); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .kicker::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; }
  .app.about h1 { font-size: clamp(2.8rem, 5.2vw, 3.8rem); letter-spacing: -0.025em; text-align: left; }
  .app.about .lead { max-width: 26ch; margin: 26px 0 0; font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
  .wave { display: block; width: 100%; max-width: 460px; height: auto; margin-top: 44px; overflow: visible; }
  .app.about .story { grid-column: 2; grid-row: 1; max-width: none; margin: 0; padding-top: 14px; gap: 20px; }
  .app.about .story p { font-size: 1.08rem; line-height: 1.7; }
  .app.about .story .verse { margin-top: 10px; padding-top: 28px; border-top: 1px solid var(--line); text-align: left; font-size: 1.2rem; line-height: 1.5; color: var(--ink); }
  .app.about > .fineprint { grid-column: 1 / -1; grid-row: 2; margin-top: 72px; }
  .app.about > .legal { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
}
/* the left column stays in view while the text scrolls (on screens tall enough to hold it) */
@media (min-width: 820px) and (min-height: 700px) {
  .app.about > header { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 40px); }
}

/* the tagline under the wave */
.app.about .tagline { width: 100%; max-width: 460px; text-align: center; margin: 22px 0 0; color: var(--accent); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
@media (min-width: 820px) { .app.about .tagline { margin-top: 30px; font-size: 0.86rem; } }

/* 19 Oct 2026 · Science of Frequency article */
.app.science .story { padding-bottom: 8px; }
.app.science .story h2 { font-size: clamp(1.6rem, 5vw, 2rem); letter-spacing: -0.015em; }
.app.science .story h3 { margin: 14px 0 0; font-size: 1.08rem; font-weight: 600; color: var(--accent); }
.app.science .story ul.bands { margin-top: 8px; gap: 4px; font-family: var(--font-mono, inherit); }
.app.science .story ul.bands li { font-size: 0.94rem; }
.app.about.science > header { min-height: 0; }
/* the article fills the whole page width (no title column) */
.app.about.science { display: block; }
.app.about.science .story { max-width: none; margin: 0; padding-top: 8px; }
@media (min-width: 820px) {
  .app.about.science .story { grid-column: auto; grid-row: auto; padding-top: 0; }
  .app.about.science > .fineprint { margin-top: 72px; }
}
/* one article after another, with a line between them */
.app.science .science-article + .science-article { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line); }
/* a picture at the top of an article */
.app.science .science-hero { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); margin: 0 0 12px; }
.app.science .science-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 820px) { .app.science .science-hero { aspect-ratio: 21 / 8; margin-bottom: 20px; } }

/* 19 Oct 2026 · Science of Frequency: the topics, each with its picture */
.sci-hub { display: flex; flex-direction: column; gap: 10px; }
.sci-hub h1 { margin: 0; font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -0.025em; text-align: left; }
.sci-sub { margin: 0 0 18px; color: var(--muted); font-size: 1.05rem; }
.sci-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .sci-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .sci-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sci-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface, #0E1530); color: var(--ink); text-decoration: none; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
a.sci-card:hover, a.sci-card:focus-visible { transform: translateY(-3px); border-color: var(--k); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--k); outline: none; }
.sci-card.soon { opacity: 0.8; }
.sci-art { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #071433; }
.sci-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.sci-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 20, 51, 0) 45%, rgba(7, 20, 51, 0.55) 100%); box-shadow: inset 0 -2px 0 var(--k); pointer-events: none; }
a.sci-card:hover .sci-art img { transform: scale(1.05); }
.sci-tag { position: absolute; z-index: 1; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(5, 10, 28, 0.85); border: 1px solid var(--line); font: 600 0.7rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--k); }
.sci-cap { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.sci-cap strong { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.sci-cap strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--k); box-shadow: 0 0 8px var(--k); vertical-align: 2px; }
.sci-cap small { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .sci-card, .sci-art img { transition: none; } }

/* 19 Oct 2026 · Cymatics: the two water patterns side by side */
.cym-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 3vw, 32px); margin: 8px 0 0; }
.cym-box { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cym-box canvas { display: block; width: 100%; max-width: 380px; aspect-ratio: 1; border-radius: 50%; background: #050814; box-shadow: 0 0 0 1px var(--line), 0 0 40px rgba(95, 230, 255, 0.08); transition: box-shadow 0.6s ease; filter: drop-shadow(0 0 6px rgba(95, 230, 255, 0.25)); -webkit-touch-callout: none; user-select: none; }
.cym-box.on canvas { box-shadow: 0 0 0 1px #5FE6FF, 0 0 60px rgba(95, 230, 255, 0.28); }
.cym-play { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface, #0E1530); color: var(--ink); font: 600 1rem/1 var(--font-mono, monospace); letter-spacing: 0.04em; cursor: pointer; }
.cym-play:hover, .cym-play:focus-visible, .cym-play[aria-pressed="true"] { border-color: #5FE6FF; color: #5FE6FF; outline: none; }
.cym-play svg { width: 18px; height: 18px; fill: currentColor; }
.cym-play .i-stop, .cym-play[aria-pressed="true"] .i-play { display: none; }
.cym-play[aria-pressed="true"] .i-stop { display: block; }
.app.science .story .cym-note { margin-top: -4px; text-align: center; font-size: 0.8rem; color: var(--muted); }
@media (min-width: 1100px) { .sci-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app.science .science-hero.contain { background: #050814; }
.app.science .science-hero.contain img { object-fit: contain; }

/* 19 Oct 2026 · harmonic table on the 432 Hz page */
.harm-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.harm { width: 100%; border-collapse: collapse; font-family: var(--font-mono, monospace); font-size: 0.95rem; text-align: center; }
.harm th { padding: 10px 8px; font-weight: 600; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.harm td { padding: 9px 8px; color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); white-space: nowrap; }
.harm tbody tr:last-child td { border-bottom: 0; }
.harm td:nth-child(2), .harm td:nth-child(3), .harm th:nth-child(2), .harm th:nth-child(3) { background: rgba(111, 214, 255, 0.06); }
.harm b.nine { color: #6FD6FF; font-size: 1.05em; text-shadow: 0 0 8px rgba(111, 214, 255, 0.6); }
.harm b.dr { color: var(--muted); font-weight: 600; }
@media (max-width: 480px) { .harm { font-size: 0.82rem; } .harm td, .harm th { padding: 8px 5px; } }
.app.science .science-hero.contain.black { background: #000; }

/* 19 Oct 2026 · Circle of Fifths: a moving circle (orbit, star and a light that walks the fifths) */
.app.science .cof-hero { aspect-ratio: auto; display: grid; place-items: center; padding: clamp(10px, 3vw, 28px); background: radial-gradient(closest-side, #121a44, #050814 90%); }
.cof { display: block; width: 100%; max-width: 640px; height: auto; overflow: visible; }
.cof text { font-family: var(--font-sans, Inter, system-ui, sans-serif); user-select: none; -webkit-user-select: none; }
.cof-k { font-size: 40px; font-weight: 700; fill: #EAF0FF; animation: cofLit 36s linear infinite; animation-delay: calc(var(--d) * 3s - 36s); }
.cof-m { font-size: 22px; font-weight: 500; fill: #A9B8E8; animation: cofLitM 36s linear infinite; animation-delay: calc(var(--d) * 3s - 36s); }
.cof-c { font-family: var(--font-mono, monospace) !important; font-size: 13px; letter-spacing: .08em; fill: #F2B84B; fill-opacity: .8; }
.cof-c.a { font-size: 11px; fill-opacity: .6; }
.cof-mark { font-family: var(--font-mono, monospace) !important; font-size: 12px; letter-spacing: .3em; fill: #fff; fill-opacity: .35; }
.cof-orbit, .cof-star, .cof-inner, .cof-pulse { transform-origin: 500px 500px; }
.cof-orbit { animation: cofSpin 120s linear infinite; }
.cof-inner { animation: cofSpin 60s linear infinite reverse; }
.cof-star { animation: cofSpin 90s linear infinite reverse; }
.cof-pulse { animation: cofSpin 36s linear infinite; }
.cof-dot { transform-box: fill-box; transform-origin: center; animation: cofDot 36s ease-out infinite; animation-delay: calc(var(--d) * 3s - 36s); }
.cof-w { animation: cofWedge 36s linear infinite; animation-delay: calc(var(--d) * 3s - 36s); }
@keyframes cofSpin { to { transform: rotate(360deg); } }
@keyframes cofLit { 0% { fill: #fff; filter: drop-shadow(0 0 10px #6FD6FF); } 7% { fill: #EAF0FF; filter: none; } 100% { fill: #EAF0FF; } }
@keyframes cofLitM { 0% { fill: #fff; } 7%, 100% { fill: #A9B8E8; } }
@keyframes cofDot { 0% { transform: scale(1.55); } 8%, 100% { transform: scale(1); } }
@keyframes cofWedge { 0% { fill-opacity: .55; } 8%, 100% { fill-opacity: .14; } }
@media (prefers-reduced-motion: reduce) { .cof * { animation: none !important; } }

/* 19 Oct 2026 · the 12 notes, found one 3rd harmonic at a time (each chip lights in turn, like the circle) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: baseline; gap: 6px; min-width: 52px; justify-content: center; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface, #0E1530); font: 700 1.05rem/1 var(--font-sans, inherit); color: var(--ink); animation: chipLit 36s linear infinite; animation-delay: calc(var(--d) * 3s - 36s); }
.chip small { font: 600 0.68rem/1 var(--font-mono, monospace); color: #F2B84B; }
.chip.back { border-style: dashed; opacity: .75; animation: none; }
.chips.chroma .chip { min-width: 44px; }
@keyframes chipLit { 0% { border-color: #6FD6FF; box-shadow: 0 0 16px rgba(111, 214, 255, .55); color: #fff; } 8%, 100% { border-color: var(--line); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .chip { animation: none; } }
/* on the fifths table the 432 columns are 3rd and 4th */
.app.science #circle-of-fifths .harm td:nth-child(2), .app.science #circle-of-fifths .harm th:nth-child(2) { background: none; font-weight: 700; }
.app.science #circle-of-fifths .harm td:nth-child(3), .app.science #circle-of-fifths .harm td:nth-child(4), .app.science #circle-of-fifths .harm th:nth-child(3), .app.science #circle-of-fifths .harm th:nth-child(4) { background: rgba(111, 214, 255, 0.06); }
.harm .nw { font-size: 0.8em; color: var(--muted); }
.app.science #circle-of-fifths .harm td:nth-child(6) b.nine { color: var(--muted); text-shadow: none; font-size: 1em; }

/* 19 Oct 2026 · Harmonic Series: the vibrating string, each harmonic moves and can be heard */
.hs-wrap { border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(120% 90% at 60% 40%, #0F1740, #050814 80%); padding: clamp(6px, 2vw, 18px); overflow: hidden; }
.hs { display: block; width: 100%; height: auto; }
.hs text { font-family: var(--font-sans, Inter, system-ui, sans-serif); user-select: none; -webkit-user-select: none; }
.hs-t1 { font-size: 22px; font-weight: 700; fill: #EAF0FF; }
.hs-t2 { font-size: 15px; fill: #9FB0DA; }
.hs-f { font-size: 14px; font-weight: 700; fill: var(--k); }
.hs-r { font-family: var(--font-mono, monospace) !important; font-size: 13px; fill: #9FB0DA; }
.hs-mark { font-family: var(--font-mono, monospace) !important; font-size: 13px; letter-spacing: .3em; fill: #fff; fill-opacity: .3; }
.hs-hit { fill: transparent; transition: fill .3s ease; }
.hs-row { cursor: pointer; outline: none; }
.hs-row:hover .hs-hit, .hs-row:focus-visible .hs-hit { fill: rgba(111, 214, 255, .05); }
.hs-row.on .hs-hit { fill: rgba(111, 214, 255, .09); }
.hs-ghost { fill: none; stroke: var(--k); stroke-opacity: .18; stroke-width: 1; }
.hs-str { fill: color-mix(in srgb, var(--k) 14%, transparent); stroke: var(--k); stroke-width: 2.2; stroke-linejoin: round; }
.hs-vib { animation: hsVib calc(1.6s / var(--n)) ease-in-out infinite alternate; }
.hs-row.on .hs-vib { animation-duration: calc(0.5s / var(--n)); }
.hs-row.on .hs-str { filter: drop-shadow(0 0 6px var(--k)); stroke-width: 3; }
.hs-row.on .hs-t1 { fill: var(--k); }
@keyframes hsVib { from { transform: scaleY(1); } to { transform: scaleY(-1); } }
.hs-actions { display: flex; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .hs-vib { animation: none; } }
@media (max-width: 600px) {
  .hs-t1 { font-size: 36px; } .hs-t2 { display: none; }
  .hs-f { font-size: 22px; } .hs-r { font-size: 24px; } .hs-r.minor { display: none; } .hs-mark { font-size: 20px; }
}

/* 19 Oct 2026 · Melodic Intervals: keyboard explorer and chord builder */
.tool { display: flex; flex-direction: column; gap: 14px; padding: clamp(12px, 3vw, 22px); border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(120% 100% at 50% 0, #121a44, #070b1c 85%); }
.kb-svg { display: block; width: 100%; max-width: 640px; margin: 0 auto; height: auto; }
.kb-w { fill: #E3E9F8; stroke: #8E9BC4; stroke-width: 1; transition: fill .25s ease; }
.kb-b { fill: #10152E; stroke: #000; transition: fill .25s ease; }
.kb-l { font: 600 14px var(--font-sans, system-ui); fill: #5B6690; pointer-events: none; }
.kb-w.on { fill: #6FD6FF; animation: kbIn .35s ease both; } .kb-b.on { fill: #3C8DFF; animation: kbIn .35s ease both; }
.kb-w.on.root { fill: #9B6BFF; } .kb-b.on.root { fill: #7A4DFF; }
@keyframes kbIn { from { fill-opacity: .2; } to { fill-opacity: 1; } }
.ivx-mode { display: flex; gap: 6px; justify-content: center; }
.ivx-mode button, .ivx-chip { border: 1px solid var(--line); background: var(--surface, #0E1530); color: var(--ink); border-radius: 999px; cursor: pointer; font: 600 0.9rem/1 var(--font-sans, inherit); }
.ivx-mode button { padding: 9px 16px; }
.ivx-mode button[aria-pressed="true"], .ivx-chip[aria-pressed="true"] { border-color: #6FD6FF; color: #6FD6FF; box-shadow: 0 0 14px rgba(111, 214, 255, .35); }
.ivx-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ivx-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: 12px; }
.ivx-chip small { font: 600 0.7rem/1 var(--font-mono, monospace); color: #F2B84B; }
.ivx-chip.wide { padding: 11px 4px; }
.chx-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ivx-info { min-height: 84px; text-align: center; }
.app.science .story .ivx-info p { margin: 0; }
.app.science .story .ivx-name { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.app.science .story .ivx-desc { font-family: var(--font-mono, monospace); font-size: 0.92rem; color: #9FB0DA; margin-top: 6px; }
.app.science .story .ivx-song { font-size: 0.95rem; color: #F2B84B; margin-top: 6px; }
.harm.chords .sym { font-size: 1.05rem; color: #6FD6FF; }
@media (max-width: 600px) { .ivx-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } .chx-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kb-l { font-size: 18px; } }
/* the live picture: background layer + animation, same 9:5 shape on every screen */
.app.science .science-hero.ivh { position: relative; aspect-ratio: 9 / 5; background: #03060F; }
.app.science .science-hero.ivh img, .app.science .science-hero.ivh canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 19 Oct 2026 · moving pictures at the top of the Science pages (assets/hero-motion.js) */
.app.science .science-hero { position: relative; }
.app.science .science-hero .hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.app.science .science-hero.fx-on img { visibility: hidden; }
.app.science .cof-hero .hero-fx { z-index: 0; } .app.science .cof-hero svg { position: relative; z-index: 1; }

/* 19 Oct 2026 · The Emotional Language of Chords */
.emo-moods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.emo-mood { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--k) 45%, var(--line)); background: radial-gradient(120% 120% at 0 0, color-mix(in srgb, var(--k) 16%, transparent), var(--surface, #0E1530) 70%); color: var(--ink); text-align: left; cursor: pointer; transition: transform .2s ease, box-shadow .3s ease; }
.emo-mood b { font: 700 1.5rem/1 var(--font-mono, monospace); color: var(--k); }
.emo-mood .n { font-weight: 700; font-size: 0.98rem; }
.emo-mood .w { font-size: 0.88rem; color: #A9B6DC; line-height: 1.4; }
.emo-mood:hover, .emo-mood:focus-visible { transform: translateY(-2px); outline: none; border-color: var(--k); }
.emo-mood[aria-pressed="true"] { border-color: var(--k); box-shadow: 0 0 24px color-mix(in srgb, var(--k) 55%, transparent); }
.emo-list { display: flex; flex-direction: column; gap: 10px; }
.emo-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #0E1530); }
.emo-row .emo-play { flex: none; width: 46px; height: 46px; padding: 0; justify-content: center; }
.emo-r { min-width: 0; }
.emo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.emo-num { font: 600 0.82rem/1 var(--font-mono, monospace); color: #F2B84B; margin-right: 6px; }
.emo-chip { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); font: 700 0.95rem/1 var(--font-mono, monospace); color: var(--ink); transition: all .2s ease; }
.emo-chip.on { border-color: #6FD6FF; color: #fff; background: rgba(111, 214, 255, .15); box-shadow: 0 0 14px rgba(111, 214, 255, .5); }
.emo-chips i { font-style: normal; color: var(--muted); }
.app.science .story .emo-d { margin: 6px 0 0; font-size: 0.95rem; color: #A9B6DC; }
.app.science .science-hero.r95 { aspect-ratio: 9 / 5; }
.emo-moods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .emo-moods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 19 Oct 2026 · Emotional Language of Chords: mood finder and builder */
.emo-feels { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.emo-feel, .emo-btn, .emo-pal button, .emo-opt button { border: 1px solid var(--line); background: var(--surface, #0E1530); color: var(--ink); border-radius: 12px; cursor: pointer; font: 600 0.92rem/1.1 var(--font-sans, inherit); }
.emo-feel { padding: 12px 8px; }
.emo-feel[aria-pressed="true"], .emo-opt button[aria-pressed="true"] { border-color: #6FD6FF; color: #6FD6FF; box-shadow: 0 0 14px rgba(111, 214, 255, .35); }
.emo-find-out { min-height: 70px; padding-top: 4px; }
.emo-slots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.emo-slot { display: grid; place-items: center; min-height: 52px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font: 600 0.8rem/1 var(--font-mono, monospace); }
.emo-slot.full { border-style: solid; color: var(--ink); font-size: 1rem; }
.emo-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.emo-btn { padding: 10px 16px; }
.emo-pal { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.emo-pal button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; }
.emo-pal button b { font: 700 0.98rem/1 var(--font-mono, monospace); }
.emo-pal button small { font: 600 0.68rem/1 var(--font-mono, monospace); color: #F2B84B; }
.emo-pal button:active { border-color: #6FD6FF; }
.emo-opts { display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; }
.emo-opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emo-opt-t { font: 600 0.78rem/1 var(--font-mono, monospace); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.emo-opt > div { display: flex; gap: 4px; flex-wrap: wrap; }
.emo-opt button { padding: 8px 11px; font-size: 0.85rem; }
@media (max-width: 600px) { .emo-slots, .emo-pal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }