*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a2e;color:#eee;min-height:100vh;overflow:hidden}.app{display:flex;flex-direction:column;align-items:center;height:100vh;padding:1rem}.header{display:flex;align-items:center;justify-content:center;width:100%;max-width:600px;position:relative;margin-bottom:.25rem}h1{font-size:1.2rem;color:#fff}.header .menu-btn{position:absolute;right:0;width:32px;height:32px;font-size:1.2rem;border:none;border-radius:6px;background:#333;color:#aaa;cursor:pointer;touch-action:manipulation}.header .menu-btn:hover{background:#444;color:#fff}.header .menu-dropdown{position:absolute;top:100%;right:0;margin-top:4px;background:#0f3460;border-radius:6px;overflow:hidden;box-shadow:0 4px 12px #0000004d;z-index:100;display:none}.header .menu-dropdown.show{display:block}.cube-area{display:flex;flex-direction:column;align-items:center;gap:4px}.cube-row{display:flex;align-items:center;gap:4px}.canvas-container{width:70vw;max-width:350px;height:40vh;min-height:200px;border-radius:8px;overflow:hidden}.cube-area .view-btn{width:36px;height:36px;font-size:1.1rem;border:none;border-radius:8px;background:#533483;color:#fff;cursor:pointer;transition:all .2s;touch-action:manipulation}.cube-area .view-btn:hover{background:#7952b3}.cube-area .view-btn:active{transform:scale(.95)}.controls{width:100%;max-width:600px;padding:1rem;background:#16213e;border-radius:8px;margin-top:.5rem;flex:1;display:flex;flex-direction:column;justify-content:space-evenly}.section-label{font-size:.7rem;font-weight:700;color:#888;margin-right:.5rem}.menu-item{display:block;width:100%;padding:.6rem 1rem;font-size:.8rem;border:none;background:transparent;color:#fff;cursor:pointer;text-align:left;white-space:nowrap;transition:background .2s;touch-action:manipulation}.menu-item:hover:not(:disabled){background:#1a4a7a}.menu-item:disabled{color:#666;cursor:not-allowed}.face-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:.75rem}.face-control{display:flex;align-items:center;justify-content:center;gap:.4rem;background:#0f3460;padding:.6rem;border-radius:8px}.face-label{font-size:.9rem;font-weight:700;min-width:50px}.rotate-btn{width:44px;height:44px;font-size:1.4rem;border:none;border-radius:8px;background:#e94560;color:#fff;cursor:pointer;transition:all .2s;touch-action:manipulation}.rotate-btn:hover:not(:disabled){background:#ff6b6b;transform:scale(1.05)}.rotate-btn:active:not(:disabled){transform:scale(.95)}.rotate-btn:disabled{background:#555;cursor:not-allowed}.algorithm-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem}.algorithm-buttons{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.algo-btn{padding:.7rem 1rem;font-size:.9rem;font-weight:700;border:none;border-radius:8px;background:#ff9f1c;color:#1a1a2e;cursor:pointer;transition:all .2s;touch-action:manipulation}.algo-btn:hover:not(:disabled){background:#ffbf69}.algo-btn:active:not(:disabled){transform:scale(.95)}.algo-btn:disabled{background:#555;color:#888;cursor:not-allowed}@media(max-width:480px){.app{padding:.5rem;height:100dvh;overflow:hidden}h1{font-size:1rem}.header .menu-btn{width:32px;height:32px;font-size:1.1rem}.canvas-container{width:60vw;height:32vh;min-height:150px}.cube-area .view-btn{width:40px;height:40px;font-size:1.2rem}.controls{padding:.75rem}.section-label{font-size:.75rem}.face-controls{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.6rem}.face-control{padding:.5rem}.face-label{font-size:.75rem;min-width:38px}.rotate-btn{width:38px;height:38px;font-size:1.2rem}.algorithm-buttons{gap:.4rem}.algo-btn{padding:.6rem .8rem;font-size:.8rem}}