.md-site-nav {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.md-site-nav nav {display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px}
.md-site-nav a {text-decoration:none; letter-spacing:normal}
.md-site-nav a:focus-visible,.md-studio button:focus-visible,.md-studio select:focus-visible,
.md-studio input:focus-visible {outline:2px solid #578970;outline-offset:3px}
.md-site-nav nav a:hover,.md-site-nav nav a[aria-current] {text-decoration:underline;text-underline-offset:5px}
.md-site-nav .md-wordmark {font-weight:740;white-space:nowrap;font-size:1rem}
.md-site-nav .md-wordmark::before {
  content:"";display:inline-block;width:11px;height:15px;margin-right:.6rem;
  border-radius:80% 15% 70% 22%;background:#86ad82;transform:rotate(27deg);vertical-align:-2px
}
.md-site-nav .md-nav-cta {
  border:1px solid #98bd9c;border-radius:99px;padding:7px 14px;
  background:#d1e6b6;color:#172c24;font-weight:700
}
.md-project .hero {padding-block:clamp(35px,6vw,78px) 35px;gap:clamp(24px,4vw,52px)}
.md-project .hero-visual {
  overflow:hidden;min-height:375px;border-radius:28px 6px 28px 6px;
  background:linear-gradient(136deg,#0c2019aa,#0a211b46 68%,#0a1813a6),url("../radio-fern.jpg") center 48% / cover;
  padding:clamp(24px,4vw,56px);align-content:center;gap:15px
}
.md-project .hero-visual::before,.md-project .hero-visual::after {content:none}
.md-project .screen-shell {background:#0b1716;padding:12px;border-radius:19px 8px 19px 8px}
.md-project .screen-shell img {width:min(26vw,290px);height:auto}
.md-project .hero-visual figcaption {margin:0;color:#e2ecdb}
.md-project .project-paths {padding-bottom:2.7rem}
.md-project .project-paths a {min-height:116px;background:#182e27;border-color:#638273}
.md-project .project-paths strong {display:flex;align-items:center;justify-content:space-between;gap:10px}
.md-project .project-paths strong::after {content:"↗";color:#b9dca1}
.md-project .radio-strip {
  display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:3.4rem;
  padding:1.15rem 1.3rem;border-block:1px solid #4d695e;
}
.md-project .radio-strip strong {font:1.55rem Georgia,serif;display:block}
.md-project .radio-strip p {color:var(--muted);margin:.2rem 0 0}
.md-project .radio-strip .button {flex-shrink:0}

.md-studio {background:#eeeee4}
.md-studio main {width:min(1360px,100%);margin-inline:auto;padding-inline:clamp(16px,4vw,46px)}
.md-studio .md-site-nav {
  min-height:48px;margin-bottom:18px;color:#263f34;font-size:.86rem;letter-spacing:normal
}
.md-studio .md-site-nav nav a {color:#2c5945}
.md-studio .studio-intro {
  position:relative;isolation:isolate;display:block;min-height:auto;border-radius:23px 6px 23px 6px;
  padding:clamp(25px,4vw,50px);margin-bottom:24px;
}
.md-studio .studio-intro::before {
  background:linear-gradient(90deg,#11281efa 6%,#142e23dc 52%,#142b2060 100%),
             url("../radio-fern.jpg") center 48% / cover;
}
.md-studio .studio-intro h1 {font-size:clamp(43px,6vw,77px);line-height:1;margin:9px 0 13px}
.md-studio .studio-intro p {max-width:43ch;margin:0;color:#d9e6d8;font-size:clamp(13px,1.6vw,16px)}
.md-studio .studio-intro .eyebrow {color:#bcdba9}
.md-studio .workspace {
  padding:17px 0 0;margin:0 0 16px;color:#1f372d;
}
.md-studio .workspace h2 {font-size:clamp(26px,3vw,38px);margin:0 0 13px}
.md-studio .workspace nav {gap:8px}
.md-studio .workspace button {border-radius:12px 4px 12px 4px;min-height:53px;padding:8px 14px}
.md-studio .workspace button[aria-pressed=true] {background:#254c3a;border-color:#254c3a}
.md-studio .workspace p {margin:.6rem 0 0;min-height:0}
.md-studio .toolbar {
  background:#faf9f1;border:1px solid #b4c8b5;border-radius:16px 6px 16px 6px;
  padding:12px;gap:8px;margin-bottom:14px;
}
.md-studio .toolbar button,.md-studio .toolbar select {min-height:44px;border-radius:10px 4px 10px 4px}
.md-studio .toolbar .primary {background:#244936;color:#fff}
.md-studio .workspace-listen {margin:12px 0 18px}
.md-studio .workspace-listen button {border-radius:9px 4px 9px 4px;min-height:44px}
.md-studio .atlas {
  margin-bottom:24px;background:#f9f8f0;border-color:#b6c9b6;border-radius:21px 6px 21px 6px;
}
.md-studio .atlas summary {min-height:42px;align-items:center}
.md-studio .atlas summary>span:first-child {color:#375b46;font-size:.74rem;font-weight:720}
.md-studio .atlas-tools {margin-top:13px;gap:7px}
.md-studio .atlas-tools :is(input,select,button) {min-height:44px;border-radius:9px 4px 9px 4px;padding:8px 11px}
.md-studio .biome-grid {max-height:none;overflow:visible;gap:8px;padding:2px}
.md-studio .biome-card {min-height:62px;min-width:0;background:#fffdf7;border-color:#ced9cb;padding:9px;gap:9px}
.md-studio .biome-card:hover {border-color:#688e77}
.md-studio .biome-card.selected {background:#e1ecdf;border-color:#53795f}
.md-studio .biome-card strong {font-size:13px;color:#23382e}
.md-studio .biome-card small {font-size:10px;color:#4e6558}
.md-studio .biome-glyph {font-size:23px;min-width:23px}
.md-studio .biome-number {color:#597063}
.md-studio .atlas-pagination {
  display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:11px;
  font-size:12px;color:#4b6154;
}
.md-studio .atlas-pagination[hidden] {display:none}
.md-studio .atlas-pagination button {border:1px solid #a8bdab;background:#eff2e8;min-height:36px;border-radius:8px;padding:4px 12px}
.md-studio .atlas-pagination button:disabled {opacity:.5}
.md-studio .atlas-hint {font-size:12px;color:#52665a;margin-top:10px}
.md-studio .patch-library {border-radius:19px 6px 19px 6px}
/* Dark base colour stays visible when the page tint replaces background-image (2.1 fix). */
.md-studio .instrument {background-color:#233c35;background-image:radial-gradient(ellipse at 8% 0%,#3c6250,#233c35 46%,#202e35);border-color:#748f7e}
.md-studio .section-label {font-size:12px;color:#4e6656;letter-spacing:.03em}
.md-studio .release-links {margin:10px 0 20px}
@media(max-width:880px){
  .md-project .hero-visual {min-height:280px}
  .md-project .screen-shell img {width:min(29vw,285px)}
}
@media(max-width:650px){
  .md-site-nav {align-items:flex-start;flex-wrap:wrap}
  .md-site-nav nav {gap:8px 12px}
  .md-project .hero-visual {min-height:235px}
  .md-project .screen-shell img {width:min(56vw,252px)}
  .md-project .project-paths a {min-height:auto}
  .md-project .radio-strip {align-items:start;flex-direction:column}
  .md-studio .workspace button {font-size:12px;padding-inline:7px;text-align:center}
  .md-studio .toolbar select {max-width:100%}
  .md-studio .workspace-listen {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-studio .workspace-listen strong {grid-column:1/-1}
  .md-studio .workspace-listen button {text-align:left;font-size:13px}
  .md-studio .biome-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-studio .biome-card strong {font-size:12px}
}