/* Shared text navigation across Home, Composer and About. */
.header-nav,.footer-nav {display:flex;align-items:center;gap:32px;margin-left:auto}
.header-nav a,.footer-nav a,.footer-nav button {display:inline-flex;align-items:center;gap:8px;padding:8px 0;border:0;border-radius:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--font-control);font-weight:400;line-height:1.5;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .22s ease,text-decoration-color .22s ease;cursor:pointer}
@media(hover:hover){.header-nav a:hover,.footer-nav a:hover,.footer-nav button:hover {color:var(--ink);text-decoration-color:currentColor;text-underline-offset:4px}}
.header-nav a[aria-current="page"] {color:var(--ink);text-decoration-color:currentColor;text-underline-offset:4px}
/* The Start here shortcut belongs to Home, not the standalone Shop steps. */
.header-nav #headerStart {font-weight:500}
html[data-page="home"]:has(#landing[hidden]) .shop-header #headerStart {display:none}

/* The desktop header icons use the same weight in all link states. */
.header-nav .composer-desktop-home .icon {width:20px;height:20px;flex:none;stroke-width:2.1}
.header-nav .nav-text-icon {width:20px;height:20px;flex:none;stroke-width:2.1}
 /* A true navigation link, not an icon button: the drawn info circle is its only chrome. */
.header-nav .nav-info-link {display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;min-height:36px;margin-left:-12px;padding:0;border:0;border-radius:0;background:transparent;text-decoration:none}
.header-nav .nav-info-link .icon {width:20px;height:20px;flex:none}
.header-nav .nav-info-link[aria-current="page"] {color:var(--ink);text-decoration:none}
@media(hover:hover){.header-nav .nav-info-link:hover {color:var(--ink);text-decoration:none}}
.header-nav .nav-info-link:focus-visible {outline:2px solid var(--ink);outline-offset:2px}
.footer-nav {flex-wrap:wrap;gap:8px 24px}
.footer-nav .nav-info-link {display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;min-height:36px;padding:0;text-decoration:none}
.footer-nav .nav-info-link .icon {width:20px;height:20px;flex:none}
.footer-nav .nav-info-link[aria-current="page"] {color:var(--ink);text-decoration:none}
@media(hover:hover){.footer-nav .nav-info-link:hover {color:var(--ink);text-decoration:none}}
@media(max-width:1000px){.header-nav{gap:24px}}
@media(max-width:720px){.header-nav{display:none}.footer-nav{width:100%;justify-content:space-between;flex-wrap:nowrap;gap:8px;margin-top:8px}.footer-nav a,.footer-nav button{justify-content:center;text-align:center}}
/* Shared phone menu across Home, About and Composer. */
#mobileMenuButton { display:none; }
.mobile-menu {
  --panel-solid:#fafaf7; --ink:#171916; --muted:#70736d; --quiet:#a2a59e;
  --line:rgba(23,25,22,.11); --line-strong:rgba(23,25,22,.19);
  --surface-active:rgba(255,255,255,.9); --surface-hover:#fff;
  --surface-active-shadow:0 2px 8px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  width:min(410px,calc(100% - 14px)); max-width:none;
  max-height:calc(100dvh - env(safe-area-inset-top) - 14px);
  margin:0; position:fixed; inset:max(7px,env(safe-area-inset-top)) 7px auto auto;
  padding:14px; border:1px solid var(--line-strong); border-radius:20px;
  background:var(--panel-solid); color:var(--ink);
  box-shadow:0 16px 56px rgba(0,0,0,.18); overflow:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
  font:400 var(--font-body)/normal var(--font-app);
}
html[data-theme="dark"] .mobile-menu {
  --panel-solid:#18201c; --ink:#e8eee9; --muted:#99aba0; --quiet:#6a8073;
  --line:rgba(202,225,211,.105); --line-strong:rgba(202,225,211,.23);
  --surface-active:#2b3a30; --surface-hover:#303e35;
  --surface-active-shadow:0 2px 10px rgba(0,0,0,.24),0 1px 3px rgba(0,0,0,.12);
}
.mobile-menu::backdrop { background:rgba(12,15,21,.30); backdrop-filter:blur(3px); }
.mobile-menu.is-opening::backdrop { animation:menu-shade-in 220ms cubic-bezier(.23,1,.32,1) both; }
.mobile-menu.is-closing { pointer-events:none; }
.mobile-menu.is-closing::backdrop { animation:menu-shade-out 180ms cubic-bezier(.23,1,.32,1) both; }
.mobile-menu.is-preparing::backdrop { animation-play-state:paused; }
.mobile-menu-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 2px 10px 10px; }
.mobile-menu-heading h2 { font-size:var(--font-heading); font-weight:650; letter-spacing:-.035em; margin:0; }
.mobile-menu-heading .button { display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--ink);font:650 var(--font-button)/normal var(--font-app);box-shadow:none; }
.mobile-menu-nav { display:grid; gap:5px; }
.mobile-menu a,.mobile-menu-tools button,.mobile-menu-device button,.mobile-menu-appearance button {
  display:flex; align-items:center; gap:13px; width:100%; min-height:48px;
  border:0; border-radius:11px; padding:12px; margin:0; text-align:left;
  color:var(--ink); background:transparent; text-decoration:none; cursor:pointer;
  font:inherit; font-size:var(--font-button); font-weight:400; line-height:1.35;
}
.mobile-menu a { min-height:54px; font-size:var(--font-heading); font-weight:520; }
.mobile-menu a[aria-current="page"] { background:var(--surface-active); box-shadow:var(--surface-active-shadow); }
.mobile-menu .icon,.menu-theme-icon { flex:0 0 20px; width:20px; height:20px; }
.mobile-menu svg.icon {stroke-width:2.5;line-height:1}
.mobile-menu-tools .icon,.mobile-menu-device .icon,.menu-theme-icon { color:var(--muted); }
.menu-theme-icon { display:grid; place-items:center; }
.menu-current { margin-left:auto; width:6px; height:6px; border-radius:50%; background:currentColor; visibility:hidden; }
[aria-current="page"] .menu-current { visibility:visible; }
.mobile-menu-tools,.mobile-menu-device { margin-top:13px; padding-top:11px; border-top:1px solid var(--line); }
.menu-hint { margin-left:auto; color:var(--quiet); font-size:var(--font-caption); }
.mobile-menu-appearance { margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
.menu-switch { flex:none; position:relative; margin-left:auto; width:34px; height:20px; border-radius:20px; background:var(--line-strong); transition:background 160ms ease; }
.menu-switch::before { content:""; display:block; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--panel-solid); box-shadow:0 1px 3px #0003; transition:transform 160ms ease; }
[aria-checked="true"] .menu-switch { background:var(--ink); }
[aria-checked="true"] .menu-switch::before { transform:translateX(14px); }
.mobile-menu :is(a,button):focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
@media(hover:hover) { .mobile-menu :is(a,button):hover { background:var(--surface-hover); } }
@keyframes menu-shade-in { from { opacity:0; } to { opacity:1; } }
@keyframes menu-shade-out { from { opacity:1; } to { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  .mobile-menu,.mobile-menu::backdrop { animation:none !important; }
  .menu-switch,.menu-switch::before { transition:none; }
}
@media(forced-colors:active) {
  .mobile-menu a[aria-current="page"] { outline:1px solid Highlight; }
  .menu-switch { border:1px solid ButtonText; }
  .menu-switch::before { background:ButtonText; }
}
@media(max-width:720px){#mobileMenuButton{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0}.mobile-menu-open body{overflow:hidden}}
@media print{#mobileMenuButton,.mobile-menu{display:none!important}}


/* The actual native modal backdrop covers the screen; avoid blur/chrome
   compositing artifacts on phones without introducing a separate tint layer. */
@media(max-width:720px) {
  dialog:modal::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; }
}