/* ============================================================
   Base Bubbl ($BUBBLE) . daydream library in the sky
   palette extracted from the user's cinematic hero scene.
   ============================================================ */

:root{
  --sky-1:#0040c0;
  --sky-2:#0020a0;
  --sky-3:#2080e0;
  --cyan:#6cd2ff;
  --bubbl-blue:#1d3df0;  /* the mascot blue */
  --paper:#f3eedb;
  --paper-2:#ede4c8;
  --cloud:#e8edff;
  --ink:#0a1430;
  --soft:#5a6688;
  --dim:#8e95b3;
  --hair:rgba(255,255,255,0.32);
  --glass-bg:rgba(255,255,255,0.16);
  --glass-edge:rgba(255,255,255,0.6);
  --glow:rgba(108,210,255,0.55);
  --bubbl-glow:rgba(29,61,240,0.55);
  --f-display:'Instrument Serif',Georgia,serif;
  --f-body:'Mona Sans',system-ui,-apple-system,sans-serif;
  --f-mono:'Ubuntu Mono',ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--f-body);font-weight:400;line-height:1.6;
  color:#fff;
  background:
    radial-gradient(ellipse 80% 60% at 50% 28%, var(--sky-3), var(--sky-1) 55%, var(--sky-2) 100%);
  min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:transparent;border:0;color:inherit;cursor:pointer;}

/* ============================================================
   SKY: sun + rays + drifting clouds + cloud floor
   absolute (NOT fixed) and clipped to first viewport so the
   cloud-floor doesn't blur over the archive content below.
   ============================================================ */
.sky{position:absolute;top:0;left:0;right:0;height:100vh;z-index:-1;pointer-events:none;overflow:hidden;}
/* persistent fallback blue gradient below the hero so the archive
   sits on a solid royal-blue, no white-blur creeping in */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 60%, #001270 100%);
}
.sun{
  position:absolute;left:50%;top:30%;width:540px;height:540px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,0.42), rgba(108,210,255,0.16) 50%, transparent 72%);
  filter:blur(2px);
}
.rays{
  position:absolute;left:50%;top:30%;width:1200px;height:1200px;
  transform:translate(-50%,-50%);
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(255,255,255,0.06) 8deg, transparent 16deg,
      transparent 36deg, rgba(255,255,255,0.04) 44deg, transparent 52deg,
      transparent 80deg, rgba(255,255,255,0.06) 88deg, transparent 96deg,
      transparent 130deg, rgba(255,255,255,0.05) 138deg, transparent 146deg,
      transparent 180deg, rgba(255,255,255,0.06) 188deg, transparent 196deg,
      transparent 230deg, rgba(255,255,255,0.04) 238deg, transparent 246deg,
      transparent 280deg, rgba(255,255,255,0.06) 288deg, transparent 296deg,
      transparent 330deg, rgba(255,255,255,0.04) 338deg, transparent 346deg
    );
  opacity:.7;
  animation:rayspin 80s linear infinite;
}
@keyframes rayspin{ to { transform:translate(-50%,-50%) rotate(360deg); } }

.cloud{
  position:absolute;
  background:
    radial-gradient(ellipse 45% 60% at 30% 60%, #ffffff, transparent 70%),
    radial-gradient(ellipse 50% 70% at 65% 50%, #ffffff, transparent 72%),
    radial-gradient(ellipse 35% 55% at 88% 65%, #ffffff, transparent 70%);
  filter:blur(1px);opacity:.85;
}
.cloud-1{ left:-6%;  top:18%; width:380px; height:130px; animation:cloudDrift 70s linear infinite; }
.cloud-2{ right:-6%; top:34%; width:460px; height:160px; animation:cloudDrift 95s -22s linear infinite reverse; }
.cloud-3{ left:8%;   top:62%; width:340px; height:115px; opacity:.95; animation:cloudDrift 110s -8s linear infinite; }
.cloud-4{ right:6%;  top:55%; width:320px; height:110px; opacity:.92; animation:cloudDrift 85s -50s linear infinite reverse; }
.cloud-5{ left:46%;  top:8%;  width:240px; height:80px;  opacity:.7; animation:cloudDrift 130s -65s linear infinite; }
@keyframes cloudDrift{ to { transform:translateX(80px); } }

.cloud-floor{
  position:absolute;left:-5%;right:-5%;bottom:-20%;
  height:50%;
  background:
    radial-gradient(ellipse 22% 80% at 10% 30%, #ffffff, transparent 75%),
    radial-gradient(ellipse 28% 90% at 30% 25%, #ffffff, transparent 75%),
    radial-gradient(ellipse 32% 100% at 52% 18%, #ffffff, transparent 75%),
    radial-gradient(ellipse 26% 90% at 72% 25%, #ffffff, transparent 75%),
    radial-gradient(ellipse 24% 80% at 92% 32%, #ffffff, transparent 75%),
    linear-gradient(180deg, transparent 0%, #ffffff 50%, #ffffff 100%);
  filter:blur(1.5px);
}

/* ============================================================
   BRAND mark (top-left)
   ============================================================ */
.brand{
  position:fixed;top:22px;left:24px;z-index:20;
  display:flex;align-items:center;gap:10px;
  padding:7px 14px 7px 8px;
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-edge);
  border-radius:999px;
  text-decoration:none;
  transition:transform .14s ease,box-shadow .14s ease;
}
.brand:hover{transform:translateY(-2px);box-shadow:0 8px 22px -10px rgba(0,0,0,.4);}
.brand-mark{width:30px;height:30px;}
.brand-text{display:flex;flex-direction:column;line-height:1.05;color:#fff;}
.brand-text b{font-family:var(--f-display);font-weight:400;font-size:1.04rem;letter-spacing:.005em;}
.brand-text i{font-family:var(--f-mono);font-style:normal;font-size:.66rem;opacity:.78;letter-spacing:.04em;}

/* ============================================================
   SOCKETS (3 glass-bubble destinations in 3 different zones)
   ============================================================ */
.socket{
  position:fixed;z-index:18;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .18s ease,filter .18s ease;
}
.socket:hover{transform:translateY(-3px);filter:brightness(1.1);}
.socket-x  { left:24px;  top:50%;        transform:translateY(-40%); animation:socketBob 7s ease-in-out infinite; }
.socket-dex{ right:32px; top:24px; }
.socket-buy{ right:32px; bottom:30px; }
.socket-x:hover  { transform:translateY(calc(-40% - 3px)); }
@keyframes socketBob{ 50%{ transform:translateY(calc(-40% + 8px)); } }

.socket-glass{
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.06) 100%);
  border:1.5px solid var(--glass-edge);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    inset -6px -8px 14px rgba(20,60,180,0.25),
    0 6px 18px -6px rgba(20,40,120,0.45);
  color:#fff;
}
.socket-ico{width:24px;height:24px;}
.socket-label{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;
  color:#fff;background:rgba(10,20,48,0.4);padding:2px 8px;border-radius:999px;
}
.socket.is-disabled{opacity:.55;cursor:default;pointer-events:none;}

/* ============================================================
   STAGE: knowledge-graph layout
   ============================================================ */
.stage{
  position:relative;
  max-width:1400px;height:min(900px,92vh);
  margin:0 auto;
  padding:90px clamp(20px,4vw,60px) 0;
}

/* dashed SVG link lines from category-bubbles to mascot center */
.links{
  position:absolute;inset:90px clamp(20px,4vw,60px) 0;
  width:calc(100% - 2 * clamp(20px,4vw,60px));
  height:calc(100% - 90px);
  pointer-events:none;
}
.links .link{
  stroke:rgba(255,255,255,0.45);
  stroke-width:1.4;
  stroke-dasharray:3 5;
  opacity:0;
  animation:linkIn .6s ease forwards;
}
.links .link[data-cat="community"] { animation-delay:.40s; }
.links .link[data-cat="governance"]{ animation-delay:.50s; }
.links .link[data-cat="devs"]      { animation-delay:.60s; }
.links .link[data-cat="bridges"]   { animation-delay:.70s; }
.links .link[data-cat="dexs"]      { animation-delay:.80s; }
.links .link[data-cat="wallets"]   { animation-delay:.90s; }
.links .link[data-cat="nfts"]      { animation-delay:1.00s; }
.links .link[data-cat="analytics"] { animation-delay:1.10s; }
@keyframes linkIn{ to { opacity:1; } }
.links .link.is-active{ stroke:var(--cyan); stroke-width:2.4; opacity:1; }

/* ============================================================
   THE BUBBL MASCOT (centered, glowing, eyes track cursor)
   ============================================================ */
.bubbl-wrap{
  position:absolute;left:50%;top:42%;
  transform:translate(-50%,-50%);
  width:clamp(220px,32%,360px);
  aspect-ratio:1/1;
  z-index:5;
  filter:drop-shadow(0 22px 36px rgba(10,20,80,0.55));
  animation:bubblFloat 7s ease-in-out infinite;
}
@keyframes bubblFloat{ 50%{ transform:translate(-50%, calc(-50% - 14px)); } }

.bubbl-aura{
  position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.5), rgba(108,210,255,0.32) 32%, transparent 64%);
  filter:blur(8px);
  animation:auraPulse 4.5s ease-in-out infinite;
}
@keyframes auraPulse{ 50%{ opacity:.62; transform:scale(.94); } }

.bubbl{
  position:absolute;inset:0;width:100%;height:100%;
  user-select:none;-webkit-user-drag:none;
}

/* PIXAR-STYLE EYES laid over the PNG eyes
   sclera covers the PNG eye fully + pupil tracks cursor + highlight gives life */
.eye{
  position:absolute;
  width:14%;height:19%;
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.eye-left { left:45.1%; top:42.1%; }
.eye-right{ left:59.6%; top:42.1%; }

.sclera{
  position:absolute;inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 32%, #ffffff 0%, #f6f7fb 65%, #d6dbed 100%);
  box-shadow:
    inset 0 -4px 6px rgba(15,28,80,0.18),
    inset 0 2px 3px rgba(255,255,255,0.85),
    0 1px 2px rgba(0,0,0,0.18);
  overflow:hidden;
  animation:blink 6.5s infinite;
  transform-origin:center;
}
.eye-right .sclera{ animation-delay:.18s; }
@keyframes blink{
  0%, 92%, 100% { transform:scaleY(1); }
  94% { transform:scaleY(0.08); }
  96% { transform:scaleY(1); }
}

.pupil{
  position:absolute;left:50%;top:50%;
  width:46%;height:60%;
  background:radial-gradient(circle at 50% 40%, #1a2348 0%, #050818 70%, #000000 100%);
  border-radius:50%;
  transform:translate(-50%,-50%) translate(var(--px,0px), var(--py,0px));
  transition:transform .14s cubic-bezier(.22,.9,.36,1);
  box-shadow:inset 0 -3px 4px rgba(0,0,0,0.5);
}

.highlight{
  position:absolute;
  width:24%;height:18%;
  left:54%;top:18%;
  background:#ffffff;
  border-radius:50%;
  pointer-events:none;
  opacity:.9;
  filter:blur(.3px);
}

@media (prefers-reduced-motion:reduce){
  .sclera{ animation:none; }
  .pupil{ transition:none; }
}

/* ============================================================
   CATEGORY BUBBLES (8 glass-bubbles, --cx / --cy position them)
   ============================================================ */
.catbubble{
  position:absolute;
  left:var(--cx);top:var(--cy);
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0;background:transparent;
  z-index:4;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),filter .2s ease;
  opacity:0;animation:bubbleIn .55s ease forwards;
}
.catbubble[data-cat="community"] { animation-delay:.45s; }
.catbubble[data-cat="governance"]{ animation-delay:.55s; }
.catbubble[data-cat="devs"]      { animation-delay:.65s; }
.catbubble[data-cat="bridges"]   { animation-delay:.75s; }
.catbubble[data-cat="dexs"]      { animation-delay:.85s; }
.catbubble[data-cat="wallets"]   { animation-delay:.95s; }
.catbubble[data-cat="nfts"]      { animation-delay:1.05s; }
.catbubble[data-cat="analytics"] { animation-delay:1.15s; }
@keyframes bubbleIn{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.4); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.catbubble:hover{
  filter:brightness(1.08);
}
.catbubble:hover .catbubble-glass{
  transform:scale(1.07);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.4),
    inset -8px -10px 18px rgba(20,60,180,0.3),
    0 12px 28px -8px rgba(108,210,255,0.55);
}
.catbubble-glass{
  display:flex;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.62), rgba(255,255,255,0.2) 52%, rgba(255,255,255,0.06) 100%);
  border:1.5px solid var(--glass-edge);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.28),
    inset -6px -8px 14px rgba(20,60,180,0.28),
    0 8px 22px -6px rgba(20,40,120,0.5);
  color:#fff;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;
}
.catbubble-glass svg{width:30px;height:30px;}
.catbubble-label{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;
  color:#fff;background:rgba(10,20,48,0.4);padding:2px 9px;border-radius:999px;
  white-space:nowrap;
}
.catbubble.is-active .catbubble-glass{
  background:radial-gradient(circle at 35% 30%, var(--cyan), rgba(29,61,240,0.6) 70%);
  border-color:var(--cyan);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 0 28px var(--glow),
    0 14px 26px -6px rgba(20,40,120,0.55);
}

/* ============================================================
   ASK input bar + hint
   ============================================================ */
.ask{
  position:absolute;left:50%;bottom:7%;
  transform:translateX(-50%);
  width:min(540px,80vw);z-index:10;
  display:flex;align-items:center;gap:0;
  background:rgba(255,255,255,0.94);
  border-radius:999px;
  padding:0 6px 0 22px;
  box-shadow:0 18px 36px -14px rgba(10,30,90,0.7),inset 0 1px 0 #fff;
}
.ask-input{
  flex:1 1 auto;height:54px;
  border:0;outline:0;background:transparent;
  font-family:var(--f-display);font-style:italic;font-weight:400;font-size:1.15rem;
  color:var(--ink);
}
.ask-input::placeholder{ color:var(--soft); font-style:italic; }
.ask-go{
  width:42px;height:42px;flex:0 0 auto;
  border-radius:50%;
  background:var(--bubbl-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,background .15s ease;
}
.ask-go:hover{ transform:scale(1.06); background:#1f47ff; }
.ask-go svg{width:20px;height:20px;color:#fff;}

.ask-hint{
  position:absolute;left:50%;bottom:calc(7% - 38px);
  transform:translateX(-50%);
  font-family:var(--f-mono);font-size:.74rem;color:rgba(255,255,255,0.78);
  white-space:nowrap;letter-spacing:.04em;
}
.ask-hint a{ color:#fff; border-bottom:1px dotted rgba(255,255,255,0.5); padding-bottom:1px; }
.ask-hint a:hover{ color:var(--cyan); border-color:var(--cyan); }

/* ============================================================
   GREET (small under-mascot one-liner shown on first paint)
   ============================================================ */
.greet{
  position:absolute;left:50%;top:64%;
  transform:translateX(-50%);
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:1rem;color:#fff;opacity:.78;
  white-space:nowrap;letter-spacing:.005em;
  pointer-events:none;text-shadow:0 2px 10px rgba(0,30,120,0.6);
  animation:greetIn .9s ease 1.2s both;
  z-index:6;
}
@keyframes greetIn{ from { opacity:0; transform:translate(-50%, 8px); } to { opacity:.78; transform:translateX(-50%); } }
.greet.is-gone{ animation:greetOut .35s ease forwards; }
@keyframes greetOut{ to { opacity:0; transform:translate(-50%, -6px); } }

/* ============================================================
   ANSWER thought-cloud (appears BELOW the mascot, not on top)
   ============================================================ */
.answer{
  position:absolute;left:50%;top:64%;
  transform:translateX(-50%);
  width:min(560px,72vw);max-width:calc(100% - 40px);
  z-index:15;
  pointer-events:none;
}
.answer[hidden]{display:none;}
.answer-cloud{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  padding:22px 28px 20px;
  border-radius:34% 30% 28% 30% / 38% 28% 38% 28%;
  box-shadow:
    inset 0 0 0 2px #fff,
    0 18px 44px -14px rgba(0,30,120,0.55);
  pointer-events:auto;
  animation:answerIn .55s cubic-bezier(.34,1.56,.64,1);
  max-height:240px;overflow-y:auto;
}
.answer-cloud::before,
.answer-cloud::after{
  content:"";position:absolute;left:46%;
  border-radius:50%;background:var(--paper);
  box-shadow:inset 0 0 0 2px #fff;
  pointer-events:none;
}
.answer-cloud::before{ width:28px;height:28px; top:-16px; }
.answer-cloud::after{ width:14px;height:14px; top:-34px; left:42%; }
@keyframes answerIn{
  0%   { opacity:0; transform:translateY(-12px) scale(.85); }
  60%  { opacity:1; transform:translateY(0) scale(1.02); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
.answer-body{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.55;
  color:var(--ink);
}
.answer-body em{ color:var(--bubbl-blue); font-style:italic; }
.answer-body .typing-caret{
  display:inline-block;width:2px;height:1.05em;background:var(--bubbl-blue);
  margin-left:2px;vertical-align:text-bottom;
  animation:caret 1s steps(2) infinite;
}
@keyframes caret{ 50%{opacity:0;} }
.answer-meta{
  margin-top:14px;padding-top:14px;
  border-top:1px dashed rgba(10,20,48,0.25);
  font-family:var(--f-mono);font-size:.72rem;color:var(--soft);
  display:flex;flex-wrap:wrap;gap:6px;
}
.answer-meta a{
  display:inline-flex;align-items:center;gap:4px;
  background:#fff;color:var(--bubbl-blue);
  padding:3px 9px;border-radius:999px;
  border:1px solid rgba(29,61,240,0.25);
  transition:background .12s ease;
}
.answer-meta a:hover{ background:rgba(29,61,240,0.08); }

/* teach-mode inline form, appears inside .answer-meta when bubbl doesn't know */
.teach{
  display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;width:100%;
  margin-top:6px;
}
.teach label{
  display:flex;flex-direction:column;gap:3px;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--soft);text-transform:uppercase;
  flex:1 1 auto;min-width:120px;
}
.teach input{
  font-family:var(--f-body);font-size:.92rem;color:var(--ink);
  background:#fff;border:1.5px solid rgba(29,61,240,0.25);border-radius:8px;
  padding:6px 10px;outline:none;
  transition:border-color .12s ease;
}
.teach input[type="date"]{ max-width:160px; }
.teach input:focus{ border-color:var(--bubbl-blue); }
.teach button{
  font-family:var(--f-body);font-weight:600;font-size:.86rem;
  background:var(--bubbl-blue);color:#fff;
  border:0;border-radius:8px;padding:8px 14px;
  cursor:pointer;
  transition:background .12s ease,transform .12s ease;
}
.teach button:hover{ background:#1f47ff; transform:translateY(-1px); }

/* paginated archive: show-more / show-less button */
.show-more{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:6px;padding:14px 22px;
  background:rgba(255,255,255,0.16);
  border:1.5px dashed var(--glass-edge);border-radius:18px;
  font-family:var(--f-body);font-weight:600;font-size:.96rem;
  color:#fff;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.show-more:hover{
  background:rgba(255,255,255,0.26);
  border-color:#fff;transform:translateY(-1px);
}
.show-more .more-tag{
  font-family:var(--f-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--bubbl-blue);background:#fff;
  padding:3px 9px;border-radius:999px;
}
.show-more.is-less{ border-style:solid; }

/* ============================================================
   PEDESTAL + BOOK (CA is engraved on the right page)
   ============================================================ */
.pedestal{
  max-width:600px;margin:30px auto 60px;
  padding:0 20px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.ped-base{
  width:280px;height:42px;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(108,210,255,0.55), transparent 70%),
              radial-gradient(ellipse 80% 100% at 50% 50%, var(--bubbl-blue), #142bb0 100%);
  border-radius:50%;
  box-shadow:0 18px 32px -10px rgba(10,30,90,0.6);
}
.book{
  position:relative;
  display:flex;align-items:stretch;gap:0;
  padding:0;background:transparent;
  margin-top:-26px;
  filter:drop-shadow(0 14px 22px rgba(10,30,90,0.55));
  transition:transform .14s ease;
}
.book:hover{ transform:translateY(-3px); }
.book-leaf{
  width:170px;height:130px;
  background:linear-gradient(180deg,#ffffff 0%, #eef1ff 100%);
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px 18px;
}
.book-left{
  border-radius:8px 0 0 8px;
  transform:perspective(800px) rotateY(-14deg);
  transform-origin:right center;
  background:
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(10,20,48,0.07) 14px 15px),
    linear-gradient(180deg,#ffffff 0%, #eef1ff 100%);
}
.book-right{
  border-radius:0 8px 8px 0;
  transform:perspective(800px) rotateY(14deg);
  transform-origin:left center;
  text-align:center;
}
.book-spine{
  position:absolute;left:50%;top:0;bottom:0;width:6px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(20,40,120,0.5), rgba(10,20,48,0.55));
  z-index:1;
}
.book-kicker{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--soft);text-transform:uppercase;margin-bottom:6px;
}
.book-ca{
  font-family:var(--f-mono);font-size:.84rem;color:var(--ink);
  font-weight:700;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.book-hint{
  font-family:var(--f-display);font-style:italic;font-size:.78rem;
  color:var(--soft);margin-top:6px;
}
.book.is-copied .book-right{
  background:linear-gradient(180deg,#dff7e3 0%, #c7f0d2 100%);
}
.book.is-copied .book-hint{ color:#1f7a3e; }

/* ============================================================
   ARCHIVE: memory pool grid
   ============================================================ */
.archive{
  max-width:1280px;margin:0 auto;
  padding:60px clamp(20px,4vw,60px) 60px;
  position:relative;
}
.archive-head{ text-align:center; max-width:760px; margin:0 auto 36px; }
.archive .kicker{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;opacity:.7;
}
.archive h2{
  font-family:var(--f-display);font-weight:400;font-style:italic;
  font-size:clamp(2.2rem,5vw,3.4rem);
  color:#fff;letter-spacing:-.005em;margin:8px 0 8px;
}
.archive .sub{
  font-family:var(--f-body);font-size:.95rem;color:rgba(255,255,255,0.78);
}
.filterbar{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-top:22px;
}
.chip{
  cursor:pointer;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;
  padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,0.14);
  border:1px solid var(--glass-edge);
  color:#fff;
  transition:background .12s ease,transform .12s ease;
}
.chip:hover{ background:rgba(255,255,255,0.24); transform:translateY(-1px); }
.chip.is-active{ background:#fff; color:var(--bubbl-blue); border-color:#fff; }

.pool{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
  margin-top:8px;
}
.mem{
  position:relative;
  background:radial-gradient(ellipse 100% 130% at 50% 0%, rgba(255,255,255,0.95), rgba(232,237,255,0.85) 60%, rgba(208,220,255,0.85) 100%);
  color:var(--ink);
  padding:18px 18px 16px;
  border-radius:32% 30% 28% 30% / 36% 28% 38% 28%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.7), 0 12px 22px -10px rgba(10,30,90,0.4);
  text-align:left;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
.mem:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.85), 0 18px 30px -10px rgba(10,30,90,0.55), 0 0 22px var(--glow);
}
.mem::after{
  content:"";position:absolute;left:24%;bottom:-8px;
  width:14px;height:14px;border-radius:50%;
  background:rgba(232,237,255,0.85);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.7);
}
.mem-date{
  font-family:var(--f-mono);font-size:.66rem;color:var(--soft);
  letter-spacing:.06em;
}
.mem-title{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:1.04rem;line-height:1.3;color:var(--ink);
  margin-top:4px;
}
.mem-meta{
  display:flex;gap:8px;align-items:center;margin-top:8px;
}
.mem-cat{
  font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--bubbl-blue);
  background:rgba(29,61,240,0.08);
  padding:2px 7px;border-radius:999px;
}
.mem-proj{
  font-family:var(--f-mono);font-size:.66rem;color:var(--soft);
}

/* ============================================================
   POPOVER (click a memory to read it)
   ============================================================ */
.popover{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,16,48,0.62);
  padding:24px;
  cursor:zoom-out;
  animation:fadeIn .25s ease;
}
.popover[hidden]{ display:none; }
@keyframes fadeIn{ from{opacity:0;} }
.popover-cloud{
  max-width:540px;
  background:var(--paper);
  color:var(--ink);
  padding:30px 34px;
  border-radius:36% 30% 32% 28% / 32% 36% 28% 36%;
  box-shadow:inset 0 0 0 2px #fff, 0 30px 70px -20px rgba(0,0,0,0.55);
  cursor:default;position:relative;
  animation:popIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn{ 0%{opacity:0;transform:scale(.6);} 100%{opacity:1;transform:scale(1);} }
.popover-cloud .mem-date{ font-size:.76rem; }
.popover-cloud .mem-title{ font-size:1.5rem; margin-top:6px; }
.popover-cloud .mem-body{
  font-family:var(--f-body);font-size:.98rem;line-height:1.6;color:var(--ink);
  margin-top:14px;
}

/* footer + toast already styled above; nothing to add here */