@layer app{.cards-page{--cards-green:#57d400;--cards-blue:#2d6ef4;--cards-gold:#c59a16;background:radial-gradient(circle at 8% 25%, #c9a2270f, transparent 24rem), var(--kpl-color-background);min-block-size:100vh}.cards-hero{border-block-end:var(--kpl-border-width) solid var(--kpl-color-border-subtle);background:linear-gradient(115deg,#ffffff08,#0000 34%),radial-gradient(circle at 73% 48%,#c9a22721,#0000 28rem),linear-gradient(160deg,#101010,#080808 62%);align-items:center;min-block-size:min(54rem,100svh - 4.5rem);display:grid;position:relative;overflow:hidden;&:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff07 1px,#0000 1px),linear-gradient(90deg,#ffffff07 1px,#0000 1px);background-size:5rem 5rem;position:absolute;inset:0;mask-image:linear-gradient(#000,#0000 92%)}}.cards-hero__glow{aspect-ratio:1;border:1px solid #c9a2271a;border-radius:50%;inline-size:38rem;position:absolute;inset-block-start:50%;inset-inline-end:-15rem;translate:0 -50%;box-shadow:0 0 0 5rem #c9a22706,0 0 0 10rem #c9a22705}.cards-hero__inner{z-index:1;align-items:center;gap:clamp(var(--kpl-space-7), 4vw, var(--kpl-space-10));padding-block:clamp(var(--kpl-space-9), 7vw, var(--kpl-space-12));grid-template-columns:minmax(24rem,.86fr) minmax(32rem,1.14fr);display:grid;position:relative}.cards-hero__copy{align-content:center;gap:var(--kpl-space-6);display:grid;& h1{letter-spacing:-.075em;max-inline-size:10ch;font-size:clamp(3.5rem,6.7vw,7.4rem);line-height:.87;& span{color:var(--kpl-color-brand-strong)}}}.cards-hero__lead{max-inline-size:39rem;color:var(--kpl-color-text-muted);font-size:clamp(var(--kpl-font-size-200), 1.5vw, var(--kpl-font-size-300));line-height:1.75}.cards-hero__actions{gap:var(--kpl-space-3);flex-wrap:wrap;display:flex;& .c-button span{font-size:1.15em}}.cards-hero__facts{border-block-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding-block-start:var(--kpl-space-5);display:grid;&>div{gap:var(--kpl-space-1);padding-inline:var(--kpl-space-4);display:grid;&:first-child{padding-inline-start:0}}&>div+div{border-inline-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle)}& dt{color:var(--kpl-color-text-muted);font-size:var(--kpl-font-size-50);letter-spacing:var(--kpl-letter-spacing-label);text-transform:uppercase;font-weight:800}& dd{color:var(--kpl-color-text-strong);font-size:var(--kpl-font-size-100);font-weight:800}}.cards-hero__animation{isolation:isolate;aspect-ratio:7/3;pointer-events:none;block-size:auto;min-inline-size:0;position:relative;&:before{z-index:-1;content:"";pointer-events:none;filter:blur(.2rem);background:radial-gradient(circle,#c9a22721,#0000 68%);border:1px solid #c9a2271a;border-radius:50%;position:absolute;inset:16% 2% 8%}&:after{z-index:-1;content:"";pointer-events:none;filter:blur(1.3rem);opacity:.8;background:#000;border-radius:50%;block-size:13%;position:absolute;inset-block-end:8%;inset-inline:9%}&.is-playing .cards-hero__card{opacity:0;transform:translate(calc(-50% + var(--fan-start-x)), 38%) rotate(0) scale(.7)}&.is-playing.is-revealed{& .cards-hero__card{animation:cards-hero-deal .82s var(--kpl-ease-emphasized) var(--fan-delay) both}& .cards-hero__fan:before{animation:.72s ease-out both cards-hero-flash}& .cards-hero__fan:after{animation:.94s ease-out 90ms both cards-hero-particles}}}.cards-hero__video-crop{z-index:1;aspect-ratio:7/3;border-radius:var(--kpl-radius-lg);-webkit-mask-composite:source-in;position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#0000 0%,#000 6% 94%,#0000 100%),linear-gradient(90deg,#0000 0%,#000 4% 96%,#0000 100%);mask-image:linear-gradient(#0000 0%,#000 6% 94%,#0000 100%),linear-gradient(90deg,#0000 0%,#000 4% 96%,#0000 100%);mask-composite:intersect}.cards-hero__case-poster,.cards-hero__case-canvas{aspect-ratio:7/3;object-fit:cover;mix-blend-mode:screen;filter:contrast(1.1)saturate(.92)brightness(1.04);opacity:1;block-size:auto;inline-size:100%;max-inline-size:none;display:block;translate:none}.cards-hero__case-poster{position:absolute;inset:0}.cards-hero__case-canvas[hidden],.cards-hero__case-poster[hidden]{display:none}.cards-hero__fan{z-index:3;position:absolute;inset:0;&:before{content:"";pointer-events:none;opacity:0;mix-blend-mode:screen;z-index:8;filter:blur(.55rem);background:linear-gradient(90deg,#0000,#ffe06e61,#0000),radial-gradient(#ffcd38e6,#0000 67%);border-radius:50%;block-size:18%;inline-size:74%;position:absolute;inset-block-start:67%;inset-inline-start:50%;transform:translate(-50%,-50%)scaleX(.2)}&:after{content:"";pointer-events:none;opacity:0;mix-blend-mode:screen;z-index:9;filter:drop-shadow(0 0 .4rem #ffcd38d9);background:radial-gradient(circle at 12% 64%,#ffde69e6 0 .12rem,#0000 .18rem),radial-gradient(circle at 26% 24%,#fffc 0 .1rem,#0000 .16rem),radial-gradient(circle at 42% 72%,#ffc928d9 0 .13rem,#0000 .19rem),radial-gradient(circle at 58% 20%,#ffeb9bd9 0 .1rem,#0000 .16rem),radial-gradient(circle at 73% 69%,#ffc928d9 0 .13rem,#0000 .19rem),radial-gradient(circle at 88% 35%,#ffffffbf 0 .1rem,#0000 .16rem);block-size:35%;inline-size:62%;position:absolute;inset-block-start:60%;inset-inline-start:50%;transform:translate(-50%,-20%)scale(.55)}}.cards-hero__card{z-index:var(--fan-depth);filter:drop-shadow(0 1.2rem .85rem #000000d1);opacity:1;block-size:auto;inline-size:clamp(4.75rem,8.5vw,8.75rem);transform:translate(calc(-50% + var(--fan-x)), calc(-50% + var(--fan-y))) rotate(var(--fan-rotation)) scale(var(--fan-scale));transform-origin:50% 115%;position:absolute;inset-block-start:75%;inset-inline-start:50%;&:first-child{--fan-x:-145%;--fan-y:-5%;--fan-start-x:-22%;--fan-rotation:-18deg;--fan-scale:.88;--fan-depth:4;--fan-delay:.36s}&:nth-child(2){--fan-x:-96%;--fan-y:-55%;--fan-start-x:-14%;--fan-rotation:-13deg;--fan-scale:.94;--fan-depth:5;--fan-delay:.24s}&:nth-child(3){--fan-x:-49%;--fan-y:-95%;--fan-start-x:-7%;--fan-rotation:-7deg;--fan-scale:1;--fan-depth:6;--fan-delay:80ms}&:nth-child(4){--fan-x:0%;--fan-y:-120%;--fan-start-x:0%;--fan-rotation:0deg;--fan-scale:1.08;--fan-depth:7;--fan-delay:0s}&:nth-child(5){--fan-x:47%;--fan-y:-95%;--fan-start-x:7%;--fan-rotation:7deg;--fan-scale:1;--fan-depth:6;--fan-delay:80ms}&:nth-child(6){--fan-x:94%;--fan-y:-55%;--fan-start-x:14%;--fan-rotation:13deg;--fan-scale:.94;--fan-depth:5;--fan-delay:.24s}&:nth-child(7){--fan-x:141%;--fan-y:-5%;--fan-start-x:22%;--fan-rotation:18deg;--fan-scale:.88;--fan-depth:4;--fan-delay:.36s}}.cards-hero__animation-label{z-index:4;align-items:center;gap:var(--kpl-space-2);color:#ffffff85;inline-size:max-content;max-inline-size:88%;font-size:var(--kpl-font-size-50);letter-spacing:.11em;text-align:center;text-transform:uppercase;font-weight:800;display:flex;position:absolute;inset-block-end:0;inset-inline-start:50%;translate:-50%;& span{aspect-ratio:1;background:var(--kpl-color-brand-strong);border-radius:50%;flex:none;inline-size:.4rem;box-shadow:0 0 .75rem #c9a227b3}}@keyframes cards-hero-deal{0%{opacity:0;filter:blur(.45rem)brightness(1.8)drop-shadow(0 .4rem .5rem #ffcc35b8);transform:translate(calc(-50% + var(--fan-start-x)), 38%) rotate(0) scale(.7)}38%{opacity:.65}68%{opacity:1;filter:blur(.12rem)brightness(1.16)drop-shadow(0 1rem .8rem #000000c2)}to{opacity:1;filter:drop-shadow(0 1.2rem .85rem #000000d1);transform:translate(calc(-50% + var(--fan-x)), calc(-50% + var(--fan-y))) rotate(var(--fan-rotation)) scale(var(--fan-scale))}}@keyframes cards-hero-flash{0%{opacity:0;transform:translate(-50%,-50%)scaleX(.16)}32%{opacity:.9}to{opacity:0;transform:translate(-50%,-50%)scaleX(1.2)}}@keyframes cards-hero-particles{0%{opacity:0;transform:translate(-50%,18%)scale(.48)}28%{opacity:.95}to{opacity:0;transform:translate(-50%,-54%)scale(1.15)}}@media (width<74rem){.cards-hero{min-block-size:auto}.cards-hero:after{display:none}.cards-hero__inner{grid-template-columns:minmax(0,1fr)}.cards-hero__copy{max-inline-size:50rem}.cards-hero__animation{justify-self:center;block-size:auto;inline-size:min(100%,49rem)}}@media (width<48rem){.cards-hero__inner{padding-block-start:var(--kpl-space-9)}.cards-hero__copy h1{font-size:clamp(3.15rem,15vw,5.6rem)}.cards-hero__animation{block-size:auto;margin-block-start:calc(var(--kpl-space-4) * -1)}.cards-hero__animation-label{letter-spacing:.07em;max-inline-size:100%;font-size:.64rem}.cards-hero__facts{grid-template-columns:minmax(0,1fr)}.cards-hero__facts>div,.cards-hero__facts>div:first-child{padding-block:var(--kpl-space-3);grid-template-columns:minmax(0,1fr) auto;align-items:baseline;padding-inline:0}.cards-hero__facts>div+div{border-block-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle);border-inline-start:0}}@media (prefers-reduced-motion:reduce){.cards-hero__card{transition:none;animation:none}}.cards-page__body{gap:clamp(var(--kpl-space-10), 10vw, 9rem);padding-block:clamp(var(--kpl-space-10), 9vw, 8rem);display:grid}.cards-rules,.cards-deck{gap:clamp(var(--kpl-space-7), 5vw, var(--kpl-space-10));scroll-margin-block-start:6.5rem;display:grid}.cards-section-heading{align-items:end;gap:var(--kpl-space-9);grid-template-columns:minmax(0,1.15fr) minmax(20rem,.65fr);display:grid;&>div{gap:var(--kpl-space-3);display:grid}& h2{letter-spacing:-.06em;max-inline-size:16ch;font-size:clamp(2.5rem,5vw,5.2rem)}&>p{max-inline-size:38rem;color:var(--kpl-color-text-muted);line-height:var(--kpl-line-height-loose)}&--deck{border-block-end:var(--kpl-border-width) solid var(--kpl-color-border-subtle);padding-block-end:var(--kpl-space-8)}}.cards-steps{border-block:var(--kpl-border-width) solid var(--kpl-color-border-subtle);grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid;& li{align-content:start;gap:var(--kpl-space-8);min-block-size:16rem;padding:var(--kpl-space-6);display:grid;position:relative;&>span{color:var(--kpl-color-brand-strong);font-family:var(--kpl-font-family-heading);font-size:var(--kpl-font-size-100);font-weight:800}&>div{gap:var(--kpl-space-3);display:grid}}& li+li{border-inline-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle)}& strong{color:var(--kpl-color-text-strong);font-family:var(--kpl-font-family-heading);font-size:var(--kpl-font-size-300)}& p{color:var(--kpl-color-text-muted);font-size:var(--kpl-font-size-100);line-height:var(--kpl-line-height-loose)}}.cards-timing{gap:clamp(var(--kpl-space-7), 5vw, var(--kpl-space-10));padding:clamp(var(--kpl-space-6), 5vw, var(--kpl-space-9));background:radial-gradient(circle at 10% 20%, #c9a22726, transparent 20rem), linear-gradient(145deg, #18150e, var(--kpl-color-surface));box-shadow:var(--kpl-shadow-lg);grid-template-columns:minmax(0,1.1fr) minmax(22rem,.9fr);display:grid;position:relative;overflow:hidden;&:after{aspect-ratio:1;content:"";pointer-events:none;border:1px solid #c9a22724;border-radius:50%;inline-size:19rem;position:absolute;inset-block-start:-7rem;inset-inline-end:-7rem;box-shadow:0 0 0 3rem #c9a22706}}.cards-timing__copy{z-index:1;align-content:center;gap:var(--kpl-space-4);display:grid;position:relative;& h3{max-inline-size:17ch;font-size:clamp(var(--kpl-font-size-600), 4vw, 3.7rem);letter-spacing:-.05em}&>p:last-child{max-inline-size:58ch;color:var(--kpl-color-text-muted)}}.cards-timing__examples{z-index:1;gap:var(--kpl-space-3);display:grid;position:relative}.cards-timing__example{align-items:center;gap:var(--kpl-space-4);padding:var(--kpl-space-5);border:var(--kpl-border-width) solid var(--kpl-color-border-subtle);border-radius:var(--kpl-radius-lg);background:#0000003d;grid-template-columns:auto minmax(0,1fr);display:grid;&>span{aspect-ratio:1;inline-size:3rem;font-size:var(--kpl-font-size-400);border-radius:50%;place-items:center;font-weight:900;display:grid}&--yes>span{background:color-mix(in srgb, var(--kpl-color-success) 16%, transparent);color:var(--kpl-color-success)}&--no>span{background:color-mix(in srgb, var(--kpl-color-danger) 14%, transparent);color:var(--kpl-color-danger)}& div{gap:var(--kpl-space-1);display:grid}& strong{color:var(--kpl-color-text-strong)}& p{color:var(--kpl-color-text-muted);font-size:var(--kpl-font-size-100)}}@media (width<74rem){.cards-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.cards-steps li:nth-child(3){border-block-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle);border-inline-start:0}.cards-steps li:nth-child(4){border-block-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle)}.cards-timing{grid-template-columns:minmax(0,1fr)}}@media (width<48rem){.cards-section-heading{align-items:start;gap:var(--kpl-space-4);grid-template-columns:minmax(0,1fr)}.cards-steps{grid-template-columns:minmax(0,1fr)}.cards-steps li{gap:var(--kpl-space-5);grid-template-columns:auto minmax(0,1fr);min-block-size:0}.cards-steps li+li,.cards-steps li:nth-child(3),.cards-steps li:nth-child(4){border-block-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle);border-inline-start:0}}.cards-level-nav{border:var(--kpl-border-width) solid var(--kpl-color-border-subtle);border-radius:var(--kpl-radius-xl);background:var(--kpl-color-surface);box-shadow:var(--kpl-shadow-md);grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:stretch;display:grid}.cards-level-nav__label{min-inline-size:10rem;padding:var(--kpl-space-5);color:var(--kpl-color-text-muted);font-size:var(--kpl-font-size-50);letter-spacing:var(--kpl-letter-spacing-label);text-align:center;text-transform:uppercase;place-items:center;font-weight:800;display:grid}.cards-level-nav a{--level-color:var(--kpl-color-brand);align-items:center;gap:var(--kpl-space-3);min-block-size:5.5rem;padding:var(--kpl-space-5);border-inline-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle);color:inherit;transition:background-color var(--kpl-duration-normal) var(--kpl-ease-standard);grid-template-columns:auto minmax(0,1fr) auto;text-decoration:none;display:grid;position:relative;&:after{background:var(--level-color);content:"";block-size:2px;transition:inset-inline var(--kpl-duration-normal) var(--kpl-ease-standard);position:absolute;inset-block-end:-1px;inset-inline:45%}&:hover{background:color-mix(in srgb, var(--level-color) 6%, transparent)}&:is(:hover,:focus-visible):after{inset-inline:12%}&>span{color:var(--level-color);font-family:var(--kpl-font-family-heading);font-size:var(--kpl-font-size-50);font-weight:800}&>strong{color:var(--kpl-color-text-strong);font-family:var(--kpl-font-family-heading)}&>small{color:var(--kpl-color-text-muted);font-size:var(--kpl-font-size-50)}}.cards-level-nav a[data-tone=green],.cards-level[data-tone=green]{--level-color:var(--cards-green)}.cards-level-nav a[data-tone=blue],.cards-level[data-tone=blue]{--level-color:var(--cards-blue)}.cards-level-nav a[data-tone=gold],.cards-level[data-tone=gold]{--level-color:var(--cards-gold)}.cards-level{--level-color:var(--kpl-color-brand);gap:var(--kpl-space-7);scroll-margin-block-start:6.5rem;display:grid;&+&{border-block-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle);padding-block-start:clamp(var(--kpl-space-9), 7vw, var(--kpl-space-12))}}.cards-level__header{align-items:center;gap:var(--kpl-space-6);grid-template-columns:auto minmax(0,1fr);display:grid;&>div:last-child{gap:var(--kpl-space-2);display:grid}& p{color:var(--level-color);font-size:var(--kpl-font-size-50);letter-spacing:var(--kpl-letter-spacing-label);text-transform:uppercase;font-weight:900}& h3{font-size:clamp(var(--kpl-font-size-500), 3vw, var(--kpl-font-size-700))}& span{max-inline-size:58ch;color:var(--kpl-color-text-muted);font-size:var(--kpl-font-size-100)}}.cards-level__number{aspect-ratio:1;border:1px solid color-mix(in srgb, var(--level-color) 45%, transparent);background:color-mix(in srgb, var(--level-color) 8%, transparent);inline-size:4.5rem;color:var(--level-color);font-family:var(--kpl-font-family-heading);border-radius:50%;place-items:center;font-weight:800;display:grid}.cards-grid{--kpl-grid-min:22rem}.action-card{background:linear-gradient(145deg, color-mix(in srgb, var(--level-color) 6%, transparent), transparent 36%), var(--kpl-color-surface);box-shadow:var(--kpl-shadow-md);transition:border-color var(--kpl-duration-slow) var(--kpl-ease-standard), translate var(--kpl-duration-slow) var(--kpl-ease-standard), box-shadow var(--kpl-duration-slow) var(--kpl-ease-standard);grid-template-rows:auto 1fr;display:grid;position:relative;overflow:hidden;&:hover{border-color:color-mix(in srgb, var(--level-color) 44%, transparent);box-shadow:0 2.4rem 4rem -2rem color-mix(in srgb, var(--level-color) 32%, black);translate:0 -.35rem}}.action-card__visual{min-block-size:26rem;padding:var(--kpl-space-7) var(--kpl-space-5) var(--kpl-space-4);border-block-end:var(--kpl-border-width) solid var(--kpl-color-border-subtle);background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--level-color) 16%, transparent), transparent 48%), linear-gradient(135deg, #ffffff06, transparent), #0c0c0c;place-items:center;display:grid;position:relative;overflow:hidden;&:before{content:"";transition:translate .6s var(--kpl-ease-standard);background-image:linear-gradient(125deg,#0000 40%,#ffffff0b 50%,#0000 60%);position:absolute;inset:0;translate:-100%;.action-card:hover &{translate:100%}}& img{z-index:1;filter:drop-shadow(0 1.5rem 1.2rem #0000009e);block-size:auto;inline-size:min(76%,17rem);transition:transform var(--kpl-duration-slow) var(--kpl-ease-emphasized);position:relative;transform:rotate(-1deg);.action-card:hover &{transform:translateY(-.45rem)rotate(1deg)scale(1.025)}}}.action-card__body{align-content:start;gap:var(--kpl-space-5);padding:var(--kpl-space-6);display:grid}.action-card__heading{gap:var(--kpl-space-2);display:grid;&>span{color:var(--level-color);font-size:var(--kpl-font-size-50);letter-spacing:var(--kpl-letter-spacing-label);text-transform:uppercase;font-weight:900}& h4{font-size:clamp(var(--kpl-font-size-500), 3vw, var(--kpl-font-size-600))}}.action-card__effect{min-block-size:4.8rem;color:var(--kpl-color-text);line-height:var(--kpl-line-height-loose)}.action-card__meta{border-block-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle);margin:0;display:grid;&>div{gap:var(--kpl-space-4);padding-block:var(--kpl-space-3);grid-template-columns:5.5rem minmax(0,1fr);display:grid}&>div+div{border-block-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle)}& dt{color:var(--kpl-color-text-muted);font-size:var(--kpl-font-size-50);text-transform:uppercase;font-weight:800}& dd{color:var(--kpl-color-text-strong);font-size:var(--kpl-font-size-100);font-weight:700}}.cards-finale{align-items:end;gap:var(--kpl-space-8);padding:clamp(var(--kpl-space-7), 6vw, var(--kpl-space-10));box-shadow:var(--kpl-shadow-lg);background:linear-gradient(105deg,#c9a22729,#0000 42%),linear-gradient(145deg,#1c180e,#101010);grid-template-columns:minmax(0,1fr) auto;display:grid;position:relative;overflow:hidden;&:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff0b,#0000);block-size:220%;inline-size:8rem;position:absolute;inset-block-start:-60%;inset-inline-end:12%;rotate:22deg}&>div{gap:var(--kpl-space-4);display:grid}& h2{max-inline-size:19ch;font-size:clamp(var(--kpl-font-size-600), 4vw, 4rem);letter-spacing:-.055em}& p:last-child{max-inline-size:58ch;color:var(--kpl-color-text-muted)}}@media (width<74rem){.cards-level-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.cards-level-nav__label{display:none}.cards-level-nav a:first-of-type{border-inline-start:0}}@media (width<48rem){.cards-level-nav{grid-template-columns:minmax(0,1fr);overflow:hidden}.cards-level-nav a,.cards-level-nav a:first-of-type{border-block-start:var(--kpl-border-width) solid var(--kpl-color-border-subtle);border-inline-start:0}.cards-level-nav a:first-of-type{border-block-start:0}.cards-level__header{align-items:start}.action-card__visual{min-block-size:22rem}.cards-finale{grid-template-columns:minmax(0,1fr);align-items:start}.cards-finale .c-button{inline-size:100%}}@media (prefers-reduced-motion:reduce){.action-card,.action-card__visual:before,.action-card__visual img{transition:none;animation:none}}}