*{margin:0;padding:0;box-sizing:border-box}:root{--bg-color: #0a0a0a;--surface-color: #141414;--text-primary: #ffffff;--text-secondary: #888888;--accent-color: #3b82f6;--border-color: #262626;--shadow-color: rgba(0, 0, 0, .5)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-color);color:var(--text-primary);overflow:hidden;-webkit-user-select:none;user-select:none}#app{width:100vw;height:100vh;position:relative}#cube-canvas{width:100%;height:100%;display:block;cursor:move}.timer-display{position:absolute;top:20px;right:20px;font-size:48px;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.02em;opacity:.9}.controls-panel{position:absolute;top:20px;left:50%;transform:translate(-50%);display:flex;gap:12px;background:var(--surface-color);padding:8px;border-radius:12px;border:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.controls-panel button,.controls-panel label{padding:8px 16px;background:transparent;border:1px solid var(--border-color);color:var(--text-primary);border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center}.controls-panel button:hover,.controls-panel label:hover{background:var(--border-color);transform:translateY(-1px)}.cube-size-btn{min-width:80px}.settings-toggle{position:absolute;top:20px;left:20px;width:40px;height:40px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.settings-toggle:hover{background:var(--border-color);transform:translateY(-1px)}.settings-panel{position:absolute;left:0;top:0;bottom:0;width:320px;background:var(--surface-color);border-right:1px solid var(--border-color);padding:24px;transform:translate(-100%);transition:transform .3s ease;overflow-y:auto;z-index:100}.settings-panel.open{transform:translate(0)}.settings-panel h2{font-size:24px;font-weight:600;margin-bottom:24px}.settings-section{margin-bottom:32px}.settings-section:last-child{margin-bottom:0}.settings-section h3{font-size:16px;font-weight:500;margin-bottom:16px;color:var(--text-secondary)}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.color-input{display:flex;align-items:center;gap:8px}.color-input label{font-size:14px;flex:1}.color-input input[type=color]{width:40px;height:40px;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;background:transparent}.reset-colors-btn{width:100%;padding:12px;background:var(--accent-color);border:none;border-radius:8px;color:#fff;font-weight:500;cursor:pointer;transition:all .2s ease}.reset-colors-btn:hover{background:#2563eb;transform:translateY(-1px)}.algorithms-container{display:grid;grid-template-columns:1fr 1fr;gap:16px}.algorithm-item{background:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;padding:12px;text-align:center;transition:all .2s ease;cursor:pointer}.algorithm-item:hover{border-color:var(--accent-color);transform:translateY(-2px)}.algorithm-item img{width:100%;height:auto;margin-bottom:8px}.algorithm-notation{font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:14px;font-weight:500;color:var(--text-primary)}.move-history{position:absolute;bottom:100px;left:20px;right:20px;max-width:400px}.move-list{height:80px;overflow:hidden;margin-bottom:8px;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:14px;line-height:20px}.move-item{transition:opacity .3s ease}.history-slider{width:100%;height:4px;background:var(--border-color);outline:none;opacity:.7;transition:opacity .2s;border-radius:2px}.history-slider:hover{opacity:1}.history-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:var(--accent-color);cursor:pointer;border-radius:6px}.move-counter{position:absolute;bottom:20px;right:20px;font-size:16px;font-weight:500;opacity:.8}.keyboard-info{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:var(--surface-color);border:1px solid var(--border-color);border-radius:12px;padding:16px 24px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;gap:32px;align-items:flex-start;max-width:90vw;overflow-x:auto}@media (max-width: 768px){.keyboard-info{gap:16px;padding:12px 16px;font-size:12px}.keyboard-section h4{font-size:11px}.key-item{font-size:12px}.key-item kbd{font-size:11px;padding:1px 4px}}.keyboard-section{min-width:fit-content}.keyboard-section h4{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.key-group{display:flex;gap:12px;flex-wrap:wrap}.key-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-primary);white-space:nowrap}.key-item kbd{background:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;padding:2px 6px;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:12px;font-weight:500;display:inline-block;min-width:20px;text-align:center;box-shadow:0 2px 4px #0003}.keyboard-note{position:absolute;top:-24px;left:50%;transform:translate(-50%);font-size:12px;color:var(--text-secondary);background:var(--surface-color);padding:4px 12px;border-radius:6px;border:1px solid var(--border-color);white-space:nowrap}.keyboard-note kbd{background:var(--bg-color);border:1px solid var(--border-color);border-radius:3px;padding:1px 4px;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:11px;margin:0 2px}.cube-size-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface-color);border:1px solid var(--border-color);border-radius:16px;padding:24px;z-index:200}.size-grid{display:grid;grid-template-columns:repeat(4,80px);gap:8px}.size-grid button{padding:16px;background:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:14px;cursor:pointer;transition:all .2s ease}.size-grid button:hover{background:var(--border-color);transform:scale(1.05)}.size-grid button.active{background:var(--accent-color);border-color:var(--accent-color)}.help-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface-color);border:1px solid var(--border-color);border-radius:16px;padding:32px;max-width:500px;z-index:300}.help-modal h3{font-size:20px;margin-bottom:20px}.help-content p{margin-bottom:8px;font-size:14px;line-height:1.6}.help-content p strong{display:block;margin-top:16px;margin-bottom:8px;color:var(--accent-color)}.close-help{margin-top:24px;padding:10px 24px;background:var(--accent-color);border:none;border-radius:8px;color:#fff;font-weight:500;cursor:pointer;transition:all .2s ease}.close-help:hover{background:#2563eb;transform:translateY(-1px)}@media (max-width: 768px){.timer-display{font-size:32px;top:10px;right:10px}.controls-panel{top:auto;bottom:100px;flex-wrap:wrap;max-width:90%}.settings-panel{width:280px}.move-history{bottom:10px;left:10px;right:10px}.move-counter{bottom:auto;top:60px;right:10px}}#gizmo{position:absolute;top:120px;right:40px;width:80px;height:80px;transform-style:preserve-3d;transform:rotateX(-30deg) rotateY(-45deg)}.gizmo-face{position:absolute;width:60px;height:60px;background-color:#80808033;border:1px solid rgba(255,255,255,.4);display:flex;justify-content:center;align-items:center;font-size:30px;font-weight:700;color:#fff;opacity:.9;transition:opacity .2s linear}#gizmo-F{transform:rotateY(0) translateZ(30px)}#gizmo-B{transform:rotateY(180deg) translateZ(30px)}#gizmo-R{transform:rotateY(90deg) translateZ(30px)}#gizmo-L{transform:rotateY(-90deg) translateZ(30px)}#gizmo-U{transform:rotateX(90deg) translateZ(30px)}#gizmo-D{transform:rotateX(-90deg) translateZ(30px)}