/* Home hero: "Three hard cases" board. Loaded only on index.html. */
.cs-stage{position:relative;height:304px}
.cs-stage .cs-slip{position:absolute;margin:0;width:calc(50% - 5px);height:62px;transition:left .8s cubic-bezier(.2,.7,.2,1),top .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),border-left-color .4s ease,box-shadow .4s ease}
.cs-stage .cs-slip .s-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-0 .s-sr{left:0;top:20px;transform:rotate(-2deg)}
.ph-0 .s-mj{left:calc(50% + 5px);top:6px;transform:rotate(1.5deg)}
.ph-0 .s-ana{left:0;top:124px;transform:rotate(1deg)}
.ph-0 .s-jr{left:calc(50% + 5px);top:110px;transform:rotate(-1.5deg)}
.ph-0 .s-ms{left:25%;top:222px;transform:rotate(2deg)}
.ph-1 .cs-slip,.ph-2 .cs-slip{transform:none}
.ph-1 .s-sr{left:0;top:24px}
.ph-1 .s-jr{left:10px;top:32px;box-shadow:0 -6px 16px rgba(0,0,0,.35)}
.ph-1 .s-mj{left:0;top:128px}
.ph-1 .s-ms{left:0;top:232px}
.ph-1 .s-ana{left:calc(50% + 5px);top:232px}
.ph-1 .s-sr,.ph-1 .s-jr,.ph-1 .s-mj,.ph-1 .s-ms{border-left-color:var(--amber)}
.ph-2 .s-sr{left:0;top:24px}
.ph-2 .s-jr{left:calc(50% + 5px);top:24px}
.ph-2 .s-mj{left:0;top:128px}
.ph-2 .s-ms{left:10px;top:136px;box-shadow:0 -6px 16px rgba(0,0,0,.35)}
.ph-2 .s-ana{left:0;top:232px}
.ph-2 .cs-slip{border-left-color:var(--brand)}
.cs-lbl{position:absolute;left:0;right:0;margin:0;display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;opacity:0;transition:opacity .4s ease}
.cs-lbl svg{flex:none}
.cs-f{color:var(--amber)}
.cs-m{color:var(--lavender)}
.ph-1 .cs-f{opacity:1;transition-delay:.5s}
.ph-2 .cs-m{opacity:1;transition-delay:.5s}
.cs-sep{position:absolute;left:0;right:0;height:1px;background:var(--line);opacity:0;transition:opacity .4s ease}
.ph-1 .cs-sep,.ph-2 .cs-sep{opacity:1}
.cs-ghost{position:absolute;left:calc(50% + 5px);top:232px;width:calc(50% - 5px);height:62px;box-sizing:border-box;margin:0;display:flex;align-items:center;padding:10px 12px;border:1px dashed var(--line-2);border-radius:10px;font-size:.8rem;line-height:1.35;color:var(--muted);opacity:0;transition:opacity .5s ease}
.ph-2 .cs-ghost{opacity:1;transition-delay:.8s}
.cs-replay{min-height:44px}
/* Small screens: tighter type so names, sources and labels fit the half-width slips */
@media (max-width: 430px){
.cs-shell{padding:14px}
.cs-stage .cs-slip{padding:9px 9px 9px 10px;font-size:.8rem}
.cs-stage .cs-slip .s-src{top:8px;right:8px;font-size:.64rem}
.cs-stage .cs-slip .s-meta{font-size:.76rem}
.cs-lbl{font-size:.7rem;gap:5px}
.cs-ghost{padding:8px 10px;font-size:.74rem}
}
@media (max-width: 374px){
.cs-shell{padding:12px}
.cs-stage .cs-slip .s-src{top:-7px;right:8px;padding:0 4px;line-height:1.2;font-size:.6rem;background:var(--ink)}
.cs-stage .cs-slip .s-meta{font-size:.7rem}
.cs-lbl{font-size:.64rem;gap:4px}
.cs-stage .cs-slip .s-src{transition:opacity .4s ease}
.ph-1 .s-sr .s-src,.ph-2 .s-mj .s-src{opacity:0}
}
@media (max-width: 340px){.cs-lbl{font-size:.58rem}.cs-stage .cs-slip{padding:9px 6px 9px 8px}.cs-stage .cs-slip .s-meta{font-size:.66rem}}
@media (prefers-reduced-motion: reduce){.cs-stage .cs-slip,.cs-lbl,.cs-sep,.cs-ghost{transition:none}}