/* hwaklyul.com - Retro Vapor Computing */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--deep-purple:#2B1055;--vapor-pink:#D53369;--punch-cream:#FFF8E0;--phosphor-green:#39FF14;--crt-dark:#1A1A1A;--paper-white:#FFFFFF;--paper-green:#E8F5E9;--text-dark:#333333}

body{font-family:'VT323',monospace;font-weight:400;font-size:1rem;line-height:1.6;color:var(--paper-white);background:var(--deep-purple);overflow-x:hidden}

#console-panel{height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--deep-purple),var(--vapor-pink))}

.crt-screen{position:relative;width:90%;max-width:720px;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;border-radius:50%/4%;overflow:hidden}

.crt-vignette{position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 0 100px rgba(0,0,0,0.5);pointer-events:none}

.dot-matrix-title{font-family:'VT323',monospace;font-size:clamp(2rem,4vw,3.5rem);color:var(--paper-white);letter-spacing:0.1em;opacity:0;transition:opacity 0.5s ease}
.dot-matrix-title.visible{opacity:1}

.subtitle{font-family:'Noto Sans KR',sans-serif;font-size:1rem;color:rgba(255,255,255,0.7);margin-top:0.5rem;opacity:0;transition:opacity 0.5s ease}
.subtitle.visible{opacity:1}

.section-label{font-family:'Space Grotesk',sans-serif;font-size:0.9rem;letter-spacing:0.08em;color:var(--text-dark);margin-bottom:16px;text-align:center}

#punch-cards{background:var(--punch-cream);padding:80px 2rem;max-width:720px;margin:0 auto}

.punch-card{margin-bottom:40px;padding:24px;border:1px solid #D4C4A8}

.card-holes{display:grid;grid-template-columns:repeat(20,12px);gap:4px;margin-bottom:16px;justify-content:center}

.hole{width:12px;height:12px;border-radius:50%;border:1px solid #D4C4A8;transition:background 0.1s}
.hole.punched{background:var(--deep-purple);border-color:var(--deep-purple)}

.card-label{font-family:'Space Grotesk',sans-serif;font-size:0.85rem;color:var(--text-dark);line-height:1.7}

#oscilloscope{background:var(--crt-dark);padding:80px 2rem}

.crt-display{max-width:720px;margin:0 auto;position:relative;border-radius:50%/4%;overflow:hidden;box-shadow:inset 0 0 60px rgba(0,0,0,0.5);padding:2rem}

.crt-scanlines{position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,0.1) 1px,rgba(0,0,0,0.1) 2px);pointer-events:none;z-index:1}

.osc-wave{width:100%;height:200px}

.phosphor-line{filter:drop-shadow(0 0 6px #39FF14) drop-shadow(0 0 12px rgba(57,255,20,0.5));stroke-dasharray:800;stroke-dashoffset:800;transition:stroke-dashoffset 2s ease}
.phosphor-line.drawn{stroke-dashoffset:0}

#printout{background:repeating-linear-gradient(0deg,var(--paper-white) 0px,var(--paper-white) 8px,var(--paper-green) 8px,var(--paper-green) 16px);padding:60px 2rem}

.paper-feed{max-width:720px;margin:0 auto}

.print-text{font-family:'VT323',monospace;font-size:1rem;color:var(--text-dark);line-height:1.6;white-space:pre-wrap}