:root{--level-1:#b3c8bf;--level-1-ink:#12352b;--level-2:#87a69a;--level-2-ink:#12352b;--level-3:#4d6d63;--level-3-ink:#f3f5f2;--level-4:#2b4b41;--level-4-ink:#f3f5f2}@media (prefers-color-scheme:dark){:root{--level-1:#30594c;--level-1-ink:#eef2ee;--level-2:#3f6b5d;--level-2-ink:#eef2ee;--level-3:#86a69a;--level-3-ink:#0f2a24;--level-4:#b4cbc2;--level-4-ink:#0f2a24}}body{min-height:100dvh}.app{--chrome-height:340px;--max-width:560px;max-width:var(--max-width);padding:var(--space-3) var(--space-3) var(--space-4);gap:var(--space-3);flex-direction:column;margin:0 auto;display:flex}.side{display:contents}.top{order:0}.board{order:1}.status{order:2}.mistakes{order:3}.controls,.result{order:4}.footer{order:5}.top{align-items:center;gap:2px var(--space-2);grid-template-columns:auto minmax(0,1fr) auto auto auto;display:grid}.logo{width:30px;height:30px;margin-right:var(--space-1);color:var(--game);grid-row:1}.brand{display:contents}.brand h1{grid-area:1/2}.top .icon-button{grid-row:1}.brand h1{font-size:var(--text-xl);font-weight:700;line-height:var(--leading-tight);letter-spacing:-.01em;margin:0}.puzzle-no{font-size:var(--text-sm);letter-spacing:0;color:var(--soft);white-space:nowrap;font-weight:500;line-height:1}.tagline{color:var(--soft);font-size:var(--text-sm);grid-area:2/2/auto/-1;margin:0;line-height:1.3}.icon-button{width:var(--tap);height:var(--tap);background:var(--off);color:var(--ink);cursor:pointer;font-size:var(--text-sm);white-space:nowrap;border:0;border-radius:0;place-items:center;padding:0;font-weight:600;display:inline-grid}.status{text-align:center;min-height:2lh;line-height:1.35;font-size:var(--text-sm);text-wrap:balance;place-items:center;margin:0;font-weight:600;display:grid}.status[data-tone=quiet]{color:var(--soft);font-weight:400}.status:has(.link-button){justify-content:center;align-items:center;column-gap:var(--space-1);flex-wrap:wrap;display:flex}.link-button{min-height:var(--tap);padding:0 var(--space-2);color:var(--ink);font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;font-weight:600;text-decoration:underline}.board{gap:var(--gutter);flex-direction:column;display:flex;position:relative}.solved{gap:var(--gutter);flex-direction:column;display:flex}.band{text-align:center;padding:10px 52px;position:relative}.band.fresh{animation:.46s cubic-bezier(.3,1.4,.5,1) band-tie}.band.fresh .level-dots i,.finale i{animation:.3s cubic-bezier(.3,1.6,.5,1) both pip-in;animation-delay:calc(.3s + var(--pip) * .11s)}.band[data-level="1"]{background:var(--level-1);color:var(--level-1-ink)}.band[data-level="2"]{background:var(--level-2);color:var(--level-2-ink)}.band[data-level="3"]{background:var(--level-3);color:var(--level-3-ink)}.band[data-level="4"]{background:var(--level-4);color:var(--level-4-ink)}.band h2,.band h3{text-wrap:balance;font-size:var(--text-md);margin:0;font-weight:700;line-height:1.25}.band p{text-wrap:balance;font-size:var(--text-sm);overflow-wrap:anywhere;margin:2px 0 0;font-weight:500}.level-dots{--pip-size:10px;grid-template:repeat(3, var(--pip-size)) / repeat(3, var(--pip-size));gap:2px;display:grid;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.level-dots i{--pip:0;background:currentColor;border-radius:50%}.level-dots i:nth-child(2){--pip:1}.level-dots i:nth-child(3){--pip:2}.level-dots i:nth-child(4){--pip:3}.level-dots[data-level="1"] i{grid-area:2/2}.level-dots[data-level="2"] i:first-child,.level-dots[data-level="3"] i:first-child,.level-dots[data-level="4"] i:nth-child(2){grid-area:1/3}.level-dots[data-level="2"] i:nth-child(2),.level-dots[data-level="3"] i:nth-child(3),.level-dots[data-level="4"] i:nth-child(3){grid-area:3/1}.level-dots[data-level="3"] i:nth-child(2){grid-area:2/2}.level-dots[data-level="4"] i:first-child{grid-area:1/1}.level-dots[data-level="4"] i:nth-child(4){grid-area:3/3}.grid{gap:var(--gutter);grid-template-columns:repeat(4,minmax(0,1fr));display:grid;container-type:inline-size}.tile{min-height:64px;height:min(calc((100cqi - 3 * var(--gutter)) / 4 * 1.2), calc((100dvh - var(--chrome-height)) / 4 - var(--gutter)));background:var(--off);color:var(--ink);cursor:pointer;font-weight:600;font-size:var(--tile-font,var(--text-md));-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:0;border-radius:0;place-items:center;padding:4px 6px;line-height:1.15;transition:transform 80ms ease-out,background .12s;display:grid;position:relative}.tile:active{transform:translateY(1px)}.tile[aria-pressed=true]{background:var(--game);color:var(--game-ink)}.tile.skeleton{cursor:default}.tile.shake{animation:.3s shake}.tile.hint{animation:.18s ease-in-out 2 hint}.board.celebrate .band{animation:.52s cubic-bezier(.3,1.4,.5,1) both band-tie}.board.celebrate .band:nth-child(2){animation-delay:90ms}.board.celebrate .band:nth-child(3){animation-delay:.18s}.board.celebrate .band:nth-child(4){animation-delay:.27s}.outcome{position:relative}.result .outcome{padding-right:calc(var(--space-5) + 52px)}.finale{top:var(--space-5);right:var(--space-4);width:48px;height:48px;position:absolute}.finale .level-dots{--pip-size:14px;gap:3px;top:0;right:0;transform:none}.level-dots i[data-hollow=true]{background:0 0;box-shadow:inset 0 0 0 2px}.finale i{animation-duration:.42s;animation-delay:calc(.25s + var(--pip) * .14s)}.mistakes{justify-content:center;align-items:center;gap:var(--space-2);color:var(--soft);font-size:var(--text-sm);margin:0;display:flex}.knots{gap:6px;display:inline-flex}.knot{background:var(--game);border-radius:50%;width:14px;height:14px}.knot[data-used=true]{box-shadow:inset 0 0 0 2px var(--soft);background:0 0}.knot.fresh{animation:.52s cubic-bezier(.3,1.4,.5,1) knot-tighten}.controls{gap:var(--gutter);grid-template-columns:1fr 1fr 1.25fr;display:grid}.controls .d-btn{padding:0 var(--space-3);white-space:nowrap}.selected-count{font-variant-numeric:tabular-nums;font-weight:400}.result{align-items:stretch;gap:var(--space-3);flex-direction:column;display:flex}.outcome h2{font-size:var(--text-xl);line-height:var(--leading-tight);margin:0}.outcome h2:focus{outline:none}.outcome h2:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.outcome-line,.streak-line{margin:0}.streak-line{font-weight:600}.trail{gap:var(--gutter);margin:var(--space-1) 0 0;flex-wrap:wrap;display:flex}.bead{width:36px;height:36px;display:block}.die{width:100%;height:100%;display:block}.die-face{fill:var(--off)}.die-pip{fill:var(--level-ink,var(--ink))}.die-miss{fill:none;stroke:var(--soft);stroke-width:2.2px;stroke-linecap:square}.bead[data-level="1"]{--level-fill:var(--level-1);--level-ink:var(--level-1-ink)}.bead[data-level="2"]{--level-fill:var(--level-2);--level-ink:var(--level-2-ink)}.bead[data-level="3"]{--level-fill:var(--level-3);--level-ink:var(--level-3-ink)}.bead[data-level="4"]{--level-fill:var(--level-4);--level-ink:var(--level-4-ink)}.bead[data-level] .die-face{fill:var(--level-fill)}.app[data-status=won] .result .bead{animation:.32s cubic-bezier(.3,1.5,.5,1) both bead-in;animation-delay:calc(.4s + var(--i,0) * 70ms)}.share-preview{margin:0}.share-preview figcaption{font-size:var(--text-xs);color:var(--soft);margin:0}.trail-row{align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-1);flex-wrap:wrap;display:flex}.trail-row .trail{margin:0}.trail-legend{font-size:var(--text-xs);color:var(--soft);flex:8rem;align-items:center;gap:6px;margin:0;display:flex}.trail-legend .die{flex:none;width:18px;height:18px}.share-button[data-tone=bad]{background:var(--off);color:var(--ink)}.stats{gap:var(--gutter);grid-template-columns:repeat(4,minmax(0,1fr));margin:0;display:grid}.stats div{flex-direction:column-reverse;justify-content:flex-end;display:flex}.stats dt{font-size:var(--text-xs);color:var(--soft);overflow-wrap:anywhere}.stats dd{font-size:var(--text-xl);font-weight:700;line-height:var(--leading-tight);font-variant-numeric:tabular-nums;margin:0}.countdown{align-items:center;gap:var(--space-2);color:var(--soft);font-variant-numeric:tabular-nums;flex-wrap:wrap;margin:0;display:flex}.countdown[hidden]{display:none}.outcome .countdown{margin-top:var(--space-1);color:inherit;font-size:var(--text-sm)}.empty{padding:var(--space-6) var(--space-2)}.d-dialog p{max-width:var(--measure)}.d-dialog .stats{margin-bottom:var(--space-5)}.example-caption{margin-bottom:var(--space-2)}.band.example{margin-bottom:var(--space-4)}.footer{font-size:var(--text-xs);color:var(--soft);flex-direction:column;align-items:flex-start;display:flex}.footer p{margin:0}.hub-link{min-height:var(--tap);color:var(--ink);font-size:var(--text-sm);align-items:center;font-weight:600;display:inline-flex}@media (hover:none){.keyboard-hint{display:none}}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes hint{50%{transform:scale(.94)}}@keyframes bead-in{0%{transform:scale(0)}to{transform:none}}@keyframes pip-in{0%{transform:scale(0)}to{transform:none}}@keyframes knot-tighten{0%{transform:scale(1.6)}60%{transform:scale(.7)}to{transform:none}}@keyframes band-tie{0%{opacity:.3;transform:scale(1.08,.6)}55%{opacity:1;transform:scale(.96,1.06)}to{transform:none}}@media (max-width:380px){.app{padding-inline:var(--space-2)}.tile{padding:4px 3px}.band{padding:8px 46px}.result .outcome{padding:var(--space-4) calc(var(--space-4) + 52px) var(--space-4) var(--space-4)}.finale{top:var(--space-4);right:var(--space-4)}.level-dots{right:8px}.result{gap:var(--space-2)}.result .outcome{gap:var(--space-1)}.result .outcome h2{font-size:var(--text-lg)}.outcome .countdown{margin-top:var(--space-1)}.bead{width:32px;height:32px}}@media (min-width:700px){.app{--chrome-height:368px;padding-top:var(--space-6)}.brand h1{font-size:2.25rem}.tile{min-height:88px}}@media (min-width:700px) and (min-height:900px) and (orientation:portrait){.app{--max-width:680px;--gutter:8px}.tile{min-height:120px;font-size:var(--tile-font,var(--text-lg))}}@media (orientation:landscape) and (max-height:520px){.app{--row-h:calc((100dvh - 108px) / 4);max-width:960px;min-height:100dvh;padding:var(--space-2) max(12px, env(safe-area-inset-right)) var(--space-2) max(12px, env(safe-area-inset-left));gap:var(--space-2) var(--space-4);grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) minmax(240px,300px);display:grid}.top{grid-area:1/1/2/3;grid-template-columns:auto auto minmax(0,1fr) auto auto auto}.brand h1{font-size:1.5rem}.tagline{padding-left:var(--space-2);grid-area:1/3}.board{grid-area:2/1;align-self:start}.side{flex-direction:column;grid-area:2/2/3/3;justify-content:flex-start;gap:10px;min-width:0;display:flex}.tile,.band{min-height:0;height:var(--row-h)}.band{flex-direction:column;justify-content:center;padding-block:4px;display:flex}.outcome{padding:var(--space-3)}.outcome h2{font-size:var(--text-lg)}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.footer{margin:0}.footer p{display:none}}