/* Discovery owns the large photographic feature. */
.home-opening .discovery-spotlight{position:relative;border-radius:18px;overflow:hidden;background:#171c19}
.home-opening .discovery-spotlight .spotlight-shade{background:linear-gradient(90deg,#101713ed 0%,#101713cf 43%,#1017134d 78%,#1017131a),linear-gradient(0deg,#0d140fb3,transparent 72%);opacity:0;pointer-events:none;transition:opacity 220ms ease}
.home-opening .discovery-spotlight .spotlight-copy{padding:clamp(20px,4.6cqw,34px)}
.home-opening .discovery-spotlight .spotlight-kicker{color:#e6ebe7;font-size:10px;letter-spacing:.3px}
.home-opening .discovery-spotlight .spotlight-story{max-width:85%}
.home-opening .discovery-spotlight h1{font-size:clamp(24px,4.7cqw,35px);line-height:1.3;letter-spacing:-.7px;font-weight:650;margin-bottom:12px}
.home-opening .discovery-spotlight p{color:#d3dbd5;font-size:12px;line-height:1.8;max-width:29em}
.home-opening .discovery-spotlight .spotlight-actions{margin-top:23px;gap:18px}
.home-opening .discovery-spotlight .feature-cta{background:#41d87e;color:#10291b;font-weight:600}
.home-opening .discovery-spotlight .feature-cta:hover{background:#66e298}
.home-opening .spotlight-cover-link{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;background:transparent;border-radius:inherit;cursor:pointer}
.home-opening .spotlight-cover-link:focus-visible{outline:2px solid var(--brand);outline-offset:-5px;border-radius:18px}
.home-opening .discovery-spotlight .spotlight-copy{z-index:2;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity 180ms ease,transform 220ms ease,visibility 0s 220ms}
.home-opening .spotlight-copy :is(button,a){pointer-events:none}
/* A poster stays unobstructed until mouse hover or deliberate keyboard focus. */
@media(hover:hover) and (pointer:fine){
  .home-opening .discovery-spotlight:hover .spotlight-shade{opacity:1}
  .home-opening .discovery-spotlight:hover .spotlight-copy{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
  .home-opening .discovery-spotlight:hover .spotlight-copy :is(button,a){pointer-events:auto}
}
.home-opening .discovery-spotlight:has(:focus-visible) .spotlight-shade{opacity:1}
.home-opening .discovery-spotlight:has(:focus-visible) .spotlight-copy{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.home-opening .discovery-spotlight:has(:focus-visible) .spotlight-copy :is(button,a){pointer-events:auto}
.home-opening .spotlight-dots{position:absolute;z-index:3;right:22px;bottom:22px;display:flex;align-items:center;gap:0;padding:1px 4px;background:#1017134d;border-radius:999px}
.home-opening .spotlight-dots button{display:grid;place-items:center;width:24px;height:28px;padding:0;border-radius:50%;background:transparent}
.home-opening .spotlight-dots button>span{display:block;width:5px;height:5px;border-radius:50%;background:#ffffff80;box-shadow:0 1px 3px #0003;transition:background .2s ease,transform .2s ease}
.home-opening .spotlight-dots button[aria-pressed="true"]>span{background:var(--brand);transform:scale(1.4)}
.home-opening .spotlight-dots button:hover>span{background:#fff}
.home-opening .spotlight-dots button:focus-visible{outline:2px solid #fff;outline-offset:-3px}
@media(max-width:600px){.home-opening .spotlight-dots{right:12px;bottom:9px}.home-opening .spotlight-dots button{width:22px;height:26px}}
@media(prefers-reduced-motion:reduce){.home-opening .spotlight-dots button>span,.home-opening .discovery-spotlight .spotlight-copy,.home-opening .discovery-spotlight .spotlight-shade{transition:none}}
@media(min-width:1100px){
  .home-opening{grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);align-items:stretch}
}

/* Keep the number and title together as one collection heading. */
.channel-heading{align-items:center;gap:10px}
.channel-heading .channel-index{display:grid;place-items:center;flex:none;align-self:center;width:36px;height:36px;padding:0;border:0;border-radius:9px;background:var(--brand);color:#143522;font-size:17px;line-height:1;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.channel-heading h2{margin:0;line-height:1.4}
@media(max-width:760px){.channel-heading{align-items:center;gap:10px}.channel-heading .channel-index{width:32px;height:32px;border-radius:8px;font-size:15px}}
@media(max-width:520px){.channel-heading .channel-index{width:30px;height:30px;font-size:14px}.channel-heading .channel-count{margin-left:4px}}

/* A live replay is one image and its own concise information, never a page hero. */
.live-replay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px}
.live-replay-card{min-width:0}
.live-replay-card .course-art-button{display:block;width:100%;border-radius:13px;overflow:hidden}
.live-replay-card .video-thumbnail{aspect-ratio:16/9;border-radius:13px;overflow:hidden}
.live-replay-body{padding:15px 2px 0}
.live-replay-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;line-height:1.5;color:#858b86}
.live-replay-meta>span:first-child{display:flex;align-items:center;gap:6px}
.live-replay-meta>span:first-child:before{content:'';width:4px;height:4px;border-radius:50%;background:var(--brand)}
.live-replay-body :is(h2,h3){font-size:17px;line-height:1.55;letter-spacing:-.3px;font-weight:600;margin:8px 0 0}
.live-replay-body :is(h2,h3) button{text-align:left;font:inherit;color:inherit}
.live-replay-body :is(h2,h3) button:hover{color:#238b4e}
.live-replay-bottom{display:flex;align-items:center;gap:14px;margin-top:9px}
.live-replay-bottom>span{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:11px;line-height:1.8;color:#858b86}
.live-replay-play{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#f0f3f0;color:#3b4b40;transition:background .15s ease}
.live-replay-play svg{width:14px;height:14px;margin-left:1px}
.live-replay-play:hover{background:var(--brand);color:#173521}

/* A featured case plus a quiet, configurable ranking at the top of the library. */
.cases-opening{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr);gap:28px;align-items:stretch;margin:0 0 30px}
.cases-feature{--case-base:18,30,23;--case-glow:40,81,55;--case-accent:#41d87e;position:relative;isolation:isolate;min-width:0;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:radial-gradient(ellipse at 88% 100%,#2d6248aa,transparent 72%),linear-gradient(125deg,#161d19,#223c2e);color:#fff;container-type:inline-size}
.cases-feature .case-copy{padding:clamp(22px,4.8cqw,34px);width:76%;background:none}
.cases-feature .case-format{padding:0;background:none;color:#6ee69d;font-size:10px;line-height:1.5;gap:7px;letter-spacing:.3px}
.cases-feature .case-format i{width:5px;height:5px;border-radius:50%;background:var(--brand)}
.cases-feature .case-copy h2{font-size:clamp(24px,4.7cqw,34px);font-weight:650;line-height:1.3;letter-spacing:-.7px;margin:26px 0 13px}
.cases-feature .case-copy p{font-size:12px;line-height:1.85;color:#c1d0c6;max-width:23em;display:block;overflow:visible}
.case-feature-meta{display:flex;align-items:center;gap:9px;font-size:10px;color:#a3b9aa;margin-top:17px}
.case-feature-meta i{width:2px;height:2px;background:currentColor;border-radius:50%}
.cases-feature .case-visual{left:36%;bottom:5%;width:81%;aspect-ratio:16/10;border-radius:10px;transform:perspective(1000px) rotateY(-10deg) rotateZ(-8deg);box-shadow:0 14px 40px #0005;mask-image:linear-gradient(90deg,transparent,#000 22%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%)}
.cases-feature .case-atmosphere{background:linear-gradient(90deg,#17231bf0 0%,#17231bb3 28%,#17231b33 48%,#17231b00 68%)}
.cases-feature .case-preview:is(:hover,:focus-visible,.is-playing) .case-visual{transform:translate(-2%,-2%) perspective(1000px) rotateY(0) rotateZ(-3deg)}
.cases-feature .case-preview:is(:hover,:focus-visible,.is-playing) .case-atmosphere{opacity:.85}
.cases-feature .case-preview-action{left:clamp(22px,4.8cqw,34px);right:auto;bottom:clamp(22px,4.8cqw,34px);min-height:39px;padding:0 21px;background:var(--brand);border-radius:999px;color:#10291b;font-size:12px;font-weight:600}
.cases-feature .case-preview-action>span{opacity:1;transform:none;text-shadow:none}
.cases-feature .case-preview:hover .case-preview-action{background:#66e298}
@media(max-width:1150px){
  .cases-opening{gap:24px;grid-template-columns:minmax(0,1.6fr) minmax(275px,1fr)}
  .cases-feature .case-copy h2{margin:18px 0 10px}
  .cases-feature .case-copy p{font-size:11px}.case-feature-meta{margin-top:12px;font-size:9px}
}
@media(max-width:1000px){
  .live-replay-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
  .cases-opening{grid-template-columns:1fr;gap:27px}
  .cases-feature .case-copy{padding:clamp(24px,4.8cqw,34px)}
  .cases-feature .case-copy h2{margin:26px 0 13px}
  .cases-feature .case-copy p{font-size:12px}.case-feature-meta{font-size:10px;margin-top:17px}
}
@media(max-width:600px){
  .live-replay-grid{grid-template-columns:1fr;gap:30px}
  .live-replay-body :is(h2,h3){font-size:17px}.live-replay-bottom>span{font-size:12px}
  .cases-opening{margin-bottom:28px;gap:24px}
  .cases-feature{aspect-ratio:16/10;border-radius:14px}
  .cases-feature .case-copy{padding:21px;width:86%}
  .cases-feature .case-copy h2{font-size:25px;margin:17px 0 9px}
  .cases-feature .case-copy p{display:none}
  .cases-feature .case-format{font-size:9px}.case-feature-meta{font-size:9px;margin-top:12px}
  .cases-feature .case-preview-action{left:21px;bottom:21px;min-height:34px;font-size:11px;padding:0 18px}
  .home-opening .discovery-spotlight{border-radius:14px}
  .home-opening .discovery-spotlight .spotlight-copy{padding:19px}
  .home-opening .discovery-spotlight h1{font-size:23px;margin-bottom:0}
  .home-opening .discovery-spotlight .spotlight-actions{margin-top:14px;gap:16px}
  .home-opening .discovery-spotlight .spotlight-kicker{font-size:9px}
}
@media(max-width:360px){
  .cases-feature .case-copy h2{font-size:22px;margin-top:13px}.case-feature-meta{display:none}
  .home-opening .discovery-spotlight .spotlight-copy{padding:17px}
  .home-opening .discovery-spotlight h1{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.live-replay-play{transition:none}}

/* Release articles use the same image-first language as the course collection. */
.home-changelog{min-width:0;min-height:0;display:flex;flex-direction:column;align-self:stretch;padding:0;background:transparent;border-radius:0}
.home-changelog-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;padding:0 0 16px}
.home-changelog-heading h2{margin:0;font-size:19px;line-height:1.45;font-weight:650;letter-spacing:-.4px;color:#191919}
.home-changelog-heading>a{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:28px;font-size:11px;line-height:1.5;color:#737373}
.home-changelog-heading>a svg{width:14px;height:14px;stroke-width:1.7}
.home-changelog-heading>a:hover{color:#191919}
.home-changelog-list{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;flex:1;min-height:0;list-style:none;margin:0;padding:0}
.home-changelog-list>li{display:flex;align-items:center;min-width:0;min-height:0}
.home-changelog-list>li:first-child{align-items:flex-start}
.home-changelog-list>li:last-child{align-items:flex-end}
.home-changelog-entry{display:grid;grid-template-columns:46% minmax(0,1fr);align-items:center;gap:16px;min-width:0;width:100%;text-decoration:none;border-radius:10px}
.home-changelog-cover{display:block;min-width:0;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#f2f2f2}
.home-changelog-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.home-changelog-copy{display:flex;flex-direction:column;gap:9px;min-width:0}
.home-changelog-entry h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0;font-size:16px;line-height:1.5;font-weight:600;letter-spacing:-.2px;color:#202020}
.home-changelog-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 10px;font-size:10px;line-height:1.5;color:#858585;font-variant-numeric:tabular-nums}
.home-changelog-latest{display:inline-flex;align-items:center;gap:4px;color:#237a45;font-size:10px}
.home-changelog-latest:before{content:'';width:4px;height:4px;border-radius:50%;background:var(--brand)}
.home-changelog-entry:hover img{transform:scale(1.025)}
.home-changelog-entry:hover h3{color:#555}
.home-changelog-entry:focus-visible{outline-offset:5px}
@media(min-width:1100px){.home-changelog{contain:size}}
@media(min-width:1100px) and (max-width:1450px){
  .home-changelog-heading{padding-bottom:14px}
  .home-changelog-heading h2{font-size:18px}
  .home-changelog-entry{grid-template-columns:44% minmax(0,1fr);gap:13px}
  .home-changelog-entry h3{font-size:15px}
  .home-changelog-copy{gap:7px}
}
@media(min-width:1100px) and (max-width:1250px){
  .home-changelog-heading{padding-bottom:12px}
  .home-changelog-list{gap:10px}
  .home-changelog-entry{grid-template-columns:42% minmax(0,1fr);gap:11px}
  .home-changelog-entry h3{font-size:13px;line-height:1.45;-webkit-line-clamp:3}
  .home-changelog-copy{gap:5px}
  .home-changelog-cover{border-radius:8px}
  .home-changelog-meta,.home-changelog-latest{font-size:9px}
}
@media(max-width:1099px) and (min-width:601px){
  .home-changelog-list{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;gap:20px}
  .home-changelog-list>li,.home-changelog-list>li:last-child{align-items:flex-start}
  .home-changelog-entry{grid-template-columns:1fr;gap:12px}
  .home-changelog-entry h3{font-size:15px;-webkit-line-clamp:2}
  .home-changelog-copy{gap:6px}
}
@media(max-width:600px){
  .home-changelog-heading{padding-bottom:16px}
  .home-changelog-heading h2{font-size:18px}
  .home-changelog-list{grid-template-rows:auto;gap:18px}
  .home-changelog-entry{grid-template-columns:38% minmax(0,1fr);gap:14px}
  .home-changelog-entry h3{font-size:14px;-webkit-line-clamp:2}
  .home-changelog-copy{gap:7px}
  .home-changelog-cover{border-radius:8px}
}
@media(prefers-reduced-motion:reduce){.home-changelog-cover img{transition:none}}

/* Five roomy rows share one panel, with no stretched gaps between items. */
.cases-library .page-hero{padding:32px 0 24px}
.case-ranking{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;contain:size;padding:16px;background:#f5f6f5;border-radius:16px}
.case-ranking-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex:none;margin:0}
.case-ranking-heading h2{margin:0;font-size:15px;line-height:1.4;font-weight:650;letter-spacing:-.3px;color:#202721}
.case-ranking-heading>span{font-size:9px;color:#929a94}
.case-ranking ol{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,minmax(0,1fr));flex:1;min-height:0;list-style:none;margin:0;padding:0}
.case-ranking li{min-height:0;min-width:0}
.case-ranking li+li{border-top:1px solid #e3e7e3}
.case-ranking li button{display:flex;align-items:center;gap:10px;width:100%;height:100%;padding:7px 0;text-align:left;border-radius:6px;min-height:0;min-width:0}
.case-ranking li:first-child button{padding-top:0}
.case-ranking li:last-child button{padding-bottom:0}
.case-rank-number{flex:none;width:16px;color:#9fa8a1;font-size:11px;line-height:1;font-weight:550;font-variant-numeric:tabular-nums}
.case-ranking li:first-child .case-rank-number{color:#248b4d}
.case-ranking li img{display:block;flex:none;width:48px;aspect-ratio:16/10;object-fit:cover;border-radius:6px;background:#e9ede9}
.case-rank-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.case-rank-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;line-height:1.4;font-weight:550;color:#303a32}
.case-rank-copy small{font-size:9.5px;line-height:1.5;color:#929b94}
.case-ranking li button>svg{flex:none;width:13px;height:13px;color:#859187;opacity:0}
.case-ranking li button:hover strong{color:#21894b}
.case-ranking li button:hover>svg,.case-ranking li button:focus-visible>svg{opacity:1}
@media(min-width:1001px) and (max-width:1250px){
  .case-ranking{padding:18px;gap:10px}
  .case-ranking-heading h2{font-size:18px}
  .case-ranking li button{gap:9px;padding:6px 0}
  .case-ranking li img{width:50px;border-radius:5px}
  .case-rank-number{width:15px;font-size:10px}
  .case-rank-copy strong{font-size:12px}.case-rank-copy small{font-size:9px}.case-rank-copy{gap:3px}
  .case-ranking li button>svg{display:none}
}
@media(max-width:1000px){
  .case-ranking{contain:none;padding:16px}
  .case-ranking ol{grid-template-rows:none}
  .case-ranking li button{min-height:52px;padding:8px 0}
  .case-ranking li img{width:52px}
  .case-ranking li:first-child button{padding-top:2px}
  .case-ranking li:last-child button{padding-bottom:2px}
}
@media(max-width:600px){
  .case-ranking{padding:14px;gap:10px;border-radius:14px}
  .case-ranking-heading h2{font-size:14px}
  .case-ranking li button{gap:10px;min-height:48px}
  .case-ranking li img{width:46px}
  .case-rank-copy strong{font-size:12px}.case-rank-number{font-size:10px;width:14px}
  .case-ranking li button>svg{display:none}
}

/* ── Live page: series sections & placeholder cards ─────────────────────── */
.live-series{margin-top:46px}
.live-series-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.live-series-no{font-size:12px;font-weight:700;color:#161616;background:#eef2ef;border-radius:8px;padding:5px 10px;letter-spacing:1px}
.live-series-head h2{font-size:22px;font-weight:750;letter-spacing:-.3px;margin:0}
.live-placeholder-card{border:1.5px dashed #bfd8cc;border-radius:14px;background:#f7fbf9;padding:0;display:flex;flex-direction:column}
.live-placeholder-card .live-placeholder-cover{aspect-ratio:16/9;border-radius:12px;margin:0;background:repeating-linear-gradient(45deg,#edf6f1,#edf6f1 10px,#e4f2ea 10px,#e4f2ea 20px);display:grid;place-items:center}
.live-placeholder-card .live-placeholder-cover svg{width:34px;height:34px;color:#7fa695;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.live-placeholder-card .live-replay-body{padding:15px 16px 16px}
.live-placeholder-card .live-replay-body h3{color:#7fa695}
.live-placeholder-card .live-replay-bottom span{color:#7fa695}
@media(max-width:900px){.live-series-head h2{font-size:19px}}
.live-placeholder-card{pointer-events:none}
.live-series-head h2 em{font-style:normal;font-weight:750;color:#1e7a41;font-size:inherit}

/* Live card bottom: series · episode meta (replaces description) */
.live-replay-bottom>span.live-series-meta{display:inline-flex;align-items:center;gap:6px;-webkit-line-clamp:1;font-size:11px;line-height:1.5;color:#858b86}
.live-replay-bottom>span.live-series-meta:before{content:'';width:4px;height:4px;border-radius:50%;background:var(--brand);flex-shrink:0}
.live-replay-bottom>span.live-series-meta i{font-style:normal}

/* Live card title: keep on a single line */
.live-replay-body :is(h2,h3) button{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ── Hero carousel · case slide mirrors 案例库 showcase card ─────────────── */
.spotlight-scene.case-hero{--case-base:14,39,33;--case-glow:43,112,80;--case-accent:#99e3bb;--case-top:#0d211c;
  background:radial-gradient(ellipse at 100% 95%,rgba(var(--case-glow),.8),transparent 74%),linear-gradient(135deg,var(--case-top),rgb(var(--case-base)))}
.spotlight-case-banner{position:absolute;inset:0;overflow:hidden}
.spotlight-case-shot{position:absolute;display:block;width:62%;max-width:760px;aspect-ratio:16/10;right:0;bottom:0;
  background:#171b1a;border-radius:9px;overflow:hidden;box-shadow:-15px 18px 50px #0006;
  -webkit-mask-image:linear-gradient(120deg,transparent 0%,#000 30%);mask-image:linear-gradient(120deg,transparent 0%,#000 30%);
  transform:translateX(6%) perspective(900px) rotateY(-12deg) rotateX(5deg) rotateZ(-6deg);transform-origin:center;
  transition:transform .65s cubic-bezier(.2,.65,.2,1);object-fit:cover}
.spotlight-scene.case-hero:hover .spotlight-case-shot{transform:translateX(3%) translateY(-2%) perspective(900px) rotateY(-6deg) rotateX(3deg) rotateZ(-3deg) scale(.97)}
.spotlight-scene.case-hero .spotlight-copy{color:#fff}
.spotlight-scene.case-hero .spotlight-copy h1{color:#fff}
.spotlight-scene.case-hero .spotlight-copy p{color:rgba(255,255,255,.72)}
.spotlight-scene.case-hero .spotlight-kicker{color:var(--case-accent)}
.spotlight-scene.case-hero .spotlight-kicker i{background:#41d87e}
.spotlight-scene.case-hero .spotlight-actions>a{color:rgba(255,255,255,.78)}
.spotlight-scene.case-hero .spotlight-actions>a:hover{color:#fff}
.spotlight-scene.case-hero .spotlight-actions>a svg{stroke:currentColor}
@media(max-width:760px){.spotlight-case-shot{width:78%;transform:translateX(10%) perspective(900px) rotateY(-9deg) rotateX(4deg) rotateZ(-4deg)}}

/* Case hero slide: copy always visible (not hover-gated) */
.spotlight-scene.case-hero .spotlight-copy{opacity:1;visibility:visible;transform:none;transition:none;pointer-events:auto}
.spotlight-scene.case-hero .spotlight-copy :is(button,a){pointer-events:auto}