:root{
  --ink:#0a0a0a;
  --ink-rgb:10,10,10;
  --gray:#666666;
  --gray-light:#a3a3a3;
  --copper:#c9793f;
  --copper-dim:#a9622f;
  --bg:#ffffff;
  --bg-rgb:255,255,255;
  --glass-bg:rgba(255,255,255,0.68);
  --glass-border:rgba(10,10,10,0.08);
  --node-label-bg:rgba(255,255,255,0.75);
  --radius: clamp(150px, 18vw, 235px);
  --rot: 0deg;
  --ease:cubic-bezier(.16,.8,.24,1);
  --theme-ease:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  --shimmer-base:var(--gray);
  --shimmer-highlight:var(--ink);
}
:root[data-theme="dark"]{
  --ink:#f3efe8;
  --ink-rgb:243,239,232;
  --gray:#9c968d;
  --gray-light:#6b655e;
  --bg:#0b0a09;
  --bg-rgb:11,10,9;
  --glass-bg:rgba(22,20,18,0.68);
  --glass-border:rgba(255,255,255,0.1);
  --node-label-bg:rgba(11,10,9,0.75);
  --shimmer-base:var(--gray-light);
  --shimmer-highlight:#fff;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,'Helvetica Neue',Helvetica,sans-serif;
  font-weight:200;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  position:relative;
  touch-action:none;
  transition:var(--theme-ease);
}
a{color:inherit;text-decoration:none;}
h1{margin:0;font-weight:200;letter-spacing:-0.01em;}
p{margin:0;}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;}

#attractor{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
#spokes{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}
.ambient-veil{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 900px 700px at 72% 38%, rgba(201,121,63,0.07) 0%, rgba(201,121,63,0) 55%),
    radial-gradient(ellipse 1400px 1000px at 50% 50%, rgba(var(--bg-rgb),0) 40%, rgba(var(--bg-rgb),0.45) 100%);
  animation:veilBreathe 9s ease-in-out infinite;
  transition:background-color .5s var(--ease);
}
@keyframes veilBreathe{
  0%,100%{opacity:.75;}
  50%{opacity:1;}
}
:root[data-theme="dark"] .ambient-veil{
  background:
    radial-gradient(ellipse 900px 700px at 72% 38%, rgba(201,121,63,0.11) 0%, rgba(201,121,63,0) 55%),
    radial-gradient(ellipse 1400px 1000px at 50% 50%, rgba(var(--bg-rgb),0) 35%, rgba(var(--bg-rgb),0.65) 100%);
}

.home-link{
  position:fixed;
  top:22px;right:76px;
  z-index:30;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:inherit;
  font-size:13px;
  letter-spacing:.03em;
  color:var(--gray);
  padding:8px 16px;
  border-radius:100px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);
  transition:var(--theme-ease), color .25s, border-color .25s;
}
.home-link:hover{color:var(--ink);border-color:var(--copper);}

.theme-toggle{
  position:fixed;
  top:22px;right:28px;
  z-index:30;
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--theme-ease), transform .3s var(--ease), border-color .3s;
}
.theme-toggle:hover{border-color:var(--copper);transform:scale(1.08);}
.theme-toggle__icon{
  position:absolute;
  font-size:14px;
  line-height:1;
  color:var(--gray);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.theme-toggle__icon--sun{opacity:1;transform:rotate(0deg) scale(1);}
.theme-toggle__icon--moon{opacity:0;transform:rotate(-90deg) scale(.6);}
[data-theme="dark"] .theme-toggle__icon--sun{opacity:0;transform:rotate(90deg) scale(.6);}
[data-theme="dark"] .theme-toggle__icon--moon{opacity:1;transform:rotate(0deg) scale(1);color:var(--copper);}

.lorenz-note{
  position:fixed;
  bottom:22px;right:28px;
  z-index:20;
  width:240px;
  font-size:9.5px;
  line-height:1.55;
  font-weight:200;
  letter-spacing:.01em;
  color:var(--ink);
  opacity:.72;
  text-align:right;
}

/* -------- cursor-following glow -------- */
.cursor-glow{
  position:fixed;
  top:0;left:0;
  width:70px;height:70px;
  margin:-35px 0 0 -35px;
  border-radius:50%;
  z-index:25;
  pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,196,110,0.5) 0%,
    rgba(201,121,63,0.26) 32%,
    rgba(201,121,63,0) 70%);
  opacity:0;
  transition:opacity .35s var(--ease);
  will-change:transform;
}
.cursor-glow.is-active{opacity:1;}
:root[data-theme="dark"] .cursor-glow{
  background:radial-gradient(circle,
    rgba(255,221,150,0.5) 0%,
    rgba(201,121,63,0.28) 32%,
    rgba(201,121,63,0) 70%);
}

/* -------- the orbit stage -------- */
.stage{
  position:fixed;
  top:0;right:0;bottom:0;
  left:420px;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ring{
  position:relative;
  width:1px;height:1px;
}
.node{
  position:absolute;
  top:0;left:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  transform:
    translate(-50%,-50%)
    rotate(calc(var(--i) * var(--step, 60deg) + var(--rot)))
    translateX(var(--radius))
    rotate(calc(-1 * (var(--i) * var(--step, 60deg) + var(--rot))));
  transition:transform .06s linear;
}
.node__dot{
  width:10px;height:10px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--ink);
  transition:background .3s,border-color .3s,transform .3s;
}
.node.is-active .node__dot{
  background:var(--copper);
  border-color:var(--copper);
  transform:scale(1.3);
}
.node__label{
  font-size:12.5px;
  font-weight:300;
  letter-spacing:.03em;
  color:var(--gray);
  padding:6px 12px;
  background:var(--node-label-bg);
  backdrop-filter:blur(6px);
  border-radius:100px;
  white-space:nowrap;
  transition:color .3s,font-weight .3s,background-color .5s var(--ease);
}
.node.is-active .node__label{color:var(--ink);font-weight:400;}

/* -------- content panel: no card, just text, pinned upper-left -------- */
.panel{
  position:fixed;
  left:36px;
  top:64px;
  z-index:20;
  width:min(560px, 68vw);
  max-height:calc(var(--vh100, 100vh) - 100px);
  overflow-y:auto;
  padding-right:14px;
  padding-bottom:20px;
  scrollbar-width:thin;
}
.panel::-webkit-scrollbar{width:6px;}
.panel::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),0.15);border-radius:100px;}
.panel::before{
  content:'';
  position:fixed;
  left:0; top:0;
  width:min(700px, 78vw);
  height:var(--vh100, 100vh);
  z-index:-1;
  background:radial-gradient(ellipse 640px 620px at 0% 0%, rgba(var(--bg-rgb),0.96) 0%, rgba(var(--bg-rgb),0.75) 45%, rgba(var(--bg-rgb),0) 78%);
  pointer-events:none;
  transition:background .5s var(--ease);
}
.panel__page{
  display:none;
  animation:panelIn .5s var(--ease);
}
.panel__page.is-active{display:block;}
@keyframes panelIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.panel__eyebrow{
  font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--gray);
  margin-bottom:20px;
}
.panel__title{font-size:clamp(40px,5.6vw,64px);font-weight:200;line-height:1.02;margin-bottom:14px;letter-spacing:-0.01em;}
.panel__role{
  font-size:30px;
  font-weight:200;
  color:var(--gray);
  margin-bottom:10px;
}
.panel__desc{font-size:15px;line-height:1.7;color:var(--gray);font-weight:200;max-width:46ch;}
.panel__link{
  display:inline-block;
  margin-top:20px;
  font-size:13px;
  font-weight:400;
  border-bottom:1px solid var(--ink);
}
.panel__link:hover{color:var(--copper);border-color:var(--copper);}

.deeper-btn{
  display:block;
  margin-top:14px;
  padding:0;
  font-family:inherit;
  font-size:14px;
  font-style:italic;
  font-weight:300;
  letter-spacing:.1em;
  text-transform:lowercase;
  background:linear-gradient(100deg,
    var(--shimmer-base) 12%,
    var(--shimmer-highlight) 38%,
    #fff3e4 47%,
    var(--copper) 52%,
    var(--shimmer-highlight) 61%,
    var(--shimmer-base) 88%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shimmer 5.5s linear infinite, deeperGlow 3.2s ease-in-out infinite;
  transition:transform .3s var(--ease);
}
.deeper-btn:hover{transform:translateY(-1px) scale(1.04);animation-duration:2.4s,1.6s;}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-100% 0;}
}
@keyframes deeperGlow{
  0%,100%{filter:drop-shadow(0 0 5px rgba(201,121,63,0.22)) drop-shadow(0 0 12px rgba(201,121,63,0.1));}
  50%{filter:drop-shadow(0 0 9px rgba(201,121,63,0.48)) drop-shadow(0 0 22px rgba(201,121,63,0.24));}
}

/* -------- item list: multiple entries per section -------- */
.panel__item{
  padding:10px 0;
  border-top:1px solid rgba(var(--ink-rgb),0.09);
  transition:border-color .5s var(--ease);
}
.panel__item:first-of-type{border-top:none;padding-top:0;}
.panel__item-body{display:flex;flex-direction:column;}
.panel__item-body h3{font-size:21px;font-weight:400;margin-bottom:8px;letter-spacing:-0.01em;}
.panel__item-body h3 a{
  display:inline;
  font-size:inherit;
  font-weight:inherit;
  margin-top:0;
  border-bottom:none;
  width:auto;
  transition:color .25s;
}
.panel__item-body h3 a:hover{color:var(--copper);}
.panel__item-body p{font-size:13.5px;line-height:1.6;color:var(--gray);font-weight:200;max-width:46ch;}
.panel__item-body a{
  display:inline-block;
  margin-top:10px;
  font-size:12.5px;
  font-weight:400;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  width:fit-content;
}
.panel__item-body a:hover{color:var(--copper);border-color:var(--copper);}

/* -------- mobile fallback tabs -------- */
.tabs{
  display:none;
}

@media(max-width:760px){
  body{overflow-y:auto;touch-action:pan-y;}
  #attractor,#spokes{position:fixed;opacity:.5;}
  .stage{display:none;}
  .home-link{display:none;}
  .panel{
    position:relative;
    left:auto;top:auto;
    width:auto;
    max-height:none;
    overflow-y:visible;
    margin:96px 16px 110px;
    padding:22px 18px;
    background:var(--glass-bg);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--glass-border);
    border-radius:24px;
    box-shadow:0 20px 60px rgba(20,15,10,0.10), 0 1px 1px rgba(20,15,10,0.04);
  }
  .panel::before{display:none;}
  .lorenz-note{display:none;}
  .tabs{
    display:flex;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:30;
    gap:6px;
    padding:12px;
    overflow-x:auto;
    background:rgba(var(--bg-rgb),0.9);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--glass-border);
  }
  .tabs button{
    flex:none;
    padding:13px 18px;
    font-size:13.5px;
    font-weight:300;
    color:var(--gray);
    background:rgba(var(--ink-rgb),0.05);
    border-radius:100px;
    white-space:nowrap;
    min-height:44px;
  }
  .tabs button.is-active{color:var(--bg);background:var(--ink);font-weight:400;}
}