@layer properties;@layer components{.cd_board{display:grid;gap:calc(var(--spacing, .25rem)*2);margin-inline:auto;width:100%;@media (width >= 40rem){gap:calc(var(--spacing, .25rem)*3)}grid-template-columns:repeat(var(--cd_columns,4),1fr);max-width:calc(var(--cd_columns, 4)*7rem)}.cd_card{aspect-ratio:1;cursor:pointer;perspective:600px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.cd_card[state=matched]{cursor:default}.cd_card-inner{inset:calc(var(--spacing, .25rem)*0);position:absolute;transition-duration:var(--tw-duration,var(--default-transition-duration,.3s));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));--tw-duration:300ms;transform-style:preserve-3d;transition-duration:.3s}.cd_card[state=matched] .cd_card-inner,.cd_card[state=open] .cd_card-inner{transform:rotateY(180deg)}.cd_card-face{align-items:center;backface-visibility:hidden;border-style:var(--tw-border-style);border-width:1px;display:flex;inset:calc(var(--spacing, .25rem)*0);justify-content:center;position:absolute}.cd_card-face--back{background-color:var(--color-gray-200,#ccc);border-color:var(--color-gray-700,#4d4d4d);color:var(--color-gray-400,#999);&:where(.dark,.dark *){border-color:var(--color-gray-300,#b3b3b3)}&:where(.dark,.dark *){background-color:var(--color-gray-800,#333)}&:where(.dark,.dark *){color:var(--color-gray-600,#666)}}.cd_card[state=closed]:hover .cd_card-face--back{border-color:var(--color-candir-500,var(--color-spring-500));color:var(--color-candir-500,var(--color-spring-500))}.cd_card-face--front{background-color:var(--color-gray-100,#e6e6e6);border-color:var(--color-gray-700,#4d4d4d);transform:rotateY(180deg);&:where(.dark,.dark *){border-color:var(--color-gray-300,#b3b3b3)}&:where(.dark,.dark *){background-color:var(--color-gray-900,#1a1a1a)}}.cd_card[state=matched] .cd_card-face--front{opacity:60%}.cd_card-face i{font-size:clamp(1.5rem,9vw,3.5rem)}.cd_board[columns="6"] .cd_card-face i,.cd_board[columns="7"] .cd_card-face i{font-size:clamp(1.25rem,7vw,3rem)}}@property --tw-duration{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-duration:initial;--tw-border-style:solid}}}