*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#1C1410;color:#EDE4D4;font-family:'Literata',serif;font-weight:400;font-size:clamp(0.95rem,1.8vw,1.05rem);line-height:1.72;overflow-x:hidden}

/* Circuit background texture */
.circuit-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:repeating-linear-gradient(90deg,transparent 0px,transparent 48px,rgba(212,130,62,0.04) 48px,rgba(212,130,62,0.04) 49px),repeating-linear-gradient(0deg,transparent 0px,transparent 48px,rgba(212,130,62,0.04) 48px,rgba(212,130,62,0.04) 49px)}

/* Progress ring */
.progress-ring{position:fixed;bottom:20px;right:20px;z-index:100;cursor:pointer}
.ring-fill{transition:stroke-dashoffset 0.3s ease;transform:rotate(-90deg);transform-origin:50% 50%}

/* Lens flares */
.flare{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);opacity:0;transition:opacity 0.8s ease;will-change:opacity}
.flare-1{width:400px;height:400px;left:25%;top:35%;background:radial-gradient(ellipse at center,rgba(244,198,122,0.12) 0%,rgba(232,148,74,0.05) 40%,transparent 70%)}
.flare-2{width:350px;height:350px;left:70%;top:60%;background:radial-gradient(ellipse at center,rgba(244,198,122,0.10) 0%,rgba(232,148,74,0.04) 40%,transparent 70%)}
.flare-3{width:300px;height:300px;left:15%;top:20%;background:radial-gradient(ellipse at center,rgba(244,198,122,0.10) 0%,transparent 60%)}
.flare-4{width:250px;height:250px;left:65%;top:55%;background:radial-gradient(ellipse at center,rgba(244,198,122,0.08) 0%,transparent 60%)}
.flare.active{opacity:1}

/* Scenes */
.scene{min-height:100vh;position:relative;padding:clamp(40px,8vw,100px) clamp(16px,4vw,48px)}

/* Reading Room (Hero) */
.reading-room{display:flex;align-items:center;justify-content:flex-start}
.hero-content{margin-left:8%;position:relative;z-index:5}
.hero-title{font-family:'Anybody',sans-serif;font-weight:700;font-size:clamp(2.2rem,5vw,4rem);letter-spacing:0.04em;color:#EDE4D4;line-height:1.2}
.hero-subtitle{font-family:'Literata',serif;font-weight:600;font-style:italic;font-size:clamp(1rem,2vw,1.2rem);color:#A89880;margin-top:8px}
.hero-trace{display:block;margin-top:24px}

/* Lifecycle map */
.lifecycle-map{display:flex;gap:clamp(24px,4vw,48px);align-items:flex-start;padding-top:clamp(60px,10vw,120px)}
.map-text{flex:0 0 35%;padding-top:40px}
.map-block{margin-bottom:clamp(20px,3vw,40px)}
.map-block h2{font-family:'Anybody',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:0.04em;color:#EDE4D4;margin-bottom:8px}
.map-block p{color:#A89880;max-width:45ch}
.circuit-diagram{flex:1;display:flex;justify-content:center}
.circuit-svg{max-width:100%}
.node-label{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:7px;fill:#E8944A;letter-spacing:0.05em}

/* SVG draw animations */
.draw-line{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.5s ease-out}
.draw-visible .draw-line{stroke-dashoffset:0}
.draw-circle{stroke-dasharray:630;stroke-dashoffset:630;transition:stroke-dashoffset 2s ease-out}
.draw-visible .draw-circle{stroke-dashoffset:0}

/* Node pulse */
.node{opacity:0;transition:opacity 0.4s ease}
.draw-visible .node{opacity:1}

/* Trace connector */
.trace-connector{display:flex;justify-content:center;padding:0}

/* Reviews */
.reviews-section{padding-top:clamp(40px,6vw,80px)}
.review-card{max-width:520px;margin-left:var(--offset,8%);margin-bottom:clamp(40px,6vw,64px);position:relative}
.card-inner{background:#3A2C1F;padding:clamp(20px,3vw,32px);border-right:2px solid #D4823E;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,2px 96%,0 92%,3px 88%,0 84%,2px 80%,0 76%,3px 72%,0 68%,2px 64%,0 60%,3px 56%,0 52%,2px 48%,0 44%,3px 40%,0 36%,2px 32%,0 28%,3px 24%,0 20%,2px 16%,0 12%,3px 8%,0 4%)}
.card-inner::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 26px,rgba(168,152,128,0.03) 26px,rgba(168,152,128,0.03) 27px);pointer-events:none}

.review-title{font-family:'Anybody',sans-serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.6rem);letter-spacing:0.04em;color:#EDE4D4;margin-bottom:4px}
.material-code{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.85rem;color:#E8944A;display:block;margin-bottom:12px}
.circuit-score{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.circuit-score svg{flex-shrink:0}
.score-fill{transition:width 0.8s ease}
.score-label{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.75rem;color:#A89880}
.card-inner p{color:#EDE4D4;max-width:50ch}

/* Interstitials */
.interstitial{padding:clamp(16px,3vw,32px) 0;overflow:hidden}
.interstitial-svg{display:block;max-width:100%}

/* Annotation wall */
.annotation-wall{min-height:100vh;position:relative;padding-bottom:clamp(60px,10vw,120px)}
.anno-field{position:relative;min-height:80vh}
.anno-block{position:absolute;max-width:clamp(240px,30vw,360px);background:#3A2C1F;padding:clamp(16px,2vw,24px);border:1px solid rgba(212,130,62,0.15);opacity:0;transform:scale(0.96);transition:opacity 0.6s cubic-bezier(0.25,0.1,0.25,1),transform 0.6s cubic-bezier(0.25,0.1,0.25,1)}
.anno-block.visible{opacity:1;transform:scale(1)}
.anno-block p{font-family:'Literata',serif;font-size:clamp(0.85rem,1.4vw,0.95rem);color:#A89880;line-height:1.65}

/* Reclaim */
.reclaim-section{background:linear-gradient(180deg,#1C1410 0%,#2B2018 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center}
.reclaim-circuit{margin-bottom:clamp(24px,4vw,48px)}
.reclaim-svg{display:block;margin:0 auto}
.reclaim-heading{font-family:'Anybody',sans-serif;font-weight:500;font-size:clamp(1.4rem,3vw,1.8rem);color:#EDE4D4;letter-spacing:0.02em}

/* Footer */
.site-footer{margin-top:clamp(32px,6vw,64px)}
.footer-url{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.75rem;color:#A89880;letter-spacing:0.04em}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 0.6s cubic-bezier(0.25,0.1,0.25,1),transform 0.6s cubic-bezier(0.25,0.1,0.25,1);transition-delay:var(--stagger-delay,0ms)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Coffee ring stain */
.reading-room::after{content:'';position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(ellipse at center,transparent 40%,rgba(168,152,128,0.06) 42%,rgba(168,152,128,0.04) 55%,transparent 58%);right:15%;top:25%;pointer-events:none}

/* Responsive */
@media(max-width:1024px){
.lifecycle-map{flex-direction:column}
.map-text{flex:none}
.circuit-diagram{margin-top:24px}
}
@media(max-width:600px){
.review-card{max-width:100%;margin-left:0 !important}
.anno-block{position:relative !important;left:auto !important;top:auto !important;max-width:100%;margin-bottom:16px}
.anno-field{min-height:auto}
.hero-content{margin-left:5%}
}