.ctb{display:grid;gap:1rem;margin-block:.25rem 1rem}.ctb__intro{display:grid;gap:.85rem;border:2px solid var(--color-chocolate);border-radius:var(--radius);padding:1rem;background:#fffaf0}.ctb__intro h2,.ctb__dialog h2{margin:0;font-size:clamp(1.55rem,3vw,2.2rem)}.ctb__intro p{margin:.25rem 0 0}.ctb__eyebrow{color:var(--color-red);font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.ctb__presets{display:flex;flex-wrap:wrap;gap:.45rem}.ctb__presets button{border:1px solid var(--color-chocolate);border-radius:999px;padding:.45rem .75rem;background:white;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}.ctb__presets button:hover,.ctb__presets button:focus-visible{color:white;background:var(--color-red)}
.ctb__cavities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.ctb__cavity{display:grid;min-width:0;gap:.7rem;border:1px solid rgb(24 22 20 / 24%);border-radius:var(--radius);padding:.85rem;background:white}.ctb__cavity.is-complete{border-color:var(--color-red);box-shadow:inset 0 0 0 1px var(--color-red)}.ctb__cavity legend{padding-inline:.35rem;font-family:var(--font-heading);font-size:1.15rem}.ctb__cavity legend small{font-family:var(--font-body);font-size:.65rem;font-weight:700}.ctb__type{display:grid;gap:.25rem}.ctb__type span{font-size:.72rem;font-weight:800}.ctb__type select{width:100%;min-width:0}.ctb__slots{display:grid;gap:.45rem}.ctb__slot{display:grid;grid-template-columns:3rem 1fr;align-items:center;gap:.65rem;width:100%;border:1px solid rgb(24 22 20 / 18%);border-radius:.65rem;padding:.4rem;background:#fffaf0;text-align:left;cursor:pointer}.ctb__slot:hover,.ctb__slot:focus-visible{border-color:var(--color-red)}.ctb__slot-image{display:grid;overflow:hidden;place-items:center;width:3rem;aspect-ratio:1;border-radius:.45rem;background:#ece8de;font-weight:900}.ctb__slot-image img{width:100%;height:100%;object-fit:contain}.ctb__slot span:last-child{display:grid;min-width:0}.ctb__slot small{font-size:.62rem;text-transform:uppercase}.ctb__slot strong{overflow:hidden;font-size:.75rem;text-overflow:ellipsis}.ctb__summary{border:1px solid rgb(24 22 20 / 18%);border-radius:var(--radius);padding:.8rem 1rem;background:#eeede9;font-size:.84rem;font-weight:750}.ctb.is-complete .ctb__summary{border-color:var(--color-red);background:#fff4f5}
.ctb__dialog{width:min(56rem,calc(100% - 2rem));max-height:min(46rem,calc(100% - 2rem));border:0;border-radius:1rem;padding:1rem;background:#fffaf0;box-shadow:0 1rem 4rem rgb(0 0 0 / 28%)}.ctb__dialog::backdrop{background:rgb(0 0 0 / 60%)}.ctb__dialog-header{display:flex;align-items:start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.ctb__close{border:0;background:transparent;font-size:2rem;line-height:1;cursor:pointer}.ctb__flavors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.ctb__flavor{display:grid;gap:.5rem;border:1px solid rgb(24 22 20 / 20%);border-radius:.75rem;padding:.6rem;background:white;text-align:left;cursor:pointer}.ctb__flavor[hidden]{display:none}.ctb__flavor:hover,.ctb__flavor:focus-visible{border-color:var(--color-red);box-shadow:inset 0 0 0 1px var(--color-red)}.ctb__flavor-image{display:block;overflow:hidden;width:100%;aspect-ratio:1;border-radius:.5rem;background:#f1ede5}.ctb__flavor-image img{width:100%;height:100%;object-fit:contain}.ctb__flavor strong{font-size:.78rem}.ctb__empty{padding:2rem;text-align:center}
@media(max-width:560px){.ctb__cavities{grid-template-columns:1fr}.ctb__flavors{grid-template-columns:repeat(2,minmax(0,1fr))}}