.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.scribble-pattern {
	background-image: radial-gradient(circle at 2px 2px, #bbbaa6 1px, transparent 0);
	background-size: 24px 24px;
	opacity: 0.15;
}
.cloud-mask {
	mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"><path d="M25 100a25 25 0 0 1 0-50 25 25 0 0 1 50 0 25 25 0 0 1 50 0 25 25 0 0 1 50 0 25 25 0 0 1 0 50Z" /></svg>');
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}


.material-symbols-outlined {
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .scrapbook-bg {
            background-color: #ffffd3;
            background-image: radial-gradient(circle at 2px 2px, #bbbaa6 1px, transparent 0);
            background-size: 32px 32px;
        }
        .tape-effect {
            position: relative;
        }
        .tape-effect::after {
            content: '';
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%) rotate(-3deg);
            width: 80px;
            height: 25px;
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(2px);
            border: 1px solid rgba(0,0,0,0.05);
            z-index: 10;
        }
        .sticky-note {
            transform: rotate(var(--rotation, -1deg));
            transition: transform 0.3s ease;
        }
        .sticky-note:hover {
            transform: scale(1.05) rotate(0deg);
            z-index: 20;
        }
        .sound-wave {
            display: flex;
            align-items: center;
            gap: 2px;
            height: 32px;
        }
        .wave-bar {
            width: 3px;
            background: currentColor;
            border-radius: 10px;
            animation: bounce 1s ease-in-out infinite;
        }
        @keyframes bounce {
            0%, 100% { height: 8px; }
            50% { height: 24px; }
        }