:root{--tl-gray:#3a3a3a;--tl-red:#d62828;--tl-gap:24px;--tl-card-w:320px;--tl-radius:14px}.timeline-shell{position:relative;isolation:isolate;padding-inline:2.25rem}.timeline-scroll{display:flex;gap:var(--tl-gap);overflow-x:auto;padding:18px 4px 28px;scroll-snap-type:x mandatory;scrollbar-width:thin;position:relative;border-radius:var(--tl-radius);background:
    linear-gradient(to right, var(--tl-gray) 0%, #d65c5c 50%, var(--tl-gray) 100%) 0 46px/100% 3px no-repeat;outline:none}.timeline-scroll::-webkit-scrollbar{height:8px}.timeline-scroll::-webkit-scrollbar-track{background:#e9ecef;border-radius:4px}.timeline-scroll::-webkit-scrollbar-thumb{background:#b6bcc4;border-radius:4px}.timeline-scroll::-webkit-scrollbar-thumb:hover{background:#9aa3ad}.timeline-item{flex:0 0 var(--tl-card-w);scroll-snap-align:start;position:relative;padding-top:10px}.timeline-item::after{content:"";position:absolute;left:28px;top:44px;width:2px;height:28px;background:linear-gradient(var(--tl-red),var(--tl-gray));opacity:.75}.timeline-icon{position:absolute;left:16px;top:-6px;background:#fff;color:var(--tl-red);border:2px solid var(--tl-red);font-weight:700;padding:.15rem .5rem;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.08);transform:translateY(-4px)}.timeline-content{background:#fff;border-radius:var(--tl-radius);padding:1rem 1rem 1.1rem;box-shadow:0 8px 24px rgba(0,0,0,.08);border:1px solid #eee;transition:transform .18s ease , box-shadow .18s ease}.timeline-content:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.12)}.timeline-content h5{margin:0 0 .35rem;color:#212529;font-size:1.05rem}.timeline-content p{margin:0;color:#6c757d;line-height:1.45;font-size:.95rem}.tl-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.1);display:grid;place-items:center;font-size:22px;line-height:1;cursor:pointer;transition:transform .15s ease , box-shadow .15s ease , background .15s ease;z-index:2}.tl-prev{left:0}.tl-next{right:0}.tl-btn:hover{transform:translateY(-50%) scale(1.04);box-shadow:0 8px 18px rgba(0,0,0,.12)}.tl-btn:active{transform:translateY(-50%) scale(.98)}.tl-btn:focus-visible{outline:3px solid rgba(214,40,40,.35)}@media (max-width:576px){:root{--tl-card-w:84vw;--tl-gap:16px}.timeline-icon{left:12px}.timeline-item::after{left:24px}.timeline-shell{padding-inline:1.25rem}}@media (prefers-reduced-motion:reduce){.timeline-content,.tl-btn{transition:none}}