/* HeartBug presentation stylesheet 08 (extracted from inline <style>) */

  /* ─── CRYSTAL AF · left chart / right cards (scoped) ─── */
  .p5-slide .inner{width:min(1400px,100%);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px);align-items:stretch}
  .p5-left{display:flex;flex-direction:column}
  .p5-chart{padding-top:clamp(38px,6vh,54px);position:relative}
  .p5-lead{margin-top:clamp(10px,1.8vh,18px);font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1.45;color:var(--muted)}
  .p5-lead b{color:var(--red);font-weight:600}
  .p5-left .p5-cards{margin-top:clamp(18px,3vh,34px)}
  .p5-chart svg{width:100%;height:auto;display:block;overflow:visible}
  .p5-bar{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;
    transition:transform .9s var(--ease);cursor:pointer}
  .is-active .p5-bar{transform:scaleY(1)}
  .is-active .p5-bar:nth-of-type(1){transition-delay:.45s}
  .is-active .p5-bar:nth-of-type(2){transition-delay:.6s}
  .is-active .p5-bar:nth-of-type(3){transition-delay:.75s}
  .is-active .p5-bar:nth-of-type(4){transition-delay:.9s}
  .is-active .p5-bar:nth-of-type(5){transition-delay:1.05s}
  .p5-val{font-size:15px;font-weight:800;fill:var(--ink);text-anchor:middle;opacity:0;transition:opacity .5s}
  .is-active .p5-val{opacity:1}
  .is-active .p5-val.v1{transition-delay:1s}.is-active .p5-val.v2{transition-delay:1.15s}
  .is-active .p5-val.v3{transition-delay:1.3s}.is-active .p5-val.v4{transition-delay:1.45s}
  .is-active .p5-val.v5{transition-delay:1.6s}
  .p5-xl{font-size:12.5px;font-weight:600;fill:var(--muted);text-anchor:middle}
  .p5-ax{stroke:var(--line);stroke-width:1.5}
  .p5-axt{font-size:11.5px;font-weight:600;letter-spacing:.06em;fill:var(--dim)}
  .p5-chart.has-focus .p5-bar:not(:hover):not(.active){filter:opacity(.3) grayscale(.4)}
  .p5-bar:hover,.p5-bar.active{filter:drop-shadow(0 8px 16px rgba(228,0,43,.35))}
  .p5-tip{position:absolute;left:50%;top:clamp(38px,6vh,54px);transform:translate(-50%,-100%) scale(.9);z-index:3;
    background:var(--ink);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
    padding:8px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
  .p5-tip b{color:#FF5C77;font-weight:800}
  .p5-tip.on{opacity:1;transform:translate(-50%,-100%) scale(1)}
  /* right column: 2×2 cards + lead + cite */
  .p5-right{display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2vh,20px)}
  .p5-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
  .p5-card{border:1.5px solid var(--line);border-radius:16px;background:var(--card);
    padding:clamp(14px,2.2vh,22px) clamp(14px,1.6vw,22px);cursor:pointer;
    transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease),filter .35s var(--ease);
    opacity:0}
  .is-active .p5-card{animation:p5Card .8s var(--ease) forwards;animation-delay:var(--d)}
  @keyframes p5Card{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .p5-card .idx{font-size:10px;font-weight:700;letter-spacing:.26em;color:var(--dim);transition:color .3s}
  .p5-card h3{margin-top:8px;font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:700;line-height:1.25;transition:color .3s}
  .p5-card p{margin-top:0;max-height:0;overflow:hidden;opacity:0;font-size:clamp(.95rem,1.2vw,1.1rem);color:var(--muted);line-height:1.5;transition:max-height .4s var(--ease),opacity .3s var(--ease),margin-top .3s var(--ease)}
  .p5-card:hover,.p5-card.active{border-color:var(--line-r);box-shadow:0 18px 44px -20px rgba(228,0,43,.3);transform:translateY(-5px)}
  .p5-card:hover .idx,.p5-card.active .idx,.p5-card:hover h3,.p5-card.active h3{color:var(--red)}
  .p5-card:hover p,.p5-card.active p{max-height:7em;opacity:1;margin-top:6px}
  .p5-cards.has-focus .p5-card:not(:hover):not(.active){filter:opacity(.4) grayscale(.5)}
  .p5-foot{margin-top:auto;padding-top:clamp(10px,2vh,20px)}
  .p5-foot .lead{display:inline-block;font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1.45;transform-origin:left center;transition:transform .4s var(--ease)}
  .p5-foot .lead:hover{transform:scale(1.06)}
  .p5-foot .cite{display:inline-block;transform-origin:left top;transition:transform .4s var(--ease),opacity .4s var(--ease)}
  .p5-foot:has(.lead:hover) .cite{transform:scale(.88);opacity:.55}
  @media (max-width:1490px) and (max-height:950px){
    .p5-right{translate:-1vw 0}
  }
  @media (max-width:1000px){
    .p5-slide .inner{grid-template-columns:1fr}
  }