: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:#242424;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}}:root{--cube-size: 200px;--marker-size: 20px;--scene-perspective: 1200px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#1a1a1a;color:#f0f0f0;overflow:hidden}#app{display:flex;flex-direction:row-reverse;align-items:center;gap:50px;padding:20px}.scene{width:var(--cube-size);height:var(--cube-size);perspective:var(--scene-perspective)}.view-transformer{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-30deg) rotateY(45deg);position:relative}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.5,0,.5,1)}.cube.no-transition{transition:none}.face{position:absolute;width:var(--cube-size);height:var(--cube-size);border:1px solid rgba(0,0,0,.3);box-sizing:border-box;background-image:linear-gradient(#0000,#0003)}.face.front{transform:rotateY(0) translateZ(calc(var(--cube-size) / 2))}.face.back{transform:rotateY(180deg) translateZ(calc(var(--cube-size) / 2))}.face.right{transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2))}.face.left{transform:rotateY(-90deg) translateZ(calc(var(--cube-size) / 2))}.face.top{transform:rotateX(90deg) translateZ(calc(var(--cube-size) / 2))}.face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--cube-size) / 2))}.marker{position:absolute;width:var(--marker-size);height:var(--marker-size);background-color:#fff;border-radius:50%;box-shadow:0 0 8px #fff,0 0 16px #fff;left:50%;top:50%;margin-left:calc(var(--marker-size) / -2);margin-top:calc(var(--marker-size) / -2);transform-style:preserve-3d;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.marker.visible{opacity:1;visibility:visible}.marker.face{transform:translateZ(calc(var(--cube-size) / 2 + 2px))}.marker.edge{transform:translate(calc(var(--cube-size) / -2 - 7px)) translateY(-8px) translateZ(calc(var(--cube-size) / 2 + 10px)) rotateY(-45deg) rotateX(30deg)}.marker.corner{transform:translate(calc(var(--cube-size) / -2)) translateY(calc(var(--cube-size) / -2)) translateZ(calc(var(--cube-size) / 2 + 2px)) rotateY(-45deg) rotateX(30deg)}.controls{display:flex;flex-direction:column;gap:20px;align-items:stretch;min-width:180px}.menu{display:flex;flex-direction:column;gap:10px}button{padding:12px 20px;font-size:16px;cursor:pointer;background-color:#333;color:#eee;border:1px solid #555;border-radius:8px;transition:background-color .2s,border-color .2s,transform .1s;text-align:center}button:hover{background-color:#444;border-color:#777}button:active{transform:scale(.98)}button.active{background-color:#007bff;border-color:#0056b3;font-weight:700}#rotateBtn{background-color:#28a745;border-color:#1e7e34}#rotateBtn:hover{background-color:#218838}#rotateBtn:disabled{background-color:#555;border-color:#444;cursor:not-allowed;opacity:.6}#resetBtn{background-color:#6c757d;border-color:#5a6268}#resetBtn:hover{background-color:#5a6268}