:root{--bg:#f6f7f9;--ink:#252d3a;--muted:#9298a4;--line:#e9ebef;--green:#26896c;--green-light:#eaf4ef}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif;font-size:14px}button,select{font:inherit;cursor:pointer;color:inherit}button{border:1px solid #e3e6eb;background:white;border-radius:8px;padding:11px 17px;transition:background .18s,transform .18s}button:hover{background:#f0f3f2;transform:translateY(-1px)}button:focus-visible,select:focus-visible{outline:3px solid #89c9b4;outline-offset:3px}button:disabled{opacity:.4;cursor:default;transform:none}header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);background:#ffffffb0}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);font-size:24px;font-weight:700;text-decoration:none}.brand-icon{color:white;background:#2e8068;border-radius:9px;padding:0 6px;font-size:29px;line-height:36px}.brand small{font-size:10px;letter-spacing:2px;color:#9197a1;font-weight:500;border-left:1px solid #ddd;padding-left:16px;margin-left:5px}.header-note{color:#949aa3;font-size:12px}header>button{background:transparent;border:0;font-size:12px}header>button span{margin-left:14px}main{max-width:1260px;margin:auto;padding:48px 36px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{font-size:10px;color:#4b8b75;letter-spacing:2.3px;font-weight:600}h1{font-size:38px;letter-spacing:-1.5px;margin:13px 0 12px;font-weight:700}.intro p{color:#8a929d;margin:0;font-size:13px}.edition{text-align:right;display:flex;flex-direction:column}.edition>span{font-size:36px;color:#c3c9d0;letter-spacing:3px;font-weight:500}.edition small{color:#9da3ad;font-size:10px;letter-spacing:2px}.workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);gap:22px}.stage-panel,.solver-panel{border:1px solid #e4e7eb;background:#fff;border-radius:15px;overflow:hidden}.panel-top{display:flex;align-items:center;justify-content:space-between;padding:22px 24px}.section-label{font-size:12px;font-weight:500;letter-spacing:.5px}.section-label i{display:inline-block;width:6px;height:6px;background:#3a9d7e;border-radius:50%;margin-right:6px}.badge{background:var(--green-light);color:#418c73;font-size:10px;border-radius:20px;padding:5px 10px}.stage{height:332px;position:relative;overflow:hidden;touch-action:none;cursor:grab;background:radial-gradient(ellipse at center,#fff 10%,#fafbfc 72%)}.scene{position:absolute;inset:0;perspective:950px;display:flex;align-items:center;justify-content:center}.cube{position:relative;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-32deg);pointer-events:none}.cubie{position:absolute;width:100px;height:100px;left:-50px;top:-50px;transform-style:preserve-3d}.face{width:100px;height:100px;position:absolute;border:4px solid #242930;border-radius:10px;background:#242930;backface-visibility:hidden;pointer-events:auto;display:flex;align-items:center;justify-content:center}.sticker{width:100%;height:100%;border-radius:5px;box-shadow:inset 0 0 0 1px #ffffff20,inset 0 -4px 6px #00000008}.face[data-face="0"]{transform:rotateX(90deg) translateZ(50px)}.face[data-face="1"]{transform:rotateY(90deg) translateZ(50px)}.face[data-face="2"]{transform:translateZ(50px)}.face[data-face="3"]{transform:rotateX(-90deg) translateZ(50px)}.face[data-face="4"]{transform:rotateY(-90deg) translateZ(50px)}.face[data-face="5"]{transform:rotateY(180deg) translateZ(50px)}.floor{position:absolute;bottom:25px;left:calc(50% - 115px);width:230px;height:32px;background:#34443b24;filter:blur(16px);border-radius:50%}.axis{position:absolute;color:#b5bcc5;font-size:10px;pointer-events:none;letter-spacing:1px}.axis-u{top:19px;left:49%}.axis-f{bottom:19px;left:24%}.axis-r{right:17%;bottom:52px}.view-tools{display:flex;justify-content:space-between;align-items:center;margin:4px 24px 20px;color:#a0a7b0;font-size:10px}.view-tools button{font-size:10px;padding:5px 8px;border:0;background:transparent;color:#7c8592}.stage-actions{display:flex;gap:10px;padding:0 24px 23px}.stage-actions button{font-size:12px}.dark{background:#29313d;color:white;border-color:#29313d}.dark:hover{background:#414b59}.icon-button{margin-left:auto}.turns{border-top:1px solid var(--line);padding:20px 24px;background:#fcfcfd}.turn-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:13px}.turn-heading label{font-size:10px;color:#8c939f;display:flex;align-items:center;gap:4px}input{accent-color:var(--green)}#moveButtons{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}#moveButtons button{font-size:15px;padding:9px;font-weight:500;box-shadow:0 2px 0 #eff0f2}#moveButtons button small{display:block;font-size:8px;font-weight:400;color:#a2a8b2;margin-top:3px}.turns>small{display:block;font-size:9px;color:#a6adb6;margin-top:14px}.solver-panel{padding:0 26px 23px}.tabs{display:flex;border-bottom:1px solid var(--line);gap:26px;margin-bottom:29px}.tabs button{border:0;border-radius:0;background:none;padding:21px 0 17px;color:#969daa;font-size:12px;position:relative}.tabs button.active{color:var(--green);font-weight:600}.tabs .active:after{content:'';height:2px;position:absolute;bottom:0;left:0;right:0;background:var(--green)}.step-tag{font-size:9px;letter-spacing:1.7px;color:#9ca3af}h2{font-size:22px;letter-spacing:-.6px;margin:11px 0 14px}.muted{color:#939ba6;font-size:12px;line-height:1.95}.primary{display:flex;justify-content:space-between;align-items:center;background:var(--green);color:white;border:0;width:100%;font-size:12px;padding:14px 17px}.primary:hover{background:#1d755b}#solve,#loadPreset{margin:24px 0}select{background:#f9fafb;border:1px solid var(--line);border-radius:6px;padding:8px}#preset{width:100%;font-size:12px}.solution{border-top:1px solid var(--line);padding-top:20px}.solution-heading{display:flex;justify-content:space-between;align-items:center}.solution-heading h3{margin:0;font-size:12px;font-weight:500}.solution-heading span{font-size:10px;color:#8a929f;background:#f5f6f8;padding:3px 8px;border-radius:4px}.formula{min-height:113px;padding:15px 0;display:flex;gap:6px;align-content:center;align-items:center;flex-wrap:wrap}.formula:has(.empty-mark){display:block;text-align:center;color:#a0a7b0}.empty-mark{font-size:26px;color:#c4d4cd;line-height:27px}.formula p{font-size:11px;margin:6px 0}.formula small{font-size:9px;color:#b0b6be}.formula button{padding:7px 9px;font-size:15px;background:#f3f5f7;border:0;min-width:34px}.formula button.done{color:#a1aea7;background:#edf2ef}.formula button.current{color:white;background:var(--green)}.progress{height:3px;background:#eef1f3;border-radius:3px;overflow:hidden}.progress div{height:100%;background:#4a9f82;width:0;transition:width .3s}.playback{display:flex;align-items:center;gap:13px;margin:17px 0 15px}.playback button{border:0;padding:6px;color:#687382;background:none}.playback .play{border:1px solid #e6e9ed;border-radius:50%;height:38px;width:38px;background:#f8faf9;color:#2c7960;font-size:12px}.playback>span{font-size:10px;color:#8c95a1;margin-left:4px}.playback select{margin-left:auto;font-size:10px;padding:4px}#message{font-size:10px;color:#96a09b;min-height:16px;line-height:1.6}.notation{border:1px solid #edf0ef;border-radius:8px;background:#f8faf9;padding:14px;display:flex;gap:12px;margin-top:19px}.book-icon{color:#8bafa0}.notation b{font-size:10px;font-weight:500}.notation p{font-size:9px;line-height:1.9;color:#99a29f;margin:5px 0 0}.bottom-strip{display:grid;grid-template-columns:repeat(3,1fr);padding:29px 0 25px;gap:20px}.bottom-strip>div{position:relative;padding-left:37px}.bottom-strip span{position:absolute;left:0;top:0;color:#a5b3ab;font-size:13px}.bottom-strip b{font-size:11px;font-weight:500}.bottom-strip p{font-size:10px;color:#a3aab3;margin:7px 0}footer{display:flex;justify-content:space-between;border-top:1px solid #e4e7ec;padding:20px 0 25px;color:#a5adb7;font-size:9px}footer span:last-child{letter-spacing:1px}dialog{border:1px solid var(--line);border-radius:17px;padding:28px;width:min(760px,94vw);box-shadow:0 30px 100px #26372e30;color:var(--ink)}dialog::backdrop{background:#182c2655;backdrop-filter:blur(5px)}.modal-head{display:flex;align-items:center;justify-content:space-between}.modal-head button{border:0}.paint-layout{display:grid;grid-template-columns:1fr 220px;gap:20px}.mini{height:310px;border:1px solid var(--line);border-radius:12px}.mini .scene{scale:.78}.mini .sticker:hover{filter:brightness(1.15);outline:3px solid #ffffffc0}.paint-controls{padding-top:16px}.paint-controls>b{font-size:12px}#palette{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}#palette button{padding:6px 2px;font-size:9px;background:white}#palette button i{display:block;width:26px;height:26px;border-radius:6px;margin:0 auto 5px;border:1px solid #0001}#palette button.selected{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}.paint-controls p{font-size:10px;color:#9ba3ad;line-height:1.9}.quick-views{display:flex;gap:5px;margin:12px 0}.quick-views button,#paintReset{font-size:10px;padding:7px 10px}#paintError{font-size:11px;color:#7a897f;margin-top:19px;line-height:1.8}#paintError.error{color:#c65048}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.modal-actions .primary{width:auto;min-width:180px}#helpDialog{max-width:580px}#helpDialog>p{font-size:13px;line-height:1.9}body.modal-open{overflow:hidden}[hidden]{display:none!important}@media(min-width:1500px){main{padding-top:64px}.stage{height:365px}}@media(max-width:800px){header{height:70px;padding:0 20px}.brand small,.header-note{display:none}main{padding:30px 16px 0}.intro{margin-bottom:24px}h1{font-size:29px}.intro p{font-size:11px;max-width:250px;line-height:1.8}.edition>span{font-size:27px}.workspace{grid-template-columns:1fr}.stage{height:315px}.solver-panel{padding:0 22px 22px}.bottom-strip{gap:8px}.bottom-strip>div{padding-left:0}.bottom-strip span{position:static;display:block;margin-bottom:9px}.bottom-strip p{line-height:1.8;font-size:9px}footer span:last-child{display:none}.paint-layout{grid-template-columns:1fr}.paint-controls{padding-top:0}#palette{grid-template-columns:repeat(6,1fr)}.paint-controls p{margin-bottom:4px}.quick-views{display:inline-flex}.mini{height:260px}.mini .scene{scale:.67}dialog{padding:22px}.modal-head h2{font-size:19px}.stage-actions{padding-left:18px;padding-right:18px;gap:7px}.stage-actions button{font-size:11px;padding:11px 14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}