*, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --bg: #f4f2ee;
      --card-shadow: 0 4px 30px rgba(0, 0, 0, 0.06), 0 12px 50px rgba(0, 0, 0, 0.08);
      --line: #e8e6e2;
      --text: #0d0d0d;
    }

    html {
      scrollbar-width: none; 
      -ms-overflow-style: none; 
    }
    html::-webkit-scrollbar {
      display: none; 
    }

    html, body {
      min-height: 100%;
    }

    body {
      font-family: 'Google Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      overflow-y: auto;
    }

    .droplet-field {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .droplet {
      position: absolute;
      background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.05) 100%);
      box-shadow: 
        inset 20px 20px 30px rgba(255,255,255,0.8),
        inset -10px -10px 20px rgba(0,0,0,0.03),
        15px 25px 40px rgba(0,0,0,0.06);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.4);
      animation: liquidMorph 12s ease-in-out infinite alternate;
      will-change: border-radius, transform;
    }

    .drop-1 {
      width: 480px; height: 480px;
      top: -5%; left: -5%;
      background: linear-gradient(135deg, rgba(74, 144, 226, 0.3), rgba(255,255,255,0.05));
    }

    .drop-2 {
      width: 580px; height: 580px;
      bottom: -10%; right: -5%;
      background: linear-gradient(135deg, rgba(255, 107, 139, 0.25), rgba(255,255,255,0.05));
      animation-duration: 16s;
      animation-direction: alternate-reverse;
    }

    .drop-3 {
      width: 320px; height: 320px;
      top: 45%; right: 15%;
      background: linear-gradient(135deg, rgba(255, 183, 77, 0.2), rgba(255,255,255,0.05));
      animation-duration: 10s;
      animation-delay: -4s;
    }

    @keyframes liquidMorph {
      0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: translateY(0) rotate(0deg); }
      34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; transform: translateY(25px) rotate(10deg); }
      67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; transform: translateY(-15px) rotate(-8deg); }
      100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: translateY(0) rotate(0deg); }
    }

    .app {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 60px 16px;
      animation: pageReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes pageReveal {
      0% { filter: blur(28px); transform: scale(1.05); opacity: 0; }
      100% { filter: blur(0); transform: scale(1); opacity: 1; }
    }

    .scene {
      width: min(520px, 100%);
      perspective: 2000px;
    }

    .flip-stage {
      display: grid;
      width: 100%;
      transform-style: preserve-3d;
      will-change: transform;
    }

    .flip-stage > * {
      grid-area: 1 / 1;
    }

    .flip-stage.revealed {
      animation: springFlip 1.6s forwards;
    }

    @keyframes springFlip {
      0% { transform: rotateY(0deg) scale(1); }
      45% { transform: rotateY(196deg) scale(1.015); }
      68% { transform: rotateY(174deg) scale(0.998); }
      84% { transform: rotateY(183deg) scale(1.002); }
      100% { transform: rotateY(180deg) scale(1); }
    }

    .face {
      width: 100%;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .intro-face {
      z-index: 2;
    }

    .card-face {
      z-index: 1;
      transform: rotateY(180deg);
    }

    .intro-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%; 
      min-height: 560px;
      background: linear-gradient(145deg, #ffffff 0%, #f7f5f1 100%);
      border-radius: 4px;
      box-shadow: var(--card-shadow);
      border: 1px solid rgba(17, 17, 17, 0.05);
      position: relative;
      overflow: hidden;
      will-change: filter, transform;
    }

    .card {
      height: 100%;
      background: rgba(255, 255, 255, 0.98);
      border-radius: 4px;
      box-shadow: var(--card-shadow);
      overflow: hidden;
      will-change: filter, transform;
    }

    .flip-stage.revealed .intro-card {
      animation: introMotionBlur 1.6s linear forwards;
    }

    .flip-stage.revealed .card {
      animation: cardMotionBlur 1.6s linear forwards;
    }

    @keyframes introMotionBlur {
      0% { filter: blur(0px); transform: scaleX(1); opacity: 1; }
      12% { filter: blur(3px); transform: scaleX(1.01); opacity: 1; }
      22% { filter: blur(12px); transform: scaleX(1.04); opacity: 0.4; }
      100% { filter: blur(12px); transform: scaleX(1.04); opacity: 0; }
    }

    @keyframes cardMotionBlur {
      0% { filter: blur(12px); transform: scaleX(1.04); }
      22% { filter: blur(12px); transform: scaleX(1.04); }
      40% { filter: blur(0px); transform: scaleX(1); }
      100% { filter: blur(0px); transform: scaleX(1); }
    }

    .intro-content {
      text-align: center;
      padding: 40px 24px;
      opacity: 0;
      animation: textSettle 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      animation-delay: 0.3s;
    }

    @keyframes textSettle {
      0% { filter: blur(12px); transform: translateY(15px) scale(1.04); opacity: 0; }
      100% { filter: blur(0); transform: translateY(0) scale(1); opacity: 1; }
    }

    .intro-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #777; margin-bottom: 18px; }
    .intro-title { font-family: 'Google Sans Display', sans-serif; font-size: clamp(44px, 11vw, 72px); line-height: 0.95; letter-spacing: -0.03em; color: #0d0d0d; }
    .intro-title em { font-style: italic; color: #444; }
    .intro-sub { margin-top: 18px; font-size: 13px; color: #777; font-weight: 300; letter-spacing: 0.04em; }

    .top-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--line); }
    .top-bar-left { display: flex; align-items: center; gap: 8px; }
    .live-dot { width: 7px; height: 7px; background: #22C55E; border-radius: 50%; animation: ping 2s ease-out infinite; }
    
    @keyframes ping {
      0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
      70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
      100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
    }

    .top-label { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #111; }
    .top-date { font-size: 11px; color: #999; letter-spacing: 0.04em; }

    .hero { padding: 40px 28px 32px; border-bottom: 1px solid var(--line); }
    .domain-display { font-family: 'Google Sans Display', sans-serif; font-size: clamp(48px, 10vw, 64px); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 20px; }
    .domain-display em { font-style: italic; color: #444; }
    .hero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .divider-dot { width: 3px; height: 3px; background: #ccc; border-radius: 50%; flex-shrink: 0; }
    .hero-meta-text { font-size: 13px; color: #666; font-weight: 300; line-height: 1.5; }

    .stats-row { display: grid; grid-template-columns: 1fr 1px 1fr; border-bottom: 1px solid var(--line); }
    .stat { padding: 24px 28px; }
    .stat-rule { background: var(--line); }
    .stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #aaa; margin-bottom: 6px; }
    .stat-value { font-family: 'Google Sans Display', sans-serif; font-size: 26px; font-weight: 400; letter-spacing: -0.01em; }
    .stat-value sup { font-family: 'Google Sans', sans-serif; font-size: 13px; vertical-align: super; margin-right: 1px; color: #444; }
    .stat-sub { font-size: 11.5px; color: #999; margin-top: 3px; font-weight: 300; }

    .body { padding: 28px 28px 24px; }
    .body-text { font-size: 14px; line-height: 1.75; color: #4a4a4a; font-weight: 300; }
    .body-text strong { color: #111; font-weight: 500; }

    .toggle-row { padding: 0 28px 28px; }
    .toggle-btn {
      display: inline-flex; align-items: center; gap: 10px; background: #0d0d0d; color: #fff;
      border: none; font-family: 'Google Sans', sans-serif; font-size: 12px; font-weight: 500;
      letter-spacing: 0.09em; text-transform: uppercase; padding: 11px 20px; border-radius: 2px;
      cursor: pointer; transition: background 0.2s, transform 0.15s;
    }
    .toggle-btn:hover { background: #333; }
    .toggle-btn:active { transform: scale(0.98); }
    .arrow-icon { display: flex; align-items: center; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
    .toggle-btn.open .arrow-icon { transform: rotate(180deg); }

    .expand-wrap { overflow: hidden; max-height: 0; transition: max-height 0.6s cubic-bezier(0.16,1,0.3,1); }
    .expand-wrap.open { max-height: 450px; }
    .expand-inner { border-top: 1px solid var(--line); padding: 28px 28px 32px; background: #faf9f7; }
    .expand-heading { font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #aaa; margin-bottom: 20px; }
    .detail-list { display: flex; flex-direction: column; gap: 16px; }
    .detail-row { display: grid; grid-template-columns: 76px 1fr; gap: 16px; }
    .detail-key { font-size: 11.5px; color: #bbb; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding-top: 1px; }
    .detail-val { font-size: 13.5px; color: #333; font-weight: 300; line-height: 1.6; }

    .footer {
      position: fixed;
      bottom: 22px; left: 50%; transform: translateX(-50%);
      z-index: 20; font-size: 11.5px; color: #aaa; letter-spacing: 0.04em; white-space: nowrap;
    }
    .footer a { color: #555; text-decoration: none; font-weight: 500; transition: color 0.2s; }
    .footer a:hover { color: #111; }

    @media (max-width: 640px) {
      .detail-row { grid-template-columns: 1fr; gap: 6px; }
      .stats-row { grid-template-columns: 1fr; }
      .stat-rule { width: 100%; height: 1px; }
      .drop-1, .drop-2 { width: 380px; height: 380px; }
      .drop-3 { display: none; }
    }