*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#1A1A2E;color:#E8E0D4;font-family:'DM Sans',sans-serif;font-weight:400;font-size:clamp(0.95rem,1.8vw,1.15rem);line-height:1.72;overflow-x:hidden;letter-spacing:0.01em}

/* Circuit Background */
.circuit-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Sections */
.section{min-height:100vh;padding:clamp(3rem,8vh,8rem) clamp(16px,5vw,64px);position:relative;z-index:1;display:flex;align-items:center;justify-content:center}

/* Glass Panels */
.glass-panel{background:rgba(242,235,220,0.12);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);border:1px solid rgba(184,115,51,0.25);border-radius:2px;box-shadow:0 8px 32px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.08);padding:clamp(1.5rem,3vw,2.5rem)}

/* Hero */
.panel--hero{max-width:900px;width:100%;position:relative}
.hero-content{display:flex;align-items:center;gap:clamp(2rem,4vw,4rem)}
.hero-left{flex:1}
.hero-title{font-family:'Libre Baskerville',serif;font-weight:400;font-style:italic;font-size:clamp(2.4rem,5.5vw,4.8rem);letter-spacing:-0.01em;line-height:1.1;color:#E8E0D4;margin-bottom:0.5em}
.hero-title em{font-style:italic}
.copper-rule{border:none;height:1px;background:#B87333;width:61.8%;margin-bottom:1rem;opacity:0.5}
.hero-sub{font-family:'DM Sans',sans-serif;font-weight:400;color:#9A8C7E;max-width:38ch}
.hero-jp{display:flex;align-items:center}
.jp-vertical{font-family:'Libre Baskerville',serif;font-weight:400;font-size:1.4rem;writing-mode:vertical-rl;color:#9A8C7E;letter-spacing:0.3em;opacity:0.6}

/* Diagrams */
.section--diagrams{flex-direction:column;gap:clamp(1rem,2vw,2rem)}
.diagram-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(0.8rem,1.5vw,1.5rem);max-width:1000px;width:100%}
.section-heading{font-family:'Libre Baskerville',serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.5rem);color:#E8E0D4;margin-bottom:0.8rem}
.body-text{color:#E8E0D4;max-width:50ch;margin-bottom:1em}
.body-text--sm{font-size:0.9rem;color:#9A8C7E}
.dataviz-svg{width:100%;max-height:180px;display:block;margin-bottom:0.5rem}
.dataviz-label{font-family:'IBM Plex Mono',monospace;font-size:clamp(0.7rem,0.9vw,0.8rem);color:#9A8C7E;letter-spacing:0.04em}

/* Divider */
.section-divider{width:100%;padding:0 clamp(16px,5vw,64px);position:relative;z-index:1}
.section-divider svg{width:100%;height:8px}

/* Typewriter */
.section--typewriter{min-height:100vh}
.panel--typewriter{max-width:75%;margin-left:15%;min-height:300px;position:relative;display:flex;align-items:flex-start;gap:0}
.typewriter-content{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:clamp(0.85rem,1.5vw,1.05rem);color:#E8E0D4;line-height:1.8;white-space:pre-wrap}
.typewriter-cursor{font-family:'IBM Plex Mono',monospace;color:#B87333;animation:cursorBlink 530ms step-end infinite}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}

/* Circuit Viz */
.section--circuit{flex-direction:column;gap:2rem}
.circuit-viz{position:relative;width:100%;max-width:800px}
.circuit-svg{width:100%;height:auto}
.circuit-trace{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 4s cubic-bezier(0.4,0,0.2,1)}
.circuit-trace.drawn{stroke-dashoffset:0}
.circuit-node{transform:scale(0);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.circuit-node.active{transform:scale(1)}
.node-labels{position:absolute;inset:0}
.node-label{position:absolute;text-align:center;transform:translate(-50%,0)}
.node-kanji{font-family:'Libre Baskerville',serif;font-size:1.2rem;color:#E8E0D4;display:block}
.node-roman{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:#9A8C7E;letter-spacing:0.04em;display:block;margin-top:0.2rem}

/* Archive */
.section--archive{padding-top:clamp(2rem,4vh,4rem)}
.archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,2rem);max-width:900px;width:100%}
.panel--archive{min-height:180px}
.archive-heading{font-family:'Libre Baskerville',serif;font-weight:700;font-size:clamp(1rem,1.8vw,1.3rem);color:#E8E0D4;margin-bottom:0.8rem}
.specimen-text{font-family:'Libre Baskerville',serif;font-size:clamp(1.8rem,4vw,3rem);color:#B87333;letter-spacing:0.04em;margin-bottom:0.5rem}

/* Reveals */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
  .diagram-grid{grid-template-columns:1fr}
  .panel--typewriter{max-width:95%;margin-left:2.5%}
  .hero-content{flex-direction:column}
  .hero-jp{display:none}
  .archive-grid{grid-template-columns:1fr}
  .node-label{position:static;transform:none;margin:0.5rem 0}
  .node-labels{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
}