:root {
        --bg-color: #1a1a1a;
        --text-color: #f0f0f0;
        --accent-color: #00d2ff;
        --card-bg: #2a2a2a;
      }

      body {
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
          "Hiragino Sans", sans-serif;
        background-color: var(--bg-color);
        color: var(--text-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
      }

      header {
        padding: 2rem;
        text-align: center;
      }

      h1 {
        font-size: 2rem;
        margin-bottom: 0.5rem;
        background: linear-gradient(45deg, #fff, #aaa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      p.subtitle {
        color: #888;
        font-size: 0.9rem;
      }

      /* Grid Layout */
      .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        width: 90%;
        max-width: 1200px;
        padding-bottom: 4rem;
      }

      /* Cards */
      .card {
        background-color: var(--card-bg);
        border-radius: 12px;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
        position: relative;
        overflow: hidden;
        min-height: 300px; /* カードの高さを統一 */
      }

      .card h2 {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
        color: var(--accent-color);
        z-index: 2;
        text-align: center;
      }

      .instruction {
        margin-top: 1rem;
        font-size: 0.8rem;
        color: #666;
        text-align: center;
      }

      /* DEMO 1: Water Ripple */
      .water-demo {
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-radius: 8px;
        position: relative;
      }

      .water-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: url("#water-filter");
      }

      /* DEMO 2: Glitch Text */
      .glitch-demo {
        font-size: 3rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 4px;
        position: relative;
        cursor: pointer;
        filter: url("#glitch-filter");
        user-select: none;
      }

      /* DEMO 3: Liquid Button */
      .liquid-btn {
        position: relative;
        padding: 1rem 2.5rem;
        background: var(--accent-color);
        color: #000;
        font-weight: bold;
        font-size: 1.1rem;
        border: none;
        border-radius: 30px;
        cursor: pointer;
        outline: none;
        filter: url("#liquid-filter");
        transition: background 0.3s;
      }
      .liquid-btn:hover {
        background: #fff;
      }

      /* DEMO 4: Squiggly Box */
      .squiggly-box {
        border: 4px solid #fff;
        padding: 1.5rem;
        font-weight: bold;
        font-size: 1.2rem;
        background: transparent;
        color: #fff;
        filter: url("#squiggly-filter");
        margin: 10px;
      }

      /* DEMO 5: Warp Speed */
      .warp-container {
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, #ff00cc, #3333ff);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        filter: url("#warp-filter");
      }
      .warp-icon {
        width: 50px;
        height: 50px;
        fill: #fff;
      }

      /* DEMO 6: Reveal Image (Updated Design) */
      .reveal-demo {
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-radius: 8px;
        position: relative;
        cursor: pointer;
      }
      .reveal-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: url("#reveal-filter");
        transition: transform 0.5s;
      }
      .reveal-demo:hover .reveal-image {
        transform: scale(1.05);
      }
      /* Glassmorphism Button Style */
      .reveal-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Glass effect */
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

        padding: 0.8rem 1.5rem;
        border-radius: 50px;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 0.85rem;
      }
      .reveal-icon {
        width: 18px;
        height: 18px;
        fill: currentColor;
      }
      /* ホバー時にボタンが少し浮く */
      .reveal-demo:hover .reveal-overlay {
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -55%);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      }

      /* DEMO 7: Gooey Effect */
      .gooey-container {
        width: 200px;
        height: 200px;
        position: relative;
        filter: url("#gooey-filter");
      }
      .gooey-ball {
        position: absolute;
        width: 60px;
        height: 60px;
        background: var(--accent-color);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* DEMO 8: Morphology Text */
      .morph-text {
        font-size: 3.5rem;
        font-weight: 900;
        color: #fff;
        filter: url("#morph-filter");
        letter-spacing: 2px;
      }

      /* DEMO 9: Hologram (NEW) */
      .hologram-container {
        position: relative;
        width: 100%;
        height: 200px;
        background: #000;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      /* ホログラム画像 */
      .hologram-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* フィルター適用 */
        filter: url("#hologram-filter") brightness(1.2);
        opacity: 0.8;
        mix-blend-mode: screen;
      }
      /* 走査線（CSSで実装） */
      .scanlines {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0) 50%,
          rgba(0, 0, 0, 0.4) 50%,
          rgba(0, 0, 0, 0.4)
        );
        background-size: 100% 4px; /* 4pxごとのライン */
        pointer-events: none;
        z-index: 10;
      }
      .hologram-text {
        position: absolute;
        color: var(--accent-color);
        font-family: "Courier New", monospace;
        font-weight: bold;
        font-size: 1.5rem;
        text-shadow: 0 0 10px var(--accent-color);
        z-index: 11;
        letter-spacing: 4px;
      }

      /* DEMO 10: Motion Blur */
      .blur-text {
        font-size: 3rem;
        font-weight: 900;
        font-style: italic;
        color: #ff0055;
        filter: url("#motion-blur-filter");
        white-space: nowrap;
      }

      /* DEMO 11: Erosion */
      .erode-text {
        font-size: 3.5rem;
        font-weight: bold;
        color: #aaa;
        filter: url("#erode-filter");
        letter-spacing: 4px;
      }

      /* DEMO 12: 3D Lighting */
      .lighting-box {
        width: 100%;
        height: 200px;
        background: #222;
        border-radius: 8px;
        /* 光の効果を適用 */
        filter: url("#lighting-filter");
        cursor: crosshair;
      }

      /* Hidden SVG Filter Container */
      .svg-filters {
        position: absolute;
        width: 0;
        height: 0;
        pointer-events: none;
      }