: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}html,body,#root{height:100%}body{margin:0;width:100%;height:100%;overflow:hidden}h1{font-size:3.2em;line-height:1.1}#root{margin:0;padding:0;width:100%;height:100%;max-width:none}.app-container{display:flex;flex-direction:column;height:100%}.title{text-align:center;margin:1rem 0}.main-content{display:flex;flex-grow:1;overflow:hidden;min-height:0}.cube-container{flex-grow:1;min-height:0}.control-panel{display:flex;flex-direction:column;gap:20px;align-items:center;padding:20px;background-color:#282c34;border-radius:10px;color:#fff;min-width:250px}.status-message{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #4a4f57;border-radius:8px;background-color:#333842;color:#ffd166;font-weight:600}.instructions{background-color:#3a3f47;border:1px solid #4a4f57;border-radius:8px;padding:10px 15px;font-size:.9rem;line-height:1.4;width:100%;box-sizing:border-box;text-align:left}.instructions div{margin-bottom:5px}.instructions div:last-child{margin-bottom:0}.control-label{font-weight:700;color:#61dafb;margin-right:8px}@media (max-width: 768px){.main-content{flex-direction:column}.control-panel{width:auto;border-left:none;border-top:1px solid #444}}.action-buttons,.rotation-buttons{display:grid;width:100%;gap:10px}.rotation-buttons{grid-template-columns:repeat(6,1fr)}.action-buttons{grid-template-columns:repeat(3,1fr)}.playback-controls{display:grid;grid-template-columns:1fr repeat(5,auto);gap:10px;align-items:center;width:100%}.move-indicator{color:#61dafb;font-weight:700}button{padding:.5rem 1rem;border:1px solid #555;background-color:#333;color:#fff;cursor:pointer}button:hover{background-color:#444}