body{margin:0;padding:0}:root{--cube-size:200px;--sticker-size:calc(var(--cube-size) / 3.2);--gap:4px;--white:#fff;--yellow:gold;--green:#009b48;--blue:#0046ad;--red:#b71234;--orange:#ff5800;--gray:#333}body{color:#eee;background-color:#121212;justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex}#root{box-sizing:border-box;width:100%;max-width:600px;padding:20px}.app-container{flex-direction:column;align-items:center;gap:20px;display:flex}.tabs{gap:10px;margin-bottom:20px;display:flex}.tab-button{color:#888;cursor:pointer;background:#222;border:1px solid #444;border-radius:4px;padding:10px 20px;transition:all .2s}.tab-button.active{color:#fff;background:#0046ad;border-color:#0056d6}.cube-input-container{background:#1e1e1e;border-radius:12px;padding:40px;position:relative;box-shadow:0 10px 30px #00000080}.top-view{grid-template-columns:repeat(5, var(--sticker-size));grid-template-rows:repeat(5, var(--sticker-size));gap:var(--gap);display:grid}.sticker{width:var(--sticker-size);height:var(--sticker-size);cursor:pointer;border-radius:4px;transition:transform .1s}.sticker:hover{transform:scale(1.05);box-shadow:inset 0 0 10px #fff3}.sticker.white{background-color:var(--white)}.sticker.yellow{background-color:var(--yellow)}.sticker.green{background-color:var(--green)}.sticker.blue{background-color:var(--blue)}.sticker.red{background-color:var(--red)}.sticker.orange{background-color:var(--orange)}.sticker.gray{background-color:var(--gray)}.corner-view{perspective:1000px;justify-content:center;align-items:center;height:300px;display:flex}.isometric-cube{width:var(--cube-size);height:var(--cube-size);transform-style:preserve-3d;position:relative;transform:rotateX(-30deg)rotateY(45deg)}.face{gap:var(--gap);width:var(--cube-size);height:var(--cube-size);padding:var(--gap);box-sizing:border-box;background:#000;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid;position:absolute}.face-u{transform:rotateX(90deg) translateZ(calc(var(--cube-size) / 2))}.face-f{transform:translateZ(calc(var(--cube-size) / 2))}.face-r{transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2))}.palette{background:#222;border-radius:30px;gap:10px;margin-top:20px;padding:15px;display:flex}.palette-color{cursor:pointer;border:2px solid #0000;border-radius:50%;width:30px;height:30px}.palette-color.active{border-color:#fff;transform:scale(1.2)}.algorithm-result{text-align:center;background:#222;border-radius:8px;width:100%;margin-top:30px;padding:20px}.algorithm-text{color:#0f0;margin-top:10px;font-family:Courier New,Courier,monospace;font-size:1.2em}