*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

    :root {
      --pink:    #f472b6;
      --pink-s:  #ec4899;
      --lilac:   #c084fc;
      --sky:     #7dd3fc;
      --mint:    #6ee7b7;
      --peach:   #fca5a5;
      --lemon:   #fde68a;
      --white15: rgba(255,255,255,0.15);
      --white08: rgba(255,255,255,0.08);
      --white04: rgba(255,255,255,0.04);
    }

    body {
      font-family: 'Prompt', sans-serif;
      background: #0e0618;
      color: #fff;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ── Deep kawaii background ── */
    .bg-layer {
      position: fixed; inset: 0; z-index: 0;
      background:
        radial-gradient(ellipse 75% 55% at 10% 15%,  rgba(244,114,182,0.22) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 90% 80%,  rgba(192,132,252,0.2)  0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 55%  5%,  rgba(125,211,252,0.15) 0%, transparent 50%),
        radial-gradient(ellipse 40% 40% at 80% 30%,  rgba(252,165,165,0.12) 0%, transparent 50%),
        radial-gradient(ellipse 35% 35% at 20% 80%,  rgba(110,231,183,0.1)  0%, transparent 50%);
      animation: bg-breathe 10s ease-in-out infinite alternate;
    }
    @keyframes bg-breathe {
      0%   { filter: hue-rotate(0deg)   brightness(1);   }
      100% { filter: hue-rotate(20deg)  brightness(1.08); }
    }

    /* soft orbs */
    .orb {
      position: fixed; border-radius: 50%;
      filter: blur(90px); pointer-events: none; z-index: 0;
      animation: orb-drift ease-in-out infinite alternate;
    }
    .o1 { width:520px; height:520px; background:rgba(244,114,182,0.14); top:-120px; left:-80px;  animation-duration:14s; }
    .o2 { width:420px; height:420px; background:rgba(192,132,252,0.12); bottom:-80px; right:-60px; animation-duration:18s; }
    .o3 { width:280px; height:280px; background:rgba(125,211,252,0.1);  top:40%; left:55%; animation-duration:12s; }
    @keyframes orb-drift {
      from { transform: translate(0,0) scale(1); }
      to   { transform: translate(25px,-35px) scale(1.06); }
    }

    /* ── Stars canvas ── */
    #stars { position:fixed; inset:0; z-index:0; pointer-events:none; }

    /* ── Glassmorphism base ── */
    .glass {
      background: rgba(255,255,255,0.07);
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow:
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 1.5px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.08);
    }

    /* ── Page wrapper ── */
    .wrap { position:relative; z-index:10; max-width:980px; margin:0 auto; padding:4.5rem 1.25rem 5rem; }

    /* ── Sparkle elements (static decorative) ── */
    .sparkle {
      position: absolute; pointer-events: none;
      animation: sparkle-twinkle ease-in-out infinite;
    }
    @keyframes sparkle-twinkle {
      0%,100% { opacity:0.3; transform: scale(0.8) rotate(0deg); }
      50%      { opacity:1;   transform: scale(1.2) rotate(20deg); }
    }

    /* ── Float ── */
    .float { animation: float 4s ease-in-out infinite; }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

    /* ── HEADER ── */
    .header { text-align: center; margin-bottom: 3.5rem; position: relative; }

    .header-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 88px; height: 88px; border-radius: 28px;
      background: linear-gradient(135deg, rgba(244,114,182,0.25), rgba(192,132,252,0.25));
      border: 1.5px solid rgba(255,255,255,0.25);
      box-shadow: 0 0 50px rgba(244,114,182,0.3), 0 0 100px rgba(192,132,252,0.15), inset 0 1.5px 0 rgba(255,255,255,0.3);
      margin-bottom: 1.5rem;
    }

    .title-main {
      font-size: clamp(2.4rem, 7vw, 4.5rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.15;
      background: linear-gradient(135deg, #fce7f3 0%, #f9a8d4 25%, #c084fc 55%, #93c5fd 85%, #a5f3fc 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0.4rem;
    }

    .title-sub {
      font-size: 1.4rem; font-weight: 300;
      color: rgba(255,255,255,0.55);
      margin-bottom: 0.6rem;
    }

    .tagline {
      font-size: 0.9rem; color: rgba(255,255,255,0.35);
      letter-spacing: 0.12em; margin-bottom: 2rem;
    }

    /* dot divider */
    .dot-divider {
      display: flex; align-items: center; justify-content: center;
      gap: 0.5rem; margin: 1.25rem auto 1.75rem;
    }
    .dot-divider span {
      width: 5px; height: 5px; border-radius: 50%;
      animation: dot-pulse 2s ease-in-out infinite;
    }
    .dot-divider span:nth-child(1){ background: var(--pink);  animation-delay: 0s; }
    .dot-divider span:nth-child(2){ background: var(--lilac); animation-delay: 0.2s; width:7px; height:7px; }
    .dot-divider span:nth-child(3){ background: var(--sky);   animation-delay: 0.4s; }
    @keyframes dot-pulse { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.5);opacity:1} }

    /* ── Pill nav ── */
    .pill-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:0.75rem; }

    .pill {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.6rem 1.4rem;
      border-radius: 99px;
      font-size: 0.875rem; font-weight: 500;
      text-decoration: none;
      backdrop-filter: blur(12px);
      transition: all 0.3s cubic-bezier(0.23,1,0.32,1);
      border: 1px solid;
    }
    .pill:hover { transform: translateY(-3px) scale(1.03); }

    .pill-pink  { background:rgba(244,114,182,0.12); border-color:rgba(244,114,182,0.35); color:#fce7f3;
                  box-shadow: 0 0 20px rgba(244,114,182,0.15); }
    .pill-pink:hover { background:rgba(244,114,182,0.22); box-shadow: 0 0 35px rgba(244,114,182,0.3); }

.pill-sky   { background:rgba(125,211,252,0.1); border-color:rgba(125,211,252,0.35); color:#e0f2fe;
                  box-shadow: 0 0 20px rgba(125,211,252,0.12); }
.pill-sky:hover { background:rgba(125,211,252,0.2); box-shadow: 0 0 35px rgba(125,211,252,0.25); }

    .pill-orange {
      background:
        linear-gradient(135deg, rgba(251,146,60,0.22), rgba(253,186,116,0.09)),
        rgba(255,255,255,0.035);
      border-color:rgba(251,146,60,0.42);
      color:#ffedd5;
      box-shadow:0 0 22px rgba(251,146,60,0.14), inset 0 1px 0 rgba(255,255,255,0.18);
    }
    .pill-orange:hover {
      background:
        linear-gradient(135deg, rgba(251,146,60,0.34), rgba(253,186,116,0.14)),
        rgba(255,255,255,0.06);
      border-color:rgba(253,186,116,0.62);
      box-shadow:0 0 36px rgba(251,146,60,0.28), inset 0 1px 0 rgba(255,255,255,0.24);
    }

    .pill-flower {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 84% 22%, rgba(255,255,255,0.34) 0 8%, transparent 9%),
        radial-gradient(circle at 78% 34%, rgba(255,255,255,0.2) 0 6%, transparent 7%),
        linear-gradient(135deg, rgba(255,45,154,0.36), rgba(255,119,198,0.16)),
        rgba(255,255,255,0.04);
      border-color: rgba(255,83,177,0.7);
      color: #fff0f8;
      box-shadow: 0 0 26px rgba(255,45,154,0.34), inset 0 1px 0 rgba(255,255,255,0.25);
    }
    .pill-flower::before {
      content: "✿";
      position: absolute;
      right: 1.9rem;
      bottom: -0.55rem;
      font-size: 3.2rem;
      line-height: 1;
      color: rgba(255,255,255,0.16);
      transform: rotate(-14deg);
      pointer-events: none;
    }
    .pill-flower:hover {
      background:
        radial-gradient(circle at 84% 22%, rgba(255,255,255,0.42) 0 8%, transparent 9%),
        radial-gradient(circle at 78% 34%, rgba(255,255,255,0.25) 0 6%, transparent 7%),
        linear-gradient(135deg, rgba(255,45,154,0.5), rgba(255,119,198,0.22)),
        rgba(255,255,255,0.06);
      border-color: rgba(255,151,210,0.85);
      box-shadow: 0 0 42px rgba(255,45,154,0.46), inset 0 1px 0 rgba(255,255,255,0.28);
    }
    .pill-emoji, .pill-text, .pill-flower svg { position: relative; z-index: 1; }
    .pill-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.18; }
    .pill-text strong { font-size:0.875rem; font-weight:700; }
    .pill-text small { margin-top:0.12rem; font-size:0.68rem; color:rgba(255,240,248,0.82); font-weight:500; }

    .pill svg { width:15px; height:15px; transition: transform 0.25s; }
    .pill:hover svg { transform: translateX(3px); }

    /* ── Workshop Banner ── */
    .workshop-wrap {
      margin-bottom: 2.5rem;
      border-radius: 1.5rem;
      padding: 2px;
      background: linear-gradient(135deg, var(--pink), var(--lilac), var(--sky), var(--lilac), var(--pink));
      background-size: 300% 300%;
      animation: gradient-shift 5s ease infinite;
      box-shadow: 0 0 40px rgba(244,114,182,0.25), 0 0 80px rgba(192,132,252,0.15);
    }
    @keyframes gradient-shift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .workshop-inner {
      display: flex; flex-wrap: wrap;
      align-items: center; justify-content: space-between;
      gap: 1.25rem;
      padding: 1.5rem 1.75rem;
      border-radius: calc(1.5rem - 2px);
      background: rgba(14,6,24,0.85);
      backdrop-filter: blur(20px);
    }

    .workshop-left { display:flex; align-items:center; gap:1.1rem; }

    .workshop-icon {
      width:52px; height:52px; border-radius:1rem; flex-shrink:0;
      display:flex; align-items:center; justify-content:center; font-size:1.4rem;
      background: linear-gradient(135deg, rgba(244,114,182,0.2), rgba(192,132,252,0.2));
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow: 0 0 20px rgba(244,114,182,0.2);
    }

    .workshop-title { font-size:1.1rem; font-weight:700; color:#fff; }
    .workshop-sub   { font-size:0.8rem; color:rgba(255,255,255,0.45); margin-top:0.2rem; font-style:italic; }

    .workshop-cta {
      padding: 0.65rem 1.6rem;
      border-radius: 0.75rem;
      font-weight: 700; font-size: 0.875rem;
      color: #fff; white-space: nowrap;
      background: linear-gradient(135deg, var(--pink-s), var(--lilac));
      box-shadow: 0 0 25px rgba(236,72,153,0.4);
      transition: filter 0.25s, transform 0.25s;
      text-decoration: none;
      display: inline-block;
    }
    .workshop-wrap:hover .workshop-cta { filter:brightness(1.1); transform:scale(1.03); }

    /* ── Section label ── */
    .sec-label {
      display: flex; align-items: center; gap: 0.75rem;
      margin-bottom: 1.25rem;
    }
    .sec-label-text {
      font-size: 0.7rem; font-weight: 600;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(244,114,182,0.8);
      white-space: nowrap;
    }
    .sec-rule { flex:1; height:1px; background: linear-gradient(to right, rgba(244,114,182,0.3), transparent); }

    /* ── Menu Grid ── */
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.875rem;
      margin-bottom: 3.5rem;
    }
    @media(max-width:640px) { .menu-grid { grid-template-columns: 1fr; } }

    /* ── Menu Card ── */
    .card {
      border-radius: 1.25rem;
      padding: 1.35rem 1.4rem;
      cursor: pointer;
      text-decoration: none;
      display: block;
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.06);
      box-shadow: 0 6px 24px rgba(0,0,0,0.3), inset 0 1.5px 0 rgba(255,255,255,0.18);
      transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
      position: relative; overflow: hidden;
    }

    /* shine sweep */
    .card::before {
      content: ''; position: absolute;
      top: -60%; left: -80%; width: 35%; height: 220%;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.07), transparent);
      transform: skewX(-20deg);
      transition: left 0.6s ease;
      pointer-events: none;
    }
    .card:hover::before { left: 160%; }

    .card:hover {
      transform: translateY(-5px);
      border-color: rgba(255,255,255,0.28);
      box-shadow: 0 18px 50px rgba(0,0,0,0.4), inset 0 1.5px 0 rgba(255,255,255,0.28);
    }

    /* color glow per card */
    .card-pink   { box-shadow: 0 6px 24px rgba(0,0,0,0.3), inset 0 1.5px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(244,114,182,0.18); }
    .card-lilac  { box-shadow: 0 6px 24px rgba(0,0,0,0.3), inset 0 1.5px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(192,132,252,0.18); }
    .card-peach  { box-shadow: 0 6px 24px rgba(0,0,0,0.3), inset 0 1.5px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(252,165,165,0.18); }
    .card-mint   { box-shadow: 0 6px 24px rgba(0,0,0,0.3), inset 0 1.5px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(110,231,183,0.18); }
    .card-sky    { box-shadow: 0 6px 24px rgba(0,0,0,0.3), inset 0 1.5px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(125,211,252,0.18); }
    .card-lemon  { box-shadow: 0 6px 24px rgba(0,0,0,0.3), inset 0 1.5px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(253,230,138,0.18); }

    .card-pink:hover  { box-shadow: 0 18px 50px rgba(0,0,0,0.4), inset 0 1.5px 0 rgba(255,255,255,0.28), 0 0 0 1px rgba(244,114,182,0.5), 0 0 50px rgba(244,114,182,0.12); }
    .card-lilac:hover { box-shadow: 0 18px 50px rgba(0,0,0,0.4), inset 0 1.5px 0 rgba(255,255,255,0.28), 0 0 0 1px rgba(192,132,252,0.5), 0 0 50px rgba(192,132,252,0.12); }
    .card-peach:hover { box-shadow: 0 18px 50px rgba(0,0,0,0.4), inset 0 1.5px 0 rgba(255,255,255,0.28), 0 0 0 1px rgba(252,165,165,0.5), 0 0 50px rgba(252,165,165,0.12); }
    .card-mint:hover  { box-shadow: 0 18px 50px rgba(0,0,0,0.4), inset 0 1.5px 0 rgba(255,255,255,0.28), 0 0 0 1px rgba(110,231,183,0.5), 0 0 50px rgba(110,231,183,0.12); }
    .card-sky:hover   { box-shadow: 0 18px 50px rgba(0,0,0,0.4), inset 0 1.5px 0 rgba(255,255,255,0.28), 0 0 0 1px rgba(125,211,252,0.5), 0 0 50px rgba(125,211,252,0.12); }
    .card-lemon:hover { box-shadow: 0 18px 50px rgba(0,0,0,0.4), inset 0 1.5px 0 rgba(255,255,255,0.28), 0 0 0 1px rgba(253,230,138,0.5), 0 0 50px rgba(253,230,138,0.12); }

    .card.span2 { grid-column: 1 / -1; }

    .card-passadu {
      background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.16), transparent 24%),
        radial-gradient(circle at 84% 22%, rgba(255,170,214,0.2), transparent 20%),
        linear-gradient(135deg, rgba(255,72,160,0.26), rgba(118,30,102,0.5) 44%, rgba(42,12,46,0.94) 100%);
      border-color: rgba(255,159,211,0.42);
      box-shadow:
        0 14px 34px rgba(0,0,0,0.32),
        inset 0 1.5px 0 rgba(255,255,255,0.2),
        0 0 0 1px rgba(255,128,196,0.22),
        0 0 44px rgba(255,72,160,0.22);
    }
    .card-passadu::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.1) 44%, transparent 60%),
        radial-gradient(circle at 82% 18%, rgba(255,126,194,0.18), transparent 18%);
      opacity: 0.9;
      pointer-events: none;
    }
    .card-passadu:hover {
      transform: translateY(-6px) scale(1.005);
      border-color: rgba(255,196,228,0.68);
      box-shadow:
        0 24px 56px rgba(0,0,0,0.38),
        inset 0 1.5px 0 rgba(255,255,255,0.26),
        0 0 0 1px rgba(255,182,223,0.42),
        0 0 60px rgba(255,80,168,0.3),
        0 0 96px rgba(255,172,215,0.14);
    }
    .card-lunch {
      background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.15), transparent 24%),
        radial-gradient(circle at 84% 22%, rgba(110,231,183,0.18), transparent 22%),
        linear-gradient(135deg, rgba(35,114,104,0.38), rgba(20,65,70,0.62) 48%, rgba(13,31,43,0.94) 100%);
      border-color: rgba(167,243,208,0.42);
      box-shadow:
        0 6px 24px rgba(0,0,0,0.3),
        inset 0 1.5px 0 rgba(255,255,255,0.18),
        0 0 34px rgba(110,231,183,0.12);
    }
    .card-lunch:hover {
      border-color: rgba(167,243,208,0.76);
      box-shadow:
        0 18px 50px rgba(0,0,0,0.4),
        inset 0 1.5px 0 rgba(255,255,255,0.28),
        0 0 50px rgba(110,231,183,0.2);
    }
    .lunch-ico {
      background: linear-gradient(135deg, rgba(110,231,183,0.3), rgba(125,211,252,0.24));
      box-shadow: 0 0 20px rgba(110,231,183,0.2);
    }
    .card-lunch .card-title { color: #f2fffa; }
    .card-lunch .card-subtitle {
      display: block;
      margin-top: 0.2rem;
      color: rgba(209,250,229,0.82);
      font-size: 0.8rem;
      font-weight: 400;
    }
    .passadu-orb {
      position: absolute;
      top: -18px;
      right: 28px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,202,231,0.36) 0%, rgba(255,92,177,0.22) 34%, transparent 72%);
      filter: blur(10px);
      pointer-events: none;
      animation: passaduPulse 3.8s ease-in-out infinite;
    }
    .passadu-ico {
      position: relative;
      background: linear-gradient(135deg, rgba(255,118,193,0.24), rgba(255,197,228,0.14));
      box-shadow: 0 0 20px rgba(255,84,173,0.3);
    }
    .passadu-title-row {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      flex-wrap: wrap;
    }
    .passadu-subtitle {
      display: block;
      margin-top: 0.18rem;
      font-size: 0.8rem;
      font-weight: 400;
      color: rgba(255,223,239,0.92);
    }
    .passadu-badge {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 0.55rem;
      border-radius: 999px;
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #5b0934;
      background: linear-gradient(135deg, #ffd0ea, #ff7bc6);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.56), 0 0 18px rgba(255,96,181,0.28);
    }
    .passadu-mini-cta {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 1rem 0 0.15rem 3.7rem;
    }
    .passadu-mini-cta span {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 0.7rem;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 700;
      color: rgba(255,240,248,0.98);
      background: linear-gradient(135deg, rgba(255,95,183,0.32), rgba(255,158,213,0.18));
      border: 1px solid rgba(255,173,221,0.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 18px rgba(255,78,170,0.12);
    }
    .passadu-link {
      position: relative;
      overflow: hidden;
      align-items: flex-start;
      gap: 0.8rem;
      padding: 0.9rem 1rem;
      background: linear-gradient(135deg, rgba(255,122,194,0.14), rgba(255,255,255,0.04));
      border-color: rgba(255,170,221,0.18);
      color: rgba(255,239,247,0.94);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .passadu-link::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 10%, rgba(255,255,255,0.14) 48%, transparent 76%);
      transform: translateX(-120%);
      transition: transform 0.65s ease;
      pointer-events: none;
    }
    .passadu-link:hover::before { transform: translateX(120%); }
    .passadu-link:hover {
      background: linear-gradient(135deg, rgba(255,103,186,0.24), rgba(255,188,226,0.08));
      border-color: rgba(255,196,230,0.36);
      color: #fff;
      box-shadow: 0 0 24px rgba(255,91,176,0.22), inset 0 1px 0 rgba(255,255,255,0.16);
    }
    .passadu-link-copy {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      min-width: 0;
      line-height: 1.35;
    }
    .passadu-link-copy strong {
      font-size: 0.9rem;
      font-weight: 700;
      color: #fff;
    }
    .passadu-link-copy small {
      font-size: 0.75rem;
      color: rgba(223,215,239,0.82);
    }
    .passadu-link-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 0.9rem;
      flex-shrink: 0;
      background: linear-gradient(135deg, rgba(255,214,237,0.24), rgba(255,114,190,0.2));
      border: 1px solid rgba(255,196,229,0.22);
      box-shadow: 0 0 18px rgba(255,97,182,0.18);
    }
    .passadu-link-hot {
      background: linear-gradient(135deg, rgba(255,69,168,0.28), rgba(255,166,211,0.14));
      border-style: solid !important;
      border-color: rgba(255,163,216,0.38) !important;
    }
    .passadu-link-icon-hot {
      background: linear-gradient(135deg, rgba(255,220,239,0.32), rgba(255,99,181,0.28));
      box-shadow: 0 0 22px rgba(255,92,177,0.24);
    }
    @keyframes passaduPulse {
      0%, 100% { transform: scale(1); opacity: 0.82; }
      50% { transform: scale(1.1); opacity: 1; }
    }

    /* card icon */
    .card-ico {
      width: 44px; height: 44px; border-radius: 0.75rem; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem;
      border: 1px solid rgba(255,255,255,0.14);
    }
    .ico-pink   { background: rgba(244,114,182,0.15); }
    .ico-lilac  { background: rgba(192,132,252,0.15); }
    .ico-peach  { background: rgba(252,165,165,0.15); }
    .ico-mint   { background: rgba(110,231,183,0.15); }
    .ico-sky    { background: rgba(125,211,252,0.15); }
    .ico-lemon  { background: rgba(253,230,138,0.15); }

    .card-head { display:flex; align-items:center; justify-content:space-between; gap:0.875rem; }
    .card-toggle {
      width:100%; padding:0; border:0; background:transparent; color:inherit;
      font:inherit; text-align:left; cursor:pointer;
    }
    .card-toggle:focus-visible { outline:2px solid var(--lilac); outline-offset:4px; }
    .card-left { display:flex; align-items:center; gap:0.875rem; }
    .card-title { font-size:1rem; font-weight:600; color:#fff; line-height:1.3; }

    .chevron {
      width:18px; height:18px; flex-shrink:0;
      color:rgba(255,255,255,0.35);
      transition: transform 0.3s ease, color 0.3s;
    }
    .card.open .chevron { transform:rotate(180deg); color:var(--pink); }

    /* dropdown */
    .dd { max-height:0; overflow:hidden; opacity:0; transition: max-height 0.4s ease, opacity 0.3s, margin-top 0.3s; }
    .card.open .dd { max-height:380px; opacity:1; margin-top:1rem; }

    .dd-link {
      display: flex; align-items: center; gap: 0.65rem;
      padding: 0.75rem 0.875rem;
      border-radius: 0.75rem; margin-bottom: 0.35rem;
      text-decoration: none; font-size: 0.875rem;
      color: rgba(255,255,255,0.6);
      border: 1px solid rgba(255,255,255,0.06);
      transition: all 0.2s;
    }
    .dd-link:last-child { margin-bottom:0; }
    .dd-link:hover { background:rgba(255,255,255,0.07); color:#fff; border-color:rgba(255,255,255,0.15); }

    .dd-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
    .dd-dot-pink  { background:var(--pink); }
    .dd-dot-peach { background:var(--peach); }

    .dd-arr { width:13px; height:13px; margin-left:auto; flex-shrink:0; transition:transform 0.2s; }
    .dd-link:hover .dd-arr { transform:translateX(3px); }

    /* automation link */
    .dd-special {
      background: rgba(244,114,182,0.06);
      border: 1px dashed rgba(244,114,182,0.3) !important;
      color: rgba(252,231,243,0.8) !important;
    }
    .dd-special:hover { background: rgba(244,114,182,0.12) !important; border-color:rgba(244,114,182,0.55) !important; color:#fff !important; }

    .pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--pink); animation:pulse 1.6s ease infinite; flex-shrink:0; }
    @keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:0.5} }

    .dd-premium {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 50%, rgba(255,255,255,0.24), transparent 24%),
        linear-gradient(135deg, rgba(255,214,102,0.34), rgba(255,170,43,0.2) 42%, rgba(255,238,177,0.28) 100%),
        rgba(255,255,255,0.06) !important;
      border: 1px solid rgba(255,219,115,0.6) !important;
      color: #fff7d1 !important;
      box-shadow:
        0 0 0 1px rgba(255,219,115,0.16),
        0 0 24px rgba(255,193,7,0.2),
        inset 0 1px 0 rgba(255,255,255,0.28);
    }
    .dd-premium::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.24) 46%, transparent 72%);
      transform: translateX(-120%);
      transition: transform 0.65s ease;
      pointer-events: none;
    }
    .dd-premium:hover::before { transform: translateX(120%); }
    .dd-premium:hover {
      background:
        radial-gradient(circle at 12% 50%, rgba(255,255,255,0.3), transparent 24%),
        linear-gradient(135deg, rgba(255,224,130,0.42), rgba(255,179,71,0.28) 42%, rgba(255,244,200,0.32) 100%),
        rgba(255,255,255,0.08) !important;
      border-color: rgba(255,235,163,0.82) !important;
      color: #fffcef !important;
      box-shadow:
        0 0 0 1px rgba(255,232,163,0.3),
        0 0 34px rgba(255,193,7,0.34),
        0 0 58px rgba(255,214,102,0.16),
        inset 0 1px 0 rgba(255,255,255,0.34);
    }
    .premium-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
      background: radial-gradient(circle at 35% 35%, #fffef2, #ffd54a 58%, #ffb300 100%);
      box-shadow: 0 0 14px rgba(255,215,64,0.9), 0 0 26px rgba(255,193,7,0.45);
      animation: premium-spark 1.8s ease-in-out infinite;
    }
    .premium-badge {
      margin-left: 0.35rem;
      padding: 0.18rem 0.5rem;
      border-radius: 999px;
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #5f3b00;
      background: linear-gradient(135deg, #fff1a8, #ffc94d);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 0 15px rgba(255,193,7,0.22);
    }
    @keyframes premium-spark {
      0%, 100% { transform: scale(1); opacity: 0.9; }
      50% { transform: scale(1.28); opacity: 1; }
    }

    .premium-callout-wrap {
      display: flex;
      justify-content: center;
      margin: 0.8rem 0 2rem;
    }
    .premium-callout {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      width: min(620px, 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.45rem;
      padding: 1rem 1.1rem 1.1rem;
      border-radius: 1rem;
      text-decoration: none;
      color: #fff7d6;
      background:
        radial-gradient(circle at top, rgba(255,255,255,0.24), transparent 32%),
        linear-gradient(135deg, rgba(255,223,118,0.34), rgba(255,171,64,0.2) 46%, rgba(120,68,0,0.34) 100%),
        rgba(30,16,4,0.84);
      border: 1px solid rgba(255,221,128,0.7);
      box-shadow:
        0 0 0 1px rgba(255,228,150,0.18),
        0 14px 34px rgba(0,0,0,0.28),
        0 0 30px rgba(255,193,7,0.22),
        inset 0 1px 0 rgba(255,255,255,0.25);
      transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease), filter 220ms var(--ease);
    }
    .premium-callout::before {
      content: '';
      position: absolute;
      inset: -30% -10%;
      background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.22) 48%, transparent 70%);
      transform: translateX(-65%) rotate(8deg);
      animation: premium-callout-sweep 4.8s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    .premium-callout:hover {
      transform: translateY(-3px) scale(1.008);
      border-color: rgba(255,241,180,0.9);
      box-shadow:
        0 0 0 1px rgba(255,236,170,0.26),
        0 20px 44px rgba(0,0,0,0.32),
        0 0 40px rgba(255,193,7,0.3),
        0 0 72px rgba(255,214,102,0.08),
        inset 0 1px 0 rgba(255,255,255,0.32);
      filter: brightness(1.05);
    }
    .premium-callout > span { position: relative; z-index: 1; }
    .premium-callout-glow {
      position: absolute !important;
      inset: auto;
      width: 120px;
      height: 120px;
      top: -42px;
      right: -24px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,241,169,0.34) 0%, rgba(255,205,86,0.14) 38%, transparent 72%);
      filter: blur(6px);
      pointer-events: none;
    }
    .premium-callout-mark {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.3rem 0.62rem;
      border-radius: 999px;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #6f4700;
      background: linear-gradient(135deg, #fff3b4, #ffc94f);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.66), 0 0 18px rgba(255,215,64,0.22);
    }
    .premium-callout-title {
      font-size: clamp(1.05rem, 2.3vw, 1.45rem);
      font-weight: 800;
      line-height: 1.15;
      color: #fff8de;
      text-shadow: 0 0 12px rgba(255,227,136,0.14);
    }
    .premium-callout-sub {
      max-width: 500px;
      font-size: 0.8rem;
      line-height: 1.45;
      color: rgba(255,247,214,0.82);
    }
    .premium-callout-action {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      margin-top: 0.1rem;
      padding: 0.56rem 0.92rem;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 800;
      color: #5f3900;
      background: linear-gradient(135deg, #fff1a6, #ffbe3b);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 8px 18px rgba(255,183,0,0.18);
    }
    .premium-callout-action svg {
      width: 16px;
      height: 16px;
      transition: transform 0.2s ease;
    }
    .premium-callout:hover .premium-callout-action svg { transform: translateX(3px); }
    @keyframes premium-callout-sweep {
      0%, 100% { transform: translateX(-80%) rotate(8deg); opacity: 0; }
      18% { opacity: 0.2; }
      50% { transform: translateX(45%) rotate(8deg); opacity: 0.55; }
      82% { opacity: 0.18; }
    }

    /* ── Spotlight highlight strip ── */
    .spotlight {
      position: absolute; top:0; left:0; right:0; height:1px;
      background: linear-gradient(to right, transparent 0%, rgba(244,114,182,0.6) 30%, rgba(192,132,252,0.6) 50%, rgba(125,211,252,0.6) 70%, transparent 100%);
      border-radius: 1.25rem 1.25rem 0 0;
    }

    /* ── Workflow ── */
    .workflow-box {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 1.25rem; padding: 1rem;
      backdrop-filter: blur(12px);
    }
    .workflow-img-wrap { position:relative; border-radius:1rem; overflow:hidden; display:block; text-decoration:none; }
    .workflow-img-wrap img { width:100%; height:auto; border-radius:1rem; display:block; transition: transform 0.5s ease, filter 0.4s; }
    .workflow-img-wrap:hover img { transform:scale(1.03); filter:brightness(0.4); }
    .workflow-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s; }
    .workflow-img-wrap:hover .workflow-overlay { opacity:1; }
    .workflow-overlay span {
      padding:0.7rem 1.75rem; border-radius:99px; font-weight:700; font-size:0.875rem; color:#fff;
      background: linear-gradient(135deg, var(--pink-s), var(--lilac));
      box-shadow: 0 0 30px rgba(236,72,153,0.4);
    }
    .slide-viewer { position:relative; overflow:hidden; border-radius:1rem; background:rgba(0,0,0,0.18); }
    .slide-frame { display:block; width:100%; aspect-ratio:16/9; border:0; background:rgba(255,255,255,0.04); }
    .slide-frame img { width:100%; height:100%; object-fit:contain; display:block; }
    .slide-controls {
      position:absolute; left:1rem; right:1rem; bottom:1rem; display:flex; align-items:center; justify-content:space-between;
      gap:0.75rem; pointer-events:none;
    }
    .slide-btn, .slide-full {
      border:1px solid rgba(255,255,255,0.18); color:#fff; cursor:pointer; pointer-events:auto;
      background:rgba(14,6,24,0.78); backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(0,0,0,0.35);
      transition:transform 0.2s, background 0.2s, border-color 0.2s;
    }
    .slide-btn {
      width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
      font-size:1.35rem; line-height:1;
    }
    .slide-btn:hover, .slide-full:hover { transform:translateY(-1px); background:rgba(244,114,182,0.85); border-color:rgba(244,114,182,0.9); }
    .slide-mid { display:flex; align-items:center; justify-content:center; gap:0.6rem; flex-wrap:wrap; pointer-events:auto; }
    .slide-count {
      min-width:70px; text-align:center; padding:0.58rem 0.85rem; border-radius:99px; color:#fff; font-size:0.82rem; font-weight:700;
      background:rgba(14,6,24,0.78); border:1px solid rgba(255,255,255,0.16); backdrop-filter:blur(12px);
    }
    .slide-full {
      display:inline-flex; align-items:center; gap:0.35rem; text-decoration:none; border-radius:99px; padding:0.6rem 1rem;
      font-size:0.82rem; font-weight:700;
      background:linear-gradient(135deg, rgba(236,72,153,0.9), rgba(192,132,252,0.9));
    }
    .slide-dots { display:flex; gap:0.35rem; justify-content:center; margin-top:0.9rem; flex-wrap:wrap; }
    .slide-dot {
      width:8px; height:8px; border:0; border-radius:50%; background:rgba(255,255,255,0.22); cursor:pointer; padding:0;
      transition:transform 0.2s, background 0.2s;
    }
.slide-dot.active { background:var(--pink); transform:scale(1.35); }
.appeal-section { margin:-1.65rem 0 3.5rem; }
.appeal-launch {
  position:relative; isolation:isolate; overflow:hidden; width:100%; display:flex; align-items:center; gap:0.85rem;
  padding:1rem 1.1rem; border:1px solid transparent; border-radius:1rem; color:#fff; text-align:left; cursor:pointer;
  background:linear-gradient(rgba(39,20,42,0.92), rgba(39,20,42,0.92)) padding-box,
    linear-gradient(110deg, #fb923c, #f97316, #fdba74, #f97316, #fb923c) border-box;
  background-size:100% 100%, 300% 100%; animation:appealBorderFlow 3.5s linear infinite;
  box-shadow:0 12px 35px rgba(249,115,22,0.16), inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.appeal-launch:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(249,115,22,0.3), inset 0 1px 0 rgba(255,255,255,0.12); }
.appeal-launch-icon { width:2.45rem; height:2.45rem; flex:0 0 auto; display:grid; place-items:center; border-radius:0.75rem; background:rgba(249,115,22,0.17); color:#fdba74; font-size:1.3rem; }
.appeal-launch-copy { display:grid; gap:0.18rem; min-width:0; }
.appeal-launch-copy strong { font-size:clamp(0.92rem, 2.1vw, 1.05rem); line-height:1.45; }
.appeal-launch-copy small { color:rgba(254,215,170,0.78); font-size:0.78rem; }
.appeal-launch-arrow { margin-left:auto; color:#fdba74; font-size:1.55rem; line-height:1; transition:transform 220ms var(--ease); }
.appeal-launch[aria-expanded="true"] .appeal-launch-arrow { transform:rotate(180deg); }
.appeal-guide { margin-top:0.85rem; border-color:rgba(251,146,60,0.42); }
.appeal-download { flex-shrink:0; padding:0.62rem 0.9rem; border-radius:999px; background:linear-gradient(135deg, #fb923c, #ea580c); color:#fff; font-size:0.8rem; font-weight:800; text-decoration:none; box-shadow:0 8px 20px rgba(234,88,12,0.28); transition:transform 180ms var(--ease), filter 180ms var(--ease); }
.appeal-download:hover { transform:translateY(-2px); filter:brightness(1.08); }
.appeal-progress span { background:linear-gradient(90deg, #fb923c, #fdba74); }
.appeal-guide .slide-viewer { overflow:hidden; }
.appeal-guide .slide-frame { aspect-ratio:auto; height:auto; min-height:0; }
.appeal-guide .slide-frame img { width:100%; height:auto; max-height:none; object-fit:contain; }
@keyframes appealBorderFlow { to { background-position:100% 100%, 300% 100%; } }
@media (max-width:640px) {
      .slide-controls { left:0.55rem; right:0.55rem; bottom:0.55rem; gap:0.35rem; }
      .slide-btn { width:36px; height:36px; font-size:1.1rem; }
      .slide-count { min-width:58px; padding:0.48rem 0.6rem; font-size:0.76rem; }
  .slide-full { padding:0.5rem 0.72rem; font-size:0.76rem; }
  .appeal-section { margin:-1.15rem 0 2.75rem; }
  .appeal-launch { align-items:flex-start; padding:0.85rem; gap:0.65rem; }
  .appeal-launch-icon { width:2.15rem; height:2.15rem; border-radius:0.65rem; }
  .appeal-launch-copy small { display:none; }
  .appeal-download { width:100%; text-align:center; }
}

    /* ── Game section ── */
    .game-badge {
      display:inline-flex; align-items:center; gap:0.5rem;
      padding:0.4rem 1.25rem; border-radius:99px;
      font-size:0.85rem; font-weight:500;
      background:rgba(253,230,138,0.1); border:1px solid rgba(253,230,138,0.25); color:#fde68a;
    }

    .game-wrap {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(253,230,138,0.2);
      border-radius: 1.25rem; overflow: hidden;
      box-shadow: 0 0 40px rgba(253,230,138,0.05);
    }
    .game-stage {
      position:relative; min-height:420px; overflow:hidden;
      background:
        radial-gradient(circle at 20% 25%, rgba(253,230,138,0.16), transparent 28%),
        radial-gradient(circle at 80% 30%, rgba(125,211,252,0.16), transparent 26%),
        linear-gradient(180deg, rgba(14,6,24,0.92), rgba(35,13,46,0.94));
    }
    .game-hud {
      position:absolute; inset:1rem 1rem auto; display:flex; align-items:center; justify-content:space-between;
      gap:0.75rem; z-index:3; pointer-events:none;
    }
    .game-score, .game-time {
      min-width:78px; padding:0.5rem 0.8rem; border-radius:99px; text-align:center;
      color:#fff; font-weight:800; font-size:0.85rem; background:rgba(14,6,24,0.72);
      border:1px solid rgba(255,255,255,0.14); backdrop-filter:blur(12px);
    }
    .game-message {
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;
      display:flex; flex-direction:column; align-items:center; gap:0.8rem; text-align:center;
      width:min(88%, 420px); color:#fff; pointer-events:none;
    }
    .game-message strong { font-size:clamp(1.25rem, 4vw, 2rem); color:#fde68a; }
    .game-message span { font-size:0.9rem; color:rgba(255,255,255,0.58); line-height:1.6; }
    .game-start {
      pointer-events:auto; border:0; border-radius:99px; padding:0.75rem 1.5rem; color:#fff; font-weight:800; cursor:pointer;
      background:linear-gradient(135deg, var(--pink-s), var(--lilac)); box-shadow:0 0 28px rgba(236,72,153,0.38);
      transition:transform 0.2s, filter 0.2s;
    }
    .game-start:hover { transform:translateY(-2px); filter:brightness(1.1); }
    .game-basket {
      position:absolute; left:50%; bottom:22px; width:92px; height:34px; transform:translateX(-50%);
      border-radius:0 0 18px 18px; background:linear-gradient(135deg, #f472b6, #c084fc);
      box-shadow:0 12px 30px rgba(0,0,0,0.38), inset 0 2px 0 rgba(255,255,255,0.28);
      z-index:2;
    }
    .game-basket::before {
      content:''; position:absolute; left:12px; right:12px; top:-16px; height:24px; border:4px solid rgba(253,230,138,0.9);
      border-bottom:0; border-radius:24px 24px 0 0;
    }
    .fall-item {
      position:absolute; width:42px; height:50px; border-radius:8px; display:flex; align-items:center; justify-content:center;
      font-size:1.28rem; font-weight:800; z-index:1; box-shadow:0 8px 18px rgba(0,0,0,0.28);
      will-change:transform;
    }
    .fall-good { background:linear-gradient(180deg, #fff7ed, #fde68a); border:1px solid rgba(253,230,138,0.8); }
    .fall-bad { background:linear-gradient(180deg, #fee2e2, #fca5a5); border:1px solid rgba(252,165,165,0.8); }
    .game-mobile-controls { display:none; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,0.06); }
    .game-mobile-controls button {
      border:0; padding:0.95rem; color:#fff; font-weight:800; background:rgba(255,255,255,0.05); cursor:pointer;
    }
    .game-mobile-controls button:first-child { border-right:1px solid rgba(255,255,255,0.06); }
    @media (max-width:640px) {
      .game-stage { min-height:360px; }
      .game-mobile-controls { display:grid; }
    }

    .ctrl-row { display:grid; grid-template-columns:1fr 1fr; }
    .ctrl-cell { padding:1rem 1.25rem; border-top:1px solid rgba(255,255,255,0.06); }
    .ctrl-cell:first-child { border-right:1px solid rgba(255,255,255,0.06); }
    .ctrl-player { font-size:0.8rem; font-weight:600; color:var(--lemon); margin-bottom:0.4rem; }
    .ctrl-keys { font-size:0.78rem; color:rgba(255,255,255,0.4); line-height:1.8; }
    kbd { display:inline-block; padding:0.1rem 0.45rem; border-radius:0.3rem; font-size:0.72rem; font-family:monospace; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.8); }

    /* ── Footer ── */
    .footer { text-align:center; padding:3rem 1rem; border-top:1px solid rgba(255,255,255,0.06); }
    .footer-card {
      display:inline-block;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 2.5rem;
      padding: 2.5rem 3rem;
      backdrop-filter: blur(18px);
      box-shadow: 0 0 60px rgba(244,114,182,0.08), inset 0 1.5px 0 rgba(255,255,255,0.18);
    }
    .footer-cta { font-size:1.05rem; color:rgba(255,255,255,0.55); margin-bottom:2rem; font-style:italic; }

    /* QR animated border */
    @keyframes qr-beam {
      0%,100%{ clip-path:inset(0 0 96% 0); }
      25%     { clip-path:inset(0 96% 0 0); }
      50%     { clip-path:inset(96% 0 0 0); }
      75%     { clip-path:inset(0 0 0 96%); }
    }
    .qr-outer { position:relative; display:inline-block; }
    .qr-outer::after {
      content:''; position:absolute; inset:-4px; border-radius:1.5rem;
      border:3px solid var(--pink);
      box-shadow: 0 0 20px rgba(244,114,182,0.6), 0 0 40px rgba(192,132,252,0.3);
      animation: qr-beam 3s linear infinite;
    }
    .qr-inner {
      background:#fff; padding:1.1rem; border-radius:1.25rem; display:inline-block;
      transition:transform 0.3s; position:relative; z-index:1;
      box-shadow: 0 0 30px rgba(244,114,182,0.25);
    }
    .qr-inner:hover { transform:scale(1.06); }
    .qr-inner img { width:152px; height:152px; object-fit:contain; display:block; }

    .footer-copy { margin-top:1.5rem; font-size:0.75rem; color:rgba(255,255,255,0.2); letter-spacing:0.05em; }

    /* ── Music player ── */
    .music-player {
      position:fixed; bottom:1.5rem; right:1.5rem;
      display:flex; align-items:center; gap:0.5rem;
      z-index:50; border-radius:99px; padding:0.4rem;
      background:rgba(14,6,24,0.85);
      backdrop-filter:blur(16px);
      border:1px solid rgba(244,114,182,0.25);
      box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(244,114,182,0.1);
    }
    .music-play {
      width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
      display:flex; align-items:center; justify-content:center; font-size:1.15rem;
      background: linear-gradient(135deg, var(--pink-s), var(--lilac));
      box-shadow: 0 0 18px rgba(236,72,153,0.35);
      transition: transform 0.25s, filter 0.25s;
    }
    .music-play:hover { transform:scale(1.08); filter:brightness(1.1); }
    .music-play.on { animation:music-pulse 2s ease infinite; }
    @keyframes music-pulse {
      0%,100%{ box-shadow:0 0 18px rgba(236,72,153,0.35); }
      50%     { box-shadow:0 0 35px rgba(236,72,153,0.65), 0 0 60px rgba(192,132,252,0.2); }
    }

    .music-next {
      width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.1);
      background:rgba(255,255,255,0.05); cursor:pointer; font-size:0.8rem;
      display:flex; align-items:center; justify-content:center; color:#fff;
      transition: background 0.2s, transform 0.2s;
    }
    .music-next:hover { background:rgba(255,255,255,0.1); transform:scale(1.05); }

/* ── Table preview accordion ── */
.tbl-item { flex-direction:column; align-items:stretch; gap:0; cursor:pointer; }
.tbl-row  { display:flex; align-items:center; gap:0.65rem; width:100%; }
.tbl-arr  { width:13px; height:13px; flex-shrink:0; transition:transform 0.3s; color:rgba(255,255,255,0.35); }

.tbl-preview {
  max-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.3s, margin-top 0.3s;
  border-radius: 0.5rem;
}
.tbl-preview img { width:100%; display:block; border-radius:0.5rem; }

.tbl-open .tbl-preview {
  max-height: 80vh;
  opacity: 1;
  margin-top: 0.875rem;
}
.tbl-open .tbl-arr { transform:rotate(180deg); color:var(--sky); }
.card.open { overflow: visible; }
.card.open::before { display: none; }

/* fix: dd ต้องรองรับ max-height ที่ใหญ่ขึ้นเมื่อมี tbl-open */
.card.open .dd { max-height: 9999px; }

/* -- Lively polish pass ------------------------------------------------ */
:root {
  --panel: rgba(255,255,255,0.065);
  --panel-strong: rgba(255,255,255,0.095);
  --line: rgba(255,255,255,0.13);
  --line-strong: rgba(255,255,255,0.22);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html { scroll-behavior: smooth; }

body::after {
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.18;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 20%, black, transparent 72%);
}

.bg-layer {
  background:
    radial-gradient(ellipse 75% 55% at 10% 15%, rgba(244,114,182,0.26) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(192,132,252,0.23) 0%, transparent 55%),
    radial-gradient(ellipse 48% 42% at 58% 6%, rgba(125,211,252,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 80% 30%, rgba(252,165,165,0.13) 0%, transparent 50%),
    radial-gradient(ellipse 35% 35% at 20% 80%, rgba(110,231,183,0.12) 0%, transparent 50%),
    linear-gradient(180deg, #120617 0%, #0e0618 48%, #150a24 100%);
  animation:bg-breathe 8s ease-in-out infinite alternate;
}

.orb { opacity:0.72; filter:blur(92px); animation:orb-drift ease-in-out infinite alternate; }
.sparkle {
  opacity:0.92;
  animation:sparkle-twinkle ease-in-out infinite;
  text-shadow:0 0 12px currentColor, 0 0 28px rgba(255,255,255,0.45);
}
.float { animation:float 3.6s ease-in-out infinite; }
#stars { opacity:0.9; }

.top-mini-nav {
  position:sticky;
  top:0.85rem;
  z-index:40;
  width:max-content;
  max-width:calc(100vw - 2rem);
  margin:0.85rem auto 0;
  display:flex;
  gap:0.35rem;
  padding:0.35rem;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  background:rgba(14,6,24,0.68);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 16px 46px rgba(0,0,0,0.28);
}
.top-mini-nav a {
  color:rgba(255,255,255,0.66);
  text-decoration:none;
  font-size:0.78rem;
  font-weight:700;
  padding:0.5rem 0.82rem;
  border-radius:999px;
  transition:background 180ms var(--ease), color 180ms var(--ease);
}
.top-mini-nav a:hover { color:#fff; background:rgba(255,255,255,0.09); }

.wrap { max-width:1040px; padding-top:3.5rem; }
.header { margin-bottom:2.8rem; }
.header-icon {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  width:88px;
  height:88px;
  border-radius:28px;
  margin-bottom:1.35rem;
  background:
    linear-gradient(135deg, rgba(244,114,182,0.28), rgba(192,132,252,0.26), rgba(125,211,252,0.18));
  box-shadow:
    0 0 48px rgba(244,114,182,0.36),
    0 0 96px rgba(192,132,252,0.22),
    0 24px 70px rgba(0,0,0,0.34),
    inset 0 1.5px 0 rgba(255,255,255,0.34);
}
.header-icon::before {
  content:'';
  position:absolute;
  border-radius:inherit;
  pointer-events:none;
}
.header-icon::before {
  inset:0;
  z-index:0;
  border:1px solid rgba(244,114,182,0.22);
  box-shadow:0 0 24px rgba(244,114,182,0.25), inset 0 0 20px rgba(125,211,252,0.08);
  animation:icon-aura 2.8s ease-in-out infinite;
}
.header-icon svg {
  position:relative;
  z-index:2;
}
.title-main { font-size:clamp(3rem, 6.5vw, 4.15rem); letter-spacing:0; margin-bottom:0.35rem; }
.title-sub { font-size:1.25rem; color:rgba(255,255,255,0.68); }
.tagline { letter-spacing:0; color:rgba(255,255,255,0.42); margin-bottom:1.2rem; }
.dot-divider { display:flex; }

@keyframes icon-aura {
  0%,100% { opacity:0.45; transform:scale(0.96); }
  50% { opacity:1; transform:scale(1.04); }
}
.portal-stats {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0.75rem;
  width:min(620px, 100%);
  margin:1.3rem auto 1.35rem;
}
.portal-stats div {
  padding:0.85rem 1rem;
  border-radius:1rem;
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}
.portal-stats strong { display:block; font-size:1.35rem; line-height:1; color:#fff; }
.portal-stats span { display:block; margin-top:0.35rem; color:rgba(255,255,255,0.48); font-size:0.76rem; }

.pill, .workshop-wrap, .card, .workflow-box, .footer-card, .game-wrap { border-radius:1rem; }
.pill { padding:0.65rem 1.15rem; transition:transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease); }
.pill:hover { transform:translateY(-2px); }

.workshop-wrap {
  padding:2px;
  background:linear-gradient(135deg, var(--pink), var(--lilac), var(--sky), var(--mint), var(--pink));
  background-size:300% 300%;
  animation:gradient-shift 5s ease infinite;
  box-shadow:0 0 40px rgba(244,114,182,0.28), 0 0 78px rgba(192,132,252,0.18), 0 18px 52px rgba(0,0,0,0.22);
}
.workshop-inner { border-radius:calc(1rem - 1px); padding:1.15rem 1.25rem; background:rgba(14,6,24,0.78); }

.sec-label { margin-top:0.25rem; }
.sec-label-text { font-size:0.76rem; letter-spacing:0.12em; }

.menu-grid { gap:1rem; }
.card {
  min-height:92px;
  padding:1.22rem;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.105), transparent 36%),
    var(--panel);
  border-color:var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.14);
  transition:transform 260ms cubic-bezier(0.23,1,0.32,1), background 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.card:hover {
  transform:translateY(-7px) scale(1.012);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.17), transparent 38%),
    var(--panel-strong);
  border-color:rgba(255,255,255,0.3);
  box-shadow:0 24px 64px rgba(0,0,0,0.36), inset 0 1.5px 0 rgba(255,255,255,0.23);
}
.card::before {
  display:block;
  background:linear-gradient(to right, transparent, rgba(255,255,255,0.16), rgba(253,230,138,0.16), transparent);
}
.card-ico { width:42px; height:42px; border-radius:0.8rem; }
.card:hover .card-ico { animation:card-icon-bop 0.8s ease both; }
.card-title { font-size:1rem; line-height:1.35; }
.dd { transition:max-height 240ms var(--ease), opacity 180ms var(--ease), margin-top 180ms var(--ease); }
.dd-link { border-radius:0.7rem; }

.card-pink:hover  { box-shadow:0 24px 64px rgba(0,0,0,0.36), inset 0 1.5px 0 rgba(255,255,255,0.24), 0 0 0 1px rgba(244,114,182,0.6), 0 0 58px rgba(244,114,182,0.2); }
.card-lilac:hover { box-shadow:0 24px 64px rgba(0,0,0,0.36), inset 0 1.5px 0 rgba(255,255,255,0.24), 0 0 0 1px rgba(192,132,252,0.6), 0 0 58px rgba(192,132,252,0.2); }
.card-peach:hover { box-shadow:0 24px 64px rgba(0,0,0,0.36), inset 0 1.5px 0 rgba(255,255,255,0.24), 0 0 0 1px rgba(252,165,165,0.6), 0 0 58px rgba(252,165,165,0.2); }
.card-mint:hover  { box-shadow:0 24px 64px rgba(0,0,0,0.36), inset 0 1.5px 0 rgba(255,255,255,0.24), 0 0 0 1px rgba(110,231,183,0.6), 0 0 58px rgba(110,231,183,0.2); }
.card-sky:hover   { box-shadow:0 24px 64px rgba(0,0,0,0.36), inset 0 1.5px 0 rgba(255,255,255,0.24), 0 0 0 1px rgba(125,211,252,0.6), 0 0 58px rgba(125,211,252,0.2); }

.spotlight {
  height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(244,114,182,0.82) 28%, rgba(192,132,252,0.9) 50%, rgba(125,211,252,0.82) 72%, transparent 100%);
  background-size:220% 100%;
  animation:spotlight-run 3.5s ease-in-out infinite;
  opacity:0.86;
}

@keyframes card-icon-bop {
  0%,100% { transform:translateY(0) rotate(0deg); }
  35% { transform:translateY(-5px) rotate(-4deg); }
  70% { transform:translateY(-2px) rotate(3deg); }
}
@keyframes spotlight-run {
  0%,100% { background-position:0% 50%; opacity:0.58; }
  50% { background-position:100% 50%; opacity:1; }
}

.featured-guide-section { margin-bottom:3.5rem; scroll-margin-top:5.5rem; }
.ai-learning-section { margin:0 0 3.5rem; scroll-margin-top:5.5rem; }
.ai-learning-intro {
  display:flex; align-items:end; justify-content:space-between; gap:1.25rem;
  margin:0.7rem 0 1rem; padding:1.25rem 1.35rem; border-radius:1rem;
  border:1px solid rgba(125,211,252,0.22);
  background:linear-gradient(125deg, rgba(125,211,252,0.13), rgba(192,132,252,0.1) 55%, rgba(244,114,182,0.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 16px 42px rgba(0,0,0,0.18);
}
.ai-learning-kicker { color:var(--mint); text-transform:uppercase; letter-spacing:0.13em; font-size:0.69rem; font-weight:800; }
.ai-learning-intro h2 { margin:0.25rem 0 0.45rem; font-size:clamp(1.25rem, 3vw, 1.65rem); line-height:1.3; }
.ai-learning-intro p:not(.ai-learning-kicker) { max-width:640px; color:rgba(255,255,255,0.62); font-size:0.88rem; line-height:1.65; }
.ai-learning-all { flex:none; display:inline-flex; align-items:center; gap:0.55rem; padding:0.75rem 0.95rem; border-radius:0.75rem; color:#0e0618; background:var(--lemon); font-size:0.8rem; font-weight:800; text-decoration:none; box-shadow:0 8px 24px rgba(253,230,138,0.18); }
.ai-learning-all:hover { transform:translateY(-2px); }
.ai-learning-all span { font-size:1.1rem; }
.ai-learning-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.75rem; }
.learning-quick-card { display:grid; grid-template-columns:auto 1fr; gap:0.75rem 0.85rem; align-items:center; min-height:100px; padding:0.95rem 1rem; border-radius:0.9rem; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,0.13); background:rgba(255,255,255,0.055); transition:transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease); }
.learning-quick-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,0.34); background:rgba(255,255,255,0.095); }
.learning-quick-card.pending { opacity:0.73; }
.learning-quick-card.inventory .learning-quick-icon { box-shadow:inset 0 0 0 2px rgba(110,231,183,.72), inset 0 1px 0 rgba(255,255,255,.85); }
.learning-quick-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:0.75rem; font-size:1.2rem; background:rgba(255,255,255,0.11); }
.learning-quick-card strong,.learning-quick-card small { display:block; }
.learning-quick-card strong { font-size:0.88rem; line-height:1.4; }
.learning-quick-card small { margin-top:0.14rem; color:rgba(255,255,255,0.54); font-size:0.72rem; line-height:1.35; }
.learning-quick-card b { grid-column:2; color:var(--lemon); font-size:0.74rem; }
.learning-quick-card.phonebook { border-color:rgba(110,231,183,0.22); }
.learning-quick-card.assets { border-color:rgba(125,211,252,0.22); }
.learning-quick-card.jangmao70 { border-color:rgba(252,165,165,0.22); }
.learning-quick-card.pictures { border-color:rgba(192,132,252,0.24); }
.ai-passadu-card { margin-top:0.75rem; }
.ai-gpt-card { margin-top:0.75rem; }
.card-gpt {
  background:
    radial-gradient(circle at 12% 18%, rgba(125,211,252,0.2), transparent 24%),
    radial-gradient(circle at 84% 22%, rgba(192,132,252,0.2), transparent 20%),
    linear-gradient(135deg, rgba(38,124,177,0.28), rgba(49,43,121,0.52) 44%, rgba(22,19,54,0.96) 100%);
  border-color:rgba(125,211,252,0.42);
  box-shadow:0 14px 34px rgba(0,0,0,0.32), inset 0 1.5px 0 rgba(255,255,255,0.2), 0 0 0 1px rgba(125,211,252,0.22), 0 0 44px rgba(56,189,248,0.2);
}
.card-gpt:hover { border-color:rgba(186,230,253,0.72); box-shadow:0 24px 56px rgba(0,0,0,0.38), inset 0 1.5px 0 rgba(255,255,255,0.26), 0 0 0 1px rgba(186,230,253,0.42), 0 0 60px rgba(56,189,248,0.28); }
.gpt-orb { position:absolute; top:-18px; right:28px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(186,230,253,0.34) 0%,rgba(129,140,248,0.2) 34%,transparent 72%); filter:blur(10px); pointer-events:none; animation:gptPulse 3.8s ease-in-out infinite; }
.gpt-ico { position:relative; background:linear-gradient(135deg,rgba(56,189,248,0.24),rgba(196,181,253,0.16)); box-shadow:0 0 20px rgba(56,189,248,0.3); }
.gpt-badge { display:inline-flex; align-items:center; min-height:22px; padding:0 0.55rem; border-radius:999px; font-size:0.66rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:#172554; background:linear-gradient(135deg,#bae6fd,#c4b5fd); box-shadow:inset 0 1px 0 rgba(255,255,255,0.56),0 0 18px rgba(125,211,252,0.28); }
.gpt-inline-guide { margin:0; border-color:rgba(125,211,252,0.28); background:linear-gradient(180deg,rgba(125,211,252,0.08),rgba(192,132,252,0.06)); }
.ai-learning-section .ai-passadu-card:focus-visible,
.ai-learning-section .ai-gpt-card:focus-visible { outline:2px solid #bae6fd; outline-offset:4px; }
@keyframes gptPulse { 0%,100% { transform:scale(1); opacity:0.82; } 50% { transform:scale(1.1); opacity:1; } }
.featured-guide {
  padding:1.15rem;
  border-color:rgba(255,255,255,0.16);
  background:linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.045));
  box-shadow:0 24px 70px rgba(0,0,0,0.27), inset 0 1px 0 rgba(255,255,255,0.12);
}
.featured-guide-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:0.25rem 0.25rem 1rem; }
.featured-eyebrow { color:rgba(125,211,252,0.75); font-size:0.72rem; font-weight:800; letter-spacing:0.13em; text-transform:uppercase; margin-bottom:0.25rem; }
.featured-guide h2 { font-size:clamp(1.25rem, 3vw, 1.75rem); line-height:1.25; color:#fff; }
.featured-chip {
  flex-shrink:0;
  padding:0.45rem 0.8rem;
  border-radius:999px;
  color:#fde68a;
  background:rgba(253,230,138,0.1);
  border:1px solid rgba(253,230,138,0.22);
  font-size:0.72rem;
  font-weight:800;
}
.slide-viewer { border-radius:0.9rem; }
.slide-progress { height:4px; margin:0.9rem 0.25rem 0; border-radius:999px; overflow:hidden; background:rgba(255,255,255,0.08); }
.slide-progress span { display:block; width:9.09%; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--pink), var(--sky)); transition:width 220ms var(--ease); }

.break-section { margin-bottom:3.5rem; scroll-margin-top:5.5rem; }
.break-panel { border:1px solid rgba(253,230,138,0.18); border-radius:1rem; background:rgba(255,255,255,0.045); overflow:hidden; }
.break-panel summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; cursor:pointer; }
.break-panel summary::-webkit-details-marker { display:none; }
.break-summary-text { color:rgba(255,255,255,0.45); font-size:0.82rem; }
.break-panel .game-wrap { border-left:0; border-right:0; border-bottom:0; border-radius:0; box-shadow:none; }

.battle-city-wrap { background:#050505; }
.battle-city-frame {
  display:block;
  width:100%;
  height:min(72vh, 680px);
  min-height:460px;
  border:0;
  background:#050505;
}
.battle-city-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.75rem 1rem;
  color:rgba(255,255,255,0.58);
  font-size:0.8rem;
  background:rgba(255,255,255,0.04);
  border-top:1px solid rgba(255,255,255,0.08);
}
.battle-city-footer a { color:#fde68a; font-weight:700; white-space:nowrap; }
.battle-city-footer a:hover { color:#fff; }

.game-stage { touch-action:none; }
.game-mobile-controls button {
  min-height:52px;
  touch-action:none;
  user-select:none;
  background:linear-gradient(135deg, rgba(253,230,138,0.12), rgba(244,114,182,0.08));
}
.game-mobile-controls button:active {
  background:linear-gradient(135deg, rgba(253,230,138,0.24), rgba(244,114,182,0.18));
  box-shadow:inset 0 0 24px rgba(253,230,138,0.12);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

@media (max-width:720px) {
  .top-mini-nav { display:none; }
  .wrap { padding-top:2.25rem; }
  .portal-stats { grid-template-columns:1fr; }
  .passadu-mini-cta { margin-left:0; }
  .passadu-link { padding:0.85rem 0.9rem; }
  .featured-guide-head { flex-direction:column; }
  .ai-learning-intro { align-items:flex-start; flex-direction:column; }
  .ai-learning-grid { grid-template-columns:1fr; }
  .break-panel summary { align-items:flex-start; flex-direction:column; }
  .battle-city-frame { height:62vh; min-height:400px; }
  .battle-city-footer { align-items:flex-start; flex-direction:column; }
  .premium-callout-wrap { margin-top: 0.7rem; }
  .premium-callout { padding: 0.95rem 0.9rem 1rem; }
  .premium-callout-sub { font-size: 0.76rem; }
}

/* ── Project base: metallic controls (scoped to this section only) ── */
.ai-learning-section .learning-quick-card,
.ai-learning-section .ai-passadu-card.card {
  position:relative;
  overflow:hidden;
  color:#111a20;
  border-color:#b8c3cb;
  background:linear-gradient(135deg,#505d67 0%,#f6f9fb 15%,#a7b2bb 32%,#fafcfd 49%,#7c8993 70%,#e7edf1 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),inset 0 -3px 3px rgba(23,33,42,.32),0 6px 0 #36434c,0 14px 26px rgba(0,0,0,.3);
}
.ai-learning-section .learning-quick-card::after,
.ai-learning-section .ai-passadu-card.card::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.74) 43%,transparent 59%);
  transform:translateX(-135%);
  transition:transform .48s ease;
}
.ai-learning-section .learning-quick-card:hover,
.ai-learning-section .ai-passadu-card.card:hover {
  transform:translateY(-4px);
  border-color:#fff;
  filter:brightness(1.06);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 3px rgba(23,33,42,.28),0 10px 0 #36434c,0 19px 32px rgba(0,0,0,.36);
}
.ai-learning-section .learning-quick-card:hover::after,
.ai-learning-section .ai-passadu-card.card:hover::after { transform:translateX(135%); }
.ai-learning-section .learning-quick-card strong,
.ai-learning-section .learning-quick-card small,
.ai-learning-section .learning-quick-card b { color:#152129; }
.ai-learning-section .learning-quick-card small { opacity:.75; }
.ai-learning-section .learning-quick-icon { border:1px solid rgba(255,255,255,.75); background:rgba(18,29,37,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(25,36,45,.25); }
.ai-learning-section .learning-quick-card.phonebook .learning-quick-icon { box-shadow:inset 0 0 0 2px rgba(110,231,183,.55),inset 0 1px 0 rgba(255,255,255,.85); }
.ai-learning-section .learning-quick-card.assets .learning-quick-icon { box-shadow:inset 0 0 0 2px rgba(125,211,252,.6),inset 0 1px 0 rgba(255,255,255,.85); }
.ai-learning-section .learning-quick-card.jangmao70 .learning-quick-icon { box-shadow:inset 0 0 0 2px rgba(252,165,165,.62),inset 0 1px 0 rgba(255,255,255,.85); }
.ai-learning-section .learning-quick-card.pictures .learning-quick-icon { box-shadow:inset 0 0 0 2px rgba(192,132,252,.62),inset 0 1px 0 rgba(255,255,255,.85); }
.ai-learning-section .learning-quick-card.checkin .learning-quick-icon { box-shadow:inset 0 0 0 2px rgba(253,230,138,.72),inset 0 1px 0 rgba(255,255,255,.85); }
.ai-learning-section .learning-quick-card.hub .learning-quick-icon { box-shadow:inset 0 0 0 2px rgba(244,114,182,.68),inset 0 1px 0 rgba(255,255,255,.85); }
.ai-learning-section .ai-passadu-card.card .card-title,
.ai-learning-section .ai-passadu-card.card .passadu-title-row,
.ai-learning-section .ai-passadu-card.card .passadu-subtitle { color:#111a20; }
.ai-learning-section .ai-passadu-card.card .passadu-badge { color:#111a20; background:rgba(255,255,255,.58); border-color:rgba(17,26,32,.22); }
.ai-learning-section .ai-passadu-card.card .passadu-mini-cta span { color:#17232b; background:rgba(255,255,255,.38); border:1px solid rgba(25,37,46,.18); }
.ai-learning-section .ai-passadu-card.card .dd-link { color:#111a20; border-color:rgba(27,40,49,.24); background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(164,176,185,.62),rgba(255,255,255,.88)); }
.ai-learning-section .ai-passadu-card.card .passadu-link-copy strong { color:#111a20; }
.ai-learning-section .ai-passadu-card.card .passadu-link-copy small { color:rgba(17,26,32,.72); }

/* Readability pass: dark metal surface, high-contrast luminous type. */
.ai-learning-section .learning-quick-card,
.ai-learning-section .ai-passadu-card.card {
  color:#f8fbff;
  border-color:rgba(203,219,229,.62);
  background:
    linear-gradient(118deg,rgba(255,255,255,.15),transparent 18%,rgba(255,255,255,.04) 50%,transparent 74%),
    linear-gradient(135deg,#111b24 0%,#344653 28%,#172630 55%,#4b606b 76%,#15242d 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -3px 4px rgba(0,0,0,.6),0 6px 0 #080f14,0 14px 26px rgba(0,0,0,.42);
}
.ai-learning-section .learning-quick-card::after,
.ai-learning-section .ai-passadu-card.card::after { opacity:.38; background:linear-gradient(112deg,transparent 26%,rgba(255,255,255,.32) 47%,transparent 65%); }
.ai-learning-section .learning-quick-card:hover,
.ai-learning-section .ai-passadu-card.card:hover { border-color:rgba(255,255,255,.9); filter:brightness(1.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.48),inset 0 -3px 4px rgba(0,0,0,.55),0 10px 0 #080f14,0 19px 32px rgba(0,0,0,.5); }
.ai-learning-section .learning-quick-card strong,
.ai-learning-section .learning-quick-card small,
.ai-learning-section .learning-quick-card b { color:#f8fbff; text-shadow:0 1px 2px rgba(0,0,0,.85); }
.ai-learning-section .learning-quick-card strong { letter-spacing:.01em; }
.ai-learning-section .learning-quick-card small { opacity:.78; }
.ai-learning-section .learning-quick-card b { color:#fff0a8; font-weight:800; text-shadow:0 0 12px rgba(253,230,138,.32),0 1px 2px rgba(0,0,0,.9); }
.ai-learning-section .learning-quick-icon { background:linear-gradient(145deg,#f7fbff,#8295a1); border-color:rgba(255,255,255,.86); box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(9,17,23,.42),0 2px 6px rgba(0,0,0,.45); }
.ai-learning-section .ai-passadu-card.card .card-title,
.ai-learning-section .ai-passadu-card.card .passadu-title-row,
.ai-learning-section .ai-passadu-card.card .passadu-subtitle { color:#f8fbff; text-shadow:0 1px 2px rgba(0,0,0,.85); }
.ai-learning-section .ai-passadu-card.card .passadu-title-row > span:first-child { color:#fff0a8; text-shadow:0 0 16px rgba(253,230,138,.32),0 1px 2px rgba(0,0,0,.9); }
.ai-learning-section .ai-passadu-card.card .passadu-badge { color:#17242c; background:linear-gradient(135deg,#fff8c9,#d8b85c); border-color:#fff2ae; box-shadow:inset 0 1px 0 rgba(255,255,255,.85); }
.ai-learning-section .ai-passadu-card.card .passadu-mini-cta span { color:#f8fbff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); text-shadow:0 1px 2px rgba(0,0,0,.85); }
.ai-learning-section .ai-passadu-card.card .dd-link { color:#f8fbff; border-color:rgba(255,255,255,.24); background:linear-gradient(135deg,rgba(15,27,35,.94),rgba(58,76,87,.94),rgba(18,31,40,.94)); }
.ai-learning-section .ai-passadu-card.card .passadu-link-copy strong { color:#fff; }
.ai-learning-section .ai-passadu-card.card .passadu-link-copy small { color:rgba(248,251,255,.76); }

/* ── Presentation Library portal ── */
.classroom-portal {
  margin:0 0 2.5rem;
}
.classroom-portal-link {
  position:relative;
  min-height:220px;
  padding:2rem clamp(1.5rem,4vw,3.25rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:1.5rem;
  overflow:hidden;
  color:#f6f3eb;
  border:1px solid rgba(125,211,252,.28);
  border-radius:1rem;
  background:
    radial-gradient(circle at 82% 42%,rgba(67,224,195,.18),transparent 28%),
    radial-gradient(circle at 15% 0%,rgba(169,120,255,.14),transparent 36%),
    linear-gradient(118deg,#080b16,#11172a 58%,#0a101c);
  box-shadow:0 24px 70px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.1);
  isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s ease,box-shadow .35s ease;
}
.classroom-portal-link:hover {
  transform:translateY(-6px);
  border-color:rgba(67,224,195,.72);
  box-shadow:0 32px 90px rgba(0,0,0,.46),0 0 50px rgba(67,224,195,.1),inset 0 1px 0 rgba(255,255,255,.15);
}
.classroom-portal-glow {
  position:absolute;
  z-index:-1;
  right:-5%;
  top:-65%;
  width:52%;
  aspect-ratio:1;
  border-radius:50%;
  background:#43e0c3;
  filter:blur(110px);
  opacity:.1;
  transition:opacity .3s ease;
}
.classroom-portal-link:hover .classroom-portal-glow { opacity:.18; }
.classroom-portal-grid {
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(90deg,transparent 32%,#000);
}
.classroom-portal-index {
  position:absolute;
  top:1.5rem;
  left:clamp(1.5rem,4vw,3.25rem);
  color:rgba(245,242,234,.52);
  font:600 .62rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.13em;
}
.classroom-portal-copy {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.classroom-portal-copy small {
  margin-bottom:.72rem;
  color:#43e0c3;
  font:600 .68rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.14em;
}
.classroom-portal-copy strong {
  font-size:clamp(1.9rem,4vw,3.55rem);
  font-weight:850;
  line-height:1.02;
  letter-spacing:-.045em;
}
.classroom-portal-copy strong em {
  color:transparent;
  font-style:normal;
  -webkit-text-stroke:1px rgba(245,242,234,.8);
}
.classroom-portal-copy > span:last-child {
  margin-top:.9rem;
  color:rgba(245,242,234,.58);
  font-size:.82rem;
}
.classroom-portal-action {
  position:relative;
  z-index:2;
  min-width:190px;
  min-height:54px;
  padding:0 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  color:#07120f;
  background:#43e0c3;
  font-size:.78rem;
  font-weight:800;
  transition:transform .25s ease,background .25s ease;
}
.classroom-portal-link:hover .classroom-portal-action { transform:translateX(5px);background:#76ecd6; }
.classroom-portal-action b { font-size:1.2rem; }
.classroom-portal-stack {
  position:absolute;
  top:2.1rem;
  right:4.5rem;
  width:130px;
  height:72px;
  opacity:.38;
  transform:rotate(-8deg);
}
.classroom-portal-stack i {
  position:absolute;
  inset:0;
  border:1px solid rgba(245,242,234,.35);
  background:rgba(255,255,255,.035);
  box-shadow:0 12px 24px rgba(0,0,0,.2);
}
.classroom-portal-stack i:nth-child(2) { transform:translate(-12px,8px); }
.classroom-portal-stack i:nth-child(3) { transform:translate(-24px,16px); }

@media(max-width:700px) {
  .classroom-portal-link {
    min-height:290px;
    padding:4.5rem 1.3rem 1.35rem;
    grid-template-columns:1fr;
    align-items:end;
  }
  .classroom-portal-index { left:1.3rem; }
  .classroom-portal-copy strong { max-width:10ch; }
  .classroom-portal-copy > span:last-child { max-width:34ch; }
  .classroom-portal-action { width:100%; }
  .classroom-portal-stack { top:2.2rem;right:-1rem;width:105px;height:59px; }
}