* { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; text-decoration: none; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; -moz-osx-font-smoothing: grayscale; line-height: inherit; outline: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); } ul { list-style: none; } a { text-decoration: none; color: inherit; } input, textarea { outline: 0; } img { border: 0; } main, header, nav, section { display: block; } /* -------------------------------------------------------- Soft-mode cosmetic layer (gentler edges & atmosphere) ----------------------------------------------------- */ body.soft-mode { /* breathing (gentle global zoom) */ animation: breathe 14s ease-in-out infinite; } body.soft-mode #container, body.soft-mode #container * { border-radius: 4px; transition: border-radius 0.6s ease; } /* Grain & vignette overlay via pseudo-elements on */ body.soft-mode::before, body.soft-mode::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; } /* subtle paper / grain texture (replace URL if you add your own PNG) */ body.soft-mode::before { background-image: url("assets/texture/paper.png"), radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); background-size: cover; mix-blend-mode: overlay; opacity: 0.15; } /* vignette */ body.soft-mode::after { background: radial-gradient(circle at center, transparent 65%, rgba(0,0,0,0.25) 100%); } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }