*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);min-height:100vh;color:#fff}#container{display:flex;height:100vh;width:100vw;overflow:hidden}#cubeCanvas{width:calc(100vw - 280px);height:100vh;display:block}#controls{width:280px;min-width:280px;flex-shrink:0;padding:20px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);overflow-y:auto}h2{text-align:center;margin-bottom:20px;font-size:1.5rem;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}h3{font-size:.9rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;color:#aaa}.control-section{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}.button-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:8px}.button-grid-3{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px}.button-grid button,.button-grid-3 button{padding:12px 8px;font-size:.85rem;font-weight:bold;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#fff;box-shadow:0 4px 6px rgba(0,0,0,.3);background:linear-gradient(145deg, #3498db, #2980b9)}.button-grid button:hover,.button-grid-3 button:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.4);background:linear-gradient(145deg, #5dade2, #3498db)}.button-grid button:active,.button-grid-3 button:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,.3)}.button-grid button:disabled,.button-grid-3 button:disabled{opacity:.5;cursor:not-allowed;transform:none}.action-buttons{display:flex;flex-direction:column;gap:10px}.action-buttons button{padding:15px;font-size:1rem;font-weight:bold;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#fff;box-shadow:0 4px 6px rgba(0,0,0,.3);border-radius:10px}.action-buttons button:disabled{opacity:.5;cursor:not-allowed;transform:none}#scrambleBtn{background:linear-gradient(145deg, #e74c3c, #c0392b)}#scrambleBtn:hover{background:linear-gradient(145deg, #ec7063, #e74c3c);transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.4)}#solveBtn{background:linear-gradient(145deg, #27ae60, #1e8449)}#solveBtn:hover{background:linear-gradient(145deg, #2ecc71, #27ae60);transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.4)}#resetBtn{background:linear-gradient(145deg, #9b59b6, #8e44ad)}#resetBtn:hover{background:linear-gradient(145deg, #a569bd, #9b59b6);transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.4)}#exportBtn{background:linear-gradient(145deg, #3498db, #2980b9)}#exportBtn:hover{background:linear-gradient(145deg, #5dade2, #3498db);transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.4)}#speedSlider{width:100%;height:8px;border-radius:4px;background:rgba(255,255,255,.2);outline:none;-webkit-appearance:none}#speedSlider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#3498db;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.3)}#speedValue{display:block;text-align:center;margin-top:8px;color:#aaa;font-size:.85rem}#status{background:rgba(0,0,0,.2);border-radius:10px;padding:15px}#status p{margin:5px 0;font-size:.9rem}#statusText{color:#2ecc71;font-weight:bold}#moveCount{color:#3498db;font-weight:bold}#solutionDisplay{margin-top:20px;padding:15px;background:rgba(0,0,0,.2);border-radius:10px}#solutionDisplay h3{margin-bottom:8px}#solveInfo{color:#3498db;font-size:.85rem;margin-bottom:10px}#solutionMoves{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:15px}.move-item{display:inline-block;padding:4px 8px;background:rgba(255,255,255,.1);border-radius:4px;font-family:monospace;font-size:.85rem;transition:all .2s ease}.move-pending{color:#fff;background:rgba(255,255,255,.1)}.move-current{color:#1a1a2e;background:#2ecc71;font-weight:bold;transform:scale(1.1)}.move-done{color:#666;background:rgba(255,255,255,.05)}#playbackControls{display:flex;gap:10px;justify-content:center}#playbackControls button{flex:1;padding:12px 16px;font-size:.9rem;font-weight:bold;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#fff;box-shadow:0 4px 6px rgba(0,0,0,.3)}#playbackControls button:disabled{opacity:.5;cursor:not-allowed;transform:none}#prevBtn{background:linear-gradient(145deg, #95a5a6, #7f8c8d)}#prevBtn:hover:not(:disabled){background:linear-gradient(145deg, #bdc3c7, #95a5a6)}#playBtn{background:linear-gradient(145deg, #27ae60, #1e8449)}#playBtn:hover:not(:disabled){background:linear-gradient(145deg, #2ecc71, #27ae60)}#nextBtn{background:linear-gradient(145deg, #3498db, #2980b9)}#nextBtn:hover:not(:disabled){background:linear-gradient(145deg, #5dade2, #3498db)}#moveHistorySection{border-bottom:none}#moveHistoryDisplay{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;max-height:150px;overflow-y:auto;padding:10px;background:rgba(0,0,0,.2);border-radius:10px;border-radius:8px}.history-move{display:inline-block;padding:4px 8px;background:rgba(52,152,219,.3);border-radius:4px;font-family:monospace;font-size:.85rem;color:#fff}.no-moves{color:#888;font-style:italic;font-size:.85rem}.copy-btn{width:100%;padding:10px;font-size:.9rem;font-weight:bold;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#fff;box-shadow:0 4px 6px rgba(0,0,0,.3);background:linear-gradient(145deg, #3498db, #2980b9)}.copy-btn:hover{background:linear-gradient(145deg, #5dade2, #3498db);transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.4)}@media(max-width: 768px){#container{flex-direction:column}#cubeCanvas{width:100vw;height:50vh}#controls{width:100%;min-width:unset;height:50vh}}