:root{--bg-color:#0c0d12;--text-color:#f3f4f6;--accent-color:#3b82f6;--accent-gradient:linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);--panel-bg:#161821b8;--panel-border:#ffffff14;--btn-bg:#1e2330cc;--btn-hover:#3b82f633}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;padding:20px;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;overflow-x:hidden}.app-container{flex-direction:column;gap:24px;width:100%;max-width:1120px;display:flex}.app-header{text-align:center;margin-top:10px;position:relative}.top-nav{justify-content:center;gap:12px;margin-bottom:16px;display:flex}.nav-btn{background:var(--btn-bg);border:1px solid var(--panel-border);color:#9ca3af;cursor:pointer;border-radius:12px;padding:8px 18px;font-family:Outfit,sans-serif;font-size:.9rem;font-weight:600;transition:all .2s}.nav-btn:hover{color:var(--text-color);background:var(--btn-hover);border-color:#64748b;transform:translateY(-2px)}.nav-btn.hidden,.hidden{display:none!important}.app-header h1{letter-spacing:-.5px;background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:6px;font-size:2.4rem;font-weight:800}.app-header .subtitle{color:#9ca3af;font-size:1rem;font-weight:300}.main-content{grid-template-columns:1fr;justify-content:center;align-items:center;gap:28px;display:grid}@media (width>=860px){.main-content{grid-template-columns:3fr 2fr}}.canvas-wrapper{border:1px solid var(--panel-border);aspect-ratio:1.2;background:#0d0e12;border-radius:20px;min-height:400px;position:relative;overflow:hidden;box-shadow:0 20px 50px #0006,0 0 40px #3b82f60d}#cube-canvas{cursor:grab;width:100%;height:100%;display:block}#cube-canvas:active{cursor:grabbing}.controls-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#0d0e12d9;border:1px solid #ffffff0d;border-radius:12px;padding:6px 14px;position:absolute;bottom:12px;left:16px}.controls-overlay .label{color:#9ca3af;font-size:.85rem}.control-panel{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:20px;flex-direction:column;gap:24px;padding:24px;display:flex;box-shadow:0 15px 35px #0000004d}.panel-section h3,.panel-section h4{text-transform:uppercase;letter-spacing:1px;color:#64748b;margin-bottom:12px;font-size:.85rem;font-weight:600}.button-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.cube-btn{color:var(--text-color);background:var(--btn-bg);border:1px solid var(--panel-border);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;padding:12px 6px;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.cube-btn:hover{background:var(--btn-hover);border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 0 15px #3b82f640}.cube-btn:active{transform:translateY(1px)}.action-section{flex-direction:column;gap:10px;display:flex}.action-btn{cursor:pointer;text-align:center;border:none;border-radius:14px;padding:14px;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;transition:all .2s}.scramble-btn{background:var(--accent-gradient);color:#fff}.scramble-btn:hover{opacity:.92;transform:translateY(-2px);box-shadow:0 0 20px #3b82f666}.reset-btn{color:#9ca3af;border:1px solid var(--panel-border);background:#ffffff0a}.reset-btn:hover{color:var(--text-color);background:#ffffff14;border-color:#64748b;transform:translateY(-2px)}.help-section ul{flex-direction:column;gap:8px;list-style:none;display:flex}.help-section li{color:#94a3b8;font-size:.88rem;line-height:1.4}.help-section strong{color:var(--text-color)}.help-section code{color:#60a5fa;background:#3b82f626;border-radius:4px;padding:2px 6px;font-size:.85rem}.page-content{display:none}.page-content.active{display:block}.welcome-card{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;border-radius:24px;max-width:680px;margin:20px auto;padding:40px;box-shadow:0 15px 45px #0006}.welcome-card h2{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:12px;font-size:1.8rem;font-weight:800}.welcome-card p{color:#9ca3af;margin-bottom:32px;font-size:1.05rem}.mode-buttons{flex-direction:column;justify-content:center;align-items:stretch;gap:18px;display:flex}@media (width>=600px){.mode-buttons{flex-direction:row}}.mode-select-btn{background:var(--btn-bg);border:1px solid var(--panel-border);cursor:pointer;border-radius:16px;flex-direction:column;flex:1;align-items:center;gap:12px;padding:24px 16px;font-family:Outfit,sans-serif;transition:all .25s;display:flex}.mode-select-btn:hover{background:var(--btn-hover);border-color:#3b82f6;transform:translateY(-4px);box-shadow:0 10px 25px #3b82f626}.mode-title{color:var(--text-color);font-size:1.15rem;font-weight:600}.guide-card{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;max-width:900px;margin:0 auto;padding:36px;box-shadow:0 15px 45px #0006}.guide-card h2{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:1.8rem;font-weight:800}.guide-card p{color:#94a3b8;margin-bottom:24px;font-size:1.05rem}.guide-steps{grid-template-columns:1fr;gap:20px;margin-bottom:32px;display:grid}@media (width>=600px){.guide-steps{grid-template-columns:1fr 1fr}}.step-box{border:1px solid var(--panel-border);background:#ffffff08;border-radius:16px;padding:20px;transition:all .2s}.step-box:hover{background:#ffffff0d;border-color:#3b82f640;transform:translateY(-2px)}.step-box h3,.step-box h4{color:#60a5fa;margin-bottom:8px;font-size:1.1rem;font-weight:600}.category-heading{color:var(--text-color);border-left:4px solid #3b82f6;margin-bottom:16px;padding-left:12px;font-size:1.3rem;font-weight:700}.step-box code{color:#60a5fa;background:#3b82f626;border-radius:4px;padding:2px 6px;font-size:.85rem}.step-box p{color:#94a3b8;margin-bottom:0;font-size:.92rem;line-height:1.5}.back-to-game{background:var(--accent-gradient);color:#fff;max-width:240px;margin:0 auto;display:block}.back-to-game:hover{opacity:.92;box-shadow:0 0 20px #3b82f666}.success-overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10;background:#0d0e12d1;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s cubic-bezier(.4,0,.2,1) fadeIn;display:flex;position:absolute;top:0;left:0}.success-overlay.hidden{display:none!important}.success-content{text-align:center;background:#161821d9;border:1px solid #ffffff1a;border-radius:20px;padding:24px 32px;animation:.3s cubic-bezier(.4,0,.2,1) scaleUp;box-shadow:0 15px 45px #00000080,0 0 40px #10b9811a}.success-content h3{background:linear-gradient(135deg,#10b981 0%,#3b82f6 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:1.6rem;font-weight:800}.success-content p{color:#94a3b8;margin-bottom:16px;font-size:1.05rem}.success-content strong{color:#f3f4f6}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.more-games-card{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;border-radius:24px;max-width:680px;margin:20px auto;padding:32px 40px;animation:.4s fadeIn;box-shadow:0 15px 45px #0006}.more-games-card h2{background:linear-gradient(135deg,#a855f7 0%,#ec4899 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:1.5rem;font-weight:800}.more-games-card p{color:#94a3b8;margin-bottom:24px;font-size:.95rem}.games-buttons{flex-direction:column;justify-content:center;align-items:stretch;gap:16px;display:flex}@media (width>=600px){.games-buttons{flex-direction:row}}.game-select-btn{border:1px solid var(--panel-border);cursor:pointer;text-align:left;background:#ffffff05;border-radius:16px;flex-direction:row;flex:1;justify-content:flex-start;align-items:center;gap:16px;padding:20px 16px;font-family:Outfit,sans-serif;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.game-select-btn:hover{background:#ec48990f;border-color:#ec4899;transform:translateY(-4px);box-shadow:0 10px 25px #ec48991f,0 0 15px #a855f71a}.game-icon{font-size:2.2rem;line-height:1}.game-info{flex-direction:column;gap:4px;display:flex}.game-title{color:var(--text-color);font-size:1.1rem;font-weight:700;transition:color .2s}.game-select-btn:hover .game-title{color:#f472b6}.game-desc{color:#64748b;font-size:.8rem;font-weight:400}.bgm-player{z-index:1000;font-family:Outfit,sans-serif;transition:all .35s cubic-bezier(.4,0,.2,1);position:fixed;bottom:24px;right:24px}.bgm-trigger{background:var(--accent-gradient);cursor:pointer;border:1px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:54px;height:54px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 8px 32px #3b82f659,0 0 15px #3b82f61a}.bgm-trigger:hover{transform:scale(1.08)translateY(-2px);box-shadow:0 12px 36px #3b82f673,0 0 25px #8b5cf633}.bgm-icon-note{font-size:1.4rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bgm-player.playing .bgm-trigger .bgm-icon-note{animation:4s linear infinite spin}.bgm-card{-webkit-backdrop-filter:blur(16px)saturate(180%);opacity:0;pointer-events:none;background:#0f172abf;border:1px solid #ffffff14;border-radius:20px;flex-direction:column;gap:12px;width:280px;padding:16px;transition:all .35s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;bottom:0;right:0;transform:scale(.85)translateY(20px);box-shadow:0 20px 40px #00000073,0 0 30px #3b82f60d}.bgm-player.minimized .bgm-card{opacity:0;pointer-events:none;transform:scale(.85)translateY(20px)}.bgm-player.expanded .bgm-card{opacity:1;pointer-events:all;transform:scale(1)translateY(0)}.bgm-player.expanded .bgm-trigger{opacity:0;pointer-events:none;transform:scale(.5)}.bgm-header{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding-bottom:8px;display:flex}.bgm-card-title{text-transform:uppercase;letter-spacing:1px;color:#64748b;font-size:.8rem;font-weight:700}.bgm-close-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:1.2rem;line-height:1;transition:color .2s}.bgm-close-btn:hover{color:#f3f4f6}.bgm-body{align-items:center;gap:12px;display:flex}.disc-container{width:44px;height:44px;position:relative}.music-disc{background:radial-gradient(circle,#1e293b 30%,#0f172a 70%);border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.3rem;display:flex;box-shadow:0 4px 10px #0000004d}.bgm-player.playing .music-disc{animation:6s linear infinite spin}.bgm-info{flex-direction:column;flex:1;min-width:0;display:flex}.bgm-song-name{color:#f3f4f6;white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:600;overflow:hidden}.bgm-status{color:#64748b;font-size:.75rem}.music-visualizer{align-items:flex-end;gap:3px;height:16px;padding-right:4px;display:flex}.visualizer-bar{background:var(--accent-gradient);transform-origin:bottom;border-radius:1.5px;width:3px;height:100%;transition:transform .2s;transform:scaleY(.2)}.bgm-player.playing .visualizer-bar{transform:scaleY(1)}.bgm-player.playing .visualizer-bar:first-child{animation:.8s ease-in-out infinite alternate bounce}.bgm-player.playing .visualizer-bar:nth-child(2){animation:1.1s ease-in-out infinite alternate-reverse bounce}.bgm-player.playing .visualizer-bar:nth-child(3){animation:.9s ease-in-out infinite alternate bounce}.bgm-player.playing .visualizer-bar:nth-child(4){animation:1.2s ease-in-out infinite alternate-reverse bounce}.bgm-player.playing .visualizer-bar:nth-child(5){animation:.7s ease-in-out infinite alternate bounce}@keyframes bounce{0%{transform:scaleY(.2)}to{transform:scaleY(1)}}.bgm-controls{align-items:center;gap:12px;margin-top:4px;display:flex}.bgm-play-btn{background:var(--btn-bg);border:1px solid var(--panel-border);color:#f3f4f6;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;padding:0;transition:all .2s;display:flex}.bgm-play-btn:hover{background:var(--btn-hover);border-color:#3b82f6;transform:scale(1.05)}.bgm-volume-container{border:1px solid var(--panel-border);background:#ffffff05;border-radius:10px;flex:1;align-items:center;gap:8px;padding:6px 12px;display:flex}.volume-icon{color:#94a3b8;font-size:.9rem}.bgm-volume-slider{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:2px;outline:none;flex:1;height:4px}.bgm-volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#3b82f6;border-radius:50%;width:12px;height:12px;transition:background .15s,transform .15s}.bgm-volume-slider::-webkit-slider-thumb:hover{background:#60a5fa;transform:scale(1.2)}.bgm-volume-slider::-moz-range-thumb{cursor:pointer;background:#3b82f6;border:none;border-radius:50%;width:12px;height:12px;transition:background .15s,transform .15s}.bgm-volume-slider::-moz-range-thumb:hover{background:#60a5fa;transform:scale(1.2)}@media (width<=600px){.bgm-player{bottom:16px;right:16px}.bgm-card{width:250px}}