:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#263b35;background:#f3efe5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #c9cfc2;background:#faf8f1;border-radius:12px;padding:12px 14px;transition:background .18s,transform .18s,box-shadow .18s}button:hover:not(:disabled){background:#e6ebdd;transform:translateY(-2px)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,canvas:focus-visible,summary:focus-visible{outline:3px solid #d89736;outline-offset:4px}a{color:inherit;text-decoration:none}header{max-width:1380px;padding:26px 42px;margin:auto;display:flex;gap:28px;align-items:center;border-bottom:1px solid #dcded0}header>a:nth-child(2){margin-left:auto;font-size:14px}.brand{font-size:24px;font-weight:750;letter-spacing:-1px}.brand span{color:#c86b3c}.plain{border:0;background:transparent;font-size:13px;padding:9px}.plain:hover{background:#e8e8dc}main{max-width:1320px;padding:38px 38px 0;margin:auto}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:750;color:#788577;margin:0 0 13px}h1{font-size:42px;letter-spacing:-2px;margin:0;line-height:1.25;font-weight:650}h1 span{font-size:15px;letter-spacing:2px;margin-left:20px;vertical-align:middle;color:#9b7752;font-weight:500}.intro{color:#738075;font-size:14px;margin:13px 0 0}.stats{display:flex;gap:38px;padding-right:12px}.stats span{font-size:11px;color:#738075;display:block;margin-bottom:7px}.stats strong{font-size:28px;font-weight:500;font-variant-numeric:tabular-nums}.game-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:26px;align-items:start}.stage-card{min-width:0;background:#e5e9df;border:1px solid #d7dece;border-radius:22px;overflow:hidden}.stage-top,.stage-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 20px}.mode{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;background:#f4f4e8;padding:8px 10px;border-radius:20px}#stage{height:440px;position:relative;width:100%;background:radial-gradient(ellipse at 50% 47%,#f1f3e9,transparent 68%)}#cube{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#cube:active{cursor:grabbing}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#e5e9dfee;padding:35px;text-align:center}#loading[hidden]{display:none}.stage-hint{text-align:center;font-size:11px;color:#6b7c6b;margin:10px 12px 22px;line-height:1.7}.stage-bottom{border-top:1px solid #d2dac9;background:#edf0e5;min-height:63px}#status{font-size:12px;line-height:1.6}.stage-bottom button{white-space:nowrap}.panel{padding:24px;background:#fbf9f2;border:1px solid #dfdfd1;border-radius:20px}.panel h2,.notebook h2{font-size:21px;font-weight:600;margin:0 0 10px}.panel-head>p{font-size:12px;color:#7c8276;line-height:1.8;margin:0 0 20px}.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.face{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 8px;font-size:12px;background:transparent}.face i{width:13px;height:13px;box-shadow:inset 0 0 0 1px #0002;border-radius:4px}.face b{font-size:17px}.face[aria-pressed=true]{background:#e6eddf;border-color:#748d6c;box-shadow:0 0 0 1px #748d6c}.turns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.turns button{display:flex;flex-direction:column;align-items:center;gap:6px;background:#f1eee4;border-color:transparent;padding:13px 8px}.turns strong{font-size:28px;font-weight:400;line-height:1.1}.turns span{font-size:12px}.turns small{font-size:10px;opacity:.6}.direction{font-size:10px;color:#7c8276;margin:12px 0 24px}.primary{background:#324e40;color:#fff;border-color:#324e40;font-size:13px}.primary:hover:not(:disabled){background:#41634e}#scramble{width:100%;text-align:left;padding:16px}.secondary-row{display:flex;gap:9px;margin-top:10px}.secondary-row>button{flex:1;font-size:11px;padding:12px 8px}.result{background:#e5eedc;border:1px solid #c1d5ad;border-radius:12px;padding:14px;margin-top:16px;line-height:1.7;font-size:13px;animation:arrive .4s ease-out}details{font-size:12px;color:#6b7668;line-height:1.9;margin-top:20px}summary{cursor:pointer;min-height:28px}details p{margin:10px 0}#stop{width:100%;margin-top:10px;background:#f5e6cc}.notebook{margin-top:28px;padding:22px 0;border-top:1px solid #dbdfd1}.notebook>div{display:flex;gap:25px;align-items:center}.notebook .eyebrow{margin:0}.notebook h2{font-size:15px;margin:0}#history,#scramble-record{font-family:ui-monospace,monospace;word-spacing:9px;line-height:2;overflow-wrap:anywhere;font-size:13px;color:#58705b;max-height:100px;overflow:auto}.notebook details{margin-top:5px}footer{border-top:1px solid #dcded0;display:flex;gap:20px;justify-content:space-between;font-size:10px;color:#86907f;padding:22px 0;line-height:1.8}dialog{max-width:420px;width:calc(100% - 40px);border:1px solid #d6dccd;border-radius:20px;background:#fbf9f2;color:#263b35;padding:28px}dialog::backdrop{background:#233b3566;backdrop-filter:blur(3px)}dialog h2{font-size:21px}dialog p{font-size:13px}@keyframes arrive{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}@media(max-width:800px){header{padding:18px 20px;gap:12px}.brand{font-size:21px}main{padding:25px 18px 0}.heading{align-items:start}.stats{gap:17px;padding:0}.stats strong{font-size:21px}h1{font-size:30px}h1 span{display:block;font-size:11px;margin:8px 0 0}.intro{font-size:12px;max-width:210px;line-height:1.7}.eyebrow{font-size:8px;letter-spacing:1.1px}.game-layout{grid-template-columns:1fr;gap:16px}#stage{height:350px}.stage-top,.stage-bottom{padding:10px 14px}.stage-hint{font-size:10px;margin-bottom:14px}.panel{padding:20px}.panel-head>p{margin-bottom:13px}.faces{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.face{flex-direction:column;gap:5px;padding:9px 3px}.face span{font-size:10px}.turns{margin-top:12px}.direction{margin-bottom:16px}.panel details{margin-top:15px}.notebook>div{gap:15px}footer{flex-direction:column;gap:6px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}body.no-motion *{animation:none!important;transition:none!important}[hidden]{display:none!important}

.stats{flex-shrink:0}.stats span{white-space:nowrap}.heading>div:first-child{min-width:0}

#cube.over-tile{cursor:grab}#cube.layer-drag{cursor:grabbing}