/* ---------- HUD ---------- */
  #hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;
    align-items:flex-start;padding:18px 20px;z-index:25;pointer-events:none}
  #hud>*{pointer-events:auto}
  #hudLeft{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
  #seedLeft{font-family:'Alte Haas Grotesk',Helvetica,Arial,sans-serif;font-weight:400;font-size:38px;letter-spacing:-0.015em;
    color:#ffffff;line-height:1;padding-top:2px}
  #grownBy{font-family:var(--font);font-size:10px;letter-spacing:0.24em;text-transform:uppercase;
    color:rgba(255,255,255,0.62);line-height:1}
  #hud{flex-direction:row}
  #hudRight{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
  #seedMark{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:26;pointer-events:none;
    font-family:'Nocturne Cross Stitch',var(--display);font-size:clamp(18px,2.16vw,29px);line-height:1.5;padding-top:4px;color:#f4f1ea;
    letter-spacing:0.02em;white-space:nowrap;opacity:0.97;text-shadow:0 0 14px rgba(0,0,0,0.9), 0 0 26px rgba(255,255,255,0.12)}
  @media (max-width:640px){ #seedLeft{font-size:26px} #grownBy{font-size:8.5px;letter-spacing:0.2em} }
  #hudBtns{display:flex;gap:8px}
  #hudBtns .rowBtn{min-width:0;gap:0;padding:12px 20px;font-size:15px}
  #hudBtns .iconBtn{padding:12px 14px;display:inline-flex;align-items:center;justify-content:center;color:#ffffff}
  #hudBtns .iconBtn svg{display:block}
  #projectsBtn{text-decoration:none}
  #hudRight{gap:14px}
  /* ---------- the foot of the page: a small door, the line, and the closed dedicate button ---------- */
  #lineStack{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:26;display:flex;flex-direction:column;
    align-items:center;gap:13px;pointer-events:none}
  #lineStack>*{pointer-events:auto}
  .plusRing{width:36px;height:36px;border:1px solid rgba(255,255,255,0.55);border-radius:50%;display:flex;align-items:center;
    justify-content:center;color:#fff;font-family:var(--font);font-size:18px;line-height:1;font-weight:300;
    box-shadow:0 0 18px rgba(255,255,255,0.12);opacity:0;transition:opacity 1.4s ease, border-color .4s, box-shadow .4s}
  #lineStack .plusRing{cursor:pointer}
  #lineStack .plusRing:hover{border-color:rgba(255,182,203,0.95);box-shadow:0 0 26px rgba(255,164,192,0.45)}
  #newDedBtn{display:none!important}
  #lineStack .soonText{font-family:var(--font);font-size:10px;letter-spacing:0.34em;text-transform:uppercase;
    color:rgba(255,255,255,0.72);opacity:0;transition:opacity 1.4s ease}
  #lineStack.shown .plusRing, #lineStack.shown .soonText{opacity:1}
  #lineMark{transition:opacity 1.6s ease}
  /* ---------- the button: a quiet dark row, label left, status right ---------- */
  .rowBtn{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-width:250px;
    padding:15px 22px;background:transparent;border:1px solid rgba(255,255,255,0.22);border-radius:0;
    font-family:'Alte Haas Grotesk',Helvetica,Arial,sans-serif;font-weight:400;font-size:17px;letter-spacing:0;
    text-transform:none;color:#ffffff;cursor:pointer;box-shadow:none;text-decoration:none;
    transition:border-color .3s, background .3s, color .3s}
  .rowBtn:hover{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.04);color:#f4f1ea;box-shadow:none}
  .rowBtn .r{font-family:var(--font);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:#8fd0a8}
  .rowBtn.active{border-color:rgba(255,255,255,0.28)}
  .viewBtn{}
  #lineMark{position:relative;pointer-events:none;
    font-family:'Nocturne Cross Stitch',var(--display);font-size:clamp(15.6px,1.68vw,21.6px);color:#f4f1ea;
    white-space:nowrap;letter-spacing:0.05em;opacity:0.92;text-shadow:0 0 10px rgba(0,0,0,0.85),0 0 22px rgba(0,0,0,0.6)}
  /* ---------- season: seeding or bloom, centre right ---------- */
  #seasonPanel{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:27;
    display:flex;flex-direction:column;align-items:center;gap:10px}
  #seasonPanel .sTitle{font-family:var(--font);font-size:9px;letter-spacing:0.32em;text-transform:uppercase;
    color:rgba(255,255,255,0.62)}
  .sSwitch{position:relative;display:flex;flex-direction:column;gap:0;padding:4px;width:46px;
    background:rgba(8,12,10,0.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.18);border-radius:999px;box-shadow:none;text-transform:none;letter-spacing:0;
    transition:background .45s, border-color .45s}
  .sSwitch:hover{box-shadow:none;border-color:rgba(255,255,255,0.45)}
  .sSwitch .sOpt{position:relative;z-index:1;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,0.42);transition:color .35s}
  .sSwitch .sOpt svg{display:block}
  .sSwitch .sOpt.on{color:#ffffff}
  .sKnob{position:absolute;top:4px;left:4px;width:36px;height:36px;border-radius:999px;
    background:rgba(255,255,255,0.16);transform:translateY(100%);
    transition:transform .45s cubic-bezier(.4,0,.2,1), background .45s}
  .sSwitch.bloom .sKnob{transform:translateY(0);background:rgba(255,176,198,0.55)}
  .sLearn{font-family:var(--font);font-size:9px;letter-spacing:0.24em;text-transform:uppercase;
    color:rgba(255,255,255,0.7);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.3);padding-bottom:3px}
  .sLearn:hover{color:#fff;border-bottom-color:#fff}
  #seasonPanel{transition:right .5s ease, opacity .4s ease}
  body.cardOn #seasonPanel{right:calc(min(520px,92vw) + 44px)}
  @media (max-width:1180px){ body.cardOn #seasonPanel{opacity:0;pointer-events:none} }
  @media (max-width:640px){ #seasonPanel{top:auto;bottom:150px;transform:none} }

  /* ---------- bloom: the forest in flower, on white ---------- */
  body.bloom{color:#1b2119}
  body.bloom #app,body.bloom html{background:#f6f2ee}
  body.bloom #haze{opacity:0.35;mix-blend-mode:multiply}
  body.bloom #grain{opacity:0.16;mix-blend-mode:multiply}
  body.bloom #vignette{opacity:0.25;mix-blend-mode:multiply}
  body.bloom #seedLeft{color:#1b2119}
  body.bloom #grownBy{color:rgba(27,33,25,0.6)}
  body.bloom .rowBtn{color:#1b2119;border-color:rgba(27,33,25,0.28)}
  body.bloom .rowBtn:hover{border-color:rgba(27,33,25,0.6);background:rgba(27,33,25,0.05);color:#1b2119}
  body.bloom #hudBtns .iconBtn{color:#1b2119}
  body.bloom #seasonPanel .sTitle{color:rgba(27,33,25,0.62)}
  body.bloom .sSwitch{background:rgba(255,252,250,0.78);border-color:rgba(27,33,25,0.22)}
  body.bloom .sSwitch .sOpt{color:rgba(27,33,25,0.42)}
  body.bloom .sSwitch .sOpt.on{color:#7a2a48}
  body.bloom .sSwitch.bloom .sKnob{background:rgba(255,170,196,0.85)}
  body.bloom .sLearn{color:rgba(27,33,25,0.75);border-bottom-color:rgba(27,33,25,0.35)}
  body.bloom .sLearn:hover{color:#1b2119;border-bottom-color:#1b2119}
  body.bloom .dLabel{background:rgba(255,252,250,0.72);border-color:rgba(27,33,25,0.18);color:#26301f}
  body.bloom .dLabel:hover,body.bloom .dLabel.hot{background:rgba(255,246,248,0.95);border-color:rgba(197,84,124,0.9);
    color:#3d1c28!important;text-shadow:none;box-shadow:0 0 20px rgba(226,140,170,0.55)}
  body.bloom #dedCard{background:rgba(252,248,246,0.72);border-color:rgba(27,33,25,0.16);color:#1b2119}
  body.bloom #dedCard .cardHead{color:rgba(27,33,25,0.7);border-bottom-color:rgba(27,33,25,0.12)}
  body.bloom #dedCard .cardHead button{color:rgba(27,33,25,0.65)}
  body.bloom #dedCard .row{border-top-color:rgba(27,33,25,0.10)}
  body.bloom #dedCard .row.lit{background:rgba(27,33,25,0.04)}
  body.bloom #dedCard .ttl,body.bloom #dedCard .ttl.name{color:#1b2119}
  body.bloom #dedCard .sub{color:rgba(27,33,25,0.75)}
  body.bloom #dedCard .num,body.bloom #dedCard .coords,body.bloom #dedCard .tag,body.bloom #dedCard .event{color:rgba(27,33,25,0.6)}
  body.bloom #dedCard .tabs{border-bottom-color:rgba(27,33,25,0.16)}
  body.bloom #dedCard .tab{color:rgba(27,33,25,0.5)}
  body.bloom #dedCard .tab.on{color:#1b2119;border-bottom-color:#1b2119}
  body.bloom #dedCard .tab.green{color:rgba(58,110,74,0.7)}
  body.bloom #dedCard .tab.green.on{color:#3a6e4a;border-bottom-color:#3a6e4a}
  body.bloom #dedCard .storyBox{border-color:rgba(27,33,25,0.24);background:rgba(27,33,25,0.03)}
  body.bloom #dedCard .storyBox .sTop{color:#1b2119}
  body.bloom #dedCard .storyBox .sSub{color:rgba(27,33,25,0.72)}
  body.bloom #dedCard .storyBox .sSoon{color:rgba(27,33,25,0.6)}
  body.bloom #dedCard .chain li::before{background:rgba(27,33,25,0.22)}
  body.bloom #dedCard .chain .dot{border-color:rgba(27,33,25,0.4)}
  body.bloom #dedCard .chain li.done .dot{background:#3a6e4a;border-color:#3a6e4a;box-shadow:0 0 12px rgba(58,110,74,0.4)}
  body.bloom #dedCard .chain .k{color:#1b2119}
  body.bloom #dedCard .chain li.pending .k{color:rgba(27,33,25,0.7)}
  body.bloom #dedCard .chain .v{color:#3a6e4a}
  body.bloom #dedCard .chain li.pending .v{color:rgba(58,110,74,0.65)}
  body.bloom #dedCard .chainFoot{color:#3a6e4a;border-bottom-color:rgba(58,110,74,0.35)}
  body.bloom #lineStack .plusRing{border-color:rgba(27,33,25,0.5);color:#1b2119;box-shadow:0 0 18px rgba(27,33,25,0.08)}
  body.bloom #lineStack .plusRing:hover{border-color:rgba(197,84,124,0.9);box-shadow:0 0 26px rgba(226,140,170,0.4)}
  body.bloom #lineStack .soonText{color:rgba(27,33,25,0.7)}
  body.bloom #lineMark{color:#1b2119;text-shadow:none}
  body.bloom #ringText{color:#26301f}
  body.bloom #ringText .plusRing{border-color:rgba(27,33,25,0.5);color:#1b2119;box-shadow:none}
  body.bloom #ringText .small,body.bloom #ringText .soon{color:rgba(27,33,25,0.8)}
  body.bloom #walkHint{color:rgba(27,33,25,0.45)}
  body.bloom #toast{color:#1b2119}
  #toast{position:fixed;top:74px;left:50%;transform:translateX(-50%);padding:11px 22px;
    font-style:italic;font-size:14px;color:#f4f1ea;z-index:40;transition:opacity .8s;opacity:0;pointer-events:none}

  /* ---------- slider ---------- */
  #sliderPanel{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
    width:min(560px,92vw);padding:14px 22px 16px;z-index:24}
  #sliderPanel .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
  #yearLabel{font-size:15px;color:var(--gold);font-style:italic}
  input[type=range]{-webkit-appearance:none;appearance:none;height:2px;padding:0;border:none;border-radius:2px;
    background:linear-gradient(90deg,rgba(159,195,217,0.35),var(--gold));cursor:pointer}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
    background:var(--gold);box-shadow:0 0 16px 4px rgba(255,217,140,0.55);border:none}
  input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gold);
    box-shadow:0 0 16px 4px rgba(255,217,140,0.55);border:none}

  /* ---------- map labels ---------- */
  #webCanvas{position:fixed;inset:0;z-index:19;pointer-events:none}
  #labels{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
  .dLabel{position:absolute;left:0;top:0;transform:translate(-50%,-100%);padding:2px 6px;border-radius:12px;will-change:transform;
    background:rgba(6,13,22,0.55);border:1px solid var(--line);backdrop-filter:blur(8px);
    font-size:6.5px;letter-spacing:0.05em;white-space:nowrap;pointer-events:auto;cursor:pointer;
    transition:opacity .4s, font-size .28s ease, padding .28s ease;color:var(--ink)}
  .dLabel:hover,.dLabel.hot{border-color:rgba(255,214,228,1);box-shadow:0 0 22px rgba(255,182,203,0.7), 0 0 60px rgba(255,163,190,0.4);
    background:rgba(28,20,22,0.85);color:#fff!important;text-shadow:0 0 10px rgba(255,224,232,0.9);
    font-size:7.8px;padding:3px 8px}
  .dLabel .dot{display:none;width:7px;height:7px;border-radius:50%;margin-right:7px;
    background:currentColor;box-shadow:0 0 10px 2px currentColor;vertical-align:1px}
  /* event attendees' names: gold, with a slow band of light sweeping across */
  .dLabel .gold{background:linear-gradient(100deg,#e3b24a 0%,#ffeab0 22%,#fffaf0 28%,#ffdf96 38%,#e3b24a 50%,
      #ffeab0 72%,#fffaf0 78%,#ffdf96 88%,#e3b24a 100%);
    background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
    filter:drop-shadow(0 0 4px rgba(255,217,140,0.75));animation:goldShimmer 3.6s linear infinite}
  /* their bubble is kept light so the gold reads clearly; hovering still shows the full one */
  .dLabel.gilded:not(:hover):not(.hot){background:rgba(6,13,22,0.18);border-color:rgba(255,217,140,0.22);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  body.bloom .dLabel.gilded:not(:hover):not(.hot){background:rgba(255,252,250,0.28);border-color:rgba(138,90,18,0.22)}
  @keyframes goldShimmer{from{background-position:0% 50%}to{background-position:200% 50%}}
  body.bloom .dLabel .gold{background-image:linear-gradient(100deg,#8a5a12 0%,#c9962e 22%,#e8b957 28%,#b07a1c 38%,#8a5a12 50%,
      #c9962e 72%,#e8b957 78%,#b07a1c 88%,#8a5a12 100%);filter:none}
  @media (prefers-reduced-motion: reduce){ .dLabel .gold{animation:none} }
  #defocus{position:fixed;inset:0;pointer-events:none;z-index:14;
    backdrop-filter:blur(7px) saturate(1.06);-webkit-backdrop-filter:blur(7px) saturate(1.06);
    mask-image:radial-gradient(ellipse 72% 68% at center, transparent 46%, black 96%);
    -webkit-mask-image:radial-gradient(ellipse 72% 68% at center, transparent 46%, black 96%)}
  #vignette{position:fixed;inset:0;pointer-events:none;z-index:15;
    background:radial-gradient(ellipse 78% 74% at center, rgba(0,0,0,0) 50%, rgba(2,4,8,0.62) 100%)}
  #walkHint{position:fixed;left:20px;bottom:22px;z-index:24;font-family:var(--font);color:rgba(244,241,234,0.55)!important;
    font-size:10px;letter-spacing:0.17em;text-transform:uppercase;color:var(--mist);opacity:0.55;
    pointer-events:none}
  #fallback{position:fixed;inset:0;background:var(--night);display:none;align-items:center;justify-content:center;
    text-align:center;padding:30px;z-index:70}
  @media (max-width:640px){ h1{font-size:24px} }
  @media (prefers-reduced-motion: reduce){ .fadeable,.dLabel,#toast{transition:none} .pending{animation:none} }
  /* ---------- view pills, bottom centre ---------- */
  .viewBtn{padding:9px 18px;background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--line);
    color:rgba(244,241,234,0.75);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;border-radius:0;
    box-shadow:none;opacity:0.85}
  .viewBtn{border-radius:999px}
  .viewBtn.active{background:rgba(244,241,234,0.10);border-color:rgba(244,241,234,0.4);color:#f4f1ea;opacity:1}
  .viewBtn:hover{color:var(--ink);opacity:1}