.colorbycode{container-type:inline-size;--cbc-tool:calc(min(100vw,var(--wrap) + 2 * var(--gutter)) - 2 * var(--gutter) - var(--cbc-rail,0px) - 2 * clamp(1rem,0.5rem + 2.5vw,2.5rem) - 2px);--cbc-side:min(var(--cbc-tool),39rem)}.colorbycode .cbc-layout{display:grid;gap:var(--space-3)}.colorbycode :is(.cbc-layout,.cbc-preview,.cbc-page) > *{min-width:0;margin:0}.colorbycode .tool-own{display:grid;gap:var(--space-1)}.colorbycode .tool-own__label{font-weight:700}.colorbycode .tool-own__how{color:var(--ink-muted);font-size:var(--step--1);font-weight:400}.colorbycode .tool-own__text{min-height:4.2rem;height:4.2rem}.colorbycode .cbc-own__row{display:flex;gap:var(--space-2);align-items:center;min-height:var(--tap)}.colorbycode .cbc-own__row > .select{flex:1 1 0;min-width:0;padding-inline:var(--space-2);font-size:var(--step--1);text-overflow:ellipsis}.colorbycode .cbc-own__row > .btn{flex:none;padding-inline:var(--space-2)}.colorbycode .cbc-go{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2)}.colorbycode .cbc-go > .btn{min-width:0;min-height:3rem;padding-inline:var(--space-3);font-size:var(--step-0)}@media (scripting:enabled){.tool:not([data-ready]) .colorbycode [data-cbc-wait]:disabled{opacity:1;cursor:progress}}.colorbycode .cbc-sheet .btn:disabled{opacity:1}.colorbycode .pill:disabled{opacity:0.45;cursor:not-allowed}.colorbycode [data-off] > :first-child{opacity:0.6}.colorbycode .cbc-linknote{flex-basis:100%;margin:0}.colorbycode .cbc-strip{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:var(--space-2);padding:var(--space-1)}.colorbycode .cbc-strip__group{grid-column:1 / -1;color:var(--ink-muted);font-size:var(--step--1);font-weight:700}.colorbycode .cbc-strip__group:not(:first-child){margin-top:var(--space-2)}.colorbycode :is(.cbc-pic,.cbc-pick){border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--step--1);cursor:pointer}.colorbycode .cbc-pic{position:relative;display:grid;flex:none;gap:var(--space-1);justify-items:center;align-content:start;min-width:0;padding:var(--space-2) var(--space-1);line-height:1.2}.colorbycode :is(.cbc-pic,.cbc-pick):hover{border-color:var(--brand)}.colorbycode :is(.cbc-pic,.cbc-pick)[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1.5px var(--brand)}.colorbycode :is(.cbc-pic,.cbc-pick,.cbc-board b):focus-visible{outline:3px solid var(--ring);outline-offset:0}.colorbycode .cbc-thumb{display:grid;place-items:center;width:3rem;height:3rem;border:1px solid var(--line);color:var(--ink-muted);font-size:var(--step-2);font-weight:700}.colorbycode .cbc-thumb > svg,.colorbycode .cbc-fill{display:block;width:100%;height:100%}.colorbycode .cbc-pic__name{min-width:0;max-width:100%;min-height:2.4em;overflow-wrap:break-word}.colorbycode .cbc-pic__need{color:var(--ink-muted);white-space:nowrap}.colorbycode .cbc-choose__head{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);align-items:center;justify-content:space-between}.colorbycode .cbc-choose__head > .btn{flex:none;min-width:9rem}.colorbycode .cbc-pic[data-done]::after{content:"";position:absolute;top:var(--space-1);right:var(--space-2);width:0.45rem;height:0.8rem;border:solid var(--ok);border-width:0 3px 3px 0;transform:rotate(40deg)}.colorbycode .cbc-setup{display:grid;gap:var(--space-3)}.colorbycode .cbc-setup .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.colorbycode .cbc-tables .pills{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.colorbycode .cbc-tables .pill{justify-content:center;min-height:var(--tap);padding-inline:0;font-size:var(--step-0);font-variant-numeric:tabular-nums}.colorbycode details.tool-more{display:block}.colorbycode .tool-more > summary{display:flex;align-items:center;min-height:var(--tap);border-top:1px solid var(--line);color:var(--ink-muted);cursor:pointer;list-style:none}.colorbycode .tool-more > summary::-webkit-details-marker{display:none}.colorbycode .tool-more > summary::after{content:"";flex:none;width:0.5em;height:0.5em;margin-inline:auto var(--space-2);border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-25%) rotate(45deg)}.colorbycode .tool-more[open] > summary::after{transform:translateY(25%) rotate(-135deg)}.colorbycode .tool-more > summary > span{white-space:pre}.colorbycode .tool-more__body{display:grid;gap:var(--space-3);padding-bottom:var(--space-2)}.colorbycode .cbc-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:0 var(--space-4)}.colorbycode :is(.cbc-preview,.cbc-answerbox){display:grid;gap:var(--space-3)}.colorbycode :is(.cbc-status,.cbc-wordsnote){min-height:5.8em;margin:0;padding-inline-start:var(--space-2);border-inline-start:3px solid transparent;color:var(--ink-muted);font-size:var(--step--1);line-height:1.45;overflow-wrap:anywhere}.colorbycode .cbc-wordsnote{min-height:4.35em}.colorbycode:is([data-mode="number"],[data-mode="hundreds"]) .cbc-status{min-height:2.9em}.colorbycode [data-tone]{border-color:var(--warn);color:var(--warn);font-weight:650}.colorbycode .cbc-answerbar{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);align-items:center;justify-content:flex-end;min-height:3rem}.colorbycode .cbc-answerbar > .btn{flex:none;min-width:5rem}.colorbycode .cbc-answerbar > [data-act="keyprint"]{min-width:8.5rem}.colorbycode .cbc-answerbar > p{flex:1 1 11rem;margin:0;color:var(--ink-muted);font-size:var(--step--1)}.colorbycode .cbc-sheet{display:grid}.colorbycode .cbc-page{display:grid;gap:var(--space-3);min-width:0;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.colorbycode .cbc-answer:is([hidden],:empty){display:none}.colorbycode .cbc-title{overflow:hidden;font-size:var(--step-1);line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.colorbycode .cbc-note{color:var(--ink-muted);font-size:var(--step--1)}.colorbycode .cbc-clue{min-height:2.9em;font-weight:600;line-height:1.45}.colorbycode .cbc-key{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:var(--space-2);padding:0;list-style:none}.colorbycode .cbc-key[data-wide]{grid-template-columns:minmax(0,1fr)}.colorbycode .cbc-key > li{display:flex;flex:none;gap:var(--space-2);align-items:center;min-width:0}.colorbycode .cbc-pick{display:flex;flex:1 1 auto;gap:var(--space-2);align-items:center;min-width:0;min-height:var(--tap);padding:var(--space-1) var(--space-2);text-align:start;white-space:nowrap}.colorbycode .cbc-key[data-wide] .cbc-pick{flex:0 0 7.5rem}.colorbycode .cbc-pick b{font-size:var(--step-0);font-variant-numeric:tabular-nums}.colorbycode .cbc-swatch{flex:none;width:1.5rem;height:1.5rem}.colorbycode .cbc-squares{flex:1 1 0;min-width:0;font-size:var(--step--1);font-variant-numeric:tabular-nums;line-height:1.5}.colorbycode .cbc-scroll{position:relative;display:grid}.colorbycode .cbc-board{--len:1;--n:10;--cbc-cell:calc((var(--cbc-side) - 3px) / var(--n));display:grid;grid-auto-rows:minmax(0,1fr);min-width:0;min-height:0;border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);touch-action:manipulation;user-select:none;-webkit-user-select:none}.colorbycode .cbc-board > div{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;min-height:0}.colorbycode .cbc-board b{display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;border:0 solid var(--line-strong);border-width:0 1px 1px 0;font-size:0.7rem;font-size:min(var(--cbc-cell) * 0.62,var(--cbc-cell) / (var(--len) * 0.6 + 0.5));font-weight:600;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;cursor:pointer}.colorbycode[data-mode="hundreds"] .cbc-board b{font-size:calc(var(--cbc-cell) * 0.5);letter-spacing:-0.02em}.colorbycode .cbc-board b:is(:focus-visible,.is-wrong){position:relative;z-index:1;outline-offset:-3px}.colorbycode .cbc-board b.is-wrong{outline:3px dashed var(--bad)}.colorbycode .cbc-board[data-len="2"]{--len:2}.colorbycode .cbc-board[data-len="3"]{--len:3}.colorbycode .cbc-board[data-len="4"]{--len:4}.colorbycode .cbc-board[data-len="5"]{--len:5}.colorbycode .cbc-board[data-len="6"]{--len:6}.colorbycode .cbc-board[data-len="7"]{--len:7}.colorbycode .cbc-board[data-len="8"]{--len:8}.colorbycode [data-n="6"]{--n:6}.colorbycode [data-n="7"]{--n:7}.colorbycode [data-n="8"]{--n:8}.colorbycode [data-n="9"]{--n:9}.colorbycode [data-n="11"]{--n:11}.colorbycode [data-n="12"]{--n:12}.colorbycode [data-n="13"]{--n:13}.colorbycode [data-n="14"]{--n:14}.colorbycode [data-n="15"]{--n:15}.colorbycode [data-n="16"]{--n:16}.colorbycode [data-n="17"]{--n:17}.colorbycode [data-n="18"]{--n:18}.colorbycode [data-n="19"]{--n:19}.colorbycode [data-n="20"]{--n:20}.colorbycode [data-n="21"]{--n:21}.colorbycode [data-n="22"]{--n:22}.colorbycode [data-n="23"]{--n:23}.colorbycode [data-n="24"]{--n:24}.colorbycode .cbc-paintbar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.colorbycode .cbc-progress{flex:1 1 100%;min-height:2.9em;margin:0;color:var(--ink-muted);font-size:var(--step--1);line-height:1.45}.colorbycode .cbc-paintbar [data-act="clear"]{min-width:11rem;margin-inline-start:auto}.colorbycode .cbc-answer__picture{width:100%;max-width:22rem;aspect-ratio:1;margin-inline:auto;font-family:var(--font-body)}@media screen{.colorbycode .cbc-scroll{width:100%;max-width:39rem;aspect-ratio:1;margin-inline:auto;overflow:hidden}.colorbycode .cbc-sheet[data-zoom] .cbc-scroll{overflow:auto;overscroll-behavior:contain}.colorbycode .cbc-sheet[data-zoom] .cbc-board{touch-action:none}@container (width < 50rem){.colorbycode .cbc-sheet > .cbc-page{gap:var(--space-2);padding:0;border:0;border-radius:0;background:none}.colorbycode .cbc-sheet :is(.cbc-title,.cbc-note){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.colorbycode .cbc-clue{min-height:4.35em;font-size:var(--step--1)}.colorbycode .cbc-key{display:flex;flex-wrap:wrap;padding:3px}.colorbycode .cbc-key[data-wide]{flex-direction:column;height:auto;padding:3px;overflow:visible;mask-image:none}.colorbycode .cbc-key[data-wide] > li{align-items:start}}@media (prefers-reduced-motion:no-preference){.colorbycode .cbc-sheet[data-run]:not([data-run="0"]) > .cbc-page{animation:cbc-in 0.18s var(--ease)}}}@keyframes cbc-in{from{opacity:0.4}}@media (scripting:none){.colorbycode :is(.cbc-own,.cbc-go,.tool-bar,.cbc-choose,.cbc-setup,.cbc-tip,.cbc-paintbar,.cbc-answerbar){display:none}.colorbycode .cbc-answer[hidden]:not(:empty){display:grid !important}}@container (min-width:50rem){.colorbycode .cbc-layout{--cbc-side:min((var(--cbc-tool) - var(--space-6)) * 7 / 11 - 2 * var(--space-4) - 2px,39rem);grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:repeat(4,auto) 1fr;gap:var(--space-4) var(--space-6);align-items:start}.colorbycode .cbc-layout > *{grid-column:1}.colorbycode .cbc-layout > .cbc-preview{grid-column:2;grid-row:1 / -1}.colorbycode .cbc-go > .btn{min-height:3.5rem}.colorbycode .cbc-go > .btn-primary{font-size:var(--step-1)}.colorbycode .cbc-status{min-height:4.35em}.colorbycode .tool-own__text{min-height:5.6rem;height:5.6rem}}@media print{main:has(.colorbycode) > :not(.tool):not(:has(.tool)){display:none !important}.colorbycode,.colorbycode :is(.cbc-layout,.cbc-preview,.cbc-sheet,.cbc-scroll,.cbc-answerbox){display:block}.colorbycode .cbc-page{display:block;padding:0;border:0;border-radius:0;background:none}.colorbycode .cbc-sheet > .cbc-page{animation:none !important;opacity:1}.colorbycode .cbc-answerbox:not([data-print]){display:none}.colorbycode .cbc-answerbox[data-print] > .cbc-answer:not(:empty){display:block !important;break-before:page}.colorbycode .cbc-nameline{display:flex;gap:2mm;align-items:flex-end;margin:0 0 6mm;font-size:11pt}.colorbycode .cbc-rule{flex:0 0 70mm;margin-inline-end:6mm;border-bottom:0.3mm solid #000}.colorbycode .cbc-rule--short{flex-basis:35mm}.colorbycode .cbc-title{margin:0 0 2mm;font-size:16pt;white-space:normal}.colorbycode .cbc-clue{min-height:0;margin:0 0 2mm;font-size:12pt}.colorbycode .cbc-clue:empty{display:none}.colorbycode .cbc-note{margin:0 0 4mm;color:#000;font-size:10.5pt}.colorbycode .cbc-key{display:flex;flex-wrap:wrap;gap:2mm 7mm;margin:0 0 5mm}.colorbycode .cbc-key[data-wide]{display:grid;gap:1.5mm;margin:5mm 0 0}.colorbycode .cbc-key > li{align-items:baseline;break-inside:avoid}.colorbycode .cbc-pick,.colorbycode .cbc-pick[aria-pressed="true"]{flex:none;min-height:0;padding:0;border:0;background:none;box-shadow:none;color:#000;font-size:11pt}.colorbycode .cbc-key[data-wide] .cbc-pick{flex:0 0 30mm}.colorbycode .cbc-pick b{font-size:13pt}.colorbycode .cbc-swatch{width:5mm;height:5mm}.colorbycode :is(.cbc-swatch,.cbc-answer__picture){print-color-adjust:exact;-webkit-print-color-adjust:exact}.colorbycode .cbc-squares{font-size:10pt;line-height:1.35}.colorbycode .cbc-board{--cbc-cell:calc((168mm - 2px) / var(--n)) !important;width:168mm;height:168mm;min-width:0 !important;min-height:0 !important;margin-inline:auto;border:0.5mm solid #000;background:none;color:#000;break-inside:avoid}.colorbycode[data-mode="hundreds"] .cbc-board{--cbc-cell:calc((140mm - 2px) / var(--n)) !important;width:140mm;height:140mm}.colorbycode .cbc-board b{border-color:#000;border-width:0 0.2mm 0.2mm 0;font-size:min(var(--cbc-cell) * 0.55,var(--cbc-cell) / (var(--len) * 0.6 + 0.5));outline:0 !important;background:none !important;color:#000 !important}.colorbycode .cbc-answer__picture{width:130mm;max-width:none;margin:4mm auto 0}}.colorbycode .cbc-status,.colorbycode .cbc-answerbar,.colorbycode .cbc-progress,.colorbycode [data-act="zoom"],.colorbycode [data-act="share"],.colorbycode .btn:not(.btn-primary) > .icon{display:none}.colorbycode .cbc-paintbar .btn{min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--link);font-weight:400;text-decoration:underline;text-underline-offset:0.25em}.cbc-go .btn-secondary,.colorbycode > .cbc-layout > .tool-bar .btn{min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--link);font-weight:400;text-decoration:underline;text-underline-offset:0.25em}[data-cbc-answernote]{display:none}.cbc-go .btn-secondary,.colorbycode > .cbc-layout > .tool-bar .btn{position:relative}.cbc-go .btn-secondary::before,.colorbycode > .cbc-layout > .tool-bar .btn::before{content:"";position:absolute;inset:min(0px,calc((100% - var(--tap)) / 2)) 0}