.cb-board{--cb-pegs:4;--cb-well-cols:2;place-items:center;width:100%;height:100%;display:grid;position:relative;overflow:hidden;container:cb/size}.cb-board[data-pegs="5"]{--cb-pegs:5;--cb-well-cols:3}.cb-layout,.cb-entry{--cb-gap:clamp(8px, 1.8cqh, 16px);--cb-pad:8px;--cb-num:1.5rem;--cb-cgap:6px;--cb-key:11px;--cb-cell-max:56px;--cb-rmin:24px;--cb-rmax:46px;--cb-side-w:216px;--cb-well-w:calc(var(--cb-well-cols) * var(--cb-key) + (var(--cb-well-cols) + 1) * 3px);--cb-main-max:calc(var(--cb-num) + var(--cb-pegs) * var(--cb-cell-max) + var(--cb-well-w) + (var(--cb-pegs) + 1) * var(--cb-cgap) + 2 * var(--cb-pad))}.cb-board[data-pegs="5"]>*{--cb-cgap:4px;--cb-num:1.125rem}.cb-layout{width:min(100%, var(--cb-main-max));gap:var(--cb-gap);grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);height:100%;min-height:0;display:grid}.cb-side{gap:var(--sp-2);flex-direction:column;min-width:0;display:flex}.cb-main{min-height:0;max-height:100%;padding:4px var(--cb-pad) var(--cb-pad);border-radius:var(--r-xl);background:var(--g-board);box-shadow:var(--shadow-1);--cb-cell:clamp(44px, (100cqw - var(--cb-num) - var(--cb-well-w) - (var(--cb-pegs) + 1) * var(--cb-cgap)) / var(--cb-pegs), var(--cb-cell-max));flex-direction:column;align-self:end;display:flex;container:cbm/inline-size}.cb-code,.cb-row{grid-template-columns:var(--cb-num) repeat(var(--cb-pegs), var(--cb-cell)) var(--cb-well-w);column-gap:var(--cb-cgap);justify-content:center;place-items:center;display:grid}.cb-code{border-bottom:1px solid var(--g-board-line);--cb-peg:min(calc(var(--cb-cell) - 12px), 40px);flex:none;margin-bottom:4px;padding-block:6px}.cb-code__icon{color:var(--text-muted);place-items:center;display:grid}.cb-code__pegs{grid-column:2 / span var(--cb-pegs);grid-template-columns:subgrid;justify-items:center;display:grid}.cb-code__left{line-height:1.05;font-size:var(--fs-xs);color:var(--text-muted);justify-items:center;display:grid}.cb-code__left strong{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--text)}.cb-code[data-result=cracked] .cb-code__left{color:var(--success)}.cb-code[data-result=held] .cb-code__left{color:var(--danger)}.cb-rows{overscroll-behavior:contain;scrollbar-width:thin;flex-direction:column;flex:0 auto;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.cb-row{flex:0 1 var(--cb-rmax);min-height:var(--cb-rmin);border-radius:var(--r-md);--cb-peg:min(calc(var(--cb-cell) - 12px), 78cqh, 40px);--cb-k:clamp(6px, 34cqh, var(--cb-key));container-type:size}.cb-row+.cb-row{border-top:1px solid var(--g-board-line)}.cb-row[data-current]{height:calc(var(--cb-cell) + 8px);background:var(--accent-soft);border-top-color:#0000;flex:none}.cb-row[data-current]+.cb-row{border-top-color:#0000}.cb-row__n{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted);font-variant-numeric:tabular-nums}.cb-row__pegs,.cb-row .cb-holes{grid-column:2 / span var(--cb-pegs);grid-template-columns:subgrid;place-items:center;display:grid}.cb-hole{width:var(--cb-peg,32px);aspect-ratio:1;border-radius:50%;place-items:center;display:grid}.cb-hole:empty:before{content:"";aspect-ratio:1;background:var(--g-hole);width:40%;box-shadow:inset 0 0 0 1px var(--g-board-line);border-radius:50%}.cb-hole>.cb-peg{width:100%}.cb-peg{aspect-ratio:1;background:var(--cb-c);width:100%;color:var(--cb-ink);box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--cb-c) 55%, var(--g-peg-shade));border-radius:50%;place-items:center;display:grid}.cb-peg svg{fill:currentColor;width:56%;height:56%}.cb-peg[data-v="0"]{--cb-c:var(--g-peg0);--cb-ink:var(--g-ink0)}.cb-peg[data-v="1"]{--cb-c:var(--g-peg1);--cb-ink:var(--g-ink1)}.cb-peg[data-v="2"]{--cb-c:var(--g-peg2);--cb-ink:var(--g-ink2)}.cb-peg[data-v="3"]{--cb-c:var(--g-peg3);--cb-ink:var(--g-ink3)}.cb-peg[data-v="4"]{--cb-c:var(--g-peg4);--cb-ink:var(--g-ink4)}.cb-peg[data-v="5"]{--cb-c:var(--g-peg5);--cb-ink:var(--g-ink5)}.cb-peg[data-v="6"]{--cb-c:var(--g-peg6);--cb-ink:var(--g-ink6)}.cb-peg[data-v="7"]{--cb-c:var(--g-peg7);--cb-ink:var(--g-ink7)}.cb-peg.cb-peg--digit{border-radius:var(--r-md);background:var(--g-tile);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--g-hole-line);font-family:var(--font-display);font-size:calc(var(--cb-peg,32px) * .62);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;line-height:1}.cb-hole--secret{border-radius:var(--r-sm);background:var(--text);color:var(--surface);font-family:var(--font-display);font-size:calc(var(--cb-peg) * .5);font-weight:var(--fw-bold);line-height:1}.cb-hole--secret[data-busy]{animation:cb-wait calc(var(--dur-3) * 4) var(--ease) infinite alternate}.cb-hole--code>.cb-peg{animation:cb-reveal var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--i,0) * var(--dur-1) * .7)}.cb-hole--input{width:var(--cb-cell);height:var(--cb-cell);border:2px dashed var(--g-hole-line);background:var(--g-hole);color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);padding:0}.cb-hole--input:before{display:none}.cb-hole--input[data-filled]{background:0 0;border-style:solid;border-color:#0000}.cb-hole--input>.cb-peg{width:88%;animation:cb-drop var(--dur-2) var(--ease-out) both}.cb-hole--input[data-selected]{border:3px solid var(--accent-strong);background:var(--surface)}.cb-hole--input[aria-disabled=true]{cursor:default}.cb-hole--input:focus-visible{outline:var(--focus-w) solid var(--accent-ring);outline-offset:3px}.cb-keys-well{grid-template-columns:repeat(2, var(--cb-k,var(--cb-key)));border-radius:var(--r-sm);background:var(--g-well);gap:3px;padding:3px;display:grid}.cb-row[data-future] .cb-keys-well{opacity:.4}.cb-keys-well[data-n="5"]{grid-template-columns:repeat(3, var(--cb-k,var(--cb-key)))}.cb-key{width:var(--cb-k,var(--cb-key));height:var(--cb-k,var(--cb-key));background:var(--g-well-hole);border-radius:50%;transform:scale(.5)}.cb-key[data-k]{transform:none}.cb-key[data-k=black]{background:var(--g-peg-black)}.cb-key[data-k=white]{background:var(--g-peg-white);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--g-peg-black) 45%, var(--g-peg-white))}.cb-row[data-last] .cb-key[data-k]{animation:cb-drop var(--dur-2) var(--ease-out) both}.cb-row[data-solved] .cb-key[data-k]{animation:cb-pop var(--dur-3) var(--ease-out) both}.cb-line{text-align:center;justify-content:center;align-items:center;min-height:1.5rem;display:flex}.cb-legend{justify-content:center;gap:2px var(--sp-3);font-size:var(--fs-xs);color:var(--text-muted);flex-wrap:wrap;margin:0;display:flex}.cb-legend__item{white-space:nowrap;align-items:center;gap:6px;display:inline-flex}.cb-legend__well{background:var(--g-well);--cb-k:10px;border-radius:5px;padding:3px;display:inline-grid}.cb-note{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--danger);line-height:var(--lh-snug);margin:0}.cb-palette{grid-template-columns:repeat(var(--cb-pal-cols,6), minmax(0, 1fr));gap:6px;display:grid}.cb-palette[data-n="8"]{--cb-pal-cols:4}.cb-palette[data-n="10"]{--cb-pal-cols:5}.cb-pick{width:100%;height:clamp(44px,7cqh,54px);min-height:var(--tap);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);box-shadow:0 2px 0 var(--border);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-1) var(--ease), opacity var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);place-items:center;padding:0;display:grid}.cb-pick>.cb-peg{width:min(34px,72%)}.cb-pick>.cb-peg--digit{aspect-ratio:auto;width:auto;box-shadow:none;font-size:var(--fs-xl);background:0 0}@media (hover:hover){.cb-pick:not([aria-disabled=true]):hover{border-color:var(--accent);background:var(--accent-soft)}}.cb-pick:not([aria-disabled=true]):active{box-shadow:none;transform:translateY(1px)}.cb-pick:focus-visible{outline:var(--focus-w) solid var(--accent-ring);outline-offset:2px}.cb-pick[aria-disabled=true]{cursor:default;opacity:.55}.cb-pick[data-used]{opacity:.4}.cb-keys{gap:6px;display:flex}.cb-keys .btn{min-height:var(--tap-lg)}.cb-back{min-width:64px;padding-inline:var(--sp-3);flex:none}.cb-check{flex:auto}.cb-random{min-width:56px;padding-inline:var(--sp-3);flex:none}@container cb (width<=459px){.cb-random__text{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.cb-icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.cb-entry{overscroll-behavior:contain;width:100%;height:100%;padding-block:var(--sp-2);grid-template-columns:minmax(0,1fr);place-items:center;display:grid;overflow:auto}.cb-entry__card{align-items:stretch;gap:var(--sp-3);width:min(100%,440px);padding:var(--sp-5) var(--sp-4) var(--sp-4);border:1px solid var(--accent-strong);border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--accent-strong), var(--shadow-1);text-align:center;flex-direction:column;display:flex}.cb-entry__icon{background:var(--accent-soft);width:44px;height:44px;color:var(--accent-strong);border-radius:50%;align-self:center;place-items:center;display:grid}.cb-entry__title{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-semibold);line-height:var(--lh-tight);margin:0}.cb-entry__lead{font-size:var(--fs-sm);color:var(--text-muted);margin:0}.cb-entry__holes{padding:var(--sp-2);border-radius:var(--r-lg);background:var(--g-board);--cb-hgap:var(--sp-2);--cb-cell:clamp(44px, (100cqw - (var(--cb-pegs) - 1) * var(--cb-hgap)) / var(--cb-pegs), 52px);container:cbh/inline-size}.cb-board[data-pegs="5"] .cb-entry__holes{--cb-hgap:4px;padding-inline:4px}.cb-entry .cb-holes{justify-content:safe center;gap:var(--cb-hgap);display:flex}.cb-entry .cb-note{min-height:1.25em}.cb-entry .cb-note:empty{min-height:0;margin-top:calc(-1 * var(--sp-3))}.cb-score{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-semibold);color:var(--text);line-height:1}.cb-reveal{justify-items:center;gap:var(--sp-2);margin-top:var(--sp-2);--cb-peg:40px;display:grid}.cb-reveal__label{font-size:var(--fs-sm);color:var(--text-muted);margin:0}.cb-reveal__pegs{gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-lg);background:var(--g-board);margin:0;display:flex}@keyframes cb-drop{0%{opacity:0;transform:translateY(-30%)scale(.85)}}@keyframes cb-reveal{0%{opacity:0;transform:scale(.4)}}@keyframes cb-pop{50%{transform:scale(1.35)}}@keyframes cb-wait{to{opacity:.55}}@container cb (height<=560px){.cb-layout,.cb-entry{--cb-rmin:20px;--cb-gap:8px}.cb-line:not([data-note]){display:none}}@container cb (height<=460px){.cb-layout,.cb-entry{--cb-rmax:34px;--cb-key:9px;--cb-cell-max:44px;--cb-pad:6px}.cb-code{padding-block:3px}.cb-entry__card{gap:var(--sp-2);padding:var(--sp-3)}.cb-entry__icon{display:none}}@container cb (aspect-ratio>=5/4) and (width>=500px){.cb-layout{width:min(100%, var(--cb-main-max) + var(--cb-gap) + var(--cb-side-w));grid-template-columns:minmax(0, 1fr) var(--cb-side-w);grid-template-rows:minmax(0,1fr);align-self:center;max-height:760px}.cb-main{align-self:center}.cb-side{justify-content:center}.cb-line:not([data-note]){display:flex}.cb-palette,.cb-palette[data-n]{--cb-pal-cols:3}.cb-palette[data-n="10"] [data-testid=pal-0]{grid-column:2}.cb-legend{flex-direction:column;align-items:flex-start}.cb-entry__card{width:min(100%,520px)}}@container cb (aspect-ratio>=5/4) and (width>=500px) and (height<=460px){.cb-layout,.cb-entry{--cb-side-w:168px}.cb-line:not([data-note]){display:none}.cb-entry__card{align-items:center;column-gap:var(--sp-4);grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"title palette""lead palette""holes palette""keys keys""note note";width:min(100%,640px);display:grid}.cb-entry__title{font-size:var(--fs-lg);grid-area:title}.cb-entry__lead{grid-area:lead}.cb-entry__holes{grid-area:holes}.cb-entry .cb-palette{--cb-pal-cols:4;grid-area:palette}.cb-entry .cb-palette[data-n="6"]{--cb-pal-cols:3}.cb-entry .cb-keys{grid-area:keys}.cb-entry .cb-note{grid-area:note}.cb-entry .cb-note:empty{margin-top:0}}@media (prefers-reduced-motion:reduce){.cb-hole--secret[data-busy]{animation:none}}