*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#eee;min-height:100vh;overflow:hidden}.app{display:flex;flex-direction:column;align-items:center;height:100vh;padding:1rem;overflow-y:auto}.mini-cube-container{width:90px;height:90px;position:absolute;top:3.5rem;left:.75rem;border-radius:12px;overflow:hidden;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000004d}.top-menu{position:absolute;top:.75rem;right:.75rem;z-index:100}.top-menu .menu-btn{width:36px;height:36px;font-size:1.2rem;border:none;border-radius:10px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#ffffffb3;cursor:pointer;touch-action:manipulation;transition:all .3s ease}.top-menu .menu-btn:hover{background:#fff3;color:#fff;transform:scale(1.05)}.top-menu .menu-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:#1e1e3cf2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:12px;overflow:hidden;box-shadow:0 10px 40px #0006;border:1px solid rgba(255,255,255,.1);display:none}.top-menu .menu-dropdown.show{display:block}.cube-area{display:flex;flex-direction:column;align-items:center}.canvas-container{width:70vw;max-width:320px;height:35vh;min-height:180px;border-radius:16px;overflow:hidden;background:#0003;box-shadow:0 20px 60px #0006}.controls{width:100%;max-width:380px;padding:.5rem;margin-top:.5rem;display:flex;flex-direction:column;gap:.75rem}.face-controls-wrapper{display:flex;flex-direction:column;align-items:center;gap:.4rem}.view-row{display:flex;justify-content:center}.face-controls-with-views{display:flex;align-items:center;gap:.5rem}.view-btn{width:40px;height:40px;font-size:1.2rem;border:none;border-radius:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;transition:all .3s ease;touch-action:manipulation;box-shadow:0 4px 15px #667eea66}.view-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.view-btn:active{transform:translateY(0) scale(.95)}.section-label{font-size:.65rem;font-weight:600;color:#ffffff80;text-transform:uppercase;letter-spacing:1px;margin-bottom:.25rem}.menu-item{display:block;width:100%;padding:.75rem 1.25rem;font-size:.85rem;border:none;background:transparent;color:#fffc;cursor:pointer;text-align:left;white-space:nowrap;transition:all .2s ease;touch-action:manipulation}.menu-item:hover:not(:disabled){background:#ffffff1a;color:#fff}.menu-item:disabled{color:#ffffff4d;cursor:not-allowed}.face-controls-spatial{display:flex;flex-direction:column;align-items:center;gap:6px}.face-row{display:flex;justify-content:center;gap:6px}.face-tile{display:flex;gap:3px;padding:8px 10px;border-radius:16px;background:linear-gradient(145deg,var(--face-color),color-mix(in srgb,var(--face-color) 70%,black));box-shadow:0 6px 20px #0006,inset 0 1px #ffffff4d;border:2px solid rgba(255,255,255,.2)}.rotate-btn{width:52px;height:52px;font-size:1.8rem;font-weight:700;border:none;border-radius:12px;background:#0000004d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;cursor:pointer;transition:all .15s ease;touch-action:manipulation;display:flex;align-items:center;justify-content:center;text-shadow:0 2px 4px rgba(0,0,0,.5);box-shadow:inset 0 -2px 4px #0003,inset 0 1px #ffffff1a}.rotate-btn:hover:not(:disabled){background:#00000080;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d,inset 0 -2px 4px #0003,inset 0 1px #ffffff1a}.rotate-btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 4px #0000004d}.rotate-btn:disabled{background:#0000001a;cursor:not-allowed;opacity:.4;box-shadow:none}.rotate-btn.light-bg{color:#333;text-shadow:none;background:#00000026}.rotate-btn.light-bg:hover:not(:disabled){background:#00000040}.algorithm-controls{display:flex;flex-direction:column;align-items:center;gap:.5rem}.algorithm-buttons{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}.algo-btn{padding:.5rem .75rem;font-size:.75rem;font-weight:600;border:none;border-radius:10px;background:linear-gradient(135deg,#f5af19,#f12711);color:#fff;cursor:pointer;transition:all .3s ease;touch-action:manipulation;box-shadow:0 3px 10px #f5af194d}.algo-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #f5af1980}.algo-btn:active:not(:disabled){transform:translateY(0) scale(.95)}.algo-btn:disabled{background:#ffffff1a;box-shadow:none;cursor:not-allowed}.custom-algorithms{width:100%;max-width:380px;padding:.75rem 1rem;background:#ffffff0d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;margin-top:.5rem;margin-bottom:1rem;border:1px solid rgba(255,255,255,.1)}.custom-algorithms-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.edit-toggle-btn{width:30px;height:30px;font-size:1rem;border:none;border-radius:8px;background:#ffffff1a;color:#ffffffb3;cursor:pointer;transition:all .3s ease}.edit-toggle-btn:hover{background:#fff3;color:#fff}.custom-algorithms-edit{display:flex;flex-direction:column;gap:.5rem}.custom-algo-item{background:#ffffff0d;padding:.6rem;border-radius:10px;border:1px solid rgba(255,255,255,.05)}.algo-edit-form{display:flex;flex-direction:column;gap:.4rem}.algo-input{padding:.5rem .75rem;font-size:.85rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#0000004d;color:#fff;transition:all .3s ease}.algo-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.algo-name-input{max-width:120px}.algo-edit-actions{display:flex;gap:.4rem;margin-top:.25rem}.algo-action-btn{padding:.4rem .75rem;font-size:.75rem;font-weight:600;border:none;border-radius:6px;background:#ffffff1a;color:#fffc;cursor:pointer;transition:all .3s ease}.algo-action-btn:hover{background:#fff3;color:#fff}.algo-action-btn.save{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff}.algo-action-btn.save:hover{box-shadow:0 4px 15px #38ef7d66}.algo-action-btn.delete{background:linear-gradient(135deg,#cb2d3e,#ef473a);color:#fff}.algo-action-btn.delete:hover{box-shadow:0 4px 15px #ef473a66}.algo-action-btn.cancel{background:#ffffff1a}.algo-error{color:#ff6b6b;font-size:.75rem;margin-top:.25rem}.algo-display{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.algo-display-name{font-weight:600;color:#fff;min-width:80px}.algo-display-formula{font-family:SF Mono,Monaco,monospace;font-size:.8rem;color:#ffffff80;flex:1}.algo-display-actions{display:flex;gap:.25rem}.algo-add-btn{padding:.5rem 1rem;font-size:.8rem;border:1px dashed rgba(255,255,255,.2);border-radius:10px;background:transparent;color:#ffffff80;cursor:pointer;transition:all .3s ease}.algo-add-btn:hover{border-color:#fff6;color:#fffc;background:#ffffff0d}.algo-btn-custom{background:linear-gradient(135deg,#667eea,#764ba2)}.algo-btn-custom:hover:not(:disabled){box-shadow:0 5px 15px #667eea80}.custom-empty{color:#fff6;font-size:.8rem;text-align:center;padding:.5rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-content{background:linear-gradient(135deg,#1a1a3e,#2d2d5a);border-radius:20px;width:100%;max-width:400px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #00000080;border:1px solid rgba(255,255,255,.1)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}.modal-header h2{font-size:1.1rem;font-weight:600;margin:0;color:#fff}.modal-close-btn{width:36px;height:36px;font-size:1.2rem;border:none;border-radius:10px;background:#ffffff1a;color:#ffffffb3;cursor:pointer;transition:all .3s ease}.modal-close-btn:hover{background:#fff3;color:#fff}.modal-body{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.stopwatch{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.6rem 1.25rem;background:#ffffff0d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;margin-bottom:.5rem;border:1px solid rgba(255,255,255,.1)}.stopwatch-display{font-family:SF Mono,Monaco,Courier New,monospace;font-size:2rem;font-weight:700;color:#fff;min-width:110px;text-align:center;text-shadow:0 0 20px rgba(255,255,255,.3)}.stopwatch-display.running{color:#4ade80;text-shadow:0 0 30px rgba(74,222,128,.5)}.stopwatch-display.stopped{color:#fbbf24;text-shadow:0 0 30px rgba(251,191,36,.5)}.stopwatch-controls{display:flex;align-items:center;gap:.5rem}.stopwatch-btn{padding:.6rem 1.25rem;font-size:.85rem;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;touch-action:manipulation}.stopwatch-btn.start{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff;box-shadow:0 4px 15px #38ef7d66}.stopwatch-btn.start:hover{transform:translateY(-2px);box-shadow:0 6px 20px #38ef7d99}.stopwatch-btn.reset{background:#ffffff1a;color:#fffc}.stopwatch-btn.reset:hover{background:#fff3;color:#fff}.stopwatch-hint{font-size:.7rem;color:#fff6}@media(max-width:480px){.mini-cube-container{width:70px;height:70px;top:.5rem;left:.5rem;border-radius:10px}.app{padding:.5rem;height:100dvh;overflow:hidden}h1{font-size:1.1rem}.header .menu-btn{width:32px;height:32px;font-size:1rem}.canvas-container{width:65vw;height:28vh;min-height:140px;border-radius:12px}.view-btn{width:34px;height:34px;font-size:1rem;border-radius:10px}.face-controls-with-views{gap:.3rem}.controls{padding:.25rem;gap:.5rem;max-width:340px}.section-label{font-size:.6rem}.face-controls-spatial{gap:4px;padding:.5rem}.face-row{gap:4px}.face-tile{padding:6px 8px;gap:3px;border-radius:12px}.rotate-btn{width:44px;height:44px;font-size:1.5rem;border-radius:10px}.algorithm-buttons{gap:.3rem}.algo-btn{padding:.4rem .6rem;font-size:.7rem;border-radius:8px}.custom-algorithms{padding:.6rem .75rem;border-radius:14px;max-width:340px}.stopwatch{padding:.5rem 1rem;gap:.75rem;border-radius:14px}.stopwatch-display{font-size:1.5rem;min-width:85px}.stopwatch-btn{padding:.5rem 1rem;font-size:.8rem;border-radius:10px}.stopwatch-hint{font-size:.6rem}}