:root{color-scheme:light;--bg: #ffffff;--text: #121213;--muted: #787c7e;--line: #d3d6da;--line-strong: #878a8c;--key: #d3d6da;--key-ink: #121213;--green: #6aaa64;--yellow: #c9b458;--red: #d0574b;--grey: #787c7e;--focus: #2f7de1;--sq-light: #e3e9ee;--sq-dark: #8ea4b4;--serif: "Georgia", "Times New Roman", serif;--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;--ease: cubic-bezier(.2, .8, .2, 1);--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--chrome: 300px;--board: min( calc(100vw - 40px - var(--safe-l) - var(--safe-r)), calc(100dvh - var(--chrome) - var(--safe-t) - var(--safe-b)), 520px )}:root.contrast{--green: #f5793a;--yellow: #85c0f9}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:var(--bg);color:var(--text);font:400 15px/1.4 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-size-adjust:100%}::selection{background:var(--yellow)}button,select,input{font:inherit;color:inherit}button{touch-action:manipulation;cursor:pointer}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.num{font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}.app{height:100dvh;display:flex;flex-direction:column;align-items:center;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l)}.header{width:100%;height:56px;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;border-bottom:1px solid var(--line)}.side{display:flex;align-items:center;gap:4px}.side.right{justify-content:flex-end}.brand{margin:0;font:700 clamp(24px,7.4vw,30px)/1 var(--serif);letter-spacing:-.01em}.icon{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:6px;background:transparent;color:var(--text)}.icon:hover{background:#f2f3f5}.chip{position:fixed;top:calc(var(--safe-t) + 112px);left:calc(var(--safe-l) + 12px);z-index:5;height:26px;white-space:nowrap;padding:0 10px;border:0;border-radius:12px;background:var(--text);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.modes{flex:none;display:flex;gap:2px;margin-top:10px;padding:3px;border-radius:8px;background:#f0f1f3}.modes button{height:28px;min-width:84px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:13px;font-weight:700}.modes button.on{background:#fff;color:var(--text);box-shadow:0 1px 3px #0000001f}.loading{flex:1;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--muted)}.tiles{flex:none;display:flex;gap:6px;margin-top:auto;height:40px;perspective:400px}.tile{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--line);background:var(--bg);font-size:20px;font-weight:700;color:var(--text);-webkit-user-select:none;user-select:none}.tile.active{border-color:var(--line-strong);animation:pop .1s ease-in}.tile.solved,.tile.failed{border-color:transparent;color:#fff}.tile.solved{background:var(--green)}.tile.failed{background:var(--red)}.tiles.pick .tile{padding:0;border-radius:0;font-family:inherit;cursor:pointer}.tiles.pick .tile:not(.active):hover{border-color:var(--line-strong)}.tile.solved.active,.tile.failed.active{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text)}.tile.flip{animation:flip .5s ease-in both}.tiles.bounce .tile{animation:bounce 1s both}@keyframes pop{0%{transform:scale(.85)}40%{transform:scale(1.1)}}@keyframes flip{0%{transform:rotateX(0);background:var(--bg);border-color:var(--line-strong);color:var(--text)}50%{transform:rotateX(-90deg);background:var(--bg);border-color:var(--line-strong);color:var(--text)}50.1%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-24px)}50%{transform:translateY(4px)}60%{transform:translateY(-12px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}.subtitle{flex:none;margin:10px 0 0;height:16px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}.subtitle.level{display:flex;align-items:center;height:22px;font-size:16px;letter-spacing:0;text-transform:none;color:var(--text)}.subtitle.level b{margin-left:.25em;margin-right:.2em;font-variant-numeric:tabular-nums}.tries{display:inline-flex;gap:4px;margin-left:10px;vertical-align:-1px}.tries span{width:11px;height:11px;border-radius:50%;border:2px solid var(--line-strong)}.tries .on{border-color:var(--text);background:var(--text)}.topline{flex:none;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:auto;height:40px}.clock{font-size:32px;font-weight:700;line-height:1}.clock.low{color:var(--red)}.stage.veiled{position:relative}.stage.veiled .board{filter:blur(18px) saturate(.6);opacity:.55;pointer-events:none}.veil{position:absolute;top:20px;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center}.veil .key.start,.veil .key.start:hover:not(:disabled){height:56px;min-width:160px;background:color-mix(in srgb,var(--green),#000 28%);font-size:18px;box-shadow:0 4px 16px #0000002e}.toasts{position:fixed;top:calc(var(--safe-t) + 108px);left:50%;z-index:20;translate:-50% 0;display:grid;gap:8px;pointer-events:none}.toast{padding:14px 16px;border-radius:4px;background:var(--text);color:#fff;font-size:14px;font-weight:700;text-align:center;white-space:nowrap;animation:toast-in .12s var(--ease)}@keyframes toast-in{0%{opacity:0;transform:translateY(-4px)}}.stage{flex:none;padding-top:20px}.strip{width:var(--board);height:52px;flex:none;display:flex;align-items:center;gap:12px;margin-top:18px;margin-bottom:auto}.status{flex:1;min-width:0;margin:0;display:flex;align-items:center;gap:8px;white-space:nowrap}.status-text{display:grid;min-width:0;line-height:1.2}.status-text b,.status-text small{overflow:hidden;text-overflow:ellipsis}.status-text b{font-size:15px;font-weight:700}.status-text b.bad{color:var(--red)}.status-text small{font-size:13px;color:var(--muted)}.status-text small.solution{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;color:var(--text)}.disc{flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--text)}.disc.w{background:#fff}.disc.b{background:var(--text)}.keys{display:flex;gap:6px;flex:none}.key{height:44px;min-width:64px;padding:0 12px;border:0;border-radius:4px;background:var(--key);color:var(--key-ink);font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;transition:background-color .1s}.key:hover:not(:disabled){background:#c4c7cc}.key:active:not(:disabled){background:#b9bcc1}.key:disabled{opacity:.5;cursor:default}.key.go{background:var(--green);color:#fff}.key.go:hover:not(:disabled),.key.go:active:not(:disabled){background:color-mix(in srgb,var(--green),#000 12%)}.key.wide{min-width:88px}.board{position:relative;width:var(--board);height:var(--board);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:4px;overflow:hidden;box-shadow:0 0 0 2px var(--line);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sq{position:relative;border:0;padding:0;margin:0;cursor:pointer}.board.locked .sq{cursor:default}.sq.light{background:var(--sq-light);color:var(--sq-dark)}.sq.dark{background:var(--sq-dark);color:var(--sq-light)}.sq.last{background:color-mix(in srgb,var(--yellow) 55%,var(--sq-light))}.sq.dark.last{background:color-mix(in srgb,var(--yellow) 70%,var(--sq-dark))}.sq.sel,.sq.dark.sel{background:color-mix(in srgb,var(--green) 65%,var(--sq-light))}.sq.check{background-image:radial-gradient(circle,#ff3b30,#e70000b3 30%,#a9000000 72%)}.sq.target:before{content:"";position:absolute;top:36%;right:36%;bottom:36%;left:36%;border-radius:50%;background:#12121333}.sq.capture:before{content:"";position:absolute;top:4%;right:4%;bottom:4%;left:4%;border-radius:50%;border:calc(var(--board) / 8 * .08) solid rgb(18 18 19 / .2)}.sq.hint:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 calc(var(--board) / 8 * .08) var(--green);animation:pulse .9s var(--ease) infinite alternate}.sq.hint-to:after{content:"";position:absolute;top:30%;right:30%;bottom:30%;left:30%;border-radius:50%;background:color-mix(in srgb,var(--green) 45%,transparent)}.hint-arrow{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;width:100%;height:100%;pointer-events:none;fill:var(--green);opacity:.85;animation:fade .15s var(--ease)}.hint-arrow line{stroke:var(--green)}.sq:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.rank,.file{position:absolute;font-size:max(9px,calc(var(--board) / 8 * .19));font-weight:700;line-height:1;pointer-events:none}.rank{top:6%;left:7%}.file{bottom:6%;right:8%}.pieces{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.piece{position:absolute;top:0;left:0;width:12.5%;height:12.5%;transition:transform .12s var(--ease),translate .12s var(--ease);will-change:transform}.piece svg{display:block;width:100%;height:100%}.piece.slow{transition-duration:.22s}.piece.instant,.piece.dragging{transition:none}.piece.dragging{z-index:3;cursor:grabbing}.piece.dragging svg{scale:1.12;filter:drop-shadow(0 6px 6px rgb(0 0 0 / .2))}.piece.shake-0 svg{animation:shake-a .2s var(--ease)}.piece.shake-1 svg{animation:shake-b .2s var(--ease)}@keyframes shake-a{20%,60%{translate:-8% 0}40%,80%{translate:8% 0}}@keyframes shake-b{20%,60%{translate:-8% 0}40%,80%{translate:8% 0}}@keyframes pulse{0%{opacity:.4}to{opacity:1}}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:16px;background:#ffffff80;animation:fade .15s var(--ease)}.card{position:relative;width:min(100%,500px);max-height:calc(100dvh - 32px);overflow:hidden auto;overscroll-behavior:contain;padding:16px 20px 20px;border:1px solid #f6f7f8;border-radius:8px;background:#fff;box-shadow:0 4px 23px #0003;animation:slide-in .2s var(--ease);outline:none}.close{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:4px;background:transparent}@keyframes fade{0%{opacity:0}}@keyframes slide-in{0%{transform:translateY(30px);opacity:0}}.caps{margin:12px 0 10px;font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center}.help .title{margin:8px 0 2px;font:700 28px/1.1 var(--serif)}.help .lead{margin:0 0 8px;font-size:20px}.help ul{margin:0 0 12px;padding-left:20px}.help li{margin-bottom:4px}.help h4{margin:18px 0 4px;font-size:15px;font-weight:700}.help p{margin:0 0 8px}.help hr{border:0;border-top:1px solid var(--line);margin:16px 0}.demo-row{display:flex;gap:4px;margin:8px 0}.tile.demo{width:36px;height:36px;font-size:18px}.numbers{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;margin-bottom:8px}.numbers div{display:flex;flex-direction:column;align-items:center}.numbers b{font-size:36px;font-weight:400;line-height:1.1}.numbers span{font-size:12px;line-height:1.2}.dist{list-style:none;margin:0 auto 8px;padding:0;width:85%}.dist li{display:flex;align-items:center;gap:6px;height:22px;margin-bottom:4px;font-size:14px}.dist li>.num{width:10px;text-align:center}.bar{display:flex;justify-content:flex-end;height:100%;padding:0 8px;background:var(--grey);color:#fff;font-size:14px}.bar.today{background:var(--green)}.bar b{font-weight:700;line-height:22px}.post{display:flex;align-items:center;width:100%;margin:16px 0 8px}.next{flex:1;text-align:center}.next .caps{margin:0;font-size:13px}.clock{font-size:34px;line-height:1.1}.divider{width:1px;height:64px;background:var(--text)}.share{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;margin-left:16px;border:0;border-radius:4px;background:var(--green);color:#fff;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.share:active{filter:brightness(.95)}.settings{list-style:none;margin:0;padding:0}.settings label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;border-bottom:1px solid var(--line);cursor:pointer}.settings span{display:grid}.settings b{font-size:18px;font-weight:400}.settings small{color:var(--muted);font-size:12px}input[role=switch]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:none;position:relative;width:32px;height:20px;margin:0;border-radius:999px;background:var(--grey);cursor:pointer;transition:background-color .15s var(--ease)}input[role=switch]:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:translate .15s var(--ease)}input[role=switch]:checked{background:var(--green)}input[role=switch]:checked:after{translate:12px 0}.credits{margin:16px 0 0;font-size:12px;color:var(--muted)}.credits a{color:inherit;text-underline-offset:2px}@media (orientation: landscape) and (max-height: 560px){:root{--board: min(calc(100dvh - 76px - var(--safe-t) - var(--safe-b)), calc(100vw - 400px) )}.app{display:grid;grid-template-columns:auto 1fr;grid-template-rows:56px auto auto auto 1fr;column-gap:24px;align-items:start;justify-items:start}.header{grid-column:1 / -1}.stage{grid-column:1;grid-row:2 / 6;align-self:center;padding:8px 0 8px 16px}.modes{grid-column:2;grid-row:2}.tiles,.topline{grid-column:2;grid-row:3;margin-top:16px}.subtitle{grid-column:2;grid-row:4}.strip{grid-column:2;grid-row:5;width:auto;min-width:300px;align-self:end;margin:0 0 16px}.chip{left:auto;right:calc(var(--safe-r) + 12px)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}