:root{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#213d3d;background:#f5f7f3;font-synthesis:none;font-weight:450;line-height:1.5;--green:#205e51;--muted:#6b7e7b;--border:#dce5de}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select,summary{-webkit-tap-highlight-color:transparent}button{border:1px solid var(--border);background:#fff;color:inherit;border-radius:12px;padding:11px 15px;cursor:pointer;font-weight:600;transition:background .18s,transform .18s}button:hover:not(:disabled){background:#edf4ea;transform:translateY(-1px)}button:disabled{opacity:.42;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #3784d5;outline-offset:4px}[hidden]{display:none!important}.app{max-width:1240px;margin:auto;padding:0 48px}header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.brand{text-decoration:none;color:#234d43;font-size:25px;letter-spacing:-1px;font-weight:750;display:flex;align-items:center}.brand-icon{background:#245b4b;color:#d1eab5;font-size:32px;line-height:42px;text-align:center;width:42px;height:42px;border-radius:12px;margin-right:10px}.brand-dot{color:#df9b3c}.header-note{font-size:13px;color:var(--muted)}main{padding-top:36px}.steps{display:flex;align-items:center;justify-content:center;gap:16px;font-size:12px;color:#a0aaa3;margin-bottom:34px}.steps span{display:flex;align-items:center;gap:9px}.steps span:first-letter{font-weight:700}.steps b{font-weight:550}.steps i{height:1px;width:42px;background:var(--border)}.steps span.active{color:#245b4b;font-weight:800}.steps span.done{color:#58876e}.workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,1fr);gap:58px;align-items:center;min-height:555px}.visual{position:relative;background:radial-gradient(ellipse at 50% 40%,#ecf1e2,#eaf2ed 65%,#e3ede5);border:1px solid #dfe9de;border-radius:28px;height:540px;overflow:hidden;box-shadow:0 24px 50px -45px #1d5a47}.visual:after{content:"";position:absolute;bottom:85px;left:24%;width:52%;height:30px;border-radius:50%;background:#63816b22;filter:blur(15px);pointer-events:none}.visual-top{position:absolute;top:20px;left:24px;right:18px;display:flex;align-items:center;justify-content:space-between;z-index:2}.pill{font-size:10px;letter-spacing:1.4px;color:#657e6d;font-weight:700}.text-button{border:0;background:transparent;padding:8px 4px;font-size:12px;color:#5b7668;font-weight:550}.visual-top button{font-size:12px}#cube-canvas{height:100%;width:100%;touch-action:none;position:relative;z-index:1}canvas{display:block}.orbit-hint{position:absolute;left:0;right:0;bottom:28px;text-align:center;font-size:11px;color:#6e8272;pointer-events:none;z-index:2}.orbit-hint>span:first-child{font-size:19px;vertical-align:-1px;margin-right:5px}.hint-separator{padding:0 7px}.panel{padding:12px 0;max-width:420px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:750;color:#6b8b72;margin:0 0 18px}h1{font-size:44px;line-height:1.13;font-weight:650;letter-spacing:-1.8px;margin:0 0 20px}.intro{color:var(--muted);font-size:15px;line-height:1.75;margin:0 0 26px}fieldset{margin:0;padding:0;border:0}.cube-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}.cube-choice legend{font-size:13px;font-weight:650;margin-bottom:12px}.cube-choice button{display:flex;align-items:center;flex-direction:column;padding:12px 8px 16px;border:1px solid #dce5dc;background:transparent;border-radius:16px}.cube-choice button[aria-pressed=true]{background:#eef4e6;border:2px solid #487752;padding:11px 7px 15px}.mini-cube{font-size:43px;line-height:1.1;color:#729169}.cube-choice strong{font-size:18px;letter-spacing:1px;margin:6px 0 2px}.cube-choice small{font-size:11px;color:#7b887c;font-weight:450}.primary{background:var(--green);border-color:var(--green);color:#fff;border-radius:12px}.primary:hover:not(:disabled){background:#164b40}.wide{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:14px 20px;font-size:14px}.wide>span{font-size:20px;font-weight:400}.privacy{text-align:center;font-size:10px;color:#8a978d;margin-top:14px}.bottom-note{display:flex;align-items:center;gap:12px;justify-content:center;padding:32px 0 36px;color:#829080;font-size:12px}.bottom-note p{margin:0}.bottom-note button{margin-left:20px}.tiny-squares{display:flex;gap:3px}.tiny-squares i{width:8px;height:8px;background:#d0dcb9;border-radius:2px;transform:rotate(-8deg)}.tiny-squares i:nth-child(2){background:#eabf71;transform:rotate(8deg)}.tiny-squares i:nth-child(3){background:#93b6a8}footer{border-top:1px solid var(--border);padding:22px 0;display:flex;justify-content:space-between;color:#98a199;font-size:10px}.entry-progress{display:flex;justify-content:space-between;font-size:11px;color:#697e73;margin-bottom:7px}progress{width:100%;height:6px;border:0;border-radius:20px;background:#dde6da;overflow:hidden;display:block;margin-bottom:20px}progress::-webkit-progress-bar{background:#dde6da;border-radius:20px}progress::-webkit-progress-value{background:#72996b;border-radius:20px}progress::-moz-progress-bar{background:#72996b;border-radius:20px}.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;padding:12px;background:#cbd8ce;border:1px solid #b7c8bb;border-radius:16px}.swatch{padding:0;height:44px;background:var(--swatch);border:3px solid #ffffff;border-radius:12px;box-shadow:0 0 0 1px #d8ded4;position:relative}.swatch:hover:not(:disabled){background:var(--swatch)}.swatch[data-color=white],.swatch[data-color=white]:hover:not(:disabled){background:#fff;border-color:#a4b5a9}.swatch[aria-pressed=true]{box-shadow:0 0 0 3px #285a4f;transform:translateY(-2px)}.swatch[aria-pressed=true]:after{content:"✓";position:absolute;inset:6px;color:#172f35;text-shadow:0 0 3px white;font-size:19px}.tools{display:flex;gap:8px;margin:16px 0}.tools button{flex:1;font-size:11px;padding:9px 5px}.tools button[aria-pressed=true]{background:#dbe9db;border-color:#5e8c69}.small-note{font-size:11px;line-height:1.6;color:#7b8c80}.panel .text-button{display:block;margin-top:10px}details{border:1px solid var(--border);border-radius:12px;margin:15px 0;padding:10px 12px;font-size:12px}summary{cursor:pointer;color:#5b7568}summary span{float:right}.grid-heading{display:flex;gap:10px;align-items:center;margin:10px 0}select{border:1px solid var(--border);background:#fff;border-radius:8px;padding:7px 10px;color:#496354;font-size:12px}#face-grid{display:grid;grid-template-columns:repeat(var(--size),1fr);gap:5px;max-width:180px}#face-grid button{aspect-ratio:1;background:var(--swatch);border:2px solid #233c36;padding:0;border-radius:7px;min-height:40px}#face-grid button.suspicious{outline:3px solid #bf568e}.move-card{padding:20px;background:#eef2e8;border:1px solid #dce4d6;border-radius:16px;margin-bottom:17px;position:relative}.move-card>span{font-size:11px;color:#66816a;font-weight:600}.move-card>strong{position:absolute;right:18px;top:12px;font-size:27px;color:#44775b}.move-card p{font-size:18px;line-height:1.45;margin:16px 0 9px;font-weight:600;padding-right:18px}.move-card small{font-size:10px;line-height:1.5;color:#829079;display:block}.playback-buttons{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:7px}.playback-buttons button{padding:12px 6px;font-size:11px;min-height:46px}.speed-control{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#6d8274;margin:18px 0}#status{padding:14px 15px;background:#fff3de;border:1px solid #edd5a9;border-radius:12px;color:#785622;font-size:12px;margin-top:16px;line-height:1.6}#status.loading{background:#e6efe1;border-color:#cbddc1;color:#3c6542}#status.loading:before{content:"◌";display:inline-block;font-size:20px;vertical-align:-2px;margin-right:8px;animation:spin 1.5s linear infinite}.face-key{position:absolute;bottom:63px;left:16px;right:16px;text-align:center;z-index:2;font-size:11px;color:#45634e;background:#f8faf0de;padding:8px 12px;border-radius:10px;pointer-events:none}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1250px){.app{padding:0 56px}}@media(max-width:900px){.app{padding:0 28px}.workspace{gap:28px;grid-template-columns:minmax(0,1fr) minmax(290px,.9fr)}h1{font-size:36px}.visual{height:490px}.header-note{font-size:11px}}@media(max-width:700px){.app{padding:0 20px}header{height:78px}.brand{font-size:22px}.header-note{display:none}main{padding-top:24px}.steps{font-size:10px;gap:10px;margin-bottom:24px}.steps i{width:15px}.workspace{display:flex;flex-direction:column;gap:26px;min-height:0}.visual{height:350px;width:100%;border-radius:22px}.panel{max-width:440px;width:100%;padding:0 0 10px}h1{font-size:35px}h1 br{display:none}h1 br:after{content:" "}.eyebrow{margin-bottom:10px}.intro{font-size:14px;margin-bottom:20px}.visual-top{top:12px;left:18px}.orbit-hint{bottom:16px;font-size:10px}.face-key{bottom:47px}.cube-choice button{padding:10px}.cube-choice button[aria-pressed=true]{padding:9px}.bottom-note{padding:20px 0;flex-wrap:wrap;gap:8px}.bottom-note button{width:100%;margin:0}footer{gap:15px;font-size:9px}.tools button,.playback-buttons button{font-size:12px}.swatch{height:46px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.loading:before{animation:none!important}}.mini-cube{display:grid;width:38px;height:38px;gap:3px;transform:rotate(-7deg);margin:5px}.mini-cube.two{grid-template-columns:repeat(2,1fr)}.mini-cube.three{grid-template-columns:repeat(3,1fr)}.mini-cube i{background:#83a17a;border-radius:2px}.mini-cube i:nth-child(3n){background:#bbcca3}.brand-icon{font-size:0;position:relative}.brand-icon:after{content:"";position:absolute;inset:11px;background:linear-gradient(90deg,transparent 44%,#245b4b 44% 56%,transparent 56%),linear-gradient(transparent 44%,#245b4b 44% 56%,transparent 56%),#d1eab5;border-radius:2px}@media(max-width:700px){body[data-stage=paint] .visual,body[data-stage=solve] .visual{position:sticky;top:8px;height:min(42vh,330px);flex-shrink:0;z-index:5;box-shadow:0 8px 20px #243e3420}body[data-stage=solve] .panel{padding-bottom:20px}body[data-stage=solve] h1{font-size:29px;margin-bottom:10px}body[data-stage=solve] .intro{font-size:13px;margin-bottom:16px}body[data-stage=solve] .move-card{padding:15px}body[data-stage=solve] .move-card p{margin-top:12px}}