:root{font-family:Roboto Condensed,Arial Narrow,system-ui,sans-serif;color:#fff;background:#36393e;font-synthesis:none;--demo-tilt-factor: 1;--demo-shine: 1;--demo-glare: 1;--demo-scale: 1;--demo-foil-brightness: .8;--card-aspect: .718;--card-radius: 4.55% / 3.5%;--card-edge: hsl(47 100% 78%);--card-back: hsl(205 100% 25%);--card-glow: hsl(175 100% 90%)}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:#36393e}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden;background:#36393e}button,input{font:inherit}main{min-height:100svh;width:min(1310px,calc(100% - 40px));margin:0 auto;padding:max(42px,env(safe-area-inset-top)) 0 max(24px,env(safe-area-inset-bottom))}.intro{max-width:1260px;margin:0 auto clamp(26px,5vh,48px)}.intro h1{margin:0 0 8px;font-size:clamp(1.7rem,2.5vw,2.15rem);line-height:1.08}.intro p{margin:3px 0;font-size:clamp(1rem,1.45vw,1.3rem);font-style:italic;line-height:1.48}.intro strong{display:inline;padding:0 .28em .03em;border-radius:3px;color:#fff;background:#008b91;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone}.card-stage{display:grid;place-items:center;width:100%;padding:8px 0 16px}footer{display:flex;justify-content:center;margin-top:clamp(24px,5vh,46px);color:#aeb5bd;font-size:.86rem;text-align:center}.card{position:relative;width:min(86vw,386px);aspect-ratio:var(--card-aspect);pointer-events:none;z-index:calc(var(--card-scale) * 2);-webkit-transform:translate3d(0,0,.01px);transform:translateZ(.01px);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform,visibility,z-index}.card,.card *{outline:1px solid transparent}.card.interacting{z-index:calc(var(--card-scale) * 120)}.card.active{z-index:500}.card__translater,.card__rotator{width:100%;height:100%;display:grid;perspective:600px;-webkit-transform-origin:center;transform-origin:center;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform,box-shadow;border-radius:var(--card-radius)}.card__translater{--translate-z: calc(var(--card-scale) * 150px + .01px);position:relative;-webkit-transform:translate3d(var(--translate-x),var(--translate-y),var(--translate-z)) scale(calc(var(--card-scale) * var(--demo-scale)));transform:translate3d(var(--translate-x),var(--translate-y),var(--translate-z)) scale(calc(var(--card-scale) * var(--demo-scale)))}.card__rotator{grid-template:1fr / 1fr;padding:0;border:0;background:transparent;appearance:none;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-transform:rotateY(calc(var(--rotate-x) * var(--demo-tilt-factor))) rotateX(calc(var(--rotate-y) * var(--demo-tilt-factor)));transform:rotateY(calc(var(--rotate-x) * var(--demo-tilt-factor))) rotateX(calc(var(--rotate-y) * var(--demo-tilt-factor)));transition:box-shadow .4s ease,opacity .33s ease-out;box-shadow:0 0 3px -1px transparent,0 0 2px 1px transparent,0 0 5px 0 transparent,0 10px 20px -5px #000,0 2px 15px -5px #000,0 0 20px 0 transparent}.card.active .card__rotator,.card__rotator:focus-visible{touch-action:none;box-shadow:0 0 3px -1px #fff,0 0 3px 1px var(--card-edge),0 0 12px 2px var(--card-glow),0 10px 20px -5px #000,0 0 40px -30px var(--card-glow),0 0 50px -20px var(--card-glow)}.card__rotator>*,.card__front>*{grid-area:1 / 1;width:100%;display:grid;aspect-ratio:var(--card-aspect);border-radius:var(--card-radius);overflow:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;pointer-events:none;image-rendering:optimizeQuality}.card__front{position:relative}.card__front,.card__front *{-webkit-backface-visibility:hidden;backface-visibility:hidden}.card__front{opacity:1;-webkit-transform:translate3d(0,0,.01px);transform:translateZ(.01px);transition:opacity .33s ease-out}.card__back{background:var(--card-back);-webkit-transform:rotateY(180deg) translateZ(1px);transform:rotateY(180deg) translateZ(1px);-webkit-backface-visibility:visible;backface-visibility:visible}.card__front>img,.card__shine,.card__glare,.card__shine:before,.card__shine:after,.card__glare:after{grid-area:1 / 1;width:100%;border-radius:inherit}.card__front>img,.card__back{display:block;height:auto;-webkit-user-select:none;user-select:none}.card__front>img{-webkit-transform:translate3d(0,0,.01px);transform:translateZ(.01px)}.card.loading .card__front{opacity:0}.card.loading .card__back{-webkit-transform:rotateY(0deg);transform:rotateY(0)}.card__shine,.card__glare{position:relative;height:100%;overflow:hidden;pointer-events:none;opacity:var(--card-opacity)}.card__shine{z-index:3;-webkit-transform:translateZ(1px);transform:translateZ(1px);background:transparent;background-size:cover;background-position:center;filter:brightness(.85) contrast(2.75) saturate(.65);mix-blend-mode:color-dodge}.card__shine:before,.card__shine:after,.card__glare:after{position:absolute;inset:0;height:100%;pointer-events:none}.card__glare{z-index:4;-webkit-transform:translateZ(1.41px);transform:translateZ(1.41px);background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),rgb(255 255 255 / 80%) 10%,rgb(255 255 255 / 65%) 20%,rgb(0 0 0 / 50%) 90%);mix-blend-mode:overlay;opacity:calc(var(--card-opacity) * var(--demo-glare))}.card.masked .card__shine,.card.masked .card__shine:before,.card.masked .card__shine:after{-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-size:var(--mask-size, cover);mask-size:var(--mask-size, cover);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.card.blocked .card__shine,.card.blocked .card__glare{opacity:0}.card.reverse.darkness{--foil-brightness: var(--demo-foil-brightness);--card-glow: hsl(189 77% 27%);--foil-size: 99.72752% auto;--mask-size: 99.72752% auto}.card.reverse .card__shine{background-image:radial-gradient(circle at var(--pointer-x) var(--pointer-y),#fff 5%,#000 50%,#fff 80%),linear-gradient(-45deg,#000 15%,#fff,#000 85%),var(--foil);background-blend-mode:soft-light,difference;background-size:120% 120%,200% 200%,var(--foil-size, cover);background-position:center,calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top)),center;background-repeat:no-repeat;filter:brightness(var(--foil-brightness)) contrast(1.5) saturate(1);mix-blend-mode:color-dodge;opacity:calc(((1.5 * var(--card-opacity)) - var(--pointer-from-center)) * var(--demo-shine))}.card.reverse .card__glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),rgb(255 255 255 / 80%) 10%,rgb(255 255 255 / 50%) 20%,rgb(0 0 0 / 75%) 90%);filter:brightness(.7) contrast(1.5)}.card.reverse .card__glare:after{content:"";background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),#fff 10%,rgb(255 255 255 / 50%) 20%,rgb(0 0 0 / 50%) 120%);filter:brightness(1) contrast(1.5);opacity:calc(var(--card-opacity) * var(--demo-glare));clip-path:var(--clip)}.debug-panel{position:fixed;right:14px;bottom:14px;z-index:900;width:min(300px,calc(100vw - 28px));padding:16px;border:1px solid rgb(255 255 255 / 12%);border-radius:16px;background:#141619eb;box-shadow:0 16px 50px #00000073;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.debug-panel h2{margin:0 0 12px;font-size:1rem}.debug-panel label{display:grid;grid-template-columns:72px 1fr 32px;align-items:center;gap:8px;margin:8px 0;font-size:.75rem}.debug-panel label.check{grid-template-columns:auto 1fr}.debug-panel output{color:#46e6d6;text-align:right}.debug-panel button{width:100%;margin-top:8px;padding:8px;border:0;border-radius:8px;color:#082b27;background:#46e6d6;font-weight:700;cursor:pointer}@media(max-width:760px){main{width:min(100% - 24px,560px);padding:max(20px,env(safe-area-inset-top)) 0 max(18px,env(safe-area-inset-bottom))}.intro{margin-bottom:22px}.intro h1{margin-bottom:10px;font-size:clamp(1.55rem,7.5vw,1.9rem)}.intro p{margin:5px 0;font-size:clamp(.91rem,4.2vw,1.02rem);line-height:1.42}.card{width:min(86vw,342px)}.card-stage{padding-top:4px}footer{margin-top:22px;font-size:.78rem}}@media(max-height:720px)and (max-width:760px){.intro p{font-size:.88rem}.card{width:min(76vw,310px)}}@media(prefers-reduced-motion:reduce){.card__rotator,.card__translater{transition:none}}