.hb{& .g1{--g:var(--g1)}& .g2{--g:var(--g2)}& .g3{--g:var(--g3)}& .g4{--g:var(--g4)}& .g5{--g:var(--g5)}& .setup{padding:8px 0 56px}& .lead{max-width:38em;font-size:1.2rem}& .demo{justify-content:center;padding:6px 0 22px;display:flex}& .demo .demo-parts{font-size:84px;animation:4.5s ease-in-out infinite demo-gap}& .demo .tile{animation:4.5s ease-in-out infinite demo-pad}& .demo .tile:first-child{animation-name:demo-pad,demo-r1}& .demo .tile:last-child{animation-name:demo-pad,demo-r2}@media (prefers-reduced-motion:reduce){& .demo .demo-parts{column-gap:0;animation:none}& .demo .tile{padding-inline:.09em;animation:none}}& .groups{gap:14px;margin-bottom:20px;display:grid}& .group{background:var(--bg-deep);border-radius:var(--radius);padding:14px 16px 16px}& .group-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}& .group-name{align-items:center;gap:8px;font-size:1.05rem;font-weight:850;display:inline-flex}& .group-name:before{content:"";background:var(--g);border-radius:50%;width:14px;height:14px}& .upto{background:var(--paper);cursor:pointer;border:2px solid #0000;border-radius:999px;min-height:44px;padding:4px 14px;font-size:.92rem;font-weight:750;box-shadow:0 1px 2px #3c280a1a}& .upto:hover{border-color:var(--g)}& .letters{grid-template-columns:repeat(6,minmax(0,64px));gap:10px;display:grid}& .letter{aspect-ratio:1;background:var(--paper);cursor:pointer;border:0;border-radius:16px;padding:0;font-size:34px;line-height:1;box-shadow:0 4px #3c280a1f}& .letter[aria-pressed=true]{background:var(--g);color:#fff}& .options{flex-wrap:wrap;align-items:center;gap:14px 32px;margin-bottom:18px;display:flex}& .label{margin-bottom:6px;font-weight:800;display:block}& .pills{gap:8px;display:inline-flex}& .pill{border:2px solid var(--line);background:var(--paper);cursor:pointer;border-radius:999px;min-height:44px;padding:6px 20px;font-weight:750}& .pill[aria-checked=true]{border-color:var(--ink);background:var(--ink);color:#fff}& .check{align-items:center;gap:10px;max-width:28em;display:flex}& .check input{flex:none;width:24px;height:24px}& .actions{align-items:center;gap:22px;margin:0 0 8px;display:flex}& .link{color:var(--link);cursor:pointer;background:0 0;border:0;min-height:44px;text-decoration:underline}& .hint{color:var(--muted);min-height:1.6em}& .how{max-width:44em;margin-top:34px}& .how ol{padding-left:1.3em}& .how li{margin-bottom:.5em}& .stage{background:var(--bg);outline:none;grid-template-rows:auto minmax(0,1fr) auto;min-height:calc(100dvh - 76px);padding:0 clamp(10px,2vw,32px) clamp(10px,2vh,24px);display:grid}& .stage[hidden]{display:none}& .stage:fullscreen{min-height:100dvh}& .count{text-align:right;color:var(--muted);margin:0;padding-top:10px;font-size:1.1rem;font-weight:750}& .body{touch-action:pan-y;-webkit-user-select:none;user-select:none;place-items:center;min-height:0;display:grid;container-type:size}& .parts{--gap:.4em;justify-content:center;align-items:center;column-gap:var(--gap);font-size:min(40cqh, calc(92cqw / var(--w,3)));color:var(--ink);filter:drop-shadow(2px 0 0 var(--line)) drop-shadow(-2px 0 0 var(--line)) drop-shadow(0 2px 0 var(--line)) drop-shadow(0 -2px 0 var(--line));transition:column-gap var(--dur,.9s) cubic-bezier(.5, 0, .2, 1);line-height:1.12;display:flex}& .parts[data-state=joined]{--gap:0em}& .parts[data-state=apart]{--gap:.4em}& .tile{background:var(--paper);transition:border-radius var(--dur,.9s) ease, padding var(--dur,.9s) ease;border-radius:.22em;padding:.05em .25em .12em;display:inline-flex}& .parts[data-state=joined] .tile{padding-inline:.09em}& .parts[data-state=joined] .tile:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}& .parts[data-state=joined] .tile:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}& .l{padding-bottom:.1em;display:inline-block;position:relative}& .l:after{content:"";background:var(--g);border-radius:.05em;height:.05em;position:absolute;bottom:0;left:20%;right:20%}& .parts.enter .tile{animation:arrive var(--in,.35s) ease-out both}& .parts.enter .tile:nth-child(2){animation-delay:var(--step,.16s)}& .parts.enter .tile:nth-child(3){animation-delay:calc(var(--step,.16s) * 2)}@media (prefers-reduced-motion:reduce){& .parts,& .tile{transition:none}& .parts.enter .tile{animation:none}}& .empty{font-size:1.4rem}& .bar{flex-wrap:wrap;justify-content:center;gap:12px;padding-top:12px;display:flex}& .ctl{border:2px solid var(--line);background:var(--paper);cursor:pointer;border-radius:999px;min-width:64px;min-height:64px;padding:10px 26px;font-size:1.3rem;font-weight:800}& .ctl[hidden],& .btn[hidden]{display:none}& .ctl:hover{border-color:var(--ink)}& .next{min-height:64px;padding-inline:38px;font-size:1.45rem}@media (width<=640px){& .letters{grid-template-columns:repeat(6,minmax(0,1fr))}& .ctl{min-height:56px;padding:8px 16px;font-size:1.1rem}& .next{padding-inline:26px}& .actions{flex-wrap:wrap}}@media print{& .stage{display:none}}}@keyframes demo-pad{0%,25%{padding-inline:.25em}55%,to{padding-inline:.09em}}@keyframes demo-r1{0%,25%{border-radius:.22em}55%,to{border-radius:.22em 0 0 .22em}}@keyframes demo-r2{0%,25%{border-radius:.22em}55%,to{border-radius:0 .22em .22em 0}}@keyframes demo-gap{0%,25%{column-gap:.5em}55%,to{column-gap:0}}@keyframes arrive{0%{opacity:0;transform:translateY(.25em)scale(.9)}}