:root{--side-size: 100px;--cube-zoom: 1;--cube-block-zoom: .3;--cube-color: #111;--sticker-padding: 2px;--sticker-radius: 1px;--sticker-corner-radius: 12px;--sticker-border-color: #444;--opacity-normal: .8;--opacity-dim: .4;--opacity-adjacent: .7;--opacity-highlight: 1;--color-front: hsl(120, 87%, 41%);--color-left: hsl(39, 100%, 50%);--color-right: hsl(342, 100%, 50%);--color-top: hsl(0, 0%, 100%);--color-bottom: hsl(60, 100%, 50%);--color-back: hsl(213, 100%, 50%);--rotate-x: 0deg;--rotate-y: 0deg;--rotate-z: 0deg}*{box-sizing:border-box}body{background:#eee;font-family:Arial,Helvetica,sans-serif}main{padding-top:80px;margin:0 auto}.sliders input{display:block;width:100%}h3.game-score{text-align:center;font-weight:700;font-size:3rem;margin-top:2rem;margin-bottom:1rem;color:#333;transition:.2s}h3.game-score.correct{color:#0ec40e}h3.game-score.incorrect{color:#f2187d}h4.game-timer{text-align:center;font-weight:400;color:#444;margin:8px}.game-timer-bar{height:8px;width:100%;border-radius:100px;overflow:hidden;background:#eee;position:relative}.game-timer-bar-remaining{position:absolute;top:0;left:0;background:hsl(120,87%,41%);transition:.2s;height:100%;width:100%}.splitter{display:flex;justify-content:center;flex-wrap:wrap;gap:24px}.split-right{max-width:400px;text-align:left}.rotation-controller{width:100%;height:100%;cursor:grab}.rotation-controller.dragging,.rotation-controller.dragging *{cursor:grabbing!important}.rotation-controller.dragging .cube{transition:none!important}h4{margin:16px 0 4px}.white-panel{border:1px solid #c9cbd5;background:#fcfcfc;border-radius:10px;padding:24px}.small-caption{color:#666;text-align:center}.cube-wrapper{background:rgb(238,235,210);margin:0 auto 24px;width:400px;height:400px;position:relative;perspective:2000px;font-family:Arial,Helvetica,sans-serif;font-weight:700;color:#0006}.cube{width:calc(2 * var(--side-size));height:calc(2 * var(--side-size));position:absolute;font-size:2em;top:var(--side-size);left:var(--side-size);transform-style:preserve-3d;transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotate(var(--rotate-z)) scaleX(var(--cube-zoom)) scaleY(var(--cube-zoom)) scaleZ(var(--cube-zoom));cursor:default;transition:.3s}.side{width:calc(2 * var(--side-size));height:calc(2 * var(--side-size));overflow:hidden;background:var(--cube-color);border-radius:calc(var(--sticker-radius) * 2);position:absolute;padding:var(--sticker-padding);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--sticker-padding);opacity:1}.side.hover-side:hover .sticker{opacity:.9}.sticker{outline:1px solid var(--sticker-border-color);border-radius:var(--sticker-radius);width:100%;height:100%;min-width:0;overflow:hidden;background:white;display:flex;justify-content:center;align-items:center;opacity:var(--opacity-normal);cursor:pointer;transition:.2s}.sticker.dim{opacity:var(--opacity-dim)}.sticker.highlight,.side.highlight-side .sticker,.sticker.adjacent,.sticker.editing{transition:.1s}.sticker:hover,.sticker.highlight,.side.highlight-side .sticker{opacity:var(--opacity-highlight)}.sticker.adjacent{opacity:var(--opacity-adjacent)}.sticker.editing,.sticker.highlight,.side.highlight-side .sticker{outline:3px solid var(--sticker-border-color);animation:sticker-pulse .7s infinite;animation-direction:alternate;animation-timing-function:ease-in-out}.sticker.editing{border:3px solid gold;transition:0s}.sticker.error{opacity:1;background-color:red}@keyframes sticker-pulse{0%{opacity:var(--opacity-highlight)}to{opacity:calc(var(--opacity-highlight) - .1)}}.sticker span{-webkit-user-select:none;user-select:none}.sticker .sticker-index,.sticker .sticker-letter{display:none}.cube.show .sticker-letter{display:block}.always-show-sticker-index .sticker-index,.always-show-sticker-letter .sticker-letter,.force-show .sticker-letter{display:block!important}.color-front{background:var(--color-front)}.color-left{background:var(--color-left)}.color-right{background:var(--color-right)}.color-top{background:var(--color-top)}.color-bottom{background:var(--color-bottom)}.color-back{background:var(--color-back)}.rotate-back{transform:rotateY(180deg) translateZ(var(--side-size))}.rotate-top{transform:rotateX(90deg) translateZ(var(--side-size))}.rotate-left{transform:rotateY(-90deg) translateZ(var(--side-size))}.rotate-right{transform:rotateY(90deg) translateZ(var(--side-size))}.rotate-bottom{transform:rotateX(-90deg) translateZ(var(--side-size))}.rotate-front{transform:rotateX(0) translateZ(var(--side-size))}.sticker.index-0{border-bottom-right-radius:var(--sticker-corner-radius)}.sticker.index-1{border-bottom-left-radius:var(--sticker-corner-radius);border-bottom-right-radius:var(--sticker-corner-radius)}.sticker.index-2{border-bottom-left-radius:var(--sticker-corner-radius)}.sticker.index-3{border-top-right-radius:var(--sticker-corner-radius);border-bottom-right-radius:var(--sticker-corner-radius)}.sticker.index-4{border-radius:var(--sticker-corner-radius)}.sticker.index-5{border-top-left-radius:var(--sticker-corner-radius);border-bottom-left-radius:var(--sticker-corner-radius)}.sticker.index-6{border-top-right-radius:var(--sticker-corner-radius)}.sticker.index-7{border-top-left-radius:var(--sticker-corner-radius);border-top-right-radius:var(--sticker-corner-radius)}.sticker.index-8{border-top-left-radius:var(--sticker-corner-radius)}.flex-center{display:flex;justify-content:center;align-items:center}.sticker-card{width:160px;height:240px;border-radius:12px;padding:24px;box-shadow:0 4px 16px #0000000d;background:white;position:absolute;top:40px;right:40px;display:flex;flex-direction:column;justify-content:center;align-items:center}.cube-block-container{flex:1 1 100%;background:white;z-index:2;width:100%}.sticker-card-header{flex:0 1 auto;text-align:center;font-size:3rem;text-transform:uppercase;margin:0}.cube-block{height:100%;width:100%;font-size:2em;transform-style:preserve-3d;transform-origin:center}.cube-block-side{width:calc(2 * var(--side-size));height:calc(2 * var(--side-size));overflow:hidden;background:var(--cube-color);position:absolute;padding:calc(2 * var(--sticker-padding));display:grid;grid-template-columns:1fr;grid-template-rows:1fr;gap:var(--sticker-padding);opacity:1}.cube-block.rotate-center{transform:rotateX(-90deg) rotateY(0) rotate(0) scaleX(var(--cube-block-zoom)) scaleY(var(--cube-block-zoom)) scaleZ(var(--cube-block-zoom))}.cube-block.rotate-edge{transform:rotateX(-70deg) rotateY(0) rotate(0) scaleX(var(--cube-block-zoom)) scaleY(var(--cube-block-zoom)) scaleZ(var(--cube-block-zoom))}.cube-block.rotate-corner{transform:rotateX(-55deg) rotateY(-45deg) rotate(0) scaleX(var(--cube-block-zoom)) scaleY(var(--cube-block-zoom)) scaleZ(var(--cube-block-zoom))}.cube-block-sticker{outline:1px solid var(--sticker-border-color);border-radius:var(--sticker-radius);border-radius:10px;width:100%;height:100%;min-width:0;overflow:hidden;display:flex;justify-content:center;align-items:center}.cube-block.rotate-corner .cube-block-side-top{padding-top:calc(3 * var(--sticker-padding));padding-left:calc(3 * var(--sticker-padding))}.cube-block.rotate-corner .cube-block-side-front{padding-left:calc(3 * var(--sticker-padding));padding-bottom:calc(4 * var(--sticker-padding))}.cube-block.rotate-corner .cube-block-side-right{padding-right:calc(3 * var(--sticker-padding));padding-bottom:calc(4 * var(--sticker-padding))}.cube-block.rotate-edge .cube-block-side-top{padding-top:calc(2 * var(--sticker-padding))}.cube-block.rotate-edge .cube-block-side-front{padding-bottom:calc(5 * var(--sticker-padding))}.piece-container{--piece-size: calc(var(--side-size) * .3);width:200px;height:200px;border:1px solid blue;background:white;position:absolute;top:0;right:0;z-index:2}.piece-container .piece{position:absolute;top:100px;left:100px;transform-style:preserve-3d;transform:rotateX(45deg) rotateY(45deg);background:var(--cube-color)}.piece-container .piece .piece-side{position:absolute;padding:var(--sticker-padding);background:var(--cube-color);width:calc(var(--piece-size) * 2);height:calc(var(--piece-size) * 2)}.piece-container .piece .piece-sticker{border-radius:var(--sticker-radius);width:100%;height:100%}.piece-container .piece .piece-side-back{transform:rotateY(180deg) translateZ(var(--piece-size))}.piece-container .piece .piece-side-top{transform:rotateX(90deg) translateZ(var(--piece-size))}.piece-container .piece .piece-side-left{transform:rotateY(-90deg) translateZ(var(--piece-size))}.piece-container .piece .piece-side-right{transform:rotateY(90deg) translateZ(var(--piece-size))}.piece-container .piece .piece-side-bottom{transform:rotateX(-90deg) translateZ(var(--piece-size))}.piece-container .piece .piece-side-front{transform:rotateX(0) translateZ(var(--piece-size))}.dev-stuff .component__state-logger{position:fixed;background:white;bottom:10px;left:10px;min-width:160px;font-family:Courier New,Courier,monospace;font-weight:600;font-size:14px}.dev-stuff .component__state-logger .state-header{padding:16px;display:flex;cursor:pointer}.dev-stuff .component__state-logger .state-header h3{flex:1 1 auto;margin:0;color:#555;font-size:12px}.dev-stuff .component__state-logger .state-main{padding:0 16px}.dev-stuff .component__state-logger .state-row{margin:0 0 .5em}.dev-stuff .component__state-logger .state-value{font-weight:600}.dev-stuff .component__state-logger .state-value.boolean.true{color:green}.dev-stuff .component__state-logger .state-value.boolean.false{color:#a10d2a}.dev-stuff .component__state-logger .state-value.string{color:#ab7004;font-style:italic}.dev-stuff .component__state-logger .state-value.string:before{content:"'"}.dev-stuff .component__state-logger .state-value.string:after{content:"'"}.dev-stuff .component__state-logger .state-value.null{color:#999}.btn{padding:.5em 1em;border:none;outline:none;margin:.5em .2em;transition:.3s}.btn:focus,.btn{border:1px solid #999;border-radius:3px;cursor:pointer}.btn:hover{background:#ddd}.btn:active{transition:0s;background:#ccc}.btn.primary,.btn-switch.active{color:#fff;background:#0d45e0;border-color:#1a3c99}.btn.primary:hover,.btn-switch.active:hover,.btn.primary:active,.btn-switch.active:active{background:#113db8}.btn.destructive{color:#a41d1d;border-color:#ca4040;background:white}.btn.full-width{width:100%}.btn.play-btn.idle{color:#fff;background:hsl(120,87%,41%)}.btn.play-btn.idle:hover{background:hsl(120,87%,36%)}.btn.play-btn.playing{color:#fff;background:hsl(332,89%,52%)}.btn.play-btn.playing:hover{background:hsl(332,89%,48%)}.color-pickers{display:flex;flex-wrap:wrap;gap:8px}.color-picker-container{position:relative}.color-box{width:40px;height:20px;display:inline-block;border:1px solid black;border-radius:4px}.color-box.open{border-width:3px}.swatch-container{position:absolute;z-index:2;top:100%}.customize-cube{border:1px solid #c9cbd5;background:#fcfcfc;border-radius:10px;padding:24px}.customize-cube h3{margin:0}p.error{font-size:12px;margin:.5em 0;color:#8b0000}span.clickable{cursor:pointer;color:#00f;font-weight:700}.view-panel,.play-panel{padding:24px;outline:1px solid blue}.play-panel .log-list-item.correct{color:green}.play-panel .log-list-item.incorrect{color:#8b0000}