npm - @chocodrop/mcp - Versions diffs - 0.1.0-alpha.0 - Mend

@chocodrop/mcp 0.1.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/LICENSE +21 -0
package/README.md +19 -0
package/bin/chocodrop-mcp.js +13 -0
package/package.json +42 -0
package/runtime/.chocodrop-mcp-runtime +1 -0
package/runtime/asset-bridge.js +460 -0
package/runtime/mcp-server.js +107 -0
package/runtime/site/examples/basic/README.md +38 -0
package/runtime/site/examples/basic/index.html +1730 -0
package/runtime/site/examples/bookmarklet-v2.html +141 -0
package/runtime/site/examples/bookmarklet.html +126 -0
package/runtime/site/examples/lofi-room/index.html +2570 -0
package/runtime/site/examples/lofi-room/sandbox-lite.html +124 -0
package/runtime/site/examples/music-garden/index.html +2150 -0
package/runtime/site/examples/pixel-ocean/index.html +1780 -0
package/runtime/site/examples/react-three-fiber/AdvancedExample.jsx +338 -0
package/runtime/site/examples/react-three-fiber/App.jsx +97 -0
package/runtime/site/examples/react-three-fiber/README.md +294 -0
package/runtime/site/examples/react-three-fiber/package.json +25 -0
package/runtime/site/examples/sdk-test/README.md +70 -0
package/runtime/site/examples/space/index.html +1975 -0
package/runtime/site/examples/toy-city/index.html +2288 -0
package/runtime/site/examples/wabi-sabi/index.html +2515 -0
package/runtime/site/getting-started.html +84 -0
package/runtime/site/index.html +1370 -0
package/runtime/site/public/CommandUI.js +6341 -0
package/runtime/site/public/LiveCommandClient.js +432 -0
package/runtime/site/public/SceneManager.js +5493 -0
package/runtime/site/public/bookmarklet.js +206 -0
package/runtime/site/public/bootstrap.js +50 -0
package/runtime/site/public/chocodrop-demo.umd.js +24020 -0
package/runtime/site/public/chocodrop-demo.umd.min.js +24020 -0
package/runtime/site/public/chocodrop.esm.js +2 -0
package/runtime/site/public/html-sandbox/frame.js +865 -0
package/runtime/site/public/icons/icon-192.png +0 -0
package/runtime/site/public/icons/icon-512.png +0 -0
package/runtime/site/public/icons/icon-maskable-512.png +0 -0
package/runtime/site/public/immersive-launcher.js +175 -0
package/runtime/site/public/immersive.html +165 -0
package/runtime/site/public/index.html +1011 -0
package/runtime/site/public/index.js +9 -0
package/runtime/site/public/load-chocodrop.js +25 -0
package/runtime/site/public/load-three.js +26 -0
package/runtime/site/public/manifest.webmanifest +59 -0
package/runtime/site/public/pwa-bootstrap.js +128 -0
package/runtime/site/public/sample-card.svg +15 -0
package/runtime/site/public/service-worker.js +117 -0
package/runtime/site/public/translation-dictionary.js +257 -0
package/runtime/site/public/xr/xr-ui.css +338 -0
package/runtime/site/public/xr-viewer.html +263 -0
package/runtime/site/src/client/local-bridge.js +83 -0

package/runtime/site/index.html ADDED Viewed

@@ -0,0 +1,1370 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChocoDrop | ちょこっとDrop。世界が咲く。</title>
+    <meta name="description" content="ブラウザでThree.jsシーンを拡張。デモで体験、ブックマークレットで試用、プロジェクトに本格導入。">
+    <!-- OGP -->
+    <meta property="og:title" content="ChocoDrop | ちょこっとDrop。世界が咲く。">
+    <meta property="og:description" content="ブラウザでThree.jsシーンを拡張。デモで体験、ブックマークレットで試用、プロジェクトに本格導入。">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://nyukicorn.github.io/chocodrop/">
+    <meta property="og:image" content="https://nyukicorn.github.io/chocodrop/public/sample-card.svg">
+    <meta name="twitter:card" content="summary_large_image">
+    <style>
+        :root {
+            /* Core brand */
+            --choco-bg: #2C1810;         /* Dark Chocolate */
+            --choco-mocha: #8B6F47;      /* Mocha Mousse */
+            --choco-milk: #C19A6B;       /* Milk Choco accent */
+            --choco-cream: #FFF8E7;      /* White Choco text/base */
+            --accent-plum: #8B5CF6;      /* Plum accent */
+            --accent-caramel: #D2691E;   /* CTA */
+            /* Neutral surface for可読性 */
+            --surface-0: #0F0F10;
+            --surface-1: #161617;
+            --surface-2: #1F1F21;
+            /* State */
+            --ok-mint: #98FB98;
+            --warn-strawberry: #FFB6C1;
+            /* Effects */
+            --glass-bg: rgba(22,22,23,0.45);
+            --glass-blur: blur(8px);
+            /* Radii & space */
+            --r-s: 12px;
+            --r-m: 16px;
+            --r-l: 24px;
+            --r-xl: 28px;
+            --gap-s: 8px;
+            --gap-m: 12px;
+            --gap-l: 20px;
+            --gap-xl: 28px;
+            --shadow-1: 0 6px 20px rgba(0,0,0,.25);
+            --shadow-2: 0 8px 32px rgba(0,0,0,.35);
+            --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.2);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background: var(--surface-0);
+            color: var(--choco-cream);
+            font-family: "Helvetica Neue", -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
+            line-height: 1.6;
+            overflow-x: hidden;
+            min-height: 100vh;
+        }
+        /* Subtle background gradient */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background:
+                radial-gradient(circle at 20% 40%, rgba(139, 92, 246, 0.03) 0%, transparent 40%),
+                radial-gradient(circle at 80% 60%, rgba(139, 108, 71, 0.02) 0%, transparent 40%);
+            pointer-events: none;
+            z-index: 1;
+        }
+        .container {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 0 24px;
+            position: relative;
+            z-index: 2;
+        }
+        /* Hero Section with Glass Effect */
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 80px 20px;
+            position: relative;
+        }
+        .hero-content {
+            background: var(--glass-bg);
+            -webkit-backdrop-filter: var(--glass-blur);
+            backdrop-filter: var(--glass-blur);
+            border: 1px solid rgba(255, 248, 231, 0.08);
+            border-radius: var(--r-xl);
+            padding: 60px 40px;
+            max-width: 800px;
+            margin: 0 auto;
+            box-shadow: var(--shadow-2);
+            transition: all 0.3s ease;
+        }
+        .hero-content:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-2), var(--shadow-glow);
+        }
+        .logo {
+            font-size: 48px;
+            margin-bottom: 24px;
+            display: inline-block;
+            animation: float-gentle 3s ease-in-out infinite;
+        }
+        @keyframes float-gentle {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+        h1 {
+            font-size: clamp(32px, 6vw, 56px);
+            font-weight: 700;
+            margin-bottom: 16px;
+            background: linear-gradient(135deg, var(--choco-cream) 0%, var(--choco-milk) 50%, var(--accent-plum) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            line-height: 1.2;
+            letter-spacing: -0.02em;
+        }
+        .hero .lead {
+            color: var(--accent-plum);   /* アクセント色をタグラインに */
+            font-size: clamp(1.05rem, 2.2vw, 1.25rem);
+            letter-spacing: .02em;
+            text-decoration: underline;
+            text-underline-offset: 3px;
+        }
+        .lead.is-plum {
+            color: var(--accent-plum);
+            text-decoration: underline;
+            text-underline-offset: 3px;
+            font-size: clamp(1.05rem, 2.2vw, 1.25rem);
+            letter-spacing: .02em;
+        }
+        .hero-subtitle {
+            font-size: 18px;
+            color: rgba(255, 248, 231, 0.8);
+            margin-bottom: 40px;
+            font-weight: 400;
+        }
+        /* Demo Carousel */
+        .demo-carousel {
+            position: relative;
+            padding: 80px 0 60px;
+            background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(22, 22, 23, 0.4) 60%, rgba(139, 108, 71, 0.05) 100%);
+            border-top: 1px solid rgba(255, 248, 231, 0.04);
+            border-bottom: 1px solid rgba(255, 248, 231, 0.04);
+        }
+        .demo-carousel::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(circle at 5% 10%, rgba(255, 248, 231, 0.04) 0%, transparent 45%),
+                        radial-gradient(circle at 95% 90%, rgba(139, 92, 246, 0.08) 0%, transparent 55%);
+            pointer-events: none;
+            z-index: 1;
+        }
+        .demo-carousel .container {
+            position: relative;
+            z-index: 2;
+        }
+        .carousel-head {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-end;
+            justify-content: space-between;
+            gap: 20px;
+            margin-bottom: 32px;
+        }
+        .carousel-head h2 {
+            font-size: clamp(2rem, 4vw, 2.6rem);
+            font-weight: 700;
+            color: var(--choco-cream);
+        }
+        .carousel-copy {
+            max-width: 520px;
+            color: rgba(255, 248, 231, 0.7);
+            font-size: 0.98rem;
+            line-height: 1.7;
+        }
+        .carousel-nav {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+        .carousel-nav button {
+            background: rgba(255, 248, 231, 0.08);
+            color: var(--choco-cream);
+            border: 1px solid rgba(255, 248, 231, 0.16);
+            border-radius: 50%;
+            width: 44px;
+            height: 44px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.15rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .carousel-nav button:hover:not([disabled]) {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-1);
+            border-color: rgba(139, 92, 246, 0.7);
+        }
+        .carousel-nav button[disabled] {
+            opacity: 0.35;
+            cursor: not-allowed;
+        }
+        .carousel-viewport {
+            position: relative;
+            overflow: hidden;
+        }
+        .carousel-track {
+            display: flex;
+            gap: 24px;
+            overflow-x: auto;
+            scroll-snap-type: x mandatory;
+            scroll-padding: 24px;
+            padding-bottom: 12px;
+            scrollbar-width: thin;
+        }
+        .carousel-track::-webkit-scrollbar {
+            height: 6px;
+        }
+        .carousel-track::-webkit-scrollbar-thumb {
+            background: rgba(255, 248, 231, 0.2);
+            border-radius: 999px;
+        }
+        .carousel-card {
+            position: relative;
+            min-width: clamp(260px, 32vw, 360px);
+            padding: 28px 28px 120px;
+            border-radius: var(--r-l);
+            background: linear-gradient(160deg, rgba(17, 17, 19, 0.9) 0%, rgba(28, 24, 35, 0.7) 80%, rgba(139, 92, 246, 0.18) 100%);
+            border: 1px solid rgba(255, 248, 231, 0.08);
+            text-decoration: none;
+            color: var(--choco-cream);
+            scroll-snap-align: start;
+            overflow: hidden;
+            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
+            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+        }
+        .carousel-card:hover {
+            transform: translateY(-6px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), var(--shadow-glow);
+            border-color: rgba(139, 92, 246, 0.4);
+        }
+        .carousel-card::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(circle at 60% 30%, rgba(139, 92, 246, 0.35) 0%, transparent 60%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .carousel-card:hover::after {
+            opacity: 0.6;
+        }
+        .carousel-tag {
+            font-size: 0.78rem;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+            color: rgba(255, 248, 231, 0.6);
+            display: inline-flex;
+            gap: 6px;
+            align-items: center;
+        }
+        .carousel-title {
+            font-size: 1.55rem;
+            font-weight: 700;
+            margin: 16px 0 10px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .carousel-title span {
+            font-size: 1.8rem;
+        }
+        .carousel-description {
+            font-size: 0.98rem;
+            line-height: 1.7;
+            opacity: 0.82;
+            margin-bottom: 18px;
+        }
+        .carousel-meta {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            font-size: 0.9rem;
+            opacity: 0.75;
+        }
+        .carousel-action {
+            position: absolute;
+            inset: auto 24px 24px 24px;
+            display: inline-flex;
+            gap: 8px;
+            align-items: center;
+            background: rgba(255, 248, 231, 0.12);
+            color: var(--choco-cream);
+            padding: 12px 18px;
+            border-radius: var(--r-xl);
+            font-weight: 600;
+            font-size: 0.92rem;
+            border: 1px solid rgba(255, 248, 231, 0.16);
+            transition: background 0.2s ease, color 0.2s ease;
+        }
+        .carousel-card:hover .carousel-action {
+            background: rgba(139, 92, 246, 0.22);
+            color: #fff;
+        }
+        .carousel-progress {
+            margin-top: 24px;
+            display: flex;
+            gap: 8px;
+            justify-content: center;
+        }
+        .carousel-progress button {
+            width: 10px;
+            height: 10px;
+            border-radius: 999px;
+            border: none;
+            background: rgba(255, 248, 231, 0.18);
+            cursor: pointer;
+            transition: width 0.25s ease, background 0.25s ease;
+        }
+        .carousel-progress button.is-active {
+            width: 32px;
+            background: rgba(139, 92, 246, 0.9);
+        }
+        .hero-buttons {
+            display: flex;
+            gap: 16px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .btn-primary {
+            background: var(--accent-caramel);
+            color: #111;
+            border-radius: var(--r-xl);
+            padding: 16px 32px;
+            box-shadow: var(--shadow-1);
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 16px;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.15s ease;
+            border: none;
+            cursor: pointer;
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-2);
+            border-radius: var(--r-l);
+        }
+        .btn-secondary {
+            background: transparent;
+            color: var(--choco-cream);
+            border: 1px solid rgba(255, 248, 231, 0.2);
+            border-radius: var(--r-xl);
+            padding: 16px 32px;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 16px;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.15s ease;
+            cursor: pointer;
+        }
+        .btn-secondary:hover {
+            background: rgba(255, 248, 231, 0.05);
+            border-color: rgba(255, 248, 231, 0.3);
+            transform: translateY(-1px);
+        }
+        /* Floating Chocolate Cubes */
+        .floating-elements {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            z-index: 0;
+        }
+        .choco-cube {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background: linear-gradient(135deg, var(--choco-mocha), var(--choco-milk));
+            border-radius: var(--r-s);
+            opacity: 0.3;
+            animation: float-rotate 20s ease-in-out infinite;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        }
+        .choco-cube:nth-child(1) {
+            top: 20%;
+            left: 10%;
+            animation-delay: 0s;
+        }
+        .choco-cube:nth-child(2) {
+            top: 60%;
+            right: 15%;
+            animation-delay: 7s;
+            width: 30px;
+            height: 30px;
+        }
+        .choco-cube:nth-child(3) {
+            bottom: 20%;
+            left: 20%;
+            animation-delay: 14s;
+            width: 35px;
+            height: 35px;
+        }
+        @keyframes float-rotate {
+            0%, 100% {
+                transform: translateY(0px) rotateX(0deg) rotateY(0deg);
+            }
+            25% {
+                transform: translateY(-20px) rotateX(180deg) rotateY(90deg);
+            }
+            50% {
+                transform: translateY(10px) rotateX(360deg) rotateY(180deg);
+            }
+            75% {
+                transform: translateY(-15px) rotateX(180deg) rotateY(270deg);
+            }
+        }
+        /* Bento Grid Layout */
+        .bento-section {
+            padding: 80px 0;
+        }
+        .bento-grid {
+            display: grid;
+            gap: var(--gap-xl);
+            margin-bottom: 80px;
+        }
+        /* 1段目: 2×2 */
+        .bento-row-1 {
+            grid-template-columns: 2fr 1fr;
+            min-height: 400px;
+        }
+        /* 2段目: 3カラム */
+        .bento-row-2 {
+            grid-template-columns: repeat(3, 1fr);
+        }
+        /* 3段目: 2×2 */
+        .bento-row-3 {
+            grid-template-columns: repeat(2, 1fr);
+        }
+        /* 4段目: 1カラム */
+        .bento-row-4 {
+            grid-template-columns: 1fr;
+        }
+        .bento-box {
+            background: var(--surface-1);
+            border: 1px solid rgba(255, 248, 231, 0.05);
+            border-radius: var(--r-l);
+            padding: 32px;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .bento-box:hover {
+            border-color: rgba(139, 92, 246, 0.2);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-1);
+        }
+        .bento-box::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+        .bento-box:hover::before {
+            opacity: 1;
+        }
+        .bento-title {
+            font-size: 24px;
+            font-weight: 600;
+            margin-bottom: 16px;
+            color: var(--choco-milk);
+        }
+        .bento-description {
+            color: rgba(255, 248, 231, 0.7);
+            line-height: 1.8;
+        }
+        .feature-icon {
+            font-size: 48px;
+            margin-bottom: 20px;
+            display: block;
+        }
+        /* Mini Demo Embed */
+        .demo-embed {
+            width: 100%;
+            height: 350px;
+            border-radius: var(--r-m);
+            background: var(--surface-2);
+            border: 1px solid rgba(255, 248, 231, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: rgba(255, 248, 231, 0.5);
+            font-size: 14px;
+        }
+        /* Gallery */
+        .gallery-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--gap-m);
+        }
+        .gallery-item {
+            aspect-ratio: 16/9;
+            border-radius: var(--r-s);
+            background: var(--surface-2);
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .gallery-item:hover {
+            transform: scale(1.02);
+            box-shadow: var(--shadow-1);
+        }
+        /* Weekly Challenge */
+        .challenge-box {
+            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 108, 71, 0.05) 100%);
+            border: 2px solid var(--accent-plum);
+        }
+        .challenge-box .bento-title {
+            color: var(--accent-plum);
+        }
+        .challenge-button {
+            margin-top: 24px;
+            background: var(--accent-plum);
+            color: white;
+            padding: 12px 24px;
+            border-radius: var(--r-l);
+            text-decoration: none;
+            display: inline-block;
+            font-weight: 600;
+            transition: all 0.15s ease;
+        }
+        .challenge-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
+        }
+        /* Footer */
+        footer {
+            padding: 40px 0;
+            border-top: 1px solid rgba(255, 248, 231, 0.1);
+            text-align: center;
+            color: rgba(255, 248, 231, 0.5);
+            font-size: 14px;
+        }
+        .footer-links {
+            display: flex;
+            gap: 24px;
+            justify-content: center;
+            margin-bottom: 24px;
+        }
+        .footer-links a {
+            color: rgba(255, 248, 231, 0.6);
+            text-decoration: none;
+            transition: color 0.2s ease;
+        }
+        .footer-links a:hover {
+            color: var(--accent-plum);
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .hero-content {
+                padding: 40px 24px;
+            }
+            .bento-row-1,
+            .bento-row-2,
+            .bento-row-3 {
+                grid-template-columns: 1fr;
+            }
+            .carousel-head {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            .carousel-track {
+                gap: 18px;
+            }
+            .carousel-card {
+                min-width: calc(100vw - 80px);
+            }
+            .carousel-nav {
+                width: 100%;
+                justify-content: flex-end;
+            }
+            .hero-buttons {
+                flex-direction: column;
+                width: 100%;
+            }
+            .btn-primary,
+            .btn-secondary {
+                width: 100%;
+                justify-content: center;
+            }
+            .bento-box {
+                padding: 24px;
+            }
+            .gallery-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+        /* Micro Interactions */
+        .melting-hover {
+            transition: border-radius 0.15s ease;
+        }
+        .melting-hover:hover {
+            border-radius: var(--r-l);
+        }
+        /* Cursor highlight effect (CSS only) */
+        .highlight-cursor {
+            position: relative;
+            overflow: hidden;
+        }
+        .highlight-cursor::after {
+            content: '';
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            background: radial-gradient(circle, rgba(255, 248, 231, 0.1) 0%, transparent 70%);
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .highlight-cursor:hover::after {
+            opacity: 1;
+        }
+        /* "今週のしずく" Card Styles (Commented out for alpha - requires manual curation)
+        .cd-drops-grid {
+            display: grid;
+            gap: var(--gap-m);
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+        .cd-card {
+            display: grid;
+            grid-template-rows: 140px auto auto;
+            gap: 10px;
+            padding: 12px;
+            border-radius: var(--r-l);
+            background: var(--surface-1);
+            border: 1px solid rgba(255, 248, 231, 0.08);
+            text-decoration: none;
+            color: inherit;
+            transition: transform 0.15s ease, box-shadow 0.15s ease, border-radius 0.15s ease;
+            box-shadow: var(--shadow-1);
+        }
+        .cd-card:hover {
+            transform: translateY(-2px);
+            border-radius: var(--r-xl);
+            box-shadow: var(--shadow-2);
+            border-color: rgba(139, 92, 246, 0.2);
+        }
+        /* Thumbnail with gradients */
+        .cd-thumb {
+            position: relative;
+            border-radius: var(--r-s);
+            overflow: hidden;
+            background: radial-gradient(120% 120% at 0% 0%, var(--choco-mocha) 0%, var(--choco-bg) 60%) no-repeat;
+        }
+        .cd-thumb--rpg {
+            background: radial-gradient(120% 120% at 0% 0%, var(--accent-plum) 0%, #1A1333 60%) no-repeat;
+        }
+        .cd-thumb--sea {
+            background: radial-gradient(120% 120% at 0% 0%, #2aa3ff 0%, #051a2c 60%) no-repeat;
+        }
+        .cd-thumb-overlay {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: end start;
+            padding: 10px;
+            font-size: 12px;
+            letter-spacing: 0.02em;
+            background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0) 50%);
+            color: var(--choco-cream);
+            font-weight: 500;
+        }
+        /* Card metadata */
+        .cd-meta {
+            display: grid;
+            gap: 6px;
+        }
+        .cd-badge {
+            display: inline-block;
+            font-size: 10px;
+            padding: 4px 8px;
+            border-radius: 999px;
+            background: rgba(255, 248, 231, 0.08);
+            color: var(--choco-cream);
+            border: 1px solid rgba(255, 248, 231, 0.12);
+            justify-self: start;
+            font-weight: 500;
+        }
+        .cd-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--choco-milk);
+        }
+        .cd-author {
+            opacity: 0.7;
+            font-size: 11px;
+            color: var(--choco-cream);
+        }
+        /* CTA button */
+        .cd-cta {
+            margin-top: 2px;
+            font-size: 11px;
+            color: #111;
+            background: var(--accent-caramel);
+            padding: 6px 10px;
+            border-radius: var(--r-s);
+            justify-self: start;
+            font-weight: 600;
+            transition: all 0.15s ease;
+        }
+        .cd-card:hover .cd-cta {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(210, 105, 30, 0.3);
+        }
+        /* Responsive for card grid */
+        @media (max-width: 768px) {
+            .cd-drops-grid {
+                grid-template-columns: 1fr;
+                gap: var(--gap-s);
+            }
+            .cd-card {
+                grid-template-rows: 120px auto auto;
+            }
+        }
+        */
+    </style>
+</head>
+<body>
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="floating-elements">
+            <div class="choco-cube"></div>
+            <div class="choco-cube"></div>
+            <div class="choco-cube"></div>
+        </div>
+        <div class="hero-content highlight-cursor">
+            <div class="logo">🍫</div>
+            <h1>ちょこっとDrop。<br>世界が咲く。</h1>
+            <p class="lead is-plum">Drop a little, bloom a lot.</p>
+            <p class="hero-subtitle">
+                インストール不要・30秒で体験<br>
+                <span style="font-size: 0.85em; opacity: 0.75;">手元の画像・動画・3Dモデルを配置。アカウントや生成サービスの設定は不要です</span>
+            </p>
+            <div class="hero-buttons">
+                <a href="examples/basic/index.html" class="btn-primary melting-hover" aria-label="今すぐ試す">
+                    🎮 今すぐ試す
+                </a>
+                <button class="btn-secondary melting-hover" onclick="scrollToVideo()">
+                    📖 はじめ方を見る
+                </button>
+            </div>
+        </div>
+    </section>
+    <section class="demo-carousel" aria-labelledby="demo-carousel-heading">
+        <div class="container">
+            <div class="carousel-head">
+                <div>
+                    <h2 id="demo-carousel-heading">好きな世界をワープして体験</h2>
+                    <p class="carousel-copy">
+                        ひとつのデモだけで終わらないよう、世界観や用途別にシーンを用意しました。
+                        スクロールまたはナビボタンで移動し、気になった世界をそのまま開いてください。
+                    </p>
+                </div>
+                <div class="carousel-nav" role="group" aria-label="デモギャラリーナビゲーション">
+                    <button type="button" data-direction="prev" aria-label="前のデモへ">
+                        ←
+                    </button>
+                    <button type="button" data-direction="next" aria-label="次のデモへ">
+                        →
+                    </button>
+                </div>
+            </div>
+            <div class="carousel-viewport">
+                <div class="carousel-track" data-carousel-track>
+                    <a class="carousel-card" href="examples/basic/index.html" data-carousel-index="0" aria-label="スタータールーム デモを開く">
+                        <span class="carousel-tag">入門</span>
+                        <h3 class="carousel-title"><span>🍫</span>スタータールーム</h3>
+                        <p class="carousel-description">
+                            カカオ香るラウンジで基本コマンドを順番に体験。初訪でも迷わない導線。
+                        </p>
+                        <div class="carousel-meta">🕒 所要1分 / 基本操作</div>
+                        <span class="carousel-action">この世界へ →</span>
+                    </a>
+                    <a class="carousel-card" href="examples/space/index.html" data-carousel-index="1" aria-label="宇宙遊泳ステーション デモを開く">
+                        <span class="carousel-tag">照明</span>
+                        <h3 class="carousel-title"><span>🌌</span>宇宙遊泳ステーション</h3>
+                        <p class="carousel-description">
+                            無重力の観測ステーションで光源とマテリアルを切り替え、暗所ワークフローを体感。
+                        </p>
+                        <div class="carousel-meta">💡 ライティング / カメラドリー</div>
+                        <span class="carousel-action">この世界へ →</span>
+                    </a>
+                    <a class="carousel-card" href="examples/music-garden/index.html" data-carousel-index="2" aria-label="音咲き庭園 デモを開く">
+                        <span class="carousel-tag">音反応</span>
+                        <h3 class="carousel-title"><span>🎶</span>音咲き庭園</h3>
+                        <p class="carousel-description">
+                            夜風の庭に音が流れるたび粒子の花が揺れる。エフェクト系コマンドをまとめてチェック。
+                        </p>
+                        <div class="carousel-meta">🎧 オーディオリアクティブ</div>
+                        <span class="carousel-action">この世界へ →</span>
+                    </a>
+                    <a class="carousel-card" href="examples/wabi-sabi/index.html" data-carousel-index="3" aria-label="侘び寂びアトリエ デモを開く">
+                        <span class="carousel-tag">質感</span>
+                        <h3 class="carousel-title"><span>🧘</span>侘び寂びアトリエ</h3>
+                        <p class="carousel-description">
+                            木と和紙の工房で静かな灯りを調整しながら、テクスチャとトーンを磨く。
+                        </p>
+                        <div class="carousel-meta">🧱 マテリアル / 静的ライト</div>
+                        <span class="carousel-action">この世界へ →</span>
+                    </a>
+                    <a class="carousel-card" href="examples/toy-city/index.html" data-carousel-index="4" aria-label="AI遊園地 デモを開く">
+                        <span class="carousel-tag">街づくり</span>
+                        <h3 class="carousel-title"><span>🧩</span>AI遊園地</h3>
+                        <p class="carousel-description">
+                            AIが組み立てるネオン遊園地。ホログラム観覧車とドローンの上をカメラが滑空。
+                        </p>
+                        <div class="carousel-meta">🏙️ プロシージャル / カメラ</div>
+                        <span class="carousel-action">この世界へ →</span>
+                    </a>
+                    <a class="carousel-card" href="examples/pixel-ocean/index.html" data-carousel-index="5" aria-label="ピクセル海底世界 デモを開く">
+                        <span class="carousel-tag">海景</span>
+                        <h3 class="carousel-title"><span>🌊</span>ピクセル海底世界</h3>
+                        <p class="carousel-description">
+                            ピクセルアートの魚と泡が静かに浮かぶ深海で、色調やモーションコマンドの効きを試す。
+                        </p>
+                        <div class="carousel-meta">🌈 カラーシフト / パーティクル</div>
+                        <span class="carousel-action">この世界へ →</span>
+                    </a>
+                    <a class="carousel-card" href="examples/lofi-room/index.html" data-carousel-index="6" aria-label="ローファイ寝台車 デモを開く">
+                        <span class="carousel-tag">チル</span>
+                        <h3 class="carousel-title"><span>🎧</span>ローファイ寝台車</h3>
+                        <p class="carousel-description">
+                            夜行列車のキャビンでゆったりとインテリア配置。ムード切替の挙動を確かめられるチル空間。
+                        </p>
+                        <div class="carousel-meta">🪑 インテリア / ムード</div>
+                        <span class="carousel-action">この世界へ →</span>
+                    </a>
+                    <a class="carousel-card" href="examples/react-three-fiber/index.html" data-carousel-index="7" aria-label="R3F 宙港ラボ デモを開く">
+                        <span class="carousel-tag">React</span>
+                        <h3 class="carousel-title"><span>⚛️</span>R3F 宙港ラボ</h3>
+                        <p class="carousel-description">
+                            React Three Fiber と ChocoDrop の連携実験基地。フロントエンド導入の流れを確認。
+                        </p>
+                        <div class="carousel-meta">🧠 React + Three.js</div>
+                        <span class="carousel-action">この世界へ →</span>
+                    </a>
+                </div>
+            </div>
+            <div class="carousel-progress" role="tablist" aria-label="デモ一覧の現在位置">
+                <button type="button" data-carousel-dot="0" class="is-active" aria-label="スタータールーム を表示" aria-current="true"></button>
+                <button type="button" data-carousel-dot="1" aria-label="宇宙遊泳ステーション を表示"></button>
+                <button type="button" data-carousel-dot="2" aria-label="音咲き庭園 を表示"></button>
+                <button type="button" data-carousel-dot="3" aria-label="侘び寂びアトリエ を表示"></button>
+                <button type="button" data-carousel-dot="4" aria-label="AI遊園地 を表示"></button>
+                <button type="button" data-carousel-dot="5" aria-label="ピクセル海底世界 を表示"></button>
+                <button type="button" data-carousel-dot="6" aria-label="ローファイ寝台車 を表示"></button>
+                <button type="button" data-carousel-dot="7" aria-label="R3F 宙港ラボ を表示"></button>
+            </div>
+        </div>
+    </section>
+    <div class="container">
+        <!-- Bento Section 1: Hero + Video -->
+        <section class="bento-section">
+            <div class="bento-grid bento-row-1">
+                <div class="bento-box">
+                    <h2 class="bento-title" id="mini-demo">ブラウザで、今すぐ触れる</h2>
+                    <iframe src="examples/basic/index.html"
+                            width="100%"
+                            height="420"
+                            frameborder="0"
+                            title="ChocoDrop ミニデモ"
+                            loading="lazy"
+                            allow="microphone; clipboard-read; clipboard-write"
+                            style="border: 1px solid rgba(255,248,231,.12); border-radius: var(--r-m); overflow: hidden;">
+                    </iframe>
+                    <div style="margin-top: 12px; font-size: 12px; color: rgba(255, 248, 231, 0.7);">
+                        <a href="examples/basic/index.html" style="color: var(--choco-milk); text-decoration: none;">全画面で開く →</a><br>
+                        <span style="opacity: 0.8;">キーボード: ＠で起動 / Tabでフォーカス移動 / Enterで実行</span>
+                    </div>
+                </div>
+                <div class="bento-box" id="video-section">
+                    <h2 class="bento-title">手元の素材で、はじめよう</h2>
+                    <div class="demo-embed">
+                        <div style="padding: 24px; line-height: 1.9;"><ol><li>デモを開く</li><li>「Import」で画像・動画・GLBを選ぶ</li><li>自動でシーンに配置される</li></ol><a href="getting-started.html">ローカル起動・Codex・Claude Code連携の手順 →</a><p>生成した素材も、普段のツールから保存して使えます。</p></div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Bento Section 2: 3つの価値 -->
+        <section class="bento-section">
+            <div class="bento-grid bento-row-2">
+                <div class="bento-box highlight-cursor">
+                    <span class="feature-icon">🎮</span>
+                    <h3 class="bento-title">デモで触って感覚をつかむ</h3>
+                    <p class="bento-description">
+                        インストール不要でブラウザで体験。<br>
+                        ブックマークレットで既存サイトにも。<br>
+                        まずは触って、雰囲気を感じてみよう。
+                    </p>
+                </div>
+                <div class="bento-box highlight-cursor">
+                    <span class="feature-icon">🔧</span>
+                    <h3 class="bento-title">気に入ったらプロジェクトに導入</h3>
+                    <p class="bento-description">
+                        npm install で自分のThree.jsプロジェクトに。<br>
+                        SDK組み込みで本格的に活用。<br>
+                        開発環境に合わせて柔軟に対応。
+                    </p>
+                </div>
+                <div class="bento-box highlight-cursor">
+                    <span class="feature-icon">✨</span>
+                    <h3 class="bento-title">いつもの制作ツールとつなぐ</h3>
+                    <p class="bento-description">
+                        お好きなAI・MCP・CLIで作った素材を配置。<br>
+                        Codex・Claude Codeから呼べるローカルMCPも。<br>
+                        <a href="getting-started.html">接続方法を見る →</a>
+                    </p>
+                </div>
+            </div>
+        </section>
+        <!-- Bento Section 3: Gallery + Challenge (アルファ版では非表示) -->
+        <!--
+        <section class="bento-section">
+            <div class="bento-grid bento-row-3">
+                <div class="bento-box">
+                    <h3 class="bento-title" id="weekly-drops">今週のしずくたち</h3>
+                    <div class="cd-drops-grid">
+                        <a class="cd-card" href="examples/music-garden/index.html" aria-label="夜桜の庭 をこのテーマで作る">
+                            <div class="cd-thumb" role="img" aria-label="夜桜の庭のサンプルビジュアル">
+                                <div class="cd-thumb-overlay">夜桜の庭</div>
+                            </div>
+                            <div class="cd-meta">
+                                <span class="cd-badge">テーマ: 音楽の花園</span>
+                                <strong class="cd-title">夜桜、音に咲く</strong>
+                                <span class="cd-author">by demo_user</span>
+                            </div>
+                            <span class="cd-cta">このテーマで作る →</span>
+                        </a>
+                        <a class="cd-card" href="examples/pixel-rpg/index.html" aria-label="失われた王国の広場 をこのテーマで作る">
+                            <div class="cd-thumb cd-thumb--rpg" role="img" aria-label="失われた王国の広場のサンプルビジュアル">
+                                <div class="cd-thumb-overlay">失われた王国の広場</div>
+                            </div>
+                            <div class="cd-meta">
+                                <span class="cd-badge">テーマ: RPG王国</span>
+                                <strong class="cd-title">朝霧のアーチ</strong>
+                                <span class="cd-author">by demo_user</span>
+                            </div>
+                            <span class="cd-cta">このテーマで作る →</span>
+                        </a>
+                        <a class="cd-card" href="examples/pixel-ocean/index.html" aria-label="灯るクラゲ街 をこのテーマで作る">
+                            <div class="cd-thumb cd-thumb--sea" role="img" aria-label="海底のサンプルビジュアル">
+                                <div class="cd-thumb-overlay">灯るクラゲ街</div>
+                            </div>
+                            <div class="cd-meta">
+                                <span class="cd-badge">テーマ: 海底世界</span>
+                                <strong class="cd-title">ブルー・ドリフト</strong>
+                                <span class="cd-author">by demo_user</span>
+                            </div>
+                            <span class="cd-cta">このテーマで作る →</span>
+                        </a>
+                    </div>
+                </div>
+                <div class="bento-box challenge-box">
+                    <h3 class="bento-title">🏆 今週のチャレンジ</h3>
+                    <p class="bento-description">
+                        お題：「未来の和室」<br>
+                        テクノロジーと和の融合を表現しよう！<br>
+                        #ChocoDrop #WeeklyChallenge
+                    </p>
+                    <a href="examples/basic/index.html" class="challenge-button melting-hover">
+                        参加する
+                    </a>
+                </div>
+            </div>
+        </section>
+        -->
+        <!-- Bento Section 3.5: Bookmarklet CTA -->
+        <section class="bento-section" style="padding: 60px 0;">
+            <div class="bento-grid" style="grid-template-columns: 1fr; max-width: 800px; margin: 0 auto;">
+                <div class="bento-box" style="background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 108, 71, 0.08)); border: 2px solid rgba(139, 92, 246, 0.3); text-align: center; padding: 48px 40px;">
+                    <h3 class="bento-title" style="font-size: 2rem; margin-bottom: 16px;">🍫 ブックマークレットで試す</h3>
+                    <p class="bento-description" style="margin-bottom: 24px; font-size: 1.1rem; color: var(--choco-cream); opacity: 0.9;">
+                        ローカルdaemonを起動して、Three.jsのサンプルサイトで<strong>今すぐ</strong>試せます。
+                    </p>
+                    <a href="examples/bookmarklet-v2.html" class="btn-primary melting-hover" style="font-size: 1.2rem; padding: 18px 40px; display: inline-block;">
+                        📖 ブックマークレット登録ページへ
+                    </a>
+                    <p style="margin-top: 16px; font-size: 0.95rem; opacity: 0.7; color: var(--choco-cream);">
+                        ⚠️ <strong>制限:</strong> 対象サイトの構成によって利用できない場合があります。まずは上のBasicデモでファイル配置をお試しください。
+                    </p>
+                </div>
+            </div>
+        </section>
+        <!-- Bento Section 4: Documentation -->
+        <section class="bento-section">
+            <div class="bento-grid bento-row-4">
+                <div class="bento-box">
+                    <h3 class="bento-title">開発者向けドキュメント</h3>
+                    <p class="bento-description" style="margin-bottom: 24px;">
+                        npm install chocodrop で、あなたのプロジェクトにも導入できます。
+                    </p>
+                    <div style="display: flex; gap: 16px; flex-wrap: wrap;">
+                        <a href="https://github.com/nyukicorn/chocodrop" class="btn-secondary melting-hover" style="font-size: 14px; padding: 12px 20px;">
+                            📚 README
+                        </a>
+                        <a href="getting-started.html" class="btn-secondary melting-hover" style="font-size: 14px; padding: 12px 20px;">
+                            📖 Docs
+                        </a>
+                        <a href="https://www.npmjs.com/package/chocodrop" class="btn-secondary melting-hover" style="font-size: 14px; padding: 12px 20px;">
+                            📦 npm
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+    <!-- Footer -->
+    <footer>
+        <div class="container">
+            <div class="footer-links">
+                <a href="https://github.com/nyukicorn/chocodrop">GitHub</a>
+                <a href="https://github.com/nyukicorn/chocodrop/blob/main/LICENSE">MIT License</a>
+                <a href="https://github.com/nyukicorn/chocodrop/blob/main/README.md">README</a>
+                <a href="getting-started.html">Docs</a>
+            </div>
+            <p>© 2025 ChocoDrop. Made with 🍫 and ✨</p>
+        </div>
+    </footer>
+    <script>
+        // Demo carousel interactions
+        const carouselTrack = document.querySelector('[data-carousel-track]');
+        if (carouselTrack) {
+            const cards = Array.from(carouselTrack.querySelectorAll('.carousel-card'));
+            const navButtons = Array.from(document.querySelectorAll('.carousel-nav button'));
+            const dots = Array.from(document.querySelectorAll('[data-carousel-dot]'));
+            const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+            let currentIndex = 0;
+            let isProgrammatic = false;
+            let autoplayTimer = null;
+            let scrollDebounce = null;
+            const getStep = () => {
+                if (cards.length <= 1) {
+                    return cards[0]?.offsetWidth ?? 0;
+                }
+                return cards[1].offsetLeft - cards[0].offsetLeft;
+            };
+            const updateDots = (index) => {
+                dots.forEach((dot, dotIndex) => {
+                    const isActive = dotIndex === index;
+                    dot.classList.toggle('is-active', isActive);
+                    dot.setAttribute('aria-current', isActive ? 'true' : 'false');
+                });
+            };
+            const updateNav = (index) => {
+                const maxIndex = cards.length - 1;
+                navButtons.forEach((btn) => {
+                    if (btn.dataset.direction === 'prev') {
+                        btn.disabled = index <= 0;
+                    } else {
+                        btn.disabled = index >= maxIndex;
+                    }
+                });
+            };
+            const scrollToIndex = (index) => {
+                const step = getStep();
+                if (!step) return;
+                const maxIndex = cards.length - 1;
+                const clamped = Math.max(0, Math.min(index, maxIndex));
+                isProgrammatic = true;
+                carouselTrack.scrollTo({
+                    left: clamped * step,
+                    behavior: 'smooth'
+                });
+                currentIndex = clamped;
+                updateDots(currentIndex);
+                updateNav(currentIndex);
+                window.setTimeout(() => {
+                    isProgrammatic = false;
+                }, 420);
+            };
+            const stopAutoplay = () => {
+                if (autoplayTimer) {
+                    window.clearInterval(autoplayTimer);
+                    autoplayTimer = null;
+                }
+            };
+            const startAutoplay = () => {
+                stopAutoplay();
+                if (prefersReducedMotion.matches || cards.length <= 1) return;
+                autoplayTimer = window.setInterval(() => {
+                    const nextIndex = (currentIndex + 1) % cards.length;
+                    scrollToIndex(nextIndex);
+                }, 12000);
+            };
+            navButtons.forEach((btn) => {
+                btn.addEventListener('click', () => {
+                    const direction = btn.dataset.direction === 'prev' ? -1 : 1;
+                    scrollToIndex(currentIndex + direction);
+                });
+            });
+            dots.forEach((dot) => {
+                dot.addEventListener('click', () => {
+                    const targetIndex = Number(dot.dataset.carouselDot);
+                    scrollToIndex(targetIndex);
+                });
+            });
+            carouselTrack.addEventListener('scroll', () => {
+                if (isProgrammatic) return;
+                window.clearTimeout(scrollDebounce);
+                scrollDebounce = window.setTimeout(() => {
+                    const step = getStep();
+                    if (!step) return;
+                    const rawIndex = Math.round(carouselTrack.scrollLeft / step);
+                    const nextIndex = Math.max(0, Math.min(rawIndex, cards.length - 1));
+                    if (nextIndex !== currentIndex) {
+                        currentIndex = nextIndex;
+                        updateDots(currentIndex);
+                        updateNav(currentIndex);
+                    }
+                }, 80);
+            });
+            window.addEventListener('resize', () => {
+                scrollToIndex(currentIndex);
+            });
+            carouselTrack.addEventListener('pointerdown', stopAutoplay);
+            carouselTrack.addEventListener('mouseenter', stopAutoplay);
+            carouselTrack.addEventListener('mouseleave', startAutoplay);
+            document.addEventListener('visibilitychange', () => {
+                if (document.hidden) {
+                    stopAutoplay();
+                } else {
+                    startAutoplay();
+                }
+            });
+            const handleMotionPrefChange = () => {
+                if (prefersReducedMotion.matches) {
+                    stopAutoplay();
+                } else {
+                    startAutoplay();
+                }
+            };
+            if (typeof prefersReducedMotion.addEventListener === 'function') {
+                prefersReducedMotion.addEventListener('change', handleMotionPrefChange);
+            } else if (typeof prefersReducedMotion.addListener === 'function') {
+                prefersReducedMotion.addListener(handleMotionPrefChange);
+            }
+            updateDots(currentIndex);
+            updateNav(currentIndex);
+            startAutoplay();
+        }
+        // Scroll to video section
+        function scrollToVideo() {
+            document.getElementById('video-section').scrollIntoView({
+                behavior: 'smooth',
+                block: 'center'
+            });
+        }
+        // Simple cursor follow effect for hero
+        const heroContent = document.querySelector('.hero-content');
+        if (heroContent) {
+            heroContent.addEventListener('mousemove', (e) => {
+                const rect = heroContent.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const highlight = heroContent.querySelector('::after');
+                if (highlight) {
+                    highlight.style.left = x + 'px';
+                    highlight.style.top = y + 'px';
+                }
+            });
+        }
+        // Hidden easter egg
+        let secretCode = '';
+        document.addEventListener('keypress', (e) => {
+            secretCode += e.key;
+            if (secretCode.includes('月光')) {
+                // Add moon reflection to chocolate cubes
+                document.querySelectorAll('.choco-cube').forEach(cube => {
+                    cube.style.boxShadow = '0 10px 30px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.2)';
+                    setTimeout(() => {
+                        cube.style.boxShadow = '0 10px 30px rgba(0,0,0,0.3)';
+                    }, 3000);
+                });
+                secretCode = '';
+            }
+            // Reset if too long
+            if (secretCode.length > 10) secretCode = '';
+        });
+    </script>
+</body>
+</html>