/* ═══════════════════════════════════════════════════════════════════════
   OUTLIER.SYSTEMS — THE SYSTEMS GRAMMAR (shared by every page)

   One sentence, held all the way down: a system is what accumulates
   between causes. Read it, and the loop closes.

   THE LOOP MARKS. Every section eyebrow carries one mark: the page's own
   loop, drawn one arc per section as the reader arrives, the arrowhead
   landing where the arc stops. The last section closes the loop. Seven
   sections, seven arcs. The reader is the flow; the page is the stock.

   THE SPINE. On wide screens the marks stand in the margin and a hairline
   reaches from each to the next the moment the next arrives, the way a
   cause reaches an effect. On a phone the marks stand inline and carry the
   whole meaning by themselves.

   THE FLOW. A link in a sentence underlines in the direction of cause:
   left to right, once, when reached for.

   Progressive: every page is complete without this file. Compositor-only
   motion, honoring prefers-reduced-motion. Glow, never highlight.
   ═══════════════════════════════════════════════════════════════════════ */

.lp{display:inline-block;width:13px;height:13px;margin:0 9px 0 0;vertical-align:-1px;overflow:visible;flex:none;
  --lp-from:0;--lp-to:0;--lp-c:#22d3ee}
.lp circle{fill:none;stroke:var(--lp-c);stroke-width:1.35;stroke-linecap:round;opacity:.42;
  stroke-dasharray:var(--lp-from) 100;
  transition:stroke-dasharray 1.15s cubic-bezier(.62,.02,.24,1),opacity .6s cubic-bezier(.62,.02,.24,1)}
.lp.on circle{stroke-dasharray:var(--lp-to) 100;opacity:1}
/* the ghost of the whole loop, so an early arc is read as part of a circle */
.lp .lp-g{fill:none;stroke:rgba(159,212,255,.13);stroke-width:1}
.lp .lp-a{fill:none;stroke:var(--lp-c);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;opacity:0;
  transition:opacity .5s cubic-bezier(.62,.02,.24,1) .95s}
.lp.on .lp-a{opacity:1}
/* the loop closes: one soft bloom, then a quiet held glow */
.lp.on.lp--closed{animation:lpclose 2.2s cubic-bezier(.62,.02,.24,1) .9s both}
@keyframes lpclose{
  0%{filter:none}
  38%{filter:drop-shadow(0 0 6px rgba(34,211,238,.95)) drop-shadow(0 0 16px rgba(99,102,241,.75))}
  100%{filter:drop-shadow(0 0 4px rgba(34,211,238,.5))}}

/* the spine, wide screens only: the marks step into the margin */
@media(min-width:1000px){
  .lp-host{position:relative}
  .lp-host .lp{position:absolute;left:-30px;top:.16em;margin:0}
  .lp-host.lp-inline .lp{position:static;margin:0 9px 0 0}
  .lp-link{position:absolute;width:1px;pointer-events:none;z-index:2;
    background:linear-gradient(180deg,rgba(34,211,238,.5),rgba(168,85,247,.5));
    transform:scaleY(0);transform-origin:50% 0;
    transition:transform 1.35s cubic-bezier(.62,.02,.24,1) .2s}
  .lp-link.on{transform:scaleY(1)}
}

/* the flow: a sentence link underlines left to right, once, when reached for */
.lp-flow{background-image:linear-gradient(90deg,#22d3ee,#a855f7 68%,#d946ef);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .62s cubic-bezier(.62,.02,.24,1),color .3s cubic-bezier(.62,.02,.24,1)}
.lp-flow:hover,.lp-flow:focus-visible{background-size:100% 1px;color:#fff}

@media(prefers-reduced-motion:reduce){
  .lp circle,.lp .lp-a,.lp-link,.lp-flow{transition:none}
  .lp.on.lp--closed{animation:none;filter:drop-shadow(0 0 4px rgba(34,211,238,.5))}
}

/* ═══════════════════════════════════════════════════════════════════════
   THE MAP — the site drawn as its own system, limit included.
   One glyph in every header row opens it: the pages are the nodes, Trust
   is the hub, R1 is the practice loop, B1 is the limit. The page you stand
   on is lit. Counts are fetched, not typed. The hour is yours.
   ═══════════════════════════════════════════════════════════════════════ */
.lp-mapb{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;cursor:pointer;
  border-radius:16px;border:1px solid rgba(150,165,225,.22);background:rgba(255,255,255,.045);color:#bfe9ff;padding:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:border-color .3s cubic-bezier(.62,.02,.24,1),box-shadow .3s cubic-bezier(.62,.02,.24,1),transform .3s cubic-bezier(.62,.02,.24,1)}
.lp-mapb:hover,.lp-mapb:focus-visible{border-color:rgba(150,175,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 22px rgba(99,102,241,.32);transform:translateY(-1px);outline:none}
.lp-mapb svg{width:20px;height:20px;overflow:visible}
.lp-mapb .m1{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.lp-mapb .m2{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lp-mapb--fixed{position:fixed;top:12px;right:12px;z-index:80}
.lp-mapb--nav{margin-left:8px}
.top .lp-mapb{margin-left:auto}
@media(max-width:900px){.top .lp-mapb{margin-left:auto;margin-right:8px}.top .menub{margin-left:0}}
.crown .lp-mapb{margin-left:auto}

.lp-map{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(4,5,10,.78);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  animation:lpfade .5s cubic-bezier(.62,.02,.24,1) both}
.lp-map[hidden]{display:none}
@keyframes lpfade{from{opacity:0}to{opacity:1}}
.lp-map__panel{position:relative;width:min(480px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:26px;padding:18px 18px 20px;
  background:linear-gradient(168deg,rgba(19,22,38,.94),rgba(8,10,20,.96));border:1px solid rgba(150,175,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 120px rgba(2,3,14,.7),0 0 60px rgba(99,102,241,.12);
  animation:lprise .7s cubic-bezier(.62,.02,.24,1) both;scrollbar-width:thin}
@keyframes lprise{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
.lp-map__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.lp-map__eye{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#a9cfff}
.lp-map__x{min-width:44px;min-height:44px;border-radius:16px;border:1px solid rgba(150,165,225,.2);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px}
.lp-map__x:hover,.lp-map__x:focus-visible{border-color:rgba(150,175,255,.5);outline:none}
.lp-map__svg{display:block;width:100%;height:auto;overflow:visible;
  font-family:"Avenir Next","Avenir","Jost","Nunito Sans",system-ui,sans-serif}
/* In the panel the drawing reaches 10px into the padding, which gives its labels room on a phone.
   Label sizes below are in drawing units. systems.js sets the --lp-* sizes from the drawing's width on
   screen so that no label renders under 12px; the fallbacks are the wide-screen sizes. */
.lp-map__panel .lp-map__svg{width:calc(100% + 20px);margin:0 -10px}
.lp-map__svg .ln{fill:none;stroke:rgba(159,212,255,.5);stroke-width:1.25;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.1s cubic-bezier(.62,.02,.24,1)}
.lp-map--in .lp-map__svg .ln{stroke-dashoffset:0}
.lp-map__svg .ln.neg{stroke:rgba(217,70,239,.55)}
.lp-map__svg .sg{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--lp-sg,10px);font-weight:500;text-anchor:middle;dominant-baseline:central;fill:#bfe9ff;opacity:0;transition:opacity .5s cubic-bezier(.62,.02,.24,1) .9s}
.lp-map__svg .sg.neg{fill:#f4b6ff}
.lp-map__svg .sgb{fill:#0b0d19;opacity:0;transition:opacity .5s cubic-bezier(.62,.02,.24,1) .9s}
.lp-map--in .lp-map__svg .sg,.lp-map--in .lp-map__svg .sgb{opacity:1}
.lp-map__svg .nd rect{fill:rgba(255,255,255,.045);stroke:rgba(150,165,225,.3);stroke-width:1;
  transition:stroke .3s cubic-bezier(.62,.02,.24,1),fill .3s cubic-bezier(.62,.02,.24,1)}
.lp-map__svg .nd text{fill:#f4f5f9;font-size:var(--lp-nd,12.5px);font-weight:400;text-anchor:middle;dominant-baseline:central;letter-spacing:.01em}
.lp-map__svg .nd:hover rect,.lp-map__svg .nd:focus rect{stroke:rgba(150,175,255,.7);fill:rgba(255,255,255,.08)}
.lp-map__svg .nd:focus{outline:none}
.lp-map__svg .nd.here rect{stroke:rgba(191,231,255,.95);fill:rgba(99,102,241,.22);filter:drop-shadow(0 0 8px rgba(34,211,238,.6)) drop-shadow(0 0 20px rgba(99,102,241,.5))}
.lp-map__svg .vr{fill:#e6f3ff;font-size:var(--lp-vr,12.5px);font-weight:300;text-anchor:middle;dominant-baseline:central;font-style:italic}
.lp-map__svg .vr.hub{fill:#fff;font-size:var(--lp-hub,15px);font-weight:400;font-style:normal;letter-spacing:.02em}
.lp-map__svg .hubglow{fill:rgba(99,102,241,.14)}
.lp-map__svg .lb{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--lp-lb,10px);letter-spacing:.14em;fill:#9fd4ff;text-anchor:middle;dominant-baseline:central}
.lp-map__svg .lb.b{fill:#f4b6ff}
.lp-map__svg .lpm{fill:none;stroke:#9fd4ff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.lp-map__svg .lpm.b{stroke:#f4b6ff}
.lp-map__legend{margin:12px 0 0;font-family:"Sora",system-ui,sans-serif;font-size:13.5px;line-height:1.62;color:#d8dbe6;font-weight:300}
.lp-map__legend b{font-weight:500;color:#fff}
.lp-map__counts{margin:12px 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.06em;line-height:1.9;color:#bfe9ff}
.lp-map__counts i{font-style:normal;color:#a9cfff;padding:0 5px}
.lp-map__hour{margin:12px 0 0;font-family:"Avenir Next","Avenir","Jost","Nunito Sans",system-ui,sans-serif;font-weight:300;font-size:15.5px;line-height:1.5;color:#d8dbe6}
.lp-map__hour em{font-style:normal;font-weight:400;color:#fff}
.lp-map__hour span{color:#bfe9ff}
/* one system: the second ring */
.lp-map__tabs{display:inline-flex;gap:4px;padding:3px;border-radius:16px;border:1px solid rgba(150,165,225,.18);background:rgba(255,255,255,.03)}
.lp-map__tab{min-height:38px;padding:8px 12px;border-radius:13px;border:0;background:transparent;color:#bfe9ff;cursor:pointer;white-space:nowrap;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:background .3s cubic-bezier(.62,.02,.24,1),color .3s cubic-bezier(.62,.02,.24,1)}
@media(max-width:359px){.lp-map__tab{letter-spacing:.06em;padding:8px 9px}.lp-map__head{gap:8px}}
.lp-map__tab.on{background:rgba(99,102,241,.28);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.lp-map__tab:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(150,175,255,.6)}
.lp-map__view[hidden]{display:none}
.lp-map__more{color:#9fd4ff;display:inline-block;padding:10px 0;margin:-10px 0}
.lp-map__svg--eco{overflow:visible}
.lp-map__svg--eco .eo{fill:none;stroke:rgba(159,212,255,.16);stroke-width:1;stroke-dasharray:3 7;stroke-linecap:round}
.lp-map__svg--eco .ek{stroke:rgba(159,212,255,.13);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;animation:ekin 1.1s cubic-bezier(.62,.02,.24,1) forwards,ekpulse 7s ease-in-out infinite}
@keyframes ekpulse{0%,100%{stroke:rgba(159,212,255,.13)}50%{stroke:rgba(191,231,255,.42)}}
.lp-map__svg .lps{fill:#fff;filter:drop-shadow(0 0 4px #bfe9ff) drop-shadow(0 0 10px rgba(34,211,238,.9));offset-rotate:0deg;opacity:0;animation:lpsin .6s cubic-bezier(.62,.02,.24,1) 1.4s forwards}
.lp-map__svg .lps--r{offset-path:path("M84 146 L200 236 L316 146 L346 290 Q418 96 200 44 Z");animation:lpsin .6s cubic-bezier(.62,.02,.24,1) 1.4s forwards,lpride 16s linear infinite}
.lp-map__svg .lps--b{offset-path:path("M316 146 L346 290 L346 392 Q418 270 316 146");filter:drop-shadow(0 0 4px #f0abfc) drop-shadow(0 0 10px rgba(217,70,239,.9));animation:lpsin .6s cubic-bezier(.62,.02,.24,1) 1.4s forwards,lpride 11s linear infinite reverse}
@keyframes lpsin{to{opacity:1}}
@keyframes lpride{from{offset-distance:0%}to{offset-distance:100%}}
.lp-map__svg--eco .en.sel rect{stroke:rgba(255,227,160,.9);fill:rgba(245,196,81,.12)}
.lp-map__det{margin:12px 0 0;padding:14px 16px;border-radius:18px;border:1px solid rgba(245,196,81,.28);background:linear-gradient(168deg,rgba(28,22,10,.7),rgba(8,10,20,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.lp-map__det--in{animation:lprise .5s cubic-bezier(.62,.02,.24,1)}
.lp-map__det[hidden]{display:none}
.lp-map__det-k{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#a9cfff;margin-bottom:4px}
.lp-map__det-n{display:block;font-family:"Avenir Next","Avenir","Jost","Nunito Sans",system-ui,sans-serif;font-weight:400;font-size:19px;color:#fff;letter-spacing:-.01em}
.lp-map__det-l{margin:4px 0 0;font-family:"Avenir Next","Avenir","Jost","Nunito Sans",system-ui,sans-serif;font-weight:300;font-size:15px;line-height:1.45;color:#ffe3a0}
.lp-map__det-l:empty,.lp-map__det-s:empty{display:none}
.lp-map__det-s{margin:4px 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.06em;color:#9fd4ff}
.lp-map__det-go{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-family:"Sora",system-ui,sans-serif;font-size:14px;font-weight:500;color:#ffe3a0}
.lp-map__svg--eco .ek.here{stroke:rgba(191,231,255,.55);filter:drop-shadow(0 0 3px rgba(34,211,238,.6))}
@keyframes ekin{to{stroke-dashoffset:0}}
.lp-map__svg--eco .eo1{animation:edash 5s linear infinite}
.lp-map__svg--eco .eo2{animation:edash 8s linear infinite reverse}
@keyframes edash{to{stroke-dashoffset:-20}}
.lp-map__svg--eco .es{fill:#fff;filter:drop-shadow(0 0 5px #bfe9ff) drop-shadow(0 0 12px rgba(99,102,241,.9));offset-rotate:0deg}
.lp-map__svg--eco .es1{offset-path:path("M180 113 A86 112 0 1 1 180 337 A86 112 0 1 1 180 113");animation:eride 26s linear infinite}
.lp-map__svg--eco .es2{offset-path:path("M180 39 A138 186 0 1 0 180 411 A138 186 0 1 0 180 39");animation:eride 41s linear infinite}
.lp-map__svg--eco .es3{offset-path:path("M180 39 A138 186 0 1 0 180 411 A138 186 0 1 0 180 39");animation:eride 41s linear infinite;animation-delay:-20s;opacity:.55}
@keyframes eride{from{offset-distance:0%}to{offset-distance:100%}}
.lp-map__svg--eco .ecg{fill:rgba(99,102,241,.14);animation:ebreathe 8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ebreathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.lp-map__svg--eco .ec rect{fill:rgba(99,102,241,.22);stroke:rgba(191,231,255,.7);stroke-width:1;filter:drop-shadow(0 0 8px rgba(34,211,238,.45))}
.lp-map__svg--eco .ec text{fill:#fff;font-size:var(--lp-ec,13px);font-weight:400;text-anchor:middle;dominant-baseline:central;letter-spacing:.01em}
.lp-map__svg--eco .en rect{fill:rgba(255,255,255,.045);stroke:rgba(150,165,225,.3);stroke-width:1;transition:stroke .3s cubic-bezier(.62,.02,.24,1),fill .3s cubic-bezier(.62,.02,.24,1)}
.lp-map__svg--eco .en text{fill:#f4f5f9;font-size:var(--lp-en,11.5px);font-weight:400;text-anchor:middle;dominant-baseline:central}
.lp-map__eco-n{margin:8px 0 0;text-align:center;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.06em;color:#9fd4ff;text-wrap:balance}
.lp-map__eco-n i{font-style:normal;color:#c1cde5}
.lp-map__svg--eco .en .ed{fill:#22d3ee;filter:drop-shadow(0 0 4px rgba(34,211,238,.9))}
.lp-map__svg--eco .en--soon .ed{fill:#a855f7;filter:drop-shadow(0 0 4px rgba(168,85,247,.9))}
.lp-map__svg--eco .en--role .ed{fill:#d946ef;filter:drop-shadow(0 0 4px rgba(217,70,239,.9))}
.lp-map__svg--eco .en:hover rect,.lp-map__svg--eco .en:focus rect{stroke:rgba(150,175,255,.7);fill:rgba(255,255,255,.08)}
.lp-map__svg--eco .en:focus{outline:none}
.lp-map__svg--eco .en.here rect,.lp-map__svg--eco .ec.here rect{stroke:rgba(191,231,255,.95);fill:rgba(99,102,241,.3);filter:drop-shadow(0 0 8px rgba(34,211,238,.6)) drop-shadow(0 0 20px rgba(99,102,241,.5))}
@media(prefers-reduced-motion:reduce){
  .lp-map__svg--eco .eo1,.lp-map__svg--eco .eo2,.lp-map__svg--eco .es,.lp-map__svg--eco .ecg{animation:none}
  .lp-map__svg--eco .ek{animation:none;stroke-dashoffset:0}
  .lp-map__svg .lps{display:none}
  .lp-map__det--in{animation:none}
  .lp-map,.lp-map__panel{animation:none}
  .lp-map__svg .ln{stroke-dashoffset:0;transition:none}
  .lp-map__svg .sg,.lp-map__svg .sgb{opacity:1;transition:none}
}

/* THE IMPETUS */
.lp-imp{position:fixed;left:0;top:0;height:2px;width:100%;z-index:95;pointer-events:none;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,#22d3ee,#7fb8ff 55%,#a855f7);box-shadow:0 0 8px rgba(34,211,238,.55);will-change:transform;transition:box-shadow .6s cubic-bezier(.62,.02,.24,1),height .4s cubic-bezier(.62,.02,.24,1)}
.lp-imp--closed{height:3px;box-shadow:0 0 14px rgba(168,85,247,.9),0 0 30px rgba(34,211,238,.5)}
.lp-mapb--pulse{animation:lpmapb 1.3s cubic-bezier(.62,.02,.24,1)}
@keyframes lpmapb{0%{box-shadow:0 0 0 0 rgba(191,231,255,.7)}100%{box-shadow:0 0 0 22px rgba(191,231,255,0)}}
@media(prefers-reduced-motion:reduce){.lp-imp{transition:none}.lp-mapb--pulse{animation:none}}

/* THE CORPUS SIGNATURE */
.lp-corpus{display:flex;flex-direction:column;align-items:center;gap:10px;margin:34px auto 0;padding:16px 18px;border-radius:22px;border:1px solid rgba(150,165,225,.14);background:rgba(255,255,255,.025);text-decoration:none;color:inherit;max-width:560px;transition:border-color .4s cubic-bezier(.62,.02,.24,1)}
.lp-corpus:hover,.lp-corpus:focus-visible{border-color:rgba(150,175,255,.45);outline:none}
.lp-corpus__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.lp-corpus__d{display:block;width:7px;height:7px;border-radius:50%;background:#22d3ee;box-shadow:0 0 7px rgba(34,211,238,.85);opacity:0;transform:scale(.4);transition:opacity .6s cubic-bezier(.62,.02,.24,1),transform .6s cubic-bezier(.62,.02,.24,1)}
.lp-corpus__d--soon{background:#a855f7;box-shadow:0 0 7px rgba(168,85,247,.85)}
.lp-corpus__d--role{background:#d946ef;box-shadow:0 0 7px rgba(217,70,239,.85)}
.lp-corpus.on .lp-corpus__d{opacity:1;transform:scale(1)}
.lp-corpus__d.here{width:11px;height:11px;margin:-2px;background:#fff;box-shadow:0 0 8px #bfe9ff,0 0 18px rgba(34,211,238,.9);animation:lpcorp 3.6s ease-in-out infinite}
@keyframes lpcorp{0%,100%{box-shadow:0 0 8px #bfe9ff,0 0 18px rgba(34,211,238,.9)}50%{box-shadow:0 0 10px #fff,0 0 30px rgba(34,211,238,1)}}
.lp-corpus__t{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9fd4ff;text-align:center;line-height:1.8;text-wrap:balance}
.lp-corpus__t b{font-weight:400;color:#c1cde5;padding:0 2px}
.lp-corpus__t em{font-style:normal;color:#fff}
@media(prefers-reduced-motion:reduce){.lp-corpus__d{opacity:1;transform:none;transition:none}.lp-corpus__d.here{animation:none}}

/* THE WEB */
.lp-map__svg--web .wl{fill:none;stroke:rgba(191,231,255,.36);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;animation:ekin 1.2s cubic-bezier(.62,.02,.24,1) forwards}
.lp-map__svg--web .wl:hover{stroke:rgba(255,227,160,.9)}
.lp-map__svg--web .wf{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--lp-wf,10px);letter-spacing:.24em;text-transform:uppercase;fill:#a9cfff;text-anchor:middle;dominant-baseline:central}
.lp-map__svg--web .ws{fill:#fff;filter:drop-shadow(0 0 4px #bfe9ff) drop-shadow(0 0 10px rgba(34,211,238,.9));offset-rotate:0deg;animation:eride 22s linear infinite}
.lp-map__svg--web .ws--m{fill:none;stroke:#e8f6ff;stroke-width:1.1}
.lp-map__svg--web .ws--p{fill:none;stroke:#dab8fe;stroke-width:1.1;stroke-dasharray:2 2;filter:drop-shadow(0 0 4px rgba(168,85,247,.9))}
.lp-map__svg--web .ws2{filter:drop-shadow(0 0 4px #ffe3a0) drop-shadow(0 0 10px rgba(245,196,81,.9));animation-duration:17s;animation-delay:-5s}
.lp-map__svg--web .wlb{font-size:var(--lp-wlb,9.5px)}
.lp-map__svg--web .wlb.g{fill:#ffe3a0}
@media(prefers-reduced-motion:reduce){.lp-map__svg--web .wl{animation:none;stroke-dashoffset:0}.lp-map__svg--web .ws{display:none}}

/* THE DOORS ROW (the map) */
.lp-map__doors{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
@media(max-width:480px){.lp-map__doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.lp-map__doors span{grid-column:1/-1}.lp-map__door{justify-content:center}} /* four doors: two by two, never three and one */
.lp-map__doors span{width:100%;text-align:center;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#a9cfff;margin-bottom:2px}
.lp-map__door{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:14px;border:1px solid rgba(150,165,225,.3);background:rgba(255,255,255,.045);font-family:"Sora",system-ui,sans-serif;font-size:13px;color:#f4f5f9;transition:border-color .3s cubic-bezier(.62,.02,.24,1),background .3s cubic-bezier(.62,.02,.24,1)}
.lp-map__door:hover,.lp-map__door:focus-visible{border-color:rgba(150,175,255,.7);background:rgba(255,255,255,.08);outline:none}
.lp-map__door.on{border-color:rgba(191,231,255,.95);background:rgba(99,102,241,.3);box-shadow:0 0 12px rgba(34,211,238,.4)}

/* CONTINUITY: one system, one document to the next */
@view-transition{navigation:auto}
::view-transition-old(root){animation:lpfadeout .32s cubic-bezier(.62,.02,.24,1) both}
::view-transition-new(root){animation:lpfadein .46s cubic-bezier(.62,.02,.24,1) both}
@keyframes lpfadeout{to{opacity:0}}
@keyframes lpfadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* LIVE CELLS */
.lp-live{text-shadow:0 0 10px rgba(34,211,238,.45);transition:text-shadow .8s cubic-bezier(.62,.02,.24,1)}

/* THE WEB: hit paths */
.lp-map__svg--web .wl-hit{fill:none;stroke:rgba(0,0,0,0.001);stroke-width:16;pointer-events:stroke;cursor:pointer}
.lp-map__svg--web .wl-hit:focus{outline:none}
.lp-map__svg--web .wl-hit:hover + *,.lp-map__svg--web .wl-hit.sel{stroke:rgba(255,227,160,.16)}

/* Labels set in wide-tracked capitals wrap in balanced lines, never with one word alone (2026-10-07). */
.eye,.eyebrow,.snum,.hero__eye,.kicker{text-wrap:balance}

/* THE SOUND SWITCH (sound.js, 2026-10-07): off until the visitor turns it on. Beside the map glyph on wide screens,
   inside the Map on every width. Its three bars move with the tide while it is on. */
.lp-snd{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;cursor:pointer;padding:0;
  border-radius:16px;border:1px solid rgba(150,165,225,.22);background:rgba(255,255,255,.045);color:#bfe9ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:border-color .3s cubic-bezier(.62,.02,.24,1),box-shadow .3s cubic-bezier(.62,.02,.24,1)}
.lp-snd:hover,.lp-snd:focus-visible{border-color:rgba(150,175,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 22px rgba(99,102,241,.32);outline:none}
.lp-snd[aria-pressed="true"]{border-color:rgba(253,194,111,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 20px -6px rgba(253,194,111,.7)}
.lp-snd__g{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.lp-snd__g i{width:3px;height:5px;border-radius:2px;background:currentColor;opacity:.75;transform-origin:bottom}
.lp-snd__g i:nth-child(2){height:9px}.lp-snd__g i:nth-child(3){height:6px}
.lp-snd[aria-pressed="true"] .lp-snd__g i{background:#fdc26f;opacity:1;animation:lpsndbar 1.4s ease-in-out infinite}
.lp-snd[aria-pressed="true"] .lp-snd__g i:nth-child(2){animation-delay:-.45s}
.lp-snd[aria-pressed="true"] .lp-snd__g i:nth-child(3){animation-delay:-.9s}
@keyframes lpsndbar{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.5)}}
.lp-snd--top{margin-left:8px}
.top .lp-snd--top{margin-right:8px;margin-left:0}
.lp-mapb--fixed + .lp-snd--top{position:fixed;top:12px;right:66px;z-index:80;margin:0}
.lp-map__snd{display:flex;align-items:center;gap:12px;margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(150,165,225,.14);font:500 12px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#c1cde5}
.lp-map__snd .lp-snd{width:44px;height:44px}
@media(max-width:719px){.lp-snd--top{display:none}}
@media(prefers-reduced-motion:reduce){.lp-snd__g i{animation:none!important}}