:root {
            --bg: #0b1220;
            --panel: #0f1729;
            --panel-2: #111a2e;
            --muted: #94a3b8;
            --ring: rgba(255, 255, 255, .08);
            --accent: #60a5fa;
            --accent-2: #22d3ee;
            --shadow: 0 10px 40px rgba(2, 6, 23, .35);
        }

        /* Core keyframes */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(12px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        @keyframes blob {

            0%,
            100% {
                transform: translate(0, 0) scale(1)
            }

            50% {
                transform: translate(6px, -8px) scale(1.03)
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-4px)
            }
        }

        /* Mobile sheet animations only */
        @keyframes sheetIn {
            0% {
                transform: translateY(100%)
            }

            70% {
                transform: translateY(-8px)
            }

            100% {
                transform: translateY(0)
            }
        }

        @keyframes sheetOut {
            from {
                transform: translateY(0);
                opacity: 1
            }

            to {
                transform: translateY(100%);
                opacity: 1
            }
        }

        .animate-fadeInUp {
            animation: fadeInUp .5s ease both
        }

        .animate-blob {
            animation: blob 8s ease-in-out infinite
        }

        .animate-float {
            animation: float 6s ease-in-out infinite
        }

        /* Hover tooltips (desktop) */
        .group-hover:hover .group-hover-tooltip {
            transform: translateX(0) scale(1);
            opacity: 1
        }

        .group-hover-tooltip {
            transform: translateX(-6px) scale(.98)
        }

        /* Nice scrollbars */
        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
            height: 8px
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, .28);
            border-radius: 6px
        }

        /* Reduce motion */
        @media (prefers-reduced-motion: reduce) {

            .animate-fadeInUp,
            .animate-blob,
            .animate-float {
                animation: none !important
            }

            #sheet-content {
                animation: none !important
            }

            .transition-all,
            .transition {
                transition: none !important
            }
        }

        /* Scope the bounce animation to mobile layout only */
        @media (max-width: 767px) {
            #sheet-content {
                will-change: transform, opacity
            }

            #sheet-content.sheet-in {
                animation: sheetIn .5s cubic-bezier(.22, 1, .36, 1) both
            }

            #sheet-content.sheet-out {
                animation: sheetOut .32s ease both
            }
        }

        /* Logic-specific styles */
        .canvas {
            position: relative;
            overflow: hidden;
            /* Let JS drive explicit size so it can be min(container W, container H) */
            width: 0;
            height: 0;
            /* smoother resizing */
            transition: width .2s ease, height .2s ease;
        }

        .svg-layer {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .svg-layer svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        #options-grid button.selected {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            box-shadow: 0 0 0 4px rgba(96, 165, 250, .25);
        }

        #options-grid.color-mode button {
            width: 56px;
            height: 56px;
        }

        #sub-category-buttons button.active {
            background-color: hsla(215, 94%, 69%, 0.2);
            color: hsl(215, 94%, 79%);
            --tw-ring-color: hsla(215, 94%, 69%, 0.4);
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-ring-shadow: 0 0 #0000;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-colored: 0 0 #0000;
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            --tw-ring-opacity: 1;
            --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
            border-color: var(--tw-ring-color);
            border-width: 1px;
        }
#rimuruLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
#rimuruLoader img {
    width: 250px;
    height: auto;
}

#cc-toast {
  position: fixed;
  inset: auto 0 24px 0;
  display: flex;
  justify-content: center;
  z-index: 10000;
  pointer-events: none;
}
.cc-toast-inner {
  background: var(--panel);
  color: #e6edf7;
  border: 1px solid var(--ring);
  box-shadow: var(--shadow);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 92vw;
  pointer-events: auto;
  animation: fadeInUp .28s ease both;
}
.cc-toast-inner.success { border-color: rgba(34, 211, 238, .35); }
.cc-toast-inner.error { border-color: rgba(239, 68, 68, .35); }
.cc-toast-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cc-toast-text {
  font-size: 14px;
  line-height: 1.25rem;
  opacity: .95;
}
.cc-toast-close {
  margin-left: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  border-radius: 8px;
}
.cc-toast-close:hover { color: #fff; background: rgba(148,163,184,.15); }