.live-context-home{
  padding-top:0;
  padding-bottom:32px;
}

.live-context-shell{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(255,244,232,.14);
  background:linear-gradient(180deg,rgba(15,10,7,.8) 0%,rgba(15,10,7,.64) 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  padding:24px;
  isolation:isolate;
}

.live-context-shell::before{
  content:'';
  position:absolute;
  inset:-20% auto auto -10%;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(252,191,21,.18) 0%, rgba(252,191,21,0) 68%);
  pointer-events:none;
  animation:liveAmbientFloat 12s ease-in-out infinite;
}

.live-context-shell::after{
  content:'';
  position:absolute;
  inset:auto -8% -24% auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(16,185,129,.12) 0%, rgba(16,185,129,0) 68%);
  pointer-events:none;
  animation:liveAmbientFloat 14s ease-in-out infinite reverse;
}

.live-context-copy{
  position:relative;
  z-index:1;
  max-width:760px;
}

.live-context-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:#ffe18e;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.live-context-kicker::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 6px rgba(16,185,129,.12);
  animation:livePulse 2.4s ease-in-out infinite;
}

.live-context-copy h2{
  margin:0 0 10px;
  color:#fff8ef;
  font-family:var(--display, 'Fraunces', Georgia, serif);
  font-size:clamp(28px,3vw,40px);
  line-height:1.08;
  letter-spacing:-.03em;
}

.live-context-copy p{
  margin:0;
  color:rgba(255,244,232,.8);
  font-size:15px;
  line-height:1.65;
}

.live-context-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:20px;
}

.live-context-card{
  position:relative;
  min-height:200px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,244,232,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.03) 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateZ(0);
  transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.live-context-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,244,232,.18);
  box-shadow:0 24px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}

.live-context-card.is-swapping{
  animation:liveCardSwap .55s ease;
}

.live-context-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 45%, transparent 100%);
  opacity:0;
}

.live-context-card.is-swapping::before{
  animation:liveCardSweep .65s ease;
}

.live-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.live-card-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff8ef;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.live-card-badge i{
  font-style:normal;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

.live-card-time{
  color:rgba(255,244,232,.66);
  font-size:12px;
  white-space:nowrap;
}

.live-card-title{
  margin:0 0 8px;
  color:#fff8ef;
  font-size:20px;
  line-height:1.2;
  font-weight:800;
}

.live-card-detail{
  margin:0;
  color:rgba(255,244,232,.78);
  font-size:14px;
  line-height:1.6;
}

.live-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.live-card-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,244,232,.82);
  font-size:12px;
  line-height:1;
}

.live-context-card--spotlight .live-card-title{
  font-size:24px;
}

.live-context-card--feed .live-card-detail{
  min-height:66px;
}

.live-context-card--signal .live-card-detail{
  min-height:44px;
}

.tone-gold .live-card-badge{
  color:#ffe18e;
  border-color:rgba(252,191,21,.26);
  background:rgba(252,191,21,.1);
}

.tone-gold .live-card-badge i{
  background:rgba(252,191,21,.14);
}

.tone-emerald .live-card-badge{
  color:#b8f6df;
  border-color:rgba(16,185,129,.26);
  background:rgba(16,185,129,.12);
}

.tone-emerald .live-card-badge i{
  background:rgba(16,185,129,.18);
}

.tone-blue .live-card-badge{
  color:#cfe7ff;
  border-color:rgba(84,163,255,.28);
  background:rgba(84,163,255,.12);
}

.tone-blue .live-card-badge i{
  background:rgba(84,163,255,.18);
}

.tone-rose .live-card-badge{
  color:#ffd9e1;
  border-color:rgba(255,111,145,.25);
  background:rgba(255,111,145,.1);
}

.tone-rose .live-card-badge i{
  background:rgba(255,111,145,.16);
}

.tone-violet .live-card-badge{
  color:#ebd9ff;
  border-color:rgba(162,111,255,.24);
  background:rgba(162,111,255,.1);
}

.tone-violet .live-card-badge i{
  background:rgba(162,111,255,.16);
}

body[data-live-page="skills"] .live-context-home .live-context-shell{
  border-color:rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(8,8,8,.82) 0%,rgba(8,8,8,.68) 100%);
}

body[data-live-page="skills"] .live-context-home .live-context-card{
  background:linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.025) 100%);
}

@keyframes liveCardSwap{
  0%{opacity:.72;transform:translateY(8px) scale(.985)}
  55%{opacity:1;transform:translateY(-2px) scale(1.01)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes liveCardSweep{
  0%{opacity:0;transform:translateX(-30%)}
  35%{opacity:1}
  100%{opacity:0;transform:translateX(110%)}
}

@keyframes livePulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.88);opacity:.7}
}

@keyframes liveAmbientFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(10px,-12px,0)}
}

@media (max-width: 980px){
  .live-context-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 720px){
  .live-context-shell{
    padding:20px;
  }

  .live-context-copy h2{
    font-size:clamp(24px,7vw,32px);
  }

  .live-context-copy p{
    font-size:14px;
    line-height:1.6;
  }

  .live-context-grid{
    grid-template-columns:1fr;
  }

  .live-context-card{
    min-height:0;
    padding:16px;
  }
}

@media (max-width: 560px){
  .live-context-shell{
    padding:16px;
    border-radius:22px;
  }

  .live-context-grid{
    gap:12px;
  }

  .live-card-top{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
  }

  .live-card-badge{
    width:100%;
    justify-content:flex-start;
    font-size:10px;
    padding:8px 10px;
  }

  .live-card-time{
    font-size:11px;
  }

  .live-card-title{
    font-size:18px;
  }

  .live-context-card--spotlight .live-card-title{
    font-size:20px;
  }

  .live-card-detail{
    font-size:13px;
    line-height:1.55;
  }

  .live-card-chip{
    font-size:11px;
    padding:7px 9px;
  }
}

@media (prefers-reduced-motion: reduce){
  .live-context-shell::before,
  .live-context-shell::after,
  .live-context-kicker::before,
  .live-context-card.is-swapping,
  .live-context-card.is-swapping::before{
    animation:none !important;
  }

  .live-context-card,
  .live-context-card:hover{
    transform:none;
  }
}