/* ============ THEME TOKENS ============ */
/* Home — "night monitor" (dark, teal) */
[data-theme="monitor-dark"]{
  --bg:#0B1220; --panel:#111B2E; --panel-2:#16233B; --line:#233047;
  --accent:#4CE0C4; --accent-dim:#2C8C79; --accent2:#FF6B5E; --accent3:#F2B84B;
  --text:#E8ECF3; --muted:#8B97AC;
}
/* Library — "clinical daylight" (bright, forest teal) */
[data-theme="paper-light"]{
  --bg:#F7F5EF; --panel:#FFFFFF; --panel-2:#F0EEE6; --line:#DEDACC;
  --accent:#0E7C66; --accent-dim:#B7CFC7; --accent2:#C4462F; --accent3:#B98A2E;
  --text:#1B2430; --muted:#6B7280;
}
/* Research — "grand rounds at night" (dark, gold/plum) */
[data-theme="journal-dark"]{
  --bg:#170F1F; --panel:#241A30; --panel-2:#2C2039; --line:#3A2C48;
  --accent:#E8B550; --accent-dim:#8A6A2E; --accent2:#E37B87; --accent3:#6FBFA8;
  --text:#F1E9E4; --muted:#B0A0BE;
}
/* Lab — "exam paper" (bright, red-pen) */
[data-theme="exam-light"]{
  --bg:#EFEEE8; --panel:#FFFFFF; --panel-2:#E7E4DA; --line:#D8D3C4;
  --accent:#D6572D; --accent-dim:#EAC3B3; --accent2:#3D6BC9; --accent3:#2E8B57;
  --text:#14181F; --muted:#6E6A60;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; transition:background .3s ease;
  cursor:none;
}
a{color:inherit;}
::selection{background:var(--accent);color:var(--bg);}
.mono{font-family:'IBM Plex Mono',monospace;}
.display{font-family:'Fraunces',serif;}

@media (hover:none), (pointer:coarse){
  body{cursor:auto;}
  #cursorDot,#cursorRing{display:none !important;}
}

/* ---------- custom cursor ---------- */
#cursorDot,#cursorRing{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
  will-change:transform;
}
#cursorDot{
  width:7px;height:7px;background:var(--accent);
  transition:background .2s ease, width .2s ease, height .2s ease;
}
#cursorRing{
  width:34px;height:34px;border:1.5px solid var(--accent);
  transition:width .22s cubic-bezier(.2,.9,.3,1.2), height .22s cubic-bezier(.2,.9,.3,1.2),
             border-radius .22s ease, border-color .22s ease, background .22s ease, transform .22s ease;
}
#cursorRing::before{
  content:'+'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:0px; color:var(--accent); opacity:0;
  transition:font-size .22s ease, opacity .22s ease;
}
body.cursor-active #cursorRing{
  width:64px;height:64px; border-color:var(--accent); background:rgba(255,255,255,.02);
}
body.cursor-active #cursorRing::before{ font-size:15px; opacity:1; }
body.cursor-active #cursorDot{ width:4px;height:4px; }

/* ---------- header / nav ---------- */
header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px; background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:20px;font-weight:600;}
.brand .pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(0,0,0,0);animation:pulseDot 2.2s infinite;}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);}
  70%{box-shadow:0 0 0 10px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}
nav{display:flex;gap:28px;font-size:14px;color:var(--muted);}
nav a{text-decoration:none;transition:color .2s ease;position:relative;}
nav a.active{color:var(--accent);}
nav a:hover{color:var(--accent);}

section{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:70px 40px;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:20px;flex-wrap:wrap;}
.section-head h2{font-family:'Fraunces',serif;font-size:32px;font-weight:600;margin:0;letter-spacing:-.3px;}
.section-head p{color:var(--muted);font-size:14px;max-width:460px;margin:8px 0 0;}
.tag-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dim);}

.btn{
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;
  padding:13px 22px;border-radius:10px;border:1px solid transparent;cursor:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent);color:var(--bg);}
.btn-primary:hover{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text);}
.btn-ghost:hover{border-color:var(--accent-dim);}

footer{
  position:relative;z-index:1;border-top:1px solid var(--line);padding:32px 40px;
  max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  color:var(--muted);font-size:12.5px;
}

/* ---------- 3D tilt card base (shared) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;perspective:1200px;}
.tilt-card{
  background:linear-gradient(155deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:14px;padding:20px;cursor:none;
  transform-style:preserve-3d; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display:flex;flex-direction:column;gap:10px;
}
.tilt-card:hover{border-color:var(--accent-dim); box-shadow:0 20px 40px -20px color-mix(in srgb, var(--accent) 30%, transparent);}

.pill{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;white-space:nowrap;
}

@media(max-width:920px){
  header{padding:16px 20px;} section{padding:50px 20px;} nav{display:none;}
}
@media (prefers-reduced-motion: reduce){ .pulse-dot{animation:none;} }