:root{color:#171717;font-synthesis:none;background:#fff;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}main{max-width:780px;margin:0 auto;padding:36px 24px}h1{margin:0 0 32px;font-size:26px;font-weight:650}h2{margin:0 0 24px;font-size:20px;font-weight:600}button,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation;background:#fff;border:1px solid #ccc;border-radius:5px;padding:11px 18px;font-size:14px}button:hover{background:#f3f3f3}button:focus-visible,input:focus-visible{outline-offset:4px;outline:3px solid #597bb6}.primary{color:#fff;background:#202020;border-color:#202020}.primary:hover{background:#404040}fieldset{border:0;min-width:0;margin:0 0 28px;padding:0}legend{margin-bottom:14px;font-size:16px;font-weight:600}.modes{grid-template-columns:1.5fr 1fr;gap:14px;max-width:590px;display:grid}.mode{cursor:pointer;border:1px solid #d4d4d4;border-radius:6px;flex-direction:column;gap:18px;padding:17px;font-size:14px;display:flex}.mode.selected{border:2px solid #222;padding:16px}.mode:focus-within{outline-offset:4px;outline:3px solid #597bb6}.mode input{accent-color:#222;margin:0 5px 0 0}.examples{gap:14px;display:flex}.example{grid-template-columns:repeat(5,1fr);gap:2px;width:65px;height:65px;display:grid}.example>span{border:1px solid #d3d3d3;place-items:center;min-width:0;min-height:0;display:grid}.example .marked{color:#fff;background:#333;border-color:#333}.example svg{stroke-width:3px;width:9px;height:9px}.toolbar{justify-content:space-between;align-items:center;gap:14px;margin-bottom:23px;display:flex}.toolbar>span{color:#666;font-size:13px}.board-actions{justify-content:center;margin-top:24px;display:flex}button:disabled{cursor:default}.board-actions button:disabled{color:#999;background:#f7f7f7;border-color:#ddd}.board{isolation:isolate;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;display:grid}.tile,.blank{aspect-ratio:1;border-radius:6px;min-width:0;position:relative}.blank{background:#fafafa;border:1px solid #e5e5e5}.tile{perspective:850px;z-index:1;background:0 0;border:0;padding:0;overflow:visible;container-type:inline-size}.tile:hover{z-index:2}.tile:hover .face{background:#f5f5f5}.tile:disabled{cursor:wait}.tile.rolling{z-index:10}.lift{width:100%;height:100%;transform-style:preserve-3d}.cube{width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.35,.05,.2,1);position:relative;translate:0 0 -50cqw}.face{backface-visibility:hidden;background:#fff;border:1px solid #bbb;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;inset:0;box-shadow:0 2px #ddd}.face-1{transform:translateZ(50cqw)}.face-2{transform:rotateY(90deg)translateZ(50cqw)}.face-3{transform:rotateX(90deg)translateZ(50cqw)}.face-4{transform:rotateX(-90deg)translateZ(50cqw)}.face-5{transform:rotateY(-90deg)translateZ(50cqw)}.face-6{transform:rotateY(180deg)translateZ(50cqw)}.face-complete{border:3px solid #d32f2f;box-shadow:0 2px #d32f2f}.completion-mark{stroke:#d32f2f;stroke-width:12px;stroke-linecap:round;width:90%;height:90%}.tile:disabled:hover .face{background:#fff}.number{z-index:2;color:#000;font-size:11px;font-weight:800;position:absolute;top:6px;right:8px}.icon{justify-content:center;align-items:center;width:92%;height:92%;display:flex;position:absolute;inset:4%}.icon img{object-fit:contain;width:100%;height:100%;display:block}.label{z-index:1;text-align:center;background:#ffffffd1;border-radius:999px;max-width:94%;padding:4px 8px;font-size:15px;font-weight:600;line-height:1.25;position:absolute;bottom:5%}.rolling .lift{animation:1.1s ease-in-out lift}@keyframes lift{0%,to{transform:translateZ(0)scale(1)}40%,60%{transform:translateZ(90px)scale(1.25)}}dialog{text-align:center;color:#171717;border:1px solid #ccc;border-radius:9px;width:min(420px,100% - 32px);padding:30px}dialog::backdrop{background:#0006}.confirmation-icon{width:60px;height:60px;margin:0 auto 22px}.confirmation-icon svg{stroke-width:1.5px;width:100%;height:100%}.actions{justify-content:center;gap:12px;margin-top:25px;display:flex}.actions button{min-width:95px}dialog input{border:1px solid #bbb;border-radius:4px;width:100%;padding:12px 8px;font-size:12px}@media (width<=580px){main{padding:24px 13px}h1{margin-bottom:27px;font-size:23px}.modes{grid-template-columns:1fr}.mode{padding:16px}.mode.selected{padding:15px}.toolbar{gap:8px}.toolbar button{padding:9px 11px;font-size:11px}.toolbar>span{font-size:10px}.board{gap:7px}.number{font-size:9px;top:4px;right:5px}.label{padding:3px 5px;font-size:clamp(10px,2.7vw,14px)}dialog{padding:25px 20px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}