.cc{position:relative}.cc__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem}.cc__heading{min-width:0;flex:1 1 32rem}.cc__controls{display:flex;flex:none;align-items:center;justify-content:flex-end;gap:.75rem;margin-left:auto}.cc__note{margin:0 .5rem 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--brand-slate))}.cc__btn{display:inline-flex;width:3.25rem;height:3.25rem;flex:none;align-items:center;justify-content:center;border-radius:9999px;border:1px solid hsl(var(--brand-line));background:#fff;color:hsl(var(--brand-ink));box-shadow:0 12px 26px -16px #08172b80;transition:transform .25s var(--ease-out-expo, ease-out),background .2s ease,box-shadow .25s ease}.cc__btn:hover{transform:translateY(-2px);box-shadow:0 18px 32px -16px #08172b8c}.cc__btn:focus-visible{outline:3px solid hsl(189 94% 43%);outline-offset:3px}.cc__btn--primary{border-color:transparent;background:linear-gradient(135deg,hsl(var(--brand-blue)),#06a1bc);color:#fff}.cc__track{display:flex;gap:clamp(1rem,2.4vw,1.75rem);margin-top:1.5rem;margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:1.5rem max(16px,env(safe-area-inset-left,0px)) 2.5rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:max(16px,env(safe-area-inset-left,0px));scrollbar-width:thin;scrollbar-color:hsl(var(--brand-blue) / .4) transparent;cursor:grab;perspective:1600px}.cc__track:focus-visible{outline:3px solid hsl(189 94% 43%);outline-offset:-3px;border-radius:1rem}.cc__track.is-dragging{cursor:grabbing;scroll-snap-type:none}.cc__track.is-dragging .cc__card{pointer-events:none}@media(min-width:1024px){.cc__track{margin-inline:0;padding-inline:.25rem;scroll-padding-inline:.25rem}}.cc__item{--p: 0;--a: 0;flex:none;width:clamp(15rem,23vw,21rem);scroll-snap-align:start;transform-style:preserve-3d}.cc__card{position:relative;display:block;border-radius:1.4rem;overflow:hidden;background:#071427;box-shadow:0 0 0 1px #08172b14,0 40px 70px -40px #08172ba6;transform:rotateY(calc(var(--p) * -24deg)) translateZ(calc(var(--a) * -60px)) scale(calc(1 - var(--a) * .04));transform-origin:center;transition:transform .5s var(--ease-out-expo, ease-out),box-shadow .4s ease;will-change:transform}.cc__card:hover,.cc__card:focus-visible{transform:rotateY(0) translateY(-8px) scale(1.02);box-shadow:0 0 0 2px #07b6d5b3,0 50px 80px -40px #08172bb3}.cc__card:focus-visible{outline:none}.cc__screen{position:relative;display:block;aspect-ratio:10 / 15;overflow:hidden;container-type:size;background:#e4eaf1 no-repeat center top / 100% auto}.cc__screen img{position:absolute;inset:0 0 auto;display:block;width:100%;height:auto;max-width:none;transition:transform 1.2s var(--ease-out-expo, ease-out)}.cc__card:hover .cc__screen img,.cc__card:focus-visible .cc__screen img{transform:translateY(calc(-100% + 100cqh));transition:transform 7s cubic-bezier(.45,0,.4,1) .15s}.cc__screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(calc(100deg + var(--p) * 30deg),hsl(0 0% 100% / .16),transparent 40%,transparent 70%,hsl(215 68% 10% / .12))}.cc__hint{position:absolute;left:50%;bottom:1rem;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;padding:.55rem .95rem;border-radius:9999px;background:#071427d9;color:#fff;font-size:.8125rem;font-weight:600;translate:-50% .5rem;opacity:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .25s ease,translate .3s var(--ease-out-expo, ease-out)}.cc__card:hover .cc__hint,.cc__card:focus-visible .cc__hint{opacity:1;translate:-50% 0}.cc__name{margin:1.1rem 0 0;font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:hsl(var(--brand-ink))}.cc__meta{margin:.35rem 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--brand-slate))}.cc--dark .cc__note,.cc--dark .cc__meta{color:#e1e7efb3}.cc--dark .cc__name{color:#fff}.cc--dark .cc__btn:not(.cc__btn--primary){background:#ffffff14;border-color:#fff3;color:#fff}.dark .cc__btn:not(.cc__btn--primary){background:hsl(var(--brand-mist));color:#fff}.dark .cc__name{color:#fff}@media(max-width:639px){.cc__note{display:none}.cc__item{width:min(78vw,18rem)}}@media(prefers-reduced-motion:reduce){.cc__card,.cc__screen img,.cc__hint,.cc__btn{transition:none}.cc__card,.cc__card:hover,.cc__card:focus-visible{transform:none}.cc__card:hover .cc__screen img,.cc__card:focus-visible .cc__screen img{transform:none}}
