.tempo-duration{display:grid;gap:.75rem;min-width:0}.tempo-duration__toolbar,.tempo-duration__flow,.tempo-duration__field-header{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.tempo-duration__toolbar,.tempo-duration__field-header{justify-content:space-between}.tempo-duration__toolbar{justify-content:flex-end}.tempo-duration__modes{display:inline-flex;gap:.25rem}.tempo-duration__mode,.tempo-duration__input{border:1px solid var(--gray-300);border-radius:.375rem;background:var(--gray-50);color:var(--gray-950);font-size:.875rem;padding:.375rem .625rem}.tempo-duration__mode{cursor:pointer;border-color:transparent;border-radius:0;border-bottom-color:var(--gray-300);background:transparent}.tempo-duration__mode[aria-pressed=true]{border-bottom-color:var(--primary-600);color:var(--primary-700)}.tempo-duration__input{display:block;width:100%;font-family:monospace}.tempo-duration__text{display:flex;align-items:center;border:1px solid var(--gray-300);border-radius:.375rem;background:var(--gray-50);color:var(--gray-950);padding:.375rem .625rem}.tempo-duration__text-input{flex:1;min-width:0;border:0;background:transparent;color:inherit;font-family:monospace;font-size:.875rem;outline:none;padding:0}.tempo-duration__text-clear{margin-left:auto;color:var(--gray-500);cursor:pointer;font-size:1.25rem;line-height:1}.tempo-duration__visual,.tempo-duration__preset{position:relative}.tempo-duration__part{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--gray-300);border-radius:.375rem;background:transparent;color:var(--gray-950);cursor:pointer;font-size:.875rem;padding:.4rem .6rem}.tempo-duration__part:after,.tempo-duration__preset-trigger:after{content:"\2304";color:var(--gray-500);margin-left:.2rem}.tempo-duration__part-label{color:var(--gray-600)}.tempo-duration__part-value{font-weight:600}.tempo-duration__part--active{border-color:var(--primary-500);background:color-mix(in srgb,var(--primary-500) 7%,transparent)}.tempo-duration__fields{position:absolute;top:calc(100% + .5rem);z-index:50;width:min(20rem,100%)}.tempo-duration__fields--above{top:auto;bottom:calc(100% + .5rem)}.tempo-duration__field{display:grid;gap:.75rem;border:1px solid var(--gray-200);border-radius:.5rem;background:var(--gray-50);box-shadow:0 .75rem 2rem color-mix(in srgb,var(--gray-950) 16%,transparent);padding:.75rem}.tempo-duration__label{color:var(--gray-700);font-size:.875rem;font-weight:500}.tempo-duration__quick-values{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.3rem}.tempo-duration__quick-value{border:1px solid var(--gray-300);border-radius:.3rem;background:transparent;color:var(--gray-700);cursor:pointer;font-size:.8rem;min-height:2rem}.tempo-duration__quick-value[aria-pressed=true]{border-color:var(--primary-500);background:color-mix(in srgb,var(--primary-500) 16%,transparent);color:var(--primary-700);font-weight:600}.tempo-duration__preset-trigger{display:inline-flex;align-items:center;gap:.5rem;max-width:10rem}.tempo-duration__preset-trigger span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tempo-duration__preset-panel{position:absolute;right:0;top:calc(100% + .25rem);z-index:50;width:max-content;min-width:100%;max-width:min(18rem,calc(100vw - 2rem));border:1px solid var(--gray-200);border-radius:.5rem;background:var(--gray-50);box-shadow:0 .75rem 2rem color-mix(in srgb,var(--gray-950) 16%,transparent);padding:.25rem}.tempo-duration__preset-option{display:block;width:100%;border-radius:.375rem;color:var(--gray-700);cursor:pointer;font-size:.875rem;overflow-wrap:anywhere;padding:.4rem .6rem;text-align:left}.tempo-duration__preset-option:hover,.tempo-duration__preset-option[aria-pressed=true]{background:color-mix(in srgb,var(--primary-500) 10%,transparent);color:var(--primary-700)}.tempo-duration__close{color:var(--gray-500);cursor:pointer;font-size:1.25rem;line-height:1;padding:.25rem}.tempo-duration__hint{margin:0;color:var(--danger-600);font-size:.75rem}.tempo-duration__input:focus-visible,.tempo-duration__text:focus-within,.tempo-duration__mode:focus-visible,.tempo-duration__preset-option:focus-visible,.tempo-duration__part:focus-visible,.tempo-duration__close:focus-visible,.tempo-duration__quick-value:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}.tempo-duration__input:disabled,.tempo-duration__mode:disabled,.tempo-duration__part:disabled,.tempo-duration__quick-value:disabled{cursor:not-allowed;opacity:.6}.tempo-duration__text-clear:disabled{cursor:not-allowed;opacity:.6}