:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;box-sizing:border-box;flex-direction:column;width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.app{box-sizing:border-box;text-align:center;width:100%;margin:0;padding:24px 32px 40px}.app-header{border-bottom:1px solid #e9ecef;max-width:760px;margin:0 auto 32px;padding:16px 0 28px}.app-header h1{color:#222;margin:0 0 28px;line-height:1.1}.instructions{color:#555;background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;margin:0;padding:14px 22px;font-size:16px;line-height:1.7;display:inline-block}.cube-views{justify-content:center;align-items:center;min-height:600px;margin:20px auto 40px;display:flex;position:relative}.faces-side{z-index:1;flex-direction:column;align-items:center;gap:16px;width:calc(50% - 200px);display:flex;position:absolute;top:0;left:0}.toggle-faces{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:999px;align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:600;transition:transform .15s,box-shadow .15s,filter .15s;display:inline-flex;box-shadow:0 4px 12px #6366f159}.toggle-faces:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 6px 16px #6366f173}.toggle-faces:active{transform:translateY(0)}.toggle-faces[aria-pressed=false]{background:linear-gradient(135deg,#14b8a6,#0ea5e9);box-shadow:0 4px 12px #0ea5e959}.toggle-faces[aria-pressed=false]:hover{box-shadow:0 6px 16px #0ea5e973}.toggle-faces .toggle-icon{font-size:16px;line-height:1}.faces-panel{justify-content:center;display:flex}.cube-display{grid-template-rows:repeat(3,104px);grid-template-columns:repeat(4,78px);justify-content:center;gap:8px;display:grid}@media (width>=1400px){.cube-display{grid-template-rows:repeat(3,124px);grid-template-columns:repeat(4,96px);gap:10px}}@media (width<=1100px){.cube-views{flex-direction:column;align-items:center;gap:20px}.faces-side{width:100%;position:static}}.cube-3d{touch-action:none;background:0 0;width:760px;max-width:100%;height:600px;margin-bottom:24px;position:relative}.cube-3d canvas{display:block;width:100%!important;height:100%!important}.cube-3d-hint{text-align:center;color:#6c757d;pointer-events:none;font-size:12px;position:absolute;bottom:-22px;left:0;right:0}.cube-face-container{flex-direction:column;align-items:center;gap:5px;display:flex}.face-label{color:#333;height:18px;font-size:14px;font-weight:700;line-height:18px}.cube-face{cursor:pointer;background:#f0f0f0;border:2px solid #333;border-radius:8px;width:100%;height:100%;padding:5px;transition:all .3s}.cube-face.selected{border-color:#007bff;box-shadow:0 0 10px #007bff80}.face-grid{grid-template-columns:repeat(3,1fr);gap:2px;width:100%;height:100%;display:grid}.sticker{aspect-ratio:1;cursor:pointer;border-radius:4px;transition:transform .2s}.sticker:hover{z-index:10;transform:scale(1.1)}.cube-face-container:first-child{grid-area:1/2}.cube-face-container:nth-child(2){grid-area:2/1}.cube-face-container:nth-child(3){grid-area:2/2}.cube-face-container:nth-child(4){grid-area:2/3}.cube-face-container:nth-child(5){grid-area:2/4}.cube-face-container:nth-child(6){grid-area:3/2}.color-palette{justify-content:center;gap:10px;margin:20px 0;display:flex}.color-button{cursor:pointer;border:2px solid #333;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;transition:all .3s;display:flex}.color-button.selected{border-width:4px;transform:scale(1.2);box-shadow:0 0 10px #0000004d}.solve-button{color:#fff;cursor:pointer;background:#007bff;border:none;border-radius:6px;margin-top:20px;padding:12px 24px;font-size:16px;transition:background .3s}.solve-button:disabled{cursor:not-allowed;background:#ccc}.controls{justify-content:center;gap:10px;margin:20px 0;display:flex}.reset-button{color:#fff;cursor:pointer;background:#6c757d;border:none;border-radius:6px;padding:12px 24px;font-size:16px;transition:background .3s}.reset-button:hover{background:#5a6268}.solve-button:not(:disabled):hover{background:#0056b3}.error-message{color:#dc3545;margin:10px 0;font-weight:700}.status-message{color:#495057;margin:10px 0;font-style:italic}.solution-display{background:#f8f9fa;border-radius:10px;margin-top:30px;padding:20px}.step-controls{justify-content:center;align-items:center;gap:20px;margin:20px 0;display:flex}.step-controls button{color:#fff;cursor:pointer;background:#007bff;border:none;border-radius:4px;padding:8px 16px;font-size:14px;transition:background .3s}.step-controls button:disabled{cursor:not-allowed;background:#ccc}.step-counter{color:#333;font-weight:700}.current-move{background:#e7f3ff;border-radius:8px;margin:20px 0;padding:15px}.current-move h3{color:#0056b3;margin:0 0 10px}.solution-moves{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;display:flex}.move{cursor:pointer;background:#e9ecef;border-radius:4px;padding:6px 10px;font-weight:700;transition:all .3s}.move.current{color:#fff;background:#007bff;transform:scale(1.1);box-shadow:0 0 10px #007bff80}.move.completed{color:#fff;opacity:.7;background:#28a745}.instructions strong{color:#222;background-color:#fff;border:1px solid #dee2e6;border-radius:6px;padding:2px 8px;font-weight:600}@keyframes pulse{0%{box-shadow:0 0 #ffc107b3}70%{box-shadow:0 0 0 10px #ffc10700}to{box-shadow:0 0 #ffc10700}}@keyframes rotate-face{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.cube-face.active{background-color:#fff3cd;border-color:#ffc107;animation:.8s ease-out pulse}.cube-face.active .sticker{animation:.8s ease-in-out rotate-face}.active-move{transition:transform .3s;transform:scale(1.05)}.rotation-indicator{background:#fff3cd;border:2px solid #ffc107;border-radius:8px;flex-direction:column;align-items:center;margin:20px 0;padding:15px;display:flex}.arrow{font-size:48px;animation:1s infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.direction-text{color:#856404;margin-top:5px;font-weight:700}