.card-pinwheel{--card-pinwheel-size:680px;--card-pinwheel-reach:160px;--card-pinwheel-hover-out:28px;--card-pinwheel-shadow-blur:20px;--card-pinwheel-shadow-opacity:.59;--card-pinwheel-shadow-scale:1;width:var(--card-pinwheel-size);height:var(--card-pinwheel-size);justify-content:center;align-items:center;display:flex;position:relative}.card-pinwheel__iso{width:100%;height:100%;position:relative;transform:rotate(-45deg)}.card-pinwheel__slot{--slot-hover:0px;--shadow-hover-x:0px;--shadow-cast-y:0px;--slot-dx:0;--slot-dy:0;--shadow-hover-dir:1;width:280px;height:176px;margin-top:-88px;margin-left:-140px;position:absolute;top:50%;left:50%;translate:0;rotate:none}.card-pinwheel__slot--top{--slot-dy:-1;rotate:90deg}.card-pinwheel__slot--right{--slot-dx:1;--shadow-hover-dir:-1}.card-pinwheel__slot--bottom{--slot-dy:1;--shadow-hover-dir:-1;rotate:90deg}.card-pinwheel__slot--left{--slot-dx:-1;--shadow-hover-dir:1}.card-pinwheel__slot--visual,.card-pinwheel__slot--hit-dest{translate:calc(var(--slot-dx) * (var(--card-pinwheel-reach) + var(--slot-hover))) calc(var(--slot-dy) * (var(--card-pinwheel-reach) + var(--slot-hover)))}.card-pinwheel__slot--hit-rest{translate:calc(var(--slot-dx) * var(--card-pinwheel-reach)) calc(var(--slot-dy) * var(--card-pinwheel-reach))}.card-pinwheel__slot--visual{pointer-events:none}.card-pinwheel__slot--hit{pointer-events:auto;z-index:3}.card-pinwheel__slot--hit-dest{--slot-hover:var(--card-pinwheel-hover-out)}.card-pinwheel__slot--above.card-pinwheel__slot--visual{z-index:2}.card-pinwheel__slot--above.card-pinwheel__slot--hit{z-index:4}.card-pinwheel__shell{border-radius:var(--radius-2xl);-webkit-user-select:none;user-select:none;width:100%;height:100%;position:relative}.card-pinwheel__shell--rim{box-shadow:inset 0 0 0 1px #ffffff4d,0 0 0 1px #0000001a}.card-pinwheel__shadow-mask{pointer-events:none;z-index:0;border-radius:var(--radius-2xl);position:absolute;inset:0;overflow:hidden}.card-pinwheel__shadow{pointer-events:none;z-index:0;border-radius:var(--radius-2xl);opacity:var(--card-pinwheel-shadow-opacity);filter:blur(var(--card-pinwheel-shadow-blur));transform-origin:var(--shadow-origin,center);transform:translate(calc(var(--shadow-x,0px) + var(--shadow-hover-x)), calc(var(--shadow-y,0px) + var(--shadow-cast-y))) scale(var(--card-pinwheel-shadow-scale));background:#000;position:absolute;inset:0}.card-pinwheel__face{z-index:10;border-radius:var(--radius-2xl);width:100%;height:100%;position:relative;overflow:hidden}.card-pinwheel__slot--hit:focus{outline:none}:is(.card-pinwheel:has(.card-pinwheel__slot--hit-rest.card-pinwheel__slot--top:focus-visible) .card-pinwheel__slot--visual.card-pinwheel__slot--top .card-pinwheel__shell,.card-pinwheel:has(.card-pinwheel__slot--hit-rest.card-pinwheel__slot--right:focus-visible) .card-pinwheel__slot--visual.card-pinwheel__slot--right .card-pinwheel__shell,.card-pinwheel:has(.card-pinwheel__slot--hit-rest.card-pinwheel__slot--bottom:focus-visible) .card-pinwheel__slot--visual.card-pinwheel__slot--bottom .card-pinwheel__shell,.card-pinwheel:has(.card-pinwheel__slot--hit-rest.card-pinwheel__slot--left:focus-visible) .card-pinwheel__slot--visual.card-pinwheel__slot--left .card-pinwheel__shell){outline:2px solid var(--primary);outline-offset:3px}@media (prefers-reduced-motion:no-preference){.card-pinwheel__slot--visual{transition:translate .38s cubic-bezier(.22,1,.36,1)}.card-pinwheel__shadow{transition:transform .38s cubic-bezier(.22,1,.36,1),filter .38s cubic-bezier(.22,1,.36,1),opacity .38s cubic-bezier(.22,1,.36,1)}:is(.card-pinwheel:has(.card-pinwheel__slot--hit.card-pinwheel__slot--top:is(:hover,:focus-visible)) .card-pinwheel__slot--visual.card-pinwheel__slot--top,.card-pinwheel:has(.card-pinwheel__slot--hit.card-pinwheel__slot--right:is(:hover,:focus-visible)) .card-pinwheel__slot--visual.card-pinwheel__slot--right,.card-pinwheel:has(.card-pinwheel__slot--hit.card-pinwheel__slot--bottom:is(:hover,:focus-visible)) .card-pinwheel__slot--visual.card-pinwheel__slot--bottom,.card-pinwheel:has(.card-pinwheel__slot--hit.card-pinwheel__slot--left:is(:hover,:focus-visible)) .card-pinwheel__slot--visual.card-pinwheel__slot--left){--slot-hover:var(--card-pinwheel-hover-out);--shadow-hover-x:calc(var(--shadow-hover-dir) * var(--card-pinwheel-hover-out))}:is(.card-pinwheel:has(.card-pinwheel__slot--hit.card-pinwheel__slot--top:is(:hover,:focus-visible)) .card-pinwheel__slot--visual.card-pinwheel__slot--left,.card-pinwheel:has(.card-pinwheel__slot--hit.card-pinwheel__slot--right:is(:hover,:focus-visible)) .card-pinwheel__slot--visual.card-pinwheel__slot--top,.card-pinwheel:has(.card-pinwheel__slot--hit.card-pinwheel__slot--bottom:is(:hover,:focus-visible)) .card-pinwheel__slot--visual.card-pinwheel__slot--right,.card-pinwheel:has(.card-pinwheel__slot--hit.card-pinwheel__slot--left:is(:hover,:focus-visible)) .card-pinwheel__slot--visual.card-pinwheel__slot--bottom){--shadow-cast-y:calc(-1 * var(--shadow-hover-dir) * var(--card-pinwheel-hover-out))}}
.card-pinwheel-demo{--primary:#ff2126;--primary-foreground:#fff;--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);width:calc(100% + 3rem);height:min(36rem,70dvh);margin:-1.5rem;position:relative;container-type:size}@supports (color:lab(0% 0 0)){.card-pinwheel-demo{--primary:lab(55.5426% 77.9335 57.6416);--primary-foreground:lab(100% 0 0)}}.card-pinwheel-demo__fit{width:680px;height:680px;transform:scale(min(1, calc(100cqi / 680px), calc(100cqb / 680px)));transform-origin:50%;margin-top:-340px;margin-left:-340px;position:absolute;top:50%;left:50%}.dialkit-panel[data-position=top-right] .dialkit-panel-inner:not([data-collapsed=true]){overscroll-behavior:contain;scrollbar-width:thin;max-height:calc(100dvh - 32px)!important;overflow:hidden auto!important}.dialkit-panel[data-position=top-right] .dialkit-panel-inner:not([data-collapsed=true])::-webkit-scrollbar{width:8px;display:block}