.cube-main{width:min(1200px,calc(100% - 32px));margin:34px auto 70px}.cube-heading{margin-bottom:24px}.cube-heading h1{font-size:clamp(2rem,4vw,3rem);margin:8px 0 10px}.cube-heading p{max-width:760px;color:#56677c;line-height:1.65}.cube-card{background:#fff;border:1px solid #dce3ea;border-radius:22px;box-shadow:0 16px 48px rgba(20,36,55,.07);padding:28px}.cube-layout{display:grid;grid-template-columns:minmax(360px,1fr) minmax(320px,440px);gap:22px;align-items:center}.cube-display{min-height:450px;background:radial-gradient(circle at 50% 42%,#fff 15%,#f2f5f9 75%);border:1px solid #e3e9ef;border-radius:18px;display:grid;place-items:center;overflow:hidden}.cube-stage{width:430px;height:430px;max-width:100%;position:relative;display:grid;place-items:center;user-select:none;touch-action:none}.cube-scene{width:380px;height:380px;max-width:100%;perspective:980px;display:grid;place-items:center;cursor:grab;position:relative;z-index:3;touch-action:none}.cube-scene:active{cursor:grabbing}.cube-world{width:60px;height:60px;transform-style:preserve-3d;will-change:transform}.cubie-orbit{width:60px;height:60px;position:absolute;transform-style:preserve-3d}.cubie-orbit.turning.axis-x{animation:cubeTurnX var(--turn-duration) cubic-bezier(.32,.72,.22,1) both}.cubie-orbit.turning.axis-y{animation:cubeTurnY var(--turn-duration) cubic-bezier(.32,.72,.22,1) both}.cubie-orbit.turning.axis-z{animation:cubeTurnZ var(--turn-duration) cubic-bezier(.32,.72,.22,1) both}.cubie-orbit.hint-active .cube-face::after{animation:cubePulse .75s ease-in-out infinite alternate}.cubie{width:60px;height:60px;position:absolute;transform-style:preserve-3d}.cube-face{position:absolute;inset:0;background:#202734;border:1px solid #101820;border-radius:4px;backface-visibility:hidden;cursor:move}.cube-face::after{content:"";position:absolute;inset:3px;border-radius:3px;background:var(--sticker);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 0 10px rgba(255,255,255,.14),inset 0 -8px 13px rgba(0,0,0,.16)}.cube-face.front{transform:translateZ(30px)}.cube-face.back{transform:rotateY(180deg) translateZ(30px)}.cube-face.right{transform:rotateY(90deg) translateZ(30px)}.cube-face.left{transform:rotateY(-90deg) translateZ(30px)}.cube-face.top{transform:rotateX(90deg) translateZ(30px)}.cube-face.bottom{transform:rotateX(-90deg) translateZ(30px)}.cube-shadow{position:absolute;width:230px;height:45px;bottom:25px;border-radius:50%;background:rgba(31,45,61,.19);filter:blur(16px)}.cube-hint{position:absolute;z-index:5;top:13px;left:50%;transform:translateX(-50%);background:#fff5ef;border:1px solid #ffb78f;border-radius:999px;padding:7px 14px;color:#a83d00;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 6px 18px rgba(31,45,61,.1)}.cube-hint[hidden]{display:none}.cube-hint-arrow{position:absolute;z-index:5;pointer-events:none;color:#ff5a0a;filter:drop-shadow(0 2px 3px white)}.cube-hint-arrow[hidden]{display:none}.cube-hint-circle{font-size:58px;line-height:1}.cube-hint-line{display:block;width:90px;height:5px;margin-left:-45px;border-radius:4px;background:#ff5a0a;box-shadow:0 0 8px #ff5a0a;position:relative}.cube-hint-line::after{content:"";position:absolute;right:-3px;top:-6px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid #ff5a0a}.cube-controls h2{margin:0 0 6px;font-size:1.5rem}.cube-controls>p{color:#52667e;line-height:1.55}.cube-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:24px 0}.cube-actions .btn{min-height:48px;justify-content:center}.cube-actions button:disabled,.cube-move-buttons button:disabled{opacity:.48;cursor:not-allowed}.cube-status{min-height:46px;background:#f5f8fb;border-left:4px solid #ff5a0a;border-radius:7px;padding:11px 13px;color:#263c53!important;font-weight:650}.cube-notation{margin-top:24px;border-top:1px solid #e3e9ef;padding-top:19px}.cube-notation h3{font-size:1.1rem;margin:0 0 8px}.cube-notation p,.cube-help{font-size:.9rem}.cube-notation kbd{font:700 .82rem inherit;background:#eef2f6;border:1px solid #d7e0e8;border-radius:4px;padding:2px 5px}.cube-move-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0}.cube-move-pair{display:grid;grid-template-columns:1fr 1fr;gap:4px}.cube-move-pair button{min-height:40px;border:1px solid #cad5df;border-radius:8px;background:white;color:#273b50;font-weight:800;cursor:pointer}.cube-move-pair button:hover,.cube-move-pair button:focus-visible{border-color:#ff5a0a;background:#fff4ed;color:#bd4400}.cube-help{margin-bottom:0}@keyframes cubeTurnX{from{transform:rotateX(var(--turn-angle))}to{transform:rotateX(0deg)}}@keyframes cubeTurnY{from{transform:rotateY(var(--turn-angle))}to{transform:rotateY(0deg)}}@keyframes cubeTurnZ{from{transform:rotateZ(var(--turn-angle))}to{transform:rotateZ(0deg)}}@keyframes cubePulse{from{box-shadow:inset 0 0 8px #fff6,0 0 2px #ff5a0a}to{box-shadow:inset 0 0 12px #fff9,0 0 18px #ff5a0a}}@media(max-width:800px){.cube-layout{grid-template-columns:1fr}.cube-card{padding:16px}.cube-display{min-height:400px}}@media(max-width:480px){.cube-main{width:min(100% - 20px,1200px)}.cube-display{min-height:350px}.cube-stage{transform:scale(.78);width:430px;max-width:none;height:430px;margin:-46px -48px}.cube-hint{top:0}.cube-actions{gap:7px}.cube-actions .btn{padding:10px 5px;font-size:.9rem}}@media(prefers-reduced-motion:reduce){.cubie-orbit.turning{animation:none!important}.cubie-orbit.hint-active .cube-face::after{animation:none;box-shadow:0 0 14px #ff5a0a}}