:root {
    --bg-color: #FFF8F0;
    --text-color: #4A4A4A;
    --heading-color: #2C2C2C;
    --primary-accent: #FF6B6B;
    --secondary-accent: #FFD93D;
    --tertiary-accent: #6BCB77;
    --card-bg: rgba(255, 255, 255, 0.6);
    --card-shadow: 0 8px 32px 0 rgba(138, 138, 138, 0.2);
    --card-hover-shadow: 0 12px 40px 0 rgba(138, 138, 138, 0.3);
    --card-border: rgba(255, 255, 255, 0.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    cursor: none;
    overflow-x: hidden;
    line-height: 1.7;
}

.gradient-bg {
    position: fixed;
    top: 0; left: 0;
    width: 200%; height: 200%;
    z-index: -2;
    background: linear-gradient(45deg, var(--primary-accent), var(--secondary-accent), var(--tertiary-accent), #4D96FF);
    background-size: 400% 400%;
    animation: gradient-animation 20s ease infinite;
    opacity: 0.2;
}

@keyframes gradient-animation {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    50% { transform: translate(0, 0) rotate(180deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

#scribble-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    pointer-events: none;
}

#cursor-container {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 9999;
    pointer-events: none;
}

#cursor-dot {
    position: absolute;
    width: 8px; height: 8px;
    background-color: var(--primary-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, opacity 0.3s;
}

#cursor-outline {
    position: absolute;
    width: 40px; height: 40px;
    border: 2px solid var(--primary-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out, width 0.4s, height 0.4s;
    opacity: 0.5;
}

body[data-cursor-style="gooey"] #cursor-container { filter: url(#gooey-filter); }
body[data-cursor-style="gooey"] #cursor-dot, 
body[data-cursor-style="gooey"] #cursor-outline { background-color: var(--primary-accent); border: none; }

body[data-cursor-style="pixelated"] #cursor-dot { width: 10px; height: 10px; border-radius: 0; }
body[data-cursor-style="pixelated"] #cursor-outline { width: 30px; height: 30px; border-radius: 0; }

body[data-cursor-style="text-flag"] #cursor-dot::after {
    content: 'NAVIGATE';
    position: absolute;
    top: 50%; left: 15px; transform: translateY(-50%);
    color: var(--heading-color); font-family: 'Roboto Mono', monospace;
    font-size: 14px; font-weight: bold; white-space: nowrap;
}
#cursor-container.is-hovering body[data-cursor-style="text-flag"] #cursor-dot::after { content: 'ACTION'; }

body[data-cursor-style="rainbow"] #cursor-dot,
body[data-cursor-style="rainbow"] #cursor-outline { animation: rainbow-hue 5s linear infinite; }
@keyframes rainbow-hue { to { filter: hue-rotate(360deg); } }

.cursor-dynamic-element { position: absolute; top: 0; left: 0; pointer-events: none; border-radius: 50%; }

.aurora-segment { width: 4px; height: 30px; border-radius: 4px; background: linear-gradient(180deg, var(--primary-accent), var(--secondary-accent), var(--tertiary-accent)); filter: blur(2px); }
.comet-dot { background-color: var(--primary-accent); opacity: 0.8; }
.ripple-wave { background: transparent; border: 2px solid var(--primary-accent); animation: ripple-animation 1s ease-out forwards; }
@keyframes ripple-animation { from { width: 0; height: 0; opacity: 0.7; } to { width: 80px; height: 80px; opacity: 0; } }
.bubble { border: 1px solid rgba(255, 107, 107, 0.5); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent); animation: float-up 4s ease-out forwards; pointer-events: auto; }
@keyframes float-up { from { opacity: 0.8; transform: translateY(0); } to { opacity: 0; transform: translateY(-200px); } }
.dust-particle { background-color: var(--secondary-accent); box-shadow: 0 0 10px var(--secondary-accent); }
.snowflake { color: #4D96FF; font-size: 20px; }
.emoji-particle { font-size: 20px; opacity: 1; transition: transform 1s, opacity 1s; }
.hyperspace-line { background-color: white; width: 2px; }

.ghost-body { width: 30px; height: 40px; background: rgba(255,255,255,0.8); border-radius: 50% 50% 30% 30%; position: relative; animation: ghost-bob 2s ease-in-out infinite; }
.ghost-eye { width: 5px; height: 5px; background: #333; position: absolute; top: 15px; }
.ghost-eye.left { left: 8px; }
.ghost-eye.right { right: 8px; }
@keyframes ghost-bob { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }

.character-body { width: 30px; height: 30px; background: var(--tertiary-accent); position: relative; }
.character-eye-socket { width: 10px; height: 10px; background: white; border-radius: 50%; position: absolute; top: 8px; }
.character-eye-socket.left { left: 4px; }
.character-eye-socket.right { right: 4px; }
.character-pupil { width: 5px; height: 5px; background: #333; border-radius: 50%; position: absolute; top: 2.5px; left: 2.5px; }

#cursor-container.is-hovering #cursor-outline { width: 60px; height: 60px; opacity: 1; border-color: var(--heading-color); background-color: rgba(255, 107, 107, 0.1); }
#cursor-container.is-hovering #cursor-dot { opacity: 0; }
#cursor-container.is-text-hovering #cursor-outline { height: 30px; border-radius: 2px; background-color: var(--primary-accent); border-color: var(--primary-accent); }
#cursor-container.is-hidden * { opacity: 0 !important; }

.container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
.hero { text-align: center; padding: 5rem 0; }
.hero h1 { font-size: 3.8rem; font-weight: 700; color: var(--heading-color); margin-bottom: 1rem; }
.hero p { font-size: 1.2rem; max-width: 600px; margin: 0 auto; }
#style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 5rem; }
.card { background: var(--card-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--card-border); border-radius: 20px; padding: 2rem; box-shadow: var(--card-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; }
.card:hover { transform: translateY(-12px); box-shadow: var(--card-hover-shadow); }
.card.active { box-shadow: var(--card-hover-shadow); border: 1px solid var(--primary-accent); }
.card.active::before { content: 'ACTIVE'; position: absolute; top: 1.5rem; right: 1.5rem; background: var(--primary-accent); color: white; padding: 0.2rem 0.6rem; border-radius: 8px; font-size: 0.7rem; font-weight: 600; }
.card h2 { font-size: 1.5rem; margin-bottom: 0.75rem; color: var(--heading-color); }
.card p { font-size: 0.95rem; margin-bottom: 1.25rem; }
.tags span { background: rgba(0,0,0,0.05); color: var(--text-color); font-size: 0.8rem; padding: 0.4rem 0.8rem; border-radius: 10px; display: inline-block; margin-top: 5px; }
.demo-area { background: var(--card-bg); backdrop-filter: blur(10px); border: 1px solid var(--card-border); border-radius: 20px; padding: 3rem; margin-bottom: 5rem; }
.interactive-elements { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-bottom: 2rem; }
.interactive-link { color: var(--heading-color); text-decoration: none; font-size: 1.2rem; font-weight: 600; position: relative; padding: 0.5rem; }
.interactive-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent)); transform: scaleX(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
.interactive-link:hover::after { transform: scaleX(1); }
.magnetic-button { background: var(--primary-accent); color: white; border: none; padding: 1rem 2.5rem; font-size: 1rem; font-weight: 600; border-radius: 14px; transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.3s; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4); }
.magnetic-button:hover { box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6); }
.text-content p { color: var(--text-color); text-align: center; max-width: 700px; margin: 1rem auto; font-size: 1.1rem; }
footer { text-align: center; padding: 2rem 0; color: var(--text-color); opacity: 0.7; }

@media (max-width: 768px) { .hero h1 { font-size: 2.8rem; } }