:root{
  --bg:#16141c; --fg:#ECEDEA; --fg-dim:#8C9094; --fg-dim2:#AFB3B7;
  --line: rgba(236,237,234,0.12); --line-strong: rgba(236,237,234,0.28);
  --blue:#246BF8; --violet:#8753FF; --teal:#0AC2AE; --accent:#F05570;
  --surface: rgba(236,237,234,0.04); --chip: rgba(11,13,16,0.72);
}
html[data-theme="light"]{
  --bg:#f8f7fa; --fg:#14161A; --fg-dim:#5D6266; --fg-dim2:#40454A;
  --line: rgba(20,22,26,0.12); --line-strong: rgba(20,22,26,0.28);
  --surface: rgba(20,22,26,0.035); --chip: rgba(238,240,238,0.72);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--fg); font-family:'Bricolage Grotesque', sans-serif; overflow-x:hidden; transition:background 0.4s ease, color 0.4s ease; }
::selection{ background:var(--accent); color:var(--bg); }
a{ color:inherit; }

#field{ position:fixed; inset:0; z-index:0; pointer-events:none; }

.grid-mark{ position:fixed; font-size:13px; color:var(--fg-dim); z-index:60; opacity:0.55; pointer-events:none; font-family:'JetBrains Mono', monospace; }
.gm-tl{top:24px; left:24px;} .gm-br{bottom:24px; right:24px;}

nav{ position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:32px 56px; z-index:50; background:linear-gradient(to bottom, var(--bg) 80%, transparent 100%); }
nav .brand{ font-family:'Fraunces', serif; font-weight:400; font-size:23px; letter-spacing:0.01em; }
nav .links{ display:flex; gap:38px; align-items:center; }
nav .links button{ background:none; border:none; color:var(--fg-dim); font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:16px; letter-spacing:0.01em; padding:0; cursor:pointer; transition:color 0.25s ease; position:relative; }
nav .links button::after{ content:''; position:absolute; bottom:-6px; left:0; right:0; height:1.5px; background:var(--accent); transform:scaleX(0); transition:transform 0.25s ease; transform-origin:left; }
nav .links button:hover{ color:var(--fg); }
nav .links button.active{ color:var(--accent); }
nav .links button.active::after{ transform:scaleX(1); }
#theme-toggle{ border:none; background:none; color:var(--fg-dim); font-family:'Space Grotesk', sans-serif; font-size:18px; padding:0; cursor:pointer; margin-left:8px; transition:color 0.25s ease; }
#theme-toggle:hover{ color:var(--fg); }

section{ position:relative; padding:0 48px; z-index:2; }
.wrap{ max-width:1300px; margin:0 auto; padding:150px 0; position:relative; }
.label{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--accent); letter-spacing:0.09em; text-transform:uppercase; margin-bottom:22px; }
h2.title{ font-family:'Fraunces', serif; font-weight:340; font-size:clamp(32px,4vw,58px); line-height:1.05; max-width:820px; }
.body-text{ font-size:16.5px; color:var(--fg-dim); max-width:560px; margin-top:20px; line-height:1.75; }
.body-text a{ color:var(--fg); text-decoration:none; border-bottom:1px solid var(--accent); transition:color 0.25s ease; }
.body-text a:hover{ color:var(--accent); }
/* hero */
.hero{ height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0 48px; }
#sphere-canvas{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; opacity:0.92; }
.hero-content{ position:relative; z-index:5; max-width:1300px; width:100%; pointer-events:none; }
.eyebrow{ font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--fg-dim); letter-spacing:0.09em; text-transform:uppercase; margin-bottom:16px; }
h1.name{ font-family:'Fraunces', serif; font-weight:340; font-size:clamp(58px, 10vw, 156px); line-height:0.92; letter-spacing:-0.01em; }
h1.name em{ font-style:italic; font-weight:300; color:var(--accent); }
.tagline{ font-size:18px; color:var(--fg-dim); max-width:520px; margin-top:24px; line-height:1.6; }
.stamp{ position:absolute; bottom:40px; left:48px; font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--fg-dim); z-index:5; }

.marquee-band{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; overflow:hidden; white-space:nowrap; font-family:'Fraunces', serif; font-style:italic; font-weight:300; font-size:26px; color:var(--fg-dim); position:relative; z-index:2; background:var(--bg); }
.marquee-track{ display:inline-block; animation:scrollmq 26s linear infinite; }
.marquee-track span{ margin:0 28px; }
@keyframes scrollmq{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

.letter{ font-family:'Fraunces', serif; font-size:22px; line-height:1.65; max-width:760px; font-weight:340; }
.letter .spin{ display:inline-block; position:relative; width:1em; text-align:center; cursor:default; }
.spin .up, .spin .down{ position:absolute; left:0; right:0; transition:opacity 0.3s ease, transform 0.3s ease; }
.spin .down{ opacity:0; transform:rotate(180deg); }
.spin:hover .up{ opacity:0; transform:rotate(-180deg); }
.spin:hover .down{ opacity:1; transform:rotate(0deg); }

.about-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.about-col .letter{ max-width:540px; }
.split-stage{ position:relative; }
#split-canvas{ display:block; width:100%; height:380px; }
.split-cap{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--fg-dim); margin-top:16px; letter-spacing:0.02em; text-align:center; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }

/* CV = energy ladder. canvas behind, rows are the rungs */
.ladder-stage{ position:relative; margin-top:56px; }
#ladder-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.rungs{ position:relative; z-index:2; }
.rung{ display:flex; gap:36px; align-items:start; padding:24px 22px 24px 60px; cursor:default; border:1px solid transparent; border-radius:10px; transition:padding 0.35s cubic-bezier(.2,.8,.2,1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.rung:hover{ padding-left:80px; background:var(--chip); border-color:var(--line); box-shadow:0 8px 30px rgba(0,0,0,0.25); backdrop-filter:blur(3px); }
.rung-year{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--fg-dim); width:52px; flex-shrink:0; transition:color 0.3s ease; padding-top:2px; }
.rung:hover .rung-year{ color:var(--accent); }
.rung-text{ font-family:'Fraunces', serif; font-weight:400; font-size:19px; text-shadow:0 0 7px var(--bg), 0 0 7px var(--bg); } .rung-text b{ font-weight:600; }
.rung-detail{ max-height:0; overflow:hidden; transition:max-height 0.45s ease; font-size:14.5px; color:var(--fg-dim2); line-height:1.6; max-width:600px; text-shadow:0 0 7px var(--bg), 0 0 7px var(--bg); }
.rung:hover .rung-detail{ max-height:60px; margin-top:12px; }
.rung-subs{ margin-top:20px; padding-left:20px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.rung-sub{ display:flex; flex-wrap:wrap; gap:16px; align-items:baseline; padding:12px 16px; margin-left:4px; border:1px solid transparent; border-radius:8px; cursor:default; transition:background 0.3s ease, border-color 0.3s ease, padding 0.3s ease; }
.rung-sub:hover{ background:var(--chip); border-color:var(--line); padding-left:22px; }
.rung-sub-year{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--accent); width:72px; flex-shrink:0; letter-spacing:0.02em; }
.rung-sub-text{ font-family:'Fraunces', serif; font-weight:400; font-size:16.5px; color:var(--fg-dim2); text-shadow:0 0 7px var(--bg), 0 0 7px var(--bg); }
.rung-sub:hover .rung-sub-text{ color:var(--fg); }
.rung-sub-detail{ flex-basis:100%; max-height:0; overflow:hidden; transition:max-height 0.45s ease; font-size:13.5px; color:var(--fg-dim2); line-height:1.6; max-width:560px; margin-left:88px; text-shadow:0 0 7px var(--bg), 0 0 7px var(--bg); }
.rung-sub:hover .rung-sub-detail{ max-height:80px; margin-top:8px; }
.rung-parent:hover{ padding-left:60px; }
.cv-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.cv-download{ display:inline-flex; align-items:center; gap:10px; font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:18px; color:var(--fg); text-decoration:none; padding:15px 30px; border:1px solid var(--line-strong); border-radius:2px; transition:color 0.25s ease, background 0.25s ease, border-color 0.25s ease; }
.cv-download:hover{ color:var(--bg); background:var(--accent); border-color:var(--accent); }

/* Publications = wavefunction spine */
.wave-stage{ position:relative; margin-top:56px; }
#pubwave-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.pubs{ position:relative; z-index:2; }
.pub-group-label{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--accent); letter-spacing:0.09em; text-transform:uppercase; margin:44px 0 4px 72px; }
.pub-group-label:first-child{ margin-top:0; }
.pub-row{ padding:30px 0 30px 72px; border-bottom:1px solid var(--line); cursor:pointer; position:relative; transition:padding 0.35s ease; }
.pub-group-label + .pub-row{ border-top:1px solid var(--line); }
.pub-row:hover{ padding-left:92px; }
.pub-title{ font-family:'Fraunces', serif; font-weight:400; font-size:22px; max-width:640px; transition:color 0.3s ease; }
.pub-title a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); transition:border-color 0.3s ease, color 0.3s ease; }
.pub-title a:hover{ color:var(--blue); border-bottom-color:var(--blue); }
.pub-meta{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--fg-dim); margin-top:8px; }
.pub-detail{ max-height:0; overflow:hidden; transition:max-height 0.45s ease; font-size:14.5px; color:var(--fg-dim); line-height:1.6; max-width:600px; }
.pub-row:hover .pub-detail{ max-height:90px; margin-top:12px; }

/* Projects = coupled qubit graph */
.graph-stage{ position:relative; margin-top:56px; height:660px; }
#graph-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.node-label{ position:absolute; z-index:2; transform:translate(-50%,-50%); text-align:center; width:200px; pointer-events:none; }
.node-label h3{ font-family:'Fraunces', serif; font-weight:400; font-size:19px; margin-bottom:6px; }
.node-label p{ font-size:12.5px; color:var(--fg-dim); line-height:1.5; opacity:0; max-height:0; overflow:hidden; transition:opacity 0.35s ease, max-height 0.35s ease; }
.node-label.active p{ opacity:1; max-height:80px; }
.node-open{ display:inline-block; margin-top:10px; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); opacity:0; transform:translateY(4px); transition:opacity 0.3s ease, transform 0.3s ease; pointer-events:none; cursor:pointer; }
.node-label.active .node-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.node-open:hover{ text-decoration:underline; }

/* project info card / modal */
.project-modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.project-modal.open{ opacity:1; pointer-events:auto; }
.pm-backdrop{ position:absolute; inset:0; background:rgba(6,8,10,0.6); backdrop-filter:blur(4px); }
html[data-theme="light"] .pm-backdrop{ background:rgba(150,153,150,0.45); }
.pm-card{ position:relative; z-index:1; width:min(560px,100%); background:var(--bg); border:1px solid var(--line-strong); box-shadow:0 30px 80px rgba(0,0,0,0.5); transform:translateY(16px) scale(0.98); transition:transform 0.35s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
.project-modal.open .pm-card{ transform:translateY(0) scale(1); }
.pm-media{ position:relative; height:210px; overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface); }
.pm-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pm-body{ padding:26px 30px 32px; }
.pm-tag{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.pm-body h3{ font-family:'Fraunces', serif; font-weight:400; font-size:28px; line-height:1.12; margin-bottom:14px; }
.pm-body p{ font-size:15px; color:var(--fg-dim); line-height:1.7; margin-bottom:22px; }
.pm-link{ display:inline-block; font-family:'JetBrains Mono', monospace; font-size:12.5px; letter-spacing:0.04em; color:var(--fg); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:3px; transition:color 0.25s ease; }
.pm-link:hover{ color:var(--accent); }
.pm-close{ position:absolute; top:12px; right:14px; z-index:2; background:rgba(6,8,10,0.4); border:1px solid var(--line-strong); color:#ECEDEA; width:32px; height:32px; font-size:18px; line-height:1; cursor:pointer; transition:all 0.25s ease; }
.pm-close:hover{ background:var(--accent); color:#0B0D10; border-color:var(--accent); }

.contact-wrap{ padding:150px 0 110px; }
.readout-stage{ position:relative; margin-top:44px; }
#readout-canvas{ display:block; width:100%; height:200px; }
.contact-links{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:28px; padding:0 30px; }
.readout-stage{ cursor:crosshair; }
.contact-links a{ display:block; text-align:center; font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:18px; color:var(--fg-dim); text-decoration:none; padding:15px 20px; border:1px solid transparent; border-radius:10px; transition:color 0.25s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.contact-links a:hover, .contact-links a.active{ color:var(--fg); background:var(--chip); border-color:var(--line); box-shadow:0 8px 30px rgba(0,0,0,0.25); backdrop-filter:blur(3px); }
footer{ border-top:1px solid var(--line); padding:24px 48px; display:flex; justify-content:space-between; font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--fg-dim); position:relative; z-index:2; background:var(--bg); }

@media (max-width:900px){ .graph-stage{ height:640px; } .node-label{ width:160px; } }
@media (max-width:820px){ nav{ padding:22px 20px; } nav .links{ gap:18px; } nav .brand{ font-size:18px; } nav .links button{ font-size:13px; } section{ padding:0 20px; } .wrap{ padding:110px 0; } }

/* ---- Circuit schematic viewer (circuit.html) ---- */
.circuit-page{ min-height:100vh; display:flex; flex-direction:column; }
.circuit-page nav .nav-text-link{
  font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:16px;
  color:var(--fg-dim); text-decoration:none; transition:color 0.25s ease;
}
.circuit-page nav .nav-text-link:hover{ color:var(--fg); }
.circuit-header{
  position:relative; z-index:2; padding:120px 56px 24px; max-width:1100px;
}
.circuit-title{
  font-family:'Fraunces', serif; font-weight:340;
  font-size:clamp(36px,5vw,64px); line-height:1.05; margin-top:8px;
}
.circuit-lede{
  font-size:16px; color:var(--fg-dim); max-width:640px; margin-top:16px; line-height:1.65;
}
.circuit-toolbar{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  padding:12px 56px 20px; border-bottom:1px solid var(--line);
}
.circuit-file{ display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--fg-dim); }
.circuit-file select{
  background:var(--surface); color:var(--fg); border:1px solid var(--line-strong);
  border-radius:4px; padding:8px 12px; font-family:'Space Grotesk', sans-serif; font-size:14px;
}
.circuit-btn{
  background:none; border:1px solid var(--line-strong); color:var(--fg);
  font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:14px;
  padding:8px 16px; border-radius:4px; cursor:pointer;
  transition:background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.circuit-btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
.circuit-status{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--fg-dim); margin-left:auto; }
.circuit-stage{
  position:relative; z-index:2; flex:1; min-height:520px; margin:0 56px 40px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  overflow:hidden; cursor:grab; touch-action:none;
}
.circuit-stage:active, .schematic-svg.dragging{ cursor:grabbing; }
.circuit-error{
  padding:40px; color:var(--fg-dim); font-size:15px; line-height:1.7; max-width:560px;
}
.circuit-error code{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--accent); }

.schematic-svg{ width:100%; height:100%; display:block; user-select:none; }
.schematic-svg .sym-stroke{
  stroke:var(--fg); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.schematic-svg .sym-stroke.thick{ stroke-width:2.4; }
.schematic-svg .sym-stroke.dim{ stroke:var(--fg-dim); stroke-width:1.1; opacity:0.7; }
.schematic-svg .sym-fill{ fill:var(--accent); stroke:none; }
.schematic-svg .sym-box{ fill:var(--surface); }
.schematic-svg .wire{
  stroke:var(--fg-dim2); stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.schematic-svg .junction{ fill:var(--fg-dim2); }
.schematic-svg .sch-title{
  font-family:'Fraunces', serif; font-size:18px; fill:var(--fg); font-weight:400;
}
.schematic-svg .sch-subtitle{
  font-family:'Bricolage Grotesque', sans-serif; font-size:10px; fill:var(--fg-dim);
}
.schematic-svg .sch-annot{
  font-family:'JetBrains Mono', monospace; font-size:10px; fill:var(--accent);
}
.schematic-svg .comp-label{
  font-family:'Space Grotesk', sans-serif; font-size:11px; fill:var(--fg); font-weight:500;
}
.schematic-svg .comp-value{
  font-family:'JetBrains Mono', monospace; font-size:9px; fill:var(--fg-dim);
}
.schematic-svg .group-block{
  fill:var(--surface); stroke:var(--line-strong); stroke-width:1.2; stroke-dasharray:4 3;
}
.schematic-svg .group-label{
  font-family:'Fraunces', serif; font-size:14px; fill:var(--fg-dim); font-style:italic;
}

/* Level of detail: zoomed in = show components; zoomed out = show group blocks */
.schematic-svg .lod-low{ opacity:0; pointer-events:none; transition:opacity 0.2s ease; }
.schematic-svg .lod-zoomed-out .lod-low{ opacity:1; }
.schematic-svg .lod-zoomed-out .lod-high .in-group,
.schematic-svg .lod-zoomed-out .lod-high .comp-labels .in-group{ opacity:0.15; }
.schematic-svg .lod-zoomed-out .comp-value{ opacity:0; }
.schematic-svg .lod-zoomed-in .lod-low{ opacity:0; }

@media (max-width:820px){
  .circuit-header{ padding:100px 20px 20px; }
  .circuit-toolbar{ padding:12px 20px 16px; }
  .circuit-stage{ margin:0 20px 28px; min-height:420px; }
}