.xcards{--xc-ease:cubic-bezier(.05, .61, .41, .95);flex-direction:column;gap:10px;height:640px;display:flex}@media (min-width:768px){.xcards{flex-direction:row;height:460px}}.xcard{--xc:var(--accent);isolation:isolate;color:#fff;text-align:left;min-width:0;min-height:64px;font:inherit;cursor:pointer;transition:flex-grow .65s var(--xc-ease), border-radius .5s var(--xc-ease), box-shadow .4s ease;background:#0b0b0e;border:0;border-radius:20px;flex:1;margin:0;padding:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14}@media (min-width:768px){.xcard{min-width:64px;min-height:0}}.xcard.is-active{border-radius:28px;flex-grow:7;box-shadow:inset 0 0 0 1px #ffffff24}@media (min-width:768px){.xcard.is-active{box-shadow:inset 0 0 0 1px #ffffff24,0 20px 50px #00000059}}.xcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.xcard__scene{background:radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--xc) 62%, transparent), transparent 62%), radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--xc) 28%, transparent), transparent 60%), linear-gradient(180deg, #16161b 0%, #08080a 100%);transform-origin:60% 40%;transition:transform .7s var(--xc-ease);position:absolute;inset:0;transform:scale(1.18)}.xcard.is-active .xcard__scene{transform:scale(1)}.xcard__grid{opacity:.35;background-image:linear-gradient(#ffffff14 1px,#0000 1px),linear-gradient(90deg,#ffffff14 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(80% 80% at 50% 0,#000 20%,#0000 75%);mask-image:radial-gradient(80% 80% at 50% 0,#000 20%,#0000 75%)}.xcard__orb{aspect-ratio:1;background:var(--xc);opacity:.55;filter:blur(60px);pointer-events:none;will-change:transform;border-radius:9999px;width:60%;position:absolute;top:-20%;right:-10%}.xcard__shade{height:60%;transition:transform .5s var(--xc-ease), opacity .5s ease;opacity:.7;background:linear-gradient(#0000,#00000059 55%,#000000d1);position:absolute;bottom:0;left:0;right:0;transform:translateY(35%)}.xcard.is-active .xcard__shade{opacity:1;transform:translateY(0)}.xcard__mock{-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .45s ease, transform .6s var(--xc-ease);pointer-events:none;background:#ffffff12;border:1px solid #ffffff24;border-radius:14px;padding:12px 12px 14px;transition-delay:0s;position:absolute;top:26px;left:24px;right:24px;transform:translateY(22px)scale(.96);box-shadow:0 20px 40px #00000059}.xcard.is-active .xcard__mock{opacity:1;transition-delay:.22s;transform:translateY(0)scale(1)}@media (min-width:768px){.xcard__mock{max-width:420px;top:28px;left:28px;right:28px}}.xcard__mock-chrome{gap:5px;margin-bottom:12px;display:flex}.xcard__mock-chrome span{background:#ffffff47;border-radius:9999px;width:6px;height:6px}.xcard__mock-bar{background:#ffffffc7;border-radius:9999px;height:8px}.xcard__mock-bar+.xcard__mock-bar{background:#ffffff52;height:6px;margin-top:7px}.xcard__mock-cta{background:var(--xc);width:64px;height:14px;box-shadow:0 0 18px color-mix(in srgb, var(--xc) 70%, transparent);border-radius:9999px;margin-top:10px;display:inline-block}.xcard__mock-row{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px;display:grid}.xcard__mock-row span{background:#ffffff17;border:1px solid #ffffff1a;border-radius:6px;height:30px}.xcard__status{z-index:2;opacity:0;transition:opacity .4s ease, transform .5s var(--xc-ease);color:#ffffffb3;position:absolute;top:18px;right:20px;transform:translateY(-6px)}.xcard.is-active .xcard__status{opacity:1;transition-delay:.3s;transform:translateY(0)}.xcard__label{z-index:2;transition:left .5s var(--xc-ease), right .5s var(--xc-ease), bottom .5s var(--xc-ease);align-items:flex-end;gap:14px;display:flex;position:absolute;bottom:12px;left:12px;right:12px}.xcard.is-active .xcard__label{bottom:24px;left:24px;right:24px}.xcard__icon{width:40px;height:40px;color:var(--xc);background:#fff;border-radius:9999px;flex:none;justify-content:center;align-items:center;display:flex;box-shadow:0 6px 18px #00000059}.xcard__info{flex-direction:column;gap:4px;min-width:0;padding-bottom:2px;display:flex}@media (min-width:768px){.xcard__info{flex:none;width:min(440px,52vw)}}.xcard__info>*{opacity:0;transition:left .5s var(--xc-ease), opacity .2s ease-out;position:relative;left:20px}.xcard.is-active .xcard__info>*{opacity:1;transition:left .5s var(--xc-ease), opacity .5s ease-out;transition-delay:.22s;left:0}.xcard.is-active .xcard__summary{transition-delay:.3s}.xcard.is-active .xcard__tags{transition-delay:.38s}.xcard__trade{letter-spacing:.08em;text-transform:uppercase;color:#ffffffb8;font-size:12px;font-weight:500}.xcard__title{font-family:var(--font-display);letter-spacing:-.02em;color:#fff;font-size:22px;font-weight:500;line-height:1.1}@media (min-width:768px){.xcard__title{font-size:26px}}.xcard__summary{color:#ffffffb8;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:48ch;font-size:14px;line-height:1.5;display:-webkit-box;overflow:hidden}@media (min-width:768px){.xcard__summary{-webkit-line-clamp:3}}.xcard__tags{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.xcard__tags span{letter-spacing:.04em;color:#ffffffd9;-webkit-backdrop-filter:blur(6px);white-space:nowrap;background:#ffffff1a;border:1px solid #ffffff24;border-radius:9999px;padding:4px 9px;font-size:11px;font-weight:500}@media (min-width:768px){.xcard:not(.is-active) .xcard__info{visibility:hidden}}@media (prefers-reduced-motion:reduce){.xcard,.xcard__scene,.xcard__shade,.xcard__mock,.xcard__status,.xcard__label,.xcard__info>*{transition:none}}