.tn-success{max-width:1440px;margin:auto;padding:32px 40px;color:#f2f2f2;font-family:var(--font-body-family);background:#171819}
.tn-success__top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.tn-success h2{font:600 clamp(24px,2.5vw,34px)/1.15 var(--font-body-family);letter-spacing:-.035em;color:inherit;margin:0}
.tn-success__all{font-size:12px;color:#bfc4c7;text-decoration:none;white-space:nowrap}.tn-success__all span{margin-left:10px}
.tn-success__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:24px;overscroll-behavior-x:contain;border-radius:8px}.tn-success__track::-webkit-scrollbar{display:none}
.tn-success__page{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:16px;scroll-snap-align:start;scroll-snap-stop:always;align-content:start}
.tn-success__card{display:block;min-width:0;overflow:hidden;border:1px solid #343638;border-radius:8px;background:#202224;color:inherit;text-decoration:none;transition:border-color .2s,background .2s}
.tn-success__image{position:relative;overflow:hidden;height:clamp(100px,11vw,145px);background:#292c2e}.tn-success__image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.tn-success__arrow{position:absolute;right:10px;top:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#131516c9;color:#fff;font-size:17px}
.tn-success__copy{padding:10px 12px 12px}.tn-success time{display:block;font-size:9px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:#a2aaaf;margin-bottom:5px}
.tn-success h3{font:500 14px/1.35 var(--font-body-family);color:#f2f2f2;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.tn-success__card:hover{border-color:#8eaaaF;background:#292c2e}.tn-success__card:hover img{transform:scale(1.045)}
.tn-success__bottom{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:18px}.tn-success__progress{height:2px;background:#36393c;flex:1;max-width:220px;overflow:hidden}.tn-success__progress span{display:block;height:100%;background:#a5dce7;transition:transform .25s;width:100%}
.tn-success__controls{display:flex;align-items:center;gap:15px}.tn-success__controls button{cursor:pointer;width:38px;height:34px;border:1px solid #555b60;background:transparent;color:#fff;border-radius:5px;font-size:20px}.tn-success__controls button:hover{background:#343a3e}.tn-success__controls button:disabled{opacity:.3;cursor:default}.tn-success__count{font-size:11px;letter-spacing:.12em;min-width:42px;text-align:center;color:#bdc3c8}
.tn-success a:focus-visible,.tn-success button:focus-visible,.tn-success__track:focus-visible{outline:2px solid #a5dce7;outline-offset:-3px}
@media(max-width:989px){.tn-success{padding:28px 20px}.tn-success__page{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,1fr);gap:12px}.tn-success__image{height:110px}.tn-success h3{font-size:13px;min-height:36px}.tn-success__copy{padding:9px 10px}.tn-success__top{gap:12px}.tn-success h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.tn-success *{transition:none!important;scroll-behavior:auto!important}}
.tn-success{max-width:none;padding:0;background:radial-gradient(ellipse at 10% 30%,#23343b66,transparent 60%),#141617;position:relative;border-block:1px solid #ffffff12}
.tn-success__stage{max-width:1440px;margin:auto;padding:26px 40px;box-sizing:border-box}
.tn-success.is-pinned .tn-success__stage{position:sticky;top:var(--pin-top,16px)}
.tn-success__top{margin-bottom:22px}.tn-success h2{font-weight:500;letter-spacing:-.045em;font-size:clamp(25px,3vw,42px)}
.tn-success__all{border:1px solid #ffffff25;padding:10px 16px;border-radius:30px;transition:background .25s}.tn-success__all:hover{background:#ffffff12}
.tn-success__track{border-radius:14px;gap:28px}.tn-success.is-pinned .tn-success__track{overflow-x:hidden;scroll-snap-type:none}
.tn-success__page{gap:14px;grid-template-rows:repeat(2,1fr)}
.tn-success__card{position:relative;border-radius:12px;background:#202426;border:1px solid #ffffff21;box-shadow:0 10px 24px #0002;isolation:isolate}
.tn-success__image{height:clamp(140px,calc((100svh - 330px)/2),220px)}
.tn-success__image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 20%,#080d1280 48%,#080d12f5 100%)}
.tn-success__image img{transition:transform .65s cubic-bezier(.2,.7,.2,1);filter:saturate(.88)}
.tn-success__copy{position:absolute;bottom:0;left:0;right:0;padding:14px;z-index:1;pointer-events:none}
.tn-success h3{font-size:14px;line-height:1.35;text-shadow:0 1px 8px #0008;min-height:38px}.tn-success time{color:#c3d2d8;font-size:9px}
.tn-success__arrow{z-index:2;width:30px;height:30px;border:1px solid #ffffff30;backdrop-filter:blur(12px);background:#0b101555;transition:transform .25s}
.tn-success__card:hover .tn-success__arrow{transform:rotate(45deg);background:#d5edf0;color:#102028}.tn-success__card:hover img{transform:scale(1.065)}
.tn-success__bottom{margin-top:20px}.tn-success__progress{max-width:none;background:#ffffff15;height:2px}.tn-success__progress span{background:linear-gradient(90deg,#688b98,#dafaff);box-shadow:0 0 12px #b7edff99}
.tn-success__controls button{border-radius:50%;height:38px;background:#ffffff05;border-color:#ffffff30}.tn-success__count{color:#d8e4e9}
@media(min-width:600px) and (max-width:989px){.tn-success__page{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:599px){.tn-success__stage{padding:22px 18px}.tn-success__page{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tn-success__top{align-items:center;margin-bottom:18px}.tn-success h2{font-size:26px;max-width:220px}.tn-success__all{font-size:10px;padding:8px 10px}.tn-success__image{height:clamp(155px,calc((100svh - 300px)/2),220px)}.tn-success__copy{padding:11px}.tn-success h3{font-size:13px;min-height:36px}.tn-success__controls{gap:10px}.tn-success__bottom{gap:20px}}
@media(max-width:319px){.tn-success__stage{padding:18px 12px}.tn-success__page{grid-template-columns:1fr}.tn-success h2{font-size:22px}.tn-success__image{height:145px}.tn-success__all{white-space:normal}}
@media(prefers-reduced-motion:reduce){.tn-success *{transition:none!important}.tn-success__card:hover img{transform:none}}

@media(max-width:599px){.tn-success__bottom{flex-direction:row-reverse}}