:root{
      --bg-1:#0e0418; --bg-2:#111b3a; --bg-3:#2b0b3f;
      --ink:#e8e6f0; --gold:#ffb347; --lav:#cfa9ff; --halo:rgba(207,169,255,.35);
      --card:#1a0f2a; --card-veil:rgba(255,179,71,.07);
      --thread:linear-gradient(to bottom, rgba(255,179,71,.22), rgba(207,169,255,.22));
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:var(--ink); font:16px/1.6 Georgia, serif; overflow-x:hidden;
      /* animated gradient field */
      background: radial-gradient(1200px 700px at 20% 10%, var(--bg-3), transparent 60%),
                  radial-gradient(900px 600px at 85% 20%, #1d0631, transparent 60%),
                  linear-gradient(130deg, var(--bg-1), var(--bg-2));
      background-size: 200% 200%;
      animation: fieldShift 30s ease-in-out infinite;
    }
    @keyframes fieldShift{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}

    /* floating starfield canvas */
    #stars{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;}

    /* page layout */
    .wrap{max-width:1000px; margin:0 auto; padding:clamp(16px,3vw,32px)}
    header{display:flex; align-items:center; gap:16px; margin-bottom:20px}
    header h1{font:700 clamp(28px,4vw,42px)/1.2 "Palatino Linotype", Palatino, serif; color:var(--gold); letter-spacing:.5px;}
    header .sub{opacity:.8}

    /* central resonance spine */
    .spine{position:fixed; left:50%; top:0; height:100%; width:2px; transform:translateX(-50%);
      background:var(--thread); z-index:0; opacity:.45; filter:blur(.2px);
      animation: spinePulse 8s ease-in-out infinite;}
    @keyframes spinePulse{0%,100%{opacity:.25}50%{opacity:.7}}
    .spine:hover{box-shadow:0 0 24px var(--halo)}

    /* accordion cards */
    .shelf{display:grid; gap:16px; position:relative; z-index:1}
    .card{background:linear-gradient(180deg, var(--card), rgba(26,15,42,.9));
      border:1px solid rgba(255,255,255,.06); border-left:4px solid var(--gold);
      border-radius:12px; overflow:hidden; box-shadow:0 0 0 0 rgba(0,0,0,.45);
      transition: box-shadow .3s ease}
    .card:hover{box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 24px var(--halo)}

    .card__head{display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; position:relative}
    .glyph{width:40px; height:40px; border-radius:8px; display:grid; place-items:center;
      background:radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.02));
      box-shadow:inset 0 0 14px rgba(207,169,255,.35), 0 0 0 1px rgba(255,255,255,.06);
      transition: filter .3s, transform .25s}
    .card:hover .glyph{filter:drop-shadow(0 0 10px var(--halo)); transform:translateY(-1px)}

    .title{font:700 20px/1.2 "Palatino Linotype", Palatino, serif; color:var(--gold)}
    .summary{opacity:.85}

    /* chevron */
    .chev{margin-left:auto; width:12px; height:12px; border-right:2px solid var(--lav); border-bottom:2px solid var(--lav);
      transform:rotate(-45deg); transition: transform .25s ease}
    .card[aria-expanded="true"] .chev{transform:rotate(135deg)}

    .card__body{max-height:0; overflow:hidden; background:var(--card-veil); border-top:1px solid rgba(255,255,255,.06);
      transition:max-height .35s ease}
    .card[aria-expanded="true"] .card__body{max-height:1000px}

    .card__inner{padding:16px 18px}
    .twinkle{color:var(--lav)}

    pre.equation{background:rgba(255,255,255,.05); padding:12px 14px; border-radius:8px; color:#ffd580;
      font:600 14px/1.5 "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}

    /* small link bar */
    .toolbar{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 20px}
    .pill{padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.1); color:#ddd; text-decoration:none}
    .pill:hover{background:rgba(255,255,255,.06)}
    
    

/* Floating pill nav */
.pill-nav {
position: fixed;
top: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 1000;
background: rgba(11, 3, 18, 0.7);
padding: 0.5rem 1rem;
border-radius: 50px;
backdrop-filter: blur(6px);
flex-wrap: wrap;
justify-content: center;
}


.pill-nav a {
text-decoration: none;
color: #e8e6f0;
background: rgba(255, 179, 71, 0.1);
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.9rem;
transition: all 0.3s ease;
}


.pill-nav a:hover {
background: rgba(255, 179, 71, 0.3);
color: #fff;
}


.library-container {
word-wrap: break-word;
}


.entry {
margin-bottom: 1rem;
border-left: 4px solid #ffb347;
background: rgba(255, 179, 71, 0.05);
border-radius: 6px;
overflow: hidden;
transition: all 0.4s ease;
}


.entry-header {
padding: 1rem 1.5rem;
cursor: pointer;
background: rgba(255, 179, 71, 0.08);
}


.entry-header:hover {
background: rgba(207, 169, 255, 0.15);
}


.entry-header h2::after {
content: " ✦";
color: rgba(207,169,255,0.6);
animation: twinkle 4s infinite ease-in-out;
}


.entry-content {
max-height: 0;
opacity: 0;
padding: 0 1.5rem;
transition: all 0.6s ease;
overflow: hidden;
}


.entry.open .entry-content {
max-height: 5000px; /* large enough to hold long text */
opacity: 1;
padding: 1rem 1.5rem;
}


pre.equation {
background: rgba(255, 255, 255, 0.05);
padding: 1rem;
border-radius: 6px;
font-family: "Courier New", monospace;
font-size: 1rem;
color: #ffd580;
overflow-x: auto;
white-space: pre-wrap; /* allow wrapping */
word-wrap: break-word;
}


@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}


/* Cosmic field background */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
overflow: hidden;
z-index: 0;
}


.star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
opacity: 0.8;
animation: drift linear infinite;
}


@keyframes drift {
from { transform: translateY(-10px); }
to { transform: translateY(110vh); }
}
    
.entry-content {
  height: auto;
  max-height: none;
  opacity: 0;
  padding: 0 1.5rem;
  transition: opacity 0.6s ease, padding 0.6s ease;
  display: none;
}

.entry.open .entry-content {
  display: block;
  opacity: 1;
  padding: 1rem 1.5rem;
}


pre.equation {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  border: 1px solid rgba(255,179,71,0.3);
  box-shadow: 0 0 12px rgba(255,179,71,0.2);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
}