*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#F7F5F0;font-family:'Work Sans',sans-serif;font-weight:400;font-size:15px;line-height:1.74;color:#4A4540;overflow-x:hidden;display:flex}
.dot-overlay{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0;opacity:0.04;background-image:radial-gradient(circle,#2D2D2D 1px,transparent 1px);background-size:20px 20px}
.canvas-strip{position:fixed;right:0;top:0;bottom:0;width:320px;z-index:1;overflow:hidden;border-left:1px solid #E0DCD4}
.wave-canvas{width:100%;height:100%}
.wave-path{animation:waveShift 8s ease-in-out infinite}
.w2{animation-delay:2s;animation-duration:10s}
.w3{animation-delay:4s;animation-duration:12s}
@keyframes waveShift{0%,100%{transform:translateY(0)}50%{transform:translateY(20px)}}
.content-area{max-width:640px;margin:0 auto;padding:80px 40px;position:relative;z-index:2;margin-right:340px}
.hero-section{padding:60px 0;opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
.hero-section.visible{opacity:1;transform:translateY(0)}
.hero-title{font-family:'Caveat',cursive;font-weight:700;font-size:42px;color:#2D2D2D;margin-bottom:8px}
.hero-sub{margin-top:16px;font-size:16px;color:#4A4540}
.script-line{margin:8px 0 16px}
.script-line svg{width:100%;height:20px}
.calligraphic-line{stroke-dasharray:800;stroke-dashoffset:800;transition:stroke-dashoffset 1s ease-out}
.visible .calligraphic-line{stroke-dashoffset:0}
.content-block{padding:36px 40px;background:#FFFFFF;border:1px solid #E0DCD4;box-shadow:2px 3px 0 rgba(0,0,0,0.04);margin-bottom:32px;opacity:0;transform:translateY(16px);transition:opacity 0.4s ease,transform 0.4s ease}
.content-block.visible{opacity:1;transform:translateY(0)}
.block-1{transform:translate(-4px,16px)}.block-1.visible{transform:translate(-4px,0)}
.block-2{transform:translate(6px,16px)}.block-2.visible{transform:translate(6px,0)}
.block-3{transform:translate(-2px,16px)}.block-3.visible{transform:translate(-2px,0)}
h2{font-family:'Caveat',cursive;font-weight:700;font-size:28px;color:#2D2D2D;margin-bottom:4px}
.code-block{font-family:'Fira Code',monospace;font-size:13px;letter-spacing:0.02em;color:#6B5B8D;display:block;margin-top:16px;padding:12px 16px;background:#F7F5F0;border:1px solid #E0DCD4}
@media(max-width:768px){.canvas-strip{position:relative;width:100%;height:160px;border-left:none;border-top:1px solid #E0DCD4}.content-area{margin-right:0;padding:40px 20px}.content-block{padding:24px 20px}body{flex-direction:column-reverse}}