/* munju.im - Colors: #E8E8F0, #D0D0D8, #FFFFFF, #3A3A48, #5A5A68, #8A8A98, #8080C0, #C08090 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #E8E8F0; color: #5A5A68; font-family: 'Nunito', sans-serif; font-size: 1rem; line-height: 1.8; overflow-x: hidden; }

/* Breathing Surface */
.breathing-surface { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(128,128,192,0.06), transparent 70%); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.04; } 50% { transform: scale(1.02); opacity: 0.06; } }

/* Background Blobs */
.blob { position: fixed; z-index: 0; pointer-events: none; }
.blob-lavender { width: 400px; height: 400px; background: rgba(128,128,192,0.06); border-radius: 40% 60% 70% 30% / 50% 40% 60% 50%; top: 10%; left: -5%; animation: driftBlob1 40s ease-in-out infinite; }
.blob-rose { width: 350px; height: 350px; background: rgba(192,128,144,0.05); border-radius: 60% 40% 30% 70% / 40% 60% 50% 50%; bottom: 10%; right: -5%; animation: driftBlob2 50s ease-in-out infinite; }
@keyframes driftBlob1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, 30px); } }
@keyframes driftBlob2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, -20px); } }

/* Content */
.content { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem; }

/* Panels */
.panel { background: #E8E8F0; border-radius: 20px; padding: 2rem; margin-bottom: 2rem; box-shadow: 8px 8px 16px #D0D0D8, -8px -8px 16px #FFFFFF; opacity: 0; transform: translateY(15px); transition: opacity 0.8s ease, transform 0.8s ease; animation: panelBreathe 5s ease-in-out infinite; }
.panel.visible { opacity: 1; transform: translateY(0); }
@keyframes panelBreathe { 0%, 100% { box-shadow: 8px 8px 16px #D0D0D8, -8px -8px 16px #FFFFFF; } 50% { box-shadow: 9px 9px 17px #D0D0D8, -9px -9px 17px #FFFFFF; } }

/* Hero Panel */
.hero-panel { text-align: center; padding: 3rem 2rem; }
.neo-avatar { width: 120px; height: 120px; border-radius: 50%; box-shadow: 8px 8px 16px #D0D0D8, -8px -8px 16px #FFFFFF; margin: 0 auto 2rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.avatar-blob { width: 80px; height: 80px; border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; background: linear-gradient(135deg, #8080C0, #C08090); opacity: 0.7; animation: blobMorph 8s ease-in-out infinite; }
@keyframes blobMorph { 0%, 100% { border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; } 50% { border-radius: 55% 45% 40% 60% / 40% 55% 45% 60%; } }

/* Typography */
.display-title { font-weight: 700; font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: #3A3A48; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
.panel-title { font-weight: 700; font-size: clamp(1.3rem, 2.5vw, 1.7rem); color: #3A3A48; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.panel-text { color: #5A5A68; margin-bottom: 1rem; }
.whisper { font-weight: 300; font-size: 0.85rem; color: #8A8A98; }

/* Embossed Divider */
.embossed-divider { height: 1px; background: #D0D0D8; box-shadow: 0 1px 0 #FFFFFF; margin-bottom: 1.25rem; }

/* Neomorphic Well */
.neo-well { border-radius: 12px; padding: 1.25rem 1.5rem; box-shadow: inset 4px 4px 8px #D0D0D8, inset -4px -4px 8px #FFFFFF; margin: 1rem 0; }
.well-text { font-style: italic; color: #8A8A98; font-weight: 300; margin: 0; }

/* Responsive */
@media (max-width: 600px) {
    .panel { padding: 1.5rem; }
    .blob-lavender, .blob-rose { display: none; }
}