:root{--card-front-bg:#fff;--card-back-bg:#fff;--card-mid-bg:#ffffff;--card-mid-border:rgba(0,0,0,0.1);--card-line-bg:black;--card-radius:12px;--highlighter-blur:15px;--highlighter-opacity:0.1}.container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.card{position:relative;width:var(--card-width,342px);height:var(--card-height,216px);border-radius:var(--card-radius);box-shadow:2px 2px 4px rgba(0,0,0,.2);will-change:transform;transform-style:preserve-3d;transition:transform .3s ease}.card-front{width:100%;height:100%;background-color:var(--card-front-bg);z-index:20;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.card-front,.card-mid{position:absolute;border-radius:var(--card-radius);will-change:transform}.card-mid{width:calc(100% - 2px);height:calc(100% - 2px);left:0;top:0;background:var(--card-mid-bg);border:1px solid var(--card-mid-border);transform:translateZ(-2px) scale(1.005)}.card-back{position:absolute;width:100%;height:100%;z-index:10;overflow:hidden;background:var(--card-back-bg);border-radius:var(--card-radius);-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(-4px) scale(1.001) rotateY(180deg);will-change:transform}.card-line{position:absolute;top:25px;height:68px;left:0;right:0;background:var(--card-line-bg)}.highlight-line{position:absolute;left:calc(50% - 150px);top:-500px;height:1280px;width:300px;z-index:100;background-color:rgba(255,255,255,var(--highlighter-opacity));filter:blur(var(--highlighter-blur));will-change:transform}.dimmer{position:absolute;left:0;right:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:40;opacity:0;transition:opacity .3s ease}.card-back>:not(.highlight-line):not(.dimmer):not(.card-line),.card-front>:not(.highlight-line):not(.dimmer){position:relative;z-index:30;width:100%;height:100%;display:flex;align-items:center;justify-content:center}