.wordmark{font-family:var(--font-headline)}.bead{width:var(--bead-size,28px);height:var(--bead-size,28px);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.bead-sm .bead,.bead.bead-sm{--bead-size:20px}.bead-md .bead{--bead-size:24px}.bead--round,.bead--pearl{background:radial-gradient(circle at 32% 28%, var(--bead-shine) 0 9%, color-mix(in oklch, var(--bead) 60%, var(--bead-shine)) 20%, var(--bead) 52%, color-mix(in oklch, var(--bead) 78%, var(--bead-letter-ink)) 100%);box-shadow:0 1px 2px var(--tray-shadow);border-radius:9999px}.bead--pearl{background:radial-gradient(circle at 34% 30%, var(--bead-shine) 0 16%, var(--bead-pearl) 45%, color-mix(in oklch, var(--bead-pearl) 82%, var(--bead-lilac)) 80%, color-mix(in oklch, var(--bead-pearl) 70%, var(--bead-letter-ink)) 100%)}.bead--clear{background:radial-gradient(circle at 32% 28%, var(--bead-shine) 0 10%, var(--bead-clear) 40%, color-mix(in oklch, var(--bead-sky) 55%, transparent) 100%);border:1px solid color-mix(in oklch, var(--bead-sky) 70%, transparent);border-radius:9999px}.bead--letter{width:calc(var(--bead-size,28px) - 2px);height:calc(var(--bead-size,28px) - 2px);border-radius:calc(var(--radius) * .6);background:var(--bead-pearl);color:var(--bead-letter-ink);border:1px solid var(--tray-edge);font-family:var(--font-accent);font-weight:700;font-size:calc(var(--bead-size,28px) * .5);box-shadow:inset 0 -2px 0 color-mix(in oklch, var(--bead-letter-ink) 10%, transparent), 0 1px 2px var(--tray-shadow);line-height:1}.bead svg{width:100%;height:100%;filter:drop-shadow(0 1px 1px var(--tray-shadow));overflow:visible}.cord{background:var(--cord);flex-shrink:0;display:block}.cord--v{width:2px}.cord--h{height:2px}.cord--chain.cord--v{background:repeating-linear-gradient(to bottom, var(--cord) 0 4px, transparent 4px 6px);width:3px}.cord--chain.cord--h{background:repeating-linear-gradient(to right, var(--cord) 0 4px, transparent 4px 6px);height:3px}.strap-ring{border:3px solid var(--cord);border-radius:9999px;flex-shrink:0;width:22px;height:22px;display:block}.strap-knot{background:var(--cord);border-radius:9999px;flex-shrink:0;width:8px;height:8px;display:block}.tray-well{background:var(--tray-well);box-shadow:inset 0 2px 6px var(--tray-shadow), inset 0 0 0 1px var(--tray-edge)}.rail{background:linear-gradient(to bottom, color-mix(in oklch, var(--cord-gold) 55%, var(--bead-shine)), var(--cord-gold) 60%, color-mix(in oklch, var(--cord-gold) 70%, var(--bead-letter-ink)))}@media (prefers-reduced-motion:no-preference){.bead-drop{animation:.28s cubic-bezier(.2,.7,.3,1) both bead-drop}.bead-drop-x{animation:.28s cubic-bezier(.2,.7,.3,1) both bead-drop-x}.compartment:active .compartment-pile{transform:translateY(2px)}.compartment-pile{transition:transform .15s ease-out}.hang:hover .hang-strap,.hang:focus-visible .hang-strap{animation:.7s ease-in-out hang-sway}}@keyframes bead-drop{0%{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:translateY(0)}}@keyframes bead-drop-x{0%{opacity:0;transform:translate(28px)}to{opacity:1;transform:translate(0)}}@keyframes hang-sway{0%{transform:rotate(0)}30%{transform:rotate(2.5deg)}65%{transform:rotate(-1.5deg)}to{transform:rotate(0)}}