/* Next in Marketing — styles for extras.js / explore.js / search.js:
   3D emoji + pins, hand-drawn marks, flip + video cards, entrance motion,
   tour, minimap, progress, reactions, stickers, lightbox, search.
   Load after chrome.css. */
:root{ --mark:#E5484D; --select:#4262FF; --ui-shadow:0 4px 0 rgba(60,45,25,.12); }
[hidden]{display:none!important}

/* ── 3D emoji ───────────────────────────────────── */
.emo-inline{width:1.25em;height:1.25em;vertical-align:-.28em;margin-right:.35em;pointer-events:none;user-select:none}
.hub .emo-inline{width:30px;height:30px;vertical-align:-7px;margin-right:9px}
.section-label .emo-inline{width:24px;height:24px;vertical-align:-7px;margin-right:8px}
.col-head .name .emo-inline{width:28px;height:28px;vertical-align:-5px;margin-right:6px}
.herocard .callout .emo-inline{width:30px;height:30px;vertical-align:-6px}
.emo-sticker{position:absolute;top:-22px;right:-18px;width:54px;height:54px;transform:rotate(12deg);pointer-events:none;z-index:4;filter:drop-shadow(0 4px 3px rgba(40,30,15,.22))}
/* floating decor: big emoji parked in empty canvas space. Not a .node, so
   the engine's bounds/fit ignore it and it never shifts the layout. */
.decor{position:absolute;width:var(--s,96px);height:var(--s,96px);pointer-events:none;transform:rotate(var(--r,0deg));animation:nimFloat 6s ease-in-out infinite;animation-delay:var(--dl,0s)}
.decor .emo-sticker{position:static;width:100%;height:100%;transform:none;filter:drop-shadow(0 12px 10px rgba(40,30,15,.18))}
@keyframes nimFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.thumbcard .art{position:relative}
.thumbcard .art .emo-sticker{top:auto;bottom:8px;right:10px;width:46px;height:46px}
.emo-logo{width:24px;height:24px;vertical-align:-6px;margin-right:7px}
.emo-btn{width:24px;height:24px;pointer-events:none}
.ico{width:18px;height:18px;display:block;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}


/* ── hand-drawn marks ───────────────────────────── */
.mark{position:relative;display:inline-block;white-space:nowrap}
.mark-svg{position:absolute;pointer-events:none;overflow:visible;fill:none;stroke:var(--mark);stroke-width:2.6px;stroke-linecap:round;
  clip-path:inset(-20% 120% -20% -20%);transition:clip-path .9s cubic-bezier(.6,.05,.3,1) .15s}
.mark-svg path{vector-effect:non-scaling-stroke}
.mark-circle .mark-svg{top:-38%;left:-16%;width:132%;height:176%}
.mark-underline .mark-svg{left:-3%;bottom:-8px;width:106%;height:12px}
.mark.drawn .mark-svg{clip-path:inset(-20% -20% -20% -20%)}

/* ── flip cards ("test yourself") ───────────────── */
.node.flip,.node.flip:active{width:260px;height:160px;perspective:900px;cursor:pointer}
.flip-in{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.flip.flipped .flip-in{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px;border:2px solid var(--ink);
  padding:14px 16px 12px;display:flex;flex-direction:column;box-shadow:3px 4px 0 var(--ink)}
.flip .front{background:var(--card)}
.flip .back{background:var(--ink);color:#fff;transform:rotateY(180deg);justify-content:center}
.flip .tag{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:6px}
.flip p{margin:0;font-family:var(--font-heading);font-weight:700;font-size:16.5px;line-height:1.25}
.flip .back p{font-size:18px}
.flip .back b{color:var(--yellow)}
.flip .flip-cta{margin-top:auto;font-family:var(--font-hand);font-size:19px;color:var(--ink-3)}

/* ── video card with chapter chips ──────────────── */
.videocard{width:600px;background:var(--card);border:1.5px solid var(--card-edge);border-radius:14px;padding:14px;box-shadow:0 5px 0 rgba(60,45,25,.10)}
.videocard .vc-head{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:4px 2px 10px}
.videocard .vc-screen{aspect-ratio:16/9;min-height:280px;border-radius:9px;background:#171512;color:#EDE9DF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;text-align:center;padding:0 30px}
.videocard .vc-emo{width:76px;height:76px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4))}
.videocard .vc-screen b{font-family:var(--font-heading);font-size:20px}
.videocard .vc-screen small{font-size:13px;color:#B9B1A4}
.videocard iframe{width:100%;height:100%;border:0;display:block}
.videocard .vc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ts{font-family:var(--font-mono);font-size:12px;font-weight:700;padding:0 14px;min-height:40px;display:inline-flex;align-items:center;border-radius:999px;border:1.5px solid var(--card-edge);background:#fff;color:#171512;cursor:pointer} /* white chip: readable on dark boards too. 40px because chips sit INSIDE the zoomable canvas and scale with it: at the 60% minimum open zoom (canvas.js MIN_OPEN) a 32px chip lands at 19px on screen, under the 24px tap floor. */
.ts:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.ts i{font-style:normal;color:var(--mark);margin-right:5px}

/* ── toolbar tool modes (Select vs Move) ────────── */
.side-toolbar .tool-modes{display:flex;flex-direction:column;gap:5px;padding-bottom:7px;margin-bottom:5px;border-bottom:1.5px solid var(--border)}
.side-toolbar button.active{
  background:#171512!important;
  color:#FFFFFF!important;
  border-color:#171512!important;
  box-shadow:0 3px 8px rgba(23,21,18,0.28)!important;
}
.side-toolbar button.active svg{
  stroke:#FFFFFF!important;
}
.side-toolbar button svg{
  transition:stroke .12s ease;
}
.side-toolbar button:not(.active):hover svg{
  stroke:var(--card)!important;
}

/* ── Tour Complete / Unlocked Gradient CTA on Download Button ── */
.side-toolbar button#dl.dl-gradient-cta {
  background: linear-gradient(135deg, #FF4500, #FF0080, #7928CA, #0070F3) !important;
  background-size: 300% 300% !important;
  animation: dlGradientShift 3s ease infinite, dlPulseGlow 1.8s ease-in-out infinite alternate !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 0 16px rgba(255, 0, 128, 0.55), 0 4px 12px rgba(0,0,0,0.25) !important;
  color: #FFFFFF !important;
  z-index: 25;
}
.side-toolbar button#dl.dl-gradient-cta img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)) brightness(1.2) !important;
}
@keyframes dlGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes dlPulseGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 0, 128, 0.4), 0 3px 8px rgba(0,0,0,0.2);
  }
  100% {
    transform: scale(1.15);
    box-shadow: 0 0 22px rgba(0, 112, 243, 0.8), 0 6px 16px rgba(121, 40, 202, 0.45);
  }
}

/* ── entrance ───────────────────────────────────── */
@keyframes nimIn{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes nimPop{0%{transform:scale(.4)}55%{transform:scale(1.35) rotate(-10deg)}100%{transform:scale(1)}}
@keyframes nimPulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}40%{box-shadow:0 0 0 16px rgba(229,72,77,.28)}}
@keyframes nimRise{from{transform:translateY(14px) scale(.96)}to{transform:none}}
.nim-enter{animation:nimRise .45s cubic-bezier(.2,.8,.25,1) both;animation-delay:var(--d,0ms)} /* no fade: invisible nodes delay LCP */
.nim-pulse{animation:nimPulse 1s ease-out 2}

/* ── selection, tour focus ──────────────────────── */
.nim-sel{outline:2.5px solid #2F80ED!important;outline-offset:5px!important;box-shadow:0 0 0 1px rgba(47,128,237,0.3)!important}
.nim-focus{outline:3px solid var(--mark);outline-offset:9px;border-radius:12px}

/* ── reactions ──────────────────────────────────── */
.rx-pill{position:absolute;right:-10px;bottom:-15px;display:flex;gap:1px;background:var(--card);border:1.5px solid var(--card-edge);border-radius:999px;padding:3px 7px;box-shadow:0 2px 0 rgba(60,45,25,.12);z-index:4}
.rx-pill img{width:19px;height:19px}
#nimRx{position:fixed;z-index:60;transform:translateX(-50%);display:flex;gap:2px;background:var(--card);border:1.5px solid var(--card-edge);border-radius:999px;padding:5px 7px;box-shadow:0 8px 22px rgba(23,21,18,.18)}
#nimRx button{width:40px;height:40px;border:0;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s}
#nimRx button img{width:30px;height:30px;pointer-events:none}
#nimRx button:hover{transform:translateY(-3px) scale(1.15)}
#nimRx button.on{background:var(--yellow)}
#nimRx button.pop img{animation:nimPop .45s ease-out}

/* ── stickers ───────────────────────────────────── */
#nimPalette{position:fixed;z-index:60;display:grid;grid-template-columns:repeat(6,42px);gap:3px;background:var(--card);border:1.5px solid var(--card-edge);border-radius:14px;padding:8px;box-shadow:0 10px 26px rgba(23,21,18,.18)}
#nimPalette button{width:42px;height:42px;border:0;border-radius:9px;background:transparent;cursor:pointer;transition:transform .12s}
#nimPalette button:hover{background:var(--ground);transform:scale(1.15)}
#nimPalette img{width:32px;height:32px;pointer-events:none}
.stickerdrop img{filter:drop-shadow(0 6px 4px rgba(40,30,15,.25));animation:nimPop .5s ease-out}

/* ── floating UI: hint below Explore/Unlock pill on top-right ── */
#hint{left:auto;right:16px;bottom:auto;top:calc(var(--header-h,0px) + 72px);transform:none;width:320px;max-width:calc(100vw - 32px);text-align:left;box-shadow:var(--ui-shadow);transition:opacity .3s;border-radius:12px;padding:12px 14px}
body.linear #hint{top:auto;bottom:calc(var(--footer-h,0px) + 74px);right:16px}
#hint.gone{opacity:0;pointer-events:none}
#hint .hint-row{display:flex;justify-content:flex-start;gap:6px;margin-top:8px}
#hint .hint-row button{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;padding:4px 12px 4px 5px;cursor:pointer}
#hint .hint-row button img{width:22px;height:22px}
#hint .hint-row button[data-act="hide-hint"]{background:transparent;color:#C9C9C4;border-color:var(--card-edge);padding:4px 9px} /* the hint panel is near-black: --ink-3 read 3.3:1 here */
body.has-minimap #note{right:232px}
#note{padding:4px}
#note .note-toggle{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-2);background:transparent;border:0;padding:3px 8px 3px 4px;cursor:pointer}
#note .note-toggle img{width:22px;height:22px}
#note .note-body{display:none;padding:4px 10px 8px}
#note.open .note-body{display:block}
body.has-minimap #nimNotesBtn{bottom:calc(var(--footer-h,0px) + 162px)}
body.has-minimap #nimNotesPanel{bottom:calc(var(--footer-h,0px) + 214px)}

#nimToast{
  position:fixed;
  left:auto;
  right:16px;
  top:calc(var(--header-h,0px) + 114px);
  z-index:70;
  transform:translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .24s cubic-bezier(.2,.8,.25,1),transform .24s cubic-bezier(.2,.8,.25,1);
  background:rgba(23,21,18,.94);
  color:#fff;
  border:1.5px solid rgba(255,232,166,0.22);
  border-radius:12px;
  padding:10px 14px;
  font-size:12px;
  font-weight:500;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  box-shadow:0 12px 28px rgba(0,0,0,.4);
  width:236px;
  max-width:calc(100vw - 32px);
  box-sizing:border-box;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
#nimToast.on{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
body.touring #nimToast{
  top:calc(var(--header-h,0px) + 72px);
}
#nimToast .toast-title{display:flex;align-items:center;gap:7px;font-weight:700;font-size:12.5px;color:#FFE8A6}
#nimToast .toast-msg{font-size:11.5px;line-height:1.4;color:#D8D3C7}
#nimToast .toast-action-btn{
  width:100%;
  border:0;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:700;
  background:var(--yellow);
  color:var(--ink);
  cursor:pointer;
  text-align:center;
  transition:all .15s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
#nimToast .toast-action-btn:hover{
  transform:scale(1.02);
  filter:brightness(1.05);
}
#nimToast input{font-size:11.5px;font-family:var(--font-mono),monospace;width:100%;box-sizing:border-box;padding:5px 7px;border-radius:6px;border:0}

/* ── Harmonized Top-Right & Compact Progress Notification Card ── */
#nimProgress{
  position:fixed;
  right:16px;
  top:calc(var(--header-h,0px) + 14px);
  z-index:30;
  width:236px;
  max-width:calc(100vw - 32px);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  background:rgba(23,21,18,.92);
  color:#fff;
  border:1.5px solid rgba(255,232,166,0.22);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 12px 28px rgba(0,0,0,.38);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:border-color .3s ease, background .3s ease;
}
#nimProgress.full{
  border-color:#FFD02F;
  background:rgba(23,21,18,.95);
  box-shadow:0 14px 32px rgba(0,0,0,.45), 0 0 16px rgba(255,208,47,.18);
  gap:7px;
}
#nimProgress.full .nim-prog-bar-wrap{
  display:none!important;
}
.nim-prog-top{
  display:flex;
  align-items:center;
  gap:8px;
}
.nim-prog-icon{
  width:24px;
  height:24px;
  flex-shrink:0;
}
.nim-prog-head{
  flex:1;
  min-width:0;
}
.nim-prog-title{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#FFE8A6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nim-prog-subtitle{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:#D8D3C7;
  margin-top:1px;
}
.nim-prog-bar-wrap{
  width:100%;
}
#nimProgress .bar{
  display:block;
  width:100%;
  height:5px;
  border-radius:999px;
  background:#2E2A24;
  overflow:hidden;
}
#nimProgress .bar i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, #E5A93C, #7BC47F);
  border-radius:999px;
  transition:width .4s ease;
}
.nim-prog-action-btn{
  width:100%;
  border:0;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:700;
  background:#E5A93C;
  color:#171512;
  cursor:pointer;
  text-align:center;
  transition:all .15s ease;
  box-shadow:0 2px 6px rgba(229,169,60,.3);
}
.nim-prog-action-btn:hover{
  background:#FFCF70;
  transform:scale(1.02);
}
.nim-prog-action-btn.dl-unlocked-btn{
  background:#FFD02F!important;
  color:#171512!important;
  font-weight:700!important;
  font-size:11.5px!important;
  padding:7px 11px!important;
  box-shadow:0 3px 12px rgba(255,208,47,.4)!important;
  border:1.5px solid #FFBE1A!important;
}
.nim-prog-action-btn.dl-unlocked-btn:hover{
  background:#FFE066!important;
  transform:translateY(-1px) scale(1.01)!important;
  box-shadow:0 4px 16px rgba(255,208,47,.55)!important;
}
.nim-prog-action-btn.dl-unlocked-btn:active{
  transform:translateY(0) scale(1)!important;
}

#nimTourBar{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:95;display:flex;align-items:center;gap:6px;background:#171512;color:#fff;border-radius:999px;padding:6px 8px;box-shadow:0 14px 36px rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,0.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#nimTourBar button{width:38px;height:38px;border-radius:50%;border:0;background:#2E2A24;color:#fff;font-size:20px;line-height:1;cursor:pointer}
#nimTourBar button:hover{background:var(--yellow);color:var(--ink)}
#nimTourBar .t{width:320px;padding:0 8px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nimTourBar .t b{font-family:var(--font-mono);font-size:11px;color:var(--yellow);margin-right:7px}

/* ── Tour Section Clustering & Dimming ── */
body.touring #canvas > .node.nim-cluster-dimmed{
  opacity:0.16!important;
  filter:blur(0.4px);
  transition:opacity .35s ease, filter .35s ease;
  pointer-events:none;
}
body.touring #canvas > .node.nim-cluster-active{
  opacity:1!important;
  filter:none!important;
  z-index:10;
  box-shadow:0 0 0 2px rgba(229,169,60,.35), 0 16px 36px rgba(0,0,0,.15);
}
body.touring #wires .wire-path{
  opacity:0.2;
  transition:opacity .35s ease;
}
.tour-chapter-toggle{
  background:transparent;
  border:0;
  color:#FFFFFF;
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border-radius:6px;
  transition:background .15s ease;
}
.tour-chapter-toggle:hover{
  background:rgba(255,255,255,.12);
  color:#FFE8A6;
}
.tour-chapter-toggle b{
  color:var(--yellow);
  font-family:var(--font-mono);
}
.tour-chapter-toggle .ch-arrow{
  font-size:10px;
  opacity:0.8;
}

/* ── Chapter Selector Modal ── */
#nimChapterMenu{
  position:fixed;
  inset:0;
  z-index:85;
  background:rgba(23,21,18,.55);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  animation:nimIn .2s ease-out;
}
.chapter-menu-box{
  background:#171512;
  border:1.5px solid #E5A93C;
  border-radius:16px;
  width:min(440px, 92vw);
  padding:18px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  color:#F5EFE6;
}
.chapter-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:15px;
  font-weight:700;
  color:#FFE8A6;
  margin-bottom:4px;
}
.chapter-close-btn{
  background:#2E2A24;
  border:0;
  border-radius:50%;
  width:28px;
  height:28px;
  color:#D8D3C7;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .12s;
}
.chapter-close-btn:hover{
  background:#E5A93C;
  color:#171512;
}
.chapter-menu-sub{
  font-size:12px;
  color:#A9A296;
  margin-bottom:14px;
}
.chapter-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:56vh;
  overflow-y:auto;
}
.chapter-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:#231F1A;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:9px 12px;
  color:#F5EFE6;
  font:inherit;
  font-size:13px;
  cursor:pointer;
  text-align:left;
  transition:all .15s ease;
}
.chapter-item:hover, .chapter-item.active{
  background:#2E2820;
  border-color:#E5A93C;
  color:#FFE8A6;
  transform:translateX(3px);
}
.chapter-item .ch-badge{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  color:#E5A93C;
  background:#171512;
  padding:2px 7px;
  border-radius:6px;
}
.chapter-item .ch-title{
  flex:1;
  font-weight:600;
}
.chapter-item .ch-count{
  font-size:11px;
  color:#8B8377;
}

/* ── First-Visit Navigation Onboarding Callout ── */
#nimNavTip{
  position:fixed;
  left:68px;
  top:calc(var(--header-h, 0px) + 72px);
  z-index:70;
  width:260px;
  background:#171512;
  border:1.5px solid #E5A93C;
  border-radius:12px;
  padding:12px 14px;
  color:#F5EFE6;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  animation:nimIn .25s ease-out;
}
#nimNavTip .nav-tip-arrow{
  position:absolute;
  left:-7px;
  top:16px;
  width:12px;
  height:12px;
  background:#171512;
  border-left:1.5px solid #E5A93C;
  border-bottom:1.5px solid #E5A93C;
  transform:rotate(45deg);
}
#nimNavTip.gone{
  opacity:0;
  transform:translateX(-10px);
  transition:all .25s ease;
}
.nav-tip-head{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:#FFE8A6;
  margin-bottom:6px;
}
.nav-tip-body{
  font-size:11.5px;
  line-height:1.45;
  color:#D8D3C7;
  margin-bottom:10px;
}
.nav-tip-dismiss-btn{
  width:100%;
  border:0;
  border-radius:999px;
  padding:6px 12px;
  font-size:11px;
  font-weight:700;
  background:#E5A93C;
  color:#171512;
  cursor:pointer;
  transition:all .15s ease;
}
.nav-tip-dismiss-btn:hover{
  background:#FFCF70;
}

/* ── Admin / Creator Arrangement Mode ── */
body.admin-mode .node{
  cursor:grab!important;
  transition:none!important;
}
body.admin-mode .node:hover{
  outline:2px dashed #E5A93C!important;
}
body.admin-mode .admin-selected{
  outline:2.5px solid #E5A93C!important;
  box-shadow:0 0 20px rgba(229,169,60,.45)!important;
  position:absolute!important;
}
.admin-resize{
  position:absolute;
  bottom:0;
  right:0;
  width:18px;
  height:18px;
  cursor:nwse-resize;
  background:linear-gradient(135deg, transparent 45%, #E5A93C 45%);
  border-bottom-right-radius:4px;
  z-index:100;
  pointer-events:auto;
  transition:transform .12s ease;
}
.admin-resize:hover{
  background:linear-gradient(135deg, transparent 35%, #FFD02F 35%);
  transform:scale(1.2);
  transform-origin:bottom right;
}
.nim-admin-bar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  top:calc(var(--header-h, 0px) + 14px);
  z-index:75;
  display:flex;
  align-items:center;
  gap:14px;
  background:#171512;
  border:1.5px solid #E5A93C;
  border-radius:999px;
  padding:6px 18px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  animation:nimIn .25s ease-out;
}
.admin-badge{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:#FFE8A6;
  white-space:nowrap;
}
.admin-pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#E5A93C;
  box-shadow:0 0 8px #E5A93C;
  animation:adminBlink 1.4s infinite;
}
@keyframes adminBlink{ 0%,100%{opacity:1} 50%{opacity:.3} }
.admin-hint{
  font-size:11.5px;
  color:#D8D3C7;
  white-space:nowrap;
}
.admin-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.admin-btn{
  border:0;
  border-radius:999px;
  padding:5px 12px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  background:#2E2A24;
  color:#D8D3C7;
  cursor:pointer;
  transition:all .15s ease;
}
.admin-btn:hover{
  background:#3E3830;
  color:#FFFFFF;
}
.admin-btn-accent{
  background:#E5A93C;
  color:#171512;
}
.admin-btn-accent:hover{
  background:#FFCF70;
  transform:scale(1.04);
}
.nim-admin-toggle-btn{
  border-color:rgba(229,169,60,.4)!important;
  color:#E5A93C!important;
  transition:all .15s ease!important;
}
.nim-admin-toggle-btn:hover, body.admin-mode .nim-admin-toggle-btn{
  background:#E5A93C!important;
  color:#171512!important;
  box-shadow:0 0 12px rgba(229,169,60,.5)!important;
}

/* ── Floating Miro Contextual Property Bar ── */
#nimPropBar{
  position:fixed;
  transform:translateX(-50%);
  z-index:75;
  display:flex;
  align-items:center;
  gap:7px;
  background:#171512;
  border:1.5px solid rgba(229,169,60,.4);
  border-radius:10px;
  padding:5px 9px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
}
.prop-group{
  display:flex;
  align-items:center;
  gap:4px;
}
.prop-sep{
  width:1px;
  height:18px;
  background:rgba(255,255,255,.14);
}
.prop-color-btn{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,.2);
  cursor:pointer;
  transition:transform .12s;
}
.prop-color-btn:hover{
  transform:scale(1.22);
}
.prop-font-btn, .prop-size-btn, .prop-act-btn{
  background:#2E2A24;
  border:0;
  border-radius:6px;
  color:#D8D3C7;
  font-size:11px;
  font-weight:600;
  padding:3px 7px;
  cursor:pointer;
  transition:all .12s;
}
.prop-font-btn:hover, .prop-size-btn:hover, .prop-act-btn:hover, .prop-size-btn.active{
  background:#E5A93C;
  color:#171512;
}
.prop-act-btn.prop-del:hover{
  background:#E05656;
  color:#FFF;
}

.prop-shape-btn, .prop-border-btn{
  background:#2E2A24;
  border:0;
  border-radius:6px;
  color:#D8D3C7;
  font-size:12px;
  padding:3px 6px;
  cursor:pointer;
  transition:all .12s;
  line-height:1;
}
.prop-shape-btn:hover, .prop-border-btn:hover{
  background:#E5A93C;
  color:#171512;
  transform:scale(1.1);
}

/* ── Additional Miro Shapes ── */
.user-rect{
  background:#FFFFFF;
  border:1.5px solid #231F1A;
  border-radius:4px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.user-rect > .txt{
  text-align:center;
  font-weight:600;
  width:100%;
}
.user-roundrect{
  background:#F5F9FF;
  border:1.5px solid #4E7CC4;
  border-radius:24px;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.user-roundrect > .txt{
  text-align:center;
  font-weight:600;
  width:100%;
}
.user-triangle{
  width:160px;
  height:150px;
  background:var(--yellow);
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:18px;
  box-sizing:border-box;
}
.user-triangle > .txt{
  text-align:center;
  font-weight:600;
  font-size:13px;
}
.user-diamond{
  width:140px;
  height:140px;
  background:var(--yellow);
  border:1.5px solid var(--yellow-e);
  transform:rotate(45deg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.user-diamond > .txt{
  transform:rotate(-45deg);
  text-align:center;
  font-weight:600;
  font-size:13.5px;
}
.user-circle{
  border-radius:50%!important;
  background:var(--blue);
  border:1.5px solid var(--blue-e);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.user-circle > .txt{
  text-align:center;
  font-weight:600;
}
.user-miro-card{
  background:#FFFFFF;
  border:1.5px solid #DAD4C7;
  border-radius:10px;
  padding:12px;
}

#nimMini{position:fixed;right:16px;bottom:calc(var(--footer-h,0px) + 16px);z-index:30;width:200px;height:130px;background:rgba(255,255,255,.95);border:1.5px solid var(--card-edge);border-radius:10px;overflow:hidden;cursor:pointer;box-shadow:var(--ui-shadow);touch-action:none}
#nimMini svg{display:block}
.side-toolbar button#nimTour{
  border-color:#E5A93C!important;
  background:#231F1A!important;
  color:#FFE8A6!important;
  box-shadow:0 0 12px rgba(229,169,60,0.35), 0 2px 0 rgba(60,45,25,.10)!important;
  transition:all .15s ease!important;
}
.side-toolbar button#nimTour:hover{
  background:#171512!important;
  box-shadow:0 0 18px rgba(229,169,60,0.65)!important;
  transform:scale(1.1)!important;
}

/* ── lightbox ───────────────────────────────────── */
#canvas > .node.card > svg,img[data-zoom]{cursor:zoom-in}
#nimLightbox{position:fixed;inset:0;z-index:80;background:rgba(23,21,18,.72);display:flex;align-items:center;justify-content:center;padding:4vh 4vw;cursor:zoom-out}
#nimLightbox figure{margin:0;background:var(--card);border-radius:16px;padding:22px;max-width:min(1000px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.35);animation:nimIn .25s ease-out}
#nimLightbox figure > svg{width:min(900px,86vw);max-height:74vh;height:auto;display:block}
#nimLightbox figure > img{width:min(640px,80vw);height:auto;max-height:78vh;object-fit:contain;display:block;border-radius:12px}
#nimLightbox figcaption{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:12px}

/* ── search ─────────────────────────────────────── */
.site-header nav{align-items:center}
#nimSearchBtn{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--card);border:1.5px solid var(--card-edge);border-radius:999px;padding:4px 8px 4px 5px;cursor:pointer}
#nimSearchBtn:hover{border-color:var(--ink);color:var(--ink)}
#nimSearchBtn img{width:22px;height:22px}
#nimSearchBtn kbd,#nimSearch kbd{font-family:var(--font-mono);font-size:9.5px;background:var(--ground);border:1px solid var(--card-edge);border-radius:5px;padding:1px 5px;color:var(--ink-3)}
#nimSearch{position:fixed;inset:0;z-index:90;background:rgba(23,21,18,.45);display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
#nimSearch .box{width:min(640px,92vw);background:var(--card);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden}
#nimSearch .in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1.5px solid #EEE9DD}
#nimSearch .in img{width:30px;height:30px}
#nimSearch input{flex:1;border:0;outline:0;font:500 17px var(--font-body);background:transparent;color:var(--ink)}
#nimSearch .res{max-height:56vh;overflow-y:auto;padding:6px}
#nimSearch .res a{display:flex;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
#nimSearch .res a.on,#nimSearch .res a:hover{background:var(--ground)}
#nimSearch .res img{width:32px;height:32px;flex:none;margin-top:2px}
#nimSearch .res b{display:block;font-family:var(--font-heading);font-size:15px}
#nimSearch .res small{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:2px 0 3px}
#nimSearch .res em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);line-height:1.45}
#nimSearch mark{background:var(--yellow);color:inherit;border-radius:3px;padding:0 1px}
#nimSearch .empty{padding:18px;font-size:13px;color:var(--ink-3)}

/* ── Miro-style unified create menu ─────────────── */
#nimCreateMenu{
  position:fixed;
  left:72px;
  top:120px;
  z-index:85;
  width:250px;
  background:#171512;
  color:#fff;
  border:1.5px solid rgba(255,255,255,0.16);
  border-radius:14px;
  padding:8px;
  box-shadow:0 18px 40px rgba(0,0,0,.38);
  font-family:var(--font-body);
  display:flex;
  flex-direction:column;
  gap:5px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:nimIn .18s cubic-bezier(.2,.8,.25,1);
}
#nimCreateMenu[hidden]{display:none!important}
#nimCreateMenu .nim-menu-title{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#a8a29e;
  padding:4px 8px 2px;
}
#nimCreateMenu .nim-menu-opt{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  padding:9px 11px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  color:#fff;
  cursor:pointer;
  text-align:left;
  transition:all .15s ease;
}
#nimCreateMenu .nim-menu-opt:hover{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.28);
  transform:translateX(3px);
}
#nimCreateMenu .opt-icon{
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  background:rgba(255,255,255,0.08);
  border-radius:8px;
  flex-shrink:0;
}
#nimCreateMenu .opt-info{display:flex;flex-direction:column;gap:1px}
#nimCreateMenu .opt-label{font-size:13px;font-weight:600;color:#fff}
#nimCreateMenu .opt-sub{font-size:11px;color:#a8a29e}

/* ── Highlight once on toolbar create/add button when user tries to edit fixed card ── */
@keyframes highlightOnce {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.85); }
  25% { transform: scale(1.22); box-shadow: 0 0 0 12px rgba(245, 158, 11, 0.45); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 16px rgba(245, 158, 11, 0.2); }
  75% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.1); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.side-toolbar button.highlight-once {
  animation: highlightOnce 1.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
  z-index: 50 !important;
  border-color: #f59e0b !important;
  background: #fffbeb !important;
  color: #b45309 !important;
}
.side-toolbar button.highlight-once svg {
  stroke: #b45309 !important;
}

/* ── Interactive subcategory pills & hubs ── */
#core .pill {
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s cubic-bezier(.2,.8,.25,1);
}
#core .pill:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.node.hub {
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s cubic-bezier(.2,.8,.25,1);
}
.node.hub:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

@media (max-width:760px){
  #nimNavTip{display:none!important}
  #nimMini,#nimProgress,#nimTourBar,#hint,#nimPalette,#nimRx,#nimCreateMenu{display:none!important}
  #nimSearchBtn span,#nimSearchBtn kbd{display:none}
  body.has-minimap #nimNotesBtn{bottom:18px}
  body.has-minimap #nimNotesPanel{bottom:70px}
  .node.flip{height:170px}
  .decor{display:none}
  .emo-sticker{right:-6px}
}
@media (prefers-reduced-motion:reduce){
  .nim-enter,.decor,.stickerdrop img,#nimRx button.pop img,.nim-pulse,.side-toolbar button.highlight-once{animation:none!important}
  .mark-svg{clip-path:none!important}
}


/* ── notifications: one stack, one size (2026-09-16) ── */
#nimToast{display:none!important}
#nimToasts{position:fixed;top:calc(var(--header-h,0px) + 14px);left:50%;transform:translateX(-50%);z-index:96;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px));pointer-events:none}
body.touring #nimToasts{top:calc(var(--header-h,0px) + 74px)}
.nim-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 8px 8px 12px;box-sizing:border-box;background:rgba(23,21,18,.96);color:#fff;border:1px solid rgba(255,232,166,.18);border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.28);font:500 12.5px/1.35 var(--font-body);animation:ntIn .2s ease-out}
.nim-toast.out{opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s}
@keyframes ntIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nt-icon{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.nim-toast img{width:24px!important;height:24px!important;max-width:24px!important;object-fit:contain}
.nt-text{flex:1;min-width:0}
.nt-text b{display:block;font-size:12.5px;font-weight:700;color:#FFE8A6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-text span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:#D8D3C7}
.nt-text input{width:100%;box-sizing:border-box;margin-top:3px;padding:4px 6px;border:0;border-radius:6px;font:11.5px var(--font-mono),monospace}
.nt-act{flex:none;border:0;border-radius:999px;padding:5px 11px;background:var(--yellow);color:var(--ink);font:700 11px var(--font-body);cursor:pointer;white-space:nowrap}
.nt-x{flex:none;width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:#8B8377;font-size:12px;cursor:pointer}
.nt-x:hover{background:#2E2A24;color:#fff}

/* ── guided tour bar lives inside the board, under the header ── */
#nimTourBar{top:calc(var(--header-h,0px) + 12px);bottom:auto}

/* ── admin text editing ── */
body.admin-mode .admin-editing{outline:2px dashed #E5A93C;outline-offset:3px;cursor:text;user-select:text;-webkit-user-select:text}

/* ── download gate ── */
#leadCard{position:relative;width:min(420px,92vw);padding:26px 26px 20px;border-radius:18px;box-shadow:0 24px 60px rgba(23,21,18,.28);box-sizing:border-box}
#leadCard h2{font:700 21px/1.2 var(--font-heading);margin:4px 36px 6px 0}
#leadCard p.lead-sub{font-size:13.5px;color:var(--ink-2);margin:0 0 16px;line-height:1.5}
.lead-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--ink-3);font-size:14px;cursor:pointer}
.lead-x:hover{background:var(--ground);color:var(--ink)}
.lead-kicker{font:700 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lead-field{display:block;margin-bottom:4px}
.lead-field span{display:block;font:600 12px var(--font-body);margin-bottom:5px}
#leadCard .lead-field input{width:100%;padding:11px 12px;border:1.5px solid var(--card-edge);border-radius:10px;font:15px var(--font-body);margin:0;box-sizing:border-box;background:#fff}
.lead-msg{min-height:18px;font-size:12.5px;margin:4px 0 8px;color:var(--ink-2)}
.lead-msg.err{color:#B23A3A}
.lead-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ink-2);margin:0 0 10px;cursor:pointer}
#leadCard .lead-check input{width:17px;height:17px;margin:1px 0 0;padding:0;flex:none;accent-color:#171512}
.lead-check a{color:var(--ink);font-weight:600}
.lead-primary{width:100%;margin-top:8px;padding:12px 16px;border:0;border-radius:11px;background:#171512;color:#fff;font:700 14px var(--font-body);cursor:pointer}
.lead-primary:hover{background:#2E2A24}
.lead-primary:disabled{opacity:.6;cursor:progress}
#leadCard p.lead-fine{margin:10px 0 0;font-size:11.5px;color:var(--ink-3);text-align:center}
.lead-emoji{font-size:34px;line-height:1;margin-bottom:8px}
.lead-wait{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:10px;background:var(--ground);font-size:13px;color:var(--ink-2)}
.lead-spin{width:14px;height:14px;border:2px solid var(--card-edge);border-top-color:var(--ink);border-radius:50%;animation:leadSpin .8s linear infinite;flex:none}
@keyframes leadSpin{to{transform:rotate(360deg)}}
.lead-links{display:flex;gap:16px;margin-top:14px}
.lead-link{border:0;background:none;padding:0;font:600 13px var(--font-body);color:var(--ink);text-decoration:underline;cursor:pointer}
.lead-step[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){ .lead-spin,.nim-toast{animation:none} }
@media (max-width:760px){ #nimToasts{top:auto;bottom:78px} } /* above the Notes button, clear of the header */
@media (max-width:760px){ .videocard .vc-screen{min-height:0;padding:0 16px} }

/* headings for crawlers (section labels = h2, card titles = h3) keep their board styling */
.node h2.nh{font:inherit;margin:0;padding:0;display:inline;letter-spacing:inherit;color:inherit;text-transform:inherit;line-height:inherit}
.col-head h2.name.nh{display:inline}
.node h3.ft{margin-top:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Card and sticky titles, site-wide: readable at a glance (Aman, 2026-09-19). Was 9-9.5px. */
.sticky .tag{font-size:20px;letter-spacing:.1em;opacity:.85;margin-bottom:12px;line-height:1.2}
.card .hd{font-size:21px;letter-spacing:.1em;margin-bottom:16px;gap:10px;line-height:1.2}
.card .hd .dot{width:14px;height:14px}
.thumbcard .tag{font-size:15px;letter-spacing:.08em;margin-bottom:8px;line-height:1.25}
.flip .tag{font-size:15px}
@media (max-width:760px){
  .sticky .tag{font-size:16px} .card .hd{font-size:17px} .thumbcard .tag,.flip .tag{font-size:13px}
}
#canvas > .node.row-label{font-size:15px;line-height:1.25}

/* ── one notice column (2026-09-19): every notice the same width, style and alignment ── */
#nimStack{position:fixed;right:16px;top:calc(var(--header-h,0px) + 14px);z-index:60;width:340px;max-width:calc(100vw - 32px);
  display:flex;flex-direction:column;gap:10px;pointer-events:none}
body.touring #nimStack{top:calc(var(--header-h,0px) + 74px)}
#nimStack > *{pointer-events:auto}
#nimStack > #nimToasts{position:static;transform:none;width:100%;left:auto;top:auto;gap:10px;pointer-events:none}
#nimStack #nimProgress,#nimStack #nimNavTip,#nimStack #hint,#nimStack .nim-toast{
  position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;max-width:none;box-sizing:border-box;margin:0;
  background:rgba(23,21,18,.96);color:#F5EFE6;border:1.5px solid rgba(255,232,166,.28);border-radius:14px;
  padding:12px 14px;box-shadow:0 12px 28px rgba(0,0,0,.32);font-family:var(--font-body);font-size:13px;line-height:1.45;text-align:left;
  backdrop-filter:none;-webkit-backdrop-filter:none;animation:nimIn .25s ease-out}
#nimStack .nim-toast{min-height:64px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;column-gap:12px;row-gap:10px}
#nimStack .nim-toast .nt-icon{grid-column:1;grid-row:1}#nimStack .nim-toast .nt-text{grid-column:2;grid-row:1}
#nimStack .nim-toast .nt-x{grid-column:3;grid-row:1;align-self:start}#nimStack .nim-toast .nt-act{grid-column:2;grid-row:2;justify-self:start}
#nimStack .nt-icon,#nimStack .nim-prog-icon{width:30px;height:30px;font-size:22px}
#nimStack .nim-toast img{width:30px!important;height:30px!important;max-width:30px!important}
#nimStack .nt-text b,#nimStack .nim-prog-title,#nimStack .nav-tip-head b{font-size:14px;font-weight:700;color:#FFE8A6;white-space:normal}
#nimStack .nt-text span,#nimStack .nim-prog-subtitle,#nimStack .nav-tip-body,#nimStack #hint{font-size:13px;color:#D8D3C7;font-family:var(--font-body)}
#nimStack .nt-text span{-webkit-line-clamp:3}
#nimStack #hint b{color:#FFE8A6}
#nimStack .nav-tip-arrow{display:none}
#nimStack #nimProgress.full{border-color:#FFD02F}
#nimStack .gone{opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none}
#nimStack .nt-act,#nimStack .nav-tip-dismiss-btn,#nimStack #hint .hint-row button,#nimStack .nim-prog-action-btn{font:700 12.5px var(--font-body);border-radius:999px;padding:7px 12px}
#nimStack .nt-act{background:#FFE8A6;color:#171512;border:0;cursor:pointer;flex:none}
@media (max-width:760px){
  #nimStack{top:auto;bottom:78px;left:16px;right:16px;width:auto}
}
/* the download button after unlock / tour end: a pulsing ring you can't miss */
.side-toolbar button#dl.dl-attention{outline:3px solid #FFD02F;outline-offset:3px;animation:dlGradientShift 3s ease infinite,dlRing 1.1s ease-out infinite!important}
@keyframes dlRing{0%{box-shadow:0 0 0 0 rgba(255,208,47,.75)}100%{box-shadow:0 0 0 18px rgba(255,208,47,0)}}
@media (prefers-reduced-motion:reduce){.side-toolbar button#dl.dl-attention{animation:none!important}}

/* Home + Learnings are static pages: no zoom controls (2026-09-19) */
.static-page #zoomIn,.static-page #zoomOut,.static-page #zoomval,.static-page #fit,.static-page #wheelMode{display:none!important}

/* Definition sentence geo_layer.py puts at the start of each board's intro (2026-09-19): its own line, above the tagline */
.sub .def{display:block;margin-bottom:.5em}
.lead-join{margin:14px 0 4px}

/* Phone progress + download bar (explore.js #nimPhoneBar), 2026-09-20 ICP crawl: on phones the toolbar and
   progress panel don't exist, so visitors had no way to download a board. */
#nimPhoneBar{display:none}
@media (max-width:760px){
  #nimPhoneBar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:950;gap:12px;align-items:center;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:#171512;color:#F6F4EF;box-shadow:0 -6px 20px rgba(0,0,0,.18)}
  #nimPhoneBar .pb-prog{flex:1;min-width:0;display:grid;gap:6px}
  #nimPhoneBar .pb-txt{font:600 12.5px/1.3 var(--font-body);color:#D8D3C7}
  #nimPhoneBar .bar{display:block;height:5px;border-radius:3px;background:#3A352E;overflow:hidden}
  #nimPhoneBar .bar i{display:block;height:100%;background:var(--yellow,#F4C93C);border-radius:3px;transition:width .3s ease}
  #nimPhoneBar .pb-dl{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:10px;background:#3A352E;color:#B9B1A4;font:700 13.5px var(--font-body)}
  #nimPhoneBar.ready .pb-dl{background:var(--yellow,#F4C93C);color:#171512}
  body.has-phonebar .site-footer{padding-bottom:84px}
  html body.has-phonebar #nimNotesBtn{bottom:84px}
  body.has-phonebar #nimToasts{bottom:150px}
}

/* Readability floor, 2026-09-20 ICP crawl: nothing a visitor reads under 12px, header/footer links >= 24px tall. */
.site-header nav a{font-size:12.5px;display:inline-block;padding:6px 2px}
.site-footer h4{font-size:12px}
.site-footer p{font-size:13px}
.site-footer .badge-item span{font-size:12px;letter-spacing:.02em}
.site-footer .bottom{font-size:12.5px}
.site-footer .bottom a{padding:5px 0}
.site-footer .nl-form button{font-size:13px}
.site-footer .nl-msg,.site-footer .nl-msg.ok{font-size:12.5px}
.site-footer .nl-msg a{display:inline-block;padding:4px 0}
#nimSearchBtn{font-size:12px}
#nimSearchBtn kbd,#nimSearch kbd{font-size:11.5px}
#zoomval{font-size:12px;color:#48423B}
#note .note-toggle{font-size:12px}
html body #nimNotesBtn{font-size:12.5px}
/* the bottom link row must wrap on phones: unwrapped, it widened the layout to 434px and pushed fixed bars off screen */
.site-footer .bottom{flex-wrap:wrap;row-gap:4px}
.site-footer .bottom .links{flex-wrap:wrap;column-gap:14px;row-gap:2px;min-width:0}

/* Keyboard focus must be visible. The search input cleared its outline with nothing in its place,
   and the results had no focus style at all, so a keyboard user could not tell where they were
   (WCAG 2.4.7). The flip cards became real buttons in explore.js and need a focus ring too. */
#nimSearch input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#nimSearch .res a:focus-visible,#nimSearch a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;background:var(--ground)}
#canvas > .node.flip:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:14px}
#canvas > .node.hub:focus-visible,#canvas > .node.badge-circle:focus-visible,
#canvas img[data-zoom]:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
/* On the near-black boards an ink outline is invisible; use the page ground instead. */
body.dark-board #canvas > .node.flip:focus-visible,body.dark-board #canvas > .node.hub:focus-visible,
body.dark-board #canvas img[data-zoom]:focus-visible{outline-color:#F6F3EA}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#171512;color:#fff;padding:10px 16px;display:inline-flex;align-items:center;min-height:44px;
  border-radius:0 0 8px 0;font:700 14px var(--font-body);text-decoration:none}
.skip-link:focus{left:0}