/* Standalone CSS 3D glass; the existing canvas keeps its background and headline. */
.compat-cube-stage{position:absolute;z-index:1;left:51.7%;top:48.8%;width:29vw;height:29vw;transform:translate(-50%,-50%);perspective:1100px;perspective-origin:50% 50%;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;isolation:auto}
.compat-cube-rotor{position:relative;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform;pointer-events:none}
.compat-cube-face{position:absolute;top:0;right:0;bottom:0;left:0;display:block;box-sizing:border-box;width:100%;height:100%;margin:0;padding:0;appearance:none;-webkit-appearance:none;border:1px solid rgba(238,244,255,.55);border-radius:7%;background:radial-gradient(ellipse at 12% 4%,rgba(225,234,255,.19),transparent 62%),linear-gradient(135deg,rgba(255,255,255,.18),rgba(35,39,47,.1) 36%,rgba(5,7,12,.25) 68%,rgba(220,230,255,.12));background-color:rgba(26,28,34,.2);box-shadow:inset 0 0 1px 1px rgba(255,255,255,.1),inset 12px 9px 26px rgba(255,255,255,.025),inset -8px -10px 26px rgba(0,0,0,.14);color:#fff;font-family:Poppins,"PingFang SC","Microsoft YaHei",sans-serif;text-align:center;line-height:1.35;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:auto;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent;outline-offset:5px}
.compat-cube-face::before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:1px solid rgba(255,255,255,.075);border-top-color:rgba(255,255,255,.28);border-left-color:rgba(255,255,255,.18);border-radius:6%;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.09),transparent 32%,transparent 74%,rgba(206,216,244,.06))}
.compat-cube-face::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 25px rgba(207,221,255,.035);transition:box-shadow .3s,border-color .3s}
.compat-cube-label{position:absolute;top:12%;right:4%;bottom:12%;left:4%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.compat-cube-label::before{content:"";position:absolute;top:-20%;right:-8%;bottom:-20%;left:-8%;z-index:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.68) 8%,rgba(0,0,0,.47) 37%,rgba(0,0,0,.16) 58%,transparent 73%);opacity:.9;transition:opacity .3s;pointer-events:none}
.compat-cube-label>span{position:relative;z-index:1;display:block;max-width:94%;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.compat-cube-label>span+span{margin-top:10px;margin-top:clamp(7px,1.1vw,15px)}
.compat-cube-number{font-size:10px;font-size:clamp(9px,.8vw,12px);font-weight:400;letter-spacing:.15em;color:#c7c7cc}
.compat-cube-title{font-size:22px;font-size:clamp(17px,1.85vw,31px);font-weight:500;line-height:1.2;letter-spacing:-.025em;overflow-wrap:break-word;word-wrap:break-word}
.compat-cube-detail{font-size:12px;font-size:clamp(9px,.95vw,14px);font-weight:400;line-height:1.6;letter-spacing:.015em;color:#e3e3e8;overflow-wrap:break-word;word-wrap:break-word}
.compat-cube-hint{font-size:10px;font-size:clamp(9px,.8vw,12px);line-height:1.5;color:#f4f4f6;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.compat-cube-face[data-hover=true],.compat-cube-face:focus{border-color:rgba(255,255,255,.85)}
.compat-cube-face[data-hover=true]::after,.compat-cube-face:focus::after{box-shadow:inset 0 0 28px rgba(218,229,255,.12)}
.compat-cube-face[data-hover=true] .compat-cube-label::before,.compat-cube-face:focus .compat-cube-label::before{opacity:1}
.compat-cube-face[data-hover=true] .compat-cube-hint,.compat-cube-face:focus .compat-cube-hint{opacity:1;transform:translateY(0)}
.compat-cube-face:focus{outline:2px solid #fff;outline-offset:5px}
.compat-cube-face:focus:not(:focus-visible){outline:none}
.compat-cube-dragging .compat-cube-face{cursor:grabbing}
.compat-cube-dragging .compat-cube-hint{opacity:0;transform:translateY(4px)}
.compat-cube-veil{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1001;background:#080808;opacity:0;pointer-events:none}
.compat-cube-entering .compat-cube-face,.compat-cube-entering .ui a,.compat-cube-entering .ui button{pointer-events:none!important}
@media(hover:none),(pointer:coarse){.compat-cube-face[data-front=true] .compat-cube-hint{opacity:1;transform:translateY(0)}}
@media(max-width:767px),(max-aspect-ratio:1/1){.compat-cube-stage{left:50%;top:45%;width:56vw;height:56vw}.compat-cube-label{top:10%;bottom:10%}.compat-cube-label>span+span{margin-top:9px}.compat-cube-number{font-size:9px;letter-spacing:.11em}.compat-cube-title{font-size:18px;font-size:clamp(15px,4.6vw,25px)}.compat-cube-detail{font-size:11px;font-size:clamp(9px,2.7vw,13px)}.compat-cube-hint{font-size:10px}}
@media(prefers-reduced-motion:reduce){.compat-cube-face::after,.compat-cube-label::before,.compat-cube-hint{transition:none}}