/* =========================================================
   VIBE MACHINE — visual system v3
   Reference: "Manufacturing of Vibes" deck. Dark violet-to-
   magenta diagonal gradient, glowing pink display type,
   lavender EN subtitles, white/light body copy. No green.
   ========================================================= */

:root{
  --bg-1:#1a0630;
  --bg-2:#d4127e;
  --glow:#f11da5;
  --glow-soft:#ff59c7;
  --lavender:#cda9f2;
  --white:#f8f4fa;
  --dim:#c9bcd9;
  --dim-2:#a897bd;
  --line:rgba(255,255,255,.14);
  --card:rgba(20,6,36,.55);
  --card-solid:#2a1140;
  --sans:'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:
    linear-gradient(135deg, var(--bg-1) 0%, #4a0f5c 42%, var(--bg-2) 100%) fixed;
  color:var(--white);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--glow-soft);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- shared glow-title treatment ---------- */
.glow{
  color:var(--glow-soft);
  text-shadow:
    0 0 6px rgba(241,29,165,.85),
    0 0 18px rgba(241,29,165,.55),
    0 0 42px rgba(241,29,165,.35);
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  gap:24px;
  padding:14px 28px;
  background:rgba(20,6,36,.72);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.02em;
  font-size:15px;
  color:var(--white);
  display:flex; gap:10px; align-items:center;
}
.brand .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--glow);
  box-shadow:0 0 8px var(--glow), 0 0 18px var(--glow);
}
.nav{display:flex; gap:4px; flex-wrap:wrap;}
.nav a{
  font-family:var(--sans);
  font-size:12.5px; font-weight:600;
  color:var(--dim);
  padding:7px 12px;
  border-radius:999px;
  border:1px solid transparent;
}
.nav a:hover{color:var(--white); background:rgba(255,255,255,.06); text-decoration:none;}
.nav a.active{
  color:var(--white);
  border-color:var(--glow);
  background:rgba(241,29,165,.14);
  text-decoration:none;
}

/* ---------- lang toggle ---------- */
.langtoggle{
  display:flex; gap:2px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  font-family:var(--sans);
  font-size:11.5px;
}
.langtoggle button{
  appearance:none; border:none; cursor:pointer;
  background:transparent; color:var(--dim);
  padding:6px 12px; border-radius:999px;
  font-family:var(--sans); font-size:11.5px; font-weight:700;
  letter-spacing:.03em;
}
.langtoggle button.on{
  background:linear-gradient(120deg, var(--glow) 0%, #9b1fd6 100%);
  color:#fff;
}

/* ---------- hero ---------- */
.hero{
  position:relative; z-index:1;
  padding:88px 28px 64px;
  max-width:1100px; margin:0 auto;
}
.eyebrow{
  font-family:var(--sans); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lavender);
  display:inline-block; margin-bottom:18px; font-weight:700;
}
.hero h1{
  font-size:clamp(38px,7vw,84px);
  line-height:.98;
  margin:0 0 6px;
  font-weight:800;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--glow-soft);
  text-shadow:
    0 0 6px rgba(241,29,165,.85),
    0 0 18px rgba(241,29,165,.55),
    0 0 42px rgba(241,29,165,.35);
}
.hero h1 em{font-style:italic; color:var(--dim);}
.hero p.lede{
  max-width:640px; font-size:17px; color:var(--dim); margin:14px 0 8px;
}
.hero p.lede.machine-note{
  font-size:13.5px; color:var(--dim-2); max-width:600px;
  border-left:2px solid var(--glow); padding-left:14px; margin:18px 0 4px;
}
.hero .meta{
  margin-top:28px; display:flex; gap:26px; flex-wrap:wrap;
  font-family:var(--sans); font-size:12px; color:var(--dim);
}
.hero .meta b{color:var(--lavender); display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; font-weight:700;}

/* ---------- section ---------- */
.section{max-width:1100px; margin:0 auto; padding:0 28px 80px; position:relative; z-index:1;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap;}
.section-head h2{
  font-size:13px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--dim); margin:0; font-family:var(--sans); font-weight:700;
}
.section-head h2 span{color:var(--lavender);}

/* ---------- day grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px; position:relative; overflow:hidden; backdrop-filter:blur(6px);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px); border-color:var(--glow); box-shadow:0 10px 30px rgba(241,29,165,.25);}
.card .tag{font-family:var(--sans); font-size:11px; font-weight:800; color:var(--glow-soft); letter-spacing:.08em; text-transform:uppercase;}
.card h3{margin:10px 0 8px; font-size:20px; line-height:1.25; color:var(--white);}
.card p{color:var(--dim); font-size:14px; margin:0 0 14px;}
.card .go{font-family:var(--sans); font-size:12px; font-weight:700; color:var(--white);}
.card.note{border-style:dashed; border-color:var(--lavender);}
.card.note .tag{color:var(--lavender);}

/* ---------- summary ---------- */
.summary-block{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:32px clamp(18px,4vw,44px); margin-bottom:18px; backdrop-filter:blur(6px);
}
.summary-block h1{
  font-size:22px; margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid var(--line);
  color:var(--white); font-weight:800;
  text-transform:uppercase; letter-spacing:-.01em;
}
.summary-block h2{font-size:13.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--glow-soft); margin:28px 0 10px; font-family:var(--sans); font-weight:700;}
.summary-block h3{font-size:15.5px; color:var(--white); margin:20px 0 8px; font-weight:700;}
.summary-block p{color:var(--dim); font-size:15px; margin:0 0 12px;}
.summary-block ul{margin:0 0 14px; padding-left:20px;}
.summary-block li{color:var(--dim); font-size:14.5px; margin-bottom:7px;}
.summary-block strong{color:#fff;}
.en-badge{
  display:inline-block; font-family:var(--sans); font-size:10.5px; letter-spacing:.08em;
  color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:3px 9px; margin-bottom:16px;
}

/* ---------- transcript ---------- */
details.transcript{
  background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; backdrop-filter:blur(6px);
}
details.transcript > summary{
  cursor:pointer; list-style:none; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--sans); font-size:13px; font-weight:700; color:var(--white);
  border-bottom:1px solid transparent;
}
details.transcript[open] > summary{border-bottom-color:var(--line);}
details.transcript > summary::-webkit-details-marker{display:none;}
details.transcript > summary::after{
  content:"open ↓"; color:var(--glow-soft); font-size:11px; font-weight:700;
}
details.transcript[open] > summary::after{content:"close ↑";}
.transcript-body{padding:10px clamp(14px,3vw,26px) 26px; max-height:none;}

.turn{padding:13px 0; border-bottom:1px dashed var(--line);}
.turn:last-child{border-bottom:none;}
.ln{margin:0 0 4px; font-size:14.5px;}
.ln-en{color:var(--white);}
.ln-cn{color:var(--dim-2); font-size:14px;}
body.mode-en .ln-cn{display:none;}
body.mode-cn .ln-en{display:none;}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line); padding:40px 28px; margin-top:40px;
  font-family:var(--sans); font-size:11.5px; color:var(--dim);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; position:relative; z-index:1;
}
footer .grad-bar{height:2px; background:linear-gradient(120deg, var(--glow) 0%, var(--lavender) 100%); margin-bottom:24px;}

/* ---------- back link ---------- */
.backlink{
  font-family:var(--sans); font-size:12px; color:var(--dim);
  display:inline-block; margin-bottom:18px;
}
.backlink:hover{color:var(--white);}

@media (max-width:640px){
  .topbar{flex-wrap:wrap; gap:10px;}
  .nav{order:3; width:100%; overflow-x:auto;}
}