/* Mycelium map: soil colours for both themes, quiet threads that light up on hover */
:root { --soil1: #f3f0e8; --soil2: #e4ddcd; }
@media all { /* the site is always dark (Sharon, 11 Nov 2026) */ :root:not([data-theme="light"]) { --soil1: #161512; --soil2: #0a0908; } }
:root[data-theme="dark"] { --soil1: #161512; --soil2: #0a0908; }
.myc { margin: 0 0 60px; overflow-x: auto; }
.myc svg { display: block; width: 100%; min-width: 760px; height: auto; }
.myc text { font-family: var(--sans); }
.myc .door-label { font: 400 30px var(--serif); }
.myc .node-label { font-size: 12.5px; fill: var(--ink); paint-order: stroke; stroke: var(--soil1); stroke-width: 4px; stroke-linejoin: round; transition: opacity .4s; }
.myc .root-label { font: italic 400 22px var(--serif); fill: var(--ink); }
.myc .core { transition: r .35s cubic-bezier(.23,1,.32,1), opacity .45s ease; }
.myc .ring { opacity: 0; transition: opacity .35s ease; }
.myc .node { cursor: pointer; }
.myc .node.small .node-label { font-size: 11px; fill: var(--muted); }
.myc .node.on .core { r: 7; }
.myc .node.on .ring { opacity: .6; }
.myc .node.small.on .core { r: 5; }
.myc .door-node path, .myc .door-node text { transition: opacity .45s ease; }
.myc .pulses, .myc .spore { pointer-events: none; }
/* hover dims whole layers (one transition each) and lifts a copy of the hovered strands on top */
.myc g.threads, .myc g.roots, .myc g.amb { transition: opacity .45s ease; }
.myc svg.focusing g.threads, .myc svg.focusing g.roots { opacity: .12; }
.myc svg.focusing g.amb { opacity: .5; }
.myc .hl { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.myc .hl.show { opacity: 1; transition: opacity .22s cubic-bezier(.23,1,.32,1); }
.myc svg.focusing g.threads, .myc svg.focusing g.roots, .myc svg.focusing g.amb { transition-duration: .22s; }
.myc svg.focusing .node:not(.lit) .node-label { opacity: .18; }
.myc svg.focusing .node:not(.lit) .core { opacity: .3; }
.myc svg.focusing .node.lit .node-label { fill: var(--ink); stroke-width: 6px; }
.myc svg.focusing .door-node:not(.lit) path, .myc svg.focusing .door-node:not(.lit) text { opacity: .25; }
.map-tools { display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; }
.map-tools button { font-size: 13px; border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.myc svg.pre { visibility: hidden; }
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  .myc svg { min-width: 1000px; }
  .myc { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
}
.myc .node:focus:not(:focus-visible) { outline: none; }