/* v3: full-page 3D background + theme-song button */
.bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.has-bg3d .nav,.has-bg3d main,.has-bg3d .ft{position:relative;z-index:1}
.has-bg3d .hero{overflow:visible}
.music{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--line-strong);border-radius:0;background:var(--surface-100);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--font-sans)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.music{background:color-mix(in srgb,var(--surface-100) 74%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.music::before{content:"";position:absolute;inset:-1px;border:1px solid var(--clay);opacity:0;animation:musicPulse 3.2s ease-in-out infinite;pointer-events:none}
@keyframes musicPulse{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.music:hover{border-color:var(--ink)}
.music:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.music svg{width:18px;height:18px;display:block}
.music .eq{display:none;align-items:flex-end;gap:3px;height:16px}
.music .eq i{display:block;width:3px;background:var(--clay);height:calc(3px + 13px * var(--l,0))}
.music[aria-pressed=true]::before{animation:none}
.music[aria-pressed=true]{border-color:var(--clay)}
.music[aria-pressed=true] svg{display:none}
.music[aria-pressed=true] .eq{display:flex}
.music .ml{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);font:400 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--ink-soft);white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.music:hover .ml,.music:focus-visible .ml,.music[aria-pressed=true] .ml{opacity:1}
@media (prefers-reduced-motion:reduce){.music::before{animation:none;opacity:.5;transform:none}}
/* v3.2: section imagery — line icons, and a second tone (slate) for the infrastructure side; clay stays the human side */
:root{--slate:#4f6676;--slate-text:#3f5665}
@media (prefers-color-scheme:dark){:root{--slate:#8aa3b3;--slate-text:#9fb6c4}}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;color:var(--ink);vertical-align:-4px}
.ic.c{color:var(--clay-text)}.ic.s{color:var(--slate-text)}.ic.m{color:var(--ink-soft)}
.eyebrow.ie{display:flex;align-items:center;gap:8px}.eyebrow .ic{width:16px;height:16px;color:var(--ink-soft)}
.ih{display:flex;align-items:center;gap:10px}
.flow .cell .ic{width:22px;height:22px}
.rows .k{display:inline-flex;align-items:center;gap:6px}.rows .k .ic{width:15px;height:15px}
.sg .en{display:flex;align-items:center;gap:6px}
.sg.c .en{color:var(--clay-text)}.sg.s .en{color:var(--slate-text)}
.sg.c{border-top:3px solid var(--clay)}.sg.s{border-top:3px solid var(--slate)}
.pillar{position:relative}.pillar::before{content:"";position:absolute;left:0;top:0;height:3px;width:56px;background:var(--ink)}
.pillar.c::before{background:var(--clay)}.pillar.s::before{background:var(--slate)}
.pillar.c .en{color:var(--clay-text)}.pillar.s .en{color:var(--slate-text)}
.pillar .no{display:flex;justify-content:space-between;align-items:center}.pillar .no .ic{width:22px;height:22px}
.tool .tag{display:flex;align-items:center;gap:6px}.tool .tag .ic{width:14px;height:14px;color:var(--ink-soft)}.tool .tag .ic.s{color:var(--slate-text)}.tool .tag .ic.c{color:var(--clay-text)}
.layer h3.ih .ic{width:22px;height:22px}
.principles h3.ih .ic,.steps h3.ih .ic{width:18px;height:18px}
.lbar.s{background:var(--slate)}

/* Quiet mode is a disabled control, without the invitation-to-play pulse. */
.music:disabled{opacity:.5;cursor:default}
.music:disabled::before{animation:none;opacity:0}