*{box-sizing:border-box;--transition-duration:0.2s}@media(prefers-reduced-motion:reduce){*{--transition-duration:0s}}:has(>*>#clocks-and-timers){display:flex;max-height:100dvh;height:100dvh}:has(>#clocks-and-timers){background-color:var(--background,#333);color:var(--foreground,#DDD);margin:0;width:100%;flex:1 1;display:flex;flex-flow:column nowrap;container-type:size}#clocks-and-timers{overflow:auto;scrollbar-gutter:stable both-edges;flex:1 1;list-style:none;height:100%;max-height:100%;max-width:100%;margin:0 auto;padding:1rem;display:grid;gap:.875rem;align-content:safe center;justify-content:safe center;--cols:4;--rows:1;--col-gaps:calc((var(--cols) - 1) * 0.875rem);--row-gaps:calc((var(--rows) - 1) * 0.875rem);--item-size:min(calc((100cqw - 4rem - var(--col-gaps)) / var(--cols)),
      calc((100cqh - 4.5rem - var(--row-gaps)) / var(--rows)));grid-template-columns:repeat(var(--cols),var(--item-size));grid-auto-rows:var(--item-size);font-family:Open Sans,segoe ui,Tahoma,Geneva,Verdana,sans-serif;font-size:1rem}#clocks-and-timers:has(>li:only-child){--cols:1;--rows:1}#clocks-and-timers:has(>li:nth-child(2):last-child){--cols:2;--rows:1}#clocks-and-timers:has(>li:nth-child(3):last-child),#clocks-and-timers:has(>li:nth-child(4):last-child){--cols:2;--rows:2}#clocks-and-timers:has(>li:nth-child(5):last-child),#clocks-and-timers:has(>li:nth-child(6):last-child){--cols:3;--rows:2}#clocks-and-timers:has(>li:nth-child(7):last-child),#clocks-and-timers:has(>li:nth-child(8):last-child),#clocks-and-timers:has(>li:nth-child(9):last-child){--cols:3;--rows:3}#clocks-and-timers li{position:relative;width:100%;aspect-ratio:1/1;min-width:0;margin:0;border:1px solid var(--accent,royalblue);border-radius:1rem;display:flex}#clocks-and-timers li :not(:defined){visibility:hidden}#controls{display:block;margin:0;max-height:2.5rem;overflow:hidden;z-index:1}#controls>fieldset{display:flex;flex-flow:row-reverse wrap;overflow:hidden;align-items:center;justify-content:center;gap:min(2rem,5vw);border:none;margin:0;padding:0;max-width:100%}#controls>fieldset button,#controls>fieldset select{min-height:2.5rem;min-width:2.5rem;height:auto;border-radius:3.5rem;text-align:center;font-size:1rem;cursor:pointer;color:var(--foreground,#DDD);background-color:var(--background,#333);border:1px solid var(--foreground,#DDD);-webkit-user-select:none;user-select:none}#controls>fieldset button{padding:.25rem .5rem;border-radius:3.5rem}#controls>fieldset select{padding:.25rem 0;border-radius:.5rem}#controls>fieldset button:disabled,#controls>fieldset select:disabled{opacity:.3;cursor:not-allowed}#clocks-and-timers .drag-handle{position:absolute;bottom:.5rem;right:.5rem;width:2rem;height:2rem;display:grid;place-content:center;font-size:1.25rem;line-height:1;padding:0;color:var(--foreground,#DDD);background-color:var(--background,#333);border:1px solid var(--foreground,#DDD);border-radius:3.5rem;cursor:grab;user-select:none;touch-action:none;z-index:1;opacity:0;pointer-events:none;transition:opacity var(--transition-duration,.2s)ease,pointer-events .6s allow-discrete}#clocks-and-timers li:hover .drag-handle,#clocks-and-timers li:focus-within .drag-handle{opacity:1;pointer-events:auto}#clocks-and-timers li:has(.drag-handle:active),#clocks-and-timers li[data-dragging]{opacity:.25}html[data-dragging],html[data-dragging] *{cursor:grabbing!important}#clocks-and-timers li[data-drop=before]{box-shadow:inset 5px 0 0 0 var(--accent,royalblue)}#clocks-and-timers li[data-drop=after]{box-shadow:inset -5px 0 0 0 var(--accent,royalblue)}.sr-only{position:absolute;left:-1e4px;top:auto;width:1px;height:1px;overflow:hidden;-webkit-user-select:none;user-select:none}