body {
    background: linear-gradient(135deg, #FFF8F0 0%, #FFE8D6 50%, #FFF0E6 100%);
    transition: background 0.4s ease;
}

body.dark-mode {
    background: linear-gradient(135deg, #16161e 0%, #1e1e2e 50%, #16161e 100%);
}

.sketchy-border {
    border: 3px dashed #ff6b35;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0z' fill='none'/%3E%3Cpath d='M10 0v20M0 10h20' stroke='%23ff6b35' stroke-width='0.3' opacity='0.08'/%3E%3C/svg%3E");
}

.manga-panel {
    border: 3px solid #1a1a2e;
    box-shadow: 4px 4px 0px #1a1a2e;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.manga-panel:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #1a1a2e;
}

.dark-mode .manga-panel {
    border-color: #ff6b35;
    box-shadow: 4px 4px 0px #ff6b35;
}

.dark-mode .manga-panel:hover {
    box-shadow: 6px 6px 0px #ff6b35;
}

.speech-bubble {
    position: relative;
    background: white;
    border: 2px solid #1a1a2e;
    border-radius: 12px;
    padding: 8px 14px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 65% 100%, 55% 75%, 0% 75%);
}

.speed-lines {
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(255, 107, 53, 0.06) 8px,
        rgba(255, 107, 53, 0.06) 10px
    );
}

.dark-mode .speed-lines {
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(255, 107, 53, 0.03) 8px,
        rgba(255, 107, 53, 0.03) 10px
    );
}

.screentone {
    background-image: radial-gradient(circle, #1a1a2e 0.5px, transparent 0.5px);
    background-size: 4px 4px;
    opacity: 0.05;
}

.step-badge {
    font-family: 'Bangers', cursive;
    letter-spacing: 1px;
}

@keyframes pencil-draw {
    0% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(-5deg) translateX(3px); }
    50% { transform: rotate(0deg) translateX(0); }
    75% { transform: rotate(5deg) translateX(-3px); }
    100% { transform: rotate(0deg) translateX(0); }
}

.pencil-animate {
    animation: pencil-draw 0.6s ease-in-out infinite;
}

@keyframes domain-expand {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.domain-pulse {
    animation: domain-expand 1.5s ease-in-out infinite;
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-up {
    animation: slide-up 0.4s ease-out forwards;
}

.slide-up-delay-1 { animation-delay: 0.1s; opacity: 0; }
.slide-up-delay-2 { animation-delay: 0.2s; opacity: 0; }
.slide-up-delay-3 { animation-delay: 0.3s; opacity: 0; }

@keyframes celebration {
    0% { transform: scale(0) rotate(0deg); }
    50% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.celebrate {
    animation: celebration 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

.overlay-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #ff6b35, #00b4d8);
    outline: none;
}

.overlay-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff6b35;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.grid-overlay {
    background-image:
        linear-gradient(rgba(255, 107, 53, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 107, 53, 0.15) 1px, transparent 1px);
    background-size: 25% 25%;
}

.comparison-container {
    position: relative;
    overflow: hidden;
}

.dark-mode .bg-white { background-color: #1e1e2e; }
.dark-mode .text-gray-700 { color: #e0e0e0; }
.dark-mode .text-gray-600 { color: #b0b0b0; }
.dark-mode .text-gray-500 { color: #888; }
.dark-mode .bg-orange-50 { background-color: #2a2a3e; }
.dark-mode .bg-pink-50 { background-color: #2a2a3e; }
.dark-mode .bg-teal-50 { background-color: #2a2a3e; }
.dark-mode .bg-cyan-50 { background-color: #2a2a3e; }

.exact-badge {
    background: linear-gradient(135deg, #ff006e, #ff6b35);
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}