@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap";.dbb-section{--dbb-ink: #211e1b;--dbb-stone: #f1ede4;--dbb-stone-dark: #e4ddd0;--dbb-line: #b7ae9d;--dbb-teal: #2b565a;--dbb-rust: #a8551e;--dbb-cream: #faf8f3;background:var(--dbb-cream);color:var(--dbb-ink);padding:4rem 1.5rem}.dbb-inner{max-width:72rem;margin:0 auto}.dbb-head{max-width:34rem;margin-bottom:2.5rem}.dbb-eyebrow{font-family:IBM Plex Mono,monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dbb-rust);margin:0 0 .6rem}.dbb-title{font-family:Fraunces,serif;font-weight:600;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.08;margin:0 0 .75rem;color:var(--dbb-ink)}.dbb-sub{font-family:Inter,sans-serif;font-size:.98rem;line-height:1.5;color:#514c44;margin:0}.dbb-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:start}@media(max-width:860px){.dbb-layout{grid-template-columns:1fr}}.dbb-palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.9rem}.dbb-bead{font-family:Inter,sans-serif;display:flex;flex-direction:column;align-items:center;gap:.4rem;background:var(--dbb-stone);border:1px solid var(--dbb-stone-dark);border-radius:.9rem;padding:.9rem .6rem .75rem;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease;text-align:center}.dbb-bead:hover{border-color:var(--dbb-teal);background:var(--dbb-cream);transform:translateY(-2px)}.dbb-bead:active{transform:translateY(0) scale(.96)}.dbb-bead:focus-visible{outline:2px solid var(--dbb-teal);outline-offset:2px}.dbb-bead-swatch{width:4.5rem;height:4.5rem;border-radius:50%;overflow:hidden;background:var(--dbb-stone-dark);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #211e1b0f}.dbb-bead-swatch img{width:100%;height:100%;object-fit:cover;display:block}.dbb-bead-name{font-size:.78rem;font-weight:500;line-height:1.2;color:var(--dbb-ink)}.dbb-bead-price{font-family:IBM Plex Mono,monospace;font-size:.72rem;color:var(--dbb-rust)}.dbb-empty{font-family:Inter,sans-serif;color:#78715f;font-size:.9rem;grid-column:1 / -1}.dbb-builder-card{position:sticky;top:1.5rem;background:var(--dbb-stone);color:var(--dbb-ink);border-radius:1.1rem;padding:1.6rem 1.5rem 1.5rem}.dbb-builder-title{font-family:Fraunces,serif;font-weight:600;font-size:1.2rem;margin:0 0 1.1rem}.dbb-circle-wrap{position:relative;width:min(78%,17rem);aspect-ratio:1 / 1;margin:0 auto 1.4rem}.dbb-circle-guide{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.dbb-circle-guide circle{fill:none;stroke:#a8551e73;stroke-width:.6;stroke-dasharray:.6 2.4}.dbb-circle{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.dbb-circle-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Inter,sans-serif;font-size:.78rem;color:#8f887c;margin:0;text-align:center;width:6.5rem;pointer-events:none}.dbb-circle-bead{position:absolute;top:0;left:0;border-radius:50%;padding:0;margin:0;border:none;outline:none;appearance:none;-webkit-appearance:none;overflow:hidden;cursor:grab;touch-action:none;background:var(--dbb-stone-dark);box-shadow:0 5px 14px #211e1b59,0 1px 2px #211e1b33;transition:transform .5s cubic-bezier(.22,1.4,.36,1),opacity .3s ease;will-change:transform}.dbb-circle-bead:hover{z-index:2;filter:brightness(1.08)}.dbb-circle-bead:focus-visible{outline:2px solid var(--dbb-rust);outline-offset:2px}.dbb-circle-bead img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transform:scale(1.45)}.dbb-summary{border-top:1px solid rgba(250,248,243,.16);padding-top:1.1rem}.dbb-summary-row{display:flex;justify-content:space-between;align-items:baseline;font-family:IBM Plex Mono,monospace;margin-bottom:1rem}#dbb-count{font-size:.8rem;color:#b8b2a6}#dbb-total{font-size:1.3rem;color:var(--dbb-ink)}.dbb-actions{display:flex;gap:.6rem}.dbb-btn{font-family:Inter,sans-serif;font-weight:600;font-size:.85rem;border-radius:.6rem;padding:.7rem 1rem;cursor:pointer;border:1px solid transparent;transition:opacity .15s ease,background .15s ease}.dbb-btn-ghost{background:transparent;border-color:#faf8f34d;color:var(--dbb-cream);flex:0 0 auto}.dbb-btn-ghost:hover{border-color:var(--dbb-cream)}.dbb-btn-primary{background:var(--dbb-rust);color:var(--dbb-cream);flex:1 1 auto}.dbb-btn-primary:hover:not(:disabled){opacity:.9}.dbb-btn-primary:disabled{background:#6b6459;cursor:not-allowed;opacity:.7}.dbb-btn:focus-visible{outline:2px solid var(--dbb-cream);outline-offset:2px}.dbb-note{font-family:Inter,sans-serif;font-size:.78rem;color:#e0a06a;margin:.7rem 0 0;min-height:1em}@media(prefers-reduced-motion:reduce){.dbb-bead,.dbb-circle-bead,.dbb-btn{transition:none}}.dbb-circle-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;max-width:110px;height:auto;opacity:.22;pointer-events:none;z-index:0;transition:opacity .3s ease}
/*# sourceMappingURL=/cdn/shop/t/2/assets/diy-bracelet-builder.css.map */