*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--void:#F5F2ED;--ink:#0D0D0D;--red:#C73E1D;--blue:#2B4162;--ash:#8A8D8F;--gold:#D4A843;--ghost:#E8E6E1;--scroll-weight:500}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font-family:'Zen Kaku Gothic New',sans-serif;font-weight:500;overflow-x:hidden}

.noise-overlay{position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:0.03;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

.scroll-progress{position:fixed;top:0;left:0;width:0;height:2px;background:var(--red);z-index:999;transition:width 0.1s linear}

.kanji-wm{position:fixed;font-size:40vw;opacity:0.04;pointer-events:none;z-index:0;mix-blend-mode:overlay;color:var(--ghost)}
.wm-spear{top:10%;left:-5%}
.wm-shield{top:10%;right:-5%}

.koan{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.koan-num{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:0.75rem;font-weight:300;letter-spacing:0.08em;text-transform:uppercase;color:var(--ash)}

/* Koan 1 - Split domain */
.koan-1{display:flex;flex-direction:row}
.half{width:50%;min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative}
.order{background:var(--void)}
.chaos{background:var(--ink)}
.domain-order{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:clamp(2rem,8vw,8rem);color:var(--ink);opacity:0;transform:translateX(-30vw);transition:all 1.2s cubic-bezier(0.34,1.56,0.64,1)}
.domain-chaos{font-family:'Caveat',cursive;font-weight:400;font-size:clamp(2rem,8vw,8rem);color:var(--void);opacity:0;transform:translateX(30vw);transition:all 1.2s cubic-bezier(0.34,1.56,0.64,1)}
.domain-order.visible,.domain-chaos.visible{opacity:1;transform:translateX(0)}
.domain-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(3rem,10vw,10rem);color:var(--red);z-index:10}
.ink-splat{position:absolute;border-radius:50%;background:var(--ink);opacity:0.3}
.s1{width:80px;height:80px;top:20%;right:20%;filter:blur(2px)}
.s2{width:40px;height:40px;bottom:30%;left:25%;filter:blur(1px)}

/* Koan 2 - Hidden content */
.koan-2{background:var(--void)}
.hidden-content{max-width:600px;padding:2rem;text-align:center}
.hidden-content p{font-size:clamp(1rem,2vw,1.8rem);line-height:1.6;margin-bottom:2rem;opacity:0;transition:opacity 1.5s ease}
.reveal-on-scroll.visible p{opacity:1}
.glyph{width:60px;height:60px;color:var(--red);margin:0 auto;animation:spin-slow 120s linear infinite}
@keyframes spin-slow{to{transform:rotate(360deg)}}

/* Koan 3 - Still motion */
.still-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:min(400px,80vw)}
.cell{width:100%;aspect-ratio:1;background:var(--ash);opacity:0.3}
.c1{animation:morph 300s ease-in-out infinite}.c2{animation:morph 280s ease-in-out infinite 20s}
.c3{animation:morph 260s ease-in-out infinite 40s}.c4{animation:morph 320s ease-in-out infinite 10s}
.c5{animation:morph 290s ease-in-out infinite 50s;background:var(--red)}.c6{animation:morph 270s ease-in-out infinite 30s}
.c7{animation:morph 310s ease-in-out infinite 15s}.c8{animation:morph 250s ease-in-out infinite 45s}
.c9{animation:morph 300s ease-in-out infinite 25s;background:var(--blue)}
@keyframes morph{0%,100%{border-radius:0;transform:rotate(0)}25%{border-radius:30%;transform:rotate(5deg)}50%{border-radius:50%;transform:rotate(0)}75%{border-radius:10%;transform:rotate(-5deg)}}

/* Koan 4 - Loud silence */
.koan-4{background:var(--void)}
.loud-silence{text-align:center}
.ghost-text{font-weight:700;font-size:clamp(3rem,15vw,15rem);color:#F2F0EB;transition:color 0.6s ease-out;cursor:default;user-select:none}
.ghost-text:hover,.ghost-text.revealed{color:var(--ink)}

/* Koan 5 - Ordered chaos */
.koan-5{background:var(--void)}
.ordered-chaos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:min(500px,90vw);border:1px solid var(--blue)}
.oc-cell{padding:2rem;display:flex;align-items:center;justify-content:center;font-size:clamp(1.5rem,3vw,3rem);position:relative;border:1px solid var(--ghost)}
.oc-cell svg{width:40px;height:40px}
.small{font-size:0.8rem;color:var(--ash);font-family:'IBM Plex Mono',monospace;letter-spacing:0.08em}

/* Koan 6 - Ancient/Future */
.koan-6{position:relative;background:var(--void);overflow:hidden}
.ancient-layer{position:relative;z-index:1;max-width:500px;padding:2rem}
.ancient-layer p{font-family:'Caveat',cursive;font-size:clamp(1.2rem,2.5vw,2rem);color:var(--ash);line-height:1.6}
.future-layer{position:absolute;inset:0;z-index:2;mix-blend-mode:difference;display:flex;align-items:center;justify-content:center;pointer-events:none}
.geo-h{width:60%;height:2px;background:var(--red);position:absolute}
.geo-v{width:2px;height:60%;background:var(--blue);position:absolute}
.mono-label{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:var(--gold);position:absolute;bottom:30%;right:15%;letter-spacing:0.08em;text-transform:uppercase}

/* Koan 7 - Resolution */
.koan-7{background:var(--void)}
.resolution{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.5rem);max-width:600px;text-align:center;line-height:1.6;color:var(--gold)}

@media(max-width:768px){
.koan-1{flex-direction:column}
.half{width:100%;min-height:50vh}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}