/* Works boundary: exact base rules retained during cascade-equivalent migration. */
.works-card{
  position:absolute;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  backdrop-filter:blur(10px);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  opacity:0;
  transform:translate(-50%,-50%) scale(.8);
}
.works-card .visual{
  position:absolute;inset:0;z-index:1;
}
.works-card .shade{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top, rgba(8,9,11,.82), rgba(8,9,11,.08) 48%, transparent 72%);
}
.works-card .meta{
  position:absolute;left:22px;right:22px;bottom:18px;z-index:4;
  display:flex;justify-content:space-between;align-items:end;gap:12px;
}
.works-card .meta h3{margin:0 0 5px;font-size:22px;font-weight:500}
.works-card .meta .sub{font-size:11px;color:#8e938f}
.works-card .meta .idx{font-size:10px;color:#6b706d;letter-spacing:.14em}
.works-card.featured .meta h3{font-size:28px}
.works-card.morphing{
  border-color:rgba(255,255,255,.16);
}

.bridge{
  position:absolute;left:50%;bottom:104px;transform:translateX(-50%);
  z-index:18;text-align:center;width:min(920px,calc(100% - 40px));
  opacity:0;pointer-events:none;
}
.bridge .line{
  margin:0 auto 16px;width:1px;height:54px;background:linear-gradient(to bottom,rgba(255,255,255,.2),transparent)
}
.bridge .text{
  color:#8b908d;font-size:13px;letter-spacing:.08em;
}
.bridge .text em{font-style:normal;color:#dcd8cb}

.after{
  min-height:170vh;
  padding:84px var(--pad) 160px;
  background:
    radial-gradient(circle at 80% 20%,rgba(237,227,198,.04),transparent 20%),
    linear-gradient(180deg,var(--bg2),var(--bg3));
}
.after-inner{width:min(var(--max),100%);margin:auto}
.after-head{
  margin-bottom:56px;
}
.after .eyebrow{font-size:10px;letter-spacing:.28em;color:#707571}
.after h2{font-size:clamp(42px,6vw,84px);font-weight:500;line-height:1.06;margin:20px 0}
.after p{max-width:760px;font-size:clamp(18px,2.1vw,28px);line-height:1.75;color:#969b97;margin:0}
.after-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:22px;
}
.after-item{
  min-height:300px;border:1px solid var(--line);border-radius:26px;
  background:var(--card);position:relative;overflow:hidden;
}
.after-item.large{grid-column:span 7;min-height:380px}
.after-item.small{grid-column:span 5;min-height:380px}
.after-item.half{grid-column:span 6}
.after-item.featured{grid-column:1/-1;min-height:430px}
.after-item .meta{
  position:absolute;left:22px;right:22px;bottom:18px;z-index:4;
  display:flex;justify-content:space-between;align-items:end;gap:12px;
}
.after-item .meta h3{margin:0 0 5px;font-size:24px;font-weight:500}
.after-item .meta .sub{font-size:11px;color:#8e938f}
.after-item .meta .idx{font-size:10px;color:#6b706d;letter-spacing:.14em}
.after-item .visual{position:absolute;inset:0}
.after-item .shade{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(8,9,11,.84), rgba(8,9,11,.08) 48%, transparent 72%);
}
.visual.video{
  background:
    radial-gradient(circle at 72% 30%, rgba(255,232,180,.17), transparent 18%),
    linear-gradient(135deg,#15181e 0%,#0b0c0f 60%);
}
.video-frame{
  position:absolute;inset:14% 11% 22%;
  border-radius:18px;
  overflow:hidden;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,#22262d,#0e1014);
}
.video-frame::before{
  content:"";position:absolute;inset:-30%;
  background:conic-gradient(from 120deg,transparent,rgba(245,223,172,.16),transparent 30%);
  animation:rotate 8s linear infinite;
}
.video-frame::after{
  content:"";position:absolute;left:50%;top:50%;
  width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  transform:translate(-50%,-50%);
  box-shadow:inset 0 0 0 16px rgba(255,255,255,.02);
}
@keyframes rotate{to{transform:rotate(360deg)}}
.visual.music{
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,rgba(244,229,187,.07),transparent 30%);
}
.wave{
  display:flex;align-items:center;gap:5px;
  width:72%;height:120px;justify-content:center;
}
.bar{
  width:3px;border-radius:4px;background:rgba(239,234,216,.66);
  animation:wave 1.5s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes wave{to{transform:scaleY(.28);opacity:.5}}
.visual.graph{background:radial-gradient(circle at 40% 44%,rgba(243,232,199,.06),transparent 28%)}
.g-node{
  position:absolute;width:8px;height:8px;border-radius:50%;background:#d6d0bc;
  box-shadow:0 0 20px rgba(243,232,199,.38);
  animation:float 4s ease-in-out infinite alternate;
}
.g-line{
  position:absolute;height:1px;background:rgba(255,255,255,.15);
  transform-origin:left center;
}
@keyframes float{to{transform:translateY(-7px)}}
.ticker{
  position:absolute;inset:12% 9% 22%;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;background:rgba(4,5,6,.52);
  padding:18px;
}
.ticker-head{
  display:flex;justify-content:space-between;
  font-size:10px;letter-spacing:.2em;color:#7b807d;margin-bottom:12px;
}
.ticker-track{animation:ticker 10s linear infinite}
.news-row{padding:13px 0;border-top:1px solid rgba(255,255,255,.08)}
.news-row b{display:block;font-size:13px;font-weight:500;margin-bottom:5px}
.news-row span{color:#777c79;font-size:11px}
@keyframes ticker{to{transform:translateY(-42%)}}
.workflow{
  position:absolute;inset:14% 12% 24%;
  display:grid;grid-template-columns:1fr;gap:12px;align-content:center;
}
.task{
  border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;
  display:flex;justify-content:space-between;color:#c5c8c5;font-size:12px;
  animation:task 5s ease-in-out infinite;
}
.task:nth-child(2){animation-delay:.5s}
.task:nth-child(3){animation-delay:1s}
@keyframes task{
  0%,100%{transform:translateX(0);opacity:.55}
  50%{transform:translateX(10px);opacity:1}
}
.echo{
  background:
    radial-gradient(circle at 35% 48%,rgba(247,229,183,.13),transparent 18%),
    radial-gradient(circle at 68% 35%,rgba(219,231,235,.07),transparent 16%),
    linear-gradient(145deg,#12151a,#090a0d);
}
.echo-ring{
  position:absolute;left:50%;top:48%;
  width:100px;height:100px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  transform:translate(-50%,-50%);
  animation:ring 4s ease-out infinite;
}
.echo-ring:nth-child(2){animation-delay:1s}
.echo-ring:nth-child(3){animation-delay:2s}
@keyframes ring{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:.8}
  100%{transform:translate(-50%,-50%) scale(4.8);opacity:0}
}

html[data-theme="light"] .works-card{
  border-color:rgba(23,29,32,.115);
  background:#fff;
  box-shadow:0 16px 44px rgba(23,29,32,.07),inset 0 1px 0 #fff;
}
html[data-theme="light"] .works-card.morphing{border-color:rgba(23,29,32,.16)}
html[data-theme="light"] .works-card .shade{background:linear-gradient(to top,rgba(255,255,255,.99),rgba(255,255,255,.55) 46%,rgba(255,255,255,.02) 74%)}
html[data-theme="light"] .works-card .meta h3{color:var(--site-ink)}
html[data-theme="light"] .works-card .meta .sub{color:var(--site-muted)}
html[data-theme="light"] .works-card .meta .idx{color:var(--site-faint)}
html[data-theme="light"] .bridge .line{background:linear-gradient(to bottom,rgba(23,29,32,.14),transparent)}
html[data-theme="light"] .bridge .text{color:var(--site-muted)}
html[data-theme="light"] .bridge .text em{color:var(--site-ink-soft)}
html[data-theme="light"] .visual.video{background:radial-gradient(circle at 70% 28%,rgba(78,88,93,.15),transparent 18%),linear-gradient(145deg,#dce1e2 0%,#c7ced0 65%)}
html[data-theme="light"] .video-frame{border-color:rgba(23,29,32,.14);background:linear-gradient(135deg,#59666b,#303a3f)}
html[data-theme="light"] .visual.music{background:radial-gradient(circle at 50% 45%,rgba(78,88,93,.10),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.34),transparent)}
html[data-theme="light"] .bar{background:rgba(78,88,93,.70)}
html[data-theme="light"] .visual.graph{background:radial-gradient(circle at 40% 44%,rgba(95,102,105,.09),transparent 30%)}
html[data-theme="light"] .g-node{background:#66757a;box-shadow:0 0 13px rgba(95,102,105,.16)}
html[data-theme="light"] .g-line{background:rgba(23,29,32,.13)}
html[data-theme="light"] .ticker{border-color:rgba(23,29,32,.12);background:rgba(255,255,255,.46)}
html[data-theme="light"] .ticker-head,
html[data-theme="light"] .news-row span{color:#778185}
html[data-theme="light"] .news-row{border-top-color:rgba(23,29,32,.09)}
html[data-theme="light"] .news-row b{color:#3b4245}
html[data-theme="light"] .task{border-color:rgba(23,29,32,.12);color:#515b60;background:rgba(255,255,255,.34)}
html[data-theme="light"] .echo{background:radial-gradient(circle at 34% 48%,rgba(78,88,93,.11),transparent 18%),radial-gradient(circle at 68% 35%,rgba(78,88,93,.05),transparent 16%),linear-gradient(145deg,#dde2e3,#cbd2d4)}
html[data-theme="light"] .echo-ring{border-color:rgba(23,29,32,.16)}