Cocoon-grayish:サムネ自動生成専用の上品なカラーパレット6選
            
            /* 宇宙デザインに合わせたダークテーマ */        body {            background-color: #0a1035;            color: rgba(255, 255, 255, 0.87);            margin: 0;            padding: 0;            position: relative;            overflow-x: hidden;        }                /* 星空エフェクト用背景 */        body::before {            content: '';            position: fixed;            top: 0;            left: 0;            width: 100%;            height: 100%;            background:                 radial-gradient(2px 2px at 20px 30px, #fff, transparent),                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),                radial-gradient(1px 1px at 90px 40px, #fff, transparent),                radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),                radial-gradient(2px 2px at 160px 30px, #fff, transparent),                radial-gradient(1px 1px at 200px 90px, rgba(255,255,255,0.8), transparent);            background-repeat: repeat;            background-size: 250px 150px;            opacity: 0.9; /* 星を最大まで明るく! */            z-index: -1;            animation: twinkle 10s linear infinite;        }                @keyframes twinkle {            0%, 100% { opacity: 0.9; }            50% { opacity: 0.5; }        }                .color-palette-container {            background: rgba(10, 16, 53, 0.05) !important; /* ほぼ透明! */            backdrop-filter: blur(15px);            -webkit-backdrop-filter: blur(15px);            color: rgba(255, 255, 255, 0.87);            border: 1px solid rgba(75, 92, 217, 0.4);            border-radius: 16px;            padding: 35px;            margin: 25px 0;            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);            width: 100%;            max-width: none;            font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;            position: relative;            z-index: 1;        }        .palette-header {            text-align: center;            margin-bottom: 45px;            padding: 25px;            background: rgba(10, 16, 53, 0.03) !important; /* ほぼ透明! */            border-radius: 14px;            border: 1px solid rgba(75, 92, 217, 0.4);            backdrop-filter: blur(10px);            -webkit-backdrop-filter: blur(10px);        }        .palette-title {            font-size: clamp(26px, 5vw, 40px);            font-weight: 700;            margin-bottom: 18px;            color: #f7fcff;            text-shadow: 0 0 15px rgba(247, 252, 255, 0.4);            letter-spacing: 1px;        }        .palette-subtitle {            font-size: clamp(15px, 3vw, 19px);            color: rgba(255, 255, 255, 0.8);            margin-bottom: 22px;            line-height: 1.7;            font-weight: 300;        }        .usage-note {            background: rgba(75, 92, 217, 0.15); /* 軽く透明 */            border: 1px solid rgba(75, 92, 217, 0.5);            border-radius: 10px;            padding: 18px;            margin-bottom: 25px;            font-size: 14px;            color: rgba(255, 255, 255, 0.9);            line-height: 1.6;            backdrop-filter: blur(8px);            -webkit-backdrop-filter: blur(8px);        }        .theme-nav {            position: -webkit-sticky;            position: sticky;            top: 20px;            background: rgba(10, 16, 53, 0.08) !important; /* ほぼ透明! */            backdrop-filter: blur(20px);            -webkit-backdrop-filter: blur(20px);            padding: 18px;            border-radius: 14px;            margin-bottom: 35px;            border: 1px solid rgba(75, 92, 217, 0.5);            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);            z-index: 100;            width: 100%;            align-self: flex-start;        }        .theme-nav-links {            display: grid;            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));            gap: 12px;        }        .theme-nav-link {            display: block;            padding: 12px 18px;            background: rgba(75, 92, 217, 0.2); /* 軽く透明 */            border: 1px solid rgba(75, 92, 217, 0.6);            border-radius: 25px;            cursor: pointer;            font-size: 13px;            text-decoration: none;            color: rgba(255, 255, 255, 0.9);            text-align: center;            transition: all 0.3s ease;            font-weight: 500;        }        .theme-nav-link:hover {            background: rgba(75, 92, 217, 0.5); /* ホバー時も軽く */            color: #f7fcff;            transform: translateY(-2px);            box-shadow: 0 6px 20px rgba(75, 92, 217, 0.5);            text-shadow: 0 0 12px rgba(247, 252, 255, 0.6);        }        .theme-section {            background: rgba(10, 16, 53, 0.05) !important; /* ほぼ透明! */            backdrop-filter: blur(12px);            -webkit-backdrop-filter: blur(12px);            border: 1px solid rgba(75, 92, 217, 0.3);            border-radius: 16px;            padding: 35px;            margin-bottom: 45px;            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);        }        .theme-title {            font-size: clamp(22px, 4vw, 32px);            font-weight: 700;            margin-bottom: 12px;            text-align: center;            color: #f7fcff;            text-shadow: 0 0 18px rgba(247, 252, 255, 0.5);            letter-spacing: 0.5px;        }        .theme-subtitle {            font-size: clamp(14px, 3vw, 17px);            text-align: center;            color: rgba(255, 255, 255, 0.8);            margin-bottom: 30px;            line-height: 1.7;            font-weight: 300;        }        .color-category {            margin-bottom: 30px;        }        .category-title {            font-size: 17px;            font-weight: 600;            margin-bottom: 18px;            color: #B3E5FC;            padding: 10px 15px;            background: rgba(75, 92, 217, 0.1); /* 軽く透明 */            border-radius: 10px;            border-left: 4px solid #B3E5FC;        }        .color-grid {            display: grid;            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));            gap: 15px;            margin-bottom: 25px;        }        .color-item {            background: rgba(10, 16, 53, 0.02) !important; /* ほぼ透明! */            border: 1px solid rgba(75, 92, 217, 0.5);            border-radius: 12px;            padding: 12px;            text-align: center;            cursor: pointer;            transition: all 0.3s ease;            backdrop-filter: blur(8px);            -webkit-backdrop-filter: blur(8px);        }        .color-item:hover {            transform: translateY(-4px);            box-shadow: 0 10px 25px rgba(75, 92, 217, 0.4), 0 0 15px rgba(179, 229, 252, 0.3);            border-color: #B3E5FC;            background: rgba(10, 16, 53, 0.1) !important; /* ホバー時は少し濃く */        }        .color-swatch {            width: 100%;            height: 50px;            border-radius: 10px;            margin-bottom: 10px;            border: 2px solid rgba(179, 229, 252, 0.3);            box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);        }        .color-code {            font-size: 11px;            font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;            font-weight: 600;            color: rgba(255, 255, 255, 0.95);            background: rgba(0, 0, 0, 0.4);            padding: 5px 8px;            border-radius: 6px;        }        .sample-grid {            display: grid;            grid-template-columns: repeat(3, minmax(220px, 1fr));            gap: 18px;            margin-top: 25px;        }        .sample-card {            border-radius: 14px;            overflow: hidden;            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);            position: relative;            aspect-ratio: 16/9;            transition: all 0.3s ease;            backdrop-filter: blur(8px);            -webkit-backdrop-filter: blur(8px);            animation: fadeIn 1.25s ease-out normal;        }        .sample-card:hover {            transform: translateY(-6px);            box-shadow: 0 15px 40px rgba(75, 92, 217, 0.3), 0 0 20px rgba(75, 92, 217, 0.2);        }        .sample-content {            height: 100%;            display: flex;            align-items: center;            justify-content: center;            font-size: 19px;            font-weight: 600;            position: relative;            color: white;            text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);        }        .sample-codes {            position: absolute;            bottom: 10px;            left: 10px;            font-size: 9px;            opacity: 0.95;            line-height: 1.4;            font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;            background: rgba(0, 0, 0, 0.8);            padding: 5px 8px;            border-radius: 6px;        }                /* フェードインアニメーション */        @keyframes fadeIn {            from {                opacity: 0;                transform: translateY(10px);            }            to {                opacity: 1;                transform: translateY(0);            }        }        .php-code-section {            background: rgba(0, 0, 0, 0.05) !important; /* ほぼ透明! */            border: 1px solid rgba(75, 92, 217, 0.5);            color: rgba(255, 255, 255, 0.95);            padding: 25px;            border-radius: 14px;            margin: 30px 0;            overflow-x: auto;            font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;            font-size: 13px;            line-height: 1.7;            backdrop-filter: blur(12px);            -webkit-backdrop-filter: blur(12px);        }        .php-comment {            color: #7dd3fc;            font-style: italic;        }        .php-string {            color: #fbbf24;        }        .php-function {            color: #a78bfa;        }        .stats-box {            background: rgba(75, 92, 217, 0.03) !important; /* ほぼ透明! */            border: 1px solid rgba(75, 92, 217, 0.7);            color: rgba(255, 255, 255, 0.95);            border-radius: 14px;            padding: 25px;            margin: 25px 0;            text-align: center;            backdrop-filter: blur(12px);            -webkit-backdrop-filter: blur(12px);            box-shadow: 0 6px 20px rgba(75, 92, 217, 0.3);        }        .stats-title {            font-weight: 600;            margin-bottom: 10px;            font-size: 15px;            color: #B3E5FC;        }        .stats-number {            font-size: 26px;            font-weight: 700;            margin-bottom: 8px;            color: #f7fcff;            text-shadow: 0 0 12px rgba(247, 252, 255, 0.4);        }        .stats-description {            font-size: 13px;            opacity: 0.85;        }        .copy-notification {            position: fixed;            top: 25px;            right: 25px;            background: rgba(75, 92, 217, 0.95);            backdrop-filter: blur(12px);            -webkit-backdrop-filter: blur(12px);            color: white;            padding: 18px 28px;            border-radius: 12px;            font-size: 14px;            z-index: 1000;            transform: translateX(350px);            transition: all 0.3s ease;            border: 1px solid rgba(75, 92, 217, 0.9);            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);        }        .copy-notification.show {            transform: translateX(0);        }        @media (max-width: 768px) {            .color-palette-container {                padding: 15px;                margin: 10px 0;                background: rgba(10, 16, 53, 0.05) !important; /* ほぼ透明! */            }                        .theme-section {                padding: 18px;                margin-bottom: 25px;                background: rgba(10, 16, 53, 0.05) !important; /* ほぼ透明! */            }                        .color-grid {                grid-template-columns: repeat(3, 1fr);                gap: 8px;            }                        .color-item {                padding: 8px;                background: rgba(10, 16, 53, 0.02) !important; /* ほぼ透明! */            }                        .color-swatch {                height: 40px;                margin-bottom: 8px;            }                        .sample-grid {                grid-template-columns: repeat(2, 1fr);                gap: 10px;            }                        .theme-nav-links {                grid-template-columns: repeat(2, 1fr);                gap: 8px;            }                        .palette-header {                background: rgba(10, 16, 53, 0.03) !important; /* ほぼ透明! */                padding: 18px;                margin-bottom: 25px;            }                        .theme-nav {                background: rgba(10, 16, 53, 0.08) !important; /* ほぼ透明! */                position: static;                top: auto;                margin-bottom: 20px;                padding: 12px;            }        }