.ft-card{isolation:isolate;background:var(--color-surface);height:100%;transition:transform .7s var(--ease-expo), box-shadow .7s var(--ease-expo);border-radius:clamp(.9rem,1vw,1.1rem);flex-direction:column;display:flex;position:relative;overflow:hidden}.ft-card:before{content:"";z-index:0;pointer-events:none;opacity:0;background:radial-gradient(280px circle at var(--x,50%) var(--y,50%), #8cff3a14, transparent 70%);transition:opacity .5s;position:absolute;inset:0}.ft-card:after{content:"";z-index:3;pointer-events:none;border-radius:inherit;border:1px solid #f4f6ef17;transition:border-color .5s;position:absolute;inset:0}.ft-edge{z-index:4;pointer-events:none;border-radius:inherit;opacity:0;background:radial-gradient(220px circle at var(--x,50%) var(--y,0%), #8cff3ab3, transparent 70%);-webkit-mask-composite:xor;padding:1px;transition:opacity .5s;position:absolute;inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}@media (hover:hover){.ft-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px #000000f2}.ft-card:hover:before,.ft-card:hover .ft-edge{opacity:1}.ft-card:hover:after{border-color:#f4f6ef26}}@media (prefers-reduced-motion:reduce){.ft-card,.ft-card:hover{transition:none;transform:none}}.ft-canvas{--pt:calc(100cqw / 420);z-index:1;aspect-ratio:420/228;letter-spacing:-.01em;-webkit-user-select:none;user-select:none;direction:ltr;position:relative;overflow:hidden;container-type:inline-size}.ft-panel{border-radius:calc(var(--pt) * 22);background:linear-gradient(#181c15 0%,#131710 100%);position:absolute;box-shadow:inset 0 0 0 1px #f4f6ef12,inset 0 1px #ffffff0a}.ft-glass{-webkit-backdrop-filter:blur(14px)saturate(1.3);backdrop-filter:blur(14px)saturate(1.3);background:#0e110c9e;position:absolute;box-shadow:inset 0 0 0 1px #f4f6ef1f,inset 0 1px #ffffff14,0 10px 30px #00000059}.ft-fade{pointer-events:none;background:linear-gradient(180deg, #10130e00, var(--color-surface));height:34%;position:absolute;inset:auto 0 0}.ft-ruler{cursor:grab;touch-action:pan-y;border-radius:calc(var(--pt) * 16)}.ft-ruler:active{cursor:grabbing}.ft-ruler:focus-visible,.ft-mode:focus-visible{outline:2px solid var(--color-go);outline-offset:2px}
