@import"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.chess-page{margin:0;padding:0;height:100vh;width:100vw;overflow:hidden;background:radial-gradient(circle at center,#111,#000);font-family:Share Tech Mono,monospace;color:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.chess-page *,.chess-page *:before,.chess-page *:after{transform-style:preserve-3d;box-sizing:border-box}.header-overlay{height:15vh;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10;text-shadow:0 0 10px rgba(0,255,157,.5);pointer-events:none;padding-top:40px}.header-overlay h1{font-size:clamp(2.5rem,6vw,4rem);margin:0;letter-spacing:4px;color:#00ff9d;line-height:1.2}.header-overlay p{font-size:clamp(1rem,2.5vw,1.2rem);margin-top:15px;color:#a3cfff;opacity:.8;text-align:center;padding:0 1rem}.footer-overlay{height:12vh;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10;font-size:.9rem;color:#888;letter-spacing:1px;pointer-events:none;padding-bottom:20px}.footer-overlay span{margin-top:5px;color:#00ff9d;font-weight:700}.board-container{flex-grow:1;width:100%;display:flex;justify-content:center;align-items:center;perspective:1200px;overflow:hidden}.chessboard{--dark: #3a3634;--light: #eacba8;--black: #333333;--white: #f8d6a2;width:65vmin;aspect-ratio:1/1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);grid-template-areas:"a8 b8 c8 d8 e8 f8 g8 h8" "a7 b7 c7 d7 e7 f7 g7 h7" "a6 b6 c6 d6 e6 f6 g6 h6" "a5 b5 c5 d5 e5 f5 g5 h5" "a4 b4 c4 d4 e4 f4 g4 h4" "a3 b3 c3 d3 e3 f3 g3 h3" "a2 b2 c2 d2 e2 f2 g2 h2" "a1 b1 c1 d1 e1 f1 g1 h1";place-items:center;background:0 0 / 25% 25% repeating-conic-gradient(var(--dark) 0 25%,var(--light) 25% 50%);transform:rotateX(60deg) rotate(0);animation:rotateBoard 20s linear infinite;position:relative;container-type:inline-size}.chessboard:after{content:"";position:absolute;inset:-50%;border-radius:50%;mask-image:radial-gradient(black,transparent 65%);-webkit-mask-image:radial-gradient(black,transparent 65%);background:0 0 / 12.5% 12.5% repeating-conic-gradient(var(--dark) 0 25%,var(--light) 25% 50%);transform:translateZ(-30px);pointer-events:none}.chessboard .sides{display:contents}.chessboard .sides .side{position:absolute;inset:var(--i);transform-origin:var(--o);transform:rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg));background:linear-gradient(rgba(0,0,0,var(--l))),repeating-linear-gradient(var(--d),var(--dark) 0 12.5%,var(--light) 0% 25%)}.chessboard .sides .side.front{--i: 100% 0 -2% 0;--o: 50% 0%;--d: 90deg;--x: -90deg;--l: .5}.chessboard .sides .side.back{--i: -2% 0 100% 0;--o: 50% 100%;--d: 270deg;--x: 90deg;--l: .5}.chessboard .sides .side.left{--i: 0 100% 0 -2%;--o: 100% 50%;--d: 0deg;--y: -90deg;--l: .25}.chessboard .sides .side.right{--i: 0 -2% 0 100%;--o: 0% 50%;--d: 180deg;--y: 90deg;--l: .25}.piece{--s: 6.5cqi;--band-gradient: rgba(0,0,0,0) calc(100% - var(--s) * .2), var(--clr-opp) 0 calc(100% - var(--s) * .15), rgba(0,0,0,0) 0;width:var(--s);aspect-ratio:1/1;position:relative;background:var(--clr)}.piece[data-color=white]{--clr: var(--white);--clr-opp: var(--black)}.piece[data-color=black]{--clr: var(--black);--clr-opp: var(--white);transform:rotate(180deg)}.piece .x,.piece .y{position:absolute}.piece[data-type=pawn]:before{content:"";position:absolute;inset:0;background:linear-gradient(#0003 0 0),linear-gradient(180deg,var(--band-gradient)),var(--clr);transform-origin:bottom;transform:rotateX(-90deg)}.piece[data-type=pawn]:after{content:"";position:absolute;inset:0;background:linear-gradient(#0003 0 0),linear-gradient(0deg,var(--band-gradient)),var(--clr);transform-origin:top;transform:rotateX(90deg)}.piece[data-type=pawn] .x{inset:0;background:var(--clr);transform:translateZ(var(--s))}.piece[data-type=pawn] .x:before{content:"";position:absolute;inset:0;background:linear-gradient(#0003 0 0),linear-gradient(90deg,var(--band-gradient)),var(--clr);transform-origin:left;transform:rotateY(90deg)}.piece[data-type=pawn] .x:after{content:"";position:absolute;inset:0;background:linear-gradient(#0003 0 0),linear-gradient(-90deg,var(--band-gradient)),var(--clr);transform-origin:right;transform:rotateY(-90deg)}.piece[data-type=rook]:before{content:"";position:absolute;inset:-100% 0 0;background:linear-gradient(#00030 0),linear-gradient(180deg,var(--band-gradient)),var(--clr);transform-origin:bottom;transform:rotateX(-90deg)}.piece[data-type=rook]:after{content:"";position:absolute;inset:0 0 -100%;background:linear-gradient(#00030 0),linear-gradient(0deg,var(--band-gradient)),var(--clr);transform-origin:top;transform:rotateX(90deg)}.piece[data-type=rook] .x{inset:0;background:var(--clr);transform:translateZ(calc(var(--s)*2))}.piece[data-type=rook] .x:before{content:"";position:absolute;inset:0 -100% 0 0;background:linear-gradient(#00030 0),linear-gradient(90deg,var(--band-gradient)),var(--clr);transform-origin:left;transform:rotateY(90deg)}.piece[data-type=rook] .x:after{content:"";position:absolute;inset:0 0 0 -100%;background:linear-gradient(#00030 0),linear-gradient(-90deg,var(--band-gradient)),var(--clr);transform-origin:right;transform:rotateY(-90deg)}.piece:where([data-type=knight],[data-type=bishop],[data-type=queen],[data-type=king]):before{content:"";position:absolute;background:linear-gradient(#00030 0),linear-gradient(var(--band-gradient)),var(--clr);transform-origin:bottom;transform:rotateX(-90deg)}.piece:where([data-type=knight],[data-type=bishop],[data-type=queen],[data-type=king]):after{content:"";position:absolute;background:linear-gradient(#00030 0),linear-gradient(to top,var(--band-gradient)),var(--clr);transform-origin:top;transform:rotateX(90deg)}.piece[data-type=knight]:before{inset:calc(var(--s)*-1) 0 0 0}.piece[data-type=knight]:after{inset:0}.piece[data-type=knight] .x{inset:50% 0 0;background:var(--clr);transform:translateZ(calc(var(--s)*2))}.piece[data-type=knight] .x:before{content:"";position:absolute;inset:-100% -100% 0 0;background:linear-gradient(#0000001a0 0),linear-gradient(to right,var(--band-gradient)),var(--clr);transform-origin:left;transform:rotateY(90deg);clip-path:polygon(0 50%,0 100%,100% 100%,100% 0,50% 0,50% 50%)}.piece[data-type=knight] .x:after{content:"";position:absolute;inset:-100% 0 0 -100%;background:linear-gradient(#0000001a0 0),linear-gradient(to left,var(--band-gradient)),var(--clr);transform-origin:right;transform:rotateY(-90deg);clip-path:polygon(0 0,0 100%,100% 100%,100% 50%,50% 50%,50% 0)}.piece[data-type=knight] .y{inset:0 0 50%;background:var(--clr);transform:translateZ(var(--s))}.piece[data-type=knight] .y:before{content:"";position:absolute;inset:-100% 0 0;transform-origin:bottom;transform:rotateX(-90deg);background:linear-gradient(#00030 0),var(--clr)}.piece[data-type=bishop]:before{inset:calc(var(--s)*-1) 0 0 0}.piece[data-type=bishop]:after{inset:0}.piece[data-type=bishop] .x{inset:100% 0 0;background:var(--clr);transform:translateZ(calc(var(--s)*2))}.piece[data-type=bishop] .x:before{content:"";position:absolute;inset:calc(var(--s)*-1) calc(var(--s)*-1) 0 0;background:linear-gradient(#0000001a0 0),linear-gradient(to right,var(--band-gradient)),var(--clr);transform-origin:left;transform:rotateY(90deg);clip-path:polygon(0 100%,100% 100%,100% 0,50% 0)}.piece[data-type=bishop] .x:after{content:"";position:absolute;inset:calc(var(--s)*-1) 0 0 calc(var(--s)*-1);background:linear-gradient(#0000001a0 0),linear-gradient(to left,var(--band-gradient)),var(--clr);transform-origin:right;transform:rotateY(-90deg);clip-path:polygon(0 0,0 100%,100% 100%,50% 0)}.piece[data-type=bishop] .y{inset:calc(var(--s)/-2.3) 0 0 0;background:var(--clr);transform:translateZ(calc(var(--s)*2)) rotateX(45deg);transform-origin:bottom}.piece[data-type=queen]:before{inset:-125% 0 0;clip-path:polygon(0 0,50% 20%,100% 0,100% 100%,0 100%)}.piece[data-type=queen]:after{inset:0 0 -125%;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}.piece[data-type=king]:before{inset:-175% 0 0;clip-path:polygon(0 20%,50% 0,100% 20%,100% 100%,0 100%)}.piece[data-type=king]:after{inset:0 0 -175%;clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%)}.piece:where([data-type=queen],[data-type=king]) .x:before{content:"";position:absolute;inset:0 -125% 0 0;transform-origin:left;transform:rotateY(-90deg);background:linear-gradient(#0000001a0 0),linear-gradient(to left,var(--band-gradient)),var(--clr)}.piece:where([data-type=queen],[data-type=king]) .x:after{content:"";position:absolute;inset:0 0 0 -125%;transform-origin:right;transform:rotateY(90deg);background:linear-gradient(#0000001a0 0),linear-gradient(to right,var(--band-gradient)),var(--clr)}.piece:where([data-type=queen],[data-type=king]) .y{inset:0;transform:translateZ(calc(var(--s)*2.25))}.piece:where([data-type=queen],[data-type=king]) .y:before{content:"";position:absolute;inset:0;background:var(--clr);transform-origin:left;transform:rotateY(45deg)}.piece:where([data-type=queen],[data-type=king]) .y:after{content:"";position:absolute;inset:0;background:var(--clr);transform-origin:right;transform:rotateY(-45deg)}@keyframes rotateBoard{to{transform:rotateX(60deg) rotate(360deg)}}