/* Navigation excerpt from Sylva canonical HTML, SHA-256 69c3694bd63f44ef9f007ebe4dac57a83e4402e0cdf6b54dd10b96dd4f05e197. Site integration overrides follow. */
  .dock-wrap{
    position:absolute; z-index:5;
    top:calc(38 * var(--u)); left:0; right:0;
    display:flex; justify-content:center;
    pointer-events:none;
  }
  .dock{
    pointer-events:auto;
    display:flex; align-items:flex-start; gap:calc(3 * var(--u));
    height:calc(46 * var(--u));
    padding:calc(5 * var(--u));
    border-radius:calc(14 * var(--u));
    border:1px solid rgba(255,255,255,.11);
    /* No backdrop-filter. It sits over a canvas that repaints every frame,
       so the backdrop has to be re-sampled and re-blurred every frame too —
       measured at ~20 fps off the whole page, and the radius made no
       difference because the cost is the extra pass, not the blur. A
       translucent panel with a lit top edge reads the same at this size. */
    background:
      linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 42%),
      rgba(34,40,31,.74);
    box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(10,14,8,.30),
               inset 0 1px rgba(255,255,255,.06);
    isolation:isolate;
  }
  /* Anchored at the top so growth runs downward, out of the headline's way —
     a dock that grew from its centre would push into the nav's own row. */
  .dock-item{
    position:relative; z-index:6;
    display:inline-flex; align-items:center; justify-content:center;
    flex:none;
    height:calc(36 * var(--u));
    gap:calc(8 * var(--u));
    padding:0 calc(13 * var(--u));
    transform-origin:50% 0;
    border:1px solid transparent;
    border-radius:calc(10 * var(--u));
    background:rgba(255,255,255,.04);
    color:var(--ink-faint);
    text-decoration:none; cursor:pointer;
    font-family:inherit;
    font-size:calc(11 * var(--u)); font-weight:500;
    letter-spacing:calc(1.5 * var(--u)); text-transform:uppercase;
    white-space:nowrap;
    will-change:width,height,transform;
    transition:color .18s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  }
  /* A magnified pill hangs below the capsule, so it needs to be its own
     opaque tile — a translucent white wash at that size reads as a milky
     rectangle stuck to the bar rather than as a key lifting off it. */
  .dock-item[data-near="true"]{
    z-index:7;
    color:var(--ink);
    border-color:rgba(255,255,255,.19);
    background:rgba(31,37,28,.94);
    box-shadow:0 calc(7 * var(--u)) calc(16 * var(--u)) rgba(10,14,8,.30);
  }
  .dock-item .glyph{
    width:calc(14 * var(--u)); height:calc(14 * var(--u)); flex:none;
    opacity:.66; transition:opacity .18s var(--ease);
  }
  .dock-item .glyph svg{
    display:block; width:100%; height:100%;
    fill:none; stroke:currentColor; stroke-width:1.25;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .dock-item[data-near="true"] .glyph{ opacity:1; }

  /* the mark is the dock's anchor: a solid pale tile, the one opaque thing
     in a bar made of glass */
  .dock-mark{
    width:calc(36 * var(--u)); padding:0;
    background:#eef1e7; border-color:#eef1e7; color:#23261f;
    overflow:hidden;
  }
  .dock-mark svg{ width:58%; height:58%; display:block; fill:currentColor; }
  /* the near state paints .dock-item white, which on the pale mark tile
     would be a white glyph on a white ground */
  .dock-mark[data-near="true"]{ background:#fff; border-color:#fff; color:#1b1e18; }

  /* the current section wears the cards' paper, so the nav and the cards
     read as the same material */
  .dock-item.is-active{
    background:var(--card); border-color:var(--card); color:var(--card-ink);
    box-shadow:0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(12,17,9,.24);
  }
  .dock-item.is-active .glyph{ opacity:.8; }
  .dock-item--enter{ color:var(--ink); background:rgba(255,255,255,.075); }

  /* ── specular rim ────────────────────────────────────────────────────
     A conic gradient masked down to the border, whose start angle points at
     the pointer and whose opacity falls off with distance. It is the reason
     the glass reads as a lit edge rather than as a flat translucent box. */
  [data-spec]{ --spec-angle:2.4rad; --spec-bright:0; }
  [data-spec]::after{
    content:''; position:absolute; inset:-1px; z-index:5;
    padding:1px; border-radius:inherit; pointer-events:none;
    opacity:var(--spec-bright);
    background:conic-gradient(from var(--spec-angle) at 50% 50%,
      rgba(240,246,232,0) 0deg, rgba(240,246,232,.08) 14deg, rgba(240,246,232,.95) 28deg,
      rgba(240,246,232,.16) 46deg, rgba(240,246,232,0) 68deg, rgba(240,246,232,0) 180deg,
      rgba(240,246,232,.08) 194deg, rgba(240,246,232,.95) 208deg, rgba(240,246,232,.16) 226deg,
      rgba(240,246,232,0) 248deg, rgba(240,246,232,0) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  .dock{ position:relative; }
.dock-wrap{--u:1.2px;--ink:#fff;--ink-faint:rgba(255,255,255,.62);--card:#f2f3ef;--card-ink:#23261f;--ease:cubic-bezier(.22,.61,.36,1);position:fixed;top:32px;z-index:100;transition:top .45s var(--ease),filter .45s var(--ease);font-family:'Segoe UI','Microsoft YaHei',sans-serif}
.dock-wrap.is-scrolled{top:14px;filter:drop-shadow(0 8px 20px #0004)}
.dock{gap:4px;animation:dock-enter .7s cubic-bezier(.16,1,.3,1) both}
.dock-mark img{width:72%;height:72%;object-fit:contain}
.dock-item:focus-visible{outline:2px solid #fff;outline-offset:4px}
.dock-item{animation:dock-item-enter .65s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d)}
html{scroll-padding-top:105px}
@keyframes dock-enter{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
@keyframes dock-item-enter{from{clip-path:inset(0 0 105% 0)}to{clip-path:inset(-50% -50% -100% -50%)}}
@media(max-width:600px){.dock-wrap{--u:1px;top:18px}.dock{height:56px;padding:6px;gap:4px;border-radius:17px}.dock-item{height:44px;width:44px;padding:0;border-radius:12px}.dock-item span:not(.glyph){display:none}.dock-item .glyph{width:19px;height:19px}}
@media(prefers-reduced-motion:reduce){.dock,.dock-item{animation:none}.dock-wrap{transition:none}}
.dock-wrap{--card:#b9edf5;--card-ink:#0a2639;--ink-faint:#b2c6da}
.dock{background:linear-gradient(180deg,#87c9ff20,transparent 48%),#0b1b2bed;border-color:#93c9f44d;box-shadow:0 10px 35px #020d2066,inset 0 1px #d2edff36,0 0 25px #419de51a}
.dock-item{background:#accdff09}
.dock-item[data-near="true"]{background:#17344bec;border-color:#91ddec88;box-shadow:0 7px 22px #00132155}
.dock-mark{background:#c4eaf2;border-color:#c4eaf2}
.dock-item.is-active{background:linear-gradient(135deg,#d9f5fa,#82cbe8);border-color:#bcefff;color:#0a2639;box-shadow:0 0 18px #78ddff33}
.dock-wrap.is-side{left:auto;right:20px;top:50%;width:auto;transform:translateY(-50%);transition:none}
.is-side .dock{flex-direction:column;height:auto;width:64px;padding:6px;gap:6px;animation:none}
.is-side .dock-item{width:50px!important;height:50px!important;padding:0;transform:none!important;animation:none}
.is-side .dock-item span:not(.glyph){position:absolute;right:65px;background:#102b40;color:#e2f7ff;padding:9px 13px;border:1px solid #8ccfe755;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s;letter-spacing:1px}
.is-side .dock-item:hover span:not(.glyph),.is-side .dock-item:focus-visible span:not(.glyph){opacity:1}
.is-side .glyph{width:20px;height:20px}
@media(max-width:640px){.dock-wrap.is-side{right:8px}.is-side .dock{width:52px;padding:4px;gap:4px}.is-side .dock-item{width:44px!important;height:44px!important}.is-side .dock-item span:not(.glyph){display:block;right:55px}.section{padding-right:74px}}